:root{
  --berry:#1D6FB8; --berry-dark:#123C63; --berry-soft:#E4EFFB;
  --bg:#F5F4F7; --card:#FFFFFF; --ink:#241B20; --muted:#6A6072; --line:#E7E3EA;
  /* ONDA7 (axe-core, color-contrast): --muted era #7C7280 (~4,59:1 sobre branco, abaixo do
     4,5:1 exigido pra texto normal em algumas leituras reais do navegador — achado P0 na tela
     de login). #6A6072 mede ~5,94:1, com folga. */
  --ok:#2F7D46; --ok-soft:#E3F1E8;
  --late:#C13438; --late-soft:#F9E5E5;
  --pend:#9A93A1; --pend-soft:#EEECF1;
  --warn:#C77E14; --warn-soft:#F8EEDB;
  --block:#8E44AD; --block-soft:#F1E6F7;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45;
}
h1,h2,h3,.brand,.tab-label,button.primary{font-family:'Archivo',sans-serif}

/* ---------- header ---------- */
header{
  background:var(--berry-dark); color:#fff;
  padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.brand{font-weight:800; font-size:22px; letter-spacing:.5px; min-width:0}
.brand small{font-weight:500; font-size:11px; opacity:.75; display:block; letter-spacing:.3px; margin-top:-2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#hdr-date{font-size:12px; opacity:.85; text-align:right; text-transform:capitalize}
#hdr-off{display:none; font-size:11px; font-weight:700; background:var(--warn); color:#fff; border-radius:99px; padding:2px 9px; margin-right:10px}
/* ONDA7-L2 (item 3, cabeçalho móvel): marca/subtítulo, saldo, busca e data competiam pelo
   mesmo espaço em telas estreitas (achado da matriz de viewport). Hierarquia decidida:
   marca > saldo (se houver) > busca sempre visíveis; subtítulo e data cedem espaço primeiro
   porque são informação secundária (o subtítulo já repete o que o <title> diz; a data também
   aparece no resumo do dia). Nada some em telas >=420px — é comportamento só de tela muito
   estreita, não perda de informação em uso normal. */
.hdr-vc-pill{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:13px;
  background:rgba(255,255,255,.14); border-radius:99px; padding:3px 10px; white-space:nowrap;
}
@media (max-width:419px){
  .brand small{display:none}
  #hdr-date{display:none}
}

/* ---------- layout ---------- */
/* ONDA7-L2 (item 4, FAB sobre conteúdo): o FAB fica em bottom:calc(78px + safe-area), altura
   56px — ou seja, ocupa a faixa de 78px a 134px acima do fundo da tela. O padding-bottom
   anterior (90px) cobria só até 90px: os últimos 44px do FAB ficavam sobre o topo do último
   card ao rolar até o fim (medido/comprovado com Chrome headless em evidencias_onda7\L2, tela
   "Eu" com todas as seções abertas — o card final ficava embaixo do botão). 100px de folga
   depois do FAB inteiro (134px) garante que a última linha de qualquer tela nunca fica sob o
   botão, em qualquer view — não é um ajuste local de uma tela só. */
main{max-width:640px; margin:0 auto; padding:14px 14px calc(134px + env(safe-area-inset-bottom) + 24px)}
main.wide{max-width:1100px}
.view{display:none} .view.active{display:block}
h2{font-size:17px; font-weight:700; margin:14px 2px 8px}
.h-row{display:flex; align-items:center; justify-content:space-between; margin:14px 2px 8px}
.h-row h2{margin:0}
.empty{color:var(--muted); text-align:center; padding:26px 10px; font-size:14px}

/* ---------- cards e itens ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px}
.task{display:flex; gap:12px; align-items:flex-start; cursor:pointer}
.task .chk{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  border:2px solid var(--pend); background:var(--card); font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:transparent;
}
.task.done .chk{background:var(--ok); border-color:var(--ok); color:#fff}
.task.late .chk{border-color:var(--late)}
.task.block .chk{border-color:var(--block)}
.task .body{flex:1; min-width:0}
.task .title{font-weight:600}
.task.done .title{text-decoration:line-through; color:var(--muted)}
.task .sub{font-size:12.5px; color:var(--muted); margin-top:2px}
.badge{display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; margin-right:6px}
.b-late{background:var(--late-soft); color:var(--late)}
.b-ok{background:var(--ok-soft); color:var(--ok)}
/* ONDA8 (axe-core, color-contrast): a cor era GRAVADA (#6d6675), calibrada só pro --pend-soft
   claro dos outros temas — nas telas com muita gente/projeto o badge "neutro" aparece dezenas ou
   centenas de vezes por tela (cada card de projeto/checklist/relatório tem 1+), então o mesmo
   bug hardcoded vira uma penca de nós na varredura. var(--muted) já é o token "texto discreto,
   ainda legível" calibrado por tema (mesmo objetivo do rótulo "pendente/neutro" do badge) —
   troca pra ele em vez de outro valor fixo, do mesmo jeito que as badges irmãs (.b-berry/.b-block)
   já usam var(--COR) em vez de valor cravado. */
.b-pend{background:var(--pend-soft); color:var(--muted)}
.b-warn{background:var(--warn-soft); color:var(--warn)}
.b-berry{background:var(--berry-soft); color:var(--berry)}
.b-block{background:var(--block-soft); color:var(--block)}
.time-pill{font-family:'Archivo';font-weight:700; font-size:13px; color:var(--berry); min-width:46px}

/* ---------- botões ---------- */
/* ONDA7-L2 (item 6, axe-core color-contrast): botão sem classe própria (ex.: #sem-hoje) caía no
   preto padrão do navegador (UA stylesheet, "buttontext") em vez de herdar --ink — nos temas
   claro isso por acaso ficava legível (fundo branco), mas em escuro/v5 (fundo escuro) virava
   texto preto sobre fundo escuro, quase ilegível. Achado real do axe-core rodando pós-login com
   Docker de pé (evidencias_onda7\L2\relatorio_l2.log) — pré-existia no tema escuro, só nunca
   tinha sido escaneado (a suíte de axe só alcançava a tela de login antes desta leva). */
button{font:inherit; cursor:pointer; color:inherit}
button.primary{
  background:var(--berry); color:#fff; border:none; border-radius:12px;
  padding:12px 18px; font-weight:700; font-size:15px; width:100%;
}
button.primary:active{background:var(--berry-dark)}
button.ghost{background:transparent; border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--ink); font-size:13px}
/* ONDA LOJA (15/08/2026): botão bloqueado tinha a MESMA aparência do liberado — a pessoa clicava
   sem entender por que nada acontecia (achado da prova visual). Vale para todo botão do app. */
button[disabled], button:disabled{opacity:.45; cursor:not-allowed}
button.danger{background:transparent; border:1px solid var(--late); color:var(--late); border-radius:10px; padding:8px 12px; font-size:13px}
.fab{
  position:fixed; right:16px; bottom:calc(78px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--berry); color:#fff; font-size:26px; line-height:1;
  box-shadow:0 6px 16px rgba(78,23,48,.35); z-index:25;
}
.icon-btn{background:none;border:none;font-size:16px;padding:4px 6px;color:var(--muted)}

/* ---------- segment / filtros ---------- */
.seg{display:flex; background:var(--pend-soft); border-radius:10px; padding:3px; margin:4px 0 12px}
.seg button{flex:1; border:none; background:transparent; padding:8px; border-radius:8px; font-weight:600; font-size:13px; color:var(--muted)}
.seg button.on{background:var(--card); color:var(--berry); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.filtros{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.filtros select{width:auto; flex:1; min-width:110px; padding:8px 10px; font-size:13px}

/* ---------- semana (cockpit) ---------- */
/* no celular a semana empilha e rola pra baixo (como o Google Agenda).
   Antes eram 7 colunas de 190px lado a lado: obrigava a arrastar pros lados. */
.week{display:flex; flex-direction:column; gap:8px; padding-bottom:8px}
.wday{flex:none; width:100%; background:var(--pend-soft); border-radius:12px; padding:8px}
.wday.today{outline:2px solid var(--berry)}
.wday h4{font-size:12.5px; font-weight:700; text-transform:capitalize; color:var(--muted); padding:2px 4px 8px; display:flex; justify-content:space-between}
.wday .card{padding:8px 10px; margin-bottom:6px}
.wday .task .title{font-size:13px}
.wday .task .sub{font-size:11px}
.wday .task .chk{width:24px;height:24px;font-size:12px}
.wsec{font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--muted); margin:8px 4px 4px}
@media (min-width:1000px){ .week{display:grid; grid-template-columns:repeat(7,1fr); overflow:visible} .wday{flex:none} }
/* dia sem nada não precisa de um bloco alto no celular */
@media (max-width:999px){ .wday:not(.today) .wsec{margin-top:4px} .wday h4{padding-bottom:4px} }

/* ---------- agenda ---------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin:6px 2px 10px}
.cal-head h2{margin:0; text-transform:capitalize}
.cal-nav{display:flex; gap:6px}
.cal-nav button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:16px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-dow{font-size:11px; font-weight:700; color:var(--muted); text-align:center; padding:4px 0; text-transform:uppercase}
.cal-cell{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  min-height:52px; padding:5px 4px; font-size:12.5px; position:relative; cursor:pointer;
}
/* 16/08/2026 — era .35 e REPROVOU no teste de contraste (axe-core, tela "agenda", 6 dias):
   o número do dia ficava em 2.07:1, quase invisível. Com .7 mede 5.42:1 e continua claramente
   mais apagado que os dias do mês atual. Não é regressão do tema novo: valia para qualquer tema. */
.cal-cell.out{opacity:.7}
.cal-cell.today{border-color:var(--berry); border-width:2px}
.cal-cell .n{font-weight:600}
.dots{display:flex; gap:3px; flex-wrap:wrap; margin-top:4px}
.dot{width:7px;height:7px;border-radius:50%}
.dot.ok{background:var(--ok)} .dot.late{background:var(--late)} .dot.pend{background:var(--pend)} .dot.block{background:var(--block)}
.dot.more{width:auto;height:auto;font-size:9px;color:var(--muted);line-height:1}

/* ---------- controle geral (R20 — ONDA8-L2): grade pessoas × dias ---------- */
.ctrl-tabela{border-collapse:collapse; width:100%; font-size:12.5px}
.ctrl-tabela th, .ctrl-tabela td{border:1px solid var(--line); padding:6px 8px; text-align:center; white-space:nowrap}
.ctrl-tabela th{background:var(--card); position:sticky; top:0}
.ctrl-tabela td.pessoa{text-align:left; font-weight:600; position:sticky; left:0; background:var(--card)}
.ctrl-tabela td.cel{cursor:pointer}
.ctrl-tabela td.cel.ok{background:var(--ok-soft)}
.ctrl-tabela td.cel.late{background:var(--late-soft)}
.ctrl-tabela td.cel.block{background:var(--block-soft)}
.ctrl-tabela td.cel.pend{background:var(--pend-soft)}
.ctrl-tabela td.cel.vazio{color:var(--muted)}

/* ---------- metas / projetos ---------- */
.meta-card .top{display:flex; justify-content:space-between; gap:8px; align-items:flex-start}
.meta-card .title{font-weight:700; font-size:15px}
.meta-card .sub{font-size:12.5px; color:var(--muted); margin-top:3px}
.progress{height:7px; background:var(--pend-soft); border-radius:99px; margin-top:8px; overflow:hidden}
.progress i{display:block; height:100%; background:var(--berry); border-radius:99px}
.progress.ok i{background:var(--ok)}
.progress-label{font-size:11.5px; color:var(--muted); margin-top:3px}
.health{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle}
.health.g{background:var(--ok)} .health.y{background:var(--warn)} .health.r{background:var(--late)}

/* ---------- dashboard ---------- */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px}
.stat .n{font-family:'Archivo'; font-weight:800; font-size:26px}
.stat .l{font-size:12px; color:var(--muted); margin-top:2px}
.stat.bad .n{color:var(--late)} .stat.good .n{color:var(--ok)} .stat.warn .n{color:var(--warn)}
.rank{font-size:13.5px}
.rank div{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line)}
.rank div:last-child{border-bottom:none}
.rank b.bad{color:var(--late)}

