/* Reuniões do Nô — casca OpereFood (padrão canônico, ver design/padrao_opere_01set.md)
   Fonte da paleta/geometria: bodedono/OpereFood-UI (src/estilo/opere.css, temas.css).
   "reunioes" NÃO está entre os 12 produtos oficiais de data-produto (booking/estoque/tag/
   financeiro/flow/cupom/cardap/escala/pessoas/check/delivery/musica) — matiz EXTRAPOLADO:
   h=280 (violeta), no maior vão livre do círculo de matizes (entre check h258 e delivery
   h300, ~22° de cada lado) e semanticamente ligado a decisão/governança (reuniões → atas →
   decisões), longe do teal antigo da Central (~h190-220, ver §1 do padrão — não confundir).
   Consumo direto (sem pacote npm): tokens + reset colados aqui, nomes de classe PT-BR
   herdados deste app mantidos (evita reescrever 10 templates) — só os valores mudam. */
/* P-pass item 4 (01/set): o matiz vem do seletor de produto, não cravado no :root — os
   3 templates de <head> (base/login/senha_form) já põem data-produto="reunioes" no <html>,
   então este é o único lugar onde 280 é escrito; todo --accent* abaixo lê var(--h). */
[data-produto="reunioes"]{ --h:280; }
:root{
  color-scheme:light;
  --fonte-ui:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;

  --canvas:oklch(0.946 0.004 85);        --surface:oklch(0.988 0.002 85);
  --surface2:oklch(0.962 0.003 85);      --surface3:oklch(0.936 0.005 85);
  --border:oklch(0.878 0.006 85);        --border2:oklch(0.812 0.007 85);

  --text:oklch(0.245 0.010 60);          --text2:oklch(0.508 0.010 60);
  --text3:oklch(0.640 0.010 60);

  --accent:oklch(0.552 0.198 var(--h));       --accent-hi:oklch(0.498 0.188 var(--h));
  --on-accent:oklch(0.995 0 0);          --accent-weak:oklch(0.552 0.198 var(--h) / 0.14);
  --accent-ring:oklch(0.552 0.198 var(--h) / 0.28);

  --danger:oklch(0.577 0.213 27);        --ok:oklch(0.470 0.120 150);
  --warn:oklch(0.490 0.095 70);          --blind:oklch(0.560 0.010 85);
  /* compat: nomes antigos referenciados direto em 2 templates (inline var()) */
  --crit:var(--danger);
  --ok-bg:color-mix(in oklab, var(--ok) 14%, var(--surface));
  --warn-bg:color-mix(in oklab, var(--warn) 14%, var(--surface));
  --crit-bg:color-mix(in oklab, var(--danger) 12%, var(--surface));
  --blind-bg:color-mix(in oklab, var(--blind) 14%, var(--surface));

  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:var(--fonte-ui);
  --shadow-xs:0 1px 1px oklch(0.2 0.01 60 / 0.06);
  --shadow:0 1px 2px oklch(0.2 0.01 60 / 0.08), 0 2px 6px oklch(0.2 0.01 60 / 0.06);

  --r-xs:3px; --r-sm:5px; --r-md:7px; --r-lg:10px; --r-xl:14px; --r-full:999px;
  /* item 11 (01/set): --sp-1 faltava (canon tem 8 degraus, aqui só 7 estavam declarados) —
     adicionado pra fechar a escala e servir os vários padding/margin de 2-3px abaixo. */
  --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:12px; --sp-6:16px; --sp-7:20px; --sp-8:24px;
  --alvo-toque:24px;

  /* Fase 1 (casca estrutural, 02/set): medidas com dono único (padrao_opere_01set.md §5).
     Sem --casca-trilho: reunioes é app de propósito único (5ª exceção do padrão), sem rail
     de troca de app. --casca-corte é literal nos @container abaixo (a query não interpola
     var()) — o token existe só de referência, mexeu num, mexe no outro. */
  --casca-topo:64px; --casca-painel:240px; --casca-corte:1100px;

  --dur-1:90ms; --dur-2:160ms; --dur-3:260ms;
  /* Fase 1 (casca estrutural, 02/set): único consumidor é o marcador do .item-nav "acendendo"
     cor no hover/active — canônico (padrao_opere_01set.md §5), fora da escala de propósito. */
  --casca-acender:420ms;
  --ease:cubic-bezier(.2,0,0,1); --ease-snap:cubic-bezier(.3,.9,.2,1);

  /* item 8 do backlog (01/set): camada de alias — vocabulário CANÔNICO do padrão opere
     (design/padrao_opere_01set.md §3) apontando pros tokens locais existentes, SEM mudar
     nenhum valor computado e SEM que nenhum seletor abaixo passe a ler os nomes novos.
     Só declarada aqui (não repetida nos blocos de :root escuro) porque var() é resolvido
     no valor computado do MESMO elemento — a cascata de --accent/--surface2/etc já muda
     por tema, e o alias segue junto sem precisar de 2ª declaração. Tokens do padrão sem
     equivalente local (--rating, --serie-1..8, --marca-simbolo) ficam de fora: não existe
     consumidor pra eles aqui, e inventar valor seria drift, não alias. */
  --brand:var(--accent);           --brand-hover:var(--accent-hi);
  --brand-fg:var(--on-accent);     --brand-ring:var(--accent-ring);
  --surface-2:var(--surface2);     --surface-hover:var(--surface3);
  --border-strong:var(--border2);
  --text-1:var(--text);            --text-2:var(--text2);   --text-3:var(--text3);
  --alerta:var(--warn);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Sem isto, listas de seleção, calendários e barras nativas abriam claros no tema escuro. */
    color-scheme:dark;
    --canvas:oklch(0.232 0.006 75);      --surface:oklch(0.266 0.007 75);
    --surface2:oklch(0.300 0.008 75);    --surface3:oklch(0.334 0.009 75);
    --border:oklch(0.368 0.010 75);      --border2:oklch(0.450 0.012 75);
    --text:oklch(0.955 0.005 75);        --text2:oklch(0.765 0.010 75);
    --text3:oklch(0.635 0.012 75);
    --accent:oklch(0.600 0.190 var(--h));     --accent-hi:oklch(0.640 0.205 var(--h));
    --on-accent:oklch(0.995 0 0);        --accent-weak:oklch(0.600 0.190 var(--h) / 0.18);
    --accent-ring:oklch(0.600 0.190 var(--h) / 0.35);
    --danger:oklch(0.680 0.190 27);      --ok:oklch(0.720 0.130 150);
    --warn:oklch(0.780 0.120 80);        --blind:oklch(0.660 0.010 75);
    --shadow-xs:0 1px 1px oklch(0 0 0 / .3);
    --shadow:0 1px 2px oklch(0 0 0 / .35), 0 2px 8px oklch(0 0 0 / .25);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:oklch(0.232 0.006 75);        --surface:oklch(0.266 0.007 75);
  --surface2:oklch(0.300 0.008 75);      --surface3:oklch(0.334 0.009 75);
  --border:oklch(0.368 0.010 75);        --border2:oklch(0.450 0.012 75);
  --text:oklch(0.955 0.005 75);          --text2:oklch(0.765 0.010 75);
  --text3:oklch(0.635 0.012 75);
  --accent:oklch(0.600 0.190 var(--h));       --accent-hi:oklch(0.640 0.205 var(--h));
  --on-accent:oklch(0.995 0 0);          --accent-weak:oklch(0.600 0.190 var(--h) / 0.18);
  --accent-ring:oklch(0.600 0.190 var(--h) / 0.35);
  --danger:oklch(0.680 0.190 27);        --ok:oklch(0.720 0.130 150);
  --warn:oklch(0.780 0.120 80);          --blind:oklch(0.660 0.010 75);
  --shadow-xs:0 1px 1px oklch(0 0 0 / .3);
  --shadow:0 1px 2px oklch(0 0 0 / .35), 0 2px 8px oklch(0 0 0 / .25);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fonte-ui);font-size:14.5px;line-height:1.45;
  background:var(--canvas);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi);text-decoration:underline}
:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;border-radius:4px}
/* P-pass item 6 (01/set): reduzir só o DESLOCAMENTO, nunca a cor/marcador de estado (§5/§7 do
   padrão) — -duration em vez de none: a transição colapsa a ~0, mas ainda aplica o valor final
   (cor, background, scaleY do marcador), então o canal de estado continua chegando ao usuário
   com motion off; animation:none/transition:none apagariam o efeito inteiro, não só o movimento. */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

.marca{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--text);
  display:inline-flex;align-items:center;gap:var(--sp-4);text-decoration:none}
.marca-selo{font-size:22px}
.marca span:last-child{color:var(--accent);font-weight:700}

/* ═══ Fase 1 — casca estrutural (design-fase1-casca-plano-01set.md, 01-02/set) ═══════════════
   Extraído (opção B do plano: bloco curado, não os 262KB do opere.css inteiro) de
   bodedono/OpereFood-UI, src/estilo/opere.css, commit 61a799d3fce8bd4c2099b4cd9d4c17e90f843c4a
   (branch main) — seções "A CASCA EM DUAS LARGURAS" (~L2299-2372), ".casca-acao"/corte
   (~L2836-2876), "PainelLateral" (~L2993-3087) e ".item-nav" (~L3091-3164). LEITURA só,
   org bodedono (I-26).

   Substitui .topo/.topo-conteudo/.abas (barra horizontal flat) — eram o ÚNICO consumidor
   dessas 3 classes no projeto (grep confirma), removidas junto. .marca/.marca-selo ficam
   (movidas pro header do painel-lateral, markup interno intocado).

   Adaptações pra reunioes (app de PROPÓSITO ÚNICO — 5ª exceção do padrão, registrada em
   design/padrao_opere_01set.md §"Exceções documentadas"):
   - SEM `.trilho`/`.casca-lateral`: reunioes não tem outro app pra trocar, então
     `.painel-lateral` é filho DIRETO de `.casca` (o kit normalmente aninha os dois dentro de
     `.casca-lateral`).
   - `.painel-lateral > header` simplificado: sem `.painel-topo`/`.painel-identidade`/
     `.painel-org` (o kit reserva esse miolo pro seletor de unidade — reunioes não tem
     unidade/filial pra filtrar), só a `.marca` existente.
   - `.item-nav` importa só os estados que reunioes usa (atual/hover/active/focus); `data-tom`,
     `[aria-disabled]` e `.item-nav-contagem` do kit ficam de fora — não há consumidor local,
     copiar seria drift, não alias. Reduced-motion do `.item-nav`/`::before` NÃO precisa de
     bloco próprio: o catch-all `*,*::before,*::after` do item 6 (P-pass 01/set) já cobre.
   - Corte em `--casca-corte` (1100px) via `@container`, nunca `@media` (a casca reage ao
     espaço que tem). reunioes não tinha NENHUM mecanismo de gaveta pra reaproveitar (o
     narrow de hoje era só `.abas` virando tabs com scroll horizontal — removido acima) —
     construído do zero: `.painel-lateral` some abaixo do corte, um `<button>` real
     (`.casca-burger`, acessível por teclado/leitor de tela, diferente de um `<label>`+
     checkbox que não entraria na ordem de tab) alterna a classe `.aberta` + um backdrop
     (`.gaveta-fundo`) via ~15 linhas de JS vanilla (único `<script>` do projeto — zero
     framework, zero dependência). Fallback deliberado: SEM suporte a `@container` (browser
     muito antigo) `.painel-lateral` cai no default `display:flex` sempre visível — falha
     pro lado seguro (nav sempre visível), nunca pro lado cego (nav inacessível). Residual
     aceito e documentado: JS desabilitado + viewport estreita = gaveta não abre (mesmo
     acontece só nesse cruzamento; teclado via Tab+Enter/Espaço no burger funciona porque é
     um `<button>` de verdade, e Escape fecha).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.casca{display:flex;height:100dvh;overflow:hidden;container-type:inline-size;container-name:casca}
.casca-coluna{display:flex;flex-direction:column;flex:1;min-width:0}
.casca-miolo{flex:1;min-height:0;overflow:auto}

.cab-casca{display:flex;align-items:center;gap:var(--sp-5);flex:none;min-height:var(--casca-topo);
  padding:0 var(--sp-6);border-bottom:1px solid var(--border);background:var(--surface)}
.cab-casca-titulo{flex:1;min-width:0;margin:0;display:flex;align-items:baseline;gap:var(--sp-3);
  font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden}
.cab-casca-app{color:var(--accent);flex:none}
.cab-casca-sep{color:var(--text3);font-weight:400;flex:none}
.cab-casca-secao{min-width:0;color:var(--text);overflow:hidden;text-overflow:ellipsis}

.casca-acao{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  flex:none;border:none;border-radius:var(--r-md);background:none;color:var(--text2);
  font-size:18px;line-height:1;cursor:pointer;
  transition:color var(--casca-acender) var(--ease),background var(--dur-2) var(--ease)}
.casca-acao:hover{background:var(--surface2);color:var(--text)}
.casca-acao:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
.casca-burger{margin-inline-start:calc(var(--sp-3) * -1)}

/* PainelLateral: cabeçalho fixo (marca), corpo rolável (nav), rodapé opcional (sair). Default
   visível (display:flex) — ver nota de fallback acima; os @container abaixo é que decidem
   quando ele vira gaveta. */
