:root{
  color-scheme:light;
  --bg:#fbfbfc; --card:#fff; --ink:#1b1d21; --muted:#6c727c; --line:#e3e5e9; --trilho:#e9ebef;
  --azul:#1f6fe5; --azul-claro:#e6effd; --verde:#16a34a; --vermelho:#dc2626; --ambar:#b45309; --ambar-bg:#fff7e6; --ambar-bd:#f3d9a4; --aviso-ink:#5b3a05;
  --erro-bg:#fdecec; --erro-bd:#f3b4b4; --erro-ink:#7a1414;
  --wevets:#1f6fe5; --animaniacs:#f59e0b; --outras:#8b95a3;
  --th:transparent; --hover:#f4f6f9; --sel:#e6effd; --code:#f0f3f8; --exemplo-bg:#f3f7ff; --campo-bd:#9aa8b8; --foco:#1d4ed8;
  --seg-bg:#f0f2f5; --seg-ativo:#fff; --seg-ativo-ink:#1d4ed8; --sombra:0 1px 2px rgba(15,23,42,.12);
  --chart-texto:#4a5360; --chart-grade:#e3e5e9; --faixa-barra:rgba(31,111,229,.38); --cal-faixa:#eef4ff;
  --raio:10px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1b1b1c; --card:#1b1b1c; --ink:#ececed; --muted:#8f9094; --line:#333335; --trilho:#2c2c2e;
  --azul:#2f86ff; --azul-claro:#1f2e46; --verde:#4ade80; --vermelho:#ff8a8a; --ambar:#fbbf24; --ambar-bg:#2a2210; --ambar-bd:#5c4817; --aviso-ink:#f0dcae;
  --erro-bg:#3a1a1a; --erro-bd:#7a3030; --erro-ink:#fbd0d0;
  --wevets:#2f86ff; --animaniacs:#fbbf24; --outras:#8f9bab;
  --th:transparent; --hover:#242426; --sel:#1f2e46; --code:#2a2a2d; --exemplo-bg:#212226; --campo-bd:#5b5d63; --foco:#9cc5ff;
  --seg-bg:#1b1b1c; --seg-ativo:#333336; --seg-ativo-ink:#e8f0ff; --sombra:none;
  --chart-texto:#b4b6bb; --chart-grade:#2c2c2e; --faixa-barra:rgba(47,134,255,.5); --cal-faixa:#1b2740;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.topo{background:var(--bg);border-bottom:1px solid var(--line)}
.topo-in{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;padding-top:18px;padding-bottom:8px}
.titulo{min-width:0;flex:1 1 320px}
.topo-dir{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:100%}
h1{font-size:1.3rem;font-weight:600;margin:0;line-height:1.25}
.sub{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.atualizado{margin:0;color:var(--muted);font-size:.82rem;padding:0;max-width:100%}
.tema{display:inline-flex;background:var(--seg-bg);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.tema-op{font:inherit;font-size:.85rem;min-height:34px;min-width:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.tema-op:hover{color:var(--ink)}
.tema-op[aria-pressed="true"]{background:var(--seg-ativo);color:var(--seg-ativo-ink);font-weight:600;box-shadow:var(--sombra)}
.abas{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.aba,.aba-link{font:inherit;font-size:.9rem;border:0;background:none;padding:10px 4px;margin-right:12px;min-height:44px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;text-decoration:none;display:inline-flex;align-items:center}
.aba:hover,.aba-link:hover{color:var(--ink)}
.aba[aria-current="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}
.aba-link{margin-left:auto;margin-right:0;font-size:.85rem}
main.wrap{padding-top:20px;padding-bottom:24px}
h2{font-size:1.1rem;margin:0 0 10px;line-height:1.3}
h2.sec{font-size:1.2rem;font-weight:600;margin:30px 0 12px}
h3{font-size:1.02rem;margin:0 0 8px}
h4{font-size:.98rem;margin:18px 0 6px}
.un{color:var(--muted);font-weight:400;font-size:.85rem}

/* métricas simples: número grande, rótulo, subtexto — sem caixa */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 24px;margin-bottom:10px}
.card{min-width:0}
.card .val{font-size:1.7rem;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.card .val small{font-size:.95rem;font-weight:400;color:var(--muted)}
.card .rot{color:var(--ink);font-size:.9rem;margin-top:6px}
.card .det{color:var(--muted);font-size:.88rem;margin-top:2px;overflow-wrap:anywhere}

.painel{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:14px 16px;margin-bottom:14px;min-width:0}
.caixa{border:1px solid var(--line);border-radius:var(--raio);padding:14px 16px 10px;min-width:0}
.aviso{background:var(--ambar-bg);border:1px solid var(--ambar-bd);color:var(--aviso-ink);border-radius:var(--raio);padding:10px 14px;margin:12px 0 0;overflow-wrap:anywhere;font-size:.9rem}
.aviso-erro{background:var(--erro-bg);border-color:var(--erro-bd);color:var(--erro-ink)}
.aviso strong{color:var(--ambar)}
.nota{color:var(--muted);margin:10px 0 2px;font-size:.88rem}

/* barras finas com trilho: nome | barra | "valor d · N unidades" */
.barras{display:flex;flex-direction:column}
.linha{display:grid;grid-template-columns:minmax(120px,210px) minmax(0,1fr) 150px;align-items:center;column-gap:16px;min-height:28px;padding:3px 0;color:inherit;text-decoration:none;border-radius:6px}
a.linha:hover{background:var(--hover)}
a.linha:hover .nome{color:var(--ink)}
.linha .nome{color:var(--muted);font-size:.85rem;line-height:1.25;overflow-wrap:anywhere}
.linha .trilho{height:6px;background:var(--trilho);border-radius:999px;overflow:hidden}
.linha .trilho i{display:block;height:100%;background:var(--azul);border-radius:999px;min-width:2px}
.linha .rotulo{text-align:right;font-size:.85rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.rotulo b{font-weight:600;color:var(--ink)}
.rotulo span{color:var(--muted);font-size:.8rem}
.linha.m-animaniacs .trilho i{background:var(--animaniacs)}
.linha.m-outras .trilho i{background:var(--outras)}

.chart-box{position:relative;width:100%}
.chart-linha{height:280px}
.fim-linha{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid var(--line)}
.fim-linha .fl{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:.85rem}
.fim-linha .fl+.fl{border-top:1px solid var(--line)}
.fim-linha .fl .nome{color:var(--muted);flex:1;min-width:0}
.fim-linha .fl .rotulo{margin-left:auto}
.fim-linha .sw{width:14px;height:3px;border-radius:2px;flex:none}

.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:1px solid var(--line);border-radius:var(--raio);margin:0 0 6px}
.caixa+.tabela-wrap{margin-top:14px}
.tabela-wrap:focus-visible{outline-offset:0}
.tabela{width:100%;min-width:640px;border-collapse:collapse;font-size:.85rem}
.tabela th,.tabela td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela th{background:var(--th);font-weight:700;white-space:nowrap;font-size:.8rem}
.tabela td{white-space:nowrap}
.tabela td:first-child{white-space:normal;min-width:150px}
#tabela-geral th,#tabela-resumo2 th{cursor:pointer;user-select:none}
#tabela-geral th:hover,#tabela-resumo2 th:hover{background:var(--hover)}
th[aria-sort="ascending"]::after{content:" ▲";font-size:.7em;color:var(--muted)}
th[aria-sort="descending"]::after{content:" ▼";font-size:.7em;color:var(--muted)}
.num{text-align:right !important;font-variant-numeric:tabular-nums}
.tabela tbody tr:hover{background:var(--hover)}
.tabela tbody tr.sel,.tabela tbody tr.sel:hover{background:var(--sel);box-shadow:inset 3px 0 0 var(--azul)}
.tabela tbody tr.sel td:first-child{font-weight:600}
.tabela a{color:inherit;text-decoration:none}
.tabela a:hover{text-decoration:underline}

.seletor{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.seletor label{font-weight:600;font-size:.9rem}
.seletor select{font:inherit;font-size:.9rem;min-height:40px;padding:6px 10px;border:1px solid var(--campo-bd);border-radius:8px;background:var(--card);color:var(--ink);min-width:260px;max-width:100%}
.coleta-info{color:var(--muted);font-size:.85rem}
.legenda{color:var(--muted);font-size:.82rem;margin:10px 0 2px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:2px}
.dot-wevets{background:var(--wevets)}.dot-animaniacs{background:var(--animaniacs)}.dot-outras{background:var(--outras)}
.sem-horario{margin:8px 0 0;color:var(--ambar);font-size:.88rem;overflow-wrap:anywhere}
.como{margin-top:30px}
.como h2{font-size:1.2rem;font-weight:600}
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.como article{min-width:0;overflow-wrap:anywhere;font-size:.92rem}
.como ul{padding-left:20px;margin:8px 0}
.como li{margin-bottom:6px}
.como code{background:var(--code);padding:1px 6px;border-radius:4px;font-size:.92em;overflow-wrap:anywhere}
.exemplo{background:var(--exemplo-bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0}
.exemplo div+div{margin-top:4px}
.exemplo .rot{display:inline-block;min-width:68px;font-weight:700;color:var(--azul)}
.rodape{color:var(--muted);font-size:.82rem;padding-bottom:28px}

@media (pointer:coarse){.tema-op{min-height:44px}}
@media (max-width:900px){
  .tema-op{min-height:44px}
  .duas-colunas{gap:18px}
  .topo-dir{flex-direction:row;flex-wrap:wrap;align-items:center}
  .linha{grid-template-columns:minmax(110px,170px) minmax(0,1fr) 140px;column-gap:12px}
}
/* celular: nome e "valor d · N unidades" na mesma linha, barra fina embaixo */
@media (max-width:760px){
  .duas-colunas{grid-template-columns:1fr}
  h1{font-size:1.2rem}
  .titulo{flex-basis:100%}
  .topo-dir{width:100%;flex-direction:column;align-items:stretch}
  .tema{display:flex;width:100%}
  .tema-op{flex:1;min-height:44px}
  .abas{gap:0}
  .aba{flex:1 1 auto;justify-content:center;padding:10px 10px;margin-right:0}
  .aba-link{margin-left:0;flex:1 1 100%;justify-content:center;border-top:1px solid var(--line);border-bottom:0}
  .seletor{flex-direction:column;align-items:stretch;gap:6px}
  .seletor select{min-width:0;width:100%;font-size:16px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
  .cards .card:last-child:nth-child(odd){grid-column:1/-1}
  .card .val{font-size:1.45rem}
  h2.sec{font-size:1.1rem;margin-top:26px}
  .caixa{padding:10px 12px 6px}
  .painel{padding:12px}
  .linha{grid-template-columns:minmax(0,1fr) auto;row-gap:5px;column-gap:10px;padding:7px 0}
  .linha .nome{grid-column:1;grid-row:1}
  .linha .rotulo{grid-column:2;grid-row:1;white-space:normal;text-align:right}
  .linha .trilho{grid-column:1/-1;grid-row:2}
  .chart-linha{height:240px}
  #tabela-geral th,#tabela-resumo2 th{padding:12px 10px}
  .tabela td a{display:inline-block;padding:8px 0}
}
@media (max-width:359px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .wrap{padding:0 12px}
  .tema-op{padding:0 6px}
}

/* ---------- aba Diário ---------- */
.periodo-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:16px}
.periodo-rot{font-weight:600;font-size:.9rem}
.periodo{display:flex;flex-wrap:wrap;gap:2px;background:var(--seg-bg);border:1px solid var(--line);border-radius:12px;padding:3px;max-width:100%}
.periodo-op{font:inherit;font-size:.85rem;min-height:36px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--muted);cursor:pointer}
.periodo-op:hover{color:var(--ink)}
.periodo-op[aria-pressed="true"]{background:var(--seg-ativo);color:var(--seg-ativo-ink);font-weight:600;box-shadow:var(--sombra)}
.periodo-desc{margin:0;flex:1 1 100%;color:var(--muted);font-size:.85rem}
.diario-topo{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:20px 32px;align-items:start}
.diario-topo.custom{grid-template-columns:minmax(0,1fr)}
.cals{min-width:0}
.cals-linha{display:flex;flex-wrap:wrap;gap:16px 24px}
.cal{width:294px;max-width:100%;border:1px solid var(--line);border-radius:var(--raio);padding:10px 12px 8px}
.cal-titulo{font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
.cal-cab{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.cal-mes{font-size:.95rem;font-weight:600}
.cal-nav{font:inherit;font-size:1.2rem;line-height:1;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer}
.cal-nav:hover:not(:disabled){background:var(--hover)}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-sem{text-align:center;font-size:.72rem;color:var(--muted);padding:3px 0}
.cal-dia{font:inherit;font-size:.85rem;height:38px;border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);opacity:.45;cursor:default;padding:0;position:relative;font-variant-numeric:tabular-nums}
.cal-dia.tem{opacity:1;color:var(--ink);font-weight:600;cursor:pointer}
.cal-dia.tem::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--azul)}
.cal-dia.tem:hover{background:var(--hover)}
.cal-dia.faixa{background:var(--cal-faixa)}
.cal-dia.sel,.cal-dia.sel:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.cal-dia.sel::after{background:#fff}
.cal-leg{margin:8px 0 4px;color:var(--muted);font-size:.78rem}
.cal-pt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--azul);vertical-align:middle}
.cal-off{display:inline-block;min-width:1.2em;text-align:center;opacity:.45}
.cal-faixa{display:inline-block;min-width:1.2em;text-align:center;background:var(--cal-faixa);border-radius:4px}
.cal-ultimo{font:inherit;font-size:.85rem;min-height:40px;margin-top:6px;padding:0 12px;border:1px solid var(--campo-bd);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer}
.cal-ultimo:hover{background:var(--hover)}
.informativo{min-width:0}
.sec-topo{margin-top:0}
.inf-lista{list-style:none;margin:8px 0 0;padding:0;font-size:.92rem}
.inf-lista li{padding:6px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.inf-lista li:first-child{border-top:0}
.inf-lista .inf-nota{color:var(--muted);font-size:.82rem}
.inf-aviso{color:var(--ambar)}
.inf-alta strong{color:var(--vermelho)}.inf-queda strong{color:var(--verde)}
.c-alta{color:var(--vermelho)}.c-queda{color:var(--verde)}
.diario-ordem{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:.88rem}
.diario-ordem label{font-weight:600}
.diario-ordem select{font:inherit;font-size:.88rem;min-height:40px;padding:4px 10px;border:1px solid var(--campo-bd);border-radius:8px;background:var(--card);color:var(--ink);max-width:100%}
.chart-diario{width:100%}
.leg-diario{line-height:1.9}
.lg{display:inline-block;vertical-align:middle;margin-right:2px}
.lg-faixa{width:22px;height:8px;border-radius:3px;background:var(--faixa-barra)}
.lg-prim{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:var(--card)}
.lg-ult{width:9px;height:9px;transform:rotate(45deg);background:var(--azul);margin:0 4px 0 3px}
#tabela-diario td.num.c-alta{color:var(--vermelho)}#tabela-diario td.num.c-queda{color:var(--verde)}
@media (max-width:900px){
  .diario-topo{grid-template-columns:minmax(0,1fr)}
  .cals-linha{justify-content:flex-start}
}
@media (max-width:760px){
  .periodo{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .periodo-op{min-height:44px;padding:0 4px;font-size:.8rem}
  .cal{width:100%}
  .cal-dia{height:42px}
  .diario-ordem select{width:100%;font-size:16px}
  .diario-ordem{flex-direction:column;align-items:stretch}
  .chart-diario{margin:0 -4px;width:calc(100% + 8px)}
}

.informativo .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:760px){.informativo .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* conta logada + sair */
.conta{display:flex;align-items:center;gap:8px;max-width:100%;font-size:.82rem;color:var(--muted)}
.conta[hidden]{display:none}
.conta-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.conta-sair{font:inherit;font-size:.85rem;min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--seg-bg);color:var(--ink);cursor:pointer;flex:none}
.conta-sair:hover{background:var(--hover)}
.conta-sair:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
@media (pointer:coarse){.conta-sair{min-height:44px}}
@media (max-width:640px){.conta{justify-content:space-between}.conta-sair{min-height:44px}}