/* ============================================================================
   TEMA RADAR — "Nocturne" (desenho feito no Claude Design em 03/09/2026 pelo
   Samuel; fonte: claude-design/01 Tokens e Componentes.dc.html e 02 Radar e
   Ficha.dc.html). Substitui o tema "Executive" (v0.19–v0.28).

   O QUE MUDOU DE IDENTIDADE: fundo azul-acinzentado quase neutro, acento lilás
   usado como linha e não como mancha, fonte DO SISTEMA (nada de CDN — o app
   continua 100% offline), raio 8px, elevação por borda de 1px (no escuro) ou
   sombra de 1px (no claro), botões CONTORNADOS em vez de preenchidos, chips de
   estado com ponto, números em algarismos tabulares da própria fonte (o mono
   fica só para comando/código).

   O QUE NÃO MUDOU, DE PROPÓSITO: os NOMES das variáveis. `app.py`,
   `piloto/relatorio.py` e os SVG gerados em Python usam --ground, --panel,
   --ink, --muted, --faint, --line, --brand, --crit/--warn/--ok, --cost etc.
   Trocar o valor mantendo o nome é o que faz a troca de tema ser segura:
   nenhuma tela precisa saber que a paleta mudou.

   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).
   TODA cor vive numa variável aqui embaixo. Cor literal em qualquer outro lugar
   quebra um dos dois modos.
   ============================================================================ */

:root{
  /* ---------- MODO ESCURO (padrão) — tokens do desenho ---------- */
  --ground:#161826;            /* r-ground: fundo da tela */
  --panel:#232532;             /* r-surface: cards, campos */
  --panel-2:#292b31;           /* r-surface-2: trilhos, chips neutros */
  --sidebar:#111320;           /* r-sidebar */
  --sup:#161826;               /* campos de formulário assentam no fundo, não no card */
  --ink:#e9e9ed;--muted:#b2b6ca;--faint:#9397ab;
  --line:rgba(233,233,237,.14);
  --nav-on:rgba(233,233,237,.09);   /* item ativo do menu (ink 9%) */
  --brand:#9184d9;             /* curva física, marca */
  --brand-2:#b5abfc;           /* r-brand-ink: texto na marca, links */
  --brand-suave:#2b2741;       /* r-brand-tint */
  --brand-solido:#9184d9;
  --crit:#f87171;--crit-suave:rgba(248,113,113,.12);--crit-texto:#f87171;
  --warn:#fbbf24;--warn-suave:rgba(251,191,36,.12);--warn-texto:#fbbf24;
  --ok:#34d399;--ok-suave:rgba(52,211,153,.12);--ok-texto:#34d399;
  --cost:#9397ab;
  /* no escuro, elevação é BORDA — sem sombra empilhada */
  --sombra:0 0 0 1px #3f424d;
  --sombra-alta:0 0 0 1px #595d6c,0 6px 18px rgba(0,0,0,.55);
  /* o "hero" deixou de ser gradiente: é um card na tinta da marca */
  --hero:var(--brand-suave);--hero-lab:var(--brand-2);--hero-sub:var(--muted);
  --topbar:rgba(22,24,38,.86);
  --vidro:#232532;--vidro-borda:rgba(233,233,237,.14);
  /* tipografia: pilha do sistema (o desenho é system-ui) */
  --serif:system-ui,"Segoe UI",Roboto,Helvetica,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:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bs-border-color:var(--line);--bs-border-radius:8px;
  --bs-link-color-rgb:181,171,252;--bs-link-hover-color-rgb:210,206,253;
  --bs-secondary-color:var(--muted);
  --bs-font-monospace:ui-monospace,Consolas,monospace;
  --bs-primary:#9184d9;--bs-primary-rgb:145,132,217;
  --bs-emphasis-color:var(--ink);
  color-scheme:dark;
}