.painel-lateral{width:var(--casca-painel);flex:none;border-right:1px solid var(--border);
  background:var(--surface);display:flex;flex-direction:column}
.painel-lateral>header{padding:var(--sp-4);border-bottom:1px solid var(--border)}
.painel-lateral>nav{flex:1;overflow-y:auto;padding:var(--sp-3);display:grid;gap:var(--sp-2);
  align-content:start}
/* Barra de rolagem do menu: trilho invisível e polegar fino em pílula, que se destaca quando o
   ponteiro está sobre o menu. scrollbar-gutter reserva o espaço para o texto não pular. Chrome,
   Edge e Safari usam os pseudo-elementos ::-webkit-scrollbar; o Firefox, que não os tem, recebe
   a versão padrão (scrollbar-width/scrollbar-color) — declarar as duas no Chrome anularia a pílula. */
.painel-lateral>nav{scrollbar-gutter:stable;
  --rolagem-polegar:color-mix(in oklab, var(--text3) 28%, transparent);
  --rolagem-polegar-ativo:color-mix(in oklab, var(--accent) 55%, var(--text3))}
.painel-lateral>nav:hover,.painel-lateral>nav:focus-within{
  --rolagem-polegar:color-mix(in oklab, var(--text3) 55%, transparent)}
.painel-lateral>nav::-webkit-scrollbar{width:10px}
.painel-lateral>nav::-webkit-scrollbar-track{background:transparent;margin-block:var(--sp-3)}
.painel-lateral>nav::-webkit-scrollbar-thumb{background-color:var(--rolagem-polegar);
  border:3px solid transparent;background-clip:padding-box;border-radius:var(--r-full);min-height:40px}
.painel-lateral>nav::-webkit-scrollbar-thumb:hover,
.painel-lateral>nav::-webkit-scrollbar-thumb:active{background-color:var(--rolagem-polegar-ativo)}
.painel-lateral>nav::-webkit-scrollbar-button{display:none;height:0}
@supports not selector(::-webkit-scrollbar){
  .painel-lateral>nav{scrollbar-width:thin;scrollbar-color:var(--rolagem-polegar) transparent}
}
.painel-lateral>footer{padding:var(--sp-3);border-top:1px solid var(--border)}
/* Rodapé do menu: quem está conectado + botão compacto de sair (ícone e rótulo). Em tela de
   toque o botão volta aos 44px de altura do padrão (§5). */
.painel-lateral>footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.painel-usuario{display:flex;align-items:center;gap:var(--sp-4);min-width:0;padding-left:var(--sp-3)}
.painel-avatar{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:color-mix(in oklab, var(--accent) 14%, var(--surface));color:var(--accent);font-size:13px;font-weight:800}
.painel-usuario-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);font-size:13px;font-weight:600}
.painel-lateral .sair{flex:none;margin:0}
.painel-lateral .sair-botao{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:34px;padding:var(--sp-3) var(--sp-4);
  border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--text2);font-size:13px;font-weight:600;
  transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.painel-lateral .sair-botao:hover{color:var(--danger);background:color-mix(in oklab, var(--danger) 9%, var(--surface));
  border-color:color-mix(in oklab, var(--danger) 25%, transparent)}
.painel-lateral .sair-botao:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
.painel-lateral .sair-botao svg{flex:none}
@media (pointer:coarse){.painel-lateral .sair-botao{min-height:44px}}

/* Regra dura do padrão (§5): nunca só cor — marcador de 3px que cresce (scaleY) + cor que
   acende, nunca uma caixa/moldura ao redor do item. */
.item-nav{position:relative;display:flex;align-items:center;gap:var(--sp-2);width:100%;
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);border:none;border-radius:var(--r-sm);
  background:none;font:inherit;font-size:14px;font-weight:500;line-height:1.45;
  text-align:left;text-decoration:none;color:var(--text2);cursor:pointer;
  transition:color var(--casca-acender) var(--ease),transform var(--dur-3) var(--ease)}
.item-nav::before{content:"";position:absolute;left:0;top:50%;width:3px;height:20px;
  border-radius:0 999px 999px 0;background:var(--accent);
  transform:translateY(-50%) scaleY(0);transform-origin:center;
  transition:transform var(--dur-3) var(--ease-snap)}
.item-nav:hover{color:color-mix(in oklab, var(--accent) 35%, var(--text2));transform:translateX(2px);
  text-decoration:none}
.item-nav:active{transform:translateX(2px) scale(.98);transform-origin:left center;
  transition-duration:var(--casca-acender),var(--dur-1)}
.item-nav:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px}
.item-nav[data-atual="sim"]{color:var(--accent);font-weight:600}
.item-nav[data-atual="sim"]:hover{color:var(--accent);transform:none}
.item-nav[data-atual="sim"]::before{transform:translateY(-50%) scaleY(1)}
.item-nav-rotulo{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Seções do menu (out/2026): "Problemas de loja (Central)", "Pautas e reuniões" e
   "Administração" ganham título próprio e um divisor, para a separação ser visível de longe.
   Grupos com submenu usam <details> nativo — abre sem JS, teclado e leitor de tela incluídos. */
.nav-secao{display:grid;gap:var(--sp-1)}
.nav-secao+.nav-secao{margin-top:var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--border)}
.nav-secao-titulo{margin:0 0 var(--sp-2);padding:0 var(--sp-3) 0 var(--sp-6);font-size:11px;
  font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.nav-grupo>summary{list-style:none}
.nav-grupo>summary::-webkit-details-marker{display:none}
.nav-grupo-cab::after{content:"";flex:none;width:6px;height:6px;margin-inline-end:var(--sp-3);
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform var(--dur-2) var(--ease)}
.nav-grupo[open]>.nav-grupo-cab::after{transform:rotate(45deg)}
.nav-grupo-cab[data-atual="grupo"]{color:var(--text);font-weight:600}
.nav-grupo-itens{display:grid;gap:var(--sp-1);margin:var(--sp-1) 0 var(--sp-3) var(--sp-6);
  border-left:1px solid var(--border)}
.item-nav-filho{font-size:13.5px;padding-left:var(--sp-5)}

.gaveta-fundo{position:fixed;inset:0;background:oklch(0 0 0 / .35);z-index:25}
@container casca (max-width:1099.98px){
  .painel-lateral{display:none;position:fixed;inset:0 auto 0 0;z-index:30;
    width:min(var(--casca-painel),82vw);box-shadow:0 10px 40px oklch(0.2 0.01 60 / .35)}
  .painel-lateral.aberta{display:flex}
}
@container casca (min-width:1100px){
  .painel-lateral{display:flex}
  .casca-burger{display:none}
}

.pagina-cabeca{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-5);
  margin:var(--sp-3) 0 var(--sp-6);flex-wrap:wrap}
