/* =============================================================================
   efg.app.br — FOLHA ÚNICA. Consome tokens.css; não define cor, fonte nem duração.
   Ver /DESIGN.md. App novo usa estas classes; se faltar componente, ele entra
   AQUI — nunca num <style> dentro de template. (Foi o que gerou 5 paletas
   divergentes e um design system desligado.)
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box }

body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);
     font-size:var(--text-base);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--ls-tight);margin:0;
         font-weight:var(--fw-display);line-height:var(--lh-tight)}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-md);margin:var(--space-8) 0 var(--space-3)}
h3{font-size:var(--text-lg)}
p{margin:0 0 var(--space-3)}
a{color:var(--accent);text-decoration:none}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-6) 0}

.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
           font-feature-settings:var(--nums-tabular)}
.sub{color:var(--ink-2);margin:0 0 var(--space-5);font-size:var(--text-sm)}
.mut{color:var(--muted)} .ink2{color:var(--ink-2)}
.bom{color:var(--success)} .ruim{color:var(--danger)}
.aten{color:var(--warning)} .ac{color:var(--accent)}
.cresce{flex:1}

/* --- ENTRADA: uma vez, ao carregar --------------------------------------- */
@keyframes surgir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sobe{animation:surgir var(--dur-3) var(--ease) both}
.d1{animation-delay:.05s}.d2{animation-delay:.10s}.d3{animation-delay:.15s}
.d4{animation-delay:.20s}.d5{animation-delay:.25s}.d6{animation-delay:.30s}

/* =============================================================================
   RESPOSTA AO CLIQUE — ondulação a partir do ponto tocado
   -----------------------------------------------------------------------------
   Nasce EXATAMENTE onde o dedo/cursor tocou (o JS grava --x/--y), e não no meio
   do botão. É o que separa "a tela reagiu ao meu clique" de "a tela piscou":
   a origem confirma que o navegador registrou o toque naquele ponto, o que é a
   dúvida real de quem clica e não vê nada acontecer.

   `pointer-events:none` para a ondulação nunca engolir o clique seguinte.
   ============================================================================= */
.onda{position:absolute;border-radius:var(--radius-full);pointer-events:none;
      transform:translate(-50%,-50%) scale(0);background:var(--onda);
      left:var(--x);top:var(--y);width:var(--d);height:var(--d);
      animation:ondular var(--dur-onda) var(--ease) forwards}
@keyframes ondular{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
/* Sobre preenchimento escuro (botão primário) a ondulação precisa ser clara. */
.btn.forte .onda,.modal .btn.forte .onda{background:var(--onda-forte)}
/* Quem hospeda ondulação precisa recortar e posicionar. */
.btn,.modo,.app,.kpi{position:relative;overflow:hidden}

/* =============================================================================
   RESPOSTA AO PONTEIRO — clarão que segue o cursor
   -----------------------------------------------------------------------------
   Um brilho muito discreto (5,5%) centrado na posição do mouse dentro do cartão.
   Some quando o ponteiro sai. Serve de orientação periférica quando há seis
   cartões iguais lado a lado: o olho sabe onde está sem ler nada.
   ============================================================================= */
.kpi::after,.app::after,.anel-cx::after{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:0;transition:opacity var(--dur-2) var(--ease);
  background:radial-gradient(220px circle at var(--px,50%) var(--py,50%),
                             var(--facho),transparent 62%)}
.kpi:hover::after,.app:hover::after,.anel-cx:hover::after{opacity:1}
.anel-cx{position:relative;overflow:hidden}

/* =============================================================================
   CASCA — topbar, main
   ============================================================================= */
.topo{background:var(--surface);border-bottom:1px solid var(--border);
      position:sticky;top:0;z-index:var(--z-sticky)}
.topo .dentro{max-width:var(--conteudo-max);margin:0 auto;
              padding:var(--space-3) var(--conteudo-pad);display:flex;align-items:center;
              gap:var(--space-3);flex-wrap:wrap;min-height:var(--topbar-h)}
.marca{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);
       font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);color:var(--ink);
       font-size:var(--text-md)}
