/*
 * Bytewave · serviço de agendamento — tema escuro "mineral + menta", alinhado
 * com o site novo (bytewave.pt). Os hex vivem só neste bloco de tokens; o resto
 * do ficheiro usa variáveis. Sem gradientes, sombras nem clip-path; cantos
 * arredondados por tokens.
 */

/* Fontes locais (OFL), variáveis; só o subconjunto latino, que inclui acentos, € e «—» */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/space-grotesk-latin-wght-normal.06408904.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-latin-wght-normal.3100e775.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Tipo de letra de recurso para o corpo: Arial/Helvetica com as métricas
 * ajustadas à Inter, para a troca de fonte (font-display: swap) mudar o mínimo
 * possível o layout.
 */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

:root {
  /* Superfícies, do mais fundo ao mais elevado */
  --color-base: #0b0c0f;
  --color-surface: #14151a;
  --color-surface-2: #1a1c22;
  --color-surface-3: #242732;
  --color-line: #2f3442;

  /* Texto */
  --color-ink: #eef0f4;
  --color-ink-soft: color-mix(in srgb, var(--color-ink) 72%, var(--color-base));
  --color-ink-dim: color-mix(in srgb, var(--color-ink) 55%, var(--color-base));

  /* Acentos: menta (ação) e ciano (detalhe) */
  --color-primary: #00e5a3;
  --color-primary-soft: #9df5d6;
  --color-highlight: #7dd3fc;
  --color-accent: #38bdf8;

  /* Contorno de campos: ≥ 3:1 sobre o fundo */
  --color-field-border: color-mix(in srgb, var(--color-ink) 45%, var(--color-base));
  --color-paper: #ffffff;

  /* Estados: exceção documentada à paleta, sempre com texto (nunca só cor) */
  --estado-ok-fg: #7ef0c8;
  --estado-ok-bg: #0e2a22;
  --estado-aviso-fg: #ffd28a;
  --estado-aviso-bg: #2a2110;
  --estado-erro-fg: #ffa2a2;
  --estado-erro-bg: #2c1215;

  /* Tipografia */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.975rem + 0.125vw, 1.0625rem);
  --text-md: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --text-lg: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --leading-tight: 1.06;
  --leading-body: 1.6;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.12em;
  --tracking-caps: 0.07em;

  /* Espaçamento: 8, 16, 24, 32, 48, 64, 96 */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Forma: cantos vivos na Bytewave (docs/design/REGRAS-DE-DESENHO.md); os raios continuam a ser tokens (valem 0 aqui). */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 0px;

  /* Layout e interação */
  --content-max: 72rem;
  --text-max: 44rem;
  --measure: 66ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --border-width: 1px;
  --tap-min: 44px;
  --focus-color: var(--color-primary);
  --focus-width: 2px;
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  /* Curva dos sites de referência: desaceleração longa no fim, sem overshoot. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-base);
}
main { flex: 1; overflow-wrap: break-word; }
td, dd, li, .entrada-corpo, h1, h2 { overflow-wrap: anywhere; }
a { color: var(--color-primary-soft); text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary); }
img { max-width: 100%; height: auto; }
::selection { background: var(--color-primary); color: var(--color-base); }

/* Foco visível em tudo o que se pode usar */
:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
[tabindex='-1']:focus { outline: none; }

/* Link «saltar para o conteúdo» */
.saltar {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--color-base);
  background: var(--color-primary);
  transform: translateY(-300%);
}
.saltar:focus-visible { transform: translateY(0); }

/* ── Cabeçalho e rodapé ───────────────────────────────────────────────────── */
.topo {
  background: var(--color-base);
  border-bottom: 1px solid var(--color-line);
}
.topo-barra {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0.75rem var(--gutter);
}
/* Marca como no site: ícone em ficheiro (decorativo, alt="") e BYTE+WAVE em texto. */
.marca { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); min-width: var(--tap-min); color: var(--color-ink); text-decoration: none; }
.marca img { display: block; flex: none; height: 1.5rem; width: auto; }
.marca-nome { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1; }
.marca-acento { color: var(--color-primary); }
.topo-etiqueta {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
}
.topo-site {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-field-border);
  border-radius: var(--r-pill);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.topo-site:hover { color: var(--color-primary); border-color: var(--color-primary); }

