/* SGM · componentes e layout */
*{box-sizing:border-box}
html{color-scheme:dark}
:root[data-theme="light"] html,:root[data-theme="light"]{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--corpo);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--red-br);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
small{font-size:.82em}
.mudo{color:var(--muted)}
.inline{display:inline}

/* ---------- entrada ---------- */
body.entrada{display:flex;min-height:100vh;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 20% -10%,rgba(227,6,19,.18),transparent 60%),var(--bg)}
.entrada-main{width:100%;display:flex;justify-content:center;padding:24px}
.cartao-entrada{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;box-shadow:var(--sombra)}
.cartao-entrada h1{font-size:26px;font-weight:800;margin:4px 0 6px}
.cartao-entrada .sub{color:var(--muted);margin:0 0 18px}
.logo-entrada{height:56px;margin-bottom:14px}
.ajuda{color:var(--muted);font-size:13px;margin:16px 0 0}

/* ---------- estrutura logada ---------- */
body.logado{display:flex;min-height:100vh}
.lateral{width:var(--lateral-w);flex:none;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:18px 12px;gap:10px;z-index:20}
.marca{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;border-bottom:1px solid var(--line)}
.marca img{width:38px;height:38px;object-fit:contain}
.marca strong{display:block;font-family:var(--display);font-size:15px;letter-spacing:.02em;text-transform:uppercase}
.marca span{display:block;font-size:11.5px;color:var(--muted)}
.menu{display:flex;flex-direction:column;gap:2px;flex:1}
.menu .sep{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);padding:12px 10px 4px}
.item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink2);font-weight:500;font-size:14px;border:0;background:none;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.item:hover{background:var(--surface2);color:var(--ink);text-decoration:none}
.item.ativo{background:var(--red-soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--red)}
.item i{width:18px;height:18px;display:inline-flex;color:var(--muted)}
.item.ativo i,.item:hover i{color:var(--red-br)}
.item i svg{width:18px;height:18px}
.rodape-lateral{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:2px}
.chave{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13.5px;color:var(--ink2);cursor:pointer}
.chave input{accent-color:var(--red)}
.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{display:flex;align-items:center;gap:14px;padding:12px 28px;border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:10}
.hamburger{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:4px 10px;font-size:18px}
.topo-empresa{flex:1;display:flex;align-items:center;gap:12px}
.sel-empresa{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;font-weight:600;min-width:220px}
.selo-demo{font-size:10.5px;letter-spacing:.14em;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:3px 8px;font-weight:700}
.topo-usuario{text-align:right;line-height:1.15}
.topo-usuario small{display:block;color:var(--muted)}
.principal{padding:26px 28px;max-width:1080px;width:100%}
.principal.largo{max-width:1380px}
.rodape{padding:18px 28px;color:var(--muted2);font-size:12.5px;border-top:1px solid var(--line);margin-top:auto}
body.demo .principal{outline:2px dashed var(--warn);outline-offset:-8px;border-radius:16px}

