/* ============ TOKENS — tema base (preto neutro + verde-neon) ============ */
:root {
  --bg-0: #050505;
  --bg-1: #0D0D0D;
  --bg-2: #131313;
  --bg-3: #1B1B1B;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .18);
  --text-1: #F2F2F0;
  --text-2: #A3A3A0;
  --text-3: #6B6B68;
  --text-on-accent: #0C1400;
  --accent: #CCFF33;
  --accent-pressed: #A9DB14;
  --accent-soft: rgba(204, 255, 51, .12);
  --success: #34D17B;
  --success-soft: rgba(52, 209, 123, .12);
  --danger: #FF5D55;
  --danger-soft: rgba(255, 93, 85, .12);
  --warning: #FF8A3D;
  --warning-soft: rgba(255, 138, 61, .14);
  --info: #5CA9FF;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px;

  --e-1: none;
  --e-2: 0 8px 24px rgba(0, 0, 0, .55);
  --e-3: 0 -8px 32px rgba(0, 0, 0, .5);
  --focus-ring: 0 0 0 3px rgba(204, 255, 51, .35);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; }

html { color-scheme: dark; }

body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100dvh;
}

.page { max-width: 480px; margin: 0 auto; padding: var(--sp-4); }

h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }

.eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}

.money { font-family: var(--font-mono); font-weight: 500; }

/* ============ COMPONENTES BASE ============ */
.card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-6); box-shadow: var(--e-1);
}

.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: 48px; border: none; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  cursor: pointer; transition: transform 80ms ease, background 80ms ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--text-on-accent); min-height: 56px; }
.btn-primary:active { background: var(--accent-pressed); }
.btn-secondary { background: transparent; color: var(--text-1); border: 1px solid var(--border-strong); }
.btn:disabled { opacity: .45; pointer-events: none; }

.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-weight: 700; font-size: .8125rem; color: var(--text-2); }
.input {
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  background: var(--bg-2); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 1rem;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.input.input-error { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .875rem; }

.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.75rem;
  font-stretch: 120%; letter-spacing: -.01em;
}
.wordmark::after { content: "."; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ FASE 2 — USUARIO ============ */
.screen-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-6); }
.btn-ghost { background: none; border: none; color: var(--accent); font-family: var(--font-body); font-size: .9375rem; cursor: pointer; text-decoration: none; padding: var(--sp-2); }
.btn-mini { font-size: .8125rem; padding: var(--sp-1); }
.stack { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.secao-titulo { margin-bottom: var(--sp-2); }

.trip-card { display: block; background: var(--bg-1); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--e-1); color: inherit; text-decoration: none; }
.trip-card:active { background: var(--bg-3); transform: scale(.99); }
.trip-card.estado-positivo { border-left-color: var(--success); }
.trip-card.estado-atencao { border-left-color: var(--warning); }
.trip-card.estado-negativo { border-left-color: var(--danger); }
.trip-card.estado-neutro { border-left-color: var(--info); }
.trip-card-fechada { opacity: .7; border-left-color: var(--text-3); }
.trip-card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.trip-card-meta { color: var(--text-2); font-size: .875rem; margin: var(--sp-1) 0 var(--sp-3); }
.trip-card-valor { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }

.cor-positivo { color: var(--success); }
.cor-atencao { color: var(--warning); }
.cor-negativo { color: var(--danger); }
.cor-bg-positivo { background: var(--success); }
.cor-bg-atencao { background: var(--warning); }
.cor-bg-negativo { background: var(--danger); }

.fuel-bar { height: 8px; border-radius: var(--r-pill); background: var(--bg-3); overflow: hidden; margin-top: var(--sp-2); }
.fuel-fill { height: 100%; border-radius: var(--r-pill); transition: width 600ms ease-out; }

.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-2); border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.badge-ativa { background: var(--success-soft); color: var(--success); }
.badge-em_revisao { background: var(--warning-soft); color: var(--warning); }
.badge-fechada { background: var(--bg-3); color: var(--text-3); }
.badge-registrada { background: var(--warning-soft); color: var(--warning); }
.badge-aprovada { background: var(--success-soft); color: var(--success); }
.badge-rejeitada { background: var(--danger-soft); color: var(--danger); }

