/* Practitioner's panel.
 *
 * Self-contained on purpose: the panel is never themed by the establishment
 * (F67, dossie 6.1), so it imports nothing from web/themes and always wears the
 * system's neutral skin. That is a product decision, not a limitation.
 *
 * Written for someone working with their hands busy (genese 4.4): large
 * targets, high contrast, one-handed reach, and no gesture that lacks a
 * tappable equivalent. Tap targets are 48px here, not the 44px of the public
 * pages (dossie 6.6). */

:root {
  /* Declarado de propósito. Sem isto o Chrome do Android aplica o seu
     escurecimento automático a uma página que nunca foi desenhada para fundo
     escuro, e os contrastes da agenda deixam de se ler. */
  color-scheme: light;
  --devez-azul: #062d4d;
  --devez-turquesa: #079a99;
  --devez-coral: #ff5b3d;
  --superficie: #ffffff;
  --superficie-alt: #f1f4f7;
  --superficie-fundo: #e7ebf0;
  --texto: #0c1117;
  --texto-suave: #3f4b59;
  --texto-tenue: #65717e;
  --borda: #c9d1db;
  --borda-forte: #aab5c2;

  --acento: #1f6feb;
  --acento-suave: #eaf2ff;
  --acento-contraste: #ffffff;
  /* Contrato único: qualquer sinal lateral é uma barra interior autónoma. */
  --indicador-largura: 4px;
  --indicador-inset: 10px;
  --indicador-recuo: 8px;
  --indicador-raio: 999px;

  --ok: #12805c;
  --ok-l: #e7f6f0;
  --ok-texto: #0d6648;
  --aviso: #a15c07;
  --aviso-l: #fdf4e3;
  --aviso-texto: #744000;
  --perigo: #c0392f;
  --perigo-l: #fdeeec;
  --perigo-texto: #8f2821;

  --raio: 14px;
  --raio-grande: 22px;
  --sombra: 0 2px 5px rgb(11 22 34 / 8%), 0 14px 32px -20px rgb(11 22 34 / 28%);
  --sombra-elevada: 0 18px 42px -14px rgb(11 22 34 / 28%);

  /* 48px and not 44px: dossie 6.6 asks for a larger target in the panel,
     because the practitioner is holding scissors in the other hand. */
  --alvo-toque: 48px;

  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;

  /* The visual span is 08:00 to 23:00, fifteen hours, Monday to Sunday
     (F20, E1/R5). Block heights are percentages of it, which is what makes a
     60 minute block exactly twice a 30 minute one. */
  --altura-hora: 58px;
  --altura-grelha: calc(var(--altura-hora) * 15);
  --altura-cabecalho-coluna: 76px;
  --largura-calha: 52px;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --transicao: 130ms cubic-bezier(0.2, 0, 0.2, 1);
}

html[data-painel-acento="turquesa"] { --acento:#087f7e; --acento-suave:#e3f5f3; }
html[data-painel-acento="azul-devez"] { --acento:#0b5688; --acento-suave:#e7f0f7; }
html[data-painel-acento="coral"] { --acento:#c74630; --acento-suave:#fbece8; }
.escolha-cor-painel{grid-template-columns:repeat(3,minmax(0,1fr))}.escolha-cor-painel label{display:flex;align-items:center;gap:.55rem;padding:.8rem;border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie-alt);font-weight:700}.escolha-cor-painel input{width:auto;min-height:auto}.cor-painel{width:1.25rem;height:1.25rem;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--borda)}.cor-painel--turquesa{background:#079a99}.cor-painel--azul{background:#062d4d}.cor-painel--coral{background:#ff5b3d}.escolha-cor-painel button{grid-column:1/-1;justify-self:start}
@media(max-width:40rem){.escolha-cor-painel{grid-template-columns:1fr}}

/* Licença comercial suspensa: o dono continua a entrar para perceber o
   estado, mas a operação fica visual e tecnicamente bloqueada. */
.licenca-cortina{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:1.25rem;background:rgba(245,247,250,.68);backdrop-filter:blur(3px)}
.licenca-aviso{position:relative;overflow:hidden;width:min(32rem,100%);padding:2rem;border:1px solid #d7a4a4;border-radius:1rem;background:#fff;box-shadow:0 1.5rem 4rem rgba(35,20,20,.2);text-align:center;color:#25313b}
.licenca-aviso h1{margin:.2rem 0 .65rem;color:#9f2f2f}.licenca-aviso p{font-size:1.05rem;margin:.3rem 0}.licenca-aviso small{display:block;color:#687682;margin:.8rem 0 1.25rem}.licenca-aviso form{margin:0}.licenca-marca{position:absolute;inset:auto -1rem -1.8rem auto;font-size:6rem;font-weight:800;letter-spacing:-.08em;color:rgba(159,47,47,.06);transform:rotate(-8deg);pointer-events:none}.licenca-conteudo-bloqueado,.licenca-cortina~.cabecalho-painel{filter:grayscale(1);opacity:.38;pointer-events:none;user-select:none}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte);
  line-height: 1.45;
  color: var(--texto);
  background: var(--superficie-fundo);
  -webkit-font-smoothing: antialiased;
}

.icone-devez{display:inline-block;width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.18em;color:currentColor}.icone-menu .icone-devez{width:1.3rem;height:1.3rem;color:#079a99}.cabecalho-seccao h1>.icone-devez,.topo-pagina h1>.icone-devez{color:#079a99}

main { padding: var(--espaco-5) var(--espaco-4) var(--espaco-6); }

.saltar-para-conteudo {
  position: absolute;
  left: -9999px;
}
.saltar-para-conteudo:focus {
  left: var(--espaco-4);
  top: var(--espaco-4);
  z-index: 100;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--acento);
  color: var(--acento-contraste);
  border-radius: var(--raio);
}

/* --------------------------------------------------------------- cabeçalho */

.cabecalho-painel {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3) var(--espaco-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.cabecalho-identidade, .identidade-estabelecimento {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.marca-estabelecimento {
  display: flex;
  gap: var(--espaco-3);
  align-items: center;
  min-width: 0;
}
.marca-devez-painel {
  flex: 0 0 auto;
  width: 68px;
  height: 42px;
  object-fit: contain;
}
/* Sem a legenda por baixo, o nome do estabelecimento tem altura para duas
   linhas: "Nutrição Central" deixa de ser "Nutrição Ce...". */
.identidade-estabelecimento{display:grid;min-width:0;line-height:1.15}
.identidade-estabelecimento strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:break-word;font-size:1.14rem;font-weight:800}
.icone-menu {
  display: inline-grid;
  flex: 0 0 1.6rem;
  width: 1.6rem;
  place-items: center;
  font-size: 1.08rem;
  line-height: 1;
  filter: saturate(0.9);
}

.nav-painel { display: flex; flex-wrap: wrap; gap: var(--espaco-1); }

.nav-painel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: 0 var(--espaco-4);
  font-weight: 650;
  color: var(--texto-suave);
  text-decoration: none;
  border-radius: var(--raio);
  transition: background var(--transicao), color var(--transicao);
}
.nav-painel a:hover { color: var(--texto); background: var(--superficie-alt); }
.nav-painel a[aria-current], .nav-painel a.activo, .nav-painel a.ativo {
  color: var(--acento);
  background: var(--acento-suave);
  font-weight: 750;
  box-shadow: inset 3px 0 0 var(--acento);
}

/* Mobile: an off-canvas side menu keeps six destinations readable without
   crushing the header. Desktop promotes the same navigation to a permanent
   left rail below, so there is only one menu and one mental model. */
.botao-menu-painel {
  order: -1;
  display: inline-flex;
  gap: var(--espaco-2);
  align-items: center;
  min-height: 42px;
  padding: 0 var(--espaco-3);
  font: inherit;
  font-weight: 650;
  color: var(--texto);
  background: var(--superficie-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.nav-painel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  width: min(19rem, 86vw);
  padding: var(--espaco-4);
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--espaco-1);
  overflow-y: auto;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  box-shadow: var(--sombra-elevada);
  transform: translateX(-105%);
  transition: transform 180ms cubic-bezier(0.2, 0, 0.2, 1);
  pointer-events: none;
}
.nav-painel a { width: 100%; }
.menu-painel-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--alvo-toque);
  padding: 0 var(--espaco-2) var(--espaco-3);
  margin-bottom: var(--espaco-2);
  border-bottom: 1px solid var(--borda);
}
.menu-painel-topo button {
  width: 40px;
  height: 40px;
  font-size: 1.4rem;
  color: var(--texto-suave);
  background: transparent;
  border: 0;
  border-radius: var(--raio);
}
.fundo-menu-painel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  background: rgb(11 22 34 / 48%);
  border: 0;
}
body.menu-painel-aberto { overflow: hidden; }
body.menu-painel-aberto .nav-painel { transform: translateX(0); pointer-events: auto; }
body.menu-painel-aberto .fundo-menu-painel { display: block; }

/* The drawer lives inside the header, and the header's own z-index creates a
   stacking context: the drawer's z-index: 60 only ranks it against its
   siblings, not against the page. To everything outside, the whole header —
   drawer included — is worth the header's 30. The backdrop sits outside the
   header at 50, so it painted on top of the menu: the drawer looked greyed out
   and every tap landed on the backdrop, which closed the menu instead of
   following the link.
   Lifting the header above the backdrop while the menu is open puts the drawer
   back in front. On desktop the backdrop is display:none, which is why the bug
   only ever showed on a phone. */
body.menu-painel-aberto .cabecalho-painel { z-index: 70; }

.distintivo {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: var(--espaco-2);
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--acento-contraste);
  background: var(--texto-suave);
  border-radius: 999px;
}
.distintivo--aprovar { background: var(--aviso); }
.distintivo--nao-lidas { background: var(--acento); }

/* --------------------------------------------------------- barra da agenda */

.barra-agenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-4);
}