.marca .mk{width:var(--marca-tam);height:var(--marca-tam);border-radius:var(--radius);
           background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
           font-family:var(--font-display);font-weight:700;font-size:14px;flex:none;
           transition:transform var(--dur-2) var(--ease)}
.marca:hover .mk{transform:scale(1.06)}
.trilha{color:var(--muted);font-size:var(--text-sm)}
.trilha a{position:relative;color:var(--accent)}
.trilha a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
                 background:currentColor;transform:scaleX(0);transform-origin:left;
                 transition:transform var(--dur-2) var(--ease)}
.trilha a:hover::after{transform:scaleX(1)}
.quem{margin-left:auto;text-align:right;line-height:1.25;font-size:var(--text-sm);
      color:var(--ink-2)}
.quem b{display:block;color:var(--ink);font-weight:var(--fw-semibold)}
.papel{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
       letter-spacing:var(--ls-wide);color:var(--muted)}
main{max-width:var(--conteudo-max);margin:0 auto;
     padding:var(--space-7) var(--conteudo-pad) var(--space-16)}

/* =============================================================================
   BOTÕES — sem brilho; peso, sombra e um passo de 1px ao pressionar
   ============================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
     font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);
     padding:var(--btn-pad);min-height:var(--btn-h);border-radius:var(--radius);
     cursor:pointer;border:1px solid var(--contorno);background:var(--surface);
     color:var(--ink);text-decoration:none;
     transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
                color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease)}
.btn:hover{background:var(--surface-2);border-color:var(--ink-2);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--anel-foco)}
.btn.forte{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
           box-shadow:var(--sombra-1)}
.btn.forte:hover{background:var(--accent-hover);border-color:var(--accent-hover);
                 color:var(--accent-ink);box-shadow:var(--sombra-2)}
/* Destrutivo NUNCA é vermelho em repouso: "Fechar folha" é irreversível. */
.btn.grave:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-weak)}
.btn.mini{min-height:auto;padding:5px 10px;font-size:var(--text-xs)}
.btn[disabled],.btn.desligado{opacity:.5;cursor:not-allowed;pointer-events:none}
.acoes{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-5)}

/* =============================================================================
   CARTÕES E INDICADORES
   ============================================================================= */
.cartao{background:var(--surface);border:1px solid var(--border);
        border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--sombra-1)}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--kpi-min),1fr));
       gap:var(--space-3);margin:var(--space-5) 0}

.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
     padding:var(--space-4);box-shadow:var(--sombra-1);position:relative;overflow:hidden;
     transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--border-strong)}
.kpi .v{font-family:var(--font-mono);font-size:var(--text-2xl);display:block;
        font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight);
        line-height:1.15;color:var(--dc,var(--ink))}
.kpi .r{font-size:var(--text-sm);color:var(--ink-2);margin-top:3px}
.kpi .n{display:block;font-size:9px;letter-spacing:var(--ls-wide);text-transform:uppercase;
        color:var(--muted);margin-top:3px;font-family:var(--font-mono)}
.kpi.bom{--dc:var(--success)} .kpi.ruim{--dc:var(--danger)} .kpi.aten{--dc:var(--warning)}

/* --- sparkline: cinza em repouso, cor sob o cursor ----------------------- */
.faisca{display:block;width:100%;height:var(--faisca-h);margin-top:var(--space-2);
        overflow:visible}
.faisca .ln{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;
            stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;
            animation:tracar var(--dur-5) var(--ease) .25s forwards;
            transition:stroke var(--dur-2) var(--ease)}
.faisca circle{fill:var(--muted);opacity:0;animation:aparecer .4s ease .95s forwards;
               transition:fill var(--dur-2) var(--ease)}
.kpi:hover .faisca .ln{stroke:var(--dc,var(--accent))}
.kpi:hover .faisca circle{fill:var(--dc,var(--accent))}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}

/* --- medidor -------------------------------------------------------------- */
.medidor{height:var(--medidor-h);border-radius:var(--radius-full);background:var(--surface-3);
         overflow:hidden;margin-top:var(--space-3)}
.medidor>i{display:block;height:100%;border-radius:var(--radius-full);width:0;
           background:var(--dc,var(--accent));
           animation:encher var(--dur-5) var(--ease) .3s forwards}