/* ---------- sheets (modais) ---------- */
.sheet-bg{position:fixed; inset:0; background:rgba(36,27,32,.45); z-index:40; display:none}
.sheet-bg.open{display:block}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41; display:none;
  background:var(--bg); border-radius:20px 20px 0 0; max-height:92vh; overflow-y:auto;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  max-width:640px; margin:0 auto;
}
.sheet.open{display:block}
.sheet .grab{width:42px;height:4px;background:var(--line);border-radius:99px;margin:6px auto 12px}
.sheet h3{font-size:17px; margin-bottom:12px}
label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:12px 0 4px}
input,select,textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font:inherit; background:var(--card); color:var(--ink);
}
textarea{min-height:64px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--berry); border-color:var(--berry)}
/* ONDA7 (item 7 do contrato): :focus-visible genérico — só aparece em navegação por teclado
   (não em clique de mouse), cobre qualquer elemento tornado focável (cards com tabindex,
   botões, links) que ainda não tinha contorno de foco próprio. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.sheet:focus-visible{
  outline:2px solid var(--berry); outline-offset:2px;
}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:var(--card); border-radius:99px; padding:7px 12px; font-size:13px; cursor:pointer}
.chip.on{background:var(--berry); color:#fff; border-color:var(--berry)}
.check-list{background:var(--card); border:1px solid var(--line); border-radius:10px; max-height:180px; overflow-y:auto}
.check-list label{display:flex; gap:10px; align-items:center; margin:0; padding:10px 12px; font-size:14px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line)}
.check-list label:last-child{border-bottom:none}
.check-list input{width:18px;height:18px}
.inline-check{display:flex; align-items:center; gap:9px; margin-top:14px; font-size:14px; font-weight:500; color:var(--ink)}
.inline-check input{width:19px;height:19px}
.form-err{color:var(--late); font-size:13px; margin-top:10px; display:none}
.chk-editor .item{display:flex; gap:6px; align-items:center; margin-top:6px}
.chk-editor .item input{flex:1}
.det-chk label{display:flex; gap:10px; align-items:center; margin:0; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:500; color:var(--ink)}
.det-chk input{width:19px; height:19px; flex:0 0 auto}
.det-chk .quem{font-size:11px; color:var(--muted); margin-left:auto}
.ev-item{padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.ev-item .who{font-size:11px; color:var(--muted)}

/* ---------- nav inferior ---------- */
nav{
  position:fixed; left:180px; right:0; bottom:0; z-index:30;
  background:var(--card); border-top:1px solid var(--line);
  display:flex; padding-bottom:env(safe-area-inset-bottom);
}
nav button{
  flex:1; border:none; background:none; padding:9px 0 7px;
  display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted);
}
nav button .ic{font-size:19px; line-height:1}
nav button .tab-label{font-size:10.5px; font-weight:600}
nav button.on{color:var(--berry)}