.pagina-cabeca h1{margin:0}
.pagina-cabeca .meta{margin:var(--sp-2) 0 0}

.dia-bloco{margin-bottom:var(--sp-5)}
.dia-cabeca{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text2);padding:0 var(--sp-2) var(--sp-3)}
.dia-cabeca.dia-hoje{color:var(--accent)}
.hora-pill{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;
  font-weight:700;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-2) var(--sp-4);color:var(--text2);min-width:56px;text-align:center}
.linha-link{color:inherit}
.linha-link:hover{background:var(--surface2);text-decoration:none;color:inherit}
.kpi-link{display:block;color:inherit}
.kpi-link:hover{border-color:var(--border2);box-shadow:var(--shadow);
  transform:translateY(-1px);text-decoration:none;color:inherit}
.filtros-rito{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;margin:0 0 var(--sp-5)}
.filtros-rito .chip{min-height:38px;padding:var(--sp-3) var(--sp-5);font-size:13px}
.filtros-rito .chip:hover{text-decoration:none;filter:brightness(1.08)}
.filtro-sep{width:1px;height:24px;background:var(--border2);margin:0 var(--sp-2)}
.fio-rito{border-left:3px solid var(--accent);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-5)}
.fio-cabeca{font-weight:800;font-size:14px;margin-bottom:var(--sp-4);display:flex;
  justify-content:space-between;gap:var(--sp-4);align-items:baseline}
.fio-secao{margin-top:var(--sp-4);font-size:13.5px}
.fio-item{padding:var(--sp-1) 0;color:var(--text2)}

.conteudo{max-width:1100px;margin:0 auto;padding:var(--sp-6)}
/* item 11: 32px de respiro final do rodapé é deliberadamente maior que --sp-8 (24px, diff
   8px > tolerância de 2px) — não é drift, é o espaço de "fim de página" antes do scroll acabar. */
.rodape{max-width:1100px;margin:var(--sp-8) auto 32px;padding:0 var(--sp-6);color:var(--text3);font-size:12.5px}

h1{font-size:22px;font-weight:800;margin:var(--sp-3) 0 var(--sp-5);letter-spacing:-.4px}
h2{font-size:18px;font-weight:700;color:var(--text);margin:var(--sp-8) 0 var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-4);margin:0 0 var(--sp-6)}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6);box-shadow:var(--shadow-xs);border-top:3px solid var(--border2);
  transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.kpi.kpi-ok{border-top-color:var(--ok)}
.kpi.kpi-warn{border-top-color:var(--warn)}
.kpi.kpi-crit{border-top-color:var(--danger)}
.kpi .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:28px;
  font-weight:700;letter-spacing:-.8px;line-height:1.1}
.kpi .rot{color:var(--text2);font-size:12.5px;margin-top:var(--sp-2);font-weight:600}
.kpi.kpi-crit .num{color:var(--danger)}
.kpi.kpi-warn .num{color:var(--warn)}
.kpi.kpi-ok .num{color:var(--ok)}

/* ── login (.tela-acesso do padrão) ── */
.tela-login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-7);background:
    radial-gradient(1000px 500px at 80% -10%, var(--accent-weak), transparent 60%),
    var(--canvas)}
.login-caixa{width:100%;max-width:400px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 10px 40px oklch(0.2 0.01 60 / .14);
  /* item 11: 32px/28px do card de login off-grid de propósito (diff 8px/4px do --sp-8=24px,
     acima da tolerância de 2px) — é o "hero" da tela, quer respiro maior que qualquer cartão comum. */
  padding:32px 28px;border-top:4px solid var(--accent)}
.login-marca{text-align:center;margin-bottom:var(--sp-7)}
.login-selo{font-size:44px;line-height:1;margin-bottom:var(--sp-4)}
.login-marca h1{font-size:26px;font-weight:800;margin:0;letter-spacing:-.5px}
.login-marca h1 em{font-style:italic;color:var(--accent)}
.login-marca p{color:var(--text3);font-size:12.5px;margin:var(--sp-3) 0 0}
.login-form label{margin-top:var(--sp-5)}
.login-form input{font-size:16px;min-height:48px}
.login-botao{width:100%;margin-top:var(--sp-6);min-height:50px;font-size:16px}
.login-erro{background:var(--crit-bg);color:var(--danger);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);font-weight:700;font-size:13.5px;margin-bottom:var(--sp-2)}
.login-pe{text-align:center;color:var(--text3);font-size:11.5px;margin:var(--sp-6) 0 0}

.aviso{border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-5);border:1px solid var(--border2)}
.aviso-blind{background:var(--blind-bg);color:var(--text);
  background-image:repeating-linear-gradient(45deg,transparent 0 8px,color-mix(in oklab, var(--blind) 20%, transparent) 8px 16px)}

.cartao{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);margin-bottom:var(--sp-4)}
.linha{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-5) var(--sp-5);min-height:44px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.linha:last-child{border-bottom:none}
.linha .hora{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text2);
  min-width:104px;font-size:13px}
.linha .titulo-reuniao{font-weight:600;flex:1;min-width:180px}
.linha .titulo-reuniao a{color:var(--text)}
.linha .custo{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text3);font-size:13px}

/* .chip = .selo do padrão: 1 var (--chip-cor) muda o tom inteiro (§6.6).
   Reparo de contraste (02/set, veredito de inovação): `color:var(--chip-cor)` cru sobre o
   fundo tingido a 12% reprovava o piso AA (§7) em 3 das 6 variantes — crit 4.00 claro/4.15
   escuro, blind 3.86/4.18, accent 4.26/3.20 (medido, testes/test_contraste_chips.py).
   Mesma receita do `.selo-perigo` do padrão (§6.6/§3.2): deriva por color-mix em vez de usar
   a cor pura como texto. Pós-reparo, as 6 variantes: 4.85–7.24:1 nos dois temas (nenhuma
   piorou — ok/warn/neutro só melhoraram). */
