/* ================================================================
   Régua de Atendimento — sistema visual
   Claro por padrão, com tema escuro completo. Cores de gráfico
   validadas para daltonismo e contraste nos dois temas.
   ================================================================ */
:root{
  --fundo:#f2f6f9;
  --cartao:#ffffff;
  --cartao-2:#f8fafc;
  --borda:#e5ecf2;
  --borda-forte:#d4dee8;
  --sombra:0 1px 2px rgba(15,32,51,.04), 0 2px 6px rgba(15,32,51,.05);
  --sombra-alta:0 10px 30px rgba(15,32,51,.12);

  --tinta:#0f2033;
  --tinta-2:#56697e;
  --tinta-3:#8b9cae;

  --marca:#059669;
  --marca-forte:#047857;
  --marca-fraca:#d9f5e9;
  --sobre-marca:#ffffff;

  --sobe:#047857;
  --desce:#c2410c;

  --grave:#c2410c;   --grave-fundo:#fff1eb;  --grave-chip:#ffe4d6;
  --atencao:#b45309; --atencao-fundo:#fffaeb; --atencao-chip:#fdf0d0;
  --bom:#047857;     --bom-fundo:#ecfdf5;    --bom-chip:#d9f5e9;
  --info:#1d4ed8;    --info-chip:#dbe6fe;

  /* categóricas de gráfico (validadas: CVD + contraste) */
  --c1:#059669; --c2:#1d4ed8; --c3:#db2777; --c4:#d97706; --c5:#0891b2; --c6:#94a3b8;

  --r:14px;
  --r-s:9px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fundo:#0c1116; --cartao:#141b23; --cartao-2:#1a232c;
    --borda:#233040; --borda-forte:#2e3e50;
    --sombra:0 1px 2px rgba(0,0,0,.3); --sombra-alta:0 10px 30px rgba(0,0,0,.5);
    --tinta:#e8eef4; --tinta-2:#a2b2c3; --tinta-3:#72849a;
    --marca:#2ec08e; --marca-forte:#3fd3a0; --marca-fraca:#12312a; --sobre-marca:#06140f;
    --sobe:#3fd3a0; --desce:#f08a5d;
    --grave:#f08a5d; --grave-fundo:#2a1710; --grave-chip:#3a2117;
    --atencao:#e0a93f; --atencao-fundo:#251c0d; --atencao-chip:#332714;
    --bom:#3fd3a0; --bom-fundo:#0f2a21; --bom-chip:#16362b;
    --info:#6a9bf5; --info-chip:#16233c;
    --c1:#12a085; --c2:#4a86e8; --c3:#e35b9c; --c4:#bd8430; --c5:#1596ab; --c6:#64748b;
  }
}
:root[data-theme="dark"]{
  --fundo:#0c1116; --cartao:#141b23; --cartao-2:#1a232c;
  --borda:#233040; --borda-forte:#2e3e50;
  --sombra:0 1px 2px rgba(0,0,0,.3); --sombra-alta:0 10px 30px rgba(0,0,0,.5);
  --tinta:#e8eef4; --tinta-2:#a2b2c3; --tinta-3:#72849a;
  --marca:#2ec08e; --marca-forte:#3fd3a0; --marca-fraca:#12312a; --sobre-marca:#06140f;
  --sobe:#3fd3a0; --desce:#f08a5d;
  --grave:#f08a5d; --grave-fundo:#2a1710; --grave-chip:#3a2117;
  --atencao:#e0a93f; --atencao-fundo:#251c0d; --atencao-chip:#332714;
  --bom:#3fd3a0; --bom-fundo:#0f2a21; --bom-chip:#16362b;
  --info:#6a9bf5; --info-chip:#16233c;
  --c1:#12a085; --c2:#4a86e8; --c3:#e35b9c; --c4:#bd8430; --c5:#1596ab; --c6:#64748b;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance;font-weight:800}
h1{font-size:27px}
h2{font-size:17px;font-weight:700;letter-spacing:-.015em}
h3{font-size:14px;font-weight:700}
a{color:var(--marca)}
.num{font-variant-numeric:tabular-nums}

/* ================================================================ esqueleto */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}

.lateral{background:var(--cartao);border-right:1px solid var(--borda);
  display:flex;flex-direction:column;position:sticky;top:0;align-self:start;height:100vh;padding:20px 14px}
.marca{display:flex;align-items:center;gap:10px;padding:0 8px 22px}
.marca svg{flex:none}
.marca b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.marca span{display:block;font-size:11.5px;color:var(--tinta-3);font-weight:600}

