/* Marcações - estilo das páginas (entrar, cancelar, dono, criador).
   Guia de uso: DESIGN.md (nomes de classes e HTML esperado).
   Telemóvel primeiro. Sem bibliotecas, sem Google Fonts.
   Letra da marca Rodrigo Belo (Bricolage Grotesque) só nos títulos;
   corpo e números na letra do sistema (números alinhados). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fontes/bricolage-grotesque-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Cor (contrastes medidos sobre --superficie) */
  --fundo: #f3f4f6;          /* tela, cinzento frio (nunca creme) */
  --superficie: #ffffff;     /* zonas de trabalho: grelha, painel, formulários */
  --superficie-2: #eceeef;   /* névoa da marca: cabeças, segmentos, "não veio" */
  --texto: #1c1d20;          /* tinta da marca, 16:1 */
  --texto-2: #5c5f66;        /* secundário, 6,3:1 */
  --linha: #d9dbdf;          /* fios decorativos */
  --linha-forte: #8e9394;    /* contorno de campos e botões: 3,2:1 (WCAG 1.4.11) */
  --acento: #455ce9;         /* azul da marca: primário, foco, "agora". 5,3:1 */
  --acento-texto: #ffffff;   /* texto sobre o acento, 5,3:1 */
  --acento-suave: #eaedfd;   /* fundo dos cartões de marcação */
  --foco: #455ce9;
  --perigo: #b42318;         /* 6,5:1 */
  --perigo-suave: #fdecea;
  --sucesso: #1d7a46;        /* 5,3:1 */
  --sucesso-suave: #e6f4ec;
  --alerta: #8a5300;         /* 6,3:1 */
  --alerta-suave: #fdf3e1;
  --faixa: #1c1d20;          /* faixa "Está a ver como" */
  --faixa-texto: #ffffff;
  --veu: rgb(20 21 23 / .45);

  /* Letra */
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-marca: "Bricolage Grotesque", var(--letra);
  --t-titulo: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --t-subtitulo: 1.125rem;
  --t-corpo: 1rem;
  --t-pequeno: .875rem;
  --t-mini: .8125rem;

  /* Espaço (escala de 4 px) */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem;  --e-7: 3rem;
  --margem: 1rem;            /* goteira lateral: 16 px no telemóvel */

  /* Forma */
  --r-1: 6px;                /* cartões de marcação, etiquetas */
  --r-2: 10px;               /* campos, botões */
  --r-3: 16px;               /* painel, blocos */
  --r-pilula: 999px;
  --sombra-1: 0 1px 2px rgb(20 21 23 / .08);
  --sombra-2: 0 12px 40px rgb(20 21 23 / .18);

  /* Agenda */
  --linha-altura: 1rem;      /* 15 min = 16 px, 1 h = 64 px (no computador as linhas esticam até o dia caber no ecrã) */
  --col-horas: 3.25rem;
  --col-prof: 9.5rem;        /* largura mínima de cada profissional */
  --topo-h: 6.4rem;          /* altura do topo (a página mede-a e põe o valor real) */
  --agenda-folga: 9.625rem;  /* altura acima da grelha, no computador (a página mede-a e põe o valor real) */

  --toque: 2.75rem;          /* 44 px: alvo mínimo */
  --rapido: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141517;
    --superficie: #1c1d20;
    --superficie-2: #2a2c31;
    --texto: #eceeef;        /* 14:1 */
    --texto-2: #a7a9ae;      /* 7:1 */
    --linha: #34363c;
    --linha-forte: #6b6f76;  /* 3,3:1 */
    --acento: #6e82f0;       /* azul claro da marca, 4,9:1 */
    --acento-texto: #141517; /* 5,3:1 */
    --acento-suave: #262b45;
    --foco: #8b9bf4;
    --perigo: #ff9b8f;
    --perigo-suave: #3a2422;
    --sucesso: #6fd39b;
    --sucesso-suave: #1c3127;
    --alerta: #f2c46d;
    --alerta-suave: #3a301c;
    --faixa: #eceeef;
    --faixa-texto: #141517;
    --veu: rgb(0 0 0 / .6);
    --sombra-1: 0 1px 2px rgb(0 0 0 / .4);
    --sombra-2: 0 12px 40px rgb(0 0 0 / .5);
  }
}