.rodape {
  margin-top: var(--space-6);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.rodape-conteudo {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.rodape p { margin: 0; }
.rodape strong { color: var(--color-ink); }
.rodape .rodape-slogan { color: var(--color-primary-soft); }
.rodape a { color: var(--color-ink); }
.rodape a:hover { color: var(--color-primary); }

/* ── Conteúdo ─────────────────────────────────────────────────────────────── */
.conteudo {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-3) var(--gutter) 0;
}
.detalhes, .resumo-acao { max-width: var(--text-max); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-xl); margin: 0 0 var(--space-2); max-width: 20ch; }
h2 { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); }
h3 { font-size: var(--text-base); margin: var(--space-3) 0 var(--space-1); }
p { max-width: var(--measure); }
.intro, .resumo { color: var(--color-ink-soft); margin: 0 0 var(--space-3); max-width: 52ch; }
.nota { color: var(--color-ink-soft); font-size: var(--text-sm); }
.opcional { font-weight: 400; color: var(--color-ink-soft); }
.voltar { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.voltar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-ink-soft);
  text-decoration: none;
}
.voltar a:hover { color: var(--color-primary); }
code { font-size: 0.95em; overflow-wrap: anywhere; }

/* Etiqueta acima do título: traço ciano de 24px + maiúsculas */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-highlight);
}
.eyebrow::before { content: ''; flex: none; width: var(--space-2); height: 1px; background: var(--color-highlight); }

/* ── Botões ───────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0.75rem 1.25rem;
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--r-md);
  background: var(--color-primary);
  color: var(--color-base);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--color-primary-soft); border-color: var(--color-primary-soft); color: var(--color-base); }
.botao.pequeno { padding: var(--space-1) var(--space-2); }
.botao.secundario, .botao.secundario-neutro {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-field-border);
}
.botao.secundario:hover, .botao.secundario-neutro:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.botao.perigo { background: var(--estado-erro-fg); border-color: var(--estado-erro-fg); color: var(--color-base); }
.botao.perigo:hover { background: var(--estado-erro-bg); border-color: var(--estado-erro-fg); color: var(--estado-erro-fg); }
/* «Cancelar»: contorno e texto no vermelho de erro (não só pela cor: o texto diz «Cancelar») */
.botao.secundario:not(.secundario-neutro) { color: var(--estado-erro-fg); border-color: var(--estado-erro-fg); }
.botao.secundario:not(.secundario-neutro):hover { background: var(--estado-erro-bg); border-color: var(--estado-erro-fg); color: var(--estado-erro-fg); }

/* ── Cartões de serviço ───────────────────────────────────────────────────── */
.cartoes {
  list-style: none;
  counter-reset: servico;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48em) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cartao {
  counter-increment: servico;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cartao::before {
  content: counter(servico, decimal-leading-zero);
  display: block;
  padding: var(--space-2) var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}
.cartao > a, .cartao.inativo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-1) var(--space-3) var(--space-3);
  color: inherit;
  text-decoration: none;
}
.cartao > a:focus-visible { outline-offset: -4px; }
.cartao h2 { margin: 0 0 var(--space-1); color: var(--color-ink); font-size: var(--text-lg); }
.cartao p { margin: 0 0 var(--space-3); color: var(--color-ink-soft); }
.cartao .botao { margin-top: auto; align-self: flex-start; }
.cartao > a:hover .botao { background: var(--color-primary-soft); border-color: var(--color-primary-soft); }
.cartao.inativo { opacity: 0.72; }
.cartao.inativo p { margin-bottom: var(--space-1); }
.cartao .etiqueta {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 0.25rem var(--space-1);
  border: 1px solid var(--color-field-border);
  border-radius: var(--r-sm);
  color: var(--color-ink-soft);
}

