/*
 * quadra — folha de estilo da tela de Cadastro (visão-dono).
 *
 * Fonte de verdade: projetos/quadra/docs/design-cadastro.md +
 * _skills/ux-friendly.md §11 (componentes) / §11.12 (paleta "Campo").
 * Tudo aqui é tradução 1:1 do que o `designer-friendly` já aprovou nos
 * previews `fixtures/design-cadastro/{cadastro,cadastro-vazio}.html` — este
 * arquivo só reorganiza em um CSS externo reutilizável entre as páginas
 * geradas por build.py. Nenhum token de cor foi inventado aqui; os dois
 * componentes que não tinham prova em preview (.error-summary, .skeleton)
 * vêm, respectivamente, literal de ux-friendly.md §11.3 e — só o .skeleton —
 * são novos, construídos com os MESMOS tokens já auditados (nenhuma cor
 * nova), comentados abaixo.
 *
 * Self-contained: nenhum @import/url() externo, nenhuma fonte remota.
 */

:root {
  --size-1: clamp(4px, 0.3vw + 3px, 6px);
  --size-2: clamp(8px, 0.5vw + 6px, 10px);
  --size-3: clamp(11px, 0.8vw + 8px, 14px);
  --size-4: clamp(14px, 1.1vw + 10px, 18px);
  --size-5: clamp(18px, 1.6vw + 12px, 24px);
  --size-6: clamp(24px, 2.2vw + 16px, 34px);
  --size-7: clamp(30px, 3vw + 20px, 44px);

  --content-max: 720px;
  --content-max-narrow: 640px;
  --page-pad: clamp(16px, 4vw, 32px);

  --radius-1: 6px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --radius-round: 999px;
  --tap-min: 44px;

  --font-sans: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --text-0: 0.6875rem; --text-1: 0.78rem; --text-2: 0.875rem; --text-3: 1rem;
  --text-4: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
  --text-5: clamp(1.25rem, 1.05rem + 1vw, 1.55rem);
  --leading: 1.5; --leading-tight: 1.15;

  --shadow-1: 0 1px 2px rgba(20,20,20,.05);
  --shadow-2: 0 1px 3px rgba(20,20,20,.06), 0 1px 2px rgba(20,20,20,.04);

  /* Paleta "Campo" (verde-futebol) — projeto quadra, ver design-cadastro.md
     §7/§9 e ux-friendly.md §11.12 para os contrastes calculados e os
     trade-offs conscientes. NÃO é a Paleta B "Ardósia" do assistente. */
  --bg:#F6F8F6; --surface:#FFFFFF; --line:#D7E3DA;
  --ink-900:#14231A; --ink-600:#4A5C4F;
  --accent-600:#15773D; --accent-800:#0F5132; --accent-100:#E4F3EA;
  --warn-600:#F2B705; --warn-800:#14231A; --warn-100:#FCEFC0;
  /* --info-* — novo em design-agenda.md §8 (tela Agenda): "observar/livre",
     papel que o Cadastro nunca precisou. Calculado à mão pelo designer-friendly,
     pendente de reconfirmação por ferramenta na T8 do revisor (mesma disciplina
     dos demais pares desta paleta). */
  --info-600:#2E6E8E; --info-800:#1F4D66; --info-100:#DCEBF2;
  /* Texto sobre PREENCHIMENTO SÓLIDO (não confundir com --ink-900/600, que
     são texto sobre SUPERFÍCIE) — ver §11.13 da skill / §9 do design doc. */
  --on-accent-600:#FFFFFF; --on-warn-600:#14231A;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-600) 55%, transparent);
  --dur-1: 100ms; --dur-2: 220ms; --ease: cubic-bezier(.2,.7,.3,1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0E1512; --surface:#141C18; --line:#26332C;
    --ink-900:#E6EDE8; --ink-600:#A9B8AE;
    --accent-600:#34B36A; --accent-800:#34B36A; --accent-100:#16231C;
    --warn-600:#F2B705; --warn-800:#F0D18A; --warn-100:#3A2E0E;
    --info-600:#6FB8D9; --info-800:#A9D6EA; --info-100:#16262E;
    --on-accent-600:#14231A; --on-warn-600:#14231A;
  }
}
@media (prefers-reduced-motion: reduce) { *{ transition:none!important; animation:none!important; } }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink-900); font-family:var(--font-sans);
  font-size:var(--text-3); line-height:var(--leading); }