@media (max-width: 767px) { :root { --col-prof: 7.5rem; } }
@media (min-width: 768px) { :root { --margem: 2rem; } }
@media (min-width: 1024px) { :root { --topo-h: 3.6rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: var(--t-corpo)/1.5 var(--letra);
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; line-height: 1.15; }
h1, h2 { font-family: var(--letra-marca); font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: var(--t-titulo); }
h2 { font-size: var(--t-subtitulo); }
h3 { font-size: var(--t-corpo); font-weight: 600; }
p { margin: 0; }
a { color: var(--acento); text-underline-offset: .15em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 1023px) { .so-pc { display: none !important; } }
@media (min-width: 1024px) { .so-movel { display: none !important; } }

/* ---------- Disposição ---------- */
.pagina { width: 100%; max-width: 80rem; margin-inline: auto; padding: var(--e-4) var(--margem) var(--e-7); }
.pagina--estreita { max-width: 26rem; padding-top: var(--e-7); }
.pilha { display: flex; flex-direction: column; gap: var(--e-4); }
.pilha--larga { gap: var(--e-6); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.linha--fim { justify-content: flex-end; }
.linha--entre { justify-content: space-between; }
.texto-2 { color: var(--texto-2); }
.pequeno { font-size: var(--t-pequeno); }

/* Bloco: zona branca de trabalho (formulário de entrar, secções das definições) */
.bloco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  padding: var(--e-5) var(--e-4);
}
@media (min-width: 768px) { .bloco { padding: var(--e-6); } }
.bloco__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-4); }

/* ---------- Faixa "Está a ver como…" ---------- */
.faixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--e-1) var(--e-3);
  padding: var(--e-2) var(--margem);
  background: var(--faixa); color: var(--faixa-texto);
  font-size: var(--t-pequeno); text-align: center;
}
.faixa__voltar {
  min-height: var(--toque); padding: 0 var(--e-3);
  background: none; border: 0; color: inherit;
  font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.faixa__voltar:focus-visible { outline-color: currentColor; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.topo__dentro {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); row-gap: 0;
  max-width: 80rem; margin-inline: auto;
  padding: var(--e-2) var(--margem);
  min-height: 3.5rem;
}
.topo__dentro--abas { padding-bottom: 0; }   /* telemóvel: os separadores ficam numa 2.ª linha, colados ao fundo */
.topo__negocio {
  flex: 1; min-width: 0;
  font-size: 1.25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo__dentro .botao { flex: none; }
.topo__dentro > .botao:first-of-type { margin-left: auto; }   /* o que vem depois do nome encosta à direita */
@media (min-width: 1024px) {   /* computador: tudo numa linha (poupa ~48 px de altura) */
  .topo__dentro--abas { padding-block: 0; }
  .topo__negocio { flex: 0 1 auto; }
}

/* ---------- Separadores ---------- */
.separadores {
  order: 3; flex: 1 0 100%; margin-left: calc(var(--e-3) * -1);
  display: flex; gap: var(--e-1);
  overflow-x: auto; scrollbar-width: none;
}
@media (min-width: 1024px) {
  .separadores { order: 0; flex: 0 1 auto; align-self: stretch; margin-left: var(--e-4); }
  .separadores .separador { min-height: 3.5rem; }
}
.separadores::-webkit-scrollbar { display: none; }
.separador {
  flex: none; min-height: var(--toque); padding: 0 var(--e-3);
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--texto-2); font-weight: 600; cursor: pointer;
}
.separador:hover { color: var(--texto); }
.separador[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-4);
  border: 1px solid var(--linha-forte); border-radius: var(--r-2);
  background: var(--superficie); color: var(--texto);
  font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido);
}
.botao:hover { background: var(--superficie-2); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.botao--primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.botao--primario:hover { background: color-mix(in srgb, var(--acento) 88%, var(--texto)); }
.botao--perigo { border-color: var(--perigo); color: var(--perigo); }
.botao--perigo:hover { background: var(--perigo-suave); }
.botao--perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: var(--superficie); }
.botao--discreto { border-color: transparent; background: transparent; color: var(--texto-2); }
.botao--discreto:hover { color: var(--texto); background: var(--superficie-2); }
.botao--icone { width: var(--toque); padding: 0; font-size: 1.25rem; }
.botao--largo { width: 100%; }