/* ── Dias e horas (alvos de 44px) ─────────────────────────────────────────── */
.dias, .horas { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-1); }
.dias {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
@media (max-width: 40em) {
  .dias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.horas { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.dia, .hora {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  flex-direction: column;
  gap: 1px;
  padding: 0.4rem 0.25rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.2;
  text-align: center;
}
.dia:hover, .hora:hover { border-color: var(--color-primary); color: var(--color-primary); }
.hora:hover { background: color-mix(in oklab, var(--color-primary) 12%, transparent); }
.dia.escolhido { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-base); font-weight: 600; }
.dia.vazio {
  color: var(--color-ink-soft);
  background: transparent;
  border-style: dashed;
  font-weight: 400;
  /* Sem vaga: não se clica — e o cursor e a opacidade dizem isso. */
  opacity: 0.4;
  cursor: not-allowed;
}
.hora { font-variant-numeric: tabular-nums; }

/* Calendario: navegacao de mes e cabecalho dos dias da semana. */
.mes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
}
.mes-nome {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: capitalize;
}
.mes-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 1px solid var(--color-field-border);
  border-radius: var(--r-sm);
  color: var(--color-ink);
  text-decoration: none;
}
.mes-seta:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dias-cab {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 4px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-align: center;
  /* Legivel à primeira vista: identifica a coluna, não decora. */
  color: var(--color-ink-soft);
}
@media (max-width: 40em) {
  .dias-cab { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dias-cab span:nth-child(n + 5) { display: none; }
}

/* Cabecalho de periodo (Manha / Tarde): mono, discreto, a marcar o bloco. */
.periodo {
  margin: var(--space-2) 0 var(--space-1);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* ── Mensagens: sempre com texto, e um traço lateral (forma) além da cor ──── */
.alerta, .sucesso, .aviso {
  max-width: var(--measure);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid currentColor;
  border-radius: var(--r-sm);
}
.alerta { background: var(--estado-erro-bg); color: var(--estado-erro-fg); }
.sucesso { background: var(--estado-ok-bg); color: var(--estado-ok-fg); }
.aviso { background: var(--estado-aviso-bg); color: var(--estado-aviso-fg); }
.alerta a, .sucesso a, .aviso a { color: inherit; }

/* ── Formulários ──────────────────────────────────────────────────────────── */
.formulario {
  display: grid;
  gap: 4px;
  max-width: var(--text-max);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
}
.formulario label { margin-top: var(--space-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.formulario input:not([type=checkbox]), .formulario textarea, .formulario select, .filtros input, .filtros select {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.75rem var(--space-2);
  border: 1px solid var(--color-field-border);
  border-radius: var(--r-sm);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font: inherit;
}
.formulario input::placeholder, .formulario textarea::placeholder { color: var(--color-ink-soft); }
.formulario input:not([type=checkbox]):focus-visible, .formulario textarea:focus-visible { border-color: var(--color-primary); }
.filtros input, .filtros select { width: auto; }
.formulario [aria-invalid=true] { border-color: var(--estado-erro-fg); }
.formulario .botao { justify-self: start; margin-top: var(--space-3); }
.erro { margin: 2px 0 0; color: var(--estado-erro-fg); font-size: var(--text-sm); font-weight: 600; }
.erro::before { content: 'Erro: '; }
.caixa { display: flex; align-items: flex-start; gap: var(--space-1); margin: var(--space-1) 0 0; }
.caixa input[type=checkbox] { flex: none; width: 1.25rem; height: 1.25rem; margin: 10px 4px 0 0; accent-color: var(--color-primary); }
.caixa:has(input:focus-visible), .linha:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
.caixa label { display: block; width: 100%; min-height: var(--tap-min); margin: 0; padding-block: var(--space-1); font-weight: 400; }
/* Botões de opção (cancelamento no painel): o rótulo inteiro é o alvo, com 44px e contorno */
.linha {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  margin: 0 !important;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-field-border);
  border-radius: var(--r-sm);
  background: var(--color-surface-2);
  font-weight: 400 !important;
  cursor: pointer;
}
.linha:has(input:checked) { border-color: var(--color-primary); background: var(--color-surface-3); }
.linha input { flex: none; width: 1.25rem !important; height: 1.25rem; min-height: 0 !important; margin: 0; accent-color: var(--color-primary); }
.formulario fieldset { border: 1px solid var(--color-line); border-radius: var(--r-sm); margin: var(--space-2) 0 0; display: grid; gap: 4px; }
.estreito { max-width: 26rem; }

/* ── Dados de uma marcação ────────────────────────────────────────────────── */
.detalhes {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
}
.detalhes dt { color: var(--color-ink-soft); }
.detalhes dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.pagar, .cancelar, .multibanco { margin: var(--space-3) 0; }
.multibanco .detalhes dd { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.04em; }
.reembolsos { padding-left: var(--space-3); }

/* ── Painel da equipa ─────────────────────────────────────────────────────── */
.nav-equipa {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  align-items: center;
  padding: 0 var(--gutter);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}
.nav-equipa a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-ink-soft); font-weight: 500; text-decoration: none; }
.nav-equipa a:hover { color: var(--color-primary); }
.nav-equipa .sair { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: center; max-width: 100%; min-width: 0; }
.quem { color: var(--color-ink-soft); font-size: var(--text-sm); min-width: 0; overflow-wrap: anywhere; }
.selo {
  display: inline-block;
  padding: 0.15rem var(--space-1);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.selo-ok { color: var(--estado-ok-fg); background: var(--estado-ok-bg); }
.selo-aviso { color: var(--estado-aviso-fg); background: var(--estado-aviso-bg); }
.selo-perigo { color: var(--estado-erro-fg); background: var(--estado-erro-bg); }
.selo-neutro { color: var(--color-ink-soft); background: var(--color-surface-2); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: end; margin: var(--space-1) 0 var(--space-2); }
.filtros label { display: grid; gap: 2px; font-size: var(--text-sm); font-weight: 600; }
.navegar { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: 0 0 var(--space-1); }
.navegar a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); }
.dia-agenda h2 { border-bottom: 1px solid var(--color-line); padding-bottom: 4px; }
.dia-agenda h2::first-letter { text-transform: uppercase; }
.entradas, .lista { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: var(--space-1); }
.entrada {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto auto;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-sm);
}
.entrada > * { min-width: 0; }
.hora-e { font-variant-numeric: tabular-nums; font-weight: 700; }
.entrada-corpo .nota { display: block; }
.lista li { padding: var(--space-1) var(--space-2); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-sm); }
.lista .nota { display: block; }
/* Tabelas largas deslizam dentro da sua caixa (nunca fazem a página deslizar) */
.tabela-scroll { overflow-x: auto; max-width: 100%; }
.tabela-scroll:focus-visible { outline-offset: -2px; }
.tabela { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-sm); }
.tabela th, .tabela td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.tabela th { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 600; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.historico { padding-left: var(--space-3); display: grid; gap: var(--space-1); }
.pre { white-space: pre-wrap; }
.resumo-acao { margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-2); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-sm); }
.qr { padding: var(--space-1); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--r-sm); }
.segredo { padding: 2px var(--space-1); background: var(--color-surface-2); border: 1px solid var(--color-line); border-radius: var(--r-sm); word-break: break-all; }
.codigos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-1); }
.codigos code { font-size: 1.05rem; }