.titulo-agenda {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.navegacao-datas { display: flex; gap: var(--espaco-2); align-items: center; }

.botao-navegacao {
  display: inline-grid;
  place-items: center;
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  padding: 0 var(--espaco-3);
  font: inherit;
  font-weight: 550;
  color: var(--texto);
  text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.botao-navegacao:hover { border-color: var(--borda-forte); background: var(--superficie-alt); }

/* The day/week switch is the one control a practitioner hunts for, so it is
   built as a visible segmented pair rather than two plain links. */
.alternador-vista {
  display: inline-flex;
  padding: 3px;
  background: var(--superficie-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.alternador-vista a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--alvo-toque) - 8px);
  padding: 0 var(--espaco-4);
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  border-radius: 7px;
  transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.alternador-vista a:hover { color: var(--texto); }
.alternador-vista a.activo, .alternador-vista a[aria-current] {
  color: var(--texto);
  background: var(--superficie);
  box-shadow: 0 1px 3px rgb(11 22 34 / 14%);
}
.zoom-agenda { display: inline-flex; align-items: center; min-height: 40px; overflow: hidden; border: 1px solid var(--borda); border-radius: 7px; background: var(--superficie-alt); }
.zoom-agenda button { width: 38px; min-height: 38px; padding: 0; font: inherit; font-weight: 800; background: transparent; border: 0; cursor: pointer; }
.zoom-agenda button:disabled { opacity: .3; cursor: default; }
.zoom-agenda output { min-width: 3.3rem; color: var(--texto-suave); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: center; }

/* --------------------------------------------------------------- a grelha */

.grelha-agenda {
  display: grid;
  grid-template-columns: var(--largura-calha) 1fr;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  touch-action: pan-x pan-y pinch-zoom;
}

.calha-horas {
  position: relative;
  height: calc(var(--altura-cabecalho-coluna) + var(--altura-grelha));
  padding-top: var(--altura-cabecalho-coluna);
  border-right: 1px solid var(--borda);
  background: var(--superficie-alt);
}

.marca-hora {
  height: var(--altura-hora);
  padding-right: var(--espaco-2);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-tenue);
  text-align: right;
  /* Nudged up so the label sits on the line it names, not below it. */
  transform: translateY(-0.55em);
}

.colunas-agenda {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(calc(9rem * var(--zoom-agenda, 1)), 1fr);
  overflow-x: auto;
}

/* Seven columns will not fit a phone; below the breakpoint the week scrolls
   sideways with each day still wide enough to read. */
@media (max-width: 60rem) {
  .colunas-agenda { grid-auto-columns: minmax(9rem, 1fr); }
}

@media (max-width: 40rem) {
  main { padding: var(--espaco-3) var(--espaco-2) var(--espaco-5); }
  .cabecalho-painel { flex-wrap: nowrap; padding: var(--espaco-2) var(--espaco-3); }
  .cabecalho-identidade { order: 1; min-width: 0; margin-left: auto; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .cabecalho-identidade .marca-estabelecimento { flex-direction: row-reverse; }
  .avatar-estabelecimento { width: 38px; height: 38px; }
  .barra-agenda { align-items: stretch; }
  .navegacao-datas { width: 100%; display: grid; grid-template-columns: auto 1fr auto; }
  .titulo-agenda { align-self: center; overflow: hidden; font-size: 1rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .acoes-agenda { width: 100%; justify-content: space-between; margin-top: 0; }
  .grelha-agenda { grid-template-columns: 44px 1fr; }
  .colunas-agenda {
    grid-auto-columns: max(2.75rem, calc((100vw - 4.5rem) * var(--zoom-agenda, 1)));
    scroll-snap-type: x mandatory;
  }
  .coluna-dia { scroll-snap-align: start; }
  .cabecalho-coluna { min-height: 58px; padding: var(--espaco-1); gap: var(--espaco-1); }
  .cabecalho-coluna .botao-criar, .cabecalho-coluna .botao-bloquear { min-height: 38px; padding: 0 var(--espaco-2); font-size: 0.72rem; }
  .bloco-topo { padding-right: 28px; }
  .bloco-agenda { font-size: 0.74rem; }
  .agenda-zoom-compacto .cabecalho-coluna { min-height: 42px; }
  .agenda-zoom-compacto .bloco-servicos,
  .agenda-zoom-compacto .bloco-estado,
  .agenda-zoom-compacto .etiqueta-origem { display: none; }
  .agenda-zoom-compacto .data-coluna { margin: auto; }
  .agenda-zoom-compacto .dia-semana { font-size: .58rem; }
  .agenda-zoom-compacto .dia-mes { font-size: .8rem; }
  .agenda-zoom-compacto .bloco-agenda {
    left: 1px; right: 1px; font-size: .58rem;
    /* O recuo esquerdo tem de deixar passar a barra da cor: ela ocupa de 3px
       a 7px, e o texto começava aos 3px, por baixo dela. */
    padding: 1px 3px 1px 10px;
    --indicador-largura: 4px;
    --indicador-recuo: 3px;
    --indicador-inset: 3px;
  }
  .agenda-zoom-compacto .bloco-topo { display: grid; padding: 0; line-height: 1.05; }
  .agenda-zoom-compacto .bloco-cliente { overflow: hidden; text-overflow: ellipsis; }
  .dialogo { width: calc(100vw - 2 * var(--espaco-2)); padding: var(--espaco-4); }
}

/* =============================================================================
   AGENDA: O QUE CABE EM CADA ZOOM

   Leitura obrigatória antes de acrescentar seja o que for ao cartão da
   marcação. O raciocínio completo está em docs/zoom.md; aqui ficam as medidas
   e, sobretudo, as armadilhas — todas elas já custaram um erro a alguém.

   -- AS MEDIDAS --------------------------------------------------------------

   Aparelho de referência: Pixel 8 Pro, 412px de viewport. `--altura-hora` é
   58px, e a duração mais curta em uso é de vinte minutos: 19,3px de cartão.

   O zoom muda a LARGURA da coluna. Não muda a altura: essa vem da duração, e
   um cartão de vinte minutos é igualmente fino a 42% e a 100%.

     zoom   coluna   largura útil   altura útil (20 min)
      14%     48px        27px            ~15px
      20%     68px        47px            ~15px
      28%     95px        74px            ~15px
      42%    143px       112px            ~15px
      62%    211px       180px            ~15px
     100%    340px       309px            ~15px

   Daí os limiares 58, 93, 146 e 244: são os pontos médios entre estas
   larguras. Não são números redondos por acaso e não se mudam à mão — se
   forem precisos outros, refaz a conta com as medidas novas.

   -- ARMADILHA 1: ESPECIFICIDADE ---------------------------------------------

   `.agenda-zoom-compacto .bloco-topo` tem DUAS classes. Uma regra de
   contentor escrita `.bloco-topo { display: flex }` tem UMA. A consulta casa,
   a regra aplica-se, e perde a mesma no desempate — o cartao fica empilhado
   num zoom onde devia estar em linha, e nada assinala o problema.

     ERRADO   @container (...) { .bloco-topo { display: flex } }
     CERTO    @container (...) { .bloco-agenda .bloco-topo { display: flex } }

   Isto esta fixado por teste: TestRegrasDeContentorGanhamAosDegraus.

   -- ARMADILHA 2: ORDEM ENTRE CONSULTAS QUE CASAM AO MESMO TEMPO -------------

   Um cartao de vinte minutos casa com `max-height:20px`, `max-height:30px` e
   `max-height:42px` ao mesmo tempo. Com a mesma especificidade ganha a ultima
   do ficheiro. E por isso que a seccao do cartao baixo esta no FIM do
   painel.css, e nao junto das outras: precisa de ser a ultima palavra.

   -- ARMADILHA 3: RESERVA QUE NAO SE DEVOLVE --------------------------------

   Quando um elemento sai, o `padding` que ele obrigava a reservar tem de sair
   com ele. Os selos reservavam 2,45rem a direita; escondidos, esse recuo
   continuava la e cortava o nome do cliente. O mesmo com a barra da cor a
   esquerda: `padding-left: 16px` sem barra e um buraco.

   -- ARMADILHA 4: DUAS REGRAS PARA O MESMO ESTADO ---------------------------

   As tres formas do nome (inteiro, curto, proprio) escondem-se com
   `.bloco-topo .bloco-cliente.bloco-cliente--curto`, com a classe repetida de
   proposito: a regra base `.bloco-topo .bloco-cliente` vem muito mais abaixo
   neste ficheiro e, com a mesma especificidade, ganhava — os tres nomes
   apareciam ao mesmo tempo em todos os zooms acima dos 20%.

   -- ARMADILHA 5: O QUE E CONTINUO NAO SE FAZ EM DEGRAUS --------------------

   Mostrar ou nao mostrar o apelido e discreto: e um degrau. O corpo de letra
   e continuo, e por isso e uma recta em `cqw` (1cqw = 1% da largura real do
   cartao), ajustada por minimos quadrados aos tamanhos afinados na
   referencia. Nunca acrescentes um degrau de tamanho para um telemovel
   especifico — e o caminho para uma escada impossivel de manter.

   -- O QUE NUNCA DESAPARECE -------------------------------------------------

   O nome do cliente e os botoes de marcar e bloquear. Encolhem; nao somem.
   O que sai primeiro e o que ja esta dito noutro sitio do ecra: a duracao,
   porque a altura do cartao ja a diz.
   ========================================================================== */

/* ----------------------------------------- agenda: detalhe conforme o zoom */
/* Empilhados, hora, duração e nome cabem em qualquer zoom, por isso nenhum
   texto é sacrificado. O que sai são os selos de estado, repetição e compras:
   libertam a largura que estavam a reservar à direita e voltam intactos assim
   que houver espaço para eles. */
/* Os selos encolhem antes de desaparecer, e a reserva à direita encolhe com
   eles: era ela, e não os selos, que estava a comer o nome do cliente. */
.agenda-detalhe--texto .marcadores-bloco { gap: 1px; }
.agenda-detalhe--texto .bloco-agenda .simbolo-estado,
.agenda-detalhe--texto .marcador-serie,
.agenda-detalhe--texto .marcador-medalha,
.agenda-detalhe--texto .marcador-aniversario { width: .82rem; height: .82rem; border-width: 1px; }
.agenda-detalhe--texto .bloco-agenda .simbolo-estado .icone-devez,
.agenda-detalhe--texto .marcador-serie .icone-devez,
.agenda-detalhe--texto .marcador-medalha .icone-devez,
.agenda-detalhe--texto .marcador-aniversario .icone-devez { width: .64rem; height: .64rem; }
.agenda-detalhe--texto .bloco-agenda[data-serie="true"],
.agenda-detalhe--texto .bloco-agenda[data-serie="false"] { padding-right: 4px; }
.agenda-detalhe--texto .bloco-agenda .bloco-topo,
.agenda-detalhe--texto .bloco-agenda:has(.marcador-medalha) .bloco-topo { padding-right: 1.05rem; }

/* As três formas do nome. A escolha é do degrau de zoom, e o que se mostra é
   sempre uma palavra inteira: nunca "Cristiano Nev...".
   As duas classes aparecem juntas no selector de propósito: a regra base
   `.bloco-topo .bloco-cliente` vem mais abaixo neste ficheiro e, com a mesma
   especificidade, ganhava — e os três nomes apareciam ao mesmo tempo. */
.bloco-topo .bloco-cliente.bloco-cliente--curto,
.bloco-topo .bloco-cliente.bloco-cliente--proprio { display: none; }
.agenda-nome-curto .bloco-topo .bloco-cliente { display: none; }
/* Com a classe repetida, e não `.agenda-nome-curto .bloco-topo .bloco-cliente`:
   essa forma tem três classes e empata com a regra de contentor que mostra o
   nome próprio na disposição horizontal — e o empate é decidido pela ordem,
   que a regra de contentor ganha por estar mais abaixo. O resultado era o nome
   curto e o nome próprio visíveis ao mesmo tempo, «João Silva João», neste
   degrau e só neste. Quatro classes tornam a decisão do degrau soberana. */
.agenda-nome-curto .bloco-topo .bloco-cliente.bloco-cliente--proprio { display: none; }
.agenda-nome-curto .bloco-topo .bloco-cliente.bloco-cliente--curto { display: -webkit-box; }
.agenda-nome-proprio .bloco-topo .bloco-cliente.bloco-cliente--curto { display: none; }
.agenda-nome-proprio .bloco-topo .bloco-cliente.bloco-cliente--proprio { display: -webkit-box; }

/* Um selo só, o do estado. */
.agenda-selos-so-estado .marcador-serie,
.agenda-selos-so-estado .marcador-medalha,
.agenda-selos-so-estado .marcador-aniversario { display: none; }

/* A barra da cor volta aos degraus mais fechados. Saiu de lá quando o nome
   inteiro ainda tentava caber e ela lhe passava por cima; com o nome
   encurtado há largura para os dois, e a cor do serviço é o que se lê de
   longe numa coluna cheia. */
.agenda-sem-selos .bloco-agenda {
  padding-left: 9px;
  --indicador-largura: 3px;
  --indicador-recuo: 2px;
  --indicador-inset: 2px;
}
.agenda-sem-selos .marcadores-bloco { display: none; }
.agenda-sem-selos .bloco-agenda[data-serie="true"],
.agenda-sem-selos .bloco-agenda[data-serie="false"] { padding-right: 3px; }
.agenda-sem-selos .bloco-agenda .bloco-topo,
.agenda-sem-selos .bloco-agenda:has(.marcador-medalha) .bloco-topo { padding-right: 0; }
/* A barra da cor do serviço segue os selos e sai ao mesmo tempo que eles. Num
   cartão estreito ela ocupava dezasseis pixels de recuo e passava por cima do
   nome. A cor não se perde: continua no rebordo de 2px e na lavagem do fundo,
   que são precisamente o que se lê de longe. */

/* O texto ao centro da altura do cartão. Encostado ao topo, uma marcação de
   quarenta e cinco minutos com duas linhas deixava metade do rectângulo vazio
   por baixo — e a olhar para a agenda isso lê-se como cartão por preencher. */
.agenda-detalhe--texto .bloco-topo { align-content: center; }
/* O rebordo de 2px vale a pena quando se vê; a esta escala não se distingue de
   um de 1px e os dois pixéis que devolve são metade de uma linha de texto num
   cartão de vinte minutos. A cor continua no rebordo e na lavagem. */
.agenda-detalhe--texto .bloco-agenda { border-width: 1px; }

/* Os dois botões da coluna encolhem com ela. Nunca desaparecem — marcar e
   bloquear são as acções que fazem a agenda avançar — mas ao tamanho de
   sempre passavam por cima um do outro numa coluna de meia dúzia de pixels. */
/* Marcar e bloquear fazem coisas opostas e estavam à distância de um erro de
   dedo um do outro. Ficam maiores — há largura para isso em todos os degraus
   menos no último — e com folga entre eles. */
.agenda-detalhe--texto .accoes-coluna { gap: 7px; }
.agenda-detalhe--texto .accoes-coluna button { min-width: 30px; min-height: 30px; padding: 0 4px; }
.agenda-detalhe--texto .accoes-coluna .botao-criar .icone-devez,
.agenda-detalhe--texto .accoes-coluna .botao-bloquear .icone-devez { width: 1.2rem; height: 1.2rem; }
.agenda-detalhe--texto .accoes-coluna .botao-bloquear .icone-devez { padding: .1rem; }

/* O degrau mínimo.
   Com o rebordo a um pixel e a folga reduzida, um cartão de vinte minutos tem
   cerca de quinze pixéis úteis — e duas linhas a este corpo de letra ocupam
   catorze. Cabe, portanto **fica**: hora numa linha, nome na outra. O que sai
   é a duração, que é a única coisa do cartão que já está dita noutro sítio —
   a altura do próprio cartão diz quanto tempo dura.

   A hora só desaparece abaixo de treze pixéis úteis, onde nem duas linhas
   cabem. Não acontece com as durações de hoje; fica como guarda para o dia em
   que a grelha encolher ou aparecer uma marcação mais curta. */
.agenda-detalhe--minimo .bloco-duracao { display: none; }
.agenda-detalhe--minimo .bloco-agenda .bloco-topo {
  /* Empilhado, e ponto. Aqui não se deixa a medida do cartão decidir: estes
     dois degraus foram validados assim e uma consulta de largura não os deve
     virar para horizontal por meio pixel de diferença entre telemóveis. */
  display: grid;
  gap: 0;
  line-height: .95;
}
.agenda-detalhe--minimo .bloco-topo .bloco-cliente { font-weight: 800; }
.agenda-detalhe--minimo .bloco-topo .bloco-hora { font-size: .42rem; }
.agenda-detalhe--minimo .bloco-topo .bloco-cliente { font-size: .46rem; }
@container (max-height: 13px) {
  .agenda-detalhe--minimo .bloco-hora { display: none; }
  .agenda-detalhe--minimo .bloco-topo .bloco-cliente {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow-wrap: normal;
    word-break: normal;
    text-overflow: ellipsis;
  }
}

/* Marcar e bloquear nunca desaparecem: são as duas acções que fazem a agenda
   avançar, e tê-las de procurar noutro sítio a meio de um atendimento é
   precisamente o que a agenda existe para evitar. Encolhem, não somem. */
.ecra-agenda .cabecalho-coluna .accoes-coluna { display: inline-flex; }
.agenda-zoom-compacto .cabecalho-coluna { min-height: 52px; }
.agenda-zoom-compacto .cabecalho-coluna .accoes-coluna { gap: 5px; }

/* Data numa linha, acções na outra, ambas centradas com a coluna a que
   pertencem. As acções encostavam à esquerda porque herdavam uma grelha
   desenhada para quando o botão de marcar ainda tinha texto e ocupava o
   espaço todo; agora são dois ícones e não têm razão para ficar de lado. */
.ecra-agenda .cabecalho-coluna { flex-wrap: wrap; align-items: center; }
.ecra-agenda .cabecalho-coluna .data-coluna { flex: 1 0 100%; margin: 0; text-align: center; }
.ecra-agenda .cabecalho-coluna .accoes-coluna {
  display: flex;
  flex: 1 0 100%;
  justify-content: center;
  min-width: 0;
}
.ecra-agenda .cabecalho-coluna .accoes-coluna button { flex: 0 0 auto; }

/* As setas mudam o período; o alternador nomeia-o. Juntos, dizem o que fazem
   sem legenda: recuar uma semana, a vista, avançar uma semana. */
.navegacao-periodo-agenda { display: inline-flex; align-items: stretch; gap: var(--espaco-1); }
.navegacao-periodo-agenda .seta-periodo {
  display: inline-grid;
  place-items: center;
  padding-inline: var(--espaco-3);
  font-weight: 800;
}
.agenda-zoom-compacto .accoes-coluna { gap: 5px; }
.agenda-zoom-compacto .accoes-coluna button { min-width: 26px; min-height: 26px; padding: 0 3px; }
.agenda-zoom-compacto .accoes-coluna .botao-criar .icone-devez,
.agenda-zoom-compacto .accoes-coluna .botao-bloquear .icone-devez { width: 1.06rem; height: 1.06rem; }
.agenda-zoom-compacto .accoes-coluna .botao-bloquear .icone-devez { padding: .06rem; }

/* Quarenta e quatro pixéis de coluna para dois botões: aqui, e só aqui, têm
   mesmo de encolher. */
.agenda-accoes-minimas .accoes-coluna { gap: 3px; }
.agenda-accoes-minimas .accoes-coluna button { min-width: 18px; min-height: 18px; padding: 0 1px; }
.agenda-accoes-minimas .accoes-coluna .botao-criar .icone-devez,
.agenda-accoes-minimas .accoes-coluna .botao-bloquear .icone-devez { width: .82rem; height: .82rem; }
.agenda-accoes-minimas .accoes-coluna .botao-bloquear .icone-devez { padding: 0; }

/* Os comandos passaram a viver encostados à grelha; ficam presos ao topo
   enquanto se percorre o dia, que é quando fazem falta. */
.acoes-agenda {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: var(--espaco-2) 0;
  background: var(--superficie-fundo);
}

/* ------------------------------------------------ relação, atividade e memória */
.ecra-relacao, .ecra-atividade { max-width: 78rem; margin: 0 auto; }
.resumo-relacao { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--espaco-3); margin: var(--espaco-5) 0; }
.resumo-relacao > * { display: grid; gap: var(--espaco-1); padding: var(--espaco-4); color: inherit; text-decoration: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.resumo-relacao strong { font-size: 1.8rem; }
.grelha-accoes-relacao { display: grid; grid-template-columns: repeat(auto-fit,minmax(18rem,1fr)); gap: var(--espaco-3); }
.cartao-relacao, .item-atividade, .configuracao-relacao, .notas-live, .preferencias-comunicacao, .mensagem-directa, .fidelizacao-cliente { padding: var(--espaco-4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }

/* Relay Android e backup RPi. */
.pagina-relays { max-width: 72rem; }
.grelha-relays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); }
.grelha-relays--unica { grid-template-columns: minmax(0, 42rem); }
.cartao-relay, .emparelhar-relay { padding: var(--espaco-5); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.cartao-relay--principal { border: 2px solid var(--ok); }
.cartao-relay-topo { display: flex; gap: var(--espaco-3); align-items: center; }
.cartao-relay-topo h2, .cartao-relay-topo p { margin: 0; }
.relay-icone { font-size: 2rem; }
.cartao-relay dl { display: grid; grid-template-columns: auto 1fr; gap: var(--espaco-2) var(--espaco-3); }
.cartao-relay dt { color: var(--texto-suave); }
.cartao-relay dd { margin: 0; overflow-wrap: anywhere; }
.relay-estado { color: var(--aviso); font-weight: 700; }
.relay-estado--online { color: var(--ok); }
.relay-erro { display: block; margin-top: var(--espaco-1); color: var(--texto-suave); }
.relay-sucesso { padding: var(--espaco-3); color: var(--ok); background: var(--ok-l); border-radius: var(--raio); font-weight: 700; }
.saldo-fallback { display: grid; gap: var(--espaco-3); margin-bottom: var(--espaco-4); padding: var(--espaco-5); background: linear-gradient(135deg, var(--superficie), var(--superficie-alt)); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.saldo-fallback-cabecalho { display: flex; justify-content: space-between; gap: var(--espaco-4); align-items: start; }
.saldo-fallback-cabecalho h2, .saldo-fallback p { margin: 0; }
.saldo-fallback-cabecalho > strong { padding: var(--espaco-2) var(--espaco-3); color: var(--acento); background: var(--acento-suave); border-radius: 999px; white-space: nowrap; }
.saldo-fallback progress { width: 100%; height: .65rem; accent-color: var(--acento); }
.resumo-fallback { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-2); margin: 0; }
.resumo-fallback > div { padding: var(--espaco-3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.resumo-fallback dt { color: var(--texto-suave); font-size: .78rem; }
.resumo-fallback dd { margin: 4px 0 0; font-weight: 800; }
.emparelhar-relay { margin-top: var(--espaco-4); }
.codigo-relay { width: fit-content; margin: var(--espaco-4) 0 var(--espaco-2); padding: var(--espaco-3) var(--espaco-5); color: var(--acento); background: var(--superficie-alt); border: 2px dashed var(--acento); border-radius: var(--raio); font: 800 2.25rem/1 monospace; letter-spacing: .25em; }
@media (max-width: 720px) {
  .grelha-relays { grid-template-columns: 1fr; }
  .cartao-relay, .emparelhar-relay { padding: var(--espaco-4); }
  .codigo-relay { font-size: 1.8rem; letter-spacing: .18em; }
}
.fidelizacao-cliente { margin-top: var(--espaco-4); }
.fidelizacao-cliente progress { width: 100%; height: 1rem; accent-color: var(--ok); }
.mensagem-directa { margin-top: var(--espaco-4); }
.mensagem-directa form { display: grid; gap: var(--espaco-2); }
.centro-sms-cliente { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); gap: var(--espaco-4); align-items: start; }
.mini-historico-sms { display: grid; gap: var(--espaco-3); padding: var(--espaco-3); background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); }
.mini-historico-sms h3 { margin: 0 0 var(--espaco-2); font-size: .88rem; }
.mini-historico-sms ol { display: grid; gap: var(--espaco-1); margin: 0; padding: 0; list-style: none; }
.mini-historico-sms li { padding: var(--espaco-2); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.mini-historico-sms li > span { display: flex; justify-content: space-between; gap: var(--espaco-2); color: var(--texto-suave); font-size: .72rem; }
.mini-historico-sms li small { text-transform: uppercase; letter-spacing: .03em; }
.mini-historico-sms li p { margin: 3px 0 0; font-size: .78rem; line-height: 1.35; color: var(--texto-suave); }
.sem-sms-mini { margin: 0; color: var(--texto-suave); font-size: .8rem; }
@media (max-width: 760px) { .centro-sms-cliente { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .saldo-fallback { padding: var(--espaco-4); } .saldo-fallback-cabecalho { display: grid; } .saldo-fallback-cabecalho > strong { width: fit-content; white-space: normal; } .resumo-fallback { grid-template-columns: 1fr; } }
.confirmacao-inline { padding: var(--espaco-3); color: #11633d; font-weight: 750; background: #e7f7ee; border-radius: var(--raio); }
.fitas-atividade { display: grid; gap: .45rem; margin: 0 0 var(--espaco-3); }
.fita-atividade { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .75rem; align-items: center; min-height: 42px; padding: .48rem .75rem .58rem; overflow: hidden; color: #fff; font-size: .78rem; text-decoration: none; background: #174d8c; border: 1px solid #0f3a70; border-radius: .65rem; box-shadow: 0 3px 10px rgb(15 23 42 / 14%); }
.fita-atividade::after { position: absolute; inset: auto 0 0; height: 3px; content: ""; background: rgb(255 255 255 / 82%); transform: scaleX(0); transform-origin: left; }
.fita-atividade--alerta { color: #fff; background: #8a4808; border-color: #653204; }
.fita-atividade:hover, .fita-atividade:focus-visible { color: #fff; filter: brightness(1.08); box-shadow: 0 4px 14px rgb(15 23 42 / 22%); }
.fita-atividade > strong { color: #fff; white-space: nowrap; }
.fita-atividade-itens, .fita-atividade-itens > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fita-atividade-itens b { color: #fff; }
.fita-atividade-item--entrada { animation: fita-atividade-entrada .28s ease both; }
.fita-atividade-meta { display: inline-flex; gap: .5rem; align-items: center; white-space: nowrap; }
.fita-atividade small { color: #fff; font-weight: 750; }
.fita-atividade [data-fita-contador] { min-width: 2.2rem; padding: .08rem .32rem; text-align: center; background: rgb(255 255 255 / 18%); border-radius: 999px; }
.fita-atividade--a-rodar::after { animation: fita-atividade-progresso var(--fita-duracao, 4s) linear both; }
@keyframes fita-atividade-entrada { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fita-atividade-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .fita-atividade-item--entrada, .fita-atividade--a-rodar::after { animation: none; } }
@media (max-width: 620px) {
  .fita-atividade { grid-template-columns: auto minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: 0 .6rem; height: 54px; min-height: 54px; padding: .35rem .65rem .42rem; }
  .fita-atividade > strong { grid-row: 1 / 3; align-self: center; }
  .fita-atividade-itens { align-self: end; }
  .fita-atividade-itens, .fita-atividade-itens > span { white-space: nowrap; }
  .fita-atividade-meta { grid-column: 2; justify-content: flex-end; align-self: start; gap: .6rem; margin-top: -.05rem; font-size: .68rem; }
}
.seccao-alertas { margin: var(--espaco-5) 0; padding: var(--espaco-4); color: var(--texto); background: var(--aviso-l); border: 2px solid color-mix(in srgb, var(--aviso) 48%, var(--borda)); border-radius: var(--raio-grande); }
.resumo-ocupacao-agenda { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-3); align-items: baseline; margin: 0 0 var(--espaco-3); color: var(--texto-suave); font-size: .86rem; }
.resumo-ocupacao-agenda strong { color: var(--texto); font-size: 1rem; }
.pagina-ajuda { max-width: 72rem; margin: 0 auto; }
.grelha-ajuda { display: grid; grid-template-columns: repeat(auto-fit,minmax(17rem,1fr)); gap: var(--espaco-3); }
.grelha-ajuda article { display: flex; gap: var(--espaco-3); padding: var(--espaco-4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.grelha-ajuda article > span { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; color: var(--acento); font-weight: 800; background: var(--acento-suave); border-radius: 50%; }
.grelha-ajuda h2 { margin: 0 0 var(--espaco-2); font-size: 1.05rem; }
.grelha-ajuda p { margin: 0; color: var(--texto-suave); }
.grelha-ajuda .ajuda-proprietario { border-color: color-mix(in srgb,var(--acento) 45%,var(--borda)); }
.cartao-relacao-topo { display: flex; gap: var(--espaco-3); }
.cartao-relacao-topo h3, .cartao-relacao-topo p { margin: 0; }
.icone-relacao { font-size: 1.6rem; }
.cartao-relacao dl { display: grid; grid-template-columns: auto 1fr; gap: var(--espaco-1) var(--espaco-3); }
.cartao-relacao dt { color: var(--texto-suave); }
.cartao-relacao dd { margin: 0; }
.estado-contacto { display: block; margin: var(--espaco-3) 0; color: var(--texto-suave); }
.estado-contacto--sim { color: var(--ok); }
.configuracao-relacao { margin-top: var(--espaco-6); }
.politica-relacao { display: grid; gap: var(--espaco-2); margin: var(--espaco-3) 0; padding: var(--espaco-4); border: 1px solid var(--borda); border-radius: var(--raio); }
.politica-relacao textarea { width: 100%; resize: vertical; }
.cabecalho-configuracao-mensagens { display: flex; align-items: end; justify-content: space-between; gap: var(--espaco-4); }
.cabecalho-configuracao-mensagens h2, .cabecalho-configuracao-mensagens p { margin-bottom: var(--espaco-1); }
.formulario-mensagens-limpo { display: grid; gap: var(--espaco-4); }
.grelha-configuracao-mensagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: var(--espaco-3); }
.cartao-configuracao-mensagem { display: grid; align-content: start; gap: var(--espaco-3); min-width: 0; padding: var(--espaco-4); margin: 0; background: var(--superficie); border: 1px solid var(--borda); border-top: 4px solid var(--acento); border-radius: var(--raio); box-shadow: 0 2px 8px rgb(15 23 42 / 6%); }
.cartao-configuracao-mensagem legend { padding: 0 var(--espaco-2); color: var(--texto); font-size: 1rem; font-weight: 800; }
.cartao-configuracao-mensagem textarea { width: 100%; min-height: 5.5rem; resize: vertical; }
.momento-mensagem { margin: 0; color: var(--texto-suave); font-size: .84rem; }
.linha-opcoes-mensagem { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); align-items: center; justify-content: space-between; }
.linha-opcoes-mensagem .momento-mensagem { flex: 1 1 15rem; }
.cartao-configuracao-mensagem .interruptor { display: inline-flex; flex-direction: row; gap: var(--espaco-2); align-items: center; color: var(--texto); font-weight: 700; }
.cartao-configuracao-mensagem .interruptor input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; min-height: 1.2rem; margin: 0; accent-color: var(--acento); }
.antecedencia-mensagem { display: inline-flex; flex-direction: row; gap: var(--espaco-2); align-items: center; color: var(--texto); font-weight: 700; }
.antecedencia-mensagem input { width: 4.5rem; min-height: 40px; text-align: center; }
.lista-atividade, .diario-cliente { display: grid; gap: var(--espaco-3); padding: 0; list-style: none; }
.item-atividade { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); }
.accoes-atividade { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.ecra-atividade > section { margin-top: var(--espaco-5); }
.ecra-atividade .nota-seccao { color: var(--texto-suave); }
.ecra-atividade .item-atividade { border-width: 1px 1px 1px 5px; box-shadow: 0 3px 12px rgb(15 23 42 / 10%); }
.ecra-atividade .item-atividade--mau { color: var(--texto); background: color-mix(in srgb, var(--perigo-l) 82%, var(--superficie)); border-color: color-mix(in srgb, var(--perigo) 52%, var(--borda)); }
.ecra-atividade .item-atividade--atencao { color: var(--texto); background: color-mix(in srgb, var(--aviso-l) 84%, var(--superficie)); border-color: color-mix(in srgb, var(--aviso) 52%, var(--borda)); }
.ecra-atividade .item-atividade--bom { color: var(--texto); background: color-mix(in srgb, var(--ok-l) 84%, var(--superficie)); border-color: color-mix(in srgb, var(--ok) 52%, var(--borda)); }
.ecra-atividade .item-atividade--neutro { color: var(--texto); background: color-mix(in srgb, var(--acento-suave) 82%, var(--superficie)); border-color: color-mix(in srgb, var(--acento) 45%, var(--borda)); }
.etiqueta-atividade { display: inline-flex; width: fit-content; padding: .16rem .5rem; margin: 0 0 var(--espaco-1); color: var(--texto-suave); font-size: .72rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; letter-spacing: .035em; background: var(--superficie-alt); border: 1px solid var(--borda-forte); border-radius: 999px; }
.item-atividade--mau .etiqueta-atividade { color: var(--perigo-texto); background: var(--perigo-l); border-color: color-mix(in srgb, var(--perigo) 48%, var(--borda)); }
.item-atividade--atencao .etiqueta-atividade { color: var(--aviso-texto); background: var(--aviso-l); border-color: color-mix(in srgb, var(--aviso) 48%, var(--borda)); }
.item-atividade--bom .etiqueta-atividade { color: var(--ok-texto); background: var(--ok-l); border-color: color-mix(in srgb, var(--ok) 48%, var(--borda)); }
.item-atividade--neutro .etiqueta-atividade { color: var(--acento); background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 42%, var(--borda)); }
.ecra-atividade .accoes-atividade .botao { color: var(--texto); background: var(--superficie); border-color: var(--borda-forte); box-shadow: 0 1px 3px rgb(15 23 42 / 9%); }
.ecra-atividade .accoes-atividade .botao:hover { color: var(--acento); background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 55%, var(--borda)); }
.ecra-atividade .accoes-atividade .botao-presenca { color: var(--ok-texto); border-color: color-mix(in srgb, var(--ok) 55%, var(--borda)); }
.ecra-atividade .accoes-atividade .botao-cancelar { color: var(--perigo-texto); border-color: color-mix(in srgb, var(--perigo) 55%, var(--borda)); }
.nada-a-fazer { padding: var(--espaco-3) var(--espaco-4); color: var(--ok-texto); font-weight: 650; background: var(--ok-l); border: 1px solid color-mix(in srgb, var(--ok) 38%, var(--borda)); border-radius: var(--raio); }
.notas-live, .preferencias-comunicacao { margin: var(--espaco-5) 0; }
.formulario-nota-live, .preferencias-comunicacao form { display: grid; gap: var(--espaco-2); }
.formulario-nota-live textarea { width: 100%; resize: vertical; }
.nota-live { padding: var(--espaco-3); border: 1px solid var(--borda); border-radius: var(--raio); }
.nota-live--fixada { border-color: var(--acento); background: var(--acento-suave); }
.nota-live-meta { display: flex; flex-wrap: wrap; gap: var(--espaco-2); font-size: .76rem; color: var(--texto-suave); }
.formulario-acesso-colaborador { display: grid; grid-template-columns: minmax(0,1fr) minmax(12rem,.45fr) auto; gap: var(--espaco-3); align-items: end; margin-top: var(--espaco-4); padding-top: var(--espaco-4); border-top: 1px solid var(--borda); }
.formulario-acesso-colaborador h3, .formulario-acesso-colaborador p { grid-column: 1 / -1; margin: 0; }
.formulario-acesso-colaborador label { display: grid; gap: var(--espaco-1); }
.form-sair-painel button { display: flex; gap: var(--espaco-2); width: 100%; padding: var(--espaco-3); color: var(--texto-suave); background: transparent; border: 0; cursor: pointer; }
.menu-suporte { width: 100%; margin: .55rem 0; padding: .8rem; border: 1px solid #d7a500; border-radius: .7rem; background: #fff7d6; color: #3d3000; }
.menu-suporte p { margin: .2rem 0 .65rem; font-size: .78rem; }
.menu-suporte form, .menu-suporte label { display: grid; gap: .4rem; }
.menu-suporte select, .menu-suporte button { width: 100%; min-height: 42px; font: inherit; }
.dm-transferencia { margin-top: var(--espaco-4); padding-top: var(--espaco-3); border-top: 1px solid var(--borda); }
.dm-transferencia form { display: flex; gap: var(--espaco-2); align-items: end; }
.dm-transferencia label { flex: 1; }

@media (max-width: 48rem) {
  .resumo-relacao { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .item-atividade { align-items: stretch; flex-direction: column; }
  .formulario-acesso-colaborador { grid-template-columns: 1fr; }
  .formulario-acesso-colaborador h3, .formulario-acesso-colaborador p { grid-column: auto; }
}

@media (max-width: 32rem) {
  .resumo-relacao { grid-template-columns: 1fr; }
  .dm-transferencia form { align-items: stretch; flex-direction: column; }
}

/* ------------------------------------------------------- todas as agendas */
.ecra-agendas-equipa { max-width: 100%; }
.topo-agendas-equipa { display: flex; align-items: end; justify-content: space-between; gap: var(--espaco-4); margin-bottom: var(--espaco-4); }
.topo-agendas-equipa h1, .topo-agendas-equipa p { margin-top: 0; }
.quadro-agendas-equipa { display: grid; grid-template-columns: repeat(var(--n-agendas), minmax(calc(13rem * var(--zoom-todas-agendas, 1)),1fr)); gap: var(--espaco-2); min-width: calc(var(--n-agendas) * 13rem * var(--zoom-todas-agendas, 1)); }
.ecra-agendas-equipa { overflow-x: auto; padding-bottom: var(--espaco-2); }
.controlos-agendas-equipa { display: grid; gap: var(--espaco-2); justify-items: end; }
.linha-vista-agendas { display: flex; gap: var(--espaco-2); align-items: center; justify-content: flex-end; }
.coluna-agenda-equipa { overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.topo-coluna-equipa { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); min-height: 4rem; padding: var(--espaco-3); color: inherit; text-decoration: none; border-bottom: 1px solid var(--borda); }
.topo-coluna-equipa span:first-child { display: grid; }
.topo-coluna-equipa small { color: var(--texto-suave); }
.pista-equipa { position: relative; height: calc(54rem * var(--zoom-todas-agendas, 1)); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(100% / 15 - 1px), var(--borda) calc(100% / 15)); }
.bloco-equipa { position: absolute; inset-inline: var(--espaco-1); display: grid; align-content: start; gap: 2px; min-height: 1.7rem; padding: 5px 28px 5px 16px; overflow: hidden; color: var(--texto); text-decoration: none; background: color-mix(in srgb, var(--colaborador-cor, var(--acento)) 14%, var(--superficie)); border: 1px solid color-mix(in srgb,var(--colaborador-cor,var(--acento)) 34%,var(--borda)); border-radius: 7px; box-shadow: 0 2px 8px rgb(15 23 42 / .08); --indicador-cor:var(--bloco-cor,var(--acento)); --indicador-largura:6px; --indicador-inset:5px; --indicador-recuo:4px; }
.bloco-equipa strong, .bloco-equipa span { overflow: hidden; font-size: .72rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.bloco-equipa span { color: var(--texto-suave); }
.semanas-agendas-equipa { display: grid; gap: var(--espaco-4); }
.semana-colaborador { overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.topo-semana-colaborador { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); padding: var(--espaco-3) var(--espaco-4); color: inherit; text-decoration: none; border-bottom: 1px solid var(--borda); }
.topo-semana-colaborador span:first-child { display: grid; }
.topo-semana-colaborador small { color: var(--texto-suave); }
.dias-semana-colaborador { display: grid; grid-template-columns: repeat(7,minmax(calc(9.5rem * var(--zoom-todas-agendas, 1)),1fr)); min-width: calc(66.5rem * var(--zoom-todas-agendas, 1)); }
.dia-semana-equipa { min-height: 8rem; border-right: 1px solid var(--borda); }
.dia-semana-equipa:last-child { border-right: 0; }
.topo-dia-semana { display: flex; align-items: center; justify-content: space-between; padding: var(--espaco-2) var(--espaco-3); color: inherit; text-decoration: none; background: var(--superficie-alt); border-bottom: 1px solid var(--borda); }
.topo-dia-semana small { display: grid; min-width: 1.5rem; min-height: 1.5rem; place-items: center; color: var(--texto-suave); background: var(--superficie); border-radius: 999px; }
.lista-dia-equipa { display: grid; gap: var(--espaco-1); padding: var(--espaco-2); }
.bloco-semana-equipa { position:relative; display: grid; gap: 2px; min-height:2.75rem; padding: 6px 28px 6px 16px; overflow: hidden; color: var(--texto); text-decoration: none; background: color-mix(in srgb, var(--colaborador-cor, var(--acento)) 14%, var(--superficie)); border: 1px solid color-mix(in srgb,var(--colaborador-cor,var(--acento)) 34%,var(--borda)); border-radius: 7px; --indicador-cor:var(--bloco-cor,var(--acento)); --indicador-largura:6px; --indicador-inset:5px; --indicador-recuo:4px; }
/* O mesmo modelo também serve a agenda cronológica e traz top/height inline.
   Na lista semanal estes cartões estão no fluxo: as percentagens colapsavam a
   altura para quase zero e deixavam apenas riscos sem texto. */
.lista-dia-equipa .bloco-semana-equipa { top:auto !important; height:auto !important; }
.bloco-semana-equipa strong, .bloco-semana-equipa span { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.bloco-semana-equipa span, .dia-sem-marcacoes { color: var(--texto-suave); }
.dia-sem-marcacoes { padding: var(--espaco-2); font-size: .78rem; }
@media (max-width: 48rem) {
  .topo-agendas-equipa { align-items: stretch; flex-direction: column; }
  .topo-agendas-equipa .navegacao-datas { justify-content: space-between; }
  .controlos-agendas-equipa { justify-items: stretch; }
  .controlos-agendas-equipa .alternador-vista { justify-self: stretch; }
  .controlos-agendas-equipa .alternador-vista a { flex: 1; text-align: center; }
  .linha-vista-agendas { justify-content: space-between; }
  .semana-colaborador { overflow-x: auto; }
  .pista-equipa { height: calc(45rem * var(--zoom-todas-agendas, 1)); }
}

@media (min-width: 64rem) {
  body { padding-left: 15.5rem; }
  .cabecalho-painel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 15.5rem;
    padding: var(--espaco-5) var(--espaco-3);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    border-bottom: 0;
  }
  .cabecalho-identidade { padding: 0 var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--borda); }
  .botao-menu-painel, .menu-painel-topo, .fundo-menu-painel { display: none !important; }
  /* A barra lateral é fixa e ocupa a altura toda do ecrã, e o seu conteúdo não
     rolava. Cada entrada nova empurrava a última para fora da vista: ao
     acrescentar o Cartaz, as Definições desapareceram — e nada no ecrã dizia
     que ainda lá estavam, o que se lê como funcionalidade perdida e não como
     menu cheio. Rolar resolve-o para qualquer número de entradas, e não só
     para as treze de hoje. */
  .cabecalho-painel { overflow-y: auto; overscroll-behavior: contain; }
  .nav-painel {
    position: static;
    width: auto;
    padding: var(--espaco-3) 0 var(--espaco-4);
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    pointer-events: auto;
  }
  body.menu-painel-aberto { overflow: auto; }
}

.coluna-dia { min-width: 0; border-left: 1px solid var(--borda); }
.coluna-dia:first-child { border-left: 0; }

.cabecalho-coluna {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: var(--espaco-2);
  align-items: baseline;
  justify-content: center;
  padding: var(--espaco-2);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.dia-semana {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.dia-mes { font-weight: 650; font-variant-numeric: tabular-nums; }

.cabecalho-coluna:has(.dia-mes[data-corrente]),
.coluna-dia[data-corrente] .cabecalho-coluna {
  color: var(--acento);
  box-shadow: inset 0 -2px 0 var(--acento);
}

/* The lane the blocks are absolutely positioned within. The repeating
   background draws the hour lines without an element per hour. */
.pista-coluna {
  position: relative;
  height: var(--altura-grelha);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--borda) 0 1px,
    transparent 1px var(--altura-hora)
  );
}

/* ------------------------------------------------------------------ blocos */

.bloco-agenda {
  position: absolute;
  z-index: 2;
  left: 3px;
  right: 3px;
  display: flex;
  flex-direction: column;
  /* O conteúdo ao centro da altura do cartão, em qualquer zoom. Encostado ao
     topo, um cartão de quarenta e cinco minutos com duas linhas deixava
     metade do rectângulo vazio por baixo, e isso lê-se como cartão por
     preencher em vez de cartão com folga. */
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  /* Dois pixéis, não cinco. Num cartão de vinte minutos — 19px de altura — a
     folga de cinco em cima e cinco em baixo deixava sete pixéis para duas
     linhas de texto, e a segunda saía cortada a meio. A folga é devolvida
     mais abaixo, por consulta de altura, a quem a possa pagar. */
  padding: 2px 7px;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--texto);
  text-align: left;
  /* The service colour lands on the left edge, where it can be scanned down a
     column at a glance (F19, E1/R3), and washes the block faintly so the whole
     rectangle carries it. A 4px stripe alone was too little to read at arm's
     length — the barber looked at his agenda and did not see the colours he had
     configured. The wash stays weak on purpose: the client's name has to remain
     the thing you read first. */
  /* A vaga livre tinha um rebordo de 2px cheio e lia-se de longe; a marcação
     tinha 1px lavado e não. Passa a ter o mesmo peso, na cor do seu serviço. */
  border: 2px solid color-mix(in srgb, var(--bloco-cor, var(--acento)) 68%, var(--borda));
  --indicador-cor: var(--bloco-cor, var(--acento));
  --indicador-inset: 5px;
  --indicador-recuo: 4px;
  --indicador-largura: 6px;
  padding-left: 16px;
  background: color-mix(in srgb, var(--bloco-cor, var(--acento)) 18%, var(--superficie));
  border-radius: 7px;
  box-shadow: 0 2px 5px rgb(11 22 34 / 15%);
  cursor: grab;
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.bloco-agenda:hover { box-shadow: var(--sombra); }

/* A barra não toca na moldura: mudar o raio do cartão nunca altera a forma do
   indicador. Este selector serve agenda, listas, avisos e fichas. */
:where(.bloco-equipa,.bloco-semana-equipa,.bloco-agenda,.lista-clientes > li,
  .alerta,.ficha-suspensao,.historico-linha--futura,.item-centro-sms,
  .item-atividade--mau,.item-atividade--atencao,.item-atividade--bom,
  .aviso.sucesso,.registo-privado)::before {
  content:"";
  position:absolute;
  inset:var(--indicador-inset) auto var(--indicador-inset) var(--indicador-recuo);
  width:var(--indicador-largura);
  border-radius:var(--indicador-raio);
  background:var(--indicador-cor,var(--acento));
  pointer-events:none;
}
.bloco-agenda[data-arrastando] {
  z-index: 10;
  cursor: grabbing;
  box-shadow: var(--sombra-elevada);
  transform: scale(1.02);
}

.bloco-hora { display:flex; flex-wrap:wrap; gap:0 4px; align-items:baseline; min-width:0; font-weight: 750; font-variant-numeric: tabular-nums; }
.bloco-duracao { color:var(--texto-suave); font-size:.66rem; font-weight:750; white-space:nowrap; }
.bloco-cliente { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco-servicos { color: var(--texto-suave); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* O texto do estado vive na legenda e na acessibilidade; nos blocos, o símbolo
   ocupa uma área fixa mínima e deixa a etiqueta para cliente e serviço. */
.simbolo-estado { display:inline-grid; width:1.45rem; height:1.45rem; place-items:center; flex:0 0 auto; color:var(--devez-azul); background:color-mix(in srgb,var(--superficie) 94%,transparent); border:1.5px solid color-mix(in srgb,var(--devez-azul) 28%,var(--borda)); border-radius:50%; line-height:1; box-shadow:0 2px 6px rgb(6 45 77 / 10%); }
.simbolo-estado .icone-devez { width:1.18rem; height:1.18rem; vertical-align:0; }
.simbolo-estado[data-estado="pendente"] { background:color-mix(in srgb,var(--devez-coral) 12%,var(--superficie)); border-color:color-mix(in srgb,var(--devez-coral) 70%,var(--borda)); }
.simbolo-estado[data-estado="confirmada"] { background:color-mix(in srgb,var(--devez-turquesa) 8%,var(--superficie)); border-color:var(--devez-turquesa); }
.simbolo-estado[data-estado="compareceu"],
.simbolo-estado[data-estado="concluida"] { background:color-mix(in srgb,var(--devez-turquesa) 12%,var(--superficie)); border-color:var(--devez-turquesa); box-shadow:0 0 0 1px color-mix(in srgb,var(--devez-azul) 24%,transparent),0 2px 6px rgb(6 45 77 / 12%); }
.simbolo-estado[data-estado="faltou"] { background:color-mix(in srgb,var(--devez-coral) 14%,var(--superficie)); border-color:var(--devez-coral); }
.simbolo-estado[data-estado^="cancelada"] { background:color-mix(in srgb,var(--devez-coral) 7%,var(--superficie)); border-color:color-mix(in srgb,var(--devez-azul) 52%,var(--borda)); }

.bloco-agenda[data-pendente-sincronizacao] {
  border-style: dashed;
  opacity: 0.75;
}

/* Resize handles appear only once the block is selected (F22, dossie 7.2). */
.manipulo {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 12px;
  transform: translateX(-50%);
  cursor: ns-resize;
  opacity: 0;
  pointer-events: none;
}
.manipulo::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin: 4px auto;
  background: var(--acento);
  border-radius: 3px;
}
.manipulo--cima { top: -6px; }
.manipulo--baixo { bottom: -6px; }
.bloco-agenda[aria-selected="true"] { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-suave); }
.bloco-agenda[aria-selected="true"] .manipulo { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------- bloqueios e vagas */

.bloqueio {
  position: absolute;
  left: 3px;
  right: 3px;
  overflow: hidden;
  padding: 4px 7px;
  font-size: 0.72rem;
  color: var(--devez-azul);
  border-radius: 7px;
  /* Hatching, so a block reads as unavailable rather than as a pale booking. */
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb,var(--devez-azul) 7%,var(--superficie)) 0 6px,
    color-mix(in srgb,var(--devez-azul) 25%,var(--superficie)) 6px 7px
  );
  border: 1px solid var(--devez-azul);
}
.bloqueio-motivo { font-weight: 550; }

/* A gap left by a cancellation pulses to catch the eye and offers the waiting
   list right there (F29). The pulse stops under reduced motion. */
.vaga {
  position: absolute;
  left: 3px;
  right: 3px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  justify-content: center;
  padding: 2px 7px;
  font-size: 0.72rem;
  z-index: 0;
  color: #075f43;
  background-color: #dff7eb;
  background-image: repeating-linear-gradient(-45deg, rgb(18 128 92 / 8%) 0 7px, transparent 7px 14px);
  border: 2px solid var(--ok);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%);
  animation: pulsar 1.8s ease-in-out infinite;
  container-type: size;
}
.vaga-motivo { font-size: .76rem; font-weight: 850; line-height:1.05; letter-spacing: .02em; text-transform: uppercase; }
.vaga-horas { font-size: .68rem; font-weight: 700; line-height:1.05; font-variant-numeric: tabular-nums; }
/* O intervalo é informação operacional e permanece visível a qualquer altura. */
@container (max-height:35px) {
  .vaga { flex-direction:row; gap:3px; align-items:center; justify-content:flex-start; padding:1px 5px; }
  .vaga-motivo { font-size:.62rem; white-space:nowrap; }
  .vaga-horas { font-size:.55rem; white-space:nowrap; }
}
@container (max-height:24px) {
  .vaga { gap:2px; padding-inline:3px; }
  .vaga-motivo { font-size:.54rem; letter-spacing:0; }
  .vaga-horas { display:inline; font-size:.48rem; }
}
.legenda-disponibilidade { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); margin: var(--espaco-2) 0 var(--espaco-3); padding: 0; color: var(--texto-suave); font-size: .76rem; list-style: none; }
.legenda-disponibilidade li { display: inline-flex; gap: .4rem; align-items: center; }
.amostra-vaga, .amostra-bloqueio { width: 1.4rem; height: .75rem; border-radius: 3px; }
.amostra-vaga { background: #dff7eb; border: 2px solid var(--ok); }
.amostra-bloqueio { background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--devez-azul) 7%,var(--superficie)) 0 4px,color-mix(in srgb,var(--devez-azul) 28%,var(--superficie)) 4px 5px); border:1px solid var(--devez-azul); }
.amostra-repeticao,.amostra-medalha,.amostra-aniversario { display:inline-grid; width:1.4rem; height:1.4rem; place-items:center; color:var(--devez-azul); background:linear-gradient(145deg,var(--superficie),color-mix(in srgb,var(--devez-turquesa) 14%,var(--superficie))); border:1.5px solid color-mix(in srgb,var(--devez-turquesa) 72%,var(--devez-azul)); border-radius:50%; box-shadow:0 0 0 1px color-mix(in srgb,var(--devez-coral) 25%,transparent),0 2px 5px rgb(6 45 77 / 10%); }
.amostra-medalha,.amostra-aniversario { border-radius:.42rem; background:linear-gradient(145deg,var(--superficie),color-mix(in srgb,var(--devez-coral) 10%,var(--superficie))); }
.amostra-repeticao .icone-devez,.amostra-medalha .icone-devez,.amostra-aniversario .icone-devez { width:1.08rem; height:1.08rem; }
.legenda-estados-agenda { display:inline-flex; flex-wrap:wrap; gap:0; max-width:100%; margin:0 0 var(--espaco-3); padding:4px; color:var(--texto-suave); font-size:.76rem; list-style:none; background:linear-gradient(115deg,color-mix(in srgb,var(--devez-turquesa) 7%,var(--superficie)),var(--superficie)); border:1px solid color-mix(in srgb,var(--devez-azul) 18%,var(--borda)); border-radius:.8rem; box-shadow:0 5px 16px -14px var(--devez-azul),inset 3px 0 0 color-mix(in srgb,var(--devez-coral) 72%,transparent); }
.legenda-estados-agenda li { display:inline-flex; gap:.38rem; align-items:center; min-height:1.8rem; padding:.18rem .65rem; border-right:1px solid color-mix(in srgb,var(--devez-azul) 12%,var(--borda)); }
.legenda-estados-agenda li:last-child { border-right:0; }
.legenda-estados-agenda .simbolo-estado { width:1.25rem; height:1.25rem; box-shadow:none; }
.legenda-estados-agenda .simbolo-estado .icone-devez { width:1.02rem; height:1.02rem; }
@media (max-width:32rem) {
  .legenda-estados-agenda { display:flex; }
  .legenda-estados-agenda li { flex:1 1 auto; justify-content:center; }
}

@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgb(18 128 92 / 26%); }
  50% { box-shadow: 0 0 0 5px rgb(18 128 92 / 0%); }
}

/* ----------------------------------------------------------------- acções */

/* Every gesture has a tappable twin (genese 4.5). This is where they live. */
.acoes-agenda, .bloco-accoes, .botoes-dialogo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-top: var(--espaco-4);
}

/* As acções completas vivem no diálogo de detalhe. Nunca podem reaparecer
   dentro de um bloco alto e roubar espaço ao nome do cliente. */
.bloco-agenda > .bloco-accoes { display:none; }

.botao {
  display: inline-flex;
  gap: var(--espaco-2);
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-toque);
  padding: 0 var(--espaco-4);
  font: inherit;
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao), filter var(--transicao);
}
.botao:hover { border-color: var(--borda-forte); background: var(--superficie-alt); }