.wrap{ max-width:var(--content-max); margin-inline:auto; padding:var(--size-6) var(--page-pad) var(--size-7); }
.wrap-narrow{ max-width:var(--content-max-narrow); padding-top:var(--size-7); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* --- 11.1 Appbar — variante de fundo escuro (--accent-800 como "topo",
   ver ux-friendly.md §11.1 nota de 2026-08-31) --- */
.appbar{ display:flex; align-items:center; gap:var(--size-3); flex-wrap:wrap;
  padding:var(--size-3) var(--page-pad); background:var(--accent-800); }
.appbar-brand{ font-weight:700; color:#fff; }
.unit-picker{ display:flex; align-items:center; gap:8px; flex:1 1 220px; min-width:0; }
.unit-picker select{ flex:1 1 auto; min-width:0; height:var(--tap-min); border:1px solid var(--line);
  border-radius:var(--radius-2); background:var(--surface); color:var(--ink-900); font-size:var(--text-2); padding:0 10px; }
.appbar-link{ font-size:var(--text-1); font-weight:700; color:#fff; text-decoration:underline;
  white-space:nowrap; min-height:var(--tap-min); display:inline-flex; align-items:center; }
.appbar-user{ font-size:var(--text-1); color:var(--accent-100); white-space:nowrap; margin-left:auto; }
.appbar-logout{ margin:0; }

/* --- 11.2 Botões --- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap-min); padding:0 var(--size-4); border-radius:var(--radius-2);
  font:700 var(--text-2)/1 var(--font-sans); border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:opacity var(--dur-1) var(--ease); }
.btn:active{ opacity:.8; }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.btn-primary{ background:var(--accent-600); color:var(--on-accent-600, #fff); }
.btn-secondary{ background:var(--surface); color:var(--ink-900); border-color:var(--line); }
.btn-danger{ background:var(--surface); color:var(--warn-800); border-color:var(--warn-600); }
.btn-sm{ min-height:36px; padding:0 var(--size-3); font-size:var(--text-1); }

/* --- Cabeçalho de conteúdo --- */
.sub{ color:var(--ink-600); font-size:var(--text-3); margin:var(--size-5) 0 var(--size-6); max-width:56ch; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--size-3); }
.section-head h2{ font-size:var(--text-4); margin:0; }

/* --- Selo (preenchimento sólido — ver design-cadastro.md §9 / ux-friendly §11.12) --- */
.selo{ display:inline-flex; gap:4px; align-items:center; font:700 var(--text-0)/1 var(--font-sans);
  text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius:var(--radius-round);
  white-space:nowrap; flex:0 0 auto; }
.selo-warn{ background:var(--warn-600); color:var(--on-warn-600); }
/* Novos em design-agenda.md §5 (mapeamento reserva -> selo). .selo-fav/
   .selo-flat usam a família -100/-800 (nunca preenchimento sólido, só
   .selo-warn tem essa exceção documentada). .selo-info é o primeiro uso
   REAL do papel "observar/livre" nesta app (token novo, ver acima). */
.selo-fav{ background:var(--accent-100); color:var(--accent-800); }
.selo-flat{ background:var(--line); color:var(--ink-600); }
.selo-info{ background:var(--info-100); color:var(--info-800); }

/* --- 11.4 Card de quadra expansível (list-card + <details>) --- */
.quadra-block{ border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface);
  box-shadow:var(--shadow-2); margin-bottom:var(--size-3); overflow:hidden; }
.quadra-block > summary{ list-style:none; cursor:pointer; padding:var(--size-4); display:flex;
  align-items:center; justify-content:space-between; gap:10px; min-height:var(--tap-min); }