@keyframes encher{to{width:var(--v,0%)}}

/* --- anel de conferência -------------------------------------------------- */
.anel{width:var(--anel-tam);height:var(--anel-tam);flex:none}
.anel circle{fill:none;stroke-width:var(--anel-traco)}
.anel .base{stroke:var(--surface-3)}
.anel .val{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:170;
           stroke-dashoffset:170;transform:rotate(-90deg);transform-origin:50% 50%;
           animation:anelar var(--dur-6) var(--ease) .35s forwards}
@keyframes anelar{to{stroke-dashoffset:var(--off,170)}}
.anel-txt{font-family:var(--font-mono);font-size:13px;fill:var(--ink-2);
          text-anchor:middle;dominant-baseline:central}
.anel-cx{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);
         border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);
         box-shadow:var(--sombra-1);
         transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.anel-cx:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.anel-cx .gr{font-family:var(--font-mono);font-size:var(--text-lg);display:block;
             font-variant-numeric:tabular-nums;color:var(--ink)}
.anel-cx .r{font-size:var(--text-xs);color:var(--muted);line-height:1.35;display:block}

/* =============================================================================
   TABELA
   ============================================================================= */
.quadro{background:var(--surface);border:1px solid var(--border);
        border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sombra-1)}
.quadro .qhead{display:flex;align-items:center;gap:var(--space-3);
               padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
.quadro .qhead .ct{color:var(--muted);font-size:var(--text-sm)}
.rolar{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
thead th{text-align:left;padding:9px 12px;font-family:var(--font-mono);font-size:9px;
         letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);
         font-weight:var(--fw-medium);border-bottom:1px solid var(--border);
         background:var(--surface-2);white-space:nowrap}
tbody td{padding:var(--celula-pad);border-bottom:1px solid var(--border);
         transition:background var(--dur-1) var(--ease)}
tbody tr:hover td{background:var(--surface-2)}
td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
       white-space:nowrap}
td.ruim{color:var(--danger)}
/* Linha de grupo (prestador). O colspan TEM de fechar todas as colunas do thead. */
tr.grupo td{background:var(--surface-2);font-weight:var(--fw-semibold);
            border-bottom:1px solid var(--border-strong)}
tr.grupo .esp{font-weight:var(--fw-regular);color:var(--ink-2)}
tr.total td{background:var(--surface-2);font-weight:var(--fw-semibold);
            border-top:1px solid var(--border-strong);border-bottom:none}
.pt{width:8px;padding-right:0}
.pt i{display:block;width:6px;height:6px;border-radius:var(--radius-sm);background:var(--warning)}
.pt.ruim i{background:var(--danger)}
/* Barra de margem: informa o sinal sem obrigar a ler o número. */
.barra{display:inline-block;width:38px;height:3px;border-radius:var(--radius-full);
       background:var(--surface-3);vertical-align:middle;margin-right:var(--space-2);
       overflow:hidden;position:relative}
.barra>i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--radius-full);
         background:var(--success);animation:encher var(--dur-5) var(--ease) .4s forwards}
.barra.ruim>i{background:var(--danger)}
/* Ação da linha: existe, mas só aparece sob o cursor. */
.acao{opacity:0;transform:translateX(-4px);color:var(--muted);font-size:var(--text-xs);
      transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),
                 color var(--dur-1) var(--ease)}
tbody tr:hover .acao{opacity:1;transform:none}
.acao:hover{color:var(--danger)}

/* =============================================================================
   SELOS, AVISOS, VAZIO
   ============================================================================= */
.selo{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;
      padding:2px 9px;border-radius:var(--radius-full);text-transform:uppercase;
      letter-spacing:var(--ls-wide);border:1px solid var(--contorno);
      color:var(--ink-2);background:var(--surface-2)}
.selo.bom{color:var(--success);background:var(--success-weak);border-color:transparent}
.selo.aten{color:var(--warning);background:var(--warning-weak);border-color:var(--warning-borda)}
.selo.ruim{color:var(--danger);background:var(--danger-weak);border-color:transparent}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:var(--fw-semibold);
     padding:1px 9px;border-radius:var(--radius-full);line-height:1.7;border:1px solid transparent}