.chip{--chip-cor:var(--text2);display:inline-flex;align-items:center;gap:var(--sp-2);
  height:22px;border-radius:var(--r-full);padding:0 var(--sp-4);font-size:12px;font-weight:700;
  white-space:nowrap;color:color-mix(in oklab, var(--chip-cor) 72%, var(--text));
  background:color-mix(in oklab, var(--chip-cor) 12%, var(--surface));
  border:1px solid color-mix(in oklab, var(--chip-cor) 22%, transparent)}
.chip-ok{--chip-cor:var(--ok)}
.chip-warn{--chip-cor:var(--warn)}
.chip-crit{--chip-cor:var(--danger)}
.chip-blind{--chip-cor:var(--blind)}
.chip-neutro{--chip-cor:var(--text2)}
.chip-accent{--chip-cor:var(--accent)}
/* Peso da porta (02/set, veredito de inovação): `d.door` (1way/2way) ganha peso visual —
   hoje sai como literal cru em decisoes.html/reuniao.html, decisão irreversível lendo IGUAL
   a uma reversível. Zero cor/token novo: herda a mesma derivação color-mix do reparo acima
   (--danger 72% + --text, medido 5.76 claro / 5.67 escuro). Dois canais: texto + cor. */
.selo-porta{--chip-cor:var(--text2)}
.selo-porta-1way{--chip-cor:var(--danger)}
/* Relógio (02/set, arquétipo ESTEIRA): idade da decisão é um TERCEIRO canal — Peso da
   Porta (acima) já ocupa cor pra 1-way/2-way e o chip de status já ocupa cor pra
   proposta/confirmada/revogada. Idade não compete por cor (3 significados numa variável
   de tom é ruído, não sinal): pesa só na ESPESSURA da borda esquerda, igual ao `.fio-rito`
   já usado acima (linha ~246) — quanto mais dias, mais grossa. `--chip-cor` explícito (não confiar no default
   de `.chip`) no mesmo tom neutro do `selo-porta` 2-way, coberto pelo guard de contraste
   (testes/test_contraste_chips.py, `selo-idade` no parametrize). Degraus vêm do filtro
   Jinja `idade` (app.py, `_idade_decisao`): d0 hoje · d1 1-6d · d2 7-29d · d3 30d+ — cada
   degrau é um salto de largura ≥33% sobre o anterior, então a escada é distinguível SEM
   nenhuma cor (prova em cinza: testes/test_idade_decisao.py).
   `na` (I-50 — `inicio` nulo/ilegível) usa a borda MAIS GROSSA da escada (6px) em
   TRACEJADO. Corrigido 02/set: antes ficava em 1px, o degrau mais leve de todos — e um
   item sem data pode ser o mais VELHO da fila, então desenhá-lo leve fazia a varredura
   pular justo o que ninguém sabe medir. Divisão de trabalho entre os dois canais: a
   ESPESSURA diz "não descarte", o TRACEJADO diz "não sei quanto". Ausência de dado sai
   da escala, nunca para baixo dela. Vale em cor e em cinza puro. */
.selo-idade{--chip-cor:var(--text2);
  /* A borda ESQUERDA carrega a escada de idade, então ela é a única do chip que usa a
     --chip-cor PURA. A borda geral do `.chip` é `color-mix(… 22%, transparent)`, decorativa
     e proposital — mas medida contra o fundo do próprio chip ela dá 1,32:1, e uma escada de
     espessura desenhada nessa borda existia no CSS e não se via na tela: 2px e 6px ficavam
     indistinguíveis a um braço de distância. Cor pura: 4,79:1, acima do piso de 3:1 de
     componente. As outras três bordas continuam fracas de propósito — quem precisa ser
     lido é o degrau, não a moldura. (02/set, achado de auditoria adversarial.) */
  border-left-color:var(--chip-cor)}
.selo-idade-d0{border-left-width:2px}
.selo-idade-d1{border-left-width:3px}
.selo-idade-d2{border-left-width:4px}
.selo-idade-d3{border-left-width:6px}
.selo-idade-na{border-left-width:6px;border-left-style:dashed}

button,.botao{font:inherit;font-weight:700;border-radius:var(--r-md);border:1px solid var(--border2);
  background:var(--surface);color:var(--text);padding:var(--sp-4) var(--sp-5);min-height:44px;cursor:pointer;
  transition:background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
button:hover{background:var(--surface2)}
button:active{transform:scale(.985)}
/* "sistema de luz": nunca botão chapado (§6.5) — sombra colorida + leve elevação no hover */
/* CTA (out/2026): o mesmo destaque vale para links com cara de botão (a.botao.primario) e para
   botões que abrem janela de criação (.modal-gatilho-cta). Critério de uso: envio de janela,
   ação principal de criação da página, formulário que é o objetivo da seção e pendência que
   exige ação de quem vê — nunca filtro, navegação, alternativa ou ação repetida em lista. */
button.primario,.botao.primario,.modal-gatilho.modal-gatilho-cta{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);box-shadow:0 2px 7px color-mix(in oklab, var(--accent) 24%, transparent)}
button.primario:hover,.botao.primario:hover,.modal-gatilho.modal-gatilho-cta:hover{background:var(--accent-hi);
  border-color:var(--accent-hi);color:var(--on-accent);transform:translateY(-1px);
  box-shadow:0 4px 12px color-mix(in oklab, var(--accent) 30%, transparent)}
