/* ═══════════════════════════════════════════════════════════════════════════
   i-go · console de gestão — folha de estilo
   Tokens do design system VUSE (~/Padroes/Designer-sytem/VUSE, mesma estrutura
   do VUSE-VIEW: escala de acento, neutros, status, temas claro e escuro) com a
   cor da identidade do i-go (#0b7a5c, a "marca" do app web) no lugar do azul
   da VUSE. Contraste conferido por contraste_test.go: mudar uma cor aqui
   reprova o teste se o par cair abaixo do WCAG AA.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --acc-50:#e6f4ef; --acc-100:#c3e5d8; --acc-200:#8fceb7; --acc-300:#4fb08c;
  --acc-400:#1f936c; --acc-500:#0b7a5c; --acc-600:#08664d; --acc-700:#075a44;
  --acc-800:#054634; --acc-900:#033326; --acc-950:#022219;
  --n-0:#ffffff; --n-50:#f7f7f8; --n-100:#f2f2f3; --n-200:#e4e4e7; --n-300:#d7d7da;
  --n-400:#a2a2a9; --n-500:#6b6d75; --n-600:#4d4f57; --n-700:#37383f; --n-800:#2d2d34;
  --n-900:#22232a; --n-950:#14151a;
  --ok-500:#16a249; --warn-500:#f5a30a; --err-500:#dc2828; --info-500:#008577;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
  --z-topbar:20; --z-modal:50;
  --dur:200ms; --ease:cubic-bezier(.215,.61,.355,1);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f2f3; --surface-1:#ffffff; --surface-2:#f7f7f8; --surface-3:#ececef;
  --border-1:#dcdce1; --border-2:#c9c9cf;
  --text-1:#14151a; --text-2:#37383f; --text-3:#62646c;
  --brand:var(--acc-500); --brand-hover:var(--acc-600); --brand-fg-on:#ffffff;
  --brand-text:var(--acc-600); --brand-soft:var(--acc-50); --focus-ring:var(--acc-500);
  --top-bg:var(--acc-900); --top-text:#e6f4ef; --top-dim:#a9d4c4; --top-ativo:#0a4a39;
  --st-ok-base:var(--ok-500);     --st-ok-fg:#0f6c31;
  --st-warn-base:var(--warn-500); --st-warn-fg:#7a4f00;
  --st-err-base:var(--err-500);   --st-err-fg:#ab1c1c;
  --st-info-base:var(--info-500); --st-info-fg:#006a5f;
  --st-mut-base:#8b8d95;          --st-mut-fg:#4d4f57;
  --perigo:#b42020; --perigo-hover:#961a1a; --perigo-fg-on:#ffffff;
  --shadow-sm:0 .3px .4px rgba(20,21,26,.02),0 .9px 1.5px rgba(20,21,26,.045),0 3.5px 6px rgba(20,21,26,.09);
  --shadow-modal:0 8px 15px -1px rgba(20,21,26,.05),0 28px 40px -1px rgba(20,21,26,.12);
  --veu:rgba(20,21,26,.45);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1a1a1e; --surface-1:#22232a; --surface-2:#2d2d34; --surface-3:#34353c;
  --border-1:#3e3e46; --border-2:#505058;
  --text-1:#fafaff; --text-2:#cfcfd3; --text-3:#a3a4ab;
  --brand:var(--acc-500); --brand-hover:var(--acc-600); --brand-fg-on:#ffffff;
  --brand-text:var(--acc-300); --brand-soft:color-mix(in srgb, #0b7a5c 22%, #22232a); --focus-ring:var(--acc-300);
  --top-bg:#131316; --top-text:#e7e7ea; --top-dim:#9a9ba2; --top-ativo:#1d3a31;
  --st-ok-base:var(--ok-500);     --st-ok-fg:#4ade80;
  --st-warn-base:var(--warn-500); --st-warn-fg:#f7b945;
  --st-err-base:var(--err-500);   --st-err-fg:#f28b8b;
  --st-info-base:#14a896;         --st-info-fg:#4fd1c0;
  --st-mut-base:#8b8d95;          --st-mut-fg:#b4b5bb;
  --perigo:#b42020; --perigo-hover:#c92a2a; --perigo-fg-on:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 3.5px 6px rgba(0,0,0,.3);
  --shadow-modal:0 8px 15px rgba(0,0,0,.45),0 28px 40px rgba(0,0,0,.5);
  --veu:rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text-1);line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-xs)}
h1,h2,h3{color:var(--text-1);line-height:1.25;font-weight:600}
h1{font-size:20px} h2{font-size:16px} h3{font-size:14px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--brand-text)}
[hidden]{display:none !important}
.mono{font-family:var(--font-mono);overflow-wrap:anywhere}
.tnum{font-variant-numeric:tabular-nums}
.sub{color:var(--text-3);font-size:12px}
.muted{color:var(--text-2)}

/* ── topo (navegação) ─────────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:var(--z-topbar);background:var(--top-bg);color:var(--top-text)}
.topo__linha{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-4);min-height:56px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:var(--sp-2);color:var(--top-text);text-decoration:none;font-weight:700;font-size:15px}
.marca__selo{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-md);
  background:var(--brand);color:var(--brand-fg-on);font-size:13px}
.marca__sub{color:var(--top-dim);font-weight:500}
.nav{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.nav__item{color:var(--top-text);text-decoration:none;padding:6px 12px;border-radius:var(--r-md);font-weight:500}
.nav__item:hover{background:rgba(255,255,255,.08)}
.nav__item--ativo{background:var(--top-ativo)}
.conta{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);color:var(--top-dim);font-size:13px}
.conta__nome{color:var(--top-text)}
.conta .btn{color:var(--top-text);background:transparent;border-color:rgba(255,255,255,.35)}
.conta .btn:hover{background:rgba(255,255,255,.08)}

/* ── página ───────────────────────────────────────────────────────────────── */
.pagina{max-width:1180px;margin:0 auto;padding:var(--sp-6) var(--sp-4) var(--sp-8)}
.cabecalho{display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.cabecalho__texto{flex:1;min-width:220px}
.cabecalho__texto p{color:var(--text-3);margin-top:var(--sp-1)}
.card{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:var(--sp-5)}
.card + .card{margin-top:var(--sp-4)}
.grade{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.dado{display:flex;flex-direction:column;gap:2px}
.dado__rotulo{color:var(--text-3);font-size:12px}
.dado__valor{font-size:16px;font-weight:600}

/* ── botões (Button do DS: btn, btn--primary, btn--subtle) ────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;
  border-radius:var(--r-md);border:1px solid var(--border-2);background:var(--surface-1);color:var(--text-1);
  font-weight:600;text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--ease)}
.btn:hover{background:var(--surface-2)}
.btn--primary{background:var(--brand);border-color:var(--brand);color:var(--brand-fg-on)}
.btn--primary:hover{background:var(--brand-hover)}
.btn--perigo{background:var(--perigo);border-color:var(--perigo);color:var(--perigo-fg-on)}
.btn--perigo:hover{background:var(--perigo-hover)}
.btn--sm{height:30px;padding:0 10px;font-size:13px}
.acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}

/* ── etiquetas (Badge do DS) ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;white-space:nowrap;
  color:var(--st-mut-fg);background:color-mix(in srgb, var(--st-mut-base) 14%, var(--surface-1))}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--st-mut-base)}
.badge--ok{color:var(--st-ok-fg);background:color-mix(in srgb, var(--st-ok-base) 14%, var(--surface-1))}
.badge--ok::before{background:var(--st-ok-base)}
.badge--err{color:var(--st-err-fg);background:color-mix(in srgb, var(--st-err-base) 14%, var(--surface-1))}
.badge--err::before{background:var(--st-err-base)}
.badge--warn{color:var(--st-warn-fg);background:color-mix(in srgb, var(--st-warn-base) 14%, var(--surface-1))}
.badge--warn::before{background:var(--st-warn-base)}

/* ── avisos (Alert do DS) ─────────────────────────────────────────────────── */
.alert{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border-1);
  background:var(--surface-2);color:var(--text-1);margin-bottom:var(--sp-4)}
.alert--sucesso{border-color:color-mix(in srgb, var(--st-ok-base) 40%, var(--surface-1));
  background:color-mix(in srgb, var(--st-ok-base) 10%, var(--surface-1))}
.alert--erro{border-color:color-mix(in srgb, var(--st-err-base) 40%, var(--surface-1));
  background:color-mix(in srgb, var(--st-err-base) 10%, var(--surface-1))}
.alert--aviso{border-color:color-mix(in srgb, var(--st-warn-base) 50%, var(--surface-1));
  background:color-mix(in srgb, var(--st-warn-base) 12%, var(--surface-1))}

/* ── tabela (Table do DS); no celular, cada linha vira um cartão ──────────── */
.tabela-caixa{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:12px;font-weight:600;color:var(--text-3);padding:8px 10px;
  border-bottom:1px solid var(--border-2);white-space:nowrap}
.table td{padding:10px;border-bottom:1px solid var(--border-1);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table--inativa td{color:var(--text-3)}
.vazio{color:var(--text-3);padding:var(--sp-4) 0}
@media (max-width:720px){
  .table thead{display:none}
  .table tr{display:block;border-bottom:1px solid var(--border-2);padding:var(--sp-2) 0}
  .table td{display:block;border:0;padding:4px 0;text-align:right;overflow:hidden}
  .table td::before{content:attr(data-rotulo);float:left;margin-right:var(--sp-3);color:var(--text-3);font-size:12px;text-align:left}
}

/* ── formulário ───────────────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.campo label,.campo legend{font-weight:600;font-size:13px;color:var(--text-2)}
.campo .sub{margin-top:-2px}
.input,select.input{height:38px;padding:0 10px;border-radius:var(--r-md);border:1px solid var(--border-2);
  background:var(--surface-1);color:var(--text-1);font:inherit;width:100%}
.input:focus{outline:2px solid var(--focus-ring);outline-offset:0;border-color:transparent}
fieldset.campo{border:0}
.escolhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.escolha{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border-1);
  border-radius:var(--r-md);background:var(--surface-2);cursor:pointer}
.escolha input{accent-color:var(--brand);width:16px;height:16px}
.par{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.segredo{display:flex;gap:var(--sp-2);align-items:stretch;flex-wrap:wrap}
.segredo__texto{flex:1;min-width:0;padding:10px;border-radius:var(--r-md);background:var(--surface-2);
  border:1px dashed var(--border-2);font-family:var(--font-mono);overflow-wrap:anywhere;user-select:all}

/* ── modal (ModalWindow do DS, sobre <dialog> nativo) ─────────────────────── */
.modal{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 24px));width:100%;
  margin:auto;color:var(--text-1)}