.quadra-block > summary::-webkit-details-marker{ display:none; }
.quadra-block > summary::after{ content:"▾"; color:var(--ink-600); flex:0 0 auto;
  transition:transform var(--dur-2) var(--ease); margin-left:4px; }
.quadra-block[open] > summary::after{ transform:rotate(180deg); }
.quadra-block > summary:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.quadra-head-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.quadra-title{ font-weight:700; font-size:var(--text-3); color:var(--ink-900); }
.quadra-sub{ font-size:var(--text-1); color:var(--ink-600); }
.detail-body{ padding:0 var(--size-4) var(--size-4); border-top:1px solid var(--line); }

/* --- 11.8 Banner de estado (sucesso/aviso/erro — família -100/-800, nunca
   preenchimento sólido: banner é área grande, princípio 5) --- */
.banner{ border:1px solid var(--line); border-left:3px solid var(--ink-600); border-radius:var(--radius-2);
  padding:var(--size-4); margin:0 0 var(--size-5); background:var(--surface); }
.banner p{ margin:0; font-size:var(--text-2); color:var(--ink-900); }
.banner-sucesso{ border-left-color:var(--accent-600); background:var(--accent-100); }
.banner-sucesso p{ color:var(--accent-800); }
.banner-aviso{ border-left-color:var(--warn-600); background:var(--warn-100); }
.banner-aviso p{ color:var(--warn-800); }
.banner-erro{ border-left-color:var(--warn-600); background:var(--warn-100); }
.banner-erro p{ color:var(--warn-800); }
/* posicionamento quando o banner some acima do <main>/form específico */
main > .banner, .add-form form > .banner, .new-quadra form > .banner{ margin-top:var(--size-4); }

/* --- 11.7 Grade semanal --- */
.week-grid{ list-style:none; margin:var(--size-4) 0; padding:0; display:flex; flex-direction:column; gap:var(--size-2); }
.day-row{ border:1px solid var(--line); border-radius:var(--radius-3); padding:var(--size-3); }
.day-row-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.day-name{ font-weight:700; font-size:var(--text-2); color:var(--ink-900); min-width:11ch; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }

.tag{ display:inline-flex; align-items:center; font-size:var(--text-0); font-weight:600;
  background:var(--accent-100); color:var(--accent-800); padding:2px 9px; border-radius:var(--radius-round); }
.tag-muted{ background:var(--line); color:var(--ink-600); }

/* --- 11.6 Chip removível — o próprio chip é um <form> (ver web/js/app.js e
   a nota de integração no build.py: cada chip precisa de um <form> real
   para o botão "×" funcionar sem JS; o preview original tinha o botão fora
   de qualquer <form>, corrigido aqui). display:inline-flex no form em vez
   de span não muda o visual — apenas o elemento raiz muda de tag. */
.chip{ display:inline-flex; align-items:stretch; gap:0; background:var(--accent-100); color:var(--accent-800);
  font-size:var(--text-1); font-weight:600; border-radius:var(--radius-round); overflow:hidden; min-height:var(--tap-min);
  margin:0; padding:0; border:none; }
.chip-label{ display:flex; align-items:center; padding:0 4px 0 14px; }
.chip-remove{ display:flex; align-items:center; justify-content:center; min-width:var(--tap-min); border:none;
  background:transparent; color:var(--accent-800); font-size:var(--text-3); cursor:pointer; padding:0; }
.chip-remove:hover{ background:color-mix(in srgb, var(--accent-800) 12%, transparent); }
.chip-remove:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* --- 11.10 Revelação progressiva sem JS (<details class="add-form">) ---
   `flex:1 1 220px` (docs/design-bloqueio.md §3/fixture) só importa quando o
   `<details>` vive dentro de um `.slot-actions` flex (dois irmãos lado a
   lado, bloco livre da Agenda); fora de um container flex a propriedade não
   tem efeito, então não muda Cadastro/onboarding. */
.add-form{ margin-top:8px; flex:1 1 220px; }
.add-form summary{ cursor:pointer; font-size:var(--text-1); font-weight:600; color:var(--accent-600);
  min-height:var(--tap-min); display:flex; align-items:center; list-style:none; }