.saldo-hero { text-align: center; padding: var(--sp-6) 0 var(--sp-8); }
.saldo-valor { font-size: clamp(2.5rem, 12vw, 3.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.saldo-sub { color: var(--text-2); font-size: .875rem; margin-top: var(--sp-2); }
.fuel-bar-hero { max-width: 280px; margin: var(--sp-4) auto 0; }

.timeline { display: grid; gap: var(--sp-2); padding-left: var(--sp-4); border-left: 2px dashed var(--border-strong); margin-bottom: 120px; }
.expense-item { display: flex; align-items: center; gap: var(--sp-3); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-height: 64px; }
.expense-rejeitada .money { text-decoration: line-through; color: var(--text-3); }
.cat-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3); color: var(--text-2); font-family: var(--font-display); font-weight: 700; flex-shrink: 0; }
.expense-info { flex: 1; min-width: 0; }
.expense-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.expense-meta { color: var(--text-2); font-size: .8125rem; }
.expense-right { display: grid; justify-items: end; gap: var(--sp-1); }

.empty-state { text-align: center; color: var(--text-2); padding: var(--sp-12) var(--sp-4); }
.dash-line { width: 2px; height: 48px; margin: 0 auto var(--sp-4); background: repeating-linear-gradient(to bottom, var(--border-strong) 0 8px, transparent 8px 16px); }

.cta-bar { position: fixed; bottom: 0; left: 0; right: 0; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-0) 85%, transparent); backdrop-filter: blur(8px); display: grid; gap: var(--sp-2); max-width: 480px; margin: 0 auto; }
.cta-manual { text-align: center; font-size: .875rem; }
.cta-bar .btn-primary { min-height: 60px; box-shadow: 0 4px 20px rgba(204, 255, 51, .22); }

.leitura-overlay { display: none; position: fixed; inset: 0; background: rgba(4, 6, 10, .85); z-index: 50; place-items: center; text-align: center; }
.leitura-overlay.htmx-request { display: grid; }
.scanline { width: min(70vw, 320px); height: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(204, 255, 51, .6); animation: varredura 1.8s ease-in-out infinite; margin-bottom: var(--sp-4); }
@keyframes varredura { 0%, 100% { transform: translateY(-40px); } 50% { transform: translateY(40px); } }

.flash { position: fixed; bottom: 120px; left: var(--sp-4); right: var(--sp-4); max-width: 448px; margin: 0 auto; background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--e-2); z-index: 60; }
.flash-erro { border-left-color: var(--danger); }

.sheet-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); margin-top: var(--sp-4); box-shadow: var(--e-3); margin-bottom: 120px; }
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
.chip { flex-shrink: 0; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--border); font-size: .8125rem; cursor: pointer; }
.chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); }
.valor-grande { font-family: var(--font-mono); font-size: 2rem; font-weight: 600; }

/* ============ FASE 3 — ADMIN ============ */
.resumo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.resumo-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); text-align: center; font-size: .8125rem; color: var(--text-2); text-decoration: none; }
.resumo-card.ativo { border-color: var(--accent); color: var(--text-1); }
.acoes-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.btn-inline { width: auto; min-height: 44px; padding: 0 var(--sp-5); }
.form-stack { display: grid; }
.linha-acoes { display: flex; gap: var(--sp-3); align-items: center; }
.tabela-pessoas { display: grid; gap: var(--sp-2); }
.pessoa-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.pessoa-inativa { opacity: .5; }
.barra-admin { position: sticky; top: 0; height: 3px; background: var(--warning); margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4); }
.acerto-resumo { display: grid; gap: var(--sp-2); }
.acerto-linha { display: flex; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.acerto-destaque { font-size: 1.25rem; font-weight: 700; }
.foto-recibo { max-width: 100%; border-radius: var(--r-md); border: 1px solid var(--border); }
.aviso-pendentes { color: var(--warning); font-size: .875rem; }
.input-mini { min-height: 36px; font-size: .8125rem; max-width: 150px; padding: 0 var(--sp-2); }

/* ============ FASE 4 — POLIMENTO ============ */
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }
.saldo-valor { animation: surgir 500ms ease-out; }
.trip-card { animation: surgir 350ms ease-out; }

