/* ============================================================
   BRAIN — tema cockpit (escuro, acento verde-dinheiro)
   Vermelho é reservado a ALERTA. Amarelo a atenção leve.
   ============================================================ */
:root {
  --bg:        #0d1117;   /* fundo geral */
  --painel:    #161b22;   /* cards/paineis */
  --painel-2:  #1c2230;   /* trilhos, realces sutis */
  --borda:     #2a313c;
  --txt:       #e6edf3;
  --txt-mudo:  #8b949e;
  --verde:     #3fb950;   /* dinheiro / acento */
  --verde-esc: #238636;
  --vermelho:  #f85149;   /* SÓ alerta */
  --amarelo:   #d29922;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.layout { display: flex; min-height: 100vh; }

/* ---------- SIDEBAR ---------- */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #10151c;
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}
.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 20px; border-bottom: 1px solid var(--borda); margin-bottom: 14px;
}
/* Logo (PNG quadrado, fundo transparente): width=height fixos e na proporção
   do asset -> nunca estica; só reduz em 1:1. Asset de 256px cobre retina. */
.marca-logo { width: 34px; height: 34px; flex-shrink: 0; }
.marca-texto { display: flex; flex-direction: column; min-width: 0; }
.marca-brain {
  display: block; font-size: 22px; font-weight: 800; letter-spacing: 3px;
  color: var(--verde);
}
.marca-sub { display: block; font-size: 11px; color: var(--txt-mudo); letter-spacing: 1px; text-transform: uppercase; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--txt-mudo); text-decoration: none;
  font-size: 13.5px;
}
.nav-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .5;
}
.nav-item:hover:not(.inerte):not(.ativo) { background: var(--painel-2); color: var(--txt); }
.nav-item.ativo {
  background: rgba(63,185,80,.12); color: var(--verde); font-weight: 600;
}
.nav-item.ativo .dot { opacity: 1; }
.nav-item.inerte { opacity: .38; cursor: default; }

.sidebar-rodape { margin-top: auto; padding-top: 14px; }
.pill {
  font-size: 11px; color: var(--txt-mudo);
  border: 1px solid var(--borda); border-radius: 20px; padding: 3px 10px;
}

/* ---------- CONTEÚDO ---------- */
.conteudo { flex: 1; padding: 26px 30px; max-width: 1200px; }
.topo h1 { margin: 0; font-size: 24px; font-weight: 700; }
.subtitulo { margin: 4px 0 22px; color: var(--txt-mudo); }

/* ---------- CARDS ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.card {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 16px 18px;
}
.card.alerta { border-color: rgba(248,81,73,.35); }
.card-num { font-size: 30px; font-weight: 700; line-height: 1; }
.card-num.acento { color: var(--verde); }
.card-num.vermelho { color: var(--vermelho); }
.card-num .pct { font-size: 16px; color: var(--txt-mudo); margin-left: 2px; }
.card-lbl { margin-top: 8px; font-size: 12.5px; color: var(--txt-mudo); }
.fonte { display: inline-block; font-size: 10.5px; color: #5b6270; font-family: ui-monospace, monospace; }

/* ---------- GRADE (barras + atenção) ---------- */
.grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.painel {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 16px 18px;
}
.painel h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }

/* ---------- BARRAS ---------- */
.barras { display: flex; flex-direction: column; gap: 10px; }
.barra-linha { display: grid; grid-template-columns: 78px 1fr 62px; align-items: center; gap: 10px; }
.barra-rot { font-size: 13px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-trilho { background: var(--painel-2); border-radius: 6px; height: 24px; overflow: hidden; }
.barra-fill {
  height: 100%; background: linear-gradient(90deg, var(--verde-esc), var(--verde));
  border-radius: 6px; display: flex; align-items: center; justify-content: flex-end;
  min-width: 26px; transition: width .3s;
}
.barra-val { color: #04160a; font-weight: 700; font-size: 12px; padding-right: 8px; }
.barra-extra { font-size: 11px; color: var(--txt-mudo); text-align: right; }

/* ---------- ATENÇÃO ---------- */
.alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.alertas li { font-size: 13px; color: var(--txt); display: flex; gap: 10px; align-items: baseline; }
.alertas b { color: #fff; }
.tag {
  flex-shrink: 0; min-width: 34px; text-align: center;
  font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 6px;
}
.tag.vermelho { background: rgba(248,81,73,.15); color: var(--vermelho); }
.tag.amarelo  { background: rgba(210,153,34,.15); color: var(--amarelo); }
code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--verde); }

/* ---------- FILTROS ---------- */
.filtros {
  display: flex; flex-wrap: wrap; align-items: end; gap: 14px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 18px;
}
.filtros label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--txt-mudo); text-transform: uppercase; letter-spacing: .5px; }
.filtros select {
  background: var(--painel-2); color: var(--txt); border: 1px solid var(--borda);
  border-radius: 7px; padding: 8px 10px; font-size: 13px; min-width: 150px;
}
.filtros select:focus { outline: none; border-color: var(--verde); }
.filtros .limpar { font-size: 12px; color: var(--txt-mudo); margin-bottom: 9px; }
.btn { background: var(--verde-esc); color: #fff; border: 0; border-radius: 7px; padding: 8px 14px; cursor: pointer; }

/* ---------- LEITURA 3D x revenda ---------- */
.leitura { margin-bottom: 16px; }
.leitura-legenda { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--borda); color: var(--txt-mudo); }
.chip b { color: var(--txt); }
.chip-3d { border-color: rgba(248,81,73,.4); }
.chip-rev { border-color: rgba(139,148,158,.4); }
.leitura-num { font-size: 13px; color: var(--txt-mudo); margin: 0; }
.leitura-num .mudo { color: var(--txt-mudo); }