button.primario:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
button.primario:disabled:hover{background:var(--accent);border-color:var(--accent)}
.modal-gatilho.modal-gatilho-cta::after{opacity:.85}
.modal-gatilho-cartao.modal-gatilho-cta{display:inline-flex;width:auto;padding-inline:var(--sp-7)}
/* a:hover sublinha links; botões não. a.botao também precisa de caixa e alinhamento de botão. */
a.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);text-decoration:none}
a.botao:hover{text-decoration:none}
a.botao:not(.primario):hover{background:var(--surface2);color:var(--text)}
/* mini removido dos botões de AÇÃO (44px é lei em toque); segue só pra uso passivo raro */
button.mini{min-height:34px;padding:var(--sp-2) var(--sp-4);font-size:12.5px;border-radius:var(--r-sm)}
form.inline-acao{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
form.inline-acao input[type=email]{max-width:230px;min-height:44px}
form.inline-acao input[type=date]{max-width:150px;min-height:44px}
form.lote{display:flex;gap:var(--sp-4);align-items:end;flex-wrap:wrap;background:var(--surface2);
  border:1px solid var(--border);border-bottom:none;padding:var(--sp-4) var(--sp-5);margin:0}
form.lote>div{flex:1;min-width:150px}
input.marca-lote{width:22px;height:22px;min-width:22px;accent-color:var(--accent)}
/* área de toque 44px do checkbox: o label envolve e estica o alvo */
/* item 11: margin:-8px NÃO é candidato de grid de espaço — é offset negativo pra esticar
   a área de toque de 22px do input real até os 44px do alvo-toque, não um respiro visual. */
label.alvo-lote{display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;cursor:pointer;margin:-8px 0}
label.opcao-lote{display:inline-flex;align-items:center;gap:var(--sp-4);min-height:44px;
  font-size:13px;font-weight:700;color:var(--text2);cursor:pointer}
label.opcao-lote input{width:20px;height:20px;accent-color:var(--accent)}
details.ajuste-fino summary{font-size:12.5px;color:var(--text3);cursor:pointer;
  min-height:44px;display:flex;align-items:center;padding:0 var(--sp-3)}
details.ajuste-fino[open] summary{color:var(--accent)}
button.perigo{color:var(--danger);border-color:var(--danger)}

input,select,textarea{font:inherit;font-size:16px;color:var(--text);background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-4);width:100%;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
input:focus,select:focus,textarea:focus{
  border-color:color-mix(in oklab, var(--accent) 40%, var(--border2));
  box-shadow:0 0 5px color-mix(in oklab, var(--accent) 16%, transparent);outline:none}
textarea{min-height:120px;resize:vertical;font-family:var(--mono);font-size:16px}
@media (min-width:768px){ textarea{font-size:13.5px} }
label{display:block;font-size:12.5px;font-weight:700;color:var(--text2);margin:var(--sp-4) 0 var(--sp-2)}
form.inline{display:flex;gap:var(--sp-4);align-items:end;flex-wrap:wrap}
form.inline > div{flex:1;min-width:130px}
form.inline > button{flex:0}

.meta{color:var(--text2);font-size:13px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.vazio{padding:var(--sp-7) var(--sp-6);color:var(--text2)}
.vazio a{font-weight:700}
details.bloco{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  margin-bottom:var(--sp-4)}
details.bloco summary{padding:var(--sp-5) var(--sp-5);font-weight:700;cursor:pointer;min-height:44px;
  display:flex;align-items:center}
details.bloco .dentro{padding:0 var(--sp-5) var(--sp-5);overflow-x:auto}

/* ═══ Expansíveis e janelas (out/2026) ════════════════════════════════════════════════════
   Expansíveis informativos: seta própria que gira, cor de destaque no hover e abertura
   animada. A animação de altura usa ::details-content + interpolate-size (Chrome/Edge 131+);
   nos demais navegadores o bloco abre sem animação, como antes. O menu lateral e o
   "Ajustar tempo" da preparação já têm marcador próprio e ficam de fora da seta. */
details:not(.nav-grupo,.preparo-tempo)>summary{list-style:none;display:flex;align-items:center;
  gap:var(--sp-4);cursor:pointer;border-radius:var(--r-sm);transition:color var(--dur-2) var(--ease)}
details:not(.nav-grupo,.preparo-tempo)>summary::-webkit-details-marker{display:none}
details:not(.nav-grupo,.preparo-tempo)>summary::before{content:"";flex:none;width:6px;height:6px;
  margin-inline:3px 2px;border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg);transition:transform var(--dur-3) var(--ease-snap)}
details:not(.nav-grupo,.preparo-tempo)[open]>summary::before{transform:rotate(45deg)}
details:not(.nav-grupo,.preparo-tempo)>summary:hover{color:var(--accent)}
details>summary:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow-y:clip;
    transition:block-size var(--dur-3) var(--ease),content-visibility var(--dur-3) allow-discrete}
  details[open]::details-content{block-size:auto}
}
/* A regra global de movimento reduzido (*, ::before, ::after) não alcança ::details-content. */
@media (prefers-reduced-motion:reduce){details::details-content{transition:none}}

/* Botão que abre uma janela de criação/alteração (static/modais.js). "cartão" ocupa a linha
   inteira, como o bloco que substitui; "sugerido" marca o próximo passo indicado pela tela. */
.modal-gatilho{display:inline-flex;align-items:center;gap:var(--sp-4);min-height:44px;
  padding:var(--sp-4) var(--sp-6);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:600;
  text-align:left;cursor:pointer;box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.modal-gatilho::after{content:"";flex:none;width:7px;height:7px;margin-inline-start:auto;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);
  opacity:.55;transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
.modal-gatilho:hover{border-color:color-mix(in oklab, var(--accent) 45%, var(--border));
  background:color-mix(in oklab, var(--accent) 5%, var(--surface));box-shadow:var(--shadow)}
.modal-gatilho:hover::after{opacity:1;transform:translateX(2px) rotate(45deg)}
.modal-gatilho:active{transform:scale(.99)}
.modal-gatilho:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
.modal-gatilho-cartao{display:flex;width:100%;margin-block:var(--sp-4)}
.modal-gatilho[hidden]{display:none}
.modal-gatilho-rotulo{min-width:0}
.modal-gatilho-sugerido{border-color:color-mix(in oklab, var(--accent) 55%, var(--border));
  background:color-mix(in oklab, var(--accent) 9%, var(--surface));color:var(--accent)}
.modal-gatilho-selo{flex:none;padding:2px var(--sp-4);border-radius:var(--r-full);font-size:11.5px;
  font-weight:600;background:color-mix(in oklab, var(--warn) 16%, var(--surface));color:var(--warn)}

/* Janela: centralizada no computador; no celular vira folha que sobe da base da tela.
   Entrada e saída animadas com @starting-style + transition-behavior:allow-discrete. */
dialog.modal{width:min(640px, calc(100vw - 32px));max-width:none;max-height:min(88vh, 920px);
  padding:0;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);
  color:var(--text);box-shadow:0 24px 64px oklch(0.2 0.01 60 / .28);overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease-snap),
    overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete}
dialog.modal[open]{display:flex;flex-direction:column;opacity:1;transform:none}
@starting-style{dialog.modal[open]{opacity:0;transform:translateY(14px) scale(.985)}}
dialog.modal::backdrop{background:oklch(0.18 0.01 60 / 0);backdrop-filter:blur(0);
  transition:background var(--dur-3) var(--ease),backdrop-filter var(--dur-3) var(--ease),
    overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete}