.menu{display:flex;flex-direction:column;gap:2px;flex:1}
.menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  font:inherit;font-size:14px;font-weight:600;color:var(--tinta-2);
  background:none;border:none;padding:10px 12px;border-radius:var(--r-s);cursor:pointer}
.menu button:hover{background:var(--cartao-2);color:var(--tinta)}
.menu button[aria-selected="true"]{background:var(--marca-fraca);color:var(--marca-forte)}
.menu button:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
.menu .conta{margin-left:auto;font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:999px;
  background:var(--grave-chip);color:var(--grave)}
.menu svg{flex:none;opacity:.9}

.rodape-lateral{border:1px solid var(--borda);background:var(--cartao-2);border-radius:var(--r-s);
  padding:11px 12px;font-size:12px;color:var(--tinta-2)}
.rodape-lateral b{display:flex;align-items:center;gap:7px;color:var(--tinta);font-size:12.5px;margin-bottom:3px}
.rodape-lateral a{color:var(--tinta-3);font-size:11.5px;text-decoration:none}
.rodape-lateral a:hover{color:var(--tinta)}

.miolo{min-width:0;display:flex;flex-direction:column}
.topo{position:sticky;top:0;z-index:30;background:var(--fundo);
  border-bottom:1px solid var(--borda);display:flex;align-items:center;gap:14px;padding:14px 26px;flex-wrap:wrap}
.topo .titulo{flex:1;min-width:0}
.topo h1{font-size:22px}
.topo p{margin:2px 0 0;color:var(--tinta-2);font-size:13px}
.conteudo{padding:22px 26px 40px;display:flex;flex-direction:column;gap:20px}

/* ================================================================ peças */
.pulso{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tinta-2);white-space:nowrap}
.pulso i{width:8px;height:8px;border-radius:50%;background:var(--marca);flex:none}
.pulso.olhando i{background:var(--atencao)}
.pulso.erro i{background:var(--grave)}
@media (prefers-reduced-motion:no-preference){.pulso.olhando i{animation:bate 1s ease-in-out infinite}}
@keyframes bate{50%{opacity:.25}}

.botao{font:inherit;font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:var(--r-s);
  border:1px solid var(--marca);background:var(--marca);color:var(--sobre-marca);cursor:pointer;white-space:nowrap}
.botao:hover{background:var(--marca-forte);border-color:var(--marca-forte)}
.botao.claro{background:var(--cartao);color:var(--tinta-2);border-color:var(--borda-forte)}
.botao.claro:hover{background:var(--cartao-2);color:var(--tinta)}
.botao:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.botao[disabled]{opacity:.55;cursor:default}

.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);box-shadow:var(--sombra)}
.cartao-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--borda);flex-wrap:wrap}
.pista{font-size:12.5px;color:var(--tinta-3);font-weight:600}
.vazio{padding:26px 18px;color:var(--tinta-2);margin:0;font-size:13.5px}

