/* 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 {
  --superficie: #ffffff;
  --superficie-alt: #f4f6f8;
  --superficie-fundo: #eceff3;
  --texto: #11161c;
  --texto-suave: #5a6674;
  --texto-tenue: #8a95a1;
  --borda: #dde2e8;
  --borda-forte: #c4ccd6;

  --acento: #1f6feb;
  --acento-suave: #eaf2ff;
  --acento-contraste: #ffffff;

  --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: 10px;
  --raio-grande: 16px;
  --sombra: 0 1px 2px rgb(11 22 34 / 6%), 0 10px 26px -16px rgb(11 22 34 / 26%);
  --sombra-elevada: 0 12px 32px -8px 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);
}

@media (prefers-color-scheme: dark) {
  :root {
    --superficie: #171c22;
    --superficie-alt: #1e242c;
    --superficie-fundo: #10141a;
    --texto: #e9edf2;
    --texto-suave: #9aa6b3;
    --texto-tenue: #6d7987;
    --borda: #2b333d;
    --borda-forte: #3c4653;
    --acento: #4d92ff;
    --acento-suave: #16243a;
    --ok-l: #10251f;
    --ok-texto: #70d9b1;
    --aviso-l: #2a2113;
    --aviso-texto: #f2bd68;
    --perigo-l: #2c1917;
    --perigo-texto: #ff9e96;
    --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 26px -16px rgb(0 0 0 / 70%);
  }
}

*, *::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;
}

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;
}
.avatar-estabelecimento {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  background: var(--acento-suave);
  border: 2px solid var(--superficie);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--borda), 0 3px 10px rgb(16 24 40 / 12%);
}
.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: 550;
  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 {
  color: var(--acento);
  background: var(--acento-suave);
}

/* 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 .cabecalho-coluna .accoes-coluna,
  .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; padding: 2px; font-size: .58rem; }
  .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); }
}

/* ------------------------------------------------ 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; }
.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; } }
.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; }
.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 7px; overflow: hidden; color: var(--texto); text-decoration: none; background: color-mix(in srgb, var(--bloco-cor, var(--acento)) 13%, var(--superficie)); border: 1px solid var(--borda); border-left: 4px solid var(--bloco-cor, var(--acento)); border-radius: 7px; box-shadow: 0 2px 8px rgb(15 23 42 / .08); }
.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 { display: grid; gap: 2px; padding: 6px 7px; overflow: hidden; color: var(--texto); text-decoration: none; background: color-mix(in srgb, var(--bloco-cor, var(--acento)) 13%, var(--superficie)); border: 1px solid var(--borda); border-left: 4px solid var(--bloco-cor,var(--acento)); border-radius: 7px; }
.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;
  gap: 1px;
  overflow: hidden;
  padding: 5px 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. */
  border: 1px solid var(--borda);
  border-left: 4px solid var(--bloco-cor, var(--acento));
  background: color-mix(in srgb, var(--bloco-cor, var(--acento)) 13%, var(--superficie));
  border-radius: 7px;
  box-shadow: 0 1px 2px rgb(11 22 34 / 8%);
  cursor: grab;
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.bloco-agenda:hover { box-shadow: var(--sombra); }
.bloco-agenda[data-arrastando] {
  z-index: 10;
  cursor: grabbing;
  box-shadow: var(--sombra-elevada);
  transform: scale(1.02);
}

.bloco-hora { font-weight: 650; font-variant-numeric: tabular-nums; }
.bloco-cliente { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco-servicos { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* State and origin are words and shapes, never colour alone (dossie 6.8). */
.bloco-estado, .bloco-origem, .marcador-origem {
  align-self: flex-start;
  padding: 1px 6px;
  font-size: 0.66rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
}
.bloco-estado { color: var(--texto-suave); background: var(--superficie-alt); }
.bloco-estado[data-estado="compareceu"], .bloco-estado[data-estado="concluida"] {
  color: var(--ok); background: var(--ok-l);
}
.bloco-estado[data-estado="pendente"] { color: var(--aviso); background: var(--aviso-l); }
.bloco-estado[data-estado="faltou"] { color: var(--perigo); background: var(--perigo-l); }

/* F34, E1/R4: online booking against one taken over the telephone. */
.bloco-origem, .marcador-origem { color: var(--texto-suave); background: var(--superficie-alt); }
.bloco-origem[data-origem="manual"], .marcador-origem[data-origem="manual"] {
  color: var(--acento); background: var(--acento-suave);
}

.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(--texto-suave);
  border-radius: 7px;
  /* Hatching, so a block reads as unavailable rather than as a pale booking. */
  background-image: repeating-linear-gradient(
    -45deg,
    var(--superficie-alt) 0 6px,
    var(--borda) 6px 7px
  );
  border: 1px solid var(--borda);
}
.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: var(--espaco-1);
  align-items: flex-start;
  justify-content: center;
  padding: 4px 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;
}
.vaga-motivo { font-size: .76rem; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
.vaga-horas { font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.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,var(--superficie-alt) 0 4px,var(--borda) 4px 5px); border: 1px solid var(--borda); }
.amostra-repeticao { display: inline-grid; width: 1.3rem; height: 1.3rem; place-items: center; color: #fff; font-size: .85rem; font-weight: 900; background: #6d3ac7; border-radius: 999px; }

@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);
}