.tag.via{color:var(--accent-2);background:var(--accent-2-weak);border-color:var(--accent-2-borda)}
.tag.direto{color:var(--success);background:var(--success-weak)}

.aviso{display:flex;gap:var(--space-3);background:var(--warning-weak);
       border:1px solid var(--warning-borda);border-left-width:var(--rib-width);
       border-radius:var(--radius);padding:11px 15px;margin:0 0 var(--space-5);
       font-size:var(--text-sm)}
.aviso b{color:var(--warning)}
.aviso.grave{background:var(--danger-weak);border-color:var(--danger)}
.aviso.grave b{color:var(--danger)}
.erro{background:var(--danger-weak);border:1px solid var(--danger);color:var(--danger);
      padding:10px 13px;border-radius:var(--radius);font-size:var(--text-sm);
      margin-bottom:var(--space-5)}
.vazio{color:var(--muted);padding:var(--space-10);text-align:center;
       border:1px dashed var(--border-strong);border-radius:var(--radius-lg)}

/* =============================================================================
   FORMULÁRIO
   ============================================================================= */
label{display:block;font-size:var(--text-sm);font-weight:var(--fw-medium);
      margin:0 0 6px;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=month],input[type=date],input[type=search],select,textarea,.entrada{
  width:100%;font:inherit;font-size:var(--text-base);padding:var(--campo-pad);
  min-height:var(--campo-h);border-radius:var(--radius);border:1px solid var(--contorno);
  background:var(--surface-3);color:var(--ink);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus,.entrada:focus{outline:none;border-color:var(--accent);
  box-shadow:var(--anel-foco);background:var(--surface)}
.campo{margin-bottom:var(--space-4)}
.campo.curto{max-width:220px}
input[type=checkbox],input[type=radio]{width:15px;height:15px;min-height:auto;
  accent-color:var(--accent);margin:0;cursor:pointer}

/* --- senha com olhinho ---------------------------------------------------- */
.senha{position:relative}
.senha input{padding-right:44px}
.olho{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;
      display:grid;place-items:center;border:none;background:none;cursor:pointer;
      color:var(--muted);border-radius:var(--radius-sm);
      transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.olho:hover{color:var(--ink);background:var(--surface-2)}
.olho:focus-visible{outline:none;box-shadow:var(--anel-foco)}
.olho svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
          stroke-linecap:round;stroke-linejoin:round}
.olho .risco{stroke-dasharray:26;stroke-dashoffset:26;
             transition:stroke-dashoffset 220ms var(--ease)}
.olho.ver .risco{stroke-dashoffset:0}
.dica{margin:6px 0 0;font-size:var(--text-xs);color:var(--muted)}
.dica b{color:var(--ink-2);font-weight:var(--fw-medium)}
.linha-aux{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
           margin:0 0 var(--space-5);font-size:var(--text-sm)}
.lembrar{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;color:var(--ink-2);
         font-weight:var(--fw-regular);margin:0;
         transition:color var(--dur-2) var(--ease)}
.lembrar:hover{color:var(--ink)}
.elo{color:var(--accent);position:relative}
.elo::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
            background:currentColor;transform:scaleX(0);transform-origin:left;
            transition:transform var(--dur-2) var(--ease)}
.elo:hover::after{transform:scaleX(1)}

/* --- busca com sugestões (autocomplete) ---------------------------------- */
.busca{position:relative}
.sugestoes{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:var(--z-dropdown);
           background:var(--surface);border:1px solid var(--border);
           border-radius:var(--radius);box-shadow:var(--sombra-2);max-height:260px;
           overflow-y:auto}
.sugestoes:empty{display:none}
.sugestoes>div{padding:8px 12px;cursor:pointer;font-size:var(--text-sm);
               transition:background var(--dur-1) var(--ease)}
.sugestoes>div:hover,.sugestoes>div.marcado{background:var(--surface-2)}
.sugestoes .det{color:var(--muted);font-size:var(--text-xs)}

/* =============================================================================
   SELETOR DE MODO (A · Grade / B · Compositor / C · Por prestador)
   ============================================================================= */