.botao-criar {
  color: var(--acento-contraste);
  background: var(--acento);
  border-color: transparent;
}
.botao-criar:hover { filter: brightness(1.08); background: var(--acento); }

.botao-presenca { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--borda)); }
.botao-presenca:hover { background: var(--ok-l); }

.botao-falta, .botao-cancelar, .botao-desactivar {
  color: var(--perigo);
  border-color: color-mix(in srgb, var(--perigo) 30%, var(--borda));
}
.botao-falta:hover, .botao-cancelar:hover, .botao-desactivar:hover { background: var(--perigo-l); }

.botao-avisar { color: var(--ok); background: var(--ok-l); border-color: transparent; }

.botao:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

/* ---------------------------------------------------------------- diálogos */

.dialogo {
  width: min(32rem, calc(100vw - 2 * var(--espaco-4)));
  max-height: calc(100vh - 2 * var(--espaco-4));
  overflow: auto;
  padding: var(--espaco-5);
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-elevada);
}
.dialogo::backdrop { background: rgb(11 22 34 / 45%); }

/* --------------------------------------------------------- campos e listas */

.campo-accao, .formulario-pesquisa, .formulario-servico,
.formulario-bloqueio, .formulario-marcacao, .formulario-entrada {
  display: grid;
  gap: var(--espaco-3);
}