.add-form summary::-webkit-details-marker{ display:none; }
.add-form summary::before{ content:"+ "; }
.add-form[open] summary::before{ content:"– "; }
.add-form summary:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.add-form form{ display:flex; gap:var(--size-3); flex-wrap:wrap; align-items:flex-end; padding-top:8px; }
.add-form .field{ margin:0; flex:1 1 130px; }

/* --- ÚNICO componente novo de docs/design-bloqueio.md §3/§7: modificador de
   cor pro <details class="add-form add-form-flat"> de "Bloquear este
   horário" — mesmo cinza-neutro do selo "— bloqueado" (.selo-flat), nenhum
   token novo. Antecipa visualmente o resultado (cinza -> vira bloqueio,
   diferente do verde --accent-600 herdado de "Criar reserva"). */
.add-form-flat summary{ color:var(--ink-600); }

/* --- Nova quadra (mesmo padrão details, no fim da lista) --- */
.new-quadra{ margin-top:var(--size-4); text-align:left; }
.new-quadra > summary{ min-height:var(--tap-min); display:flex; align-items:center; gap:6px;
  font-weight:700; color:var(--accent-600); cursor:pointer; list-style:none; }
.new-quadra > summary::-webkit-details-marker{ display:none; }
.new-quadra > summary::before{ content:"+"; }
.new-quadra[open] > summary::before{ content:"–"; }
.new-quadra .detail-body{ border-top:none; padding:8px 0 0; }
.new-quadra form{ display:flex; gap:var(--size-3); flex-wrap:wrap; align-items:flex-end; }
.new-quadra .field{ flex:1 1 160px; margin:0; }
.new-quadra .field-wide{ flex:1 1 100%; }

/* --- 11.3 Campo de formulário + error summary --- */
.field{ margin:0 0 var(--size-4); }
.field label{ display:block; font-weight:600; font-size:var(--text-2); color:var(--ink-900); margin-bottom:4px; }
.field-hint{ font-size:var(--text-1); color:var(--ink-600); margin:0 0 6px; }
.field input, .field select{ width:100%; min-height:var(--tap-min); border:1px solid var(--line);
  border-radius:var(--radius-2); background:var(--surface); color:var(--ink-900); font-size:var(--text-2); padding:0 12px; }
.field input:focus-visible, .field select:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-color:var(--accent-600); }
.field-error input, .field-error select{ border-color:var(--warn-600); }
.field-error-msg{ font-size:var(--text-1); font-weight:600; color:var(--warn-800); margin:0 0 6px; }
.error-summary{ border:1px solid var(--warn-600); border-radius:var(--radius-2); padding:var(--size-4); margin:0 0 var(--size-5); background:var(--warn-100); }
.error-summary h2{ font-size:var(--text-3); margin:0 0 8px; color:var(--warn-800); }
.error-summary a{ color:var(--warn-800); }

/* --- Onboarding (estado 1 — nenhuma unidade ainda) --- */
.onboard{ text-align:center; padding:var(--size-7) var(--size-5); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-4); box-shadow:var(--shadow-1); }
.onboard h1{ font-size:var(--text-5); line-height:var(--leading-tight); margin:0 0 10px; font-weight:700; }
.onboard p.sub{ color:var(--ink-600); font-size:var(--text-3); margin:0 auto var(--size-6); max-width:44ch; }
.onboard .field{ text-align:left; }
.onboard .add-form{ margin-top:var(--size-5); text-align:left; max-width:420px; margin-inline:auto; }
.onboard .add-form summary{ justify-content:center; font-size:var(--text-2); font-weight:700; }
.onboard .add-form form{ padding-top:var(--size-4); border-top:1px solid var(--line); margin-top:var(--size-3); flex-direction:column; align-items:stretch; }
.onboard .actions{ display:flex; justify-content:flex-end; }

/* --- Lista de quadras vazia (estado 2 — unidade sem nenhuma quadra) --- */
.empty-quadras{ text-align:center; padding:var(--size-6) var(--size-4); background:var(--surface);
  border:1px dashed var(--line); border-radius:var(--radius-3); margin-bottom:var(--size-4); }