dialog.modal[open]::backdrop{background:oklch(0.18 0.01 60 / .45);backdrop-filter:blur(3px)}
@starting-style{dialog.modal[open]::backdrop{background:oklch(0.18 0.01 60 / 0);backdrop-filter:blur(0)}}
html:has(dialog.modal[open]){overflow:hidden}
.modal-cab{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-6) var(--sp-6) var(--sp-5) var(--sp-7);
  border-bottom:1px solid var(--border)}
.modal-titulo{flex:1;min-width:0;margin:0;padding:0;border:0;font-size:17px;font-weight:700;line-height:1.3;
  text-wrap:balance}
.modal-fechar{flex:none;position:relative;width:36px;height:36px;padding:0;border:none;border-radius:var(--r-full);
  background:transparent;color:var(--text2);cursor:pointer;transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.modal-fechar::before,.modal-fechar::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;
  border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.modal-fechar::after{transform:translate(-50%,-50%) rotate(-45deg)}
.modal-fechar:hover{background:var(--surface2);color:var(--text)}
.modal-fechar:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
.modal-corpo{overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-6) var(--sp-7) var(--sp-7);
  display:grid;gap:var(--sp-5);align-content:start}
.modal-corpo>.dentro{padding:0}
.modal-corpo::-webkit-scrollbar{width:10px}
.modal-corpo::-webkit-scrollbar-thumb{background-color:color-mix(in oklab, var(--text3) 45%, transparent);
  border:3px solid transparent;background-clip:padding-box;border-radius:var(--r-full)}
@supports not selector(::-webkit-scrollbar){.modal-corpo{scrollbar-width:thin}}
/* Seletores estilizáveis (out/2026): filtros da lista de problemas e formulários das janelas.
   appearance:base-select (Chrome/Edge 135+) mantém o <select> nativo — teclado, leitor de tela,
   validação e envio — com painel nas cores do tema, opção marcada em destaque e abertura animada.
   Firefox e Safari ficam com a lista nativa, já no esquema de cores do tema. */
@supports (appearance:base-select){
  :is(.filtro-pilula, dialog.modal) select,
  :is(.filtro-pilula, dialog.modal) select::picker(select){appearance:base-select}
  dialog.modal select{display:flex;align-items:center;gap:var(--sp-4);text-align:left;cursor:pointer}
  dialog.modal select:open{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent)}
  /* Opção vazia ("Escolha…") ainda selecionada: texto apagado, como um campo sem preencher. */
  dialog.modal select:has(option[value=""]:checked){color:var(--text3)}
  dialog.modal select::picker-icon{content:"";flex:none;width:6px;height:6px;margin-inline-start:auto;margin-top:-4px;
    border-right:1.6px solid var(--text2);border-bottom:1.6px solid var(--text2);transform:rotate(45deg);
    transition:transform var(--dur-2) var(--ease),margin-top var(--dur-2) var(--ease)}
  dialog.modal select:open::picker-icon{transform:rotate(-135deg);margin-top:3px;border-color:var(--accent)}
  :is(.filtro-pilula, dialog.modal) select::picker(select){position-area:block-end span-inline-end;
    position-try-fallbacks:flip-block;margin-block:6px;min-width:anchor-size(width);max-height:min(340px, 50vh);
    padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text);
    box-shadow:0 12px 32px oklch(0.2 0.01 60 / .18),0 2px 6px oklch(0.2 0.01 60 / .08);overflow-y:auto;
    opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;
    transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-snap),
      overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete}
  :is(.filtro-pilula, dialog.modal) select:open::picker(select){opacity:1;transform:none}
  @starting-style{:is(.filtro-pilula, dialog.modal) select:open::picker(select){opacity:0;transform:translateY(-6px) scale(.98)}}
  :is(.filtro-pilula, dialog.modal) option{display:flex;align-items:center;gap:var(--sp-4);min-height:38px;padding:var(--sp-3) var(--sp-5);
    border-radius:var(--r-md);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;
    transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
  :is(.filtro-pilula, dialog.modal) option:hover,
  :is(.filtro-pilula, dialog.modal) option:focus-visible{background:var(--surface2);outline:none}
  :is(.filtro-pilula, dialog.modal) option:checked{background:color-mix(in oklab, var(--accent) 12%, var(--surface));color:var(--accent);font-weight:700}
  :is(.filtro-pilula, dialog.modal) option:checked:hover{background:color-mix(in oklab, var(--accent) 18%, var(--surface))}
  dialog.modal option[value=""]:not(:checked){color:var(--text3)}
  /* Em campo obrigatório, "Escolha…" é só o texto inicial: não aparece como opção na lista aberta. */
  dialog.modal select[required] option[value=""]{display:none}
  :is(.filtro-pilula, dialog.modal) option:disabled{color:var(--text3);cursor:not-allowed;background:none}
  :is(.filtro-pilula, dialog.modal) option::checkmark{order:1;margin-inline-start:auto;content:"";flex:none;width:5px;height:10px;margin-top:-3px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
}
@media (max-width:600px){
  dialog.modal{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-bottom:none;transform:translateY(100%)}
  dialog.modal[open]{transform:none}
  @starting-style{dialog.modal[open]{transform:translateY(100%)}}
  .modal-corpo{padding:var(--sp-5) var(--sp-6) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px))}
  .modal-cab{padding-inline:var(--sp-6) var(--sp-5)}
}
.grupo-dono{margin-bottom:var(--sp-6)}
.grupo-dono h3{font-size:14.5px;margin:0;padding:var(--sp-4) var(--sp-5);background:var(--surface2);
  border-radius:var(--r-lg) var(--r-lg) 0 0;border:1px solid var(--border);border-bottom:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4)}
.texto-acao{flex:1;min-width:200px}
.texto-acao .de{color:var(--text2);font-size:12px}
pre{white-space:pre-wrap;word-break:break-word;font-size:12.5px;background:var(--surface2);
  border-radius:var(--r-sm);padding:var(--sp-4);overflow-x:auto}
@media (max-width:420px){ .linha .hora{min-width:88px} h1{font-size:19px} }

/* placar de entrega por pessoa */
.tabela-placar { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.88rem; }
.tabela-placar td:first-child, .tabela-placar th:first-child { position: sticky; left: 0; background: var(--surface); }
.tabela-placar th, .tabela-placar td { padding: var(--sp-3) var(--sp-4); text-align: center; border-bottom: 1px solid var(--border); }
.tabela-placar th { color: var(--text2); font-weight: 600; }
.dossie-dl { margin: 0; } .dossie-dl dt { font-weight: 600; margin-top: var(--sp-4); }
.dossie-dl dd { margin: var(--sp-1) 0 var(--sp-1) var(--sp-5); } .dossie-ul { margin: var(--sp-1) 0 var(--sp-1) var(--sp-6); }