.formulario-pesquisa { grid-auto-flow: column; grid-auto-columns: 1fr auto; align-items: end; }

label { font-size: 0.82rem; font-weight: 550; color: var(--texto-suave); }

input, select, textarea {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--espaco-2) var(--espaco-3);
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
textarea { min-height: 6rem; resize: vertical; }

.campo-com-lupa { position: relative; width: 100%; }
.campo-com-lupa input { padding-left: calc(var(--espaco-6) + var(--espaco-2)); }
.icone-lupa {
  position: absolute;
  top: 50%;
  left: var(--espaco-3);
  z-index: 1;
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
  filter: grayscale(1);
}
.campo-com-lupa.a-pesquisar .icone-lupa { animation: pulso-pesquisa 650ms ease-in-out infinite alternate; }
@keyframes pulso-pesquisa {
  from { opacity: 0.45; transform: translateY(-50%) scale(0.9); }
  to { opacity: 1; transform: translateY(-50%) scale(1.08); }
}

.seletor-pesquisavel, .pesquisa-lista {
  display: grid;
  gap: var(--espaco-2);
}

.pesquisa-lista { margin: var(--espaco-4) 0; }

.resultados-pesquisa {
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--espaco-1);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.resultado-pesquisa {
  display: flex;
  width: 100%;
  min-height: var(--alvo-toque);
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  color: var(--texto);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: calc(var(--raio) - 2px);
}
.resultado-pesquisa:hover, .resultado-pesquisa:focus { background: var(--acento-suave); }
.resultado-pesquisa span { display: grid; }
.resultado-pesquisa small { color: var(--texto-suave); }

.selecao-atual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  color: var(--ok);
  background: var(--ok-l);
  border-radius: var(--raio);
}
.selecao-atual[hidden] { display: none; }

.botao-texto {
  width: fit-content;
  min-height: 2rem;
  padding: var(--espaco-1) var(--espaco-2);
  color: var(--acento);
  background: transparent;
  border: 0;
}
.botao-novo-cliente { justify-self: start; }