/* ---- KPIs ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.kpi{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:var(--sombra);padding:16px 17px;display:grid;grid-template-columns:44px 1fr;gap:13px;align-items:start}
.kpi .chip{width:44px;height:44px;border-radius:11px;display:grid;place-items:center}
.kpi .chip svg{width:21px;height:21px}
.kpi .rot{font-size:12.5px;color:var(--tinta-2);font-weight:600;line-height:1.3}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:3px 0 5px;font-variant-numeric:tabular-nums}
.kpi .delta{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:4px}
.kpi .delta.sobe{color:var(--sobe)} .kpi .delta.desce{color:var(--desce)} .kpi .delta.igual{color:var(--tinta-3)}
.kpi .base{font-size:11.5px;color:var(--tinta-3);margin-top:2px}
.chip.verde{background:var(--bom-chip);color:var(--bom)}
.chip.vermelho{background:var(--grave-chip);color:var(--grave)}
.chip.ambar{background:var(--atencao-chip);color:var(--atencao)}
.chip.azul{background:var(--info-chip);color:var(--info)}

.duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;align-items:start}
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start}

.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-f{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid var(--borda-forte);background:var(--cartao);color:var(--tinta-2);cursor:pointer}
.chip-f[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.chip-f:hover{border-color:var(--marca)}
.chip-f:focus-visible{outline:2px solid var(--marca);outline-offset:2px}

/* ---- agenda / retomar ---- */
.tarefa{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 18px;border-bottom:1px solid var(--borda)}
.tarefa:last-child{border-bottom:none}
.tarefa:hover{background:var(--cartao-2)}
.tarefa .pos{font-size:13px;font-weight:800;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.tarefa .corpo{min-width:0}
.tarefa .acao{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px;line-height:1.3}
.tarefa .porque{display:block;font-size:12.8px;color:var(--tinta-2);line-height:1.45}
.tarefa .porque b{color:var(--tinta);font-weight:700}
.ir{font-size:12.5px;font-weight:700;color:var(--marca);text-decoration:none;
  border:1px solid var(--borda-forte);border-radius:var(--r-s);padding:7px 13px;white-space:nowrap;background:var(--cartao)}
.ir:hover{border-color:var(--marca);background:var(--marca-fraca)}
.ir:focus-visible{outline:2px solid var(--marca);outline-offset:2px}

.selo{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  padding:2px 8px;border-radius:999px;margin-right:7px;vertical-align:1px}
.selo.urgente{background:var(--grave-chip);color:var(--grave)}
.selo.atrasado{background:var(--atencao-chip);color:var(--atencao)}
.selo.QUENTE{background:var(--grave);color:#fff}
.selo.MORNO{background:var(--atencao-chip);color:var(--atencao)}
.selo.FRIO{background:var(--info-chip);color:var(--info)}

/* ---- fila ---- */
.caso{display:grid;grid-template-columns:104px minmax(0,1.05fr) minmax(0,1.4fr) auto;gap:16px;
  align-items:center;padding:13px 18px;border-bottom:1px solid var(--borda)}
.caso:last-child{border-bottom:none}
.caso:hover{background:var(--cartao-2)}
.caso .espera{font-size:15.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--atencao)}
.caso.CRITICO .espera{color:var(--grave)}
.caso .espera small{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-3)}
.caso .quem b{display:block;font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caso .quem span{font-size:12.5px;color:var(--tinta-2)}
.caso .oque{font-size:13px;color:var(--tinta-2);min-width:0}
.caso .oque b{color:var(--tinta);font-weight:700}

/* ---- tabela ---- */
.rolagem{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:720px}
th{font-size:11.5px;font-weight:700;color:var(--tinta-3);text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--borda);white-space:nowrap;background:var(--cartao-2)}
th.n,td.n{text-align:right}
td{padding:12px 14px;border-bottom:1px solid var(--borda);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--cartao-2)}
.pessoa{display:flex;align-items:center;gap:10px;white-space:nowrap}
.medalha{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;flex:none;background:var(--cartao-2);color:var(--tinta-3)}
.medalha.ouro{background:#fbe7b2;color:#8a5a00}
.medalha.prata{background:#e2e8f0;color:#475569}
.medalha.bronze{background:#f5d5bd;color:#8a4b1d}
.inicial{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--marca-fraca);color:var(--marca-forte);font-size:12px;font-weight:800}
.nota-pilula{display:inline-flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums}
.nota-pilula b{font-size:15px;font-weight:800;min-width:28px}
.nota-trilho{width:74px;height:6px;border-radius:99px;background:var(--borda);overflow:hidden}
.nota-trilho i{display:block;height:100%;border-radius:99px;background:var(--marca)}
.nota-trilho.a i{background:var(--atencao)} .nota-trilho.g i{background:var(--grave)}

/* ---- coaching / meta ---- */
.faixa{border-radius:var(--r);border:1px solid var(--borda);overflow:hidden}
.faixa.alerta{background:var(--atencao-fundo);border-color:var(--atencao-chip)}
.faixa.boa{background:var(--bom-fundo);border-color:var(--bom-chip)}
.faixa-cab{display:flex;align-items:center;gap:9px;padding:14px 17px;font-weight:800;font-size:14.5px}
.faixa.alerta .faixa-cab{color:var(--atencao)}
.faixa.boa .faixa-cab{color:var(--bom)}
.faixa-item{display:flex;align-items:center;gap:11px;padding:11px 17px;border-top:1px solid var(--borda)}
.faixa-item b{display:block;font-size:13.5px;font-weight:700}
.faixa-item span{display:block;font-size:12.3px;color:var(--tinta-2)}

/* ---- listas ---- */
.lista{padding:16px 18px;display:flex;flex-direction:column;gap:13px}
.item .linha1{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13.5px}
.item .linha1 b{font-weight:700;font-variant-numeric:tabular-nums}
.item .linha1 .q{color:var(--tinta-2);min-width:0}
.item .trilho{height:6px;border-radius:99px;background:var(--borda);overflow:hidden;margin-top:6px}
.item .trilho i{display:block;height:100%;border-radius:99px;background:var(--c1)}

.nuvem{padding:16px 18px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.palavra{background:var(--bom-fundo);color:var(--tinta);border:1px solid var(--bom-chip);
  border-radius:999px;padding:6px 14px;font-weight:600;line-height:1.2}

/* ---- gráficos ---- */
.grafico{padding:14px 16px 6px}
.gr{width:100%;height:auto;display:block;overflow:visible}
.gr .grade{stroke:var(--borda);stroke-width:1}
.gr .eixo{fill:var(--tinta-3);font-size:10.5px;font-family:"IBM Plex Mono",monospace}
.gr .eixo.forte{fill:var(--tinta-2);font-weight:600}
.gr .m1{fill:var(--c1)} .gr .m2{fill:var(--c4)}
.gr .linha{fill:none;stroke:var(--c1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gr .pt{stroke:var(--cartao);stroke-width:2}
.gr .pt.bom{fill:var(--c1)} .gr .pt.ruim{fill:var(--c4)}
.gr .meta-area{fill:var(--c1);opacity:.07}
.gr .meta-linha{stroke:var(--c1);stroke-width:1.5;stroke-dasharray:4 4;opacity:.6}
.gr .fatia{stroke:var(--cartao);stroke-width:2}
.rosca-total{fill:var(--tinta);font-size:23px;font-weight:800;text-anchor:middle}
.rosca-rot{fill:var(--tinta-3);font-size:10.5px;text-anchor:middle}
.rosca-caixa{display:grid;grid-template-columns:156px minmax(0,1fr);gap:18px;align-items:center;padding:16px 18px}
.legenda-lista{display:flex;flex-direction:column;gap:9px;font-size:13px}
.legenda-lista div{display:grid;grid-template-columns:11px 1fr auto;gap:9px;align-items:center}
.legenda-lista i{width:11px;height:11px;border-radius:3px}
.legenda-lista span{color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legenda-lista b{font-weight:700;font-variant-numeric:tabular-nums;font-size:12.5px}

.legenda{display:flex;gap:14px;font-size:12.5px;color:var(--tinta-2);align-items:center;flex-wrap:wrap}
.legenda i,.dica i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legenda i.p1,.dica i.p1{background:var(--c1)}
.legenda i.p2,.dica i.p2{background:var(--c4)}

.dica{position:fixed;z-index:60;display:none;pointer-events:none;background:var(--cartao);color:var(--tinta);
  border:1px solid var(--borda);border-radius:var(--r-s);padding:10px 13px;font-size:12.8px;line-height:1.45;
  box-shadow:var(--sombra-alta);max-width:240px}

.funil{padding:18px;display:flex;flex-direction:column;gap:15px}
.etapa-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px}
.etapa-topo .num b{font-size:16px;font-weight:800}
.etapa-topo .num small{color:var(--tinta-3);font-weight:600}
.etapa-trilho{height:10px;background:var(--borda);border-radius:99px;overflow:hidden;margin:7px 0 5px}
.etapa-trilho i{display:block;height:100%;border-radius:99px;background:var(--c1)}
.etapa-queda{font-size:12.3px;color:var(--tinta-3)}
.etapa-queda b{color:var(--desce);font-weight:700}

.resumo{padding:16px 18px;font-size:13.8px;color:var(--tinta-2)}
.resumo ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.resumo b{color:var(--tinta);font-weight:700}

/* ---- avisos ao vivo ---- */
.torrada{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px;max-width:340px}
.aviso{position:relative;background:var(--cartao);border:1px solid var(--borda);border-left:4px solid var(--atencao);
  border-radius:var(--r-s);box-shadow:var(--sombra-alta);padding:12px 36px 12px 14px;font-size:13px;
  display:flex;flex-direction:column;gap:3px}
.aviso.grave{border-left-color:var(--grave)}
.aviso>b{font-size:13.5px;font-weight:800}
.aviso span{color:var(--tinta-2)}
.aviso span b{color:var(--tinta)}
.aviso a{font-size:12.5px;font-weight:700;text-decoration:none;margin-top:3px}
.aviso .fechar{position:absolute;top:6px;right:7px;width:24px;height:24px;border:none;background:none;
  color:var(--tinta-3);font-size:17px;line-height:1;cursor:pointer;border-radius:6px}
.aviso .fechar:hover{color:var(--tinta);background:var(--cartao-2)}

.barra-baixo{display:none}

/* ---- porta de entrada ---- */
.porta{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--fundo)}
.cartao-porta{width:100%;max-width:380px;background:var(--cartao);border:1px solid var(--borda);
  border-radius:18px;box-shadow:var(--sombra-alta);padding:32px 30px;display:flex;flex-direction:column;gap:17px}
.cartao-porta .marca{padding:0 0 4px}
.cartao-porta h1{font-size:23px}
.cartao-porta label{display:flex;flex-direction:column;gap:7px;font-size:12.8px;font-weight:600;color:var(--tinta-2)}
.cartao-porta input{font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--borda-forte);
  background:var(--cartao);color:var(--tinta);border-radius:var(--r-s)}
.cartao-porta input:focus-visible{outline:2px solid var(--marca);outline-offset:1px;border-color:var(--marca)}
.cartao-porta .botao{padding:12px;font-size:15px}
.erro{margin:0;padding:11px 13px;border-radius:var(--r-s);background:var(--grave-fundo);
  color:var(--grave);font-size:13px;font-weight:600;border:1px solid var(--grave-chip)}
.dica-porta{margin:0;font-size:12.3px;color:var(--tinta-3);text-align:center}
.explica{color:var(--tinta-2);font-size:13.3px;margin:0}

/* ================================================================ celular */
@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .lateral{flex-direction:row;align-items:center;justify-content:space-between;
    padding:11px 15px;border-right:none;border-bottom:1px solid var(--borda);height:auto;position:sticky;top:0;z-index:40}
  .lateral .menu,.lateral .rodape-lateral{display:none}
  .marca{padding:0}
  .topo{padding:14px 15px 12px;gap:10px;position:static;background:var(--fundo)}
  .topo h1{font-size:20px}
  .topo p{font-size:12.5px}
  .conteudo{padding:15px 15px 92px;gap:16px}

  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{grid-template-columns:1fr;gap:9px;padding:13px 14px}
  .kpi .chip{width:34px;height:34px;border-radius:9px}
  .kpi .chip svg{width:17px;height:17px}
  .kpi .v{font-size:23px;margin:2px 0 3px}
  .kpi .rot{font-size:11.8px}
  .kpi .delta{font-size:11.8px}
  .kpi .base{font-size:10.8px}

  .duas,.tres{grid-template-columns:1fr;gap:14px}
  .cartao-cab{padding:13px 15px}
  h2{font-size:15.5px}

  .tarefa{grid-template-columns:24px minmax(0,1fr);grid-template-areas:"p c" ". i";gap:7px 11px;padding:13px 15px}
  .tarefa .pos{grid-area:p;padding-top:2px}
  .tarefa .corpo{grid-area:c}
  .tarefa .ir{grid-area:i;justify-self:start;padding:6px 13px}
  .tarefa .acao{font-size:14px}
  .tarefa .porque{font-size:12.3px}

  .caso{grid-template-columns:1fr;grid-template-areas:"e" "q" "o" "i";gap:5px;padding:13px 15px}
  .caso .espera{grid-area:e;font-size:13px;display:flex;gap:6px;align-items:baseline}
  .caso .espera small{display:inline;font-size:9.5px}
  .caso .quem{grid-area:q} .caso .oque{grid-area:o}
  .caso .ir{grid-area:i;justify-self:start;margin-top:4px}

  .rolagem{overflow:visible}
  table,thead,tbody,th,td,tr{display:block}
  thead{display:none}
  table{min-width:0}
  tbody tr{border-bottom:1px solid var(--borda);padding:13px 15px}
  tbody tr:last-child{border-bottom:none}
  td{border:none;padding:4px 0;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;font-size:13px}
  td::before{content:attr(data-r);color:var(--tinta-3);font-size:12.3px;justify-self:start}
  td.nome{display:block;padding-bottom:9px}
  td.nome::before{content:none}
  .nota-trilho{width:56px}

  .rosca-caixa{grid-template-columns:1fr;justify-items:center;gap:14px}
  .legenda-lista{width:100%}
  .grafico{padding:12px 8px 4px}
  .gr .eixo{font-size:9.5px}
  .torrada{left:12px;right:12px;bottom:78px;max-width:none}

  .barra-baixo{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--cartao);border-top:1px solid var(--borda);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .barra-baixo button{display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;
    font-size:11px;font-weight:700;color:var(--tinta-3);background:none;border:none;padding:7px 2px;
    border-radius:var(--r-s);cursor:pointer;position:relative}
  .barra-baixo button[aria-selected="true"]{color:var(--marca);background:var(--marca-fraca)}
  .barra-baixo button:focus-visible{outline:2px solid var(--marca);outline-offset:-2px}
  .barra-baixo .conta{position:absolute;top:1px;left:calc(50% + 7px);font-size:10px;font-weight:800;
    background:var(--grave);color:#fff;border-radius:999px;padding:0 5px;line-height:15px}
}
@media (max-width:330px){ .kpis{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}