/* ── mobile (review 28/ago): gerente no celular é usuário de 1ª classe ──
   .abas virava tabs com scroll horizontal aqui; removido na Fase 1 (02/set) junto com
   .abas/.topo — a navegação estreita agora é a gaveta do painel-lateral (ver bloco acima). */
@media (max-width:480px){
  form.inline-acao{flex-direction:column;align-items:stretch}
  form.inline-acao input,form.inline-acao button{width:100%;max-width:none}
  form.inline-acao button+button{margin-top:var(--sp-2)}
}
@media (max-width:420px){
  .linha-reuniao{flex-direction:column;align-items:flex-start}
}
/* vence hoje: bloco de prioridade no topo de /acoes */
.vence-hoje{border:1px solid var(--danger);border-radius:var(--r-lg);margin-bottom:var(--sp-6);
  background:var(--crit-bg)}
.vence-hoje>h3{margin:0;padding:var(--sp-4) var(--sp-5);font-size:14.5px;color:var(--danger)}
.vence-hoje .linha{background:var(--surface);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* Mesa integrada: a identidade do CEO acompanha o encontro. O portal do time
   mantém os tokens Opere; os controles de preparação são comuns aos dois. */
:root[data-experiencia="ceo"]{
  --canvas:#eef2f2;--surface:#ffffff;--surface2:#e4ebec;--surface3:#d8e2e3;
  --border:#cfdadb;--border2:#82868e;--text:#152528;--text2:#4d6468;--text3:#52696e;
  --accent:#0e5a6b;--accent-hi:#0b4a58;--on-accent:#ffffff;
  --accent-weak:#0e5a6b14;--accent-ring:#0e5a6b;--warn:#96590a;--danger:#b3261e;--ok:#177a48;
  --fonte-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --alvo-toque:44px;--casca-topo:60px;
}
@media(prefers-color-scheme:dark){
  :root[data-experiencia="ceo"]:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#0f191c;--surface:#152428;--surface2:#223438;--surface3:#2b4147;
    --border:#405155;--border2:#7b828b;--text:#e3edee;--text2:#b7c9cc;--text3:#a8bfc3;
    --accent:#4fb8ce;--accent-hi:#72c9dc;--on-accent:#062229;
    --accent-weak:#4fb8ce18;--accent-ring:#4fb8ce;--warn:#e2a648;--danger:#f0736c;--ok:#4cc283;
  }
}
:root[data-experiencia="ceo"][data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0f191c;--surface:#152428;--surface2:#223438;--surface3:#2b4147;
  --border:#405155;--border2:#7b828b;--text:#e3edee;--text2:#b7c9cc;--text3:#a8bfc3;
  --accent:#4fb8ce;--accent-hi:#72c9dc;--on-accent:#062229;
  --accent-weak:#4fb8ce18;--accent-ring:#4fb8ce;--warn:#e2a648;--danger:#f0736c;--ok:#4cc283;
}
[data-experiencia="ceo"] .cab-casca{background:var(--canvas)}
[data-experiencia="ceo"] .cab-casca-sep,[data-experiencia="ceo"] .cab-casca-secao{display:none}
[data-experiencia="ceo"] .casca-acao{min-width:44px;min-height:44px}
.casca-voltar{display:inline-flex;align-items:center;min-height:44px;padding:10px 4px;white-space:nowrap;flex:none;font-size:14px;text-decoration:none}
.casca-voltar:hover{text-decoration:underline}
[data-experiencia="ceo"] .conteudo{padding:24px;max-width:1080px}
[data-experiencia="ceo"] h1{font-size:clamp(24px,3vw,34px);letter-spacing:-.035em;line-height:1.15}
[data-experiencia="ceo"] input,[data-experiencia="ceo"] select,[data-experiencia="ceo"] textarea{font-size:16px}
.preparo-pagina{max-width:900px;margin:0 auto}
.preparo-caminho{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;margin:0 0 12px}
.preparo-caminho a{display:inline-flex;align-items:center;min-height:44px}
.preparo-titulo{max-width:760px;line-height:1.2}
.preparo-tempo{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:18px 0 22px}
.preparo-tempo>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-size:14px;list-style:none}
.preparo-tempo>summary::-webkit-details-marker{display:none}
.preparo-tempo>summary span{color:var(--accent);font-size:13px}
.preparo-tempo>summary span:after{content:' +';font-size:18px}
.preparo-tempo[open]>summary span:after{content:' −'}
.preparo-tempo-conteudo{padding:0 0 16px;max-width:600px;font-size:14px;color:var(--text2)}
.preparo-tempo form{margin-top:12px}
.preparo-pagina h2{font-size:18px;letter-spacing:-.015em;border:0;margin:24px 0 12px}
.preparo-assunto{padding:24px;margin-bottom:18px;border-radius:10px;box-shadow:none}
.preparo-assunto h3{font-size:21px;line-height:1.4;letter-spacing:-.02em;margin:6px 0 14px;overflow-wrap:anywhere}
.preparo-indice{font:600 12px/1.4 var(--mono);color:var(--accent);margin:0}
.preparo-assunto .bloco{box-shadow:none;margin:12px 0;border-radius:6px}
.preparo-assunto details>summary{min-height:44px;cursor:pointer}
.preparo-pagina button,.preparo-pagina input:not([type="checkbox"]),.preparo-pagina select,.preparo-pagina .opcao-lote{min-height:44px}
.preparo-pagina input:not([type="checkbox"]),.preparo-pagina select,.preparo-pagina textarea{font-size:16px}
@media(max-width:760px){
  [data-experiencia="ceo"] .conteudo{padding:16px}
  .preparo-caminho{margin-bottom:8px;font-size:12px}
  .preparo-tempo{margin:14px 0 18px}
  .preparo-assunto{padding:18px 16px}
  .preparo-assunto h3{font-size:19px}
  .preparo-titulo{font-size:25px!important}
}

/* Ajuda de entrada: caminhos nativos, acessíveis também sem JavaScript. */
.login-ajuda { margin-top: 1.5rem; text-align: left; }
.login-ajuda details { border-top: 1px solid var(--border); padding: .25rem 0; }
.login-ajuda summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.login-ajuda p { line-height: 1.5; overflow-wrap: anywhere; }
.login-ajuda .botao { min-height: 44px; }
.login-ajuda summary::after { content: '+'; margin-left: auto; padding-left: .5rem; }
.login-ajuda details[open] > summary::after { content: '−'; }