/* Visão Integrada — visual "Cockpit escuro" (30/10/2026). Fontes: Space Grotesk + JetBrains Mono,
   com fallback do sistema se a rede do galpão não baixar. */
:root {
  --fundo: #070B14;
  --painel: #0C1222;
  --papel: #111A2E;
  --papel-2: #0E1628;
  --tinta: #DCE6FF;
  --forte: #F2F7FF;
  --suave: #8A97B5;
  --linha: rgba(124, 243, 255, .12);
  --linha-forte: rgba(124, 243, 255, .28);
  --acento: #7CF3FF;
  --acento-claro: rgba(124, 243, 255, .10);
  --verde: #9BFF6A;
  --verde-claro: rgba(155, 255, 106, .10);
  --perda: #FF8A8A;
  --perda-claro: rgba(255, 110, 110, .10);
  --aviso: #FFD68A;
  --aviso-claro: rgba(255, 196, 87, .09);
  --raio: 16px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--tinta);
  background: var(--fundo);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(1200px 520px at 85% -10%, rgba(124, 243, 255, .09), transparent 60%), var(--fundo);
  background-attachment: fixed;
}
a { color: var(--acento); text-decoration: none; }
a:hover { color: #C6FBFF; }
::selection { background: rgba(124, 243, 255, .3); }

/* ---------- estrutura: menu lateral + conteúdo ---------- */
.casca { display: flex; flex-wrap: wrap; min-height: 100vh; }
.lateral {
  flex: 1 1 220px; max-width: 236px; padding: 26px 16px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--linha); background: rgba(10, 16, 30, .75);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--forte);
  margin: 0 6px 22px; letter-spacing: .01em; }
.lateral .marca img { border-radius: 9px; box-shadow: 0 0 18px rgba(124, 243, 255, .35); }
.lateral nav { display: flex; flex-direction: column; gap: 3px; }
.lateral nav a { color: var(--suave); padding: 9px 12px; border-radius: 10px; border: 1px solid transparent;
  display: flex; align-items: center; gap: 10px; transition: all .18s ease; }
.lateral nav a svg { opacity: .8; flex: 0 0 auto; }
.lateral nav a:hover { color: var(--forte); background: rgba(124, 243, 255, .05); }
.lateral nav a.ativo { color: var(--forte); background: var(--acento-claro); border-color: rgba(124, 243, 255, .28);
  box-shadow: inset 2px 0 0 var(--acento); }
