/* ============================================================================
   TEMA RADAR DE OBRAS — "Executive" (identidade gerada no Stitch, traduzida)

   MODO ESCURO É O PADRÃO. O claro fica sob `[data-tema="claro"]` e o usuário
   alterna no botão da barra superior (a escolha grava no navegador).

   Como funciona: TODA cor vive numa variável aqui embaixo. O bloco `:root` traz
   os valores escuros; o bloco `:root[data-tema="claro"]` sobrescreve os mesmos
   nomes. Nada mais no arquivo (nem no HTML, nem nos gráficos SVG gerados pelo
   Python) usa cor fixa — é isso que faz os dois modos funcionarem sem duplicar
   regra. Se você acrescentar uma cor literal em algum lugar, ela vai ficar
   errada num dos modos.

   Continua valendo: 100% offline (nenhuma fonte/recurso de CDN), no celular a
   barra lateral vira barra superior e as tabelas viram cartões empilhados.
   ============================================================================ */

:root{
  /* ---------- MODO ESCURO (padrão) ---------- */
  --ground:#0B1220;--panel:#151E2E;--panel-2:#1E293B;
  --sidebar:#0E1626;--sup:#1B2536;          /* sup = superfície de item/campo */
  --ink:#E8EDF5;--muted:#9FB0C7;--faint:#7086A3;--line:#26334A;
  --brand:#4D8BFF;--brand-2:#7BA8FF;--brand-suave:rgba(77,139,255,.15);
  --brand-solido:#2F6FE4;   /* fundo de botao: 4,7:1 com texto branco */
  --crit:#F87171;--crit-suave:rgba(248,113,113,.16);--crit-texto:#FCA5A5;
  --warn:#FBBF24;--warn-suave:rgba(251,191,36,.16);--warn-texto:#FCD34D;
  --ok:#34D399;--ok-suave:rgba(52,211,153,.16);--ok-texto:#6EE7B7;
  --cost:#94A3B8;
  --sombra:0 1px 2px rgba(0,0,0,.35),0 8px 24px -4px rgba(0,0,0,.45);
  --sombra-alta:0 12px 32px -6px rgba(0,0,0,.6);
  --hero:linear-gradient(135deg,#1E3A8A,#2557C7 55%,#3B82F6);
  --hero-lab:#BBD0FA;--hero-sub:#A7C1F7;
  --topbar:rgba(11,18,32,.86);
  /* cartao de vidro da tela de entrada (traduzido do estudo do Stitch) */
  --vidro:rgba(21,30,46,.62);--vidro-borda:rgba(255,255,255,.11);
  /* tipografia (pilha do sistema — nada de CDN) */
  --serif:"Segoe UI Variable Display","Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* pontes para o Bootstrap */
  --bs-body-bg:var(--ground);--bs-body-color:var(--ink);
  --bs-body-font-family:"Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;
  --bs-border-color:var(--line);--bs-border-radius:14px;
  --bs-link-color-rgb:77,139,255;--bs-link-hover-color-rgb:123,168,255;
  --bs-secondary-color:var(--muted);
  --bs-font-monospace:ui-monospace,Consolas,monospace;
  --bs-primary:#4D8BFF;--bs-primary-rgb:77,139,255;
  --bs-emphasis-color:var(--ink);
  color-scheme:dark;   /* barras de rolagem e campos nativos acompanham */
}

:root[data-tema="claro"]{
  /* ---------- MODO CLARO ---------- */
  --ground:#F7F9FB;--panel:#FFFFFF;--panel-2:#F1F5F9;
  --sidebar:#FFFFFF;--sup:#FFFFFF;
  --ink:#0F172A;--muted:#475569;--faint:#94A3B8;--line:#E2E8F0;
  --brand:#2563EB;--brand-2:#1D4ED8;--brand-suave:#EFF6FF;--brand-solido:#2563EB;
  --crit:#DC2626;--crit-suave:#FEE2E2;--crit-texto:#B91C1C;
  --warn:#D97706;--warn-suave:#FEF3C7;--warn-texto:#B45309;
  --ok:#059669;--ok-suave:#DCFCE7;--ok-texto:#15803D;
  --cost:#94A3B8;
  --vidro:rgba(255,255,255,.78);--vidro-borda:rgba(15,23,42,.10);
  --sombra:0 1px 2px rgba(15,23,42,.04),0 4px 20px -2px rgba(15,23,42,.06);
  --sombra-alta:0 10px 25px -5px rgba(15,23,42,.10);
  --hero:linear-gradient(135deg,#1D4ED8,#2563EB 55%,#3B82F6);
  --hero-lab:#C7DAFE;--hero-sub:#BFD4FD;
  --topbar:rgba(247,249,251,.88);
  --bs-link-color-rgb:37,99,235;--bs-link-hover-color-rgb:29,78,216;
  --bs-primary:#2563EB;--bs-primary-rgb:37,99,235;
  color-scheme:light;
}

body{background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased;
 letter-spacing:-.005em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.titulo-serif{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.text-secondary{color:var(--muted)!important}

/* --------------------- botão de alternar claro/escuro --------------------- */
/* o ícone vem do CSS: assim o Python não precisa saber qual tema está ativo */
#btn-tema{width:34px;padding:0;line-height:1;font-size:15px}
#btn-tema::after{content:"\2600"}                     /* sol: oferece o claro */
[data-tema="claro"] #btn-tema::after{content:"\263D"} /* lua: oferece o escuro */

/* ------------------------------- estrutura ------------------------------- */
.app-shell{min-height:100vh}
.main-col{min-width:0;display:flex;flex-direction:column}
.content-col{max-width:1320px;margin:0 auto;width:100%}
.topbar{background:var(--topbar);backdrop-filter:blur(10px);
 border-bottom:1px solid var(--line);z-index:10}

/* -------------------------------- sidebar -------------------------------- */
.sidebar{background:var(--sidebar);color:var(--muted);width:252px;flex:none;padding:20px 14px;
 position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
 border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px;text-decoration:none}
.brand .logo{width:38px;height:38px;border-radius:11px;background:var(--brand);
 display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(37,99,235,.28)}
.brand .logo svg path{stroke:#fff}
.brand .t1{color:var(--ink);font-family:var(--serif);font-weight:700;font-size:17.5px;
 letter-spacing:-.02em;line-height:1.1}
.brand .t2{color:var(--faint);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;margin-top:3px}
.navsec{color:var(--faint);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
 font-weight:700;padding:18px 12px 7px}
.menu-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;
 font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;
 transition:background .15s,color .15s}
.menu-item:hover{background:var(--panel-2);color:var(--ink)}
.menu-item.on{background:var(--brand-suave);color:var(--brand)}
/* no escuro o vermelho e claro: texto branco em cima dele fica ilegivel
   (contraste 2.8) — o numero vai escuro. No claro, o oposto. */
.menu-item .conta{margin-left:auto;background:var(--crit);color:var(--ground);font-size:10px;
 font-weight:800;border-radius:999px;padding:1px 7px;font-family:var(--mono)}
[data-tema="claro"] .menu-item .conta{color:#fff}
.sidebar .foot{margin-top:auto;padding:16px 12px 4px;border-top:1px solid var(--line);
 font-size:10.5px;color:var(--faint);line-height:1.6}
/* grupo com subitens (Recursos, Comercial, Financeiro) */
.menu-pai{cursor:default;color:var(--ink);font-weight:700}
.menu-pai:hover{background:transparent}
.menu-sub{padding-left:34px;font-size:12.8px;font-weight:500;position:relative}
.menu-sub::before{content:"";position:absolute;left:19px;top:50%;width:5px;height:5px;
 border-radius:50%;background:var(--line);transform:translateY(-50%)}
.menu-sub.on::before{background:var(--brand)}

/* --------------------------------- cards --------------------------------- */
.card{--bs-card-bg:var(--panel);--bs-card-border-color:var(--line);
 --bs-card-color:var(--ink);--bs-card-border-radius:16px;box-shadow:var(--sombra)}
.card-title{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* --------------------------------- botões -------------------------------- */
.btn{--bs-btn-border-radius:10px;font-weight:600}
.btn-primary{--bs-btn-bg:var(--brand-solido);--bs-btn-border-color:var(--brand-solido);
 --bs-btn-color:#fff;--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);
 --bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--brand-2);
 --bs-btn-active-border-color:var(--brand-2);--bs-btn-active-color:#08121F;
 --bs-btn-disabled-bg:var(--brand-solido);--bs-btn-disabled-border-color:var(--brand-solido)}
[data-tema="claro"] .btn-primary{--bs-btn-hover-bg:var(--brand-2);
 --bs-btn-hover-border-color:var(--brand-2);--bs-btn-active-color:#fff;
 box-shadow:0 2px 8px rgba(37,99,235,.22)}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--line);
 --bs-btn-hover-bg:var(--brand-suave);--bs-btn-hover-color:var(--brand-2);
 --bs-btn-hover-border-color:var(--brand);
 --bs-btn-active-bg:var(--brand);--bs-btn-active-border-color:var(--brand);--bs-btn-active-color:#fff}
.btn-outline-danger{--bs-btn-color:var(--crit);--bs-btn-border-color:var(--line);
 --bs-btn-hover-bg:var(--crit-suave);--bs-btn-hover-color:var(--crit);--bs-btn-hover-border-color:var(--crit);
 --bs-btn-active-bg:var(--crit);--bs-btn-active-border-color:var(--crit);--bs-btn-active-color:#fff}

/* ------------------------------- formulários ------------------------------ */
.form-label{display:block;font-size:11.5px;letter-spacing:.02em;color:var(--muted);font-weight:600;
 margin-bottom:6px;white-space:nowrap;line-height:17px;min-height:17px}
.form-control,.form-select{height:42px;background-color:var(--sup);border-color:var(--line);
 border-radius:10px;color:var(--ink)}
.form-control::placeholder{color:var(--faint)}
input[type=file].form-control{height:auto;min-height:42px;padding-top:8px}
.form-control:focus,.form-select:focus{background-color:var(--sup);border-color:var(--brand);
 box-shadow:0 0 0 .2rem var(--brand-suave);color:var(--ink)}
.form-text{font-size:11px;color:var(--faint);min-height:14px;line-height:1.35}
input[type=number].form-control{font-family:var(--mono);font-size:13.5px}
form .row .btn{height:42px}

/* --------------------------------- alertas -------------------------------- */
.alert{border-radius:12px;font-size:13.5px;border-width:1px}
.alert-warning{--bs-alert-bg:var(--warn-suave);--bs-alert-border-color:var(--warn);
 --bs-alert-color:var(--warn-texto)}
.alert-danger{--bs-alert-bg:var(--crit-suave);--bs-alert-border-color:var(--crit);
 --bs-alert-color:var(--crit-texto)}
.alert-success{--bs-alert-bg:var(--ok-suave);--bs-alert-border-color:var(--ok);
 --bs-alert-color:var(--ok-texto)}

/* --------------------------------- tabelas -------------------------------- */
.table{--bs-table-bg:transparent;--bs-table-color:var(--ink);
 --bs-table-hover-bg:var(--panel-2);--bs-table-hover-color:var(--ink);
 --bs-table-border-color:var(--line);font-size:13.5px;color:var(--ink)}
.table thead th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
 font-weight:700;border-bottom-color:var(--line);padding-bottom:10px}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ----------------------------------- KPIs --------------------------------- */
.kpi{border-radius:18px}
.kpi .lab{font-size:12px;color:var(--faint);font-weight:600}
.kpi .val{font-family:var(--mono);font-size:27px;font-weight:800;letter-spacing:-.03em;
 line-height:1.15;color:var(--ink);margin-top:6px}
.kpi .sub{font-size:11.5px;color:var(--faint);margin-top:4px}
/* gradiente vai em `background`: --bs-card-bg cai em background-color, que
   ignora gradiente (o cartão sairia sem fundo) */
.kpi-hero{background:var(--hero);--bs-card-bg:transparent;--bs-card-border-color:transparent;
 color:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px -6px rgba(37,99,235,.42)}
.kpi-hero::after{content:"";position:absolute;right:-28px;top:-28px;width:120px;height:120px;
 border-radius:50%;background:rgba(255,255,255,.10)}
.kpi-hero .card-body{position:relative;z-index:1}
.kpi-hero .lab{color:var(--hero-lab)}.kpi-hero .sub{color:var(--hero-sub)}.kpi-hero .val{color:#fff}
.v-crit{color:var(--crit)!important}.v-warn{color:var(--warn)!important}
.v-ok{color:var(--ok)!important}.v-brand{color:var(--brand)!important}

/* ----------------------------- estados / badges --------------------------- */
.estado{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
 text-transform:uppercase;border-radius:999px;padding:5px 11px}
.b-crit{background:var(--crit-suave);color:var(--crit-texto)}
.b-warn{background:var(--warn-suave);color:var(--warn-texto)}
.b-ok{background:var(--ok-suave);color:var(--ok-texto)}
.b-novo{background:var(--panel-2);color:var(--muted)}

/* --------------------------- card de obra (radar) -------------------------- */
.obra-card{border-left:4px solid var(--line);transition:box-shadow .15s,border-color .15s;
 color:inherit;border-radius:16px}
.obra-card:hover{box-shadow:var(--sombra-alta);color:inherit}
.obra-card.s-crit{border-left-color:var(--crit)}.obra-card.s-warn{border-left-color:var(--warn)}
.obra-card.s-ok{border-left-color:var(--ok)}.obra-card.s-novo{border-left-color:var(--faint)}
.obra-grid{display:grid;grid-template-columns:1.3fr 1.4fr 1.1fr auto;gap:20px;align-items:center}
.oname{font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.ometa{font-size:12px;color:var(--faint);margin-top:2px}
.mrow{display:grid;grid-template-columns:44px 1fr 42px;gap:9px;align-items:center;margin-bottom:6px}
.mlab{color:var(--faint);text-align:right;font-size:10.5px;font-weight:600}
.mtrack{height:9px;background:var(--panel-2);border-radius:999px;position:relative;overflow:hidden}
.mfill{position:absolute;inset:0 auto 0 0;border-radius:999px}
.mval{font-family:var(--mono);font-weight:700;font-size:11.5px}
.gapline{font-size:11.5px;font-weight:600;margin-top:3px}
.pred{text-align:right}
.plab{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
.pval{font-family:var(--mono);font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.psub{font-size:11px;color:var(--faint)}
.chev{color:var(--faint);font-size:18px}

/* ------------------------- análise / faixa / memória ----------------------- */
.dcols{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:8px}
.legend i{width:16px;height:3px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:5px}
.band{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
 padding:16px 18px;margin-bottom:14px}
.bandval{font-family:var(--mono);font-size:24px;font-weight:800;letter-spacing:-.03em}
.bandsub{font-size:12px;color:var(--muted);margin-top:3px}
.bandbar{position:relative;height:30px;margin:14px 0 4px}
.bandaxis{position:absolute;left:0;right:0;top:14px;height:2px;background:var(--line);border-radius:2px}
.bandspan{position:absolute;top:8px;height:14px;border-radius:999px;opacity:.9}
.bandmid{position:absolute;top:3px;width:2px;height:24px;background:var(--ink)}
.tick{position:absolute;top:22px;font-family:var(--mono);font-size:10px;color:var(--faint);
 transform:translateX(-50%)}
.src{font-size:11.5px;color:var(--faint);margin-top:10px;line-height:1.45}
.fact{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
 border-bottom:1px solid var(--line);font-size:13px}
.fact:last-child{border-bottom:none}.fact .k{color:var(--muted)}
.fact .v{font-family:var(--mono);font-weight:700}

/* ------------------------------ estado vazio ------------------------------ */
.vazio{text-align:center;padding:52px 20px;color:var(--muted)}
.vazio .ic{font-size:30px;margin-bottom:12px;color:var(--brand)}
.vazio h3{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.02em;
 color:var(--ink);margin-bottom:6px}
.vazio p{margin:0 0 18px;font-size:13.5px}

/* ------------------------ financeiro: lançamentos -------------------------- */
.navsec-form{color:var(--faint);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
 font-weight:700;border-bottom:1px solid var(--line);padding-bottom:6px;margin-top:6px}
.fin-tots{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:flex-end;
 border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.fin-t .lab{font-size:11px;color:var(--faint);font-weight:600}
.fin-t .val{font-size:15px;font-weight:800;letter-spacing:-.02em}
.fin-saldo td{background:var(--panel-2)!important}

/* ------------------------- indicadores (dashboard) ------------------------- */
.ind-row{display:grid;grid-template-columns:150px 1fr 74px;gap:11px;align-items:center;margin-bottom:9px}
.ind-lab{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.ind-lab a{color:var(--brand);text-decoration:none;font-weight:600}
.ind-track{height:10px;background:var(--panel-2);border-radius:999px;position:relative;overflow:hidden}
.ind-fill{position:absolute;inset:0 auto 0 0;border-radius:999px}
.ind-val{font-size:11.5px;font-weight:700;color:var(--ink)}

/* -------------------- relatórios: analítico (modo livre) ------------------- */
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px 14px}
.col-chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);
 cursor:pointer;user-select:none}
.col-chk input{accent-color:var(--brand)}
.tabela-rolavel{overflow-x:auto}
.tabela-rolavel table{min-width:100%;width:max-content}

/* ---------------------- conciliação bancária (OFX) ------------------------- */
.ofx-linha{display:flex;gap:14px;align-items:center;justify-content:space-between;
 flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:12px 15px;
 margin-bottom:10px;background:var(--sup);transition:box-shadow .15s}
.ofx-linha:hover{box-shadow:var(--sombra)}
.ofx-info{min-width:240px;flex:1}
.ofx-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------------------- orçamentos: cards de entrada ----------------------- */
.entrada-card{transition:border-color .15s,box-shadow .15s;border-radius:16px}
.entrada-card:hover{border-color:var(--brand);box-shadow:var(--sombra-alta)}
.ic-quad{width:44px;height:44px;flex:none;border-radius:12px;background:var(--brand-suave);
 display:grid;place-items:center;font-size:18px;color:var(--brand)}

/* --------------------------- tarefas (kanban) ------------------------------ */
.kb-board{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;padding-bottom:10px}
.kb-col{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;
 width:280px;flex:none;box-shadow:var(--sombra)}
.kb-col.kb-over{outline:2px dashed var(--brand);outline-offset:2px}
.kb-col.kb-nova{background:transparent;border-style:dashed;box-shadow:none}
.kb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
 font-weight:700;font-size:13.5px;color:var(--ink);padding:2px 2px 12px}
.kb-n{display:inline-block;background:var(--panel-2);color:var(--muted);border-radius:999px;
 font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 8px;margin-left:7px;vertical-align:1px}
.kb-add summary{list-style:none;cursor:pointer;color:var(--muted);font-size:12.5px;font-weight:600;
 border:1px dashed var(--line);border-radius:10px;padding:8px 11px;user-select:none}
.kb-add summary::-webkit-details-marker{display:none}
.kb-add summary:hover{background:var(--panel-2);color:var(--brand);border-color:var(--brand)}
.kb-lista{display:flex;flex-direction:column;gap:9px;margin-top:11px;min-height:34px}
.kb-card{background:var(--sup);border:1px solid var(--line);border-radius:12px;padding:11px 13px;
 cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.kb-card:hover{box-shadow:var(--sombra)}
.kb-card:active{cursor:grabbing}
.kb-titulo{font-size:13px;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.kb-acoes{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.kb-mover{border:none;background:transparent;color:var(--faint);font-size:11px;cursor:pointer;
 padding:0;max-width:120px}
.kb-mover:hover{color:var(--brand)}
.kb-x{border:none;background:transparent;color:var(--faint);cursor:pointer;font-size:12px;
 line-height:1;padding:3px 5px;border-radius:6px}
.kb-x:hover{color:var(--crit);background:var(--crit-suave)}
.kb-vazio{text-align:center;color:var(--faint);font-size:12px;padding:18px 6px}

/* ------------------------------- responsivo -------------------------------- */
@media(max-width:991.98px){
 .app-shell{flex-direction:column}
 .sidebar{position:sticky;width:100%;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:6px;padding:10px 12px 11px;z-index:40;overflow:visible;border-right:none;
  border-bottom:1px solid var(--line)}
 .brand{width:100%;padding:0 0 4px}.brand .t2{display:none}
 .brand .t1{font-size:15.5px;white-space:nowrap}
 .brand .logo{width:30px;height:30px;border-radius:9px}
 .navsec,.sidebar .foot,.menu-pai{display:none}
 .menu-item{white-space:nowrap;padding:7px 12px;font-size:12.5px;flex:none}
 .menu-sub{padding-left:12px;font-size:12.5px}
 .menu-sub::before{display:none}
 .obra-grid{grid-template-columns:1fr;gap:12px}
 .pred{text-align:left}.chev{display:none}
 .dcols{grid-template-columns:1fr}
 .form-control,.form-select{font-size:16px}  /* iOS não dá zoom no foco */
}
/* tabelas viram cartões empilhados no celular — zero arrasto lateral */
@media(max-width:700px){
 .table thead{display:none}
 .table,.table tbody,.table tr,.table td{display:block;width:100%;border:0}
 .table tr{background:var(--sup);border:1px solid var(--line);border-radius:12px;
  margin-bottom:10px;padding:6px 14px}
 .table tr:last-child{margin-bottom:0}
 .table td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right;
  border-bottom:1px dashed var(--line);padding:9px 0;background:transparent!important;box-shadow:none!important}
 .table td:last-child{border-bottom:none}
 .table td::before{content:attr(data-l);color:var(--faint);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;text-align:left;flex:none;font-weight:700}
 .table td.principal{display:block;text-align:left}
 .table.mem td{display:block;text-align:left;padding:4px 0}
 .table.mem td:first-child{padding-top:9px}
 .table.mem td:last-child{padding-bottom:11px}
 .fin-tots{justify-content:flex-start}
 .ind-row{grid-template-columns:96px 1fr 66px}
}

/* ============================ ENTRADA / LOGIN =============================
   "Saguão": a página que se vê antes de entrar. Identidade traduzida do
   estudo do Stitch (docs/referencias-design/stitch_executive_erp_design_project)
   para as nossas variáveis — o original era Tailwind + Inter + Material
   Symbols por CDN, e aqui nada de CDN.

   O que veio de lá: cartão de vidro sobre fundo escuro com vinheta, rótulos
   em CAIXA ALTA miúda, botão primário de alto contraste com seta, e o fundo
   animado (WebGL, desenhado no próprio navegador — zero arquivo externo).
   O que ficou de fora: login social, auto-cadastro e as fontes de CDN.
   ========================================================================= */
.entrada-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;padding:28px 18px;position:relative;isolation:isolate}
/* o canvas do fundo fica ATRÁS de tudo e não recebe clique */
#fundo-vivo{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%;
  background:var(--ground)}

.entrada-card{width:100%;max-width:460px;border-radius:12px;padding:36px 34px;
  background:var(--vidro);border:1px solid var(--vidro-borda);
  box-shadow:var(--sombra-alta);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

.entrada-marca{display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;margin-bottom:26px}
.entrada-marca .logo{width:38px;height:38px;border-radius:10px;display:grid;
  place-items:center;background:var(--brand-suave);border:1px solid var(--vidro-borda)}
.entrada-nome{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.entrada-eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

.entrada-card h1{font-size:27px;font-weight:800;letter-spacing:-.025em;
  line-height:1.15;margin:0 0 5px;color:var(--ink)}
.entrada-sub{font-size:13.5px;color:var(--muted);margin:0 0 24px;line-height:1.5}

/* rótulo em caixa alta miúda — o "ledger" do estudo */
.entrada-card .form-label{font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  display:block;margin-bottom:7px}
.entrada-card .form-control{background:var(--sup);border:1px solid var(--line);
  border-radius:7px;height:44px;font-size:14.5px;color:var(--ink)}
.entrada-card .form-control:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-suave)}

/* botão primário: alto contraste e seta que anda no hover */
.btn-entrar{width:100%;height:46px;border:none;border-radius:7px;cursor:pointer;
  background:var(--brand-solido);color:#fff;font-size:14.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:filter .15s,gap .15s}
.btn-entrar:hover{filter:brightness(1.09);gap:14px}
.btn-entrar .seta{font-family:var(--mono);font-size:15px}

.entrada-divisor{display:flex;align-items:center;gap:14px;margin:24px 0 18px}
.entrada-divisor::before,.entrada-divisor::after{content:"";height:1px;flex:1;
  background:var(--line)}
.entrada-divisor span{font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

.entrada-nota{font-size:12px;color:var(--faint);line-height:1.55;margin:0}
/* comando de terminal na tela de entrada (banco sem nenhum usuario). So
   variaveis do tema: cor literal aqui quebraria um dos dois modos. */
.entrada-comando{font-family:var(--mono);font-size:12px;color:var(--ink);
  background:var(--sup);border:1px solid var(--line);border-radius:7px;
  padding:11px 13px;margin:14px 0 0;white-space:pre-wrap;word-break:break-all}
.entrada-rodape{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--faint);text-align:center}

@media (max-width:520px){
  .entrada-card{padding:28px 22px;border-radius:10px}
  .entrada-card h1{font-size:24px}
}
/* quem pediu menos animação recebe o fundo parado, sem WebGL */
@media (prefers-reduced-motion:reduce){#fundo-vivo{display:none}}

/* ==================== PERMISSÕES POR ÁREA (tela de Usuários) ==============
   Grupo de caixas que o diretor marca para liberar tela por tela. Sem cor
   literal: tudo das variáveis, então os dois temas saem certos.
   ========================================================================= */
.linha-areas td{border-bottom:1px solid var(--line)}
.area-abrir{cursor:pointer;padding:11px 15px;font-family:var(--mono);font-size:12px;
  color:var(--brand);list-style:none;user-select:none}
.area-abrir::-webkit-details-marker{display:none}
.area-abrir:hover{background:var(--sup)}
.area-form{padding:6px 15px 20px}
.area-grade{display:grid;gap:10px;margin-top:10px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.area-caixa{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;
  background:var(--sup);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;font-size:13px;line-height:1.35}
.area-caixa:hover{border-color:var(--brand)}
.area-caixa input{margin-top:2px;flex:none;accent-color:var(--brand);width:16px;height:16px}
.area-dica{font-size:11.5px;color:var(--faint);line-height:1.4}

/* atalho de desenvolvimento na tela de entrada */
.atalho-dev{background:var(--warn-suave);border:1px solid var(--warn);
  border-radius:12px;padding:15px 16px;margin-bottom:22px}
.rot-dev{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--warn-texto);margin-bottom:11px;font-weight:700}

/* ======================= AJUDA CONTEXTUAL (o "i" redondo) =================
   Explica um termo ao passar o mouse OU ao tocar (celular) OU pelo teclado.
   Sem biblioteca, sem JavaScript — só :hover e :focus-within.

   O `:focus-within` é o que faz funcionar no celular: lá não existe hover, e
   o toque dá foco ao <span tabindex=0>. É também o caminho do leitor de tela.
   ========================================================================= */
.ajuda{position:relative;display:inline-flex;align-items:center;
  vertical-align:middle;margin-left:5px;cursor:help;outline:none}
.ajuda-i{width:15px;height:15px;display:block;color:var(--faint);
  transition:color .15s}
.ajuda:hover .ajuda-i,.ajuda:focus .ajuda-i{color:var(--brand)}

.ajuda-bolha{
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  width:max-content;max-width:310px;z-index:60;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--sombra-alta);
  padding:12px 14px;font-size:12.5px;font-weight:400;line-height:1.5;
  text-align:left;text-transform:none;letter-spacing:0;font-style:normal;
  white-space:normal;
  opacity:0;visibility:hidden;transition:opacity .12s}
.ajuda-bolha b{display:block;margin-bottom:5px;font-size:12px;color:var(--brand)}
.ajuda:hover .ajuda-bolha,.ajuda:focus .ajuda-bolha{opacity:1;visibility:visible}
/* bico apontando para o "i" */
.ajuda-bolha::after{content:"";position:absolute;top:100%;left:50%;
  transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--line)}

/* Perto da borda a bolha sairia da tela: ancora pela esquerda.
   Use `ajuda-dir` quando o "i" ficar no comeco de uma linha. */
.ajuda.ajuda-dir .ajuda-bolha{left:0;transform:none}
.ajuda.ajuda-dir .ajuda-bolha::after{left:14px}

@media (max-width:640px){
  /* No celular a bolha vai para o RODAPE DA TELA, largura cheia.
     Ancorar junto ao "i" faria a bolha vazar para fora sempre que o termo
     estivesse perto da borda — e num formulario quase todo termo esta.
     Presa embaixo, e sempre visivel e sempre legivel. */
  .ajuda-bolha{position:fixed;left:12px;right:12px;bottom:16px;top:auto;
    width:auto;max-width:none;transform:none}
  .ajuda-bolha::after{display:none}   /* sem bico: nao aponta mais para o "i" */
}