/* ============================================================================
   PADRÃO VISUAL — Plataforma do Financeiro H2
   Fonte única de tokens e componentes. TODA tela do portal (index.html e as
   páginas embutidas por iframe) linka este arquivo ANTES do seu <style>.
   Regra: cor, fonte, raio, padding e tamanho de texto saem daqui. Página não
   redefine token nem repete componente — só acrescenta o que é dela.
   ============================================================================ */

/* ---- tokens ---------------------------------------------------------------- */
:root{
  --bg:#FFFFFF; --panel:#FFFFFF; --panel-2:#F4F4F1; --line:#E6E4E0; --line-2:#EFEEEB;
  --ink:#1D1C1A; --ink-2:#5F5C57; --ink-3:#96928B;
  --btn:#1D1C1A; --on-btn:#FFFFFF;
  --ok:#16794F; --ok-s:#E3F0E9; --warn:#9A6600; --warn-s:#F6EEDD; --bad:#C4362C; --bad-s:#F8E5E3;
  --farol-am:#F2C94C; --farol-ok:#1F8A4C; --farol-vm:#E63946;
  --sig-bad:#D8382C; --sig-warn:#E39A0B; --sig-ok:#17A06A; --h2:#6C4AA6; --h2-s:#EFE9F7;
  --h2-2:#9A82C4; --h2-3:#C9BCE3; --h2-d:#4A3178;
  /* categorias (pessoa/série) — 3 tons distintos e sóbrios: forte = feito, claro = falta */
  --cat1:#6C4AA6; --cat1-s:#DCD2EE; --cat2:#B0479C; --cat2-s:#F0D3EA; --cat3:#56534E; --cat3-s:#E3E1DD; --azul:#1F5FA8; --azul-s:#DCE9F7;
  --z0:#E8E6E2; --z1:#F1F0ED; --m1:#1D1C1A; --m2:#56534E; --m3:#8C8781; --m4:#C4BFB8;
  --sh:0 1px 2px rgba(29,28,26,.04),0 2px 8px -4px rgba(29,28,26,.08);
  --r:14px; --r2:9px; --r3:7px;
  --gap:10px; --pad:10px;   /* 22/09/2026: UM espaço entre objetos e UM espaço dentro deles, em toda tela */
  --font:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#191918; --panel:#232322; --panel-2:#2B2B29; --line:#35352F; --line-2:#2A2A28;
  --ink:#EDEBE7; --ink-2:#A5A19A; --ink-3:#77736C;
  --btn:#EDEBE7; --on-btn:#191918;
  --ok:#4FB783; --ok-s:#16301F; --warn:#C79A3C; --warn-s:#2E2513; --bad:#E4695E; --bad-s:#331B18;
  --farol-am:#F2C94C; --farol-ok:#1F8A4C; --farol-vm:#E63946;
  --sig-bad:#E4695E; --sig-warn:#E8B84C; --sig-ok:#3FC08C; --h2:#B79FE6; --h2-s:#2A2338;
  --h2-2:#8F76C4; --h2-3:#4E3F72; --h2-d:#D6C8F2;
  --cat1:#B79FE6; --cat1-s:#3A2F55; --cat2:#D77CC6; --cat2-s:#4A2A45; --cat3:#B4AFA7; --cat3-s:#3A3936; --azul:#8AB8EE; --azul-s:#1E2F45;
  --z0:#33332F; --z1:#2E2E2B; --m1:#EDEBE7; --m2:#B4AFA7; --m3:#7C776F; --m4:#4A4741;
  --sh:0 1px 2px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --bg:#191918; --panel:#232322; --panel-2:#2B2B29; --line:#35352F; --line-2:#2A2A28;
  --ink:#EDEBE7; --ink-2:#A5A19A; --ink-3:#77736C;
  --btn:#EDEBE7; --on-btn:#191918;
  --ok:#4FB783; --ok-s:#16301F; --warn:#C79A3C; --warn-s:#2E2513; --bad:#E4695E; --bad-s:#331B18;
  --farol-am:#F2C94C; --farol-ok:#1F8A4C; --farol-vm:#E63946;
  --sig-bad:#E4695E; --sig-warn:#E8B84C; --sig-ok:#3FC08C; --h2:#B79FE6; --h2-s:#2A2338;
  --h2-2:#8F76C4; --h2-3:#4E3F72; --h2-d:#D6C8F2;
  --cat1:#B79FE6; --cat1-s:#3A2F55; --cat2:#D77CC6; --cat2-s:#4A2A45; --cat3:#B4AFA7; --cat3-s:#3A3936; --azul:#8AB8EE; --azul-s:#1E2F45;
  --z0:#33332F; --z1:#2E2E2B; --m1:#EDEBE7; --m2:#B4AFA7; --m3:#7C776F; --m4:#4A4741;
  --sh:0 1px 2px rgba(0,0,0,.45);
}