.modal::backdrop{background:var(--veu)}
.modal__content{background:var(--surface-1);border-radius:var(--r-xl);box-shadow:var(--shadow-modal);
  border:1px solid var(--border-1);max-height:calc(100dvh - 32px);overflow:auto}
.modal__header{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border-1)}
.modal__header h2{flex:1}
.modal__close-btn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:20px;
  color:var(--text-2);text-decoration:none}
.modal__close-btn:hover{background:var(--surface-2)}
.modal__body{padding:var(--sp-5)}
.modal__footer{display:flex;gap:var(--sp-2);justify-content:flex-end;flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-5) var(--sp-4);border-top:1px solid var(--border-1)}
/* sem script, o mesmo fragmento aparece na página, dentro de um cartão */
.card .modal__content{box-shadow:none;border:0;max-height:none}

/* ── entrar ───────────────────────────────────────────────────────────────── */
.entrar{min-height:100vh;display:grid;place-items:center;padding:var(--sp-4)}
.entrar .card{width:100%;max-width:380px}
.entrar h1{margin:var(--sp-3) 0 var(--sp-5)}
.entrar .btn{width:100%}

.marca--escura{color:var(--text-1)}
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}

.rodape{max-width:1180px;margin:0 auto;padding:0 var(--sp-4) var(--sp-6);color:var(--text-3);font-size:12px}
.tema{color:var(--top-dim);font-size:13px;padding:6px 8px;border-radius:var(--r-md)}
.tema:hover{background:rgba(255,255,255,.08)}