:root[data-tema="claro"]{
  /* ---------- MODO CLARO — tokens do desenho ---------- */
  --ground:#f3f5fe;--panel:#fbfbfe;--panel-2:#e4e7f5;--sidebar:#e9ecf8;--sup:#f3f5fe;
  --ink:#292b31;--muted:#595d6c;--faint:#75798c;
  --line:rgba(41,43,49,.12);--nav-on:rgba(41,43,49,.09);
  --brand:#796cbf;--brand-2:#5d5294;--brand-suave:#e7e5fe;--brand-solido:#796cbf;
  --crit:#dc2626;--crit-suave:rgba(220,38,38,.10);--crit-texto:#b91c1c;
  --warn:#b45309;--warn-suave:rgba(180,83,9,.10);--warn-texto:#92400e;
  --ok:#047857;--ok-suave:rgba(4,120,87,.10);--ok-texto:#065f46;
  --cost:#75798c;
  --sombra:0 1px 2px rgba(41,43,49,.08);
  --sombra-alta:0 1px 2px rgba(41,43,49,.08),0 10px 30px rgba(41,43,49,.12);
  --topbar:rgba(243,245,254,.88);
  --vidro:#fbfbfe;--vidro-borda:rgba(41,43,49,.12);
  --bs-link-color-rgb:93,82,148;--bs-link-hover-color-rgb:121,108,191;
  --bs-primary:#796cbf;--bs-primary-rgb:121,108,191;
  color-scheme:light;
}

body{background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased;
 font-size:14px;line-height:1.5}
