/* ═══════════════════════════════════════════════════════════════════
   BÚSSOLA · Sistema visual
   ═══════════════════════════════════════════════════════════════════

   Uma identidade só, em todas as telas. Antes disto, o Express tinha
   rosa dos ventos, serifa e ar de carta náutica — e as outras sete telas
   eram dashboards genéricos. Quem saía da isca e entrava no painel
   parecia ter mudado de produto.

   O conceito é cartográfico: a Bússola é um instrumento de precisão que
   orienta uma travessia longa. Daí a serifa nos títulos (documento, não
   app), o mono nos números (medição), e a rosa dos ventos como marca.

   Zero dependência: as três famílias tipográficas são nativas de macOS,
   Windows e Android. Nada é baixado, nada quebra offline.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── O mar e a noite ── */
  --ink:#0E1440;          /* navy profundo: fundo das telas escuras */
  --ink2:#171E52;
  --ink3:#20276A;

  /* ── O instrumento ── */
  --brass:#4C55D4;        /* índigo: a agulha, os botões, o que age */
  --brass-hi:#8E96FF;
  --brass-dim:rgba(142,150,255,.22);
  --steel:#C0C7EC;
  --steel-dim:#8B93C9;

  /* ── A carta de papel ── */
  --paper:#F6F7FC;
  --paper2:#EEF0FA;
  --line:#D6DAF0;
  --ink-p:#171B4A;        /* texto sobre papel */
  --ink-p2:#4A5170;       /* texto secundário */

  /* ── Os quatro quadrantes ── */
  --n:#4C55D4;            /* Norte  · direção */
  --s:#3E8E5E;            /* Sul    · sustentação */
  --l:#2E9BB5;            /* Leste  · crescimento */
  --o:#D64545;            /* Oeste  · proteção */

  /* ── Estado ── */
  --ok:#3E8E5E;
  --warn:#D98E2B;
  --crit:#D64545;

  /* ── Tipografia ──
     A serifa é o que dá ar de documento a um título. Sem ela, tudo vira
     app genérico — e um plano patrimonial que parece app não é levado
     para a mesa da família. */
  --serif:Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,'Courier New',monospace;

  /* ── Ritmo ── */
  --r-sm:9px;
  --r:13px;
  --r-lg:18px;
  --sombra:0 1px 3px rgba(14,20,64,.06),0 8px 28px rgba(14,20,64,.07);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink-p);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.wrap-doc{max-width:820px;margin:0 auto;padding:0 22px}

/* ═══ TIPOGRAFIA ═══ */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:var(--brass)}
/* Sobre fundo escuro. Nome com prefixo de propósito: `.claro` sozinho
   colide com qualquer classe local de mesmo nome, e o modificador passa
   a herdar background e padding de uma seção inteira. */
.eyebrow.eb-escuro{color:var(--brass-hi)}

h1,h2,h3,.display{font-family:var(--serif);letter-spacing:-.015em}
h1,.display{font-size:clamp(27px,4.4vw,40px);font-weight:700;line-height:1.14}
h2{font-size:clamp(20px,2.6vw,25px);font-weight:700;line-height:1.22}
h3{font-size:17px;font-weight:700}

.sub{color:var(--ink-p2);font-size:15.5px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:800}

/* Título de seção com a linha que separa — o ritmo do documento. */
.sec{display:flex;align-items:baseline;gap:11px;margin:38px 0 5px;
  padding-top:24px;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none;padding-top:0}
.sec h2{flex:1}
.sec .n{font-family:var(--mono);font-size:11.5px;color:var(--steel-dim);
  background:var(--paper2);border-radius:99px;padding:3px 11px;font-weight:700}
.secsub{color:var(--ink-p2);font-size:14.5px;margin-bottom:16px;max-width:680px}