.empty-quadras p{ color:var(--ink-600); max-width:48ch; margin:0 auto var(--size-4); }

/* --- Esqueleto de carregamento (estado 4 — só existe com JS/fetch real em
   produção; ver design-cadastro.md §4 item 4). Novo nesta implementação,
   sem cor nova: usa só --line/--surface/--bg já auditados, nunca --accent/
   --warn (skeleton não é veredito, é ausência de conteúdo). */
.skeleton{ background:linear-gradient(90deg, var(--line) 25%, var(--surface) 50%, var(--line) 75%);
  background-size: 200% 100%; border-radius:var(--radius-2); animation: skeleton-wave 1.4s ease-in-out infinite; }
@keyframes skeleton-wave{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .skeleton{ animation:none; background:var(--line); } }
.skeleton-appbar{ height: var(--tap-min); margin:var(--size-3) var(--page-pad); }
.skeleton-card{ height: 84px; border-radius:var(--radius-3); margin-bottom:var(--size-3); }
.skeleton-line{ height: 14px; width: 40%; border-radius:var(--radius-1); margin: var(--size-5) 0 var(--size-6); }

/* ===========================================================================
 * Agenda (visão dono/operador) — componentes novos, design-agenda.md +
 * ux-friendly.md §11.14/§11.15. Tela de USO DIÁRIO (a primeira do projeto),
 * diferente do Cadastro (configuração pontual). Tokens: nenhum novo aqui além
 * de --info-* (já declarado em :root acima); zero cor inventada.
 * =========================================================================== */

/* --- §11.14 Fila de pedidos (`.fila`) — logo abaixo do appbar, unidade
   inteira, ver design-agenda.md §3.2 --- */
.fila{ margin:0 0 var(--size-6); }
.fila-head{ display:flex; align-items:center; gap:10px; margin-bottom:var(--size-3); }
.count-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 7px;
  border-radius:var(--radius-round); background:var(--warn-600); color:var(--on-warn-600); font:700 var(--text-1)/1 var(--font-sans); }
.fila-empty{ border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface);
  padding:var(--size-4); color:var(--ink-600); font-size:var(--text-2); }
.fila-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--size-3); }
.fila-item{ border:1px solid var(--warn-600); border-radius:var(--radius-3); background:var(--surface);
  box-shadow:var(--shadow-2); padding:var(--size-4); }
.fila-item-main{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fila-quando{ font-weight:700; color:var(--ink-900); font-size:var(--text-2); }
.fila-item-cliente{ font-size:var(--text-2); color:var(--ink-900); margin:8px 0 0; }
.fila-item-contato{ font-size:var(--text-1); color:var(--ink-600); }
.fila-item-conflito{ font-size:var(--text-1); font-weight:600; color:var(--warn-800); margin:8px 0 0; }
.fila-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* --- Seletor de quadra (mesmo padrão do unit-picker do Cadastro) --- */
.quadra-switch{ display:flex; align-items:center; gap:8px; margin-top:var(--size-2); }
.quadra-switch select{ flex:1 1 auto; min-width:0; height:var(--tap-min); border:1px solid var(--line);
  border-radius:var(--radius-2); background:var(--surface); color:var(--ink-900); font-size:var(--text-2); padding:0 10px; }

/* --- Navegação de semana (`.week-switch`) --- */
.week-switch{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:var(--size-4) 0 0; }
.week-switch a{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--tap-min); min-height:var(--tap-min);
  border:1px solid var(--line); border-radius:var(--radius-2); background:var(--surface); color:var(--ink-900);
  text-decoration:none; font-weight:700; font-size:var(--text-4); }
.week-switch a:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.week-label{ font-size:var(--text-2); font-weight:600; color:var(--ink-900); text-align:center; flex:1 1 auto; }

/* --- §11.15 Tabs de dia (`.week-nav`/`.day-tab`) — única exceção deliberada
   de overflow-x:auto, ver design-agenda.md §3.4/§9 e ux-friendly.md §4.9/§11.7 --- */