.acoes-pessoa { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: flex-end; }

/* ============ FASE 5 — AEROSPACE-MINIMAL ============ */

/* fundo: halo de fosforo no topo + malha tecnica ultra-sutil (decorativos) */
body {
  background-image:
    radial-gradient(820px 420px at 50% -160px, rgba(204, 255, 51, .045), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  background-repeat: no-repeat, repeat, repeat;
}

/* foco visivel universal (AA); :where mantem especificidade zero,
   entao o :focus do .input continua valendo por cima */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* tipografia de instrumentacao */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .18em;
}
.money, .valor-grande, .trip-card-valor, .saldo-valor { font-variant-numeric: tabular-nums; }

/* superficies planas, reguas hairline, mais ar; tique neon na regua do header */
.screen-header {
  position: relative;
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.screen-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 1px;
  background: var(--accent); box-shadow: 0 0 10px rgba(204, 255, 51, .35);
  pointer-events: none;
}
.stack { margin-bottom: var(--sp-10); }
.acoes-topo { margin-bottom: var(--sp-6); }
.saldo-hero { padding: var(--sp-8) 0 var(--sp-10); }
.btn { border-radius: var(--r-sm); letter-spacing: .02em; }
.input { border-radius: var(--r-xs); }

/* card de formulario: cantoneiras tecnicas que acendem quando o form recebe foco
   (pseudo-elementos puros; position relative NAO cria containing block para o
   .flash position:fixed renderizado dentro do form.card) */
.card { position: relative; }
.card::before, .card::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border: 0 solid var(--border-strong);
  transition: border-color 200ms ease;
}
.card::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: inherit; }
.card::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: inherit; }
.card:focus-within::before, .card:focus-within::after { border-color: var(--accent); }

/* trip-card: cartao preto plano com strip-LED na borda esquerda */
.trip-card { border-left-width: 2px; padding: var(--sp-5); }
.trip-card.estado-positivo { box-shadow: inset 18px 0 28px -22px var(--success); }
.trip-card.estado-atencao  { box-shadow: inset 18px 0 28px -22px var(--warning); }
.trip-card.estado-negativo { box-shadow: inset 18px 0 28px -22px var(--danger); }
.trip-card.estado-neutro   { box-shadow: inset 18px 0 28px -22px var(--info); }
.trip-card-fechada { box-shadow: none; }

/* badges viram indicadores de status com LED */
.badge {
  gap: 6px;
  height: 20px;
  border-radius: var(--r-xs);
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .08em;
}
.badge::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}
.badge-ativa, .badge-aprovada { color: var(--success); }
.badge-em_revisao, .badge-registrada { color: var(--warning); }
.badge-rejeitada { color: var(--danger); }
.badge-fechada { color: var(--text-2); } /* era --text-3: reprovava AA em texto pequeno */
@keyframes led-pulse { 50% { opacity: .35; } }
.badge-ativa::before { animation: led-pulse 2.4s ease-in-out infinite; }

/* chips de papel/categoria: retangulares, hairline, LED quando selecionado */
.chip span {
  gap: var(--sp-2);
  border-radius: var(--r-xs);
  background: transparent;
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
}
.chip input:checked + span {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.chip input:checked + span::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
/* o radio do chip e invisivel e hoje nao tem indicacao de foco — correcao AA */
.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* filtros de gestao: instrumentacao compacta */
.resumo-card {
  background: transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .05em;
  padding: var(--sp-2) var(--sp-1);
}
.resumo-card.ativo { background: var(--accent-soft); border-color: var(--accent); }

/* lista de pessoas: ledger com reguas hairline em vez de cartoes */
.tabela-pessoas { gap: 0; border-top: 1px solid var(--border); }
.pessoa-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--sp-4) 0;
}