.lateral .rodape { margin-top: auto; display: grid; gap: 10px; padding-top: 18px; }
.lateral .sync { font-size: .78rem; color: var(--suave); display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; }
.lateral .sync .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 10px var(--verde); animation: pulso 2s ease-in-out infinite; }
.lateral form { margin: 0; }
.lateral form button { width: 100%; background: transparent; color: var(--suave); border-color: var(--linha); }
.lateral form button:hover { color: var(--forte); border-color: var(--linha-forte); }
@keyframes pulso { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

main { flex: 999 1 560px; min-width: 0; max-width: 1440px; padding: 30px clamp(14px, 3vw, 44px) 64px; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; color: var(--forte); }
h2 { font-size: 1.15rem; font-weight: 600; margin: 34px 0 12px; color: var(--forte); }
.sub { color: var(--suave); margin: 0 0 22px; line-height: 1.5; max-width: 980px; }

/* ---------- avisos ---------- */
.aviso { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid transparent; }
.aviso.ok { background: var(--verde-claro); color: var(--verde); border-color: rgba(155, 255, 106, .3); }
.aviso.erro { background: var(--perda-claro); color: var(--perda); border-color: rgba(255, 138, 138, .3); }
.aviso.atencao { background: var(--aviso-claro); color: var(--aviso); border-color: rgba(255, 196, 87, .3); }

/* ---------- cartões ---------- */
.cartao {
  background: linear-gradient(180deg, rgba(20, 30, 52, .85), rgba(12, 18, 34, .85));
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.cartao { color: inherit; display: block; }
a.cartao:hover, .kpi:hover { transform: translateY(-3px); border-color: rgba(124, 243, 255, .5);
  box-shadow: 0 0 0 1px rgba(124, 243, 255, .2), 0 18px 40px -18px rgba(124, 243, 255, .45); }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi .rotulo { color: var(--suave); font-size: .85rem; }
.kpi .valor { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; margin-top: 8px; color: var(--forte);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi.destaque { border-color: rgba(155, 255, 106, .45); background: linear-gradient(180deg, rgba(24, 52, 36, .8), rgba(12, 26, 20, .9));
  box-shadow: 0 0 40px -14px rgba(155, 255, 106, .35); }
.kpi.destaque .rotulo { color: #B8F5A0; }
.kpi.destaque .valor { color: var(--verde); font-size: 1.9rem; }

/* ---------- formulários e botões ---------- */
form.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 20px; }
label { display: grid; gap: 5px; font-size: .85rem; color: var(--suave); }
input, select, textarea, button {
  font: inherit; padding: 8px 12px; border: 1px solid var(--linha-forte); border-radius: 10px;
  background: var(--papel-2); color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(124, 243, 255, .15); }
input[type=checkbox], input[type=radio] { accent-color: var(--acento); width: 16px; height: 16px; padding: 0; }
input[type=file] { padding: 6px; }
button, .botao {
  background: var(--acento); color: #04121A; border-color: var(--acento); cursor: pointer; font-weight: 600;
  display: inline-block; padding: 8px 16px; border-radius: 10px; transition: all .18s ease;
}
button:hover, .botao:hover { box-shadow: 0 0 18px rgba(124, 243, 255, .45); color: #04121A; }
button.secundario, .botao.secundario { background: transparent; color: var(--tinta); border-color: var(--linha-forte); font-weight: 500; }
button.secundario:hover, .botao.secundario:hover { border-color: var(--acento); color: var(--forte); box-shadow: none; }
button.perigo, .botao.perigo { background: transparent; color: var(--perda); border-color: rgba(255, 138, 138, .45); font-weight: 500; }
button.perigo:hover, .botao.perigo:hover { background: var(--perda-claro); border-color: var(--perda); color: var(--perda); box-shadow: none; }
button.pequeno, .botao.pequeno { padding: 4px 10px; font-size: .82rem; border-radius: 8px; }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.botao { text-decoration: none; text-align: center; border: 1px solid var(--acento); font-size: inherit; line-height: normal; }

/* links que levam a outra tela: sempre com seta, nunca ação */
a.ir { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
a.ir::after { content: "→"; transition: transform .15s ease; }
a.ir:hover::after { transform: translateX(3px); }
a.voltar::before { content: "← "; }

/* ---------- tabelas ---------- */
.tabela-wrap, .tabela-rolagem { overflow-x: auto; background: rgba(12, 18, 34, .8); border: 1px solid var(--linha); border-radius: var(--raio); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); font-weight: 600;
  background: rgba(124, 243, 255, .03); }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(124, 243, 255, .05); }
td.n, th.n { text-align: right; }
td.n { font-family: var(--mono); font-size: .9rem; }
tr:last-child td { border-bottom: none; }
tfoot td { font-weight: 650; background: rgba(124, 243, 255, .04); }
.neg { color: var(--perda); }
.pos { color: var(--verde); }
.mudo { color: var(--suave); }

.etiqueta { display: inline-block; font-size: .72rem; padding: 3px 9px; border-radius: 99px;
  background: var(--aviso-claro); color: var(--aviso); border: 1px solid rgba(255, 196, 87, .25); margin: 1px 2px 1px 0; }
.etiqueta.ok { background: var(--verde-claro); color: var(--verde); border-color: rgba(155, 255, 106, .25); }
.etiqueta.erro { background: var(--perda-claro); color: var(--perda); border-color: rgba(255, 138, 138, .25); }

/* foto do produto */
.produto { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.produto .foto { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; object-fit: cover;
  background: #fff; border: 1px solid var(--linha); }
.produto .foto.vazia { background: var(--papel-2); display: inline-flex; align-items: center; justify-content: center; color: var(--suave); }
.produto .texto { display: grid; gap: 2px; white-space: normal; max-width: 420px; }

.barras { display: grid; gap: 4px; }
.barras .linha { display: grid; grid-template-columns: 70px 1fr 110px; gap: 8px; align-items: center; font-size: .85rem; }
.barras .trilho { height: 14px; background: rgba(255, 255, 255, .04); border-radius: 4px; position: relative; overflow: hidden; }
.barras .receita { position: absolute; inset: 0 auto 0 0; background: rgba(124, 243, 255, .25); }
.barras .margem { position: absolute; inset: 3px auto 3px 0; background: var(--verde); }
.barras .margem.neg { background: var(--perda); }

.duas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pilha { display: grid; gap: 12px; }
.grade-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.login { max-width: 380px; margin: 14vh auto; }
.paginacao { display: flex; gap: 8px; margin-top: 12px; }
.cabecalho-painel { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.cabecalho-painel .sub { margin-bottom: 12px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes form { margin: 0; }
.quando { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--suave);
  border: 1px solid var(--linha); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }

/* abas do grupo (topo da tela) */
.abas { display: flex; gap: 4px; margin: -6px 0 22px; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; }
.abas a { padding: 10px 16px; color: var(--suave); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500;
  margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; }
.abas a:hover { color: var(--forte); }
.abas a.ativo { color: var(--forte); border-bottom-color: var(--acento); }

/* "como funciona": explicação recolhida */
details.como { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; margin: 0 0 20px; max-width: 980px;
  background: rgba(12, 18, 34, .5); }
details.como summary { font-size: .88rem; list-style: none; }
details.como summary::-webkit-details-marker { display: none; }
details.como summary::before { content: "▸ "; }
details.como[open] summary::before { content: "▾ "; }
details.como[open] summary { margin-bottom: 8px; }
details.como > :not(summary) { color: var(--suave); line-height: 1.55; font-size: .9rem; }

/* blocos "precisa de você" / "o sistema está cuidando" */
.bloco-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--suave); margin: 26px 0 10px; font-weight: 600; }
.bloco-titulo.atencao { color: var(--aviso); }
.kpi.atencao { border-color: rgba(255, 196, 87, .45); background: linear-gradient(180deg, rgba(52, 40, 18, .8), rgba(26, 20, 12, .9)); }
.kpi.atencao .rotulo { color: #F5DDA8; }
.kpi.atencao .valor { color: var(--aviso); }
.kpi.selecionado { outline: 2px solid var(--acento); outline-offset: 2px; }
a.cartao.kpi::after { content: "ver →"; display: block; margin-top: 8px; font-size: .76rem; color: var(--acento); opacity: .7; }
a.cartao.kpi:hover::after { opacity: 1; }

/* barra de ação de uma lista (confirmação + botão) */
.barra-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px;
  padding: 12px 16px; border: 1px solid var(--linha-forte); border-radius: 12px; background: rgba(12, 18, 34, .9); }
.barra-acoes label { display: flex; align-items: center; gap: 8px; color: var(--tinta); font-size: .9rem; }
details summary { cursor: pointer; color: var(--suave); }
pre { background: var(--papel-2); border: 1px solid var(--linha); border-radius: 12px; padding: 14px; overflow: auto; font-family: var(--mono); font-size: .8rem; }

pre.log { white-space: pre-wrap; word-break: break-all; font-size: .78rem; max-height: 360px; overflow: auto; margin: 0; }
code { background: rgba(124, 243, 255, .07); color: var(--forte); padding: 1px 6px; border-radius: 5px; font-family: var(--mono); font-size: .82em; }

/* ---------- painel ---------- */
.periodos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.periodos a { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--linha-forte); background: transparent;
  color: var(--suave); font-size: .88rem; transition: all .18s ease; }
.periodos a.ativo { background: rgba(124, 243, 255, .16); border-color: var(--acento); color: var(--forte);
  box-shadow: 0 0 16px rgba(124, 243, 255, .3); }
.periodos a:hover { border-color: var(--acento); color: var(--forte); }
.kpis-principais { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 14px; }
.kpis-principais .cartao { padding: 22px; }
.kpis-principais .valor { font-size: 1.8rem; }
.kpis-secundarios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.delta { display: inline-block; margin-top: 8px; font-size: .8rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.delta.bom { color: var(--verde); }
.delta.ruim { color: var(--perda); }
.cascata { display: grid; gap: 4px; }
.cascata .linha { display: grid; grid-template-columns: 230px 1fr 130px 64px; gap: 14px; align-items: center; font-size: .92rem;
  padding: 8px 8px; border-radius: 10px; transition: background .15s ease; }
.cascata .linha:hover { background: rgba(124, 243, 255, .05); }
.cascata .linha.total { border-top: 1px solid var(--linha-forte); padding-top: 12px; margin-top: 6px; font-weight: 650; color: var(--forte); }
.cascata .trilho { height: 8px; background: rgba(255, 255, 255, .05); border-radius: 4px; overflow: hidden; }
.cascata .parte { height: 100%; background: #B07CFF; border-radius: 4px; box-shadow: 0 0 10px rgba(176, 124, 255, .6);
  animation: crescer .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.cascata .parte.sobra { background: var(--verde); box-shadow: 0 0 12px rgba(155, 255, 106, .6); }
.cascata .parte.sobra.neg { background: var(--perda); box-shadow: 0 0 12px rgba(255, 138, 138, .6); }
.cascata .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
@keyframes crescer { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .legenda { display: flex; gap: 16px; font-size: .85rem; color: var(--suave); margin-bottom: 8px; }
.grafico .amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.grafico .amostra.receita, .grafico .barra-receita { background: rgba(124, 243, 255, .35); fill: rgba(124, 243, 255, .35); }
.grafico .amostra.sobra, .grafico .barra-sobra { background: var(--verde); fill: var(--verde); }
.grafico .barra-sobra.neg { fill: var(--perda); }
.grafico .grade-linha { stroke: rgba(124, 243, 255, .08); stroke-width: 1; }
.grafico .base { stroke: rgba(124, 243, 255, .3); stroke-width: 1; }
.grafico .eixo { font-size: 11px; fill: var(--suave); font-family: var(--mono); }
.grafico .alvo { fill: transparent; }
.grafico .coluna:hover .alvo { fill: rgba(124, 243, 255, .07); }
.grafico .coluna:hover .barra-receita { fill: rgba(124, 243, 255, .6); }
.faixa { display: inline-block; min-width: 56px; text-align: center; padding: 3px 9px; border-radius: 99px; font-size: .8rem; font-family: var(--mono); }
.faixa.boa { background: var(--verde-claro); color: var(--verde); }
.faixa.media { background: var(--aviso-claro); color: var(--aviso); }
.faixa.ruim { background: var(--perda-claro); color: var(--perda); }
.nota { font-size: .8rem; margin-top: 6px; }
.grafico .rolagem { overflow-x: auto; }

@media (max-width: 760px) {
  .lateral { position: static; height: auto; max-width: none; flex-basis: 100%; padding: 14px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .lateral .marca { margin-bottom: 10px; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  .lateral .rodape { flex-direction: row; display: flex; flex-wrap: wrap; padding-top: 10px; }
  main { padding: 18px 12px 48px; }
  h1 { font-size: 1.6rem; }
  .cascata .linha { grid-template-columns: 110px 1fr 100px; }
  .cascata .linha > :last-child { display: none; }
  .kpis-principais .valor { font-size: 1.4rem; }
  .grafico svg { min-width: 640px; }
}

/* liga/desliga de automático */
.linha-auto { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0;
  padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; background: rgba(12, 18, 34, .6); }
.linha-auto + .linha-auto { margin-top: 8px; }

a.faixa-alerta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; text-decoration: none; }
a.faixa-alerta .ir { margin-left: auto; }
a.faixa-alerta .ir::after { content: " →"; }