.week-nav{ display:flex; gap:6px; overflow-x:auto; padding:2px 2px 8px; margin:var(--size-3) 0 var(--size-4); }
.day-tab{ flex:0 0 auto; min-width:48px; min-height:var(--tap-min); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; padding:6px 4px; border-radius:var(--radius-2);
  border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink-900); }
.day-tab:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.day-tab-name{ font-size:var(--text-0); color:var(--ink-600); text-transform:uppercase; letter-spacing:.02em; }
.day-tab-num{ font-size:var(--text-2); font-weight:700; }
.day-tab-dot{ width:6px; height:6px; border-radius:50%; }
.day-tab-dot-warn{ background:var(--warn-600); }
.day-tab-dot-accent{ background:var(--accent-600); }
.day-tab-selected{ border-color:var(--accent-600); background:var(--accent-100); }
.day-tab-selected .day-tab-name, .day-tab-selected .day-tab-num{ color:var(--accent-800); }
.day-tab-closed{ background:var(--bg); }
.day-tab-closed .day-tab-name, .day-tab-closed .day-tab-num{ color:var(--ink-600); }
.day-tab-closed.day-tab-selected{ border-color:var(--line); background:var(--line); }
.day-tab-closed.day-tab-selected .day-tab-name, .day-tab-closed.day-tab-selected .day-tab-num{ color:var(--ink-600); }

/* --- Sugestão de horário por regra (`.sugestoes`/`.sugestao-item`, novo) —
   design-sugestao.md §3.2. Zero token novo: só `--line`/`--surface`/
   `--ink-900`/`--ink-600`/`--radius-3`, já auditados em design-cadastro.md
   §7 / design-agenda.md §8. Deliberadamente NÃO usa `.slot`/`.timeline`/
   `.selo` (§11.14 da skill) — uma sugestão é uma AÇÃO proposta, não o
   estado de um horário; ver design-sugestao.md §3.2 pro raciocínio
   completo. Visual mais "quieto" que `.fila-item` (borda neutra `--line`,
   não `--warn-600`) porque é oferta, não pendência. */
.sugestoes{ margin:0 0 var(--size-5); }
.sugestao-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--size-2); }
.sugestao-item{ display:flex; align-items:center; justify-content:space-between; gap:var(--size-3); flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface); padding:var(--size-3) var(--size-4); }
.sugestao-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sugestao-time{ font-weight:700; font-size:var(--text-2); color:var(--ink-900); font-variant-numeric:tabular-nums; }
.sugestao-motivo{ font-size:var(--text-1); color:var(--ink-600); }
.sugestoes-vazio{ border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface);
  padding:var(--size-4); color:var(--ink-600); font-size:var(--text-2); }

/* --- §11.14 Linha do tempo do dia (`.timeline`/`.slot`) --- */
.day-status{ font-size:var(--text-1); color:var(--ink-600); margin:0 0 var(--size-3); }
.timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--size-2); }
.slot{ position:relative; border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface);
  padding:var(--size-3) var(--size-4); overflow:hidden; }
.slot-accent{ position:absolute; inset:0 auto 0 0; width:3px; }
.slot-livre{ background:var(--bg); border-style:dashed; }
.slot-livre .slot-accent{ background:var(--line); }
.slot-fechado{ background:var(--bg); }
.slot-fechado .slot-accent{ background:var(--line); }
.slot-confirmado .slot-accent{ background:var(--accent-600); }
.slot-pedido .slot-accent, .slot-conflito .slot-accent{ background:var(--warn-600); }
.slot-bloqueado .slot-accent{ background:var(--ink-600); }
.slot-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:space-between; }
.slot-time{ font-weight:700; font-size:var(--text-3); color:var(--ink-900); font-variant-numeric:tabular-nums; }
.slot-cliente{ font-size:var(--text-2); color:var(--ink-900); margin:8px 0 0; }
.slot-contato{ font-size:var(--text-1); color:var(--ink-600); }
.slot-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.slot-conflito{ border-color:var(--warn-600); }
.slot-conflito-note{ font-size:var(--text-1); font-weight:600; color:var(--warn-800); margin:8px 0 10px; }
.conflito-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.conflito-item{ border:1px solid var(--line); border-radius:var(--radius-2); padding:var(--size-3); background:var(--bg); }

