/* ===========================================================================
   Central — estilo. Claro e escuro pelo sistema operacional.
   =========================================================================== */

:root {
  --fundo: #f4f5f8;
  --superficie: #ffffff;
  --superficie-2: #f8f9fb;
  --texto: #1b2130;
  --suave: #5f687a;
  --borda: #e1e4ea;
  --primaria: #2f5bea;
  --primaria-texto: #ffffff;
  --primaria-suave: #e8eefe;
  --ok: #178a52;
  --ok-suave: #e3f5ec;
  --alerta: #a86500;
  --alerta-suave: #fdf1dc;
  --erro: #c73333;
  --erro-suave: #fbe6e6;
  --neutro-suave: #eceef2;
  --sombra: 0 1px 2px rgba(20, 30, 50, .06), 0 2px 8px rgba(20, 30, 50, .05);
  --raio: 10px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Gráficos: três séries validadas (dataviz, 18/09/2026) — recebido, despesas, lucro. */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --grade: #eceef2;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #12151b;
    --superficie: #1a1e26;
    --superficie-2: #20252f;
    --texto: #e6e9ef;
    --suave: #9aa3b4;
    --borda: #2d3340;
    --primaria: #6b8cff;
    --primaria-texto: #0d1020;
    --primaria-suave: #232c4a;
    --ok: #4cc98a;
    --ok-suave: #173327;
    --alerta: #f0b44c;
    --alerta-suave: #3a2d15;
    --erro: #f07272;
    --erro-suave: #3d1d1f;
    --neutro-suave: #262b35;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --grade: #262b35;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--texto);
}

a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }

.oculto { display: none !important; }
.suave { color: var(--suave); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* --- Esqueleto --- */

.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.lateral {
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca { display: flex; gap: 10px; align-items: center; color: var(--texto); padding: 0 6px; }
.marca:hover { text-decoration: none; }
.marca strong { display: block; font-size: 16px; }
.marca small { color: var(--suave); font-size: 11.5px; }
.marca-icone {
  width: 32px; height: 32px; border-radius: 8px; background: var(--primaria); flex: none;
  background-image: radial-gradient(circle at 31% 34%, #fff 3px, transparent 3.5px),
                    radial-gradient(circle at 69% 34%, rgba(255,255,255,.7) 3px, transparent 3.5px),
                    radial-gradient(circle at 31% 66%, rgba(255,255,255,.7) 3px, transparent 3.5px),
                    radial-gradient(circle at 69% 66%, #fff 3px, transparent 3.5px);
}

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  color: var(--texto); padding: 8px 10px; border-radius: 7px; font-weight: 500;
}
.menu a:hover { background: var(--superficie-2); text-decoration: none; }
.menu a.ativo { background: var(--primaria-suave); color: var(--primaria); }

.conteudo { padding: 24px 28px 60px; min-width: 0; outline: none; }

.cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.cabecalho p { margin: 4px 0 0; color: var(--suave); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Botões e campos --- */

.botao {
  font: inherit; font-weight: 550; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto); border-radius: 7px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
}
.botao:hover { background: var(--superficie-2); text-decoration: none; }
.botao:disabled { opacity: .5; cursor: default; }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
.botao.primario:hover { filter: brightness(1.07); }
.botao.perigo { color: var(--erro); }
.botao.perigo.primario { background: var(--erro); border-color: var(--erro); color: #fff; }
.botao.pequeno { padding: 3px 9px; min-height: 26px; font-size: 12.5px; }
.botao.fantasma { border-color: transparent; background: transparent; }
.botao.fantasma:hover { background: var(--superficie-2); }

input, select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 7px; padding: 6px 9px; min-height: 32px; width: 100%;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus, .botao:focus-visible {
  outline: 2px solid var(--primaria); outline-offset: 1px;
}
input[type=checkbox] { width: auto; min-height: 0; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtros select, .filtros input { width: auto; }
input.pesquisa { width: min(420px, 100%); padding-left: 32px;
  background: var(--superficie) no-repeat 10px center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a93a5' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E"); }

/* --- Cartões e números --- */

.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px;
}
.cartao + .cartao { margin-top: 14px; }
.cartao > h2 { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.numero { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; box-shadow: var(--sombra); }
.numero small { color: var(--suave); display: block; font-size: 12px; }
.numero strong { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; display: block; margin-top: 2px; }
.numero span { color: var(--suave); font-size: 12px; }
.numero.ruim strong { color: var(--erro); }

.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.grade-2 > .cartao + .cartao { margin-top: 0; }

/* --- Alertas --- */

.alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alertas li { padding: 8px 10px; border-radius: 7px; background: var(--alerta-suave); display: flex; gap: 8px; align-items: baseline; }
.alertas li.alto { background: var(--erro-suave); }
.alertas li::before { content: "●"; color: var(--alerta); font-size: 10px; }
.alertas li.alto::before { color: var(--erro); }

/* --- Etiquetas e luzes --- */

.etiqueta {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px;
  background: var(--neutro-suave); color: var(--suave); white-space: nowrap;
}
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.alerta { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta.erro { background: var(--erro-suave); color: var(--erro); }
.etiqueta.azul { background: var(--primaria-suave); color: var(--primaria); }

.luz { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--borda); flex: none; }
.luz.acesa { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }

/* --- Painel de sistemas --- */

.sistemas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sis { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.sis-topo { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.sis-topo a { color: var(--texto); font-weight: 650; font-size: 14.5px; }
.sis-topo small { display: block; color: var(--suave); font-size: 12px; }
.sis-portas { display: flex; flex-direction: column; gap: 6px; }
.porta { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--superficie-2); border-radius: 7px; }
.porta .rotulo { flex: 1; min-width: 0; }
.porta .rotulo small { color: var(--suave); }
.sis-rodape { font-size: 12px; color: var(--suave); display: flex; gap: 10px; flex-wrap: wrap; }
.aviso-producao { font-size: 12px; color: var(--alerta); }

/* --- Tabelas --- */

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--suave); background: var(--superficie-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--superficie-2); }
tfoot td { font-weight: 650; background: var(--superficie-2); }
td .botao + .botao { margin-left: 4px; }
.vazio { padding: 28px; text-align: center; color: var(--suave); }

/* --- Detalhe do sistema --- */

.ficha { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 12px; flex-wrap: wrap; }
.abas button {
  font: inherit; background: none; border: 0; padding: 8px 12px; cursor: pointer; color: var(--suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 550;
}
.abas button.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }

.terminal {
  background: #0f131a; color: #d7dde8; font-family: var(--mono); font-size: 12px; line-height: 1.5;
  padding: 12px; border-radius: 8px; max-height: 420px; overflow: auto; white-space: pre-wrap; margin: 0;
  overflow-wrap: anywhere;
}

.markdown { max-height: 640px; overflow: auto; padding-right: 6px; }
.markdown h1 { font-size: 18px; margin: 14px 0 8px; }
.markdown h2 { font-size: 15.5px; margin: 16px 0 6px; }
.markdown h3, .markdown h4 { font-size: 14px; margin: 12px 0 4px; }
.markdown p { margin: 6px 0; }
.markdown ul, .markdown ol { margin: 6px 0; padding-left: 22px; }
.markdown code { font-family: var(--mono); font-size: 12.5px; background: var(--neutro-suave); padding: 0 4px; border-radius: 4px; }
.markdown pre { background: var(--superficie-2); border: 1px solid var(--borda); padding: 10px; border-radius: 7px; overflow: auto; }
.markdown pre code { background: none; padding: 0; }
.markdown blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--borda); color: var(--suave); }
.markdown hr { border: 0; border-top: 1px solid var(--borda); margin: 14px 0; }
.markdown table { margin: 8px 0; font-size: 13px; }

/* --- Diálogo --- */

.dialogo {
  border: 1px solid var(--borda); border-radius: 12px; padding: 0; background: var(--superficie); color: var(--texto);
  width: min(620px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.dialogo::backdrop { background: rgba(15, 20, 30, .45); }
.dialogo form { display: flex; flex-direction: column; max-height: calc(100vh - 60px); }
.dialogo header { padding: 16px 18px 6px; }
.dialogo .corpo { padding: 10px 18px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dialogo footer { padding: 12px 18px 16px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--borda); }
.dialogo footer .esquerda { margin-right: auto; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-size: 12.5px; font-weight: 600; color: var(--suave); }
.campo small { color: var(--suave); font-size: 12px; }
.campo.marcar { flex-direction: row; align-items: center; gap: 8px; }
.campo.marcar label { color: var(--texto); font-weight: 500; font-size: 14px; }
.erro-form { grid-column: 1 / -1; color: var(--erro); background: var(--erro-suave); padding: 8px 10px; border-radius: 7px; margin: 0; }

/* --- Avisos --- */

.avisos { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.aviso {
  background: var(--texto); color: var(--fundo); padding: 10px 14px; border-radius: 8px; max-width: 420px;
  box-shadow: 0 6px 24px rgba(0,0,0,.2); animation: entra .15s ease-out;
}
.aviso.erro { background: var(--erro); color: #fff; }
@keyframes entra { from { transform: translateY(6px); opacity: 0; } }

/* --- Entrada (servidor) e quem está logado --- */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.entrada-cartao { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.entrada-marca { display: flex; gap: 10px; align-items: center; }
.entrada-marca strong { display: block; font-size: 18px; }
.entrada-marca small { font-size: 12px; }

.quem { border-top: 1px solid var(--borda); padding: 12px 6px 0; display: flex; flex-direction: column; gap: 6px; }
.quem small { color: var(--suave); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* --- Cronômetro --- */

.cronometro { margin-top: auto; border-top: 1px solid var(--borda); padding: 12px 6px 0; display: flex; flex-direction: column; gap: 6px; }
.cronometro small { color: var(--suave); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cronometro .tempo { font-family: var(--mono); font-size: 20px; font-weight: 600; }
.cronometro .rodando { color: var(--ok); }

/* --- Resultado (dashboard) --- */

.numero.heroi { grid-column: span 2; }
.numero.heroi strong { font-size: 40px; line-height: 1.1; }
.numero.negativo strong { color: var(--erro); }
.delta { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; margin-top: 4px; }
.delta.bom { color: var(--ok); }
.delta.ruim { color: var(--erro); }
.delta.neutro { color: var(--suave); }

.periodo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.periodo select, .periodo input { width: auto; }

.grafico { position: relative; }
.grafico svg { display: block; width: 100%; overflow: visible; }
.grafico text { font: 11.5px "Segoe UI", system-ui, sans-serif; fill: var(--suave); }
.grafico .rotulo-direto { fill: var(--texto); font-weight: 600; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--suave); margin-bottom: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda i.linha { height: 2px; width: 14px; border-radius: 1px; }
.dica {
  position: absolute; pointer-events: none; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 8px 10px; font-size: 12.5px;
  min-width: 170px; z-index: 5; display: none;
}
.dica strong { display: block; margin-bottom: 4px; }
.dica div { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.dica div span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); }
.dica i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.barras-h { display: flex; flex-direction: column; gap: 10px; }
.barra-h { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 10px; align-items: center; }
.barra-h .trilho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barra-h .preenchimento { height: 14px; background: var(--serie-1); border-radius: 0 4px 4px 0; min-width: 2px; }
.barra-h .valor { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }

.valor-negativo { color: var(--erro); }

/* --- Estreito --- */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; gap: 10px; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .cronometro { display: none; }
  .conteudo { padding: 18px 16px 50px; }
  .grade-2 { grid-template-columns: 1fr; }
  .dialogo .corpo { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { margin-top: 6px; }
  .numero.heroi { grid-column: auto; }
  .barra-h { grid-template-columns: 1fr; gap: 4px; }
}