/* ---------- cabeçalho ---------- */
.cabecalho{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-br);font-weight:700;margin-bottom:3px}
.cabecalho h1{font-size:26px;font-weight:800;text-transform:uppercase}
.cabecalho .sub{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.acoes{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;text-decoration:none!important;transition:.15s}
.btn:hover{border-color:var(--red);color:var(--ink)}
.btn.primario{background:var(--red);border-color:var(--red);color:#fff}
.btn.primario:hover{background:var(--red-br);border-color:var(--red-br)}
.btn.fantasma{background:transparent}
.btn.perigo{color:var(--crit)}.btn.perigo:hover{border-color:var(--crit)}
.btn.pequeno{padding:6px 10px;font-size:11.5px;border-radius:8px}
.btn.largo{width:100%}

/* ---------- formulários ---------- */
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--ink2)}
.form label small{font-weight:400;color:var(--muted)}
.form input[type=text],.form input[type=email],.form input[type=password],.form input[type=number],.form input[type=date],.form select,.form textarea{background:var(--bg);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
.form input[type=file]{color:var(--muted)}
.form textarea{resize:vertical}
.form .chave{flex-direction:row;padding:4px 0}
.acoes-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.flash{padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);margin-bottom:12px;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flash.ok{border-color:var(--ok);background:var(--ok-soft)}
.flash.erro{border-color:var(--crit);background:var(--crit-soft)}
.flash.aviso{border-color:var(--warn);background:var(--warn-soft)}
.flash.compacta{padding:8px 12px;font-size:13px}

/* ---------- cartões e grades ---------- */
.cartao{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--sombra);margin-bottom:16px;min-width:0}
.cartao-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cartao-topo strong{font-family:var(--display);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grade-2.uma{grid-template-columns:1fr}
.grade-2.apertada{gap:10px}
.grade-2.lateral-estreita{grid-template-columns:360px minmax(0,1fr)}
.grade-cadastro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.9fr);gap:16px;align-items:start}
.grade-6{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vazio{padding:60px 20px;text-align:center;color:var(--muted)}

/* ---------- cadastro ---------- */
.linha-data{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.linha-data label{flex:0 0 200px}
.data-info strong{display:block}.data-info span{color:var(--muted);font-size:13px}
.nav-mes a{display:inline-block;padding:2px 10px;border:1px solid var(--line);border-radius:8px;margin-left:4px;color:var(--ink)}
.tabela-rolagem{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabela td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabela tfoot th{border-top:1px solid var(--line2);border-bottom:0;color:var(--ink);font-size:12px}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabela.compacta td,.tabela.compacta th{padding:6px 8px}
.tabela tr.sel td{background:var(--red-soft)}
.tabela tr.falta td{color:var(--muted2)}
.tabela tr.inativa td{opacity:.55}
.tabela tr.clicavel{cursor:pointer}.tabela tr.clicavel:hover td{background:var(--surface2)}
.tabela td.obs{max-width:280px;color:var(--muted);font-size:12.5px}
.tabela td a small{color:var(--muted)}
.acoes-linha{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.selo{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);border-radius:6px;padding:2px 6px;color:var(--muted);font-weight:700}
.selo.ambar{color:var(--warn);border-color:var(--warn)}
.selo.vermelho{color:var(--red-br);border-color:var(--red)}
.ponto-ambar{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warn);margin-left:4px;vertical-align:middle}
code.prov{color:var(--warn);font-weight:700}

/* ---------- filtros ---------- */
.filtros{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);font-size:13px;font-weight:600}
.chip:hover{text-decoration:none;border-color:var(--red)}
.chip.ativo{background:var(--red);border-color:var(--red);color:#fff}
.intervalo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.intervalo input[type=date]{background:var(--surface);color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px}
.intervalo span{color:var(--muted);font-size:13px}

/* ---------- régua de KPIs ---------- */
.regua{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.regua.compacta{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .rotulo{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi .valor{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.kpi .var{font-size:12px;font-weight:600}
.kpi .var small{color:var(--muted2);font-weight:400}
.var.up{color:var(--ok)}.var.down{color:var(--crit)}.var.flat{color:var(--muted)}

/* ---------- funil ---------- */
.funil{display:flex;flex-direction:column;gap:10px}
.etapa-rot{display:flex;justify-content:space-between;font-size:13px;margin-bottom:3px}
.etapa-rot strong{font-family:var(--display);font-variant-numeric:tabular-nums}
.barra{height:10px;background:var(--surface2);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--red-br));border-radius:999px;transition:width .6s}
.barra.ok i{background:linear-gradient(90deg,#16a34a,var(--ok))}
.barra.mini{height:7px;width:110px;display:inline-block;vertical-align:middle;margin-right:6px}
.etapa-taxa{font-size:12px;color:var(--muted);margin-top:2px}
.etapa-taxa.ambar{color:var(--warn);font-weight:600}
.linha-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:12px;padding-top:10px;font-size:13.5px}
.linha-total strong{font-family:var(--display)}

/* ---------- metas ---------- */
.metas-lista,.cascata{display:flex;flex-direction:column;gap:12px}
.meta-rot,.casc-rot{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;gap:8px}
.meta-rot strong,.casc-rot strong{font-family:var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.meta-rot strong small{color:var(--muted);font-weight:500}
.casc-rot em{font-style:normal;color:var(--muted2);font-size:11.5px;margin-left:6px}
.meta-sub{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:3px;gap:8px}
.casc-linha{display:flex;gap:10px;align-items:baseline;font-size:13px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.casc-linha strong{font-family:var(--display);font-size:18px;margin-left:auto}
.casc-linha em{font-style:normal;color:var(--muted);font-size:12px}
.projecao{margin-top:16px;border-top:1px dashed var(--line2);padding-top:12px}
.projecao .t{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.projecao .t small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted2)}
.projecao-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.projecao-grade div{background:var(--surface2);border-radius:10px;padding:8px 10px}
.projecao-grade span{display:block;font-size:11px;color:var(--muted)}
.projecao-grade strong{font-family:var(--display);font-size:16px}
.etapas-meta{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.etapa-meta{display:grid;grid-template-columns:1.3fr auto 1fr auto;gap:10px;align-items:center;background:var(--surface2);border-radius:10px;padding:8px 12px}
.etapa-meta .rot{font-size:13px;font-weight:600}.etapa-meta .rot small{display:block;font-weight:400;color:var(--muted)}
.etapa-meta .modo{display:flex;gap:8px;font-size:12px}
.etapa-meta .modo label{display:flex;align-items:center;gap:4px;font-weight:600;cursor:pointer}
.etapa-meta .modo input{accent-color:var(--red)}
.etapa-meta input[type=text]{background:var(--bg);color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:7px 10px;font:inherit;width:100%}
.etapa-meta .previsto{font-family:var(--display);font-size:15px;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.previa{font-size:13px;color:var(--muted);background:var(--surface2);border-radius:10px;padding:10px 12px;line-height:1.7}
.previa strong{color:var(--ink);font-family:var(--display)}
.tabela.carteira td.prog{white-space:nowrap}

/* ---------- avisos ---------- */
.avisos{position:relative;margin-bottom:18px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.avisos-trilho{display:flex;transition:transform .5s;will-change:transform}
.aviso{flex:0 0 100%;display:block;color:inherit;text-decoration:none!important}
.aviso img{display:block;width:100%;aspect-ratio:5/1;object-fit:cover}
.aviso-texto{display:flex;align-items:center;gap:14px;padding:16px 20px;min-height:72px;background:linear-gradient(90deg,var(--red-soft),transparent)}
.aviso-texto strong{font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.aviso-texto span{color:var(--ink2);flex:1}
.aviso-texto em{font-style:normal;margin-left:auto}
.avisos-pontos{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.avisos-pontos i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.avisos-pontos i.ativo{background:var(--red-br)}
.lista-avisos{display:flex;flex-direction:column;gap:12px}
.aviso-linha{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.aviso-linha.inativa{opacity:.55}
.aviso-linha img{display:block;width:100%;aspect-ratio:5/1;object-fit:cover}
.aviso-txt{padding:14px 16px;display:flex;flex-direction:column}
.aviso-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
.previa-img img{max-width:100%;border-radius:8px;border:1px solid var(--line)}

/* ---------- tour ---------- */
.tour-fundo{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90}
.tour-caixa{position:absolute;z-index:92;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;width:300px;box-shadow:var(--sombra);font-size:14px}
.tour-caixa .passo{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-br);font-weight:700}
.tour-caixa strong{display:block;font-family:var(--display);margin:2px 0 4px}
.tour-caixa p{margin:0 0 10px;color:var(--ink2)}
.tour-caixa .botoes{display:flex;justify-content:space-between;gap:8px}
.tour-destaque{position:relative;z-index:91;box-shadow:0 0 0 4px var(--red),0 0 0 9999px rgba(0,0,0,.55);border-radius:10px;background:var(--surface)}

/* ---------- responsivo ---------- */
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15}
@media (max-width:1100px){.grade-2,.grade-2.lateral-estreita,.grade-cadastro{grid-template-columns:1fr}.projecao-grade{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .lateral{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s}
  body.menu-aberto .lateral{transform:none}body.menu-aberto .backdrop{display:block}
  .hamburger{display:block}.topo{padding:10px 14px}.principal{padding:16px 14px}
  .grade-6{grid-template-columns:repeat(2,1fr)}.etapa-meta{grid-template-columns:1fr 1fr}.topo-usuario{display:none}
  .sel-empresa{min-width:0;flex:1}
}