/* --- §11.14 Confirmação de ação destrutiva (`.confirm-action`) — cancelar
   reserva confirmada/mensalista, design-agenda.md §3.7. Mesmo padrão
   `<details>` sem JS de §11.10 (.add-form), classe própria por semântica
   (revelação de CONSEQUÊNCIA, não de formulário). --- */
.confirm-action{ margin-top:8px; }
.confirm-action summary{ cursor:pointer; font-size:var(--text-1); font-weight:600; color:var(--warn-800);
  min-height:var(--tap-min); display:flex; align-items:center; list-style:none; }
.confirm-action summary::-webkit-details-marker{ display:none; }
.confirm-action summary:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.confirm-action-body{ padding-top:8px; }
.confirm-action-body p{ font-size:var(--text-1); color:var(--ink-900); margin:0 0 8px; }

/* --- Formulário "Criar reserva" embutido num bloco livre — classe própria
   `.reserva-form` no <form> interno (NÃO reaproveita o seletor genérico
   `.add-form form` do Cadastro, que é um layout em LINHA para o mini-form de
   horário; este é um formulário maior em COLUNA — reaproveitar o mesmo
   seletor quebraria visualmente o "Adicionar horário" do Cadastro). O
   `<details class="add-form">`/`summary` (moldura +/-) continua idêntico. --- */
.add-form .reserva-form{ padding-top:10px; display:flex; flex-direction:column; gap:var(--size-3); }
.produto-choice{ border:0; padding:0; margin:0; display:flex; gap:var(--size-4); flex-wrap:wrap; }
.produto-choice label{ display:flex; align-items:center; gap:6px; font-size:var(--text-2); min-height:var(--tap-min); }
.form-row{ display:flex; gap:var(--size-3); flex-wrap:wrap; }
.form-row .field{ flex:1 1 140px; margin:0; }

/* --- Dia fechado (sem grade nenhuma naquele dia da semana) --- */
.day-closed-panel{ border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface);
  padding:var(--size-5); text-align:center; }
.day-closed-panel p{ color:var(--ink-600); margin:10px 0 0; }

/* ===========================================================================
 * Link público (cliente) — componentes novos, design-publico.md +
 * ux-friendly.md §11.16. Tela SEM login, tom convidativo (não utilitário) —
 * ver design-publico.md §1/§4. Tokens: ZERO novos (100% herdado da paleta
 * Campo já auditada acima) — só estrutura nova. `.timeline`/`.slot`/
 * `.slot-accent`/`.slot-head`/`.slot-time`/`.tag`/`.tag-muted`/`.week-nav`/
 * `.day-tab*`/`.btn`/`.field`/`.form-row`/`.add-form`/`.banner`/
 * `.day-closed-panel` são REAPROVEITADOS tal qual dos blocos acima — nunca
 * duplicados aqui. REGRA DE ARQUITETURA (design-publico.md §3, verificável
 * por grep): nada abaixo usa `.selo` — só `.tag`/`.tag-muted`, porque `.selo`
 * carrega vocabulário de veredito ligado a `reserva.status`, que esta tela
 * nunca pode exibir (os 4 status internos colapsam sempre em "Indisponível").
 * =========================================================================== */

/* --- Cabeçalho público — sem `.appbar` (não há login nem troca de
   contexto: o link já é de UMA unidade). Tom convidativo. --- */
.public-header{ text-align:center; padding:var(--size-6) 0 var(--size-5); }
.public-brand{ font-size:var(--text-1); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent-600); margin:0 0 6px; }
.public-header h1{ font-size:clamp(1.5rem, 1.2rem + 1.5vw, 1.9rem); line-height:var(--leading-tight);
  margin:0 0 6px; font-weight:700; }