/* números: algarismos tabulares da própria fonte (o desenho não usa mono) */
.num{font-variant-numeric:tabular-nums}
.titulo-serif{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.text-secondary{color:var(--muted)!important}
a{color:var(--brand-2)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* --------------------- botão de alternar claro/escuro --------------------- */
/* dois ícones em SVG; o CSS mostra um por vez conforme o tema */
#btn-tema .lua{display:none}
[data-tema="claro"] #btn-tema .sol{display:none}
[data-tema="claro"] #btn-tema .lua{display:flex}

/* ------------------------------- estrutura ------------------------------- */
/* o conteúdo vive numa "folha" arredondada sobre a cor da barra lateral —
   é o que dá o recorte do desenho */
.app-shell{min-height:100vh;background:var(--sidebar)}
.main-col{min-width:0;display:flex;flex-direction:column;margin:8px 8px 8px 0;
 background:var(--ground);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.content-col{max-width:1320px;margin:0 auto;width:100%;padding:24px 28px 36px;
 display:flex;flex-direction:column;gap:22px}

/* barra do topo: FINA (44px), só com a trilha da tela e os botões de canto.
   O título da página desceu para o conteúdo (.pg-head) — como no desenho. */
.topbar{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
 border-bottom:1px solid var(--line);font-size:13.5px;background:var(--topbar);
 backdrop-filter:blur(10px);z-index:10;position:sticky;top:0}
.crumb{display:flex;align-items:center;gap:8px;min-width:0}
.crumb .ic{color:var(--faint);display:flex;flex:none}
.crumb a{color:var(--faint);text-decoration:none;white-space:nowrap}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--faint)}
.crumb .atual{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-dir{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--faint)}
.tb-btn{width:30px;height:30px;border:0;background:transparent;color:inherit;display:grid;
 place-items:center;border-radius:6px;text-decoration:none;cursor:pointer;padding:0}
.tb-btn:hover{background:var(--nav-on);color:var(--ink)}
.tb-user{display:flex;align-items:center;gap:8px;padding:0 4px 0 10px;font-size:12.5px;
 color:var(--muted);line-height:1.2}
.tb-user b{font-weight:500;color:var(--ink);display:block}
.tb-user .perfil{color:var(--faint);font-size:11px}
.tb-sair{border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;
 font-size:12px;padding:3px 9px;border-radius:6px;cursor:pointer;margin-left:6px}
.tb-sair:hover{color:var(--ink);border-color:var(--faint)}

/* cabeçalho da página (dentro do conteúdo): h1 26px + linha de apoio + ações */
.pg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.pg-head h1{margin:0;font-size:26px;font-weight:500;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.pg-head .sub{color:var(--faint);margin-top:4px;font-size:14px}
.pg-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip-h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* pílulas de ação (Registrar medição · Nova obra · …) */
.pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{font-size:13.5px;font-weight:500;min-height:34px;padding:0 14px;border-radius:999px;
 border:1px solid var(--line);background:var(--panel);color:var(--ink);display:inline-flex;
 align-items:center;gap:8px;text-decoration:none;transition:border-color .12s}
.pill:hover{border-color:var(--faint);color:var(--ink)}
.pill-brand{border-color:var(--brand);background:var(--brand-suave);color:var(--brand-2)}
.pill-brand:hover{color:var(--brand-2);border-color:var(--brand-2)}

/* -------------------------------- sidebar -------------------------------- */
.sidebar{background:var(--sidebar);color:var(--muted);width:240px;flex:none;padding:12px 12px 16px;
 position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
/* topo: logo + nome da EMPRESA (não do produto) + dois botões pequenos */
.sb-top{display:flex;align-items:center;gap:6px;padding:0 4px;min-height:32px;margin-bottom:12px}
.sb-top .logo{width:20px;height:20px;display:grid;place-items:center;flex:none}
.sb-empresa{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);
 font-size:14px;font-weight:600;letter-spacing:-.01em;min-width:0}
.sb-empresa .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-empresa .chev{color:var(--faint);display:flex;flex:none}
.sb-acoes{margin-left:auto;display:flex;gap:2px;flex:none}
.sb-btn{width:30px;height:30px;border:0;background:transparent;color:var(--faint);display:grid;
 place-items:center;border-radius:6px;text-decoration:none;cursor:pointer;padding:0}
.sb-btn:hover{background:var(--nav-on);color:var(--ink)}
.sb-btn.quadro{border:1px solid var(--line);background:var(--panel);color:var(--muted)}
/* título de seção = botão que dobra o grupo; a seta gira para cima quando fechado */
.navsec{display:flex;align-items:center;gap:4px;color:var(--faint);font-size:12px;
 padding:0 10px;min-height:26px;margin-top:12px;width:100%;border:0;background:transparent;
 font-family:inherit;text-align:left;cursor:pointer;border-radius:6px}
.navsec:hover{color:var(--ink);background:var(--nav-on)}
.navsec svg{flex:none;transition:transform .15s}
.navgrupo{display:flex;flex-direction:column;gap:2px}
.navitens{display:flex;flex-direction:column;gap:2px}
.navgrupo.fechado .navsec svg{transform:rotate(180deg)}
.navgrupo.fechado .navitens{display:none}
/* item com filhos (Recursos, Comercial, Financeiro): mesmo botão, seta à direita */
.navpai{width:100%;border:0;background:transparent;font-family:inherit;text-align:left;cursor:pointer}
.navpai .seta{margin-left:auto;color:var(--faint);display:flex;transition:transform .15s}
.navgrupo.fechado .navpai .seta{transform:rotate(180deg)}
.menu-item{display:flex;align-items:center;gap:10px;min-height:30px;padding:0 10px;border-radius:6px;
 font-size:13.5px;color:var(--muted);text-decoration:none;transition:background .12s,color .12s}
.menu-item .ic{color:var(--faint);display:flex;flex:none}
.menu-item:hover{background:var(--nav-on);color:var(--ink)}
.menu-item.on{background:var(--nav-on);color:var(--ink)}
.menu-item.on .ic{color:var(--ink)}
.menu-item .conta{margin-left:auto;background:var(--crit-suave);color:var(--crit);font-size:11px;
 font-weight:600;border-radius:6px;padding:1px 7px;font-variant-numeric:tabular-nums}
/* subitens (Recursos, Comercial, Financeiro): só aparecem com o grupo aberto */
.menu-sub{padding-left:36px;font-size:13px;min-height:28px}
.sidebar .foot{margin-top:auto;padding:14px 10px 0;font-size:11.5px;color:var(--faint);line-height:1.5;
 display:flex;align-items:center;gap:8px}
.sidebar .foot svg{flex:none}

/* --------------------------------- cards --------------------------------- */
.card{--bs-card-bg:var(--panel);--bs-card-border-color:var(--line);
 --bs-card-color:var(--ink);--bs-card-border-radius:8px;box-shadow:var(--sombra)}
.card-title{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.card-title.h5{font-size:15px}

/* --------------------------------- botões -------------------------------- */
/* contornados, como no desenho: a marca é linha, não mancha */
.btn{--bs-btn-border-radius:8px;font-weight:500;--bs-btn-padding-y:.45rem;--bs-btn-padding-x:.9rem}
.btn-primary{--bs-btn-bg:transparent;--bs-btn-border-color:var(--brand);--bs-btn-color:var(--brand-2);
 --bs-btn-hover-bg:var(--brand-suave);--bs-btn-hover-border-color:var(--brand);--bs-btn-hover-color:var(--brand-2);
 --bs-btn-active-bg:var(--brand-suave);--bs-btn-active-border-color:var(--brand-2);--bs-btn-active-color:var(--ink);
 --bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:var(--line);--bs-btn-disabled-color:var(--faint)}
.btn-outline-primary{--bs-btn-color:var(--brand-2);--bs-btn-border-color:var(--brand);
 --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-suave);--bs-btn-active-border-color:var(--brand-2);--bs-btn-active-color:var(--ink)}
.btn-outline-secondary{--bs-btn-color:var(--ink);--bs-btn-border-color:var(--line);
 --bs-btn-hover-bg:var(--panel-2);--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--faint);
 --bs-btn-active-bg:var(--panel-2);--bs-btn-active-border-color:var(--faint);--bs-btn-active-color:var(--ink)}
.btn-outline-danger{--bs-btn-color:var(--crit);--bs-btn-border-color:var(--crit);
 --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-suave);--bs-btn-active-border-color:var(--crit);--bs-btn-active-color:var(--crit)}