/* "+ Marcação": flutua em baixo à direita no telemóvel (polegar); normal no computador */
@media (max-width: 767px) {
  .botao--flutuante {
    position: fixed; z-index: 20;
    right: var(--margem); bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
    min-height: 3.25rem; padding: 0 var(--e-5);
    border-radius: var(--r-pilula); box-shadow: var(--sombra-2);
  }
}

/* Segmentos (Dia | Semana) */
.segmentos {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--superficie-2); border-radius: var(--r-2);
}
.segmentos button {
  min-height: calc(var(--toque) - 4px); padding: 0 var(--e-4);
  background: none; border: 0; border-radius: calc(var(--r-2) - 2px);
  color: var(--texto-2); font-weight: 600; cursor: pointer;
}
.segmentos button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.campo__etiqueta { font-size: var(--t-pequeno); font-weight: 600; }
.campo__entrada {
  width: 100%; min-height: var(--toque); padding: var(--e-2) var(--e-3);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linha-forte); border-radius: var(--r-2);
  font-size: 1rem; /* 16 px: o iPhone não faz zoom */
}
textarea.campo__entrada { min-height: 6rem; resize: vertical; }
.campo__entrada:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.campo__entrada[aria-invalid="true"] { border-color: var(--perigo); }
.campo__ajuda { font-size: var(--t-mini); color: var(--texto-2); }
.campo__erro { font-size: var(--t-mini); color: var(--perigo); font-weight: 600; }
.campos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }

/* Grupo de opções (serviços, avisar o cliente) */
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo > legend { padding: 0; margin-bottom: var(--e-2); font-size: var(--t-pequeno); font-weight: 600; }
.opcao {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--toque); padding: 0 var(--e-1);
  cursor: pointer;
}
.opcao input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--acento); }
.opcao__extra { margin-left: auto; color: var(--texto-2); font-size: var(--t-pequeno); }

/* ---------- Mensagens ---------- */
.mensagem {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-2); border-left: 4px solid currentColor;
  font-size: var(--t-pequeno); font-weight: 500;
}
.mensagem p { flex: 1 1 12rem; color: var(--texto); }
.mensagem--erro { background: var(--perigo-suave); color: var(--perigo); }
.mensagem--sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.mensagem--alerta { background: var(--alerta-suave); color: var(--alerta); }
.mensagem--info { background: var(--superficie-2); color: var(--texto-2); }

/* Estado (ativo/desligado) - sempre com texto, nunca só cor */
.estado {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 0 var(--e-2); border-radius: var(--r-pilula);
  font-size: var(--t-mini); font-weight: 600; line-height: 1.6;
  background: var(--superficie-2); color: var(--texto-2);
}
.estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.estado--ativo { background: var(--sucesso-suave); color: var(--sucesso); }