/* ── Movimento ──────────────────────────────────────────────────────────────
 * Só posição/escala/opacidade (GPU); cores em 150 ms. A entrada desaparece
 * assim que termina (`backwards`), para o hover voltar a mandar no transform.
 * Com `prefers-reduced-motion` nada disto corre.
 */
@keyframes subir {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* O titulo entra só com deslocamento: opacity 0 atrasaria o LCP. */
@keyframes subir-titulo {
  from { transform: translate3d(0, 8px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* a:not(.saltar): o link «Saltar para o conteúdo» aparece de imediato ao receber foco (sem transição de transform). */
  a:not(.saltar), .botao, .cartao, .dia, .hora, .topo-site, .nav-equipa a, .voltar a,
  .formulario input, .formulario textarea, .formulario select, .filtros input, .filtros select {
    transition:
      color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      opacity var(--duration-base) var(--ease-out);
  }

  .cartao:hover { transform: translate3d(0, -3px, 0); border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-line)); }
  .cartao:active { transform: scale(0.995); }
  .botao:hover { transform: translate3d(0, -1px, 0); }
  .botao:active { transform: scale(0.98); transition-duration: var(--duration-fast); }
  .dia:hover, .hora:hover { transform: translate3d(0, -1px, 0); }
  .dia:active, .hora:active { transform: scale(0.97); }
  .dia.escolhido:hover { transform: none; }
  .marca img, .topo-site span { transition: opacity var(--duration-fast) var(--ease-out); }
  .marca:hover img { opacity: 0.85; }

  h1 { animation: subir-titulo var(--duration-slow) var(--ease-out) backwards; }
  .intro, .resumo { animation: subir-titulo var(--duration-slow) var(--ease-out) 40ms backwards; }
  .cartoes .cartao { animation: subir 300ms var(--ease-out) backwards; }
  .cartoes .cartao:nth-child(2) { animation-delay: 60ms; }
  .cartoes .cartao:nth-child(3) { animation-delay: 120ms; }
  .cartoes .cartao:nth-child(4) { animation-delay: 180ms; }
  .dias li, .horas li { animation: subir 320ms var(--ease-out) backwards; }
  .dias li:nth-child(2), .horas li:nth-child(2) { animation-delay: 30ms; }
  .dias li:nth-child(3), .horas li:nth-child(3) { animation-delay: 60ms; }
  .dias li:nth-child(4), .horas li:nth-child(4) { animation-delay: 90ms; }
  .dias li:nth-child(5), .horas li:nth-child(5) { animation-delay: 120ms; }
  .dias li:nth-child(6), .horas li:nth-child(6) { animation-delay: 150ms; }
  .dias li:nth-child(7), .horas li:nth-child(7) { animation-delay: 180ms; }
  .formulario, .detalhes, .sucesso, .alerta, .aviso { animation: subir 360ms var(--ease-out) backwards; }
}

@media (max-width: 40rem) {
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .detalhes { grid-template-columns: minmax(0, 1fr); }
  .cartoes { grid-template-columns: minmax(0, 1fr); }
  .conteudo { padding-top: var(--space-4); }
}