.campos-novo-cliente {
  display: grid;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.campos-novo-cliente[hidden] { display: none; }
.campos-novo-cliente legend { padding: 0 var(--espaco-1); color: var(--texto-suave); }

.servicos-selecionados { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.bloco-agenda { container-type:size; }
/* Ao centro da altura, como o texto: encostados ao topo destoavam num cartão
   cujo conteúdo passou a ser centrado. */
.marcadores-bloco { position:absolute; top:50%; right:3px; z-index:3; display:inline-flex; flex-direction:column; gap:2px; align-items:center; transform:translateY(-50%); }
.bloco-agenda .simbolo-estado { width:1.08rem; height:1.08rem; border-width:1.5px; box-shadow:0 1px 4px rgb(6 45 77 / 12%); }
.bloco-agenda .simbolo-estado .icone-devez { width:.9rem; height:.9rem; }
.marcador-serie { display:grid; width:1.08rem; height:1.08rem; place-items:center; color:var(--devez-azul); background:var(--superficie); border:1.5px solid color-mix(in srgb,var(--devez-turquesa) 72%,var(--devez-azul)); border-radius:50%; box-shadow:0 0 0 1px color-mix(in srgb,var(--devez-coral) 24%,transparent),0 1px 4px color-mix(in srgb,var(--devez-azul) 24%,transparent); }
.marcador-serie .icone-devez { width:.86rem; height:.86rem; }
.marcador-medalha { display:grid; width:1.08rem; height:1.08rem; place-items:center; color:var(--devez-azul); background:color-mix(in srgb,var(--devez-coral) 8%,var(--superficie)); border:1.5px solid color-mix(in srgb,var(--devez-turquesa) 72%,var(--devez-azul)); border-radius:.34rem; box-shadow:0 1px 4px color-mix(in srgb,var(--devez-azul) 20%,transparent); }
.marcador-medalha .icone-devez { width:.86rem; height:.86rem; }
/* O presente deixou de representar compras — representa o aniversário do
   cliente no mês desta marcação, que é a coisa que um presente diz. */
.marcador-aniversario { display:grid; width:1.08rem; height:1.08rem; place-items:center; color:var(--devez-azul); background:color-mix(in srgb,var(--devez-coral) 14%,var(--superficie)); border:1.5px solid color-mix(in srgb,var(--devez-coral) 62%,var(--devez-azul)); border-radius:.34rem; box-shadow:0 1px 4px color-mix(in srgb,var(--devez-azul) 20%,transparent); }
.marcador-aniversario .icone-devez { width:.86rem; height:.86rem; }
.bloco-agenda[data-serie="true"],.bloco-agenda[data-serie="false"] { padding-right:25px; }
/* Em sessões baixas os selos passam para uma linha. Em cartões altos, estado,
   repetição e compra voltam à leitura vertical. */
@container (max-height:50px) {
  .marcadores-bloco { flex-direction:row; }
  .marcador-serie { order:-1; }
  .bloco-agenda .bloco-topo { display:grid; gap:1px; align-content:start; padding-right:2.45rem; line-height:1; }
  .bloco-agenda:has(.marcador-medalha) .bloco-topo { padding-right:3.55rem; }
  .bloco-topo .bloco-hora { gap:2px; flex:0 0 auto; padding-right:0; font-size:.64rem; }
  .bloco-topo .bloco-cliente { min-width:0; overflow:hidden; font-size:.64rem; }
  .bloco-duracao { font-size:.55rem; }
  .bloco-agenda .simbolo-estado,.marcador-serie,.marcador-medalha { width:.98rem; height:.98rem; }
  .bloco-agenda .simbolo-estado .icone-devez,.marcador-serie .icone-devez,.marcador-medalha .icone-devez { width:.8rem; height:.8rem; }
}
@container (max-height:30px) {
  .bloco-agenda .bloco-topo { display:flex; gap:2px; align-items:baseline; padding-right:2.2rem; }
  .bloco-agenda:has(.marcador-medalha) .bloco-topo { padding-right:3.15rem; }
  .bloco-topo .bloco-hora,.bloco-topo .bloco-cliente { font-size:.58rem; }
  .bloco-duracao { font-size:.5rem; }
  .bloco-agenda .simbolo-estado,.marcador-serie,.marcador-medalha { width:.86rem; height:.86rem; }
  .bloco-agenda .simbolo-estado .icone-devez,.marcador-serie .icone-devez,.marcador-medalha .icone-devez { width:.7rem; height:.7rem; }
}
.dm-serie { display: flex; gap: var(--espaco-2); align-items: center; padding: var(--espaco-3); color: #174a90; font-weight: 750; background: #eaf2ff; border-radius: var(--raio); }
.dm-serie[hidden] { display: none; }
.dm-serie-accoes[hidden] { display: none; }
.nota-combinacao-servicos { margin: 0 0 var(--espaco-2); }
.resumo-horas-painel { margin: var(--espaco-2) 0; color: var(--sucesso-texto, #08705b); font-weight: 700; }
.resumo-horas-painel--sem-vagas { color: var(--perigo-texto, #a52720); }
.servico-selecionado {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-1) var(--espaco-2) var(--espaco-1) var(--espaco-3);
  color: var(--acento);
  background: var(--acento-suave);
  border-radius: 999px;
}
.servico-selecionado button {
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.resumo-servicos { margin: 0; font-weight: 650; }
.sem-resultados { margin: 0; padding: var(--espaco-3); color: var(--texto-suave); }
.erro-formulario { margin: 0; color: var(--perigo); }

.ajuda-campo, .nota-formulario, .nota-servicos {
  margin: 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.lista-servicos, .lista-clientes {
  display: grid;
  gap: var(--espaco-2);
  padding: 0;
  margin: var(--espaco-4) 0;
  list-style: none;
}

.linha-servico, .lista-clientes > li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  align-items: center;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.lista-clientes > li {
  position: relative;
  color: var(--texto);
  --indicador-cor: var(--acento);
  box-shadow: 0 2px 8px rgb(15 23 42 / 7%);
}

.amostra-cor {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgb(0 0 0 / 12%);
}

.servico-designacao, .cliente-nome { font-weight: 550; }
.servico-duracao, .servico-preco,
.cliente-telefone, .cliente-visitas, .cliente-faltas,
.cliente-ultima-visita, .cliente-proxima-visita {
  font-size: 0.85rem;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.cliente-telefone { color: var(--texto-suave); }
.cliente-visitas, .cliente-faltas, .cliente-proxima-visita {
  padding: .15rem .5rem;
  font-weight: 700;
  border: 1px solid var(--borda);
  border-radius: 999px;
}
.cliente-visitas { color: var(--ok-texto); background: var(--ok-l); border-color: color-mix(in srgb, var(--ok) 42%, var(--borda)); }
.cliente-faltas:not(:empty) { color: var(--aviso-texto); background: var(--aviso-l); border-color: color-mix(in srgb, var(--aviso) 42%, var(--borda)); }
.cliente-proxima-visita { color: var(--acento); background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 36%, var(--borda)); }

.marcador-suspenso {
  padding: 1px 8px;
  font-size: 0.68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--perigo);
  background: var(--perigo-l);
  border-radius: 999px;
}

/* An empty screen is an invitation, never a blank table (dossie 6.7). */
.lista-servicos-vazia, .lista-clientes-vazia {
  padding: var(--espaco-6) var(--espaco-5);
  margin: var(--espaco-4) 0;
  color: var(--texto-suave);
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-grande);
}

.alerta {
  position: relative;
  padding: var(--espaco-3) var(--espaco-4);
  margin-bottom: var(--espaco-4);
  color: var(--perigo);
  background: var(--perigo-l);
  border: 1px solid color-mix(in srgb, var(--perigo) 30%, transparent);
  --indicador-cor: var(--perigo);
  border-radius: var(--raio);
}

/* ----------------------------------------------------------------- entrada */

.ecra-entrada {
  position: relative;
  width: min(100%, 54rem);
  margin: clamp(1rem,5vh,4rem) auto 0;
  padding: clamp(1.25rem,4vw,2.5rem);
  overflow: hidden;
  background: color-mix(in srgb,var(--superficie) 96%,var(--devez-turquesa));
  border: 1px solid color-mix(in srgb,var(--devez-azul) 24%,var(--borda));
  border-radius: calc(var(--raio-grande) + 6px);
  box-shadow: 0 3px 8px color-mix(in srgb,var(--devez-azul) 10%,transparent),0 30px 70px -38px color-mix(in srgb,var(--devez-azul) 65%,transparent);
}
.ecra-entrada::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,var(--devez-azul) 0 38.2%,var(--devez-turquesa) 38.2% 76.4%,var(--devez-coral) 76.4%); }
.voltar-entrada { display:inline-flex; margin-bottom:var(--espaco-5); color:var(--texto-suave); font-size:.84rem; font-weight:700; text-decoration:none; }
.voltar-entrada:hover { color:var(--devez-turquesa); }
.cabecalho-entrada { display:flex; gap:var(--espaco-4); align-items:center; margin-bottom:var(--espaco-5); }
.icone-entrada { display:grid; place-items:center; flex:0 0 auto; width:4rem; height:4rem; color:var(--devez-azul); background:linear-gradient(145deg,color-mix(in srgb,var(--devez-turquesa) 22%,var(--superficie)),color-mix(in srgb,var(--devez-azul) 9%,var(--superficie))); border:1px solid color-mix(in srgb,var(--devez-turquesa) 48%,var(--borda)); border-radius:1.25rem; box-shadow:inset -4px -4px 0 color-mix(in srgb,var(--devez-coral) 14%,transparent); }
.icone-entrada .icone-devez { width:2.25rem; height:2.25rem; }
.cabecalho-entrada h1 { margin:.1rem 0 .2rem; font-size:clamp(1.7rem,4vw,2.35rem); letter-spacing:-.035em; }
.cabecalho-entrada p { margin:0; color:var(--texto-suave); }
.cabecalho-entrada .sobretitulo-painel { color:var(--devez-turquesa); font-size:.75rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.estabelecimento-entrada { display:grid; grid-template-columns:1fr auto; gap:.15rem var(--espaco-4); margin-bottom:var(--espaco-5); padding:var(--espaco-4); background:linear-gradient(110deg,color-mix(in srgb,var(--devez-azul) 8%,var(--superficie)),color-mix(in srgb,var(--devez-turquesa) 10%,var(--superficie))); border:1px solid color-mix(in srgb,var(--devez-turquesa) 32%,var(--borda)); border-radius:var(--raio-grande); }
.estabelecimento-entrada span { color:var(--texto-suave); font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.estabelecimento-entrada strong { grid-row:1/3; grid-column:2; align-self:center; color:var(--texto); font-size:1.15rem; }
.estabelecimento-entrada small { color:var(--texto-suave); }
.perfis-entrada { min-width:0; margin:0; padding:0; border:0; }
.perfis-entrada legend { margin-bottom:var(--espaco-3); color:var(--texto); font-size:.88rem; font-weight:800; }
.grelha-perfis-entrada { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--espaco-3); }
.cartao-perfil-entrada { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--espaco-3); align-items:center; min-height:5rem; padding:var(--espaco-3); cursor:pointer; color:var(--texto); background:var(--superficie); border:1px solid color-mix(in srgb,var(--devez-azul) 18%,var(--borda)); border-radius:var(--raio-grande); box-shadow:0 8px 20px -18px var(--devez-azul); transition:transform var(--transicao),border-color var(--transicao),box-shadow var(--transicao),background var(--transicao); }
.cartao-perfil-entrada:hover { transform:translateY(-2px); border-color:var(--devez-turquesa); box-shadow:0 14px 28px -20px var(--devez-azul); }
.cartao-perfil-entrada input { position:absolute; width:1px; height:1px; min-height:0; opacity:0; pointer-events:none; }
.cartao-perfil-entrada:has(input:checked) { background:linear-gradient(125deg,color-mix(in srgb,var(--devez-turquesa) 13%,var(--superficie)),color-mix(in srgb,var(--devez-azul) 7%,var(--superficie))); border-color:var(--devez-turquesa); box-shadow:0 0 0 3px color-mix(in srgb,var(--devez-turquesa) 15%,transparent),inset 0 -3px var(--devez-coral); }
.cartao-perfil-entrada:has(input:focus-visible) { outline:3px solid color-mix(in srgb,var(--devez-turquesa) 42%,transparent); outline-offset:2px; }
.avatar-perfil-entrada { display:grid; place-items:center; width:2.75rem; height:2.75rem; color:var(--devez-turquesa); background:color-mix(in srgb,var(--devez-turquesa) 12%,var(--superficie)); border-radius:.9rem; }
.cartao-perfil-entrada--proprietario .avatar-perfil-entrada { color:var(--devez-azul); background:color-mix(in srgb,var(--devez-coral) 13%,var(--superficie)); box-shadow:inset 0 -3px color-mix(in srgb,var(--devez-coral) 58%,transparent); }
.avatar-perfil-entrada .icone-devez { width:1.65rem; height:1.65rem; }
.identidade-perfil-entrada { display:grid; min-width:0; }
.identidade-perfil-entrada strong { overflow:hidden; font-size:.98rem; text-overflow:ellipsis; white-space:nowrap; }
.identidade-perfil-entrada small { color:var(--texto-suave); font-size:.76rem; }
.estado-perfil-entrada { display:grid; place-items:center; width:1.7rem; height:1.7rem; color:transparent; border:2px solid var(--borda-forte); border-radius:50%; }
.cartao-perfil-entrada:has(input:checked) .estado-perfil-entrada { color:#fff; background:var(--devez-turquesa); border-color:var(--devez-turquesa); }
.estado-perfil-entrada .icone-devez { width:1.05rem; height:1.05rem; }
.ecra-entrada .botao-entrada { display:flex; justify-content:space-between; width:100%; min-height:3.35rem; margin-top:var(--espaco-4); padding-inline:var(--espaco-4); font-size:1rem; }
@media(max-width:38rem){.grelha-perfis-entrada{grid-template-columns:1fr}.cabecalho-entrada{align-items:flex-start}.icone-entrada{width:3.35rem;height:3.35rem}.icone-entrada .icone-devez{width:1.9rem;height:1.9rem}.estabelecimento-entrada{grid-template-columns:1fr}.estabelecimento-entrada strong{grid-row:auto;grid-column:auto}.ecra-entrada{padding:1.2rem;border-radius:var(--raio-grande)}}

.ecra-clientes, .ecra-servicos { max-width: 52rem; }

/* -------------------------------------------------------------- utilidades */

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------- ficha de cliente */

.ficha-cliente { max-width: 56rem; }

.migalhas { margin-bottom: var(--espaco-3); font-size: 0.85rem; }
.migalhas a { color: var(--texto-suave); text-decoration: none; }
.migalhas a:hover { color: var(--acento); text-decoration: underline; }

.ficha-cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-4);
}
.ficha-nome { margin: 0; font-size: 1.5rem; font-weight: 680; letter-spacing: -0.02em; }
.ficha-telefone { margin: 2px 0 0; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.ficha-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-5);
}
.ficha-numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.ficha-numero--mau { border-color: color-mix(in srgb, var(--perigo) 35%, var(--borda)); }
.ficha-numero--mau .ficha-numero-valor { color: var(--perigo); }
.ficha-numero-valor {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ficha-numero-valor--data { font-size: 1.05rem; }
.ficha-numero-rotulo { font-size: 0.75rem; color: var(--texto-suave); }

.ficha-suspensao {
  position: relative;
  padding: var(--espaco-4) var(--espaco-5);
  margin-bottom: var(--espaco-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  --indicador-cor: var(--borda-forte);
  border-radius: var(--raio);
}
.ficha-cliente:has(.marcador-suspenso) .ficha-suspensao { --indicador-cor: var(--perigo); }
.ficha-suspensao p { margin: 0 0 var(--espaco-3); color: var(--texto-suave); }
.ficha-suspensao .nota-formulario { margin: var(--espaco-2) 0 0; }

.ficha-detalhes {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--espaco-2) var(--espaco-4);
  margin: 0 0 var(--espaco-4);
}
.ficha-detalhes dt { font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.ficha-detalhes dd { margin: 0; }

.ficha-historico, .ficha-mensagens {
  display: grid;
  gap: var(--espaco-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.historico-linha, .mensagem-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  align-items: center;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.historico-linha--futura { position:relative; --indicador-cor:var(--acento); }
.ficha-compras .historico-servicos { display:grid; gap:.15rem; }
.ficha-compras .historico-servicos small { color:var(--texto-secundario); font-weight:400; }
.compra-linha { grid-template-columns:minmax(9rem,1.1fr) minmax(12rem,2fr) auto auto auto; }
.compra-linha--anulada { opacity:.62; text-decoration:line-through; }

.historico-data, .historico-hora, .historico-preco, .mensagem-data {
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
  font-size: 0.85rem;
}
.historico-hora { font-weight: 650; color: var(--texto); }
.historico-servicos { flex: 1 1 10rem; min-width: 0; }
.historico-preco { font-weight: 600; color: var(--texto); }

.mensagem-texto {
  flex: 1 1 100%;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.mensagem-tipo, .mensagem-estado {
  padding: 1px 7px;
  font-size: 0.66rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  background: var(--superficie-alt);
  border-radius: 999px;
}
.mensagem-estado[data-estado="expedida"] { color: var(--ok); background: var(--ok-l); }
.mensagem-estado[data-estado="falhada"] { color: var(--perigo); background: var(--perigo-l); }
.mensagem-estado[data-estado="pendente"] { color: var(--aviso); background: var(--aviso-l); }

/* ------------------------------------------------ centro global de SMS */
.ecra-centro-sms { display: grid; gap: var(--espaco-4); }
.metricas-centro-sms { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--espaco-2); }
.metricas-centro-sms > * { display: grid; gap: 2px; min-width: 0; padding: var(--espaco-3); color: inherit; text-decoration: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.metricas-centro-sms strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.metricas-centro-sms span { color: var(--texto-suave); font-size: .76rem; }
.filtros-centro-sms { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(10rem, .55fr) minmax(10rem, .55fr) auto auto; gap: var(--espaco-2); align-items: end; padding: var(--espaco-3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.filtros-centro-sms label { display: grid; gap: 4px; font-size: .78rem; color: var(--texto-suave); }
.cabecalho-lista-sms { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-3); }
.cabecalho-lista-sms h2 { margin: 0; }
.cabecalho-lista-sms span { color: var(--texto-suave); font-size: .78rem; }
.lista-centro-sms { display: grid; gap: var(--espaco-2); margin: 0; padding: 0; list-style: none; }
.item-centro-sms { position:relative; display: grid; grid-template-columns: minmax(11rem, .55fr) minmax(17rem, 1fr); gap: var(--espaco-2) var(--espaco-4); padding: var(--espaco-3) var(--espaco-4) var(--espaco-3) calc(var(--espaco-4) + 5px); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); --indicador-cor:var(--borda-forte); }
.item-centro-sms--prevista { --indicador-cor:var(--aviso); }
.item-centro-sms--falhada { --indicador-cor:var(--perigo); }
.identidade-sms, .meta-sms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-1) var(--espaco-2); }
.identidade-sms span, .meta-sms { color: var(--texto-suave); font-size: .75rem; }
.item-centro-sms > p { grid-column: 1 / -1; margin: 0; font-size: .85rem; line-height: 1.4; }
.erro-sms-centro { grid-column: 1 / -1; color: var(--perigo); }
@media (max-width: 1050px) { .filtros-centro-sms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .metricas-centro-sms { grid-template-columns: repeat(2, 1fr); } .filtros-centro-sms, .item-centro-sms { grid-template-columns: 1fr; } .item-centro-sms > p, .erro-sms-centro { grid-column: 1; } }

/* ------------------------------------------------- bloco: conteúdo legível */

/* A thirty-minute block is barely two lines tall, so the order matters: hour
   and name first, everything else clipped before them. */
.bloco-topo {
  display: grid;
  gap: 1px;
  align-content: start;
  min-width: 0;
  padding-right:1.25rem;
  line-height: 1.08;
}
.bloco-topo .bloco-hora { font-size:.73rem; font-weight:850; }
/* O nome do cliente é o que se procura ao olhar para a agenda, e havendo
   altura no cartão não há razão para o cortar. Passa à linha seguinte com o
   mesmo corpo de letra — nome em cima, apelido em baixo — e só a partir da
   segunda linha é que se corta. */
.bloco-topo .bloco-cliente {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-width: 0;
  overflow: hidden;
  font-size:.76rem;
  font-weight:800;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}
/* As regras de altura ficam depois da tipografia-base para vencerem a cascata:
   nenhum zoom nem nome longo volta a esmagar conteúdo num cartão curto. */
@container (max-height:42px) {
  /* Sobrava mais folga por cima do texto do que por baixo. Puxa-se para
     cima o que a entrelinha da primeira linha estava a acrescentar. */
  .bloco-agenda .bloco-topo { display:grid; gap:1px; align-content:start; padding-right:2.45rem; line-height:1; }
  .bloco-topo .bloco-hora { gap:0 2px; padding-right:0; font-size:.64rem; }
  .bloco-topo .bloco-cliente { min-width:0; overflow:hidden; font-size:.64rem; text-overflow:clip; -webkit-line-clamp:2; line-clamp:2; }
  .bloco-duracao { font-size:.55rem; }
}
/* Meia hora. A hora e o nome deixam de disputar a mesma linha: empilhados, o
   nome fica com a largura toda do cartão, que é o que faltava para deixar de
   aparecer cortado. Aqui só há altura para uma linha de nome. */
@container (max-height:30px) {
  .bloco-agenda .bloco-topo { display:grid; gap:0; align-content:start; padding-right:2.2rem; line-height:1; }
  .bloco-topo .bloco-hora,.bloco-topo .bloco-cliente { font-size:.58rem; }
  .bloco-topo .bloco-cliente { -webkit-line-clamp:1; line-clamp:1; }
  .bloco-duracao { font-size:.5rem; }
}

/* No telemóvel é a largura que aperta primeiro: a coluna estreita muito antes
   de o cartão baixar. Estas regras vêm depois das de altura de propósito, para
   que seja a dimensão mais apertada a mandar no tamanho do texto. A hora e a
   duração encolhem à frente do nome, que é o que se procura.

   Larguras de referência: a coluna no telemóvel é
   max(2.75rem, (100vw - 4.5rem) * zoom); num ecrã de 390 px isso dá 318 px a
   100%, 133 px a 42%, 64 px a 20% e 44 px no degrau mais fechado. */
@container (max-width:150px) {
  .bloco-topo { padding-right:1.6rem; line-height:1.06; }
  .bloco-topo .bloco-hora { font-size:.6rem; }
  .bloco-topo .bloco-cliente { font-size:.64rem; }
  .bloco-duracao { font-size:.52rem; }
}
@container (max-width:96px) {
  .bloco-topo { padding-right:1.2rem; line-height:1.04; }
  .bloco-topo .bloco-hora { font-size:.52rem; }
  .bloco-topo .bloco-cliente { font-size:.56rem; }
  .bloco-duracao { font-size:.46rem; }
}
@container (max-width:64px) {
  .bloco-topo { padding-right:0; line-height:1.02; }
  .bloco-topo .bloco-hora { font-size:.45rem; }
  .bloco-topo .bloco-cliente { font-size:.49rem; }
  .bloco-duracao { font-size:.4rem; }
}
/* O degrau mais fechado. Um nome partido a meio da palavra não é informação:
   quebra-se por palavras e o que não couber fica de fora. */
@container (max-width:46px) {
  .bloco-topo .bloco-hora { font-size:.4rem; }
  .bloco-topo .bloco-cliente { font-size:.43rem; overflow-wrap:normal; word-break:normal; }
  .bloco-duracao { font-size:.36rem; }
}
.bloco-agenda .bloco-servicos { margin-top:2px; }

.marcadores-equipa { position:absolute; top:4px; right:4px; display:flex; flex-direction:column; gap:2px; align-items:center; }
.marcadores-equipa .simbolo-estado,.marcadores-equipa .marcador-serie,.marcadores-equipa .marcador-medalha { width:1rem; height:1rem; }
.marcadores-equipa .icone-devez { width:.78rem; height:.78rem; }
.bloco-semana-equipa .marcadores-equipa { flex-direction:row; }
.bloco-equipa--mesma-cor::before,.bloco-semana-equipa--mesma-cor::before { box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px color-mix(in srgb,var(--indicador-cor) 38%,transparent); }
.identidade-colaborador-agenda { display:flex !important; grid-template-columns:none !important; flex-direction:row; gap:.55rem; align-items:center; min-width:0; }
.identidade-colaborador-agenda > span { display:grid; min-width:0; }
.ponto-colaborador { width:.8rem; height:.8rem; flex:0 0 auto; background:var(--colaborador-cor,var(--acento)); border:2px solid var(--superficie); border-radius:50%; box-shadow:0 0 0 1px color-mix(in srgb,var(--colaborador-cor,var(--acento)) 50%,var(--borda)); }
.campo-cor-agenda { width:4.5rem !important; padding:.2rem; cursor:pointer; }

/* ---------------------------------------------------- diálogo de pormenor */

.dialogo-marcacao { max-width: 30rem; }

.dialogo-fechar-linha { display: flex; justify-content: flex-end; margin: calc(var(--espaco-3) * -1) calc(var(--espaco-3) * -1) 0 0; }
.botao-fechar {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--texto-suave);
  background: transparent;
  border: 0;
}
.botao-fechar:hover { color: var(--texto); background: var(--superficie-alt); }

.dm-quando {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.dm-cliente { margin: 2px 0 0; font-size: 1.35rem; font-weight: 680; letter-spacing: -0.02em; }
.dm-telefone { margin: 2px 0 var(--espaco-4); color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.dm-detalhes {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: var(--espaco-2) var(--espaco-4);
  padding: var(--espaco-4) 0;
  margin: 0;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}
.dm-detalhes dt { font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); }
.dm-detalhes dd { margin: 0; }

.dm-titulo {
  margin: var(--espaco-4) 0 var(--espaco-2);
  font-size: 0.74rem;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

.dm-accoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.dm-accoes form { margin: 0; }
.dm-accoes .botao { flex: 1 1 auto; }

/* ------------------------------------------------------ montra de produtos */

.ecra-produtos { max-width: 64rem; margin: 0 auto; }
.topo-produtos, .titulo-lista-produtos {
  display: flex;
  gap: var(--espaco-4);
  align-items: flex-start;
  justify-content: space-between;
}
.topo-produtos h1, .titulo-lista-produtos h2 { margin: 0; }
.sobretitulo {
  margin: 0 0 var(--espaco-1);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento);
}
.nota-produtos { max-width: 42rem; margin: var(--espaco-2) 0 0; color: var(--texto-suave); }

.painel-novo-produto {
  padding: var(--espaco-5);
  margin: var(--espaco-5) 0 var(--espaco-6);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
}
.painel-novo-produto h2 { margin-top: 0; }
.formulario-produto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.45fr);
  gap: var(--espaco-4);
  align-items: end;
}
.formulario-produto label, .formulario-editar-produto label { display: grid; gap: var(--espaco-1); font-size: 0.82rem; font-weight: 650; }
.formulario-produto input, .formulario-produto textarea, .formulario-produto select,
.formulario-editar-produto input, .formulario-editar-produto textarea, .formulario-editar-produto select {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--espaco-2) var(--espaco-3);
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}
.formulario-produto textarea, .formulario-editar-produto textarea { resize: vertical; }
.formulario-produto small, .formulario-editar-produto small { font-weight: 400; color: var(--texto-suave); }
.produto-campo-descricao { grid-column: 1 / -1; }
.formulario-produto > button[type="submit"] {
  min-height: var(--alvo-toque);
  font: inherit;
  font-weight: 700;
  color: var(--acento-contraste);
  background: var(--acento);
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
}

.titulo-lista-produtos { align-items: end; margin-bottom: var(--espaco-4); }
.titulo-lista-produtos > span { color: var(--texto-suave); font-size: 0.82rem; }
.grelha-produtos-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--espaco-4); }
.cartao-produto-painel {
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
}
.cartao-produto-painel--inactivo { opacity: 0.68; }
.cartao-produto-painel > img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--superficie-alt); }
.produto-painel-corpo { display: grid; gap: var(--espaco-3); padding: var(--espaco-4); }
.produto-painel-titulo { display: flex; gap: var(--espaco-3); align-items: baseline; justify-content: space-between; }
.produto-painel-titulo h3, .produto-painel-corpo p { margin: 0; }
.produto-painel-corpo p { min-height: 2.8em; color: var(--texto-suave); }
.estado-produto { width: fit-content; padding: 3px 9px; font-size: 0.7rem; font-weight: 700; color: var(--ok); background: var(--ok-l); border-radius: 999px; }
.cartao-produto-painel--inactivo .estado-produto { color: var(--texto-suave); background: var(--superficie-alt); }
.produto-painel-corpo details { border-top: 1px solid var(--borda); }
.produto-painel-corpo summary { padding: var(--espaco-3) 0; font-weight: 650; cursor: pointer; }
.formulario-editar-produto { display: grid; gap: var(--espaco-3); padding-bottom: var(--espaco-3); }
.metricas-produto, .venda-produto dl { display: grid; grid-template-columns: repeat(auto-fit,minmax(6rem,1fr)); gap: var(--espaco-2); margin: 0; }
.metricas-produto div, .venda-produto dl div { display: grid; gap: .15rem; padding: var(--espaco-2); background: var(--superficie-alt); border-radius: var(--raio); }
.metricas-produto dt, .venda-produto dt { color: var(--texto-suave); font-size: .72rem; }
.metricas-produto dd, .venda-produto dd { margin: 0; font-weight: 700; }
.gestao-vendas-produtos { margin-top: var(--espaco-6); padding: var(--espaco-5); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.formulario-venda-produto { grid-template-columns: 1fr 1.25fr 1fr minmax(7rem,.35fr) auto; align-items:end; }
.campo-cliente-venda,.pesquisa-cliente-venda { min-width:0; }
.pesquisa-cliente-venda { position:relative; display:grid; gap:.28rem; }
.resultados-venda-clientes { position:absolute; top:calc(100% - 1.3rem); right:0; left:0; z-index:12; max-height:16rem; overflow-y:auto; }
.resumo-cliente-venda { min-height:1.15rem; color:var(--texto-suave); }
.resumo-cliente-venda--escolhido { color:var(--ok); font-weight:750; }
.tabela-vendas-produtos { overflow-x: auto; }
.linha-venda-produto { display: grid; grid-template-columns: minmax(10rem,1.3fr) repeat(5,minmax(6rem,1fr)); gap: var(--espaco-3); min-width: 48rem; padding: var(--espaco-3); border-bottom: 1px solid var(--borda); align-items: center; }
.linha-venda-produto--cabecalho { color: var(--texto-suave); font-size: .75rem; font-weight: 700; background: var(--superficie-alt); }
.lista-vendas-produtos { display: grid; gap: var(--espaco-3); }
.venda-produto { display: grid; grid-template-columns: minmax(10rem,.7fr) 1.5fr auto; gap: var(--espaco-4); align-items: center; padding: var(--espaco-3); border: 1px solid var(--borda); border-radius: var(--raio); }
.venda-produto > div:first-child { display: grid; gap: .2rem; }
.venda-produto > div:first-child span { color: var(--texto-suave); font-size: .82rem; }
.venda-produto--anulada { opacity: .55; text-decoration: line-through; }
.lista-ofertas-aniversario { display: grid; gap: var(--espaco-2); padding: 0; list-style: none; }
.lista-ofertas-aniversario li { display: flex; gap: var(--espaco-3); align-items: center; justify-content: space-between; padding: var(--espaco-3); background: var(--superficie-alt); border-radius: var(--raio); }
.estado-vazio-produtos { padding: var(--espaco-6); text-align: center; color: var(--texto-suave); background: var(--superficie); border: 1px dashed var(--borda-forte); border-radius: var(--raio-grande); }
.estado-vazio-produtos span { font-size: 2rem; }
.estado-vazio-produtos p { margin: var(--espaco-2) 0 0; font-weight: 650; color: var(--texto); }
.grelha-galeria-painel { display: grid; grid-template-columns: repeat(auto-fit,minmax(15rem,1fr)); gap: var(--espaco-4); }
.cartao-foto-painel { overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.cartao-foto-painel > img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--superficie-alt); }