/* ---------- Barra da agenda ---------- */
.barra-agenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  padding: var(--e-3) 0;
}
.barra-agenda__dia { display: flex; align-items: center; gap: var(--e-1); min-width: 0; }
.barra-agenda__titulo { flex: 1 1 100%; order: -1; font-size: var(--t-subtitulo); }
.barra-agenda__data { width: auto; flex: 1 1 8rem; min-width: 0; }
@media (max-width: 767px) { .barra-agenda__dia { flex: 1 1 100%; } }
.barra-agenda__fim { margin-left: auto; display: flex; gap: var(--e-2); }
.barra-agenda__fim .segmentos + .segmentos { margin-left: var(--e-2); }
@media (min-width: 768px) {
  .barra-agenda__titulo { flex: 0 1 auto; order: 0; margin-right: var(--e-3); }
}

/* ---------- Agenda Dia ----------
   Sem scroll próprio: quem desliza, se for preciso, é a página.
   Computador: a grelha ocupa o ecrã que sobra e as linhas de 15 min esticam (mín. 11 px) até o dia caber.
   Telemóvel: 15 min = 16 px; os nomes dos profissionais ficam presos por baixo do topo.
   Linhas de 15 min: --linhas = n.º de linhas; cartões com --inicio (1 = 1.ª linha) e --duracao (em linhas). */
.agenda-dia {
  overflow: clip;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
}
.agenda-dia--larga { overflow-x: auto; }   /* 3+ profissionais no telemóvel: desliza na horizontal */
.agenda-dia--semana { --col-prof: 6.5rem; }
.agenda-dia__grelha {
  display: grid;
  grid-template-columns: var(--col-horas) repeat(var(--profs, 1), minmax(var(--col-prof), 1fr));
  grid-template-rows: auto auto;
  position: relative;
}
.agenda-dia__canto,
.agenda-dia__prof {
  position: sticky; top: var(--topo-h); z-index: 2;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.agenda-dia__canto { left: 0; z-index: 3; }
.agenda-dia__prof {
  padding: var(--e-1) var(--e-2);
  border-left: 1px solid var(--linha);
  font-weight: 600; font-size: var(--t-pequeno);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-dia__prof button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; min-height: 1.75rem; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-dia__prof small { font-weight: 400; color: var(--texto-2); }
.agenda-dia__prof--hoje { box-shadow: inset 0 -3px 0 var(--acento); }
.agenda-dia__horas,
.agenda-dia__coluna {
  display: grid;
  grid-template-rows: repeat(var(--linhas, 4), var(--linha-altura));
}
@media (min-width: 1024px) {
  .agenda-dia__grelha { min-height: calc(100dvh - var(--agenda-folga)); grid-template-rows: auto 1fr; }
  .agenda-dia__horas, .agenda-dia__coluna { grid-template-rows: repeat(var(--linhas), minmax(.6875rem, 1fr)); }
}
.agenda-dia__horas {
  position: sticky; left: 0; z-index: 1;
  background: var(--superficie);
}
.agenda-dia__hora {
  grid-row: var(--linha) / span 4;
  padding: 2px var(--e-2) 0 0;
  text-align: right;
  font-size: var(--t-mini); color: var(--texto-2);
}
.agenda-dia__coluna {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  border-left: 1px solid var(--linha);
  padding-right: 3px;
  /* fio forte a cada hora, fio leve a cada meia hora (os de 15 min com linhas baixas eram ruído) */
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--linha) 45%, transparent) 1px, transparent 1px);
  background-size: 100% calc(400% / var(--linhas)), 100% calc(200% / var(--linhas));
}
/* Linha "agora", dentro de cada coluna: --agora = linhas decorridas desde o início (pode ter casas decimais) */
.agenda-dia__agora {
  position: absolute; z-index: 1; left: 0; right: 0;
  top: calc(var(--agora) / var(--linhas) * 100%);
  height: 2px; background: var(--acento); pointer-events: none;
}
.agenda-dia__vazio { padding: var(--e-6) var(--e-4); text-align: center; color: var(--texto-2); }
/* Pausa e horas fechadas dentro da faixa do dia: tracejadas e escritas, para não parecerem horas livres */
.agenda-dia__fora {
  grid-column: 1; grid-row: var(--inicio) / span var(--duracao);
  margin-left: 3px; padding: 2px var(--e-2);
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--superficie-2) 5px 10px);
  color: var(--texto-2); font-size: var(--t-mini);
  overflow: hidden;
}
.agenda-dia__fora--todo { display: grid; place-items: center; }