/* timeline e despesas */
.timeline { border-left: 1px dashed var(--border-strong); }
.cat-dot {
  border-radius: var(--r-xs);
  background: transparent;
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* fuel-bar segmentada (ticks de instrumento) */
.fuel-bar { position: relative; height: 6px; border-radius: var(--r-xs); }
.fuel-fill { border-radius: 0; }
.fuel-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--bg-0) 9px 11px);
  pointer-events: none;
}

/* faixa de contexto admin: hazard stripes discretas */
.barra-admin {
  height: 2px;
  background: repeating-linear-gradient(-45deg, var(--warning) 0 8px, transparent 8px 16px);
}

/* flash e CTA */
.flash { border-radius: var(--r-sm); border-left-width: 2px; }
.cta-bar .btn-primary {
  box-shadow: 0 0 0 1px rgba(204, 255, 51, .35), 0 8px 28px -12px rgba(204, 255, 51, .35);
}

/* login: fosforo estatico na marca + layout (migrado do <style> inline) */
.login-screen { display: grid; gap: var(--sp-10); padding-top: 16vh; max-width: 400px; margin: 0 auto; }
.login-brand { display: grid; gap: var(--sp-3); text-align: center; }
.wordmark { text-shadow: 0 0 24px rgba(204, 255, 51, .12); }
.wordmark::after { text-shadow: 0 0 14px rgba(204, 255, 51, .55); }

/* acessibilidade: contraste alto desliga camadas decorativas */
@media (prefers-contrast: more) {
  body { background-image: none; }
  .wordmark, .wordmark::after { text-shadow: none; }
  .badge::before, .chip input:checked + span::before { box-shadow: none; }
  .screen-header::after { box-shadow: none; }
}

/* ============ PORTAL (shell admin com sidebar) — PASSADA AEROSPACE ============ */
.portal { display: flex; min-height: 100vh; }

/* coluna lateral: painel preto chapado, regua hairline, mais respiro */
.portal-side {
  width: 220px; flex-shrink: 0; background: var(--bg-0);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  padding: var(--sp-6) 0; gap: var(--sp-2);
  position: sticky; top: 0; height: 100vh;
}

/* marca como instrumento: mono, uppercase, tracking, ponto-LED neon */
.portal-brand {
  font-family: var(--font-mono); font-weight: 600;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--text-1);
  padding: 0 var(--sp-5) var(--sp-6); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-2);
}
.portal-brand::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0;
}

/* navegacao: itens como linhas de telemetria; mono, tracking discreto */
.portal-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 var(--sp-3); }
.portal-nav a {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); color: var(--text-2);
  border-radius: var(--r-xs); text-decoration: none;
  font-family: var(--font-mono); font-weight: 500;
  font-size: .8125rem; letter-spacing: .04em;
  transition: color 140ms ease, background 140ms ease;
}
.portal-nav a:hover { color: var(--text-1); background: var(--bg-2); }
.nav-ic { color: var(--text-3); font-size: .9rem; line-height: 1; }
.portal-nav a:hover .nav-ic { color: var(--text-2); }

/* item ativo: superficie acesa + strip-LED neon a esquerda */
.portal-nav a.on { color: var(--accent); background: var(--accent-soft); }
.portal-nav a.on .nav-ic { color: var(--accent); }
.portal-nav a.on::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: var(--r-pill);
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
/* caret de prompt piscante no item ativo (enxerto terminal-hud) */
.portal-nav a.on::after {
  content: ""; margin-left: auto; align-self: center;
  width: 7px; height: 1em; background: var(--accent);
  box-shadow: 0 0 8px rgba(204, 255, 51, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .portal-nav a.on::after { animation: hud-caret 1.1s steps(1, end) infinite; }
}
@keyframes hud-caret { 50% { opacity: 0; } }

/* foco AA reforcado nos links/botoes da nav (alem do :focus-visible universal) */
.portal-nav a:focus-visible,
.portal-foot .btn-ghost:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* rodape: eyebrow mono no e-mail, regua hairline, mais ar */
.portal-foot {
  margin: var(--sp-4) var(--sp-3) 0; padding: var(--sp-5) var(--sp-5) 0;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--text-2); /* era --text-3: AA em corpo pequeno */
}
.portal-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-foot .btn-ghost {
  align-self: flex-start; padding: var(--sp-1) 0;
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
}