/* ---------- menu hambúrguer (só no celular; no desktop a lateral fica fixa) ---------- */
#btn-menu{
  display:none; background:none; border:none; color:#fff;
  font-size:22px; line-height:1; padding:2px 4px; cursor:pointer;
}
#menu-fundo{ display:none }

/* ---------- sidebar lateral ---------- */
.sidenav{
  position:fixed; left:0; top:0; bottom:0; width:180px; z-index:25;
  background:var(--card); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px; padding:18px 10px; overflow-y:auto;
}
.sidenav .brand{color:var(--berry-dark); padding:0 8px 16px}
.sidenav button{
  display:flex; align-items:center; gap:10px; border:none; background:none; cursor:pointer;
  padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600; color:var(--muted); text-align:left;
}
.sidenav button.on{background:var(--berry-soft); color:var(--berry-dark)}
.sidenav button .ic{font-size:17px}
header, main{ margin-left:180px }
@media (max-width:700px){
  /* no celular a lateral vira gaveta: fica escondida e entra deslizando pelo ☰.
     Antes era uma faixa de ícones de 60px, sempre ali, comendo a largura da tela. */
  .sidenav{
    width:250px; padding:18px 10px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:2px 0 16px rgba(0,0,0,.18);
  }
  .sidenav.aberta{ transform:translateX(0) }
  .sidenav .brand{ display:block; font-size:26px }
  .sidenav button .label{ display:inline }
  .sidenav button{ justify-content:flex-start; padding:12px }
  header, main{ margin-left:0 }
  nav{ left:0 }
  #btn-menu{ display:block }
  #menu-fundo{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:24 }
  #menu-fundo.aberta{ display:block }

  /* no celular sobram ~390px: 2 e 3 colunas fixas espremiam tudo (dashboard e relatórios) */
  .row2, .row3{ grid-template-columns:1fr }
  .dash-grid{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px }
  .stat{ padding:10px }
  .stat .n{ font-size:22px }
  .filtros{ flex-wrap:wrap }
  .filtros select{ min-width:0; flex:1 1 46% }
  main{ padding-left:10px; padding-right:10px }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
}
nav .nbadge{
  position:absolute; margin-left:22px; margin-top:-2px;
  background:var(--late); color:#fff; font-size:10px; font-weight:700;
  border-radius:99px; padding:1px 5px; display:none;
}
.sidenav .sbadge{
  background:var(--berry); color:#fff; font-size:10px; font-weight:700;
  border-radius:99px; padding:1px 6px; margin-left:auto; display:none;
}