/* ------------------------------- formulários ------------------------------ */
.form-label{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-bottom:5px;
 white-space:nowrap;line-height:17px;min-height:17px}
.form-control,.form-select{min-height:40px;height:auto;background-color:var(--sup);border-color:var(--line);
 border-radius:8px;color:var(--ink);font-size:14.5px}
.form-control::placeholder{color:var(--faint)}
input[type=file].form-control{min-height:40px;padding-top:7px}
.form-control:focus,.form-select:focus{background-color:var(--sup);border-color:var(--brand);
 box-shadow:0 0 0 3px var(--brand-suave);color:var(--ink)}
.form-text{font-size:12px;color:var(--faint);min-height:14px;line-height:1.35}
input[type=number].form-control{font-variant-numeric:tabular-nums;text-align:right}
form .row .btn{min-height:40px}

/* --------------------------------- alertas -------------------------------- */
/* borda na cor do estado + tinta do estado; texto na cor da tela (legível nos dois temas) */
.alert{border-radius:8px;font-size:14px;border-width:1px;color:var(--ink)}
.alert b,.alert strong{font-weight:600}
.alert-warning{--bs-alert-bg:var(--warn-suave);--bs-alert-border-color:var(--warn);--bs-alert-color:var(--ink)}
.alert-danger{--bs-alert-bg:var(--crit-suave);--bs-alert-border-color:var(--crit);--bs-alert-color:var(--ink)}
.alert-success{--bs-alert-bg:var(--ok-suave);--bs-alert-border-color:var(--ok);--bs-alert-color:var(--ink)}

/* --------------------------------- 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);font-variant-numeric:tabular-nums}
.table thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
 font-weight:500;border-bottom-color:var(--line);padding-bottom:8px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}

/* ----------------------------------- KPIs --------------------------------- */
.kpi{border-radius:8px}
.kpi .lab{font-size:13px;color:var(--muted)}
.kpi .val{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--ink);
 margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px;color:var(--faint);margin-top:4px}
.kpi-hero{background:var(--hero);--bs-card-bg:transparent;--bs-card-border-color:var(--brand);color:var(--ink)}
.kpi-hero .lab{color:var(--hero-lab)}.kpi-hero .sub{color:var(--hero-sub)}.kpi-hero .val{color:var(--ink)}
.v-crit{color:var(--crit)!important}.v-warn{color:var(--warn)!important}
.v-ok{color:var(--ok)!important}.v-brand{color:var(--brand-2)!important}

/* ----------------------------- estados / chips ---------------------------- */
/* chip com ponto: tinta do estado + texto na cor do estado, sem caixa alta */
.estado{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;
 border-radius:6px;padding:3px 9px;white-space:nowrap;text-transform:none;letter-spacing:0}
.estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.b-crit{background:var(--crit-suave);color:var(--crit)}
.b-warn{background:var(--warn-suave);color:var(--warn)}
.b-ok{background:var(--ok-suave);color:var(--ok)}
.b-novo{background:var(--panel-2);color:var(--muted)}

/* --------------------------- cartão de obra (radar) ------------------------ */
/* o desenho: nome + local, chip de estado, duas métricas com barra fina, e
   três linhas (gap · R$ previsto · prazo) abaixo de uma divisória */
.obra-lista{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.obra-card{display:flex;flex-direction:column;gap:14px;padding:18px 20px;
 background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sombra);
 color:var(--ink);text-decoration:none;transition:box-shadow .15s,border-color .15s}
.obra-card:hover{box-shadow:var(--sombra-alta);color:var(--ink)}
.obra-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.oname{font-size:17px;font-weight:500;color:var(--ink)}
.ometa{font-size:12.5px;color:var(--faint);margin-top:1px}
.obra-metricas{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-variant-numeric:tabular-nums}
.mlab{font-size:11px;color:var(--faint)}
.mval{font-size:20px;color:var(--ink)}
.mtrack{height:3px;border-radius:2px;background:var(--panel-2);margin-top:6px;position:relative;overflow:hidden}
.mfill{position:absolute;inset:0 auto 0 0;border-radius:2px}
.obra-linhas{display:flex;flex-direction:column;gap:7px;font-size:13.5px;border-top:1px solid var(--line);padding-top:12px}
.obra-linhas>div{display:flex;gap:8px}
.obra-linhas .ic{width:16px;flex:none;text-align:center;color:var(--faint)}
.gapline{font-size:13.5px}
.gapline .ic{color:inherit}