/* ---------- TABELA ---------- */
.tabela-wrap { padding: 0; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela thead th {
  text-align: left; padding: 11px 12px; color: var(--txt-mudo);
  font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--borda); white-space: nowrap; position: sticky; top: 0;
  background: var(--painel);
}
.tabela th.num, .tabela td.num { text-align: right; }
.tabela th.sort a { color: var(--verde); text-decoration: none; }
.tabela tbody td { padding: 9px 12px; border-bottom: 1px solid #20262f; white-space: nowrap; }
.tabela tbody tr:hover { background: rgba(255,255,255,.02); }
.tabela .mono { font-family: ui-monospace, monospace; font-size: 11.5px; }
.tabela .peq { font-size: 11px; color: var(--txt-mudo); }
.tabela .titulo { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tabela .forte { font-weight: 700; }
.vazio { text-align: center; color: var(--txt-mudo); padding: 26px !important; }

/* estados de linha */
.linha-vermelha td.forte { color: var(--vermelho); }
.linha-vermelha { background: rgba(248,81,73,.06); }
.linha-vermelha:hover { background: rgba(248,81,73,.10); }
.linha-cinza { color: var(--txt-mudo); background: rgba(139,148,158,.05); }
/* 3D em prejuízo real = alarme máximo */
.linha-prejuizo { background: rgba(248,81,73,.16); box-shadow: inset 3px 0 0 var(--vermelho); }
.linha-prejuizo:hover { background: rgba(248,81,73,.22); }
.linha-prejuizo td.forte { color: var(--vermelho); font-weight: 800; }
/* revenda sangrando = liquidação (neutro, sem alarme) */
.linha-liquidacao { background: rgba(139,148,158,.05); }
.linha-liquidacao td.forte { color: var(--txt-mudo); }
/* abaixo do piso sem tipo = neutro */
.linha-neutra td.forte { color: var(--amarelo); }

/* flags inline de status */
.flag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.flag-prejuizo { background: var(--vermelho); color: #fff; }
.flag-liq { background: rgba(139,148,158,.18); color: var(--txt-mudo); }
.prejuizo-num { color: var(--vermelho); font-weight: 800; }

/* ---------- FAIXA DE ALARME ---------- */
.alarme-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.alarme-ind { display: flex; align-items: center; gap: 12px; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 16px; }
.ai-num { font-size: 30px; font-weight: 800; line-height: 1; }
.ai-lbl { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--txt); }
.ai-lbl small { font-weight: 400; font-size: 11px; color: var(--txt-mudo); margin-top: 2px; }
.ind-3d { border-color: rgba(248,81,73,.4); }
.ind-3d .ai-num { color: var(--vermelho); }
.ind-liq .ai-num { color: var(--txt-mudo); }
.ind-prejuizo { border-color: var(--vermelho); background: rgba(248,81,73,.12); box-shadow: inset 3px 0 0 var(--vermelho); }
.ind-prejuizo .ai-num { color: var(--vermelho); }
.ind-ok .ai-num { color: var(--verde); }

/* badges de tipo */
.badge { font-size: 10.5px; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.badge-3d  { background: rgba(63,185,80,.14);  color: var(--verde); }
.badge-revenda { background: rgba(88,166,255,.14); color: #58a6ff; }
.badge-nd  { background: rgba(139,148,158,.14); color: var(--txt-mudo); }

/* ---------- PARÂMETROS ---------- */
.tag-escrita {
  font-size: 10.5px; font-weight: 600; vertical-align: middle; margin-left: 10px;
  color: var(--amarelo); border: 1px solid rgba(210,153,34,.4); border-radius: 20px;
  padding: 3px 10px; text-transform: uppercase; letter-spacing: .5px;
}

.banner { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; }
.banner-ok  { background: rgba(63,185,80,.12); border: 1px solid rgba(63,185,80,.4); color: var(--verde); }
.banner-erro { background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.4); color: var(--vermelho); }

/* confirmação (dry-run visual) */
.confirma {
  background: rgba(210,153,34,.07); border: 1px solid rgba(210,153,34,.45);
  border-radius: 10px; padding: 18px 20px; margin-bottom: 20px;
}
.confirma h2 { margin: 0 0 8px; font-size: 16px; }
.confirma-resumo { margin: 0 0 14px; font-size: 14px; }
.val-old { color: var(--txt-mudo); text-decoration: line-through; }
.val-new { color: var(--verde); font-weight: 700; }
.caminho { display: flex; flex-direction: column; gap: 3px; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.caminho-tag { font-weight: 700; font-size: 13.5px; }
.caminho-explica { font-size: 12px; color: var(--txt-mudo); }
.caminho-same_day { background: rgba(88,166,255,.10); border: 1px solid rgba(88,166,255,.4); }
.caminho-same_day .caminho-tag { color: #58a6ff; }
.caminho-nova_vigencia { background: rgba(63,185,80,.10); border: 1px solid rgba(63,185,80,.4); }
.caminho-nova_vigencia .caminho-tag { color: var(--verde); }
.confirma-ops { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.op { font-size: 13px; color: var(--txt); background: var(--painel-2); border-radius: 7px; padding: 9px 12px; }
.op-n { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center;
        background: var(--amarelo); color: #10151c; border-radius: 50%; font-weight: 700; font-size: 12px; margin-right: 8px; }
.op code, .confirma-nota code { background: #0b0f14; padding: 1px 6px; border-radius: 4px; color: var(--verde); }
.confirma-nota { font-size: 12.5px; color: var(--txt-mudo); margin: 0 0 14px; }
.confirma-acoes { display: flex; align-items: center; gap: 14px; }
.btn-perigo { background: var(--amarelo); color: #10151c; font-weight: 700; border: 0; border-radius: 7px; padding: 9px 16px; cursor: pointer; }
.btn-cancelar { color: var(--txt-mudo); font-size: 13px; }

/* lista de vigentes */
.param-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.param { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; }
.param-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.param-chave { font-size: 14px; color: var(--verde); }
.param-valor { font-size: 26px; font-weight: 700; }
.param-desc { font-size: 12px; color: var(--txt-mudo); margin: 8px 0 12px; line-height: 1.4; }
.param-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: 11px; }
.param-desde { font-size: 11px; color: var(--txt-mudo); }
.form-editar { display: flex; gap: 6px; }
.form-editar input {
  width: 110px; background: var(--bg); color: var(--txt); border: 1px solid var(--borda);
  border-radius: 6px; padding: 6px 9px; font-size: 13px;
}
.form-editar input:focus { outline: none; border-color: var(--verde); }

/* histórico */
.hist { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 8px; background: var(--painel-2); }
.hist summary { cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--txt); }
.hist summary code { color: var(--verde); }
.tabela-hist { margin: 4px 0; }
.tabela-hist th { position: static; background: transparent; }
.mudo-txt { font-size: 13px; color: var(--txt-mudo); }

/* ---------- RESUMO & ANÁLISE ---------- */
.resumo { margin-bottom: 16px; padding: 0; }
.resumo > summary { cursor: pointer; padding: 14px 18px; font-size: 15px; font-weight: 600; list-style: none; }
.resumo > summary::-webkit-details-marker { display: none; }
.resumo > summary::before { content: "▸ "; color: var(--txt-mudo); }
.resumo[open] > summary::before { content: "▾ "; }
.agrupar-form { padding: 0 18px 6px; }
.agrupar-form label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-mudo); text-transform: uppercase; letter-spacing: .5px; }
.agrupar-form select { background: var(--painel-2); color: var(--txt); border: 1px solid var(--borda); border-radius: 7px; padding: 6px 10px; font-size: 13px; }
.resumo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 6px 18px 18px; }
.resumo-bloco h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--txt); }
.resumo-bloco h3 .fonte { text-transform: none; letter-spacing: 0; }
.tabela-mini { font-size: 12px; }
.tabela-mini th { position: static; background: transparent; padding: 6px 8px; }
.tabela-mini td { padding: 6px 8px; }
.verde-num { color: var(--verde); }
.abc-nota { font-size: 11px; color: var(--txt-mudo); margin: 8px 0 0; }

/* badges ABC */
.abc { display: inline-block; width: 20px; text-align: center; font-weight: 700; font-size: 11px; border-radius: 5px; padding: 1px 0; }
.abc-A { background: rgba(63,185,80,.18); color: var(--verde); }
.abc-B { background: rgba(210,153,34,.18); color: var(--amarelo); }
.abc-C { background: rgba(139,148,158,.15); color: var(--txt-mudo); }

/* ---------- VENDAS ---------- */
.cards-5 { grid-template-columns: repeat(5, 1fr); }

/* gráfico de evolução (SVG) */
.chart-wrap { overflow-x: auto; padding: 4px 0 2px; }
.chart { display: block; }
.ch-axis { stroke: var(--borda); stroke-width: 1; }
.ch-bar { fill: rgba(63,185,80,.30); }
.ch-bar:hover { fill: rgba(63,185,80,.55); }
.ch-line { fill: none; stroke: var(--verde); stroke-width: 2; }
.ch-dot { fill: var(--verde); }
.ch-xlabel { fill: var(--txt-mudo); font-size: 9.5px; }
.ch-legenda { font-size: 11.5px; color: var(--txt-mudo); margin-top: 8px; }
.lg { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }
.lg::before { content: ""; width: 12px; height: 3px; border-radius: 2px; }
.lg-bar::before { background: rgba(63,185,80,.45); height: 10px; width: 10px; border-radius: 2px; }
.lg-line::before { background: var(--verde); }

/* variação vs período anterior */
.delta { font-size: 12px; font-weight: 700; margin-left: 7px; vertical-align: middle; white-space: nowrap; }
.delta.up { color: var(--verde); }
.delta.down { color: var(--vermelho); }
.comp-nota { font-size: 11.5px; color: var(--txt-mudo); margin: -8px 0 18px; }

/* rankings 3 colunas */
.rank-grade { grid-template-columns: repeat(3, 1fr); }

/* tendência de giro (Full) */
.tabela .up { color: var(--verde); font-weight: 700; }
.tabela .down { color: var(--vermelho); font-weight: 700; }

/* ---------- FULL: meta 100% ---------- */
.meta-full { background: var(--painel); border: 1px solid rgba(63,185,80,.4); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
.meta-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.meta-titulo { font-size: 15px; font-weight: 700; }
.meta-num { font-size: 12.5px; color: var(--txt-mudo); }
.meta-num b { color: var(--vermelho); }
.meta-barra { height: 14px; background: var(--painel-2); border-radius: 8px; overflow: hidden; }
.meta-fill { height: 100%; background: linear-gradient(90deg, var(--verde-esc), var(--verde)); border-radius: 8px; transition: width .3s; }

/* gráfico de giro (barras) */
.ch-bar-mig { fill: rgba(248,81,73,.45); }
.ch-bar-mig:hover { fill: rgba(248,81,73,.7); }
.ch-vlabel { fill: var(--txt); font-size: 10px; font-weight: 700; }

/* modo teste */
.modo-teste .regra-casa { font-size: 12.5px; color: var(--txt-mudo); background: rgba(210,153,34,.08); border-left: 3px solid var(--amarelo); padding: 9px 12px; border-radius: 6px; margin: 4px 0 14px; }
.modo-teste .regra-casa b { color: var(--txt); }
.teste-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.teste-card { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; }
.tc-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tc-cab code { font-size: 13px; color: var(--verde); }
.tc-nome { font-size: 11.5px; color: var(--txt-mudo); margin: 4px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-lote { margin-bottom: 10px; }
.tc-big { font-size: 26px; font-weight: 800; color: var(--acento, var(--verde)); }
.tc-lote small, .tc-cob-txt small { color: var(--txt-mudo); font-size: 10.5px; }
.cob-bar { height: 8px; background: var(--painel); border-radius: 5px; overflow: hidden; margin-bottom: 4px; }
.cob-fill { height: 100%; border-radius: 5px; }
.cob-verde { background: var(--verde); }
.cob-amarelo { background: var(--amarelo); }
.cob-vermelho { background: var(--vermelho); }
.tc-cob-txt { font-size: 11.5px; color: var(--txt); }
.tc-rodape { margin-top: 8px; border-top: 1px solid var(--borda); padding-top: 7px; }

/* Onda 2 — roadmap na tela (visual de "pendente") */
.onda2 { border-style: dashed; border-color: var(--borda); background: transparent; }
.onda2 h2 { color: var(--txt-mudo); }
.onda2-lista { margin: 4px 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.onda2-lista li { font-size: 12.5px; color: var(--txt-mudo); }
.onda2-lista b { color: var(--txt); }

/* diagnóstico do prejuízo */
.diag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.diag-alarme { background: var(--vermelho); color: #fff; }
.diag-aviso { background: rgba(210,153,34,.18); color: var(--amarelo); }
.diag-nd { background: rgba(139,148,158,.15); color: var(--txt-mudo); }
.diag-ok { background: rgba(63,185,80,.15); color: var(--verde); }
.diag-legenda { font-size: 11px; color: var(--txt-mudo); margin: 4px 0 12px; line-height: 1.9; }

/* prejuízo */
.prejuizo h3.prej-titulo { font-size: 13px; margin: 16px 0 8px; }
.prej-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 14px; }
.prej-ind { display: flex; align-items: center; gap: 12px; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 16px; }
.prej-ind .ai-num { font-size: 28px; font-weight: 800; line-height: 1; }
.prej-ind .ai-lbl { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; }
.prej-ind .ai-lbl small { font-weight: 400; font-size: 11px; color: var(--txt-mudo); margin-top: 2px; }
.ind-prejuizo { border-color: var(--vermelho); background: rgba(248,81,73,.10); box-shadow: inset 3px 0 0 var(--vermelho); }
.ind-prejuizo .ai-num { color: var(--vermelho); }
.ind-liq .ai-num { color: var(--txt-mudo); }

@media (max-width: 1100px) { .cards-5 { grid-template-columns: repeat(3, 1fr); } .rank-grade { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .grade { grid-template-columns: 1fr; }
  .resumo-grade { grid-template-columns: 1fr; }
  .prej-strip { grid-template-columns: 1fr; }
}

/* ===== CASCATA DE CUSTO (aba Vendas): faturamento -> custos -> margem ===== */
.cascata { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 10px 0 4px; }
.cas-bloco { flex: 1 1 110px; min-width: 104px; border-radius: 9px; padding: 10px 12px;
             border: 1px solid rgba(240,246,252,.09); }
.cas-op { font-size: 11px; opacity: .75; letter-spacing: .4px; text-transform: uppercase; }
.cas-num { font-size: 17px; font-weight: 800; margin: 3px 0 1px; white-space: nowrap; }
.cas-pct { font-size: 11px; opacity: .8; }
.cas-fat     { background: rgba(88,166,255,.10);  box-shadow: inset 0 3px 0 #58a6ff; }
.cas-fat .cas-num { color: #58a6ff; }
.cas-custo   { background: rgba(248,81,73,.10);   box-shadow: inset 0 3px 0 var(--vermelho); }
.cas-custo .cas-num { color: var(--vermelho); }
.cas-ajuste  { background: rgba(240,246,252,.05); box-shadow: inset 0 3px 0 #8b949e; }
.cas-margem  { background: rgba(63,185,80,.12);   box-shadow: inset 0 3px 0 var(--verde); }
.cas-margem .cas-num { color: var(--verde); }
.cas-margem.negativa { background: rgba(248,81,73,.16); box-shadow: inset 0 3px 0 var(--vermelho); }
.cas-margem.negativa .cas-num { color: var(--vermelho); }
.cas-seta { align-self: center; opacity: .5; font-weight: 700; }
.cas-aviso { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 6px;
             font-size: 12px; background: rgba(210,153,34,.15); color: #d29922; }

/* ---------- LOGIN (tela cheia, sem sidebar) ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.login-marca { text-align: center; padding-bottom: 18px; margin-bottom: 10px;
  border-bottom: 1px solid var(--borda); }
.login-erro {
  background: rgba(248,81,73,.12);
  border: 1px solid rgba(248,81,73,.45);
  color: var(--vermelho);
  border-radius: 7px; padding: 9px 12px; font-size: 13px;
  margin-bottom: 4px;
}
.login-label { font-size: 12px; color: var(--txt-mudo); margin-top: 8px;
  text-transform: uppercase; letter-spacing: .6px; }
.login-input {
  background: var(--painel-2); color: var(--txt);
  border: 1px solid var(--borda); border-radius: 7px;
  padding: 10px 12px; font-size: 14px; outline: none;
}
.login-input:focus { border-color: var(--verde-esc); }
.login-botao {
  margin-top: 16px;
  background: var(--verde-esc); color: #fff;
  border: none; border-radius: 7px;
  padding: 11px 12px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.login-botao:hover { background: var(--verde); }

/* ---------- USUÁRIO LOGADO (rodapé da sidebar) ---------- */
.usuario-logado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 8px 10px; font-size: 12.5px;
}
.usuario-nome { color: var(--txt-mudo); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.usuario-sair { color: var(--vermelho); text-decoration: none; flex-shrink: 0; }
.usuario-sair:hover { text-decoration: underline; }

/* ---------- LOGO na tela de login / páginas públicas ---------- */
/* Logo COMPLETO (glifo + wordmark "Brain"): só a largura é fixada e a altura
   segue a proporção do arquivo (height:auto) — nunca estica. O asset tem
   420px de largura (>2x do render) — nítido em retina. */
.login-logo {
  display: block; width: 176px; height: auto;
  margin: 0 auto 12px;
}