/* Dia fechado: bloco do tamanho da grelha */
.agenda-fechado {
  display: grid; place-content: center; justify-items: center; gap: var(--e-2);
  padding: var(--e-7) var(--e-4); text-align: center;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3);
}
.agenda-fechado__titulo { font-family: var(--letra-marca); font-weight: 800; font-size: var(--t-subtitulo); }
.agenda-fechado .botao { margin-top: var(--e-2); }
@media (min-width: 1024px) { .agenda-fechado { min-height: calc(100dvh - var(--agenda-folga)); } }

/* ---------- Página da agenda: grelha + coluna "Esta semana" ---------- */
.pagina--agenda { padding-top: var(--e-2); }
.agenda-corpo { display: grid; gap: var(--e-2); }
.lado { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
@media (max-width: 1023px) { .lado { order: -1; } }
@media (min-width: 1024px) {
  .pagina--agenda { padding-bottom: var(--e-3); }
  .agenda-corpo { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  .agenda-corpo--sem-lado { grid-template-columns: minmax(0, 1fr); }
  .lado { position: sticky; top: calc(var(--topo-h) + var(--e-3)); }
}

/* Tira da semana: 7 dias com a contagem. Telemóvel/tablet: fila de 7 por cima da grelha. Computador: lista na coluna da direita. */
.tira {
  list-style: none; margin: 0; padding: var(--e-1);
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3);
}
.tira__dia {
  width: 100%; min-height: 3.5rem; padding: var(--e-1) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-2);
  color: var(--texto); font-size: var(--t-mini); line-height: 1.25; cursor: pointer;
}
.tira__dia:hover { background: var(--superficie-2); }
.tira__semana, .tira__conta { color: var(--texto-2); }
.tira__num { font-weight: 700; font-size: 1rem; }
.tira__extra { display: none; }
.tira__dia--hoje .tira__semana { color: var(--acento); font-weight: 700; }
.tira__dia[aria-current="date"] { background: var(--acento); color: var(--acento-texto); }
.tira__dia[aria-current="date"] .tira__semana,
.tira__dia[aria-current="date"] .tira__conta { color: inherit; }
.lado__titulo { display: none; }
.resumo-dia { margin: 0; padding: 0 var(--e-1); font-size: var(--t-pequeno); color: var(--texto-2); }
.resumo-dia strong { color: var(--texto); }
@media (min-width: 1024px) {
  .lado__titulo { display: block; padding: var(--e-2) var(--e-1) 0; font-size: var(--t-pequeno); color: var(--texto-2); font-weight: 600; }
  .tira { grid-template-columns: minmax(0, 1fr); }
  .tira__dia { flex-direction: row; justify-content: flex-start; gap: var(--e-2); min-height: 2.5rem; padding: 0 var(--e-3); font-size: var(--t-pequeno); }
  .tira__num { font-size: inherit; }
  .tira__semana { min-width: 2.25rem; text-align: left; }
  .tira__conta { margin-left: auto; }
  .tira__extra { display: inline; }
  .resumo-dia { padding: var(--e-3); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); display: grid; gap: var(--e-1); }
}