/* A date and its actions occupy separate rows. This prevents the controls
   from colliding when seven days share the available desktop width. */
.cabecalho-coluna {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-1);
  align-items: stretch;
  padding: var(--espaco-1);
  min-height: var(--altura-cabecalho-coluna);
}
.data-coluna { display: flex; gap: 5px; align-items: baseline; justify-content: center; min-width: 0; }
.accoes-coluna { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: var(--espaco-3); min-width: 0; }
.accoes-coluna button {
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--espaco-2);
  overflow: hidden;
  font: inherit;
  font-weight: 750;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--borda);
  border-radius: 9px;
  box-shadow: 0 2px 5px rgb(6 45 77 / 10%);
  cursor: pointer;
}
.accoes-coluna .botao-criar { color:var(--devez-azul); background:color-mix(in srgb,var(--devez-azul) 9%,var(--superficie)); border-color:color-mix(in srgb,var(--devez-azul) 34%,var(--borda)); box-shadow:none; }
.accoes-coluna .botao-criar:hover { color:var(--devez-azul); background:color-mix(in srgb,var(--devez-azul) 15%,var(--superficie)); }
.accoes-coluna .botao-criar .icone-devez { width:1.5rem; height:1.5rem; vertical-align:middle; }
.accoes-coluna .botao-bloquear { color:#fff; background:var(--devez-azul); border-color:var(--devez-azul); }
.accoes-coluna .botao-bloquear:hover { background:color-mix(in srgb,var(--devez-azul) 86%,#000); }
.accoes-coluna .botao-bloquear .icone-devez { width:1.55rem; height:1.55rem; padding:.15rem; background:#fff; border-radius:.4rem; box-shadow:0 0 0 1px rgb(255 255 255 / 45%); }

@media (max-width: 85rem) {
}

@media (max-width: 40rem) {
  .topo-produtos, .titulo-lista-produtos { align-items: stretch; flex-direction: column; }
  .painel-novo-produto { padding: var(--espaco-4); }
  .formulario-produto { grid-template-columns: 1fr; }
	.formulario-venda-produto, .venda-produto { grid-template-columns: 1fr; }
  .produto-campo-descricao { grid-column: auto; }
  .grelha-produtos-painel { grid-template-columns: 1fr; }
  .cabecalho-coluna { min-height: var(--altura-cabecalho-coluna); }
  .accoes-coluna button { min-height: 38px; font-size: 0.72rem; }
}

/* ------------------------------------------------------- colaboradores */
.pagina-colaboradores { max-width: 76rem; margin: 0 auto; }
.mapa-cadeiras { margin: var(--espaco-5) 0; }
.mapa-cadeiras h2, .mapa-cadeiras p { margin-top: 0; }
.mapa-cadeiras p { color: var(--texto-suave); }
.grelha-cadeiras { display: grid; grid-template-columns: repeat(auto-fit,minmax(15rem,1fr)); gap: var(--espaco-3); }
.cadeira-resumo { display: grid; grid-template-columns: 2.7rem 1fr auto; gap: var(--espaco-3); align-items: center; min-height: 8rem; padding: var(--espaco-3); border: 1px solid var(--borda); border-radius: var(--raio-grande); background: var(--superficie); box-shadow: var(--sombra); }
.cadeira-resumo.livre { border-style: dashed; background: var(--superficie-alt); }
.cadeira-numero { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; color: #fff; background: var(--acento); font-size: 1.1rem; font-weight: 800; }
.cadeira-resumo.livre .cadeira-numero { color: var(--texto-suave); background: var(--borda); }
.cadeira-resumo div:nth-child(2) { display: grid; gap: .15rem; min-width: 0; }
.cadeira-resumo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadeira-resumo span, .cadeira-resumo small { color: var(--texto-suave); }
.cadeira-resumo a { font-weight: 700; }
.lista-colaboradores { display: grid; gap: var(--espaco-3); margin: var(--espaco-5) 0; }
.cartao-colaborador, .novo-colaborador { padding: var(--espaco-4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.cartao-colaborador > summary, .novo-colaborador > summary { display: flex; justify-content: space-between; gap: var(--espaco-3); align-items: center; cursor: pointer; }
.etiqueta-proprietario { display: inline-block; margin-left: .4rem; padding: .2rem .5rem; border-radius: 999px; background: #e7f8f1; color: #087252; font-size: .75rem; }
.formulario-colaborador { display: grid; gap: var(--espaco-4); margin-top: var(--espaco-4); }
.grelha-campos-colaborador { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--espaco-3); }
.grelha-campos-colaborador label, .formulario-colaborador fieldset { display: grid; gap: var(--espaco-1); }
.grelha-campos-colaborador input { width: 100%; min-height: 44px; }
.metricas-colaborador { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--espaco-2); margin-top: var(--espaco-4); }
.metricas-colaborador p { display: grid; gap: .15rem; margin: 0; padding: var(--espaco-3); border-radius: var(--raio); background: var(--superficie-alt); }
.metricas-colaborador strong { font-size: 1.2rem; }
.metricas-colaborador span { color: var(--texto-suave); font-size: .82rem; }
.grelha-checks-colaborador { display: grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: var(--espaco-2); }
.horario-colaborador { display: grid; gap: var(--espaco-2); }
.horario-colaborador > div { display: grid; grid-template-columns: minmax(8rem,1fr) 8rem auto 8rem; gap: var(--espaco-2); align-items: center; }
.botao-acao-agenda { min-height:50px; padding-inline:1.1rem; white-space:nowrap; border-radius:14px; font-weight:750; box-shadow:0 4px 10px rgb(6 45 77 / 13%); }
.botao-acao-agenda[data-accao="criar-marcacao"] { color:var(--devez-azul); border-color:color-mix(in srgb,var(--devez-azul) 34%,var(--borda)); background:color-mix(in srgb,var(--devez-azul) 9%,var(--superficie)); box-shadow:0 4px 10px rgb(6 45 77 / 8%); }
.botao-acao-agenda[data-accao="criar-marcacao"]:hover { background:color-mix(in srgb,var(--devez-azul) 15%,var(--superficie)); }
.botao-acao-bloquear { border-color:var(--devez-azul); background:var(--devez-azul); color:#fff; }
.botao-acao-bloquear:hover { border-color:var(--devez-azul); background:color-mix(in srgb,var(--devez-azul) 86%,#000); }
.botao-acao-bloquear .icone-devez { width:1.55rem; height:1.55rem; margin-right:.15rem; padding:.2rem; background:#fff; border-radius:.45rem; vertical-align:middle; box-shadow:0 0 0 1px rgb(255 255 255 / 42%); }
.atalhos-bloqueio { display: flex; flex-wrap: wrap; gap: .45rem; }
.atalhos-bloqueio button { min-height: 36px; padding: 0 .7rem; color: var(--texto-suave); background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: .55rem; cursor: pointer; }
[data-opcoes-repeticao] { display: grid; gap: var(--espaco-2); }
[data-opcoes-repeticao][hidden] { display: none; }
@media (max-width: 40rem) {
  .grelha-campos-colaborador { grid-template-columns: 1fr; }
  .horario-colaborador > div { grid-template-columns: 1fr 1fr auto 1fr; }
  .cartao-colaborador > summary { align-items: flex-start; flex-direction: column; }
  .grelha-cadeiras { grid-template-columns: 1fr; }
  .cadeira-resumo { min-height: 6.5rem; }
  .acoes-agenda .botao-acao-agenda { flex: 1; min-width: 8rem; }
}

.servicos-por-colaborador { padding: var(--espaco-4); margin: var(--espaco-5) 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.servicos-por-colaborador .titulo-com-acao { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; justify-content: space-between; }
.servicos-por-colaborador h2, .servicos-por-colaborador p { margin-top: 0; }
.servicos-por-colaborador p { color: var(--texto-suave); }
.grelha-servicos-colaborador { display: grid; grid-template-columns: repeat(auto-fit,minmax(14rem,1fr)); gap: var(--espaco-3); }
.grelha-servicos-colaborador article { padding: var(--espaco-3); background: var(--superficie-alt); border-radius: var(--raio); }
.grelha-servicos-colaborador h3 { margin: 0 0 var(--espaco-2); }
.grelha-servicos-colaborador article div { display: flex; flex-wrap: wrap; gap: var(--espaco-1); }
.grelha-servicos-colaborador article span { padding: 4px 8px; font-size: .75rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; }
.excecoes-repeticao { display: flex; flex-wrap: wrap; gap: var(--espaco-2); padding: var(--espaco-3); border: 1px solid var(--borda); border-radius: var(--raio); }
.excecoes-repeticao legend { padding: 0 var(--espaco-1); font-size: .82rem; font-weight: 650; }
.excecoes-repeticao label { display: flex; gap: 4px; align-items: center; font-size: .78rem; }
.excecoes-repeticao input { width: auto; min-height: auto; }

/* ---------------------------------------------------- acordo de remuneração */
/* Os quatro campos ficam todos visíveis: sem JavaScript não há maneira honesta
   de os esconder, e escondê-los com JavaScript deixaria quem o tem desligado
   sem forma de configurar um modelo. As legendas dizem qual serve para quê. */
.arranjo-colaborador { border: 1px solid var(--borda); border-radius: .8rem; padding: 1rem; margin-top: 1rem; }
.arranjo-colaborador legend { padding: 0 .4rem; font-weight: 700; font-size: .85rem; }
.arranjo-colaborador .campo-modelo { display: block; max-width: 32rem; margin-bottom: 1rem; }
.arranjo-colaborador .campo-modelo select { width: 100%; }
.arranjo-colaborador small { display: block; margin-top: .25rem; color: var(--texto-suave); font-size: .75rem; line-height: 1.35; }
.modelos-acordo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin: .25rem 0 1rem; }
.modelos-acordo p { display: grid; gap: .15rem; margin: 0; padding: .7rem .8rem; border: 1px solid var(--borda); border-radius: .7rem; background: rgba(255,255,255,.55); }
.modelos-acordo strong { font-size: .82rem; }
.modelos-acordo span { color: var(--texto-suave); font-size: .72rem; line-height: 1.35; }
.historico-acordos { margin: .75rem 0 1rem; border-left: 3px solid var(--borda); padding-left: .75rem; }
.historico-acordos summary { cursor: pointer; color: var(--texto-suave); font-weight: 650; }
.historico-acordos ul { display: grid; gap: .45rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.historico-acordos li { display: grid; grid-template-columns: minmax(8rem,.7fr) minmax(12rem,1.5fr) auto; gap: .65rem; align-items: baseline; padding: .55rem .7rem; border-radius: .55rem; background: var(--fundo-suave); }
.historico-acordos li.acordo-actual { background: #e9f8ef; border: 1px solid #9ed8b2; }
.historico-acordos small { color: var(--texto-suave); }
@media (max-width: 720px) {
  .modelos-acordo { grid-template-columns: 1fr; }
  .historico-acordos li { grid-template-columns: 1fr; gap: .18rem; }
}

/* ------------------------------------------------ avisos da Atividade */
/* Uma barra de cor à esquerda distingue as notícias más das boas sem obrigar a
   ler primeiro. O resto do cartão fica igual ao das transferências. */
.item-atividade--mau { position:relative; --indicador-cor:var(--perigo, #b3261e); }
.item-atividade--atencao { position:relative; --indicador-cor:var(--aviso, #b06f00); }
.item-atividade--bom { position:relative; --indicador-cor:var(--sucesso, #1f8a53); }
.item-atividade h3 { font-size: 1rem; font-weight: 600; margin: .2rem 0; }

/* --------------------------------------------------- horas na marcação manual */
.grelha-horas-painel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
  gap: .35rem; margin: .5rem 0; max-height: 13rem; overflow-y: auto;
  padding: .5rem; border: 1px solid var(--borda); border-radius: .6rem;
  background: var(--superficie-alt, var(--superficie));
}
.hora-painel {
  padding: .4rem .2rem; text-align: center; font: inherit; font-size: .85rem;
  font-variant-numeric: tabular-nums; border-radius: .4rem;
  border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto);
}
button.hora-painel { cursor: pointer; }
button.hora-painel:hover { border-color: var(--acento); color: var(--acento); }
.hora-painel--escolhida { background: var(--acento); border-color: var(--acento); color: #fff; }
.hora-painel--ocupada {
  color: var(--perigo, #b3261e); text-decoration: line-through;
  border-color: color-mix(in srgb, var(--perigo, #b3261e) 35%, transparent);
  background: color-mix(in srgb, var(--perigo, #b3261e) 10%, var(--superficie));
}
.hora-painel--sem_espaco, .hora-painel--passada {
  color: var(--texto-suave); border-style: dashed;
}
.legenda-horas-painel { margin: 0 0 .5rem; }
.nota-campo { display: block; margin-top: .25rem; color: var(--texto-suave); font-size: .75rem; }


/* ------------------------------------------------------ legenda de serviços */
/* Sem legenda a cor é decoração: bonita e muda. Com ela o barbeiro lê a coluna
   e sabe o que o espera no dia sem abrir uma única marcação. */
.legenda-servicos { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--texto-suave); }
/* O remate coral que a fita dos estados já tinha passa às outras duas
   legendas: as três dizem a mesma espécie de coisa e agora lêem-se como um
   conjunto, em vez de uma ter moldura e as outras não. */
.legenda-servicos, .legenda-disponibilidade {
  padding: .4rem .7rem;
  border: 1px solid color-mix(in srgb,var(--devez-azul) 18%,var(--borda));
  border-radius: .8rem;
  background: linear-gradient(115deg,color-mix(in srgb,var(--devez-turquesa) 7%,var(--superficie)),var(--superficie));
  box-shadow: 0 5px 16px -14px var(--devez-azul), inset 3px 0 0 color-mix(in srgb,var(--devez-coral) 72%,transparent);
}
.legenda-servicos li { display: inline-flex; align-items: center; gap: .35rem; }
.ponto-servico { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; border: 1px solid rgb(0 0 0 / .12); }
.servico-designacao { display: inline-flex; align-items: center; gap: .45rem; }

/* ---------------------------------------------------------------- cartaz */
/* As folhas mostram-se no ecrã como pré-visualização e imprimem uma por página.
   O que se vê é o que sai da impressora: um cartaz aproximado do A4 e um
   quadrado para rede social. */
.folhas-cartaz { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.5rem 0; }
.folha {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; padding: 2rem 1.5rem; text-align: center;
  background: #fff; color: #111; border: 1px solid var(--borda);
  border-radius: .8rem; box-shadow: var(--sombra);
}
.folha--cartaz { width: min(100%, 26rem); aspect-ratio: 1 / 1.414; }
.folha--quadrado { width: min(100%, 22rem); aspect-ratio: 1 / 1; }
.folha-marca { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.folha-chamada { margin: 0; font-size: 1.05rem; font-weight: 600; color: #444; }
.folha-codigo { width: min(62%, 15rem); }
.folha-codigo svg { width: 100%; height: auto; display: block; }
.folha-instrucao { margin: 0; font-size: .9rem; color: #555; }
.folha-endereco { margin: 0; font-size: .78rem; color: #666; word-break: break-all; }
.folha-instagram { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; font-weight: 600; }
.simbolo-instagram { display: inline-flex; }
.accoes-cartaz { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0; }
.notas-cartaz { margin: 0; padding-left: 1.1rem; color: var(--texto-suave); font-size: .85rem; line-height: 1.6; }
.notas-cartaz li { margin-bottom: .4rem; }

@media print {
  /* Só as folhas vão para o papel. Menu, botões e explicações ficam no ecrã. */
  .cabecalho-painel, .menu-painel, .cabecalho-seccao, .nao-imprimir, .aviso { display: none !important; }
  .folhas-cartaz { display: block; margin: 0; gap: 0; }
  .folha { width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; break-after: page; }
  .folha--cartaz { aspect-ratio: auto; height: 96vh; }
  .folha--quadrado { aspect-ratio: auto; height: 96vh; }
  .folha:last-child { break-after: auto; }
}

/* ------------------------------------------------------- escolha do tema */
/* As amostras usam as próprias variáveis do tema (web/themes/predefinicoes.css),
   apanhadas por [data-preset]/[data-acento] no próprio cartão. Copiar aqui as
   cores daria duas verdades que divergiriam à primeira alteração. */
.escolha-tema { border: 1px solid var(--borda); border-radius: .8rem; padding: 1rem; }
.escolha-tema legend { padding: 0 .4rem; font-weight: 700; font-size: .85rem; }
.amostras-tema { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .8rem; margin-top: .6rem; }
.amostra-tema { display: block; cursor: pointer; }
.amostra-tema input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.amostra-vista {
  display: flex; flex-direction: column; gap: .4rem; padding: .8rem;
  min-height: 7rem; border: 2px solid var(--borda); border-radius: .7rem;
  background: var(--superficie); color: var(--texto);
  font-family: var(--fonte-texto); transition: border-color .15s, box-shadow .15s;
}
.amostra-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem; }
.amostra-linha { height: .4rem; border-radius: 99px; background: var(--borda); }
.amostra-linha--curta { width: 60%; }
.amostra-botao {
  margin-top: auto; align-self: flex-start; padding: .3rem .7rem;
  border-radius: var(--raio, .4rem); font-size: .75rem; font-weight: 600;
  background: var(--acento); color: var(--acento-contraste, #fff);
}
.amostra-tema input:checked + .amostra-vista { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 28%, transparent); }
.amostra-tema input:focus-visible + .amostra-vista { outline: 2px solid currentColor; outline-offset: 2px; }
.amostra-legenda { display: block; margin-top: .4rem; line-height: 1.3; }
.amostra-legenda small { display: block; color: var(--texto-suave); font-size: .72rem; }

.amostras-acento { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.amostra-acento { display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer; font-size: .72rem; }
.amostra-acento input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.disco-acento {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--acento);
  border: 2px solid transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / .12) inset;
  transition: border-color .15s, box-shadow .15s;
}
.amostra-acento input:checked + .disco-acento { border-color: var(--texto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 35%, transparent); }
.amostra-acento input:focus-visible + .disco-acento { outline: 2px solid currentColor; outline-offset: 2px; }
.nome-acento { color: var(--texto-suave); }
.prefixo-campo { color: var(--texto-suave); margin-right: .15rem; }
/* Entry hub and clean-establishment onboarding. */
.inicio-devez,.entrada-real{min-height:100vh;padding:clamp(1.5rem,5vw,5rem);background:linear-gradient(145deg,#eef4ff,#f8fafc 55%,#edfdf5)}
.inicio-devez>header{max-width:62rem;margin:0 auto 2rem}.inicio-devez h1,.entrada-real h1{margin:.25rem 0;font-size:clamp(2rem,5vw,3.5rem)}
.opcoes-inicio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;max-width:70rem;margin:auto}
.opcao-inicio,.cartao-entrada-real{padding:clamp(1.4rem,4vw,2.5rem);border:1px solid #d6dfeb;border-radius:1.5rem;background:#fff;box-shadow:0 20px 50px rgba(31,41,51,.09)}
.opcao-real{border-top:5px solid #15803d}.opcao-demo{border-top:5px solid #245795}.distintivo-inicio{display:inline-flex;padding:.35rem .65rem;border-radius:999px;background:#e8f0fc;color:#19477f;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.opcao-real .distintivo-inicio{background:#dcfce7;color:#166534}.accoes-inicio{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.entrada-real{display:grid;align-content:center}.cartao-entrada-real{width:min(100%,34rem);margin:auto}.cartao-entrada-real form{display:grid;gap:1rem;margin:1.5rem 0}.cartao-entrada-real label{display:grid;gap:.4rem;font-weight:700}.cartao-entrada-real input,.partilha-link input{min-height:3rem;padding:.7rem .85rem;border:1px solid #b8c5d4;border-radius:.7rem;font:inherit}
.voltar-inicio{position:absolute;top:1.5rem;left:clamp(1.5rem,5vw,5rem)}.pagina-onboarding{max-width:70rem}.convite-onboarding{display:grid;justify-items:start;gap:1rem}.convite-onboarding>strong{font-size:clamp(2.2rem,7vw,4.5rem);letter-spacing:.16em}.passos-onboarding{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}.passos-onboarding a{display:grid;gap:.4rem;text-decoration:none;color:inherit}.partilha-link{display:grid;grid-template-columns:minmax(14rem,1fr) auto auto;gap:.6rem;align-items:center}.confirmacao-copia{color:#087443;font-weight:700}
@media(max-width:700px){.opcoes-inicio,.passos-onboarding{grid-template-columns:1fr}.partilha-link{grid-template-columns:1fr 1fr}.partilha-link input,.confirmacao-copia{grid-column:1/-1}}
.inicio-plataforma{display:grid;align-content:center;gap:clamp(2rem,5vw,4rem);color:#132238;background:radial-gradient(circle at 80% 15%,rgba(39,111,191,.18),transparent 35%),linear-gradient(145deg,#f7fafc,#eaf2fb 70%,#e8f8f1)}
.marca-inicio{display:grid;grid-template-columns:auto;grid-template-rows:auto auto;justify-content:start;align-items:center;row-gap:.2rem;max-width:75rem;width:100%;margin:auto}.marca-inicio .logo-devez{display:block;width:min(15rem,58vw);height:auto}/* O logótipo tem folga interna no próprio SVG, pelo que encostar o nome à
   esquerda da caixa o deixava desalinhado do desenho. Centrado sob a marca,
   fica alinhado seja qual for o comprimento do nome da actividade. */
.marca-inicio small{justify-self:center;padding-left:0;color:#52657c}
.entrada-plataforma{width:min(100%,75rem);margin:auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(20rem,.75fr);gap:clamp(2rem,7vw,6rem);align-items:center}.promessa-plataforma h1{font-size:clamp(2.7rem,6vw,5.3rem);line-height:1.02;letter-spacing:-.045em;margin:.5rem 0 1.3rem}.promessa-plataforma>p{font-size:1.2rem;max-width:38rem;color:#4d6077}.promessa-plataforma ul{display:flex;flex-wrap:wrap;gap:.55rem;padding:0;list-style:none}.promessa-plataforma li{padding:.5rem .75rem;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid #d5e1ee;font-weight:700;font-size:.88rem}
.cartao-login-plataforma{padding:clamp(1.5rem,4vw,2.5rem);background:#fff;border:1px solid #d3dfec;border-radius:1.5rem;box-shadow:0 24px 70px rgba(20,55,90,.14)}.cartao-login-plataforma h2{font-size:2rem;margin:.2rem 0}.cartao-login-plataforma form,.formulario-autorizacao{display:grid;gap:1rem;margin:1.5rem 0}.cartao-login-plataforma label,.formulario-autorizacao label{display:grid;gap:.4rem;font-weight:750}.cartao-login-plataforma input,.formulario-autorizacao input{min-height:3.25rem;border:1px solid #b7c5d5;border-radius:.75rem;padding:.75rem;font:inherit}.entrada-demonstracao{width:min(100%,75rem);margin:auto;padding:1.4rem 1.2rem 2rem;border-top:1px solid #cdd9e6;color:#5a6b7d;font-size:.9rem}.cabecalho-demonstracoes{display:grid;gap:.2rem;margin-bottom:1rem}.grelha-demonstracoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.grelha-demonstracoes article{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:1rem;background:#fff;border:1px solid #d3dfec;border-radius:1rem;box-shadow:0 10px 30px rgba(20,55,90,.08)}.grelha-demonstracoes article div{display:grid;gap:.2rem}.grelha-demonstracoes p{grid-column:2;display:flex;flex-wrap:wrap;gap:1rem;margin:0}.entrada-demonstracao a{color:#365d8c;font-weight:750}.icone-demonstracao{font-size:1.6rem}.identidade-autorizada{display:grid;padding:1rem;border-radius:.8rem;background:#edf5ff}.formulario-autorizacao{max-width:38rem}
@media(max-width:800px){.entrada-plataforma{grid-template-columns:1fr}.promessa-plataforma h1{font-size:clamp(2.4rem,11vw,4rem)}.grelha-demonstracoes{grid-template-columns:1fr}.inicio-plataforma{padding:1.25rem}}
/* Caminho de volta à entrada da plataforma. Sem ele, quem entra na
   demonstração fica sem saída visível a não ser editar o endereço. */
.voltar-devez { display: flex; gap: var(--espaco-2); align-items: center; padding: var(--espaco-3); color: var(--texto-suave); text-decoration: none; }
.voltar-devez:hover { color: var(--acento); }

/* A minha conta. A página tem um cartão só, e o que nela importa é o
   formulário: campos largos ao toque e as duas mensagens visíveis sem rolar.
   `.sucesso` fica aqui porque `.erro` já existe em estilo.css e faltava o par. */
.pagina-conta { max-width: 42rem; }
.cartao-conta { padding: var(--espaco-5); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
.dados-conta { display: grid; grid-template-columns: auto 1fr; gap: var(--espaco-2) var(--espaco-4); margin: 0 0 var(--espaco-3); }
.dados-conta dt { color: var(--texto-suave); }
.dados-conta dd { margin: 0; font-weight: 700; }
.formulario-conta { display: grid; gap: var(--espaco-4); margin-top: var(--espaco-4); padding-top: var(--espaco-4); border-top: 1px solid var(--borda); }
.formulario-conta label { display: grid; gap: var(--espaco-1); font-weight: 700; }
.formulario-conta input { min-height: 44px; padding: var(--espaco-3); border: 1px solid var(--borda-forte, var(--borda)); border-radius: var(--raio); font: inherit; }
.formulario-conta small { font-weight: 400; color: var(--texto-suave); }
.aviso.sucesso { position:relative; padding:var(--espaco-3) var(--espaco-4) var(--espaco-3) calc(var(--espaco-4) + 5px); margin:0 0 var(--espaco-4); color:var(--ok-texto); background:var(--ok-l); border:1px solid color-mix(in srgb,var(--ok) 30%,var(--borda)); border-radius:var(--raio); --indicador-cor:var(--ok); }


/* Definições · Endereço. A lista de domínios é uma linha por endereço, com o
   botão de remover encostado à direita; em ecrã estreito o botão passa para
   baixo em vez de espremer o nome, que é a parte que importa ler. */
.endereco-atribuido {
	font-size: 1.15rem;
	word-break: break-all;
}
.passos-dominio {
	margin: 0 0 1rem 1.1rem;
	padding: 0;
	line-height: 1.6;
}
.passos-dominio li { margin-bottom: 0.4rem; }
.lista-dominios {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.lista-dominios li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--borda);
	border-radius: var(--raio);
}
.lista-dominios li span { word-break: break-all; }


/* Porta de entrada de devez.pt: só a escolha do ofício. Cartões largos, alvo
   de toque generoso, e sem nada que se pareça com um formulário — quem entra
   na conta fá-lo na página do seu ofício, não aqui. */
.inicio-escolha { max-width: 46rem; margin: 0 auto; text-align: center; }
.inicio-escolha h1 { margin-bottom: 0.25rem; }
.grelha-negocios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.cartao-negocio {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.1rem 1rem;
	border: 1px solid var(--borda);
	border-radius: var(--raio-grande);
	text-decoration: none;
	background: var(--superficie);
	color: inherit;
}
.icone-oficio { display:grid; place-items:center; width:2.9rem; height:2.9rem; margin:0 auto .35rem; color:#079a99; background:#e8f8f6; border:1px solid #c5e9e5; border-radius:.9rem; }
.icone-oficio .icone-devez { width:1.8rem; height:1.8rem; }
.icone-oficio--grande { width:4rem; height:4rem; margin:0 0 .8rem; border-radius:1.2rem; }
.icone-oficio--grande .icone-devez { width:2.55rem; height:2.55rem; }
.cartao-negocio:hover, .cartao-negocio:focus-visible { border-color: var(--acento); }
.cartao-negocio strong { font-size: 1.1rem; }
.cartao-negocio span { font-size: 0.9rem; opacity: 0.75; }

.registo-privado{margin:1.25rem 0;padding:1rem;border:1px solid #99a9b7;border-left:5px solid #315b76;border-radius:.75rem;background:#f7fafc;color:#1f2933}.registos-privados-lista{display:grid;gap:.75rem;padding:0;list-style:none}.registos-privados-lista li{padding:.85rem;border:1px solid #d8e0e7;border-radius:.6rem;background:#fff}.registos-privados-lista header{display:flex;justify-content:space-between;gap:1rem}.registos-privados-lista header span,.fotografias-clinicas figcaption{color:#526474;font-size:.85rem}.registos-privados-lista code{white-space:pre-wrap}.fotografias-clinicas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}.fotografias-clinicas figure{margin:0}.fotografias-clinicas img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.6rem}.fotografias-clinicas figcaption{margin-top:.35rem}.fotografias-clinicas figcaption strong{display:block;color:#315b76}
.registo-privado{position:relative;padding-left:1.5rem;border-left:1px solid #99a9b7;--indicador-cor:#315b76}

/* Tríade transversal deVez: a cor escolhida pelo colaborador mantém os
   controlos; azul, turquesa e coral dão hierarquia ao produto partilhado. */
body {
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--devez-turquesa) 10%,transparent),transparent 30rem),
    radial-gradient(circle at 100% 12%,color-mix(in srgb,var(--devez-coral) 6%,transparent),transparent 26rem),
    var(--superficie-fundo);
}
::selection { color:#fff; background:var(--devez-turquesa); }
.cabecalho-painel { box-shadow:0 10px 30px -25px var(--devez-azul); }
.cabecalho-painel::after {
  content:""; position:absolute; inset:auto 0 -1px; height:3px;
  background:linear-gradient(90deg,var(--devez-azul) 0 38.2%,var(--devez-turquesa) 38.2% 76.4%,var(--devez-coral) 76.4%);
}
/* Na barra lateral, o cabeçalho ocupa a coluna toda e rola. Presa ao fundo
   desse elemento, a barra de marca acabava a atravessar a lista a meio, entre
   duas entradas do menu, como se fosse um separador que ninguém pediu. Passa
   para o fim da identidade — que é o único sítio onde uma linha ali se lê
   como separador — e substitui a risca cinzenta que lá estava. */
@media (min-width: 64rem) {
  .cabecalho-painel::after { content:none; }
  .cabecalho-identidade { position:relative; border-bottom:0; }
  .cabecalho-identidade::after {
    content:""; position:absolute; inset:auto 0 0; height:3px; border-radius:2px;
    background:linear-gradient(90deg,var(--devez-azul) 0 38.2%,var(--devez-turquesa) 38.2% 76.4%,var(--devez-coral) 76.4%);
  }
}
/* A segunda zona do menu. Acima, o trabalho do dia; abaixo, a configuração do
   negócio. Duas barras iguais, uma a fechar a identidade e outra a separar as
   duas zonas — é a divisão que se lê sem precisar de títulos. */
.separador-menu {
  /* O menu é uma coluna: com flex-grow, a barra crescia para ocupar toda a
     altura que sobrava. Aqui não cresce nem encolhe — são três pixéis. */
  flex: 0 0 3px;
  width: 100%;
  height: 3px;
  margin: var(--espaco-3) 0;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg,var(--devez-azul) 0 38.2%,var(--devez-turquesa) 38.2% 76.4%,var(--devez-coral) 76.4%);
}
.marca-devez-painel { filter:saturate(1.16) contrast(1.06); }
/* Havia dois estilos para o mesmo estado, distinguidos por um `c` — `.ativo`
   e `.activo` — e por o selector exigir aria-current="page". Consoante o
   caminho, o item corrente aparecia ora com esta barra, ora com um rectângulo
   cinzento. Passa a ser um só, e é este. */
.nav-painel a:hover {
  border-color:color-mix(in srgb,var(--devez-turquesa) 34%,var(--borda));
  background:color-mix(in srgb,var(--devez-turquesa) 7%,var(--superficie));
  box-shadow:inset 4px 0 color-mix(in srgb,var(--devez-turquesa) 45%,transparent);
}
.nav-painel a[aria-current],.nav-painel a.ativo,.nav-painel a.activo {
  color:var(--texto); background:linear-gradient(90deg,color-mix(in srgb,var(--devez-turquesa) 15%,var(--superficie)),color-mix(in srgb,var(--devez-azul) 7%,var(--superficie)));
  box-shadow:inset 4px 0 var(--devez-turquesa),inset 0 -2px var(--devez-coral);
}
.botao-criar,.botao.primario {
  background:linear-gradient(110deg,color-mix(in srgb,var(--acento) 76%,var(--devez-turquesa)),color-mix(in srgb,var(--acento) 80%,var(--devez-azul)));
  border-color:color-mix(in srgb,var(--devez-azul) 60%,var(--acento));
  box-shadow:0 5px 0 -3px var(--devez-coral),0 14px 24px -18px var(--devez-azul);
}
:where(.resumo-relacao>*,.cartao-relacao,.item-atividade,.cartao-relay,.cartao-configuracao-mensagem,.bloco-agenda,.metricas-centro-sms>*,.painel-novo-produto,.cartao-produto-painel,.cartao-colaborador,.servicos-por-colaborador) {
  border-color:color-mix(in srgb,var(--devez-azul) 18%,var(--borda));
  box-shadow:0 2px 4px color-mix(in srgb,var(--devez-azul) 8%,transparent),0 15px 30px -26px color-mix(in srgb,var(--devez-azul) 52%,transparent);
}
:where(.resumo-relacao>*,.metricas-centro-sms>*):nth-child(3n+1){border-top:3px solid var(--devez-turquesa)}
:where(.resumo-relacao>*,.metricas-centro-sms>*):nth-child(3n+2){border-top:3px solid var(--devez-azul)}
:where(.resumo-relacao>*,.metricas-centro-sms>*):nth-child(3n){border-top:3px solid var(--devez-coral)}
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid color-mix(in srgb,var(--devez-turquesa) 42%,transparent); border-color:var(--devez-coral); }

.grelha-fichas-privadas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem}.cartao-ficha-privada{display:grid;gap:.8rem;padding:1.1rem;color:inherit;text-decoration:none;background:linear-gradient(145deg,#fff,#f1f8f8);border:1px solid rgba(15,118,110,.18);border-radius:1rem;box-shadow:0 .5rem 1.5rem rgba(31,41,51,.06);transition:transform .15s,border-color .15s}.cartao-ficha-privada:hover,.cartao-ficha-privada:focus-visible{border-color:#0f766e;transform:translateY(-2px)}.ficha-privada-identidade,.ficha-privada-contagens{display:flex;justify-content:space-between;gap:.75rem}.ficha-privada-identidade{flex-direction:column}.ficha-privada-contagens span{flex:1;padding:.65rem;text-align:center;background:rgba(15,118,110,.08);border-radius:.75rem}.aviso-demonstracao{margin-top:1.25rem;padding:.85rem 1rem;color:#315b76;background:#edf7fb;border-radius:.8rem}

/* ---------------------------------------------------------------------------
   O cartão baixo — a última palavra sobre geometria.

   Fica no fim do ficheiro de propósito. Um cartão de vinte minutos casa também
   com as consultas de `max-height:30px` e `max-height:42px` acima, que lhe
   impõem duas linhas empilhadas; num cartão de treze pixéis úteis a segunda
   linha sai cortada. É esta secção que tem de mandar, e manda por vir depois.

   A regra é de altura e de largura, nunca de zoom: a altura de um cartão
   depende da duração e não muda com o zoom, e a largura da coluna é que muda.

   Os limiares — 58, 93, 146 e 244 — não são redondos por acaso. São os pontos
   médios entre as larguras que um cartão tem em cada nível de zoom no aparelho
   de referência, um Pixel 8 Pro com 412px de viewport. Ficarem a meio é o que
   dá margem: um telemóvel mais estreito ou mais largo desloca as larguras, mas
   continuam a cair do mesmo lado do limiar. Ver docs/zoom.md §4-C e §4-F.
   --------------------------------------------------------------------------- */
@container (max-height:20px) {
  .bloco-duracao { display: none; }
  .bloco-agenda .bloco-topo { display: grid; gap: 0; line-height: 1; }
  .bloco-topo .bloco-hora { font-size: .44rem; }
  .bloco-topo .bloco-cliente { font-size: .48rem; -webkit-line-clamp: 1; line-clamp: 1; }
}

/* A regra de três, feita pelo browser.
   `1cqw` é um por cento da largura real deste cartão, não do ecrã — por isso a
   letra acompanha a coluna de forma contínua em vez de saltar em degraus.
   Os coeficientes são a recta ajustada aos tamanhos que foram afinados à mão
   no aparelho de referência (Pixel 8 Pro, 412px de viewport), e os limites do
   clamp são os valores que essa afinação deu nos extremos. Resultado: num
   telemóvel diferente a letra não salta de degrau, escorrega para o tamanho
   proporcional — que é o que preserva o trabalho feito a olhar para um ecrã só. */
@container (max-height:20px) and (min-width:58px) {
  .bloco-topo .bloco-hora { font-size: clamp(.56rem, calc(.489rem + 1.15cqw), .72rem); }
  .bloco-topo .bloco-cliente,
  .bloco-topo .bloco-cliente.bloco-cliente--proprio { font-size: clamp(.6rem, calc(.541rem + 1.18cqw), .76rem); }
  .bloco-duracao { font-size: clamp(.42rem, calc(.328rem + 1.43cqw), .6rem); }
}

/* Falta altura, sobra largura: hora e nome partilham a única linha que há.
   Mostra-se o nome próprio — uma palavra inteira numa linha lê-se melhor do
   que duas cortadas em duas — e o apelido volta quando houver largura. */
@container (max-height:20px) and (min-width:58px) {
  /* Duas classes no selector, e não uma: `.agenda-zoom-compacto .bloco-topo`
     impõe `display:grid` e ganhava por especificidade, deixando os cartões
     dos 28% empilhados apesar de a consulta casar. */
  .bloco-agenda .bloco-topo { display: flex; gap: 3px; align-items: baseline; }
  /* Numa linha só, os selos empilhados não fazem sentido nem cabem: ficam
     lado a lado, mais pequenos, e a reserva à direita passa a ser a que eles
     realmente ocupam em vez dos 2,2rem herdados do cartão empilhado. Era essa
     reserva que estava a cortar "Miguel Ferreira" a meio. */
  .marcadores-bloco { flex-direction: row; gap: 1px; }
  .bloco-agenda .simbolo-estado,
  .marcador-serie, .marcador-medalha, .marcador-aniversario { width: .88rem; height: .88rem; }
  .bloco-agenda .simbolo-estado .icone-devez,
  .marcador-serie .icone-devez, .marcador-medalha .icone-devez,
  .marcador-aniversario .icone-devez { width: .7rem; height: .7rem; }
  .bloco-agenda .bloco-topo,
  .bloco-agenda:has(.marcador-medalha) .bloco-topo { padding-right: 1.15rem; }
  .bloco-agenda:has(.marcadores-bloco > :nth-child(2)) .bloco-topo { padding-right: 2.1rem; }
  .bloco-agenda:has(.marcadores-bloco > :nth-child(3)) .bloco-topo { padding-right: 3rem; }
  .bloco-topo .bloco-hora { flex: 0 0 auto; }
  .bloco-topo .bloco-cliente { display: none; }
  .bloco-topo .bloco-cliente.bloco-cliente--proprio {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }
}

/* A partir daqui a duração já cabe, pequena e em cinzento, ao lado do nome
   próprio. Abaixo destes noventa e cinco pixéis não cabe: a hora e o nome
   sozinhos ocupam já a linha toda. */
@container (max-height:20px) and (min-width:93px) {
  .bloco-duracao { display: inline; }
}

/* Cento e sessenta pixéis chegam para tudo: hora, duração e nome inteiro. */
@container (max-height:20px) and (min-width:160px) {
  .bloco-agenda .bloco-topo { gap: 5px; }
  .bloco-duracao { display: inline; }
  .bloco-topo .bloco-cliente.bloco-cliente--proprio { display: none; }
  .bloco-topo .bloco-cliente {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }
}

/* Dos 62% para cima a coluna dá mais de cento e quarenta pixéis de texto, e aí
   não há cartão nenhum que precise de duas linhas — nem os de sessenta
   minutos, que têm altura de sobra. Passam todos a uma linha, como os curtos,
   e a altura que sobra fica como folga à volta, centrada. Sem limitação de
   altura, ao contrário das regras acima: aqui é só a largura que decide. */
@container (min-width:146px) {
  .bloco-agenda .bloco-topo { display: flex; gap: 7px; align-items: baseline; }
  .bloco-topo .bloco-hora { font-size: clamp(.56rem, calc(.489rem + 1.15cqw), .72rem); }
  .bloco-topo .bloco-cliente { font-size: clamp(.6rem, calc(.541rem + 1.18cqw), .76rem); }
  .bloco-duracao { font-size: clamp(.42rem, calc(.328rem + 1.43cqw), .6rem); }
  .marcadores-bloco { flex-direction: row; gap: 2px; }
  .bloco-agenda .bloco-topo,
  .bloco-agenda:has(.marcador-medalha) .bloco-topo { padding-right: 1.5rem; }
  .bloco-agenda:has(.marcadores-bloco > :nth-child(2)) .bloco-topo { padding-right: 2.7rem; }
  .bloco-agenda:has(.marcadores-bloco > :nth-child(3)) .bloco-topo { padding-right: 3.9rem; }
  .bloco-topo .bloco-hora { flex: 0 0 auto; }
  .bloco-duracao { display: inline; }
  /* Numa linha só, a linha não estica: escolhe-se a forma curta, que quase
     sempre cabe inteira. O nome como está registado fica para os 160px. */
  .bloco-agenda .bloco-topo .bloco-cliente { display: none; }
  .bloco-agenda .bloco-topo .bloco-cliente.bloco-cliente--proprio { display: none; }
  .bloco-agenda .bloco-topo .bloco-cliente.bloco-cliente--curto {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }
}

/* Cento e sessenta pixéis chegam para o nome como está registado.

   Nunca se cortam palavras com reticências: escolhe-se a forma mais longa do
   nome que caiba na largura disponível, e é essa que se mostra inteira.
   "João Sil…" identifica pior do que "João", porque parece um erro em vez de
   uma decisão. */
@container (min-width:160px) {
  .bloco-agenda .bloco-topo .bloco-cliente.bloco-cliente--curto { display: none; }
  .bloco-agenda .bloco-topo .bloco-cliente {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }
}