.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); }
.marcadores-bloco { position: absolute; top: 3px; right: 4px; z-index: 3; display: inline-flex; gap: 3px; align-items: center; }
.marcador-serie { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; color: #fff; font-size: .9rem; font-weight: 900; background: #6d3ac7; border: 2px solid var(--superficie); border-radius: 999px; box-shadow: 0 1px 4px rgb(0 0 0 / .32); }
.bloco-agenda[data-serie="true"] { padding-right: 3.7rem; }
.bloco-agenda[data-serie="false"] { padding-right: 2.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 {
  color: var(--texto);
  border-left: 4px solid 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 {
  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);
  border-left: 3px solid var(--perigo);
  border-radius: var(--raio);
}

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

.ecra-entrada {
  max-width: 24rem;
  margin: 12vh auto 0;
  padding: var(--espaco-6) var(--espaco-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
}
.ecra-entrada h1 { margin: 0 0 var(--espaco-5); font-size: 1.3rem; }
.ecra-entrada .botao { width: 100%; margin-top: var(--espaco-2); }

.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 {
  padding: var(--espaco-4) var(--espaco-5);
  margin-bottom: var(--espaco-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio);
}
.ficha-cliente:has(.marcador-suspenso) .ficha-suspensao { border-left-color: 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 { border-left: 3px solid var(--acento); }

.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 { 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); background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--borda-forte); border-radius: var(--raio); }
.item-centro-sms--prevista { border-left-color: var(--aviso); }
.item-centro-sms--falhada { border-left-color: 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: flex;
  gap: 5px;
  align-items: baseline;
  min-width: 0;
}
.bloco-topo .bloco-hora { flex: 0 0 auto; }
.bloco-topo .bloco-cliente {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Origin as two letters in the corner: it has to be legible at this size, and
   an icon would need a legend nobody reads. */
.bloco-agenda .marcador-origem {
  position: static;
  padding: 0 4px;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.bloco-agenda .bloco-estado { margin-top: auto; }

/* ---------------------------------------------------- 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-editar-produto input, .formulario-editar-produto 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-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); }
.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) minmax(0, 1fr); gap: var(--espaco-1); min-width: 0; }
.accoes-coluna button {
  min-width: 0;
  min-height: 34px;
  padding: 0 var(--espaco-1);
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 85rem) {
  .texto-accao-coluna { display: none; }
}

@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; }
  .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; }
.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; }
.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 { white-space: nowrap; }
.botao-acao-bloquear { border-color: #d99b32; background: #fff8e8; color: #704b0b; }
.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; }
  .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 { border-left: 4px solid var(--perigo, #b3261e); }
.item-atividade--atencao { border-left: 4px solid var(--aviso, #b06f00); }
.item-atividade--bom { border-left: 4px solid 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); }
.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; opacity: 0; pointer-events: none; }
.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; opacity: 0; pointer-events: none; }
.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 auto;grid-template-rows:auto auto;justify-content:start;align-items:center;column-gap:.8rem;max-width:75rem;width:100%;margin:auto}.marca-inicio .simbolo-devez{grid-row:1/3;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:1rem;background:#163f73;color:white;font-weight:900}.marca-inicio strong{font-size:1.6rem}.marca-inicio small{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:1rem 1.2rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;border-top:1px solid #cdd9e6;color:#5a6b7d;font-size:.9rem}.entrada-demonstracao div{display:grid}.entrada-demonstracao a{color:#365d8c}.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)}.entrada-demonstracao{align-items:flex-start;flex-direction:column}.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); }