/* ---- base ------------------------------------------------------------------ */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:13px;line-height:1.4;
 -webkit-font-smoothing:antialiased}
.n,.mono{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-family:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
select,input[type=text],input[type=search],input[type=date],input:not([type]){font:inherit;font-size:12px;font-weight:600;
 padding:0 10px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
select{font-weight:700;padding-right:26px}
input::placeholder{color:var(--ink-3);font-weight:500}
input[type=checkbox]{accent-color:var(--ink);margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- página embutida (iframe dentro do portal) ----------------------------- */
.wrap{margin:0 auto;padding:14px 18px 40px}
html.embed .wrap{padding:var(--gap) 20px 16px}
html.embed body{background:transparent}
html.embed header.pg,html.embed header,html.embed a.volta{display:none}
header.pg,header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
header.pg h1,header h1{font-size:16px;font-weight:800;letter-spacing:-.025em;margin:0}
header .sub,span.sub,.wrap .sub{font-size:11px;font-weight:600;color:var(--ink-3);font-family:inherit}

/* ---- título de seção / card ------------------------------------------------ */
.hd{display:flex;align-items:center;gap:8px}
.hd h2{margin:0;font-size:12.5px;font-weight:700;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd .mut{margin-left:auto;font-size:10.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;flex:none}
h3.sec{font-size:12.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:14px 2px 6px;display:flex;align-items:baseline;gap:8px}
h3.sec span{font-size:10.5px;font-weight:600;color:var(--ink-3)}
.mut{color:var(--ink-3)}

/* ---- card / seção ---------------------------------------------------------- */
section.c{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
 display:flex;flex-direction:column;overflow:hidden}
section.c>.hd{padding:var(--pad) var(--pad) 6px}
.bd{padding:0 var(--pad) var(--pad);overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--z0) transparent}
.bd::-webkit-scrollbar{width:7px;height:7px}
.bd::-webkit-scrollbar-thumb{background:var(--z0);border-radius:99px}
section.c>.bd{flex:1}

/* ---- barra de filtros ------------------------------------------------------ */
.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--gap)}
.bar .cont{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.chips{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.chips button{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:6px;color:var(--ink-3);white-space:nowrap}
.chips button[aria-current="true"],.chips button.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
.nb{font-size:11.5px;font-weight:700;padding:0 10px;height:30px;border:1px solid var(--line);border-radius:8px;
 background:var(--panel);color:var(--ink-2);white-space:nowrap}
.nb:hover{border-color:var(--ink-3);color:var(--ink)}
.nb[aria-pressed="true"],.nb.on{background:var(--btn);color:var(--on-btn);border-color:var(--btn)}
/* botão de ação de abrir/começar (ex.: Unique › Abrir mesa), 19/10/2026: contorno e texto verdes; ao passar o mouse, verde cheio com texto claro */
.nb.go{background:var(--panel);color:var(--ok);border-color:var(--ok)}
.nb.go:hover,.nb.go:focus-visible{background:var(--ok);color:var(--on-btn)}

/* ---- KPI (faixa de cartões baixos) ---------------------------------------- */
.kpis,.strip,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.pd,.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
 padding:8px var(--pad) 9px;display:flex;flex-direction:column;gap:2px;text-align:left;transition:border-color .12s}
.pd:hover,.card:hover{border-color:var(--ink-3)}
button.pd,.card[data-e]:not([data-e=""]){cursor:pointer}
.pd[aria-pressed="true"],.card[aria-pressed="true"]{border-color:var(--ink-3);box-shadow:0 0 0 2px var(--h2-s)}
.pd-t,.card .r{display:flex;align-items:center;gap:6px;color:var(--ink-2);min-width:0;font-size:11px;font-weight:600;
 letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.pd-t b{font-size:11px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pd-v,.card .v{display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap;font-size:clamp(16px,1.25vw,21px);
 font-weight:800;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums;margin-top:0;font-family:inherit}
.pd-v strong{font-size:clamp(16px,1.25vw,21px);font-weight:800;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:0}
.pd-v strong.rs::before{content:"R$ ";font-size:12px;font-weight:700;color:var(--ink-3)}
.pd-v em,.card .v small{font-style:normal;font-size:10.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:0}
.pd-v em.up{color:var(--bad)} .pd-v em.dn{color:var(--ok)}

/* ---- chip de estado (SÓ farol: ok / atenção / ruim) ----------------------- */
.ch{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:99px;margin-left:auto;white-space:nowrap;flex:none;
 font-style:normal;line-height:1.3}
.ch.ok{color:var(--ok);background:var(--ok-s)}
.ch.wa,.ch.am{color:var(--warn);background:var(--warn-s)}
.ch.ba,.ch.vm{color:var(--bad);background:var(--bad-s)}
.tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--panel-2);color:var(--ink-2);white-space:nowrap}
.tag.ok{color:var(--ok);background:var(--ok-s)} .tag.ba{color:var(--bad);background:var(--bad-s)}
/* etiqueta de sócio depois do nome (Unique, 19/10/2026): S = sócio de fora (do jogo) · H2 = sócio da casa */
.tag.s{color:var(--azul);background:var(--azul-s)}
.tag.h2{color:var(--on-btn);background:var(--h2)}
/* bolinha de farol — só estado com regra */
/* só em <i>/<span> VAZIOS: o shell usa div.pt como contêiner do Pareto e span.far como grupo de chips */
i.pt:empty,span.pt:empty,i.far:empty,span.far:empty{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--z0);vertical-align:-1px}
i.pt.ok:empty,i.far.ok:empty,span.far.ok:empty,.ok>i.pt:empty,.ok>span.pt:empty{background:var(--farol-ok)}
i.pt.dif:empty,i.pt.wa:empty,i.far.wa:empty,span.far.wa:empty,.dif>i.pt:empty,.dif>span.pt:empty{background:var(--farol-am)}
i.pt.falha:empty,i.pt.ba:empty,i.far.ba:empty,span.far.ba:empty,.falha>i.pt:empty,.falha>span.pt:empty{background:var(--farol-vm)}

/* ---- tabela padrão --------------------------------------------------------- */
/* toda tabela rola por dentro; dentro de um card, o .env perde a própria moldura */
.env{max-height:calc(100vh - 200px)}
section.c>.env,section.c>.bd>.env,section.c .tw{border:0;box-shadow:none;border-radius:0;max-height:calc(100vh - 210px)}
/* 22/09/2026 — tela embutida: o teto em 100vh era o 100vh do IFRAME, que nasce com 120px e só cresce com o
   conteúdo → teto negativo → tabela com altura zero → altura postada pequena → travado (Títulos ficou só com os
   KPIs). No embed o teto some; tela grande pede fill:1 ao shell e põe o próprio teto. */
html.embed section.c>.env,html.embed section.c>.bd>.env,html.embed section.c .tw{max-height:none}
section.c>.leg{padding:0 var(--pad)}
.env{overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
/* FORMA ÚNICA DA TABELA (18/09/2026) — vale para <table> e casa com a grade .lst do portal:
   linha de 24px, texto 11,5px, cabeçalho 9,5px caixa-alta. Página não redefine tamanho. */
table{border-collapse:collapse;width:100%;font-size:11.5px;font-family:inherit}
th{position:sticky;top:0;z-index:2;background:var(--panel);text-align:left;padding:8px 10px;font-size:9.5px;font-weight:700;
 letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap;
 cursor:pointer;user-select:none}
th:hover{color:var(--ink)}
th[data-dir]::after,th[aria-sort]::after{content:" ▾";font-size:8px}
th[data-dir="1"]::after,th[aria-sort="ascending"]::after{content:" ▴"}
th.num,th.r,td.num,td.n,td.r,td.val{text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
td{padding:4px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;color:var(--ink-2);vertical-align:middle;font-family:inherit}
td:first-child{color:var(--ink);font-weight:600}
tbody tr:hover td{background:var(--panel-2)}
tr:last-child td{border-bottom:0}
tr[aria-selected="true"] td{background:var(--panel-2);box-shadow:inset 2px 0 var(--h2)}
.vazio{padding:22px;text-align:center;color:var(--ink-3);font-weight:600;font-size:12.5px}

/* ---- barra proporcional neutra (nunca farol) ------------------------------ */
.bw,.bkb{height:6px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.bw i,.bkb i{display:block;height:100%;background:var(--h2);border-radius:99px}

/* ---- leitor (detalhe da linha/célula clicada) ----------------------------- */
.leitor{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
 padding:10px 13px;margin-top:10px;position:sticky;bottom:10px;min-height:48px}
html.embed .leitor{position:static}
.leitor .t{font-size:12.5px;font-weight:700}
.leitor .d{font-size:11.5px;color:var(--ink-2);margin-top:3px;display:flex;gap:16px;flex-wrap:wrap;font-family:inherit;
 font-variant-numeric:tabular-nums}
.leitor .d b{color:var(--ink)}
.leitor .d.dica{display:none}

/* ---- legenda --------------------------------------------------------------- */
/* 22/09/2026 (Leonardo): TODA legenda de gráfico fica embaixo do gráfico, CENTRALIZADA — nunca no canto */
.leg,.lgd{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:8px 2px 0;font-size:10.5px;font-weight:600;color:var(--ink-2)}
.leg span,.lgd span{display:inline-flex;align-items:center;gap:5px}
.leg i,.lgd i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ---- celular (17/10/2026, Leonardo: "deixe o portal responsivo pra mobile") -------------------------------------
   Vale para toda página que linka este arquivo. Até 720px: a página nunca rola para o lado; o que é largo por natureza
   (tabela, grade de colunas, matriz de dias) rola dentro da própria caixa. Desktop não muda. */
@media (max-width:720px){
  html,body{max-width:100%}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lst{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lst>.lsth,.lst .lstb>.xr,.lst .lstb>.item,.lst .lstb>div[style*="grid-template-columns"]{min-width:max(100%,620px)}
  .lstb{overflow:visible}
  /* !important: estas classes são redefinidas no <style> da própria página, que vem depois deste arquivo */
  .tabs,.chips,.navrow,.bar,.filtros{flex-wrap:wrap!important}
  .tabs .mes,.navrow{margin-left:0!important;max-width:100%}
  .navrow,.chips{min-width:0;width:100%}
  .hd{flex-wrap:wrap;row-gap:2px}
  .hd .mut{margin-left:0;white-space:normal}
  input,select{font-size:16px}
  .wrap{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
}