/* ---------- Cartão de marcação ---------- */
.marcacao {
  grid-column: 1;
  grid-row: var(--inicio, 1) / span var(--duracao, 2);
  container-type: size;
  display: block;
  min-width: 0; margin: 1px 0 1px 3px; padding: 2px var(--e-2);
  overflow: hidden;
  background: var(--acento-suave); color: var(--texto);
  border: 0; border-left: 3px solid var(--acento); border-radius: var(--r-1);
  font-size: var(--t-mini); line-height: 1.3; text-align: left;
  white-space: nowrap; text-overflow: ellipsis;
  cursor: pointer;
}
.marcacao:hover { filter: brightness(.97); }
.marcacao > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.marcacao > span) { display: block; }
.marcacao__hora { color: var(--texto-2); }
.marcacao__fim-hora { color: inherit; }
.marcacao__nome { font-weight: 600; font-size: var(--t-pequeno); }
.marcacao__servicos { color: var(--texto-2); }
.marcacao__estado { font-weight: 600; }
.marcacao__aviso { color: var(--alerta); font-weight: 600; }
/* Cartões baixos: numa só linha ("09:00 João Silva · Corte"); nos de 15 min só cabe o nome */
@container (max-height: 3.2rem) {
  .marcacao__servicos { display: none; }
  .marcacao--cancelada .marcacao__hora, .marcacao--nao-veio .marcacao__hora { display: none; }
}
@container (max-height: 2.6rem) {
  :where(.marcacao > span) { display: inline; }
  .marcacao__fim-hora { display: none; }
  .marcacao__nome, .marcacao__estado, .marcacao__aviso { margin-left: .4em; }
  .marcacao__servicos { display: inline; }   /* cartão largo: "09:00 João Silva · Corte"; nos estreitos corta com reticências */
  .marcacao__servicos::before { content: " · "; }
}
@container (max-height: .9rem) {
  .marcacao__hora, .marcacao__servicos { display: none; }
  .marcacao__nome { margin-left: 0; font-size: .6875rem; line-height: .5rem; vertical-align: top; }
}

.marcacao--cancelada {
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--superficie-2) 6px 12px);
  border-left-color: var(--linha-forte);
  color: var(--texto-2);
}
.marcacao--cancelada .marcacao__nome { text-decoration: line-through; }
.marcacao--nao-veio { background: var(--superficie-2); border-left-color: var(--texto-2); color: var(--texto-2); }
.marcacao--aviso { border-left-color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta); }
/* Marcação que chegou e ainda não foi vista: contorno + a palavra "Nova" */
.marcacao--nova { box-shadow: inset 0 0 0 2px var(--acento); }
.marcacao--nova .marcacao__estado { color: var(--acento); }

/* Fora da grelha (lista da Semana): o mesmo cartão em fluxo normal */
.marcacao--lista { container-type: normal; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin: 0; width: 100%; padding: var(--e-2) var(--e-3); min-height: var(--toque); }

/* ---------- Agenda Semana ----------
   Telemóvel/tablet: dias em lista vertical (todos os profissionais). Computador (≥ 1024 px): grelha de horas com 7 colunas (ver Agenda Dia). */
.semana { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.semana__dia {
  background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--r-3);
  padding: var(--e-3);
  min-width: 0;
}
.semana__dia--hoje { border-color: var(--acento); box-shadow: inset 0 3px 0 var(--acento); }
.semana__titulo {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--e-2);
  font-size: var(--t-pequeno);
}
.semana__titulo button { background: none; border: 0; padding: 0; font-weight: 600; cursor: pointer; min-height: var(--toque); color: inherit; text-align: left; }
.semana__contagem { color: var(--texto-2); font-weight: 400; font-size: var(--t-mini); }
.semana__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.semana__fechado { color: var(--texto-2); font-size: var(--t-mini); }

/* ---------- Painel (dialog nativo) ----------
   Telemóvel: folha que sobe de baixo. Computador (≥ 768 px): painel à direita. */