.modos{display:flex;gap:var(--space-2);margin-bottom:var(--space-5);flex-wrap:wrap}
.modo{flex:1;min-width:180px;max-width:236px;text-align:left;padding:11px 15px;
      border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);
      cursor:pointer;position:relative;overflow:hidden;color:inherit;text-decoration:none;
      display:block;font:inherit;
      transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.modo:hover{border-color:var(--border-strong);background:var(--surface-2);text-decoration:none}
.modo b{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.modo i{font-style:normal;font-size:var(--text-xs);color:var(--muted)}
.modo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
             background:var(--accent);transform:scaleX(0);transform-origin:left;
             transition:transform 240ms var(--ease)}
.modo.ativo{border-color:var(--border-strong);background:var(--surface-2)}
.modo.ativo::after{transform:scaleX(1)}
.modo.ativo b{color:var(--accent)}

/* =============================================================================
   HUB — cartões de aplicativo
   ============================================================================= */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
      gap:var(--space-4);margin-top:var(--space-6)}
.app{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
     padding:var(--space-6);display:block;color:inherit;box-shadow:var(--sombra-1);
     transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease)}
.app:hover{border-color:var(--border-strong);transform:translateY(-2px);
           box-shadow:var(--sombra-2);text-decoration:none}
.app .ico{font-size:28px;line-height:1;margin-bottom:var(--space-3)}
.app .nome{font-family:var(--font-display);font-size:var(--text-lg);
           font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);margin-bottom:5px}
.app .desc{font-size:var(--text-sm);color:var(--ink-2);line-height:1.5}

/* =============================================================================
   TELA DE ENTRAR / TROCAR SENHA
   ============================================================================= */
body.entrar{display:grid;place-items:center;min-height:100vh;background:var(--surface-2)}
body.entrar main{width:100%;max-width:392px;padding:var(--space-6);margin:0}
.caixa{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
       padding:var(--space-8);box-shadow:var(--sombra-3);
       animation:surgir 450ms var(--ease) both}
.caixa .mk{width:40px;height:40px;border-radius:var(--radius);background:var(--accent);
           color:var(--accent-ink);display:grid;place-items:center;
           font-family:var(--font-display);font-weight:700;font-size:18px;
           margin-bottom:var(--space-5)}
.caixa h1{font-size:var(--text-xl);margin-bottom:4px}
.caixa .sub{font-size:var(--text-sm);margin-bottom:var(--space-6)}
.caixa .btn{width:100%;padding:12px;font-size:var(--text-base)}
.rodape{text-align:center;margin-top:var(--space-5);font-family:var(--font-mono);
        font-size:10px;letter-spacing:var(--ls-mono);color:var(--muted);text-transform:uppercase}
/* Lista de regras da senha. Sem o recuo padrão do navegador (40px) e com marca
   própria: o bullet do user-agent puxava o bloco para a direita e quebrava o
   alinhamento com os campos logo abaixo. */
.regras{list-style:none;font-size:var(--text-xs);color:var(--muted);
        margin:0 0 var(--space-5);padding:0}
.regras li{position:relative;padding-left:16px;margin-bottom:3px}
.regras li::before{content:"";position:absolute;left:3px;top:.55em;width:4px;height:4px;
                   border-radius:var(--radius-full);background:var(--border-strong)}

/* =============================================================================
   UTILITÁRIOS — classes geradas para eliminar style= nos templates
   -----------------------------------------------------------------------------
   Regra do ecossistema: nenhum style= em template. Quando precisar de um token
   avulso, ele entra aqui como classe — nunca inline.
   ============================================================================= */
/* Subtítulo do bloco de turno no painel (h2 > span) */
.kpi-turno-sub{font-size:var(--text-sm);font-weight:var(--fw-regular);color:var(--ink-2)}
/* Rótulo de unidade ao lado do valor (dentro de .kpi .v) */
.kpi-unidade{font-size:var(--text-sm);font-weight:var(--fw-regular)}
/* Bloco de cobertura dentro de .kpi.

   São TRÊS frações desde a migração 008 — nome reconhecido, quantidade
   conhecida, e a interseção das duas ("virou número"). Empilhadas, com o
   rótulo à esquerda e o valor à direita, para ficarem comparáveis de relance:
   o buraco aparece na linha em que o número cai. */