.public-cidade{ color:var(--ink-600); font-size:var(--text-2); margin:0 0 10px; }
.public-intro{ color:var(--ink-600); font-size:var(--text-2); max-width:44ch; margin:0 auto; }

.section-hint{ font-size:var(--text-1); color:var(--ink-600); margin:0; }

/* --- Seleção de quadra (`.quadra-pills`) — pílulas grandes e tocáveis em
   vez do `<select>` das telas internas (mais "convidativo" pro público —
   ver design-publico.md §4.2). --- */
.quadra-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.quadra-pill{ flex:1 1 140px; min-height:var(--tap-min); display:flex; flex-direction:column; justify-content:center;
  padding:8px 14px; border-radius:var(--radius-3); border:1px solid var(--line); background:var(--surface);
  text-decoration:none; color:var(--ink-900); }
.quadra-pill:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.quadra-pill-nome{ font-weight:700; font-size:var(--text-2); }
.quadra-pill-tipo{ font-size:var(--text-1); color:var(--ink-600); }
.quadra-pill-selected{ border-color:var(--accent-600); background:var(--accent-100); }
.quadra-pill-selected .quadra-pill-nome, .quadra-pill-selected .quadra-pill-tipo{ color:var(--accent-800); }

/* --- Linha do tempo pública (`.timeline-publico`) — mesma casca de
   `.timeline`/`.slot`, vocabulário de estado EXCLUSIVO desta tela (nunca
   `.selo`, ver §3 acima). `.slot-livre` aqui é escopado por
   `.timeline-publico` de propósito: a Agenda já usa `.slot-livre` com
   OUTRO significado visual (buraco tracejado, "ainda não reservado" na
   visão do dono) — este escopo evita colidir/duplicar o token, só
   reinterpreta o mesmo nome de classe dentro do contexto público (accent
   verde sólido = "reservável", não tracejado). */
.timeline-publico .slot-livre{ background:var(--surface); border-style:solid; }
.timeline-publico .slot-livre .slot-accent{ background:var(--accent-600); }
.timeline-publico .slot-indisponivel{ background:var(--bg); }
.timeline-publico .slot-indisponivel .slot-accent{ background:var(--line); }
.timeline-publico .slot-curto{ background:var(--bg); }
.timeline-publico .slot-curto .slot-accent{ background:var(--line); }
.timeline-publico .slot-fechado{ background:var(--bg); }
.timeline-publico .slot-fechado .slot-accent{ background:var(--line); }
.slot-note{ font-size:var(--text-1); color:var(--ink-600); margin:6px 0 0; }

/* --- Formulário de pedido — mesma casca `.add-form` (§11.10), com a
   variante `.add-form-single`: o `<summary>` some depois de aberto (a única
   ação que resta é preencher/enviar, não reabrir/fechar — design-publico.md
   §4.4). NÃO altera `.add-form` genérico (Cadastro/Agenda continuam
   reabrindo normalmente). --- */
.add-form-single[open] summary{ display:none; }

/* --- Painel "sem horário livre hoje" (`.empty-panel`) — nunca tom de erro,
   sempre sugestão gentil de outro dia/quadra (design-publico.md §6 item 2). --- */
.empty-panel{ border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface);
  padding:var(--size-5); text-align:center; }
.empty-panel p{ color:var(--ink-600); margin:8px 0 var(--size-4); }
.empty-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

.footer-note{ font-size:var(--text-1); color:var(--ink-600); text-align:center; margin:var(--size-6) 0 0; }

/* --- Painel de desenvolvimento (index.html) — NÃO faz parte do produto,
   só ajuda a navegar entre os estados gerados durante a revisão. --- */
.devpanel{ max-width: 640px; margin: var(--size-6) auto; padding: 0 var(--page-pad); }
.devpanel h1{ font-size: var(--text-4); }
.devpanel ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--size-3); }
.devpanel li{ border:1px solid var(--line); border-radius:var(--radius-3); background:var(--surface); padding:var(--size-4); }
.devpanel a{ font-weight:700; color:var(--accent-600); }
.devpanel p{ margin:4px 0 0; color:var(--ink-600); font-size:var(--text-1); }