/* ---------- login ---------- */
#screen-login,#screen-senha{max-width:400px; margin:0 auto; padding:12vh 24px 40px; display:none}
#screen-login.active,#screen-senha.active{display:block}
#screen-login .brand,#screen-senha .brand{color:var(--berry-dark); font-size:40px; text-align:center}
#screen-login .brand small,#screen-senha .brand small{color:var(--muted); font-size:12px; opacity:1}
/* ONDA7 (axe-core, color-contrast): a regra genérica ".brand small{opacity:.75}" (linha 75,
   pensada pro logo pequeno da barra lateral) diluía --muted até ~3,24:1 aqui na tela de login,
   onde o texto é bem maior e é a única explicação do produto — opacity:1 restaura o contraste
   medido (~5,9:1) sem mudar a cor visível na barra lateral (regra de lá continua intacta). */
#screen-login form,#screen-senha form{margin-top:26px}
/* 15/08/2026 — "olhinho" para conferir a senha digitada (pedido do Pedro). Fica DENTRO do campo,
   encostado à direita; o input ganha espaço à direita para o texto nunca passar por baixo dele. */
.campo-senha{position:relative}
.campo-senha input{padding-right:46px !important; width:100%}
.campo-senha .ver-senha{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; line-height:1; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:8px; cursor:pointer;
  font-size:17px; opacity:.65
}
.campo-senha .ver-senha:hover{opacity:1; background:var(--berry-soft, rgba(0,0,0,.05))}
.campo-senha .ver-senha:focus-visible{outline:2px solid var(--berry); outline-offset:2px; opacity:1}
.campo-senha .ver-senha[aria-pressed="true"]{opacity:1}
#screen-login .swap{margin-top:16px; text-align:center; font-size:13.5px; color:var(--muted)}
#screen-login .swap a{color:var(--berry); font-weight:600; cursor:pointer}