/* ------------------------- análise / faixa / memória ----------------------- */
.dcols{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{width:14px;height:2px;display:inline-block;vertical-align:middle;margin-right:6px}
.band{background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.bandval{font-size:26px;font-weight:400;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums}
.bandsub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.src{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.5}
.fact{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
 border-bottom:1px solid var(--line);font-size:13.5px;font-variant-numeric:tabular-nums}
.fact:last-child{border-bottom:none}.fact .k{color:var(--muted)}
.fact .v{font-weight:500;text-align:right}

/* a FAIXA: piso · mais provável · teto, sempre nesta ordem (desenho) */
.faixa{background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.faixa-lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.faixa-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;font-variant-numeric:tabular-nums}
.faixa-grid .k{font-size:11px;color:var(--faint)}
.faixa-piso .v,.faixa-teto .v{font-size:20px;color:var(--muted)}
.faixa-teto{text-align:right}
.faixa-mid{text-align:center}
.faixa-mid .v{font-size:34px;line-height:1.05}
.faixa-mid .sub{font-size:12px;color:var(--muted);margin-top:2px}
.faixa-bar{position:relative;height:6px;border-radius:3px;background:var(--panel-2);margin:12px 0 8px}
.faixa-span{position:absolute;top:0;bottom:0;border-radius:3px;opacity:.3}
.faixa-mark{position:absolute;top:-3px;width:2px;height:12px}
.faixa-base{font-size:12px;color:var(--faint);line-height:1.5}
/* sem faixa: caixa tracejada, honesta */
.faixa-vazia{border:1px dashed var(--line);border-radius:8px;padding:14px 16px;margin-bottom:14px;color:var(--muted)}
.faixa-vazia .t{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:4px}
.faixa-vazia .faixa-lab{margin-bottom:6px}

/* ------------------------------ 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:500;font-size:19px;letter-spacing:-.01em;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:11px;letter-spacing:.06em;text-transform:uppercase;
 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:12px;color:var(--faint)}
.fin-t .val{font-size:15px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.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:12.5px;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ind-lab a{color:var(--brand-2);text-decoration:none}
.ind-track{height:6px;background:var(--panel-2);border-radius:3px;position:relative;overflow:hidden}
.ind-fill{position:absolute;inset:0 auto 0 0;border-radius:3px}
.ind-val{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}

/* -------------------- 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:8px;padding:12px 15px;margin-bottom:10px;background:var(--panel)}
.ofx-linha:hover{box-shadow:var(--sombra-alta)}
.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:8px}
.entrada-card:hover{border-color:var(--brand);box-shadow:var(--sombra-alta)}
.ic-quad{width:40px;height:40px;flex:none;border-radius:8px;background:var(--brand-suave);
 display:grid;place-items:center;font-size:17px;color:var(--brand-2)}

/* --------------------------- 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:8px;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:500;font-size:14px;color:var(--ink);padding:2px 2px 12px}
.kb-n{display:inline-block;background:var(--panel-2);color:var(--muted);border-radius:6px;font-size:11px;padding:2px 7px;margin-left:7px;vertical-align:1px;font-variant-numeric:tabular-nums}
.kb-add summary{list-style:none;cursor:pointer;color:var(--muted);font-size:12.5px;border:1px dashed var(--line);border-radius:6px;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-2);border-color:var(--brand)}
.kb-lista{display:flex;flex-direction:column;gap:9px;margin-top:11px;min-height:34px}
.kb-card{background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:11px 13px;cursor:grab}
.kb-card:hover{box-shadow:var(--sombra-alta)}
.kb-card:active{cursor:grabbing}
.kb-titulo{font-size:13.5px;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:11.5px;cursor:pointer;padding:0;max-width:120px}
.kb-mover:hover{color:var(--brand-2)}
.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}


/* ============================ RADAR: "Bom dia" ============================
   Cabeçalho com saudação, pílulas de ação, o card da CARTEIRA (número grande
   + curva dos últimos 12 meses) ao lado da lista de OBRAS, e abaixo os
   cartões de obra. Tudo do desenho "Radar de risco" (claude-design/02).
   ========================================================================= */
.hero-grid{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:stretch}
.hero{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sombra);
 display:flex;flex-direction:column;overflow:hidden;min-height:300px}
.hero-top{padding:20px 22px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hero-lab{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.hero-val{font-size:30px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
 color:var(--ink);margin-top:2px;line-height:1.15}
/* centavos em expoente, como no desenho (R$ 44.300.000⁰⁰) */
.hero-val sup,.brl sup{font-size:.5em;font-weight:500;vertical-align:.5em;margin-left:1px;color:var(--muted)}
.hero-meta{display:flex;align-items:center;gap:18px;margin-top:10px;font-size:13.5px;flex-wrap:wrap}
.hero-meta .per{color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.hero-meta .up,.hero-meta .dn,.hero-meta .neutro{display:inline-flex;align-items:center;gap:5px;
 font-variant-numeric:tabular-nums}
.hero-meta .up{color:var(--ok)}.hero-meta .dn{color:var(--crit)}.hero-meta .neutro{color:var(--muted)}
.hero-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.hero-toggle span{width:36px;height:30px;display:grid;place-items:center;color:var(--faint)}
.hero-toggle span.on{background:var(--brand-suave);color:var(--brand-2)}
.hero .curva{display:block;margin-top:8px;flex:1;width:100%;min-height:150px}
.hero-x{display:flex;justify-content:space-between;padding:8px 22px 10px;background:var(--ground);
 border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}

.ol{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sombra);
 padding:16px 12px 12px;display:flex;flex-direction:column;gap:6px}
.ol-head{display:flex;align-items:center;justify-content:space-between;padding:0 10px 6px}
.ol-head .t{font-size:15px;font-weight:500;color:var(--ink)}
.ol-mais{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);
 color:var(--ink);font-size:16px;line-height:1;display:grid;place-items:center;text-decoration:none}
.ol-mais:hover{border-color:var(--faint);color:var(--ink)}
.ol-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:8px;
 text-decoration:none;color:var(--ink)}
.ol-row:hover{background:var(--nav-on);color:var(--ink)}
.ol-av{width:28px;height:28px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
 display:grid;place-items:center;font-size:10.5px;font-weight:600;color:var(--muted);flex:none}
.ol-txt{flex:1;min-width:0}
.ol-nome{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-sub{font-size:11.5px;color:var(--faint)}
.brl{font-size:15px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
 color:var(--ink);white-space:nowrap}
.ol-todas{border-top:1px solid var(--line);margin-top:auto;color:var(--muted);font-size:14px;border-radius:0}
.ol-todas .seta{margin-left:auto}

/* ============================== FICHA DA OBRA ==============================
   h1 + chip + linha de apoio + botões; faixa de aviso do gap; gráfico à
   esquerda e "Lançamento mensal" à direita; Custo × Prazo; memória de
   cálculo × (revisões + desfecho). Desenho "Ficha da obra".
   ========================================================================= */
.aviso-gap{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;
 border:1px solid var(--crit);background:var(--crit-suave);font-size:14px;color:var(--ink)}
.aviso-gap.warn{border-color:var(--warn);background:var(--warn-suave)}
.aviso-gap.ok{border-color:var(--ok);background:var(--ok-suave)}
.aviso-gap.novo{border-color:var(--line);background:var(--panel)}
.aviso-gap svg{flex:none}
.aviso-gap b{font-weight:600}
.aviso-gap .det{color:var(--muted)}
.aviso-gap .ajuda{margin-left:auto}
.ficha-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pilha{display:flex;flex-direction:column;gap:16px}
.card-t{font-size:15px;font-weight:500;color:var(--ink)}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-h .st{font-size:12px;white-space:nowrap}
.card-sub{font-size:12.5px;color:var(--faint)}
/* gráfico: eixo Y em HTML (fora do SVG, para não esticar), SVG sem proporção
   fixa, pontos finais e rótulos posicionados em % */
.graf{position:relative;margin-top:10px;padding:0 0 18px 34px}
.graf-y{position:absolute;left:0;top:0;bottom:18px;width:28px;font-size:10.5px;color:var(--faint);
 font-variant-numeric:tabular-nums;text-align:right}
.graf-y span{position:absolute;right:0;transform:translateY(-50%)}
.graf svg{display:block;width:100%;height:260px;overflow:visible}
.graf-x{position:absolute;left:34px;right:0;bottom:0;display:flex;justify-content:space-between;
 font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.graf-dot{position:absolute;right:0;width:8px;height:8px;border-radius:50%;transform:translate(50%,-50%)}
.graf-tag{position:absolute;right:10px;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.graf-nota{font-size:12px;color:var(--faint);margin-top:10px}
.legend-inline{display:flex;gap:16px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend-inline span{display:inline-flex;align-items:center;gap:6px}
.legend-inline i{width:14px;height:2px;display:inline-block}
.legend-inline i.area{height:8px;opacity:.25}
.lanc{display:flex;flex-direction:column;gap:14px}
.lanc .campo{display:flex;flex-direction:column;gap:5px}
.lanc .form-label{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--muted);margin:0;white-space:normal;min-height:0}
.lanc .form-control,.lanc .form-select{font-size:15px;min-height:40px}
.mem-row{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:baseline;padding:7px 0;
 border-top:1px solid var(--line);font-size:13.5px}
.mem-row .n{color:var(--faint);font-variant-numeric:tabular-nums}
.mem-row .conta{color:var(--faint);font-size:12.5px;font-variant-numeric:tabular-nums}
.mem-row .r{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:500}
.rev-list{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;font-variant-numeric:tabular-nums}
.rev-list .q,.rev-list .m{color:var(--faint)}
details.dobra>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px}
details.dobra>summary::-webkit-details-marker{display:none}
details.dobra[open]>summary{margin-bottom:12px}
.btn-mini{font:inherit;font-size:12.5px;padding:5px 10px;border-radius:6px;border:1px solid var(--line);
 background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn-mini:hover{border-color:var(--faint);color:var(--ink)}
.link-suave{font-size:13px;color:var(--brand-2);text-decoration:none}
.link-suave:hover{text-decoration:underline}
.prazo-val{font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.excluir-obra{display:flex;justify-content:flex-end}

/* ------------------------------- responsivo -------------------------------- */
@media(max-width:991.98px){
 .app-shell{flex-direction:column;background:var(--ground)}
 .main-col{margin:0;border:0;border-radius:0}
 .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-bottom:1px solid var(--line)}
 .sb-top{width:100%;margin-bottom:4px}
 .navsec,.sidebar .foot{display:none}
 .navgrupo,.navitens,.navgrupo.fechado .navitens{display:contents}
 .navpai{display:none}   /* na linha corrida os filhos aparecem direto */
 .menu-item{white-space:nowrap;padding:6px 12px;font-size:13px;flex:none;min-height:0}
 .menu-sub{padding-left:12px}
 .content-col{padding:16px 14px 28px;gap:16px}
 .topbar{padding:0 12px}
 .tb-user .txt{display:none}
 .obra-lista,.hero-grid,.ficha-grid,.g2{grid-template-columns:1fr}
 .dcols{grid-template-columns:1fr}
 .pg-head h1{font-size:22px}
 .hero-val{font-size:26px}
 .hero-meta .up{margin-left:0!important}
 .graf svg{height:200px}
 .form-control,.form-select{font-size:16px;min-height:48px}  /* 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(--panel);border:1px solid var(--line);border-radius:8px;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:11px;letter-spacing:.06em;
  text-transform:uppercase;text-align:left;flex:none}
 .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}
 .faixa-mid .v{font-size:30px}
 .faixa-piso .v,.faixa-teto .v{font-size:17px}
}

/* ============================ ENTRADA / LOGIN =============================
   "Acesse sua conta" (desenho 02): cartão centrado de 440px sobre o fundo com
   as duas curvas — física (marca) e custo (cinza) — desenhadas em SVG inline
   com as cores do tema. Sem WebGL, sem animação, sem arquivo externo.
   ========================================================================= */
.entrada-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;padding:96px 18px 64px;position:relative;isolation:isolate}
#fundo-curvas{position:fixed;inset:0;z-index:-1;width:100%;height:100%;display:block;pointer-events:none}
.entrada-topo{position:fixed;left:0;right:0;top:0;padding:24px 40px;display:flex;
  justify-content:space-between;align-items:center;gap:16px}
.entrada-marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.entrada-marca .logo{width:28px;height:28px;display:grid;place-items:center}
.entrada-nome{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.entrada-eyebrow{font-size:11px;color:var(--faint)}
.entrada-sigilo{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint)}

.entrada-card{width:100%;max-width:440px;border-radius:12px;padding:0;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(145,132,217,.08)}
[data-tema="claro"] .entrada-card{box-shadow:var(--sombra-alta)}
.entrada-form{padding:36px 40px 32px;display:flex;flex-direction:column;gap:6px}
.entrada-card h1{font-size:24px;font-weight:500;letter-spacing:-.015em;line-height:1.15;margin:0 0 4px;color:var(--ink)}
.entrada-sub{font-size:13px;color:var(--faint);margin:0 0 20px;line-height:1.5}
.entrada-card .form-label{font-size:13px;color:var(--muted);font-weight:400;text-transform:none;
  letter-spacing:0;margin-bottom:6px;white-space:normal}
.entrada-card .form-control{background:var(--ground);border:1px solid var(--line);border-radius:8px;
  min-height:44px;font-size:15px;color:var(--ink)}
.entrada-card .form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-suave)}
.btn-entrar{width:100%;min-height:46px;border-radius:8px;cursor:pointer;margin-top:4px;
  background:transparent;border:1px solid var(--brand);color:var(--brand-2);font-size:15px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:9px;transition:background .12s}
.btn-entrar:hover{background:var(--brand-suave)}
.btn-entrar .seta{font-size:15px}
.entrada-rodape-card{padding:14px 40px;border-top:1px solid var(--line);background:var(--ground);
  font-size:13px;color:var(--faint);text-align:center}
.entrada-rodape-card a{color:var(--brand-2);text-decoration:none}
.entrada-divisor{display:flex;align-items:center;gap:14px;margin:20px 0 14px}
.entrada-divisor::before,.entrada-divisor::after{content:"";height:1px;flex:1;background:var(--line)}
.entrada-divisor span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.entrada-nota{font-size:12.5px;color:var(--faint);line-height:1.55;margin:0}
.entrada-comando{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--ground);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin:14px 0 0;white-space:pre-wrap;word-break:break-all}
.entrada-rodape{position:fixed;left:40px;bottom:24px;display:flex;gap:20px;font-size:12px;color:var(--faint)}
.entrada-rodape a{color:var(--faint);text-decoration:none}
/* senha com o olho (mostrar/esconder) e o link "Esqueceu a senha?" — desenho Entrar */
.campo-senha{position:relative}
.campo-senha .form-control{padding-right:44px}
.olho{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;background:transparent;
  color:var(--faint);display:grid;place-items:center;cursor:pointer;border-radius:6px}
.olho:hover{color:var(--ink)}
.entrada-link{font-size:13px;color:var(--brand-2);text-decoration:none;margin-bottom:6px}

@media (max-width:640px){
  .entrada-wrap{padding:80px 14px 40px}
  .entrada-topo{padding:16px 18px}
  .entrada-sigilo{display:none}
  .entrada-form{padding:28px 22px 24px}
  .entrada-rodape-card{padding:12px 22px}
  .entrada-card h1{font-size:22px}
  .entrada-rodape{position:static;justify-content:center}
}

/* ==================== PERMISSÕES POR ÁREA (tela de Usuários) ============== */
.linha-areas td{border-bottom:1px solid var(--line)}
.area-abrir{cursor:pointer;padding:11px 15px;font-size:13px;color:var(--brand-2);list-style:none;user-select:none}
.area-abrir::-webkit-details-marker{display:none}
.area-abrir:hover{background:var(--panel-2)}
.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(--ground);
  border:1px solid var(--line);border-radius:8px;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:12px;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:8px;padding:14px 16px;margin-bottom:20px}
.rot-dev{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);margin-bottom:10px}

/* ======================= AJUDA CONTEXTUAL (o "i" redondo) =================
   Desktop: bolha ao passar o mouse ou focar. Celular: folha inferior de
   largura cheia (desenho "Ajuda (i) · toque"). Sem JavaScript.
   ========================================================================= */
.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-2)}
.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(--muted);
  border:1px solid var(--line);border-radius:8px;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:12.5px;color:var(--ink);font-weight:500}
.ajuda:hover .ajuda-bolha,.ajuda:focus .ajuda-bolha{opacity:1;visibility:visible}
.ajuda-bolha::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--line)}
.ajuda.ajuda-dir .ajuda-bolha{left:0;transform:none}
.ajuda.ajuda-dir .ajuda-bolha::after{left:14px}
@media (max-width:640px){
  .ajuda-bolha{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;transform:none;
    border-radius:16px 16px 0 0;padding:20px 20px 32px;font-size:14px;box-shadow:0 -8px 30px rgba(0,0,0,.4)}
  .ajuda-bolha b{font-size:18px;margin-bottom:8px}
  .ajuda-bolha::after{display:none}
}