.painel {
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: none; max-height: 88dvh;
  margin: 0; padding: 0;
  border: 0; border-radius: var(--r-3) var(--r-3) 0 0;
  background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.painel[open] { display: flex; flex-direction: column; animation: painel-sobe 220ms cubic-bezier(.16, 1, .3, 1); }
.painel::backdrop { background: var(--veu); }
.painel__cabeca {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-4) var(--e-2) var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linha);
}
.painel__cabeca::before { /* pega da folha */
  content: ""; position: absolute; top: 6px; left: 50%; translate: -50% 0;
  width: 2.5rem; height: 4px; border-radius: 2px; background: var(--linha);
}
.painel__titulo { flex: 1; min-width: 0; font-size: var(--t-subtitulo); }
.painel__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); }
.painel__acoes {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
}
.painel__acoes .botao { flex: 1 1 8rem; }

/* Lista de dados no painel (hora, cliente, telefone…) */
.dados { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); }
.dados dt { color: var(--texto-2); font-size: var(--t-pequeno); }
.dados dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.dados a { display: inline-flex; align-items: center; min-height: var(--toque); margin-block: calc((var(--toque) - 1.5em) / -2); }

@media (min-width: 768px) {
  .painel {
    inset: 0 0 0 auto;
    width: 26rem; max-height: none; height: 100dvh;
    border-radius: var(--r-3) 0 0 var(--r-3);
  }
  .painel[open] { animation-name: painel-entra; }
  .painel__cabeca::before { display: none; }
}
@keyframes painel-sobe { from { transform: translateY(100%); } }
@keyframes painel-entra { from { transform: translateX(100%); } }

/* ---------- Tabela (lista de negócios do criador) ----------
   Abaixo de 640 px cada linha vira um bloco; cada <td> leva data-etiqueta. */
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); overflow: hidden; }
.tabela th, .tabela td { padding: var(--e-3) var(--e-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--linha); }
.tabela th { font-size: var(--t-pequeno); font-weight: 600; color: var(--texto-2); background: var(--superficie-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela__numero { text-align: right; }
.tabela__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }
@media (max-width: 639px) {
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; }
  .tabela thead { display: none; }
  .tabela tr { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-1) 0; border: 0; }
  .tabela td::before { content: attr(data-etiqueta); color: var(--texto-2); font-size: var(--t-pequeno); }
  .tabela td:first-child { font-weight: 600; font-size: var(--t-subtitulo); }
  .tabela td:first-child::before, .tabela td.tabela__acoes::before { content: none; }
  .tabela td.tabela__acoes { justify-content: flex-start; padding-top: var(--e-3); }
  .tabela__numero { text-align: left; }
}

/* ---------- Lista editável (serviços, equipa, horário, dias fechados) ---------- */
.lista-editavel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-editavel > li {
  display: grid; gap: var(--e-2);
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linha);
}
.lista-editavel > li:first-child { padding-top: 0; }
.lista-editavel__campos { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); min-width: 0; }
.lista-editavel__campos .campo--largo { grid-column: 1 / -1; }
.lista-editavel__acoes { display: flex; gap: var(--e-1); }
@media (min-width: 768px) {
  .lista-editavel__campos .campo--largo { grid-column: span 2; }
}

/* Horário por dia: etiqueta do dia + campo */
.horario { display: grid; gap: var(--e-2) var(--e-3); grid-template-columns: 4.5rem 1fr; align-items: center; }
.horario label { font-weight: 600; font-size: var(--t-pequeno); }