/* ═══ O TOPO ═══ */
.topo{background:var(--ink);color:#fff;padding:16px 0;position:relative;overflow:hidden}
.topo .wrap,.topo .wrap-doc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative;z-index:1}
.topo .marca{display:flex;align-items:center;gap:10px}
.topo .marca svg{opacity:.9}
.topo .nome{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass-hi);font-weight:700}
.topo .quem{font-size:14px;color:var(--steel)}
.topo .quem b{color:#fff}
.topo a{color:var(--steel);font-size:13.5px;text-decoration:none}
.topo a:hover{color:#fff}

/* A rosa que respira atrás do cabeçalho. Discreta: é assinatura, não
   ilustração — se roubar atenção do conteúdo, está errada. */
.topo .rosa-fundo{position:absolute;right:-70px;top:50%;transform:translateY(-50%);
  opacity:.14;pointer-events:none;z-index:0}
@media(max-width:700px){.topo .rosa-fundo{display:none}}

/* ═══ SUPERFÍCIES ═══ */
.cartao{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.cartao.destaque{border-width:2px;border-color:var(--brass)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin:24px 0}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px 18px}
.kpi b{display:block;font-family:var(--mono);font-size:26px;font-weight:800;
  line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:12.5px;color:var(--ink-p2);margin-top:3px;line-height:1.4}

/* ═══ CONTROLES ═══ */
.btn{background:var(--brass);color:#fff;border:none;border-radius:var(--r-sm);
  padding:11px 21px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:var(--sans);text-decoration:none;display:inline-flex;
  align-items:center;gap:7px;transition:background .15s,transform .1s}
.btn:hover{background:#5E67E8}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:none;border:1.5px solid var(--line);color:var(--ink-p2)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);background:none}
.btn.ok{background:var(--ok)}.btn.ok:hover{background:#47A06B}
.btn.escuro{background:none;border:1px solid rgba(142,150,255,.35);color:var(--steel)}
.btn.escuro:hover{border-color:var(--brass-hi);color:#fff;background:none}
.btn.sm{padding:8px 15px;font-size:13px}

.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid;border-radius:6px;padding:3px 8px;font-weight:700;white-space:nowrap}

/* ═══ BARRA DE PROGRESSO ═══ */
.barra{height:9px;background:var(--paper2);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;
  transition:width .9s cubic-bezier(.2,.8,.3,1)}
.barra.grossa{height:13px}

/* ═══ TABELA ═══ */
.tab{width:100%;border-collapse:collapse;font-size:13.5px}
.tab th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel-dim);
  padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.tab td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tab td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rolar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rolar::-webkit-scrollbar{height:4px}
.rolar::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}

/* ═══ AVISOS ═══ */
.aviso{border-radius:11px;padding:13px 17px;font-size:14px;line-height:1.55}
.aviso.alerta{background:#FFF6F5;border:1px solid #F0C9C9;color:#8C2F2F}
.aviso.info{background:#F0F2FE;border:1px solid #CFD5F7;color:#2A3170}
.aviso.ok{background:#F1F9F4;border:1px solid #C3E3CE;color:#245F3B}
.aviso.atencao{background:#FDF6EA;border:1px solid #EBD5AE;color:#8A5A12}

.vazio{background:#fff;border:1px dashed var(--line);border-radius:var(--r);
  padding:40px 26px;text-align:center;color:var(--ink-p2)}
.vazio b{display:block;font-family:var(--serif);font-size:18px;color:var(--ink-p);margin-bottom:7px}

/* ═══ TELA ESCURA (login, capas) ═══
   Nome próprio de propósito: `.escuro` sozinho colidia com `.btn.escuro`
   e o min-height da tela vazava para o botão. */
.tela-escura{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 620px at 50% 38%,var(--ink3),var(--ink));
  padding:26px;position:relative;overflow:hidden}
.tela-escura .rosa-fundo{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  opacity:.13;pointer-events:none}
.tela-escura .caixa{width:100%;max-width:390px;position:relative;z-index:1}
.tela-escura h1{color:#fff;margin-bottom:9px}
.tela-escura p{color:var(--steel);margin-bottom:26px}
.campo{margin-bottom:12px}
.campo input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(142,150,255,.35);
  border-radius:var(--r-sm);padding:14px 16px;color:#fff;font-size:16px;font-family:var(--sans)}
.campo input::placeholder{color:var(--steel-dim)}
.campo input:focus{outline:none;border-color:var(--brass-hi);background:rgba(255,255,255,.09)}
.btn-bloco{width:100%;justify-content:center;padding:15px}
.alt{margin-top:15px;text-align:center;font-size:13.5px;color:var(--steel-dim)}
.alt a{color:var(--brass-hi);cursor:pointer;text-decoration:underline}
.msg{margin-top:14px;font-size:14px;padding:11px 15px;border-radius:var(--r-sm);display:none}
.msg.on{display:block}
.msg.err{background:rgba(214,69,69,.15);border:1px solid rgba(214,69,69,.4);color:#FFB4AE}
.msg.ok{background:rgba(62,142,94,.15);border:1px solid rgba(62,142,94,.4);color:#A9D8B8}

/* ═══ A CAPA ═══ */
.capa{background:linear-gradient(165deg,var(--ink2),var(--ink));color:#fff;
  padding:36px 0 34px;position:relative;overflow:hidden}
.capa .rosa-fundo{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  opacity:.16;pointer-events:none}
.capa .wrap,.capa .wrap-doc{position:relative;z-index:1}
.capa h1{color:#fff;margin:12px 0 8px}
.capa .quando{color:var(--steel);font-size:16px}
.capa .quando b{color:#fff}

/* ═══ MOVIMENTO ═══ */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .barra i{transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══ IMPRESSÃO ═══ */
@media print{
  body{background:#fff}
  .nao-imprime{display:none !important}
  .sec{break-after:avoid;page-break-after:avoid}
  .cartao,.kpi{break-inside:avoid;page-break-inside:avoid}
}