/* ---------- setup overlay ---------- */
#setup-overlay{position:fixed; inset:0; background:var(--bg); z-index:99; padding:60px 26px; display:none}
#setup-overlay h1{color:var(--berry-dark); font-size:26px; margin-bottom:12px}
#setup-overlay code{background:var(--card); border:1px solid var(--line); padding:2px 6px; border-radius:6px; font-size:13px}
#setup-overlay p{margin-bottom:10px; color:#4a4450}

.notif{border-left:4px solid var(--berry)}
.notif.unread{background:var(--berry-soft)}
.notif .when{font-size:11px; color:var(--muted); margin-top:4px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* ---------- ONDA7 (UX-O6-01): avisos não bloqueantes (substitui alert() de falha) ---------- */
#avisos-app{position:fixed;left:0;right:0;bottom:0;z-index:999;display:flex;flex-direction:column;gap:6px;padding:10px;pointer-events:none}
.aviso-banner{pointer-events:auto;max-width:520px;margin:0 auto;width:100%;box-sizing:border-box;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.4;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.aviso-banner.erro{background:var(--late-soft,#341C1D);color:var(--late,#B3261E);border:1px solid var(--late,#B3261E)}
.aviso-banner.info{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.aviso-banner .aviso-msg{flex:1;white-space:pre-line}
.aviso-banner .aviso-fechar{background:transparent;border:0;font-size:16px;line-height:1;cursor:pointer;color:inherit;padding:2px 4px}
.aviso-banner .aviso-fechar:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media print{
  .sidenav,nav,header,.fab,.no-print,.sheet,.sheet-bg{display:none!important}
  header,main{margin-left:0}
  main{max-width:100%;padding:0}
  body{background:var(--card)}
  .card,.stat{break-inside:avoid;border-color:#bbb}
}

/* ---------- tema escuro ---------- */
html[data-tema="escuro"]{
  --bg:#141217; --card:#1E1B23; --ink:#ECE8EF; --muted:#9A93A1; --line:#332F3A;
  --berry:#5AA7EA; --berry-soft:#17293E; --ok-soft:#14291B; --late-soft:#341C1D;
  --pend-soft:#252230; --warn-soft:#2F2517; --block-soft:#281B30;
}
@media (prefers-color-scheme: dark){
  /* 15/08: 'v6' entrou na lista de exclusão pelo mesmo motivo do 'v5' — o v6 é um tema CLARO
     escolhido de propósito; sem esta exclusão, quem tem o Windows no modo escuro receberia as
     variáveis escuras por cima e o tema novo nunca apareceria (regressão silenciosa). */
  html:not([data-tema="claro"]):not([data-tema="v5"]):not([data-tema="v6"]){
    --bg:#141217; --card:#1E1B23; --ink:#ECE8EF; --muted:#9A93A1; --line:#332F3A;
    --berry:#5AA7EA; --berry-soft:#17293E; --ok-soft:#14291B; --late-soft:#341C1D;
    --pend-soft:#252230; --warn-soft:#2F2517; --block-soft:#281B30;
  }
}

/* ---------- ONDA7-L2 — tema "v5" (Noturno Gamificado, D1) ----------
   Reimplementado por leitura da proposta de 02/08 (não é patch/cópia — ALG-05). Como o app
   inteiro já é desenhado sobre variáveis CSS (--bg/--card/--ink/--berry/...), o reskin inteiro
   é feito SÓ trocando as variáveis + adicionando o dourado como cor de destaque — nenhuma regra
   de layout muda, então isto não pode quebrar nada que já funciona nos outros temas (é a mesma
   prova de equivalência estrutural que os outros componentes já usam). */
html[data-tema="v5"]{
  --bg:#0F1220; --card:#181C2E; --ink:#F1EDE4; --muted:#A79FC7; --line:#2C2A46;
  --berry:#D9A441; --berry-dark:#151833; --berry-soft:#2A2411;
  --ok:#4CC386; --ok-soft:#123324;
  --late:#E2696B; --late-soft:#3A1D22;
  --pend:#7A7396; --pend-soft:#211F38;
  --warn:#E2A93B; --warn-soft:#3A2C10;
  --block:#B98BE0; --block-soft:#2A1F3D;
}
html[data-tema="v5"] header{ background:linear-gradient(180deg,#171A30,#0F1220); border-bottom:1px solid #2C2A46 }
html[data-tema="v5"] button.primary{ color:#171326 }
html[data-tema="v5"] .fab{ box-shadow:0 6px 18px rgba(217,164,65,.45) }
/* --berry-dark é usado nos outros temas tanto como FUNDO com texto branco (header, cards de
   destaque) quanto como TEXTO sobre fundo claro (marca da tela de login, sidenav, setup) — os
   dois usos convivem porque --bg é claro nos outros temas. No v5 --bg é escuro, então
   --berry-dark(#151833) como TEXTO sobre --bg(#0F1220) ficava quase invisível — achado real do
   axe-core (color-contrast) ao rodar `npm test` com v5 como tema padrão. Corrigido trocando só
   os 3 lugares que usam --berry-dark como texto para --berry (dourado, alto contraste sobre
   fundo escuro); os usos como FUNDO (header/cards) continuam funcionando sem mudança. */
html[data-tema="v5"] .sidenav .brand,
html[data-tema="v5"] #screen-login .brand,
html[data-tema="v5"] #screen-senha .brand,
html[data-tema="v5"] #setup-overlay h1{ color:var(--berry) }
/* ONDA8 (axe-core em TODAS as jornadas, não só login): achados reais rodando com v5 como tema
   padrão contra uma sessão logada de verdade (as telas acima nunca tinham sido varridas). Mesma
   classe de bug do bloco anterior — algo pensado pro fundo CLARO dos outros temas ficou ilegível
   no fundo ESCURO do v5, só que em lugares que aquela correção não cobria: */
/* (a) ".sidenav button.on" ainda usava --berry-dark como texto (a 4ª ocorrência que a correção
   anterior não pegou — ela listou 3 lugares, este é filho do mesmo padrão). */
html[data-tema="v5"] .sidenav button.on{ color:var(--berry) }
/* (b) ".chip.on" põe texto branco sobre --berry — em v5 --berry é o dourado #D9A441, não o azul
   #1D6FB8 dos outros temas, e branco sobre dourado não passa AA (mesmo motivo de button.primary,
   2 linhas acima — reaproveita a mesma cor de texto escura). */
html[data-tema="v5"] .chip.on{ color:#171326 }
/* (c) ".cal-cell.out" apaga o dia fora do mês com opacity:.35 — calibrado pro --ink quase-preto
   dos outros temas sobre fundo branco. Em v5 o --ink é quase-branco sobre fundo quase-preto: a
   mesma opacidade de 35% deixa o texto ilegível (luminância do texto cai rápido demais quando o
   fundo já é escuro). Sobe só em v5, sem mexer no visual calibrado dos outros 3 temas. */
html[data-tema="v5"] .cal-cell.out{ opacity:.6 }
/* ".b-pend" (cor de texto gravada, não theme-aware) foi corrigido pra valer nos 4 temas de uma
   vez — ver o comentário ao lado da regra `.b-pend` no topo deste arquivo — porque a 1ª tentativa
   de corrigir só em v5 (usar var(--pend) como as badges irmãs) MEDIU abaixo de 4,5:1 mesmo assim
   (achado real ao rodar contra telas com muitos badges, ex. "rel" com 458 nós): --pend em si é
   deliberadamente uma cor "neutra" pouco saturada, sem contraste suficiente sobre --pend-soft no
   v5 escuro. var(--muted) (mais clara no v5, ~6,4:1 medido) resolve nos 4 temas ao mesmo tempo. */
/* ---------- 15/08/2026 — tema "v6" (Vila Gamificado, claro) ----------
   Ordem do Pedro: padronizar nos 3 apps (MIM, Dashboard, Fichas Técnicas) o layout que ele
   escolheu em `Downloads\ESTILOS_4_VERSOES_VILAMORE.html` → **VERSÃO 3 — GAMIFICADO**
   ("a cara do MIM: joguinho que informa"). Fonte da paleta, lida do próprio arquivo (bloco .v3):
     fundo #fdfdfc · texto #1f2a44 · secundário #667 · cartão #fff com borda 2px #e8ecf4 e raio 16
     azul #2a78d6 (gradiente até #1e5aa8) · verde #1baf7a (→#0e8a5f) · laranja #eb6834 (→#c74e1e)
   Mesma técnica do v5: só troca de variáveis + poucas regras de forma; nenhuma regra de layout
   estrutural muda, então não afeta os outros temas.
   Desvio deliberado da fonte, por CONTRASTE (o app tem teste axe-core, o mock do relatório não):
   - texto branco sobre #2a78d6 mede ~3,9:1 (abaixo de 4,5:1). Por isso --berry é o tom escuro do
     próprio gradiente da V3 (#1E5AA8, ~6,4:1) e o #2a78d6 fica como acento/gradiente decorativo.
   - --muted #667 (#666677) passa raspando; uso #5C6478, mesma família, com folga.
   - vermelho e roxo não existem na V3, mas o app precisa deles (atrasada/bloqueada): mantidos do
     tema claro, só reaproximados da paleta. */
html[data-tema="v6"]{
  --bg:#FDFDFC; --card:#FFFFFF; --ink:#1F2A44; --muted:#5C6478; --line:#E8ECF4;
  --berry:#1E5AA8; --berry-dark:#123C63; --berry-soft:#E8F1FC;
  /* 16/08/2026 — o verde era #0E8A5F e REPROVOU no teste de contraste real (axe-core com o banco
     de pé, tela "financeiro"): 4.36:1 contra o branco do cartão, abaixo do mínimo de 4.5:1 para
     texto normal. Aparecia nos valores "entrou" e "sobrou" (18px negrito — pouco abaixo do
     tamanho que a regra considera "texto grande"). #0B7A53 mede 5.35:1 e é praticamente o mesmo
     verde a olho nu. Erro meu, da leva do tema v6. */
  --ok:#0B7A53; --ok-soft:#E3F6EE;
  --late:#C13438; --late-soft:#F9E5E5;
  --pend:#6B7280; --pend-soft:#EEF1F6;
  --warn:#C74E1E; --warn-soft:#FDECE4;
  --block:#8E44AD; --block-soft:#F1E6F7;
  --radius:16px;
}
/* forma: cartão branco com borda de 2px (na V3 a separação vem da borda, não de sombra) */
html[data-tema="v6"] .card{ border:2px solid var(--line); box-shadow:none }
/* o degradê do cabeçalho começava no #2A78D6; texto branco pequeno em cima dele mede ~3,9:1 e
   reprova (o título passaria por ser grande, mas o subtítulo/rótulos não). Degradê agora anda
   entre os dois tons ESCUROS do mesmo azul — mesma cara, leitura garantida (#1E5AA8 = 6,4:1). */
html[data-tema="v6"] header{ background:linear-gradient(135deg,#1E5AA8,#123C63); border-bottom:none }
html[data-tema="v6"] .fab{ box-shadow:0 6px 18px rgba(42,120,214,.35) }
/* barra de progresso/meta: gradiente azul→verde, a assinatura visual da V3 */
html[data-tema="v6"] .metabar i,
html[data-tema="v6"] .progresso i,
html[data-tema="v6"] .bar > i{ background:linear-gradient(90deg,#2A78D6,#1BAF7A) }
/* o toast de celebração nasceu com as cores do v5 cravadas (fundo quase-preto + dourado); no
   claro do v6 ele vira o azul da V3 com texto branco (7,0:1 medido em #1E5AA8). */
html[data-tema="v6"] .v5-celebra-host{
  background:#1E5AA8; color:#FFFFFF; border-color:#2A78D6;
  box-shadow:0 8px 24px rgba(30,90,168,.28);
}

/* celebração ao concluir (item 1) — CSS puro, sem lib externa; some sozinha via setTimeout no JS */
.v5-celebra-host{
  position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:9999; background:#181C2E; color:#F1EDE4; border:1px solid #D9A441;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:14px;
  padding:8px 16px; border-radius:99px; box-shadow:0 8px 24px rgba(0,0,0,.35);
  animation:v5-celebra-in .25s ease-out, v5-celebra-out .3s ease-in 1.3s forwards;
}
@keyframes v5-celebra-in{ from{opacity:0; transform:translateX(-50%) translateY(10px)} to{opacity:1; transform:translateX(-50%) translateY(0)} }
@keyframes v5-celebra-out{ to{opacity:0; transform:translateX(-50%) translateY(-6px)} }
@media (prefers-reduced-motion: reduce){ .v5-celebra-host{ animation:none } }

/* 16/08/2026 — título principal de cada tela: invisível aos olhos, lido pelo leitor de tela.
   Fecha a violação "page-has-heading-one" que o axe-core apontou em TODAS as telas internas.
   Não usar display:none nem visibility:hidden — isso o esconderia também do leitor de tela. */
.titulo-tela{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}