/* ---------- Página de entrar / cancelar ---------- */
.marca { font-family: var(--letra-marca); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: var(--e-6); }
.resumo { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-4) 0; border-block: 1px solid var(--linha); }
.resumo__quando { font-family: var(--letra-marca); font-weight: 800; font-size: var(--t-titulo); line-height: 1.1; letter-spacing: -.02em; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Acrescentado na Task 9 (mesmos tokens) ---------- */
/* <form> dentro do painel: continua a ser a coluna que deixa o corpo deslizar */
.painel__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* texto de ajuda solto / linha de data numa lista editável */
.lista-editavel__texto { flex: 1; min-width: 0; align-self: center; overflow-wrap: anywhere; }

/* ---------- Avisos (sino) ----------
   Botão no topo com o n.º por ler; abre um painel nativo (popover: fecha com Esc e com clique fora).
   Computador: cai por baixo do sino, 24 rem. Telemóvel: ocupa a largura. A página põe `top` e `max-height` ao abrir. */
.sino { position: relative; color: var(--texto); }
.sino svg { width: 1.375rem; height: 1.375rem; }
.sino__conta {
  position: absolute; top: 3px; right: 1px;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
  border-radius: var(--r-pilula); background: var(--acento); color: var(--acento-texto);
  box-shadow: 0 0 0 2px var(--superficie);
  font-size: .75rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}
.avisos {
  position: fixed; inset: 3.5rem var(--margem) auto auto;
  width: min(24rem, calc(100vw - 2 * var(--margem)));
  max-height: calc(100dvh - 3.5rem - var(--e-4));
  margin: 0; padding: 0;
  border: 1px solid var(--linha); border-radius: var(--r-3);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2);
  overflow: auto; overscroll-behavior: contain;
}
@media (min-width: 1024px) { .avisos { right: max(var(--margem), calc((100vw - 80rem) / 2 + var(--margem))); } }
.avisos__cabeca, .avisos__pe {
  position: sticky; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  background: var(--superficie);
}
.avisos__cabeca { top: 0; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-bottom: 1px solid var(--linha); }
.avisos__titulo { font-size: var(--t-subtitulo); }
.avisos__lista { list-style: none; margin: 0; padding: var(--e-1); display: grid; gap: 2px; }
.aviso {
  display: grid; grid-template-columns: .5rem minmax(0, 1fr) auto; column-gap: var(--e-3); row-gap: 2px;
  width: 100%; padding: var(--e-3); min-height: var(--toque);
  background: none; border: 0; border-radius: var(--r-2);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.aviso:hover { background: var(--superficie-2); }
.aviso--por-ler { background: var(--acento-suave); }
.aviso__marca { grid-row: 1 / span 3; width: .5rem; height: .5rem; margin-top: .4rem; border-radius: 50%; }
.aviso--por-ler .aviso__marca { background: var(--acento); }
.aviso__tipo { font-weight: 700; font-size: var(--t-pequeno); }
.aviso--cancelada .aviso__tipo { color: var(--perigo); }
.aviso__ha { font-size: var(--t-mini); color: var(--texto-2); white-space: nowrap; }
.aviso__texto, .aviso__quando { grid-column: 2 / -1; font-size: var(--t-pequeno); }
.aviso__quando { color: var(--texto-2); }
.avisos__pe { bottom: 0; padding: var(--e-1) var(--e-4); border-top: 1px solid var(--linha); font-size: var(--t-pequeno); }
.avisos__vazio { padding: var(--e-6) var(--e-4); text-align: center; color: var(--texto-2); font-size: var(--t-pequeno); }
.avisos:focus-visible { outline-offset: -2px; }

/* Interruptor (som): checkbox nativa com role="switch" */
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); width: 100%; min-height: var(--toque); cursor: pointer; }
.interruptor input {
  appearance: none; flex: none; position: relative; margin: 0;
  width: 2.5rem; height: 1.5rem; border-radius: var(--r-pilula);
  background: var(--linha-forte); cursor: pointer; transition: background-color var(--rapido);
}
.interruptor input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 1.125rem; height: 1.125rem;
  border-radius: 50%; background: var(--superficie); transition: translate var(--rapido);
}
.interruptor input:checked { background: var(--acento); }
.interruptor input:checked::after { translate: 1rem 0; }
.interruptor input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Escolha de cor (cor do negócio) */
.campo__entrada[type="color"] { width: 4.5rem; padding: var(--e-1); cursor: pointer; }
#mensagens:empty { display: none; }   /* vazio: não ocupa o espaço entre blocos */