/* area principal: mais espaco negativo + malha tecnica leve (enxerto cyber-grid) */
.portal-main {
  position: relative; flex: 1; max-width: 1100px; padding: var(--sp-8);
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  background-position: center top;
}
.portal-main > * { position: relative; z-index: 1; }

/* burguer mobile: alvo de toque com hairline */
.nav-burger {
  display: none; width: 44px; height: 44px; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  font-size: 20px; color: var(--text-1); cursor: pointer;
}
@media (max-width: 720px) {
  .portal { flex-direction: column; }
  .portal-main { padding: var(--sp-5) var(--sp-4); background-size: 22px 22px, 22px 22px; }
  .portal-side { position: fixed; left: -240px; transition: left .2s ease; z-index: 50;
    background: var(--bg-1); box-shadow: var(--e-2); }
  .nav-toggle:checked ~ .portal .portal-side { left: 0; }
  .nav-burger { display: grid; margin-bottom: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-side { transition: none; }
  .portal-nav a { transition: none; }
}

/* ============ DASHBOARD (KPIs + graficos) — PASSADA AEROSPACE ============ */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin-bottom: var(--sp-8);
}

/* KPI: instrumento chapado, hairline, valor mono grande, tique neon no topo */
.kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: var(--sp-5);
}
.kpi::before {
  content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 1px;
  background: var(--accent); box-shadow: 0 0 8px rgba(204, 255, 51, .35);
  pointer-events: none;
}
.kpi-label {
  font-family: var(--font-mono); font-weight: 500; font-size: .625rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-2);
}
.kpi-valor {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 1.625rem; line-height: 1.05; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}

/* cartoes de grafico: titulo como eyebrow mono com regua */
.dash-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5); margin-bottom: var(--sp-10);
}
.dash-card { border-radius: var(--r-xs); }
.dash-card h2 {
  font-family: var(--font-mono); font-weight: 600; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.dash-card h2::before { content: "// "; color: var(--accent); opacity: .7; }
.dash-card-wide { grid-column: 1 / -1; }
/* canvas acima de qualquer textura, altura estavel */
.dash-card canvas { position: relative; z-index: 1; }

/* barra de filtros: regua de instrumentacao, labels mono */
.acoes-topo { margin-bottom: var(--sp-8); }
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: flex-end; width: 100%;
}
.filtros .field { margin-bottom: 0; }
.filtros .field label {
  font-family: var(--font-mono); font-weight: 500; font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
/* glow neon discreto no foco dos campos do filtro (enxerto terminal-hud) */
.filtros .input:focus {
  box-shadow: var(--focus-ring), 0 0 18px -6px rgba(204, 255, 51, .5);
}

/* lista de despesas do portal: ledger hairline (escopado ao admin) */
.portal-main .stack {
  gap: 0; border-top: 1px solid var(--border); margin-bottom: var(--sp-10);
}
.portal-main .expense-item {
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: var(--sp-4) var(--sp-1);
}
.portal-main .expense-desc {
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-1);
}
.portal-main .expense-meta {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--text-2);
}
.portal-main .expense-right .money { text-shadow: 0 0 12px rgba(204, 255, 51, .12); }

/* estado vazio do painel: mais respiro */
.portal-main .empty-state { padding: var(--sp-16) var(--sp-4); }

/* login: leve reforco aerospace (estende a marca-fosforo da Fase 5) */
.login-brand .eyebrow { color: var(--text-2); }
.login-screen .input:focus {
  box-shadow: var(--focus-ring), 0 0 18px -6px rgba(204, 255, 51, .5);
}

@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}

/* acessibilidade: alto contraste desliga halos/LEDs/texturas decorativos */
@media (prefers-contrast: more) {
  .portal-main { background-image: none; }
  .portal-brand::before, .portal-nav a.on::before, .kpi::before { box-shadow: none; }
  .portal-nav a.on::after { box-shadow: none; }
  .portal-main .expense-right .money { text-shadow: none; }
  .filtros .input:focus, .login-screen .input:focus { box-shadow: var(--focus-ring); }
}