.kpi-cobertura{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.cob-linha{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cob-rot{color:var(--ink-3,var(--ink-2));text-transform:none;letter-spacing:0}
/* A fração que manda no status ganha peso — as outras duas explicam-na. */
.cob-forte{border-top:1px solid var(--border);margin-top:3px;padding-top:3px;font-weight:var(--fw-medium,600)}

/* Diagnóstico: quantos itens faltam e para onde ir resolver. Indicador sem
   caminho de ação é enfeite. */
.kpi-diagnostico{margin-top:7px;text-transform:none;letter-spacing:0;line-height:1.5}
.kpi-diagnostico a{font-weight:var(--fw-medium,600)}

/* A norma que fundamenta a meta, sempre visível: valor do PAT sem fonte não
   entra, e fonte que só existe no banco não cumpre a regra. */
.kpi-norma{margin-top:7px;text-transform:none;letter-spacing:0;color:var(--ink-3,var(--ink-2));
  font-size:10px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Cartão cuja base não está completa: o número não merece cor de status. */
.kpi.conf-sem_base .v{opacity:.55;text-decoration:line-through;text-decoration-thickness:1px}
/* Espaçamento superior genérico de 1 step (space-8) */
.mt-8{margin-top:var(--space-8)}

/* =============================================================================
   MOVIMENTO REDUZIDO — congela no VALOR FINAL, nunca em zero.
   (tokens.css zera as durações; aqui fixamos o estado terminal de cada
   elemento que "revela" valor, senão sparkline e medidor mentiriam.)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .faisca .ln{stroke-dashoffset:0}
  .faisca circle{opacity:1}
  .medidor>i,.barra>i{width:var(--v,0%)}
  .anel .val{stroke-dashoffset:var(--off,170)}
  .acao{opacity:1;transform:none}
  .sobe{animation:none;opacity:1;transform:none}
}


/* =============================================================================
   FITA DE DIAS — a navegação do ciclo (migração 009)

   Um ciclo de 15 ou 30 dias não cabe numa aba nem num <select> sem esconder a
   informação que mais importa: QUAIS dias estão vazios. Cada dia mostra quantos
   pratos tem, e o vazio fica visualmente rebaixado — assim a lacuna aparece de
   relance, em vez de exigir clicar em trinta dias para descobrir.
   ============================================================================= */
.fita-dias{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-5) 0}
.fita-dias .dia{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:46px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);text-decoration:none;color:var(--ink);line-height:1.2;
  transition:border-color 140ms var(--ease),transform 140ms var(--ease)}
.fita-dias .dia:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.fita-dias .dia .dia-n{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600}
.fita-dias .dia .dia-q{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.fita-dias .dia.atual{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* Dia sem prato nenhum: presente, mas claramente por preencher. */
.fita-dias .dia.vazio{opacity:.55;border-style:dashed}

/* Formulário de uma linha só (adicionar prato ao dia, copiar dia). */
.forma-linha{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:var(--space-4) 0}
.forma-linha select{max-width:420px}
.forma-linha label{margin:0}


/* Barra de fatia — quanto de um total um item representa.
   A diferença entre 8% e 62% se vê antes de se ler; o número fica ao lado
   porque a barra sozinha não permite conferência. */
.fatia{display:inline-block;width:44px;height:5px;border-radius:3px;
  background:var(--border);vertical-align:middle;margin-right:6px;overflow:hidden}
.fatia>i{display:block;height:100%;width:var(--v,0%);background:var(--accent);border-radius:3px}


/* =============================================================================
   IMPRESSÃO — o cardápio vai para a parede da cozinha

   Cardápio impresso é o formato em que ele de fato circula: fica pregado no
   refeitório, vai para a reunião, entra no processo. Sem esta folha, a impressão
   sai com a navegação, os botões e o formulário de edição no meio — e três
   páginas em vez de uma.
   ============================================================================= */
@media print {
  /* Papel branco e tinta preta: economiza toner e sobrevive ao fax. */
  :root{--bg:#fff;--surface:#fff;--ink:#000;--ink-2:#333;--border:#999}
  body{background:#fff;color:#000}
  .topo,.acoes,.forma-linha,.fita-dias,form,button,.btn{display:none !important}
  /* O aviso de "soma sem dia" NÃO some: a ressalva tem de ir junto com o
     número, principalmente no papel, que circula sem quem o explique. */
  .aviso{display:block !important;border:1px solid #999;padding:8px}
  main{padding:0}
  .quadro,.cartao,.kpi{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .rolar{overflow:visible}
  table{font-size:10pt}
  thead{display:table-header-group}  /* repete o cabeçalho a cada página */
  tr{break-inside:avoid}
  h1{font-size:16pt} h2{font-size:12pt;break-after:avoid}
  .sobe{animation:none;opacity:1;transform:none}
  /* O endereço de um link não cabe na folha, mas a origem do documento sim. */
  a[href^="/"]::after{content:""}
}


/* Confirmação de ação. Discreta e no topo do conteúdo: ela responde "deu
   certo?", que é uma pergunta de um segundo — não precisa de destaque de erro,
   precisa de estar onde o olho volta depois do clique.
   `role="status"` faz o leitor de tela anunciar sem roubar o foco. */
.feito{background:var(--surface);border:1px solid var(--success,#1c6b4a);
  border-left-width:3px;border-radius:var(--radius);padding:9px 14px;
  margin:0 0 var(--space-5);font-size:var(--text-sm);color:var(--ink)}


/* "O que falta" — lista de pendências acionáveis do painel.
   Compacta de propósito: é uma lista para agir, não um relatório para ler. */
.falta{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:12px 16px;margin:0 0 var(--space-5)}
.falta-t{font:600 10px/1.4 var(--font-mono);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.falta ul{margin:0;padding:0;list-style:none}
.falta li{padding:4px 0 4px 12px;border-left:2px solid var(--border);
  font-size:var(--text-sm);line-height:1.45}
.falta li+li{margin-top:3px}
.falta li.alto{border-left-color:var(--danger,#a02020)}
.falta li.medio{border-left-color:var(--warning,#8a6100)}
.falta li b.num{font-family:var(--font-mono);margin-right:3px}


/* Cartão do painel, versão curta.
   Ele carregava três linhas de cobertura, o diagnóstico de pendências e a
   citação inteira da norma. Quem lê um painel compara números entre si, e texto
   repetido em todo cartão é ruído que esconde a diferença.

   Seletor com `.kpi` na frente por ESPECIFICIDADE: `.kpi .n` (0,2,0) vence
   `.kpi-meta` (0,1,0), e o `text-transform:none` era ignorado em silêncio — a
   meta saía "META 1200–1920KCAL", gritada. */
.kpi .kpi-meta{margin-top:5px;text-transform:none;letter-spacing:0;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px}
.kpi .kpi-cob{margin-top:7px;text-transform:none;letter-spacing:0;
  display:flex;align-items:center;gap:5px;cursor:help;font-size:11px;
  white-space:nowrap}
/* Sem valor não se risca: o traço já diz que não há número, e o risco por cima
   dele lê como "valor cancelado", que é outra coisa. */
.kpi.conf-sem_base .v{opacity:.55;text-decoration:none}
/* Sete nutrientes por turno. Com 190px o sétimo caía sozinho numa linha, e um
   cartão órfão embaixo lê como "categoria diferente" — quando é só o sódio.
   146px é o que faz sete caberem em 1128px com o gap de 14. */
.grade{grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}

/* A norma, uma vez, fechada. Meta sem fonte não entra — a regra não exige
   repetir a fonte catorze vezes na mesma tela. */
.normas{margin-top:var(--space-8);font-size:var(--text-sm);color:var(--ink-2)}
.normas summary{cursor:pointer;color:var(--accent);font-size:var(--text-sm)}
.normas ul{margin:8px 0 0;padding-left:18px;line-height:1.5}
.normas li{margin:5px 0}


/* A unidade encostava no número ("1477.4kcal"). Espaço fino: separa sem virar
   uma palavra à parte. */
.kpi .v .kpi-unidade{margin-left:.22em}

/* ===========================================================================
   CATÁLOGO DE ALIMENTOS (/taco)

   A tela deixou de ser uma fila de pendências e virou cadastro de 602
   alimentos. O que entra aqui é o que a fila não precisava: filtro, paginação,
   formulário de composição e o asterisco que separa valor publicado de valor
   derivado.
   =========================================================================== */

/* Barra de filtro. `flex-wrap` porque no celular os quatro controles não cabem
   lado a lado, e um filtro que sai da tela é um filtro que não existe. */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.filtros input[type=search]{flex:1 1 260px;min-width:0}
.filtros select{flex:0 1 240px}
.filtros .caixa{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);
  color:var(--ink-2);white-space:nowrap}
.filtros .caixa input{width:auto;margin:0}

.paginacao{display:flex;gap:10px;align-items:center;justify-content:flex-end;
  padding:10px 14px;border-top:1px solid var(--border)}

/* O asterisco do valor derivado. Pequeno e escuro o bastante para ser visto,
   discreto o bastante para não competir com o número — a distinção importa,
   mas o número é o que se lê. */
.asterisco{color:var(--accent-2);font-weight:var(--fw-medium,600);cursor:help;
  margin-left:1px}

td.fonte{white-space:nowrap}
td.acoes-linha{white-space:nowrap}

/* Caixa de cadastro/edição, fechada por padrão: a tela é de consulta, e o
   formulário só aparece para quem foi buscá-lo. */
.cadastro{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);margin:16px 0;padding:0 14px}
.cadastro>summary{cursor:pointer;padding:12px 0;font-weight:var(--fw-medium,600);
  color:var(--ink)}
.cadastro>summary:hover{color:var(--accent)}
.cadastro[open]>summary{border-bottom:1px solid var(--border);margin-bottom:12px}

.form-alimento{padding-bottom:14px}
.form-alimento label{display:block;font-size:var(--text-sm);color:var(--ink-2);
  margin-bottom:10px}
.form-alimento label.largo{width:100%}
.linha-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 12px}

/* Grade de nutrientes: dezessete campos numéricos. Em coluna única viraria um
   formulário de rolar; em grade, lê-se de relance quais estão preenchidos. */
.grade-nutrientes{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:0 12px;margin-top:6px}
.grade-nutrientes input{font-family:var(--font-mono);text-align:right}

.remover{display:flex;align-items:center;gap:10px;padding:10px 0 14px;
  border-top:1px solid var(--border)}
.btn.perigo{border-color:var(--danger);color:var(--danger)}
.btn.perigo:hover{background:var(--danger-weak)}
.btn.vazado{background:transparent}

/* ===========================================================================
   IMPRESSÃO — o que as telas NOVAS acrescentam ao bloco de impressão da linha
   472. Ele já cuida do essencial (papel branco, cabeçalho de tabela repetido,
   ação escondida); o que faltava eram os componentes que nasceram depois: a
   barra de filtro, a caixa de cadastro e a paginação, que na folha viram ruído
   entre o título e a tabela.

   A cozinha não consulta o app: ela olha a folha pregada no azulejo.
   =========================================================================== */
@media print {
  .filtros, .cadastro, .paginacao, .trilha, .acoes-linha { display: none !important; }
  /* A tabela larga é rolável na tela e tem de caber no papel. */
  .rolar table { width: 100%; table-layout: auto; }
  /* O selo perde a cor de fundo na impressão em preto e branco e vira texto
     solto; a borda devolve a distinção. */
  .selo { border: 1px solid #999; background: #fff !important; }
}

/* A esteira da semana (036): os passos numa linha, o feito apagado, o de agora
   em destaque, o que tem pendência em aviso. */
.esteira{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;
  counter-reset:passo;padding:0;margin:var(--space-3) 0}
.esteira li{counter-increment:passo;padding:var(--space-1) var(--space-3);
  border:1px solid var(--border);border-radius:999px;font-size:.9em}
.esteira li::before{content:counter(passo) " · ";color:var(--muted)}
.esteira li.feito{color:var(--success);background:var(--success-weak);border-color:transparent}
.esteira li.agora{border-color:var(--ink);font-weight:600}
.esteira li.aten{color:var(--warning);background:var(--warning-weak);border-color:var(--warning-borda)}