/* ============================================================
   PRUMO — Design System v1 — tokens globais
   Estética: prancheta técnica. Hairlines, papel, tipografia
   editorial. Nada de gradientes, glassmorphism ou radius inflado.
   Temas por perfil: .theme-arq | .theme-eng | .theme-obra
   ============================================================ */

:root {
  /* Escala tipográfica */
  --f-display: "Fraunces", Georgia, serif;
  --f-ui: "Inter", -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px;
  --fs-lg: 17px; --fs-xl: 24px; --fs-2xl: 34px; --fs-3xl: 46px;

  --r: 3px;               /* radius contido, arquitetônico */
  --border-w: 1px;        /* espessura dos traços estruturais (card/botão/campo/divisórias) */
  --fw-ui: 400;           /* peso base do texto de interface (não-display) */
  --side-w: 216px;
  --pad: 28px;

  /* Semânticos (iguais nos 3 temas) — ajustados p/ WCAG AA em texto 10px */
  --ok: #3F6B4D; --ok-bg: #EAF2ED;      /* 5,5:1 sobre ok-bg */
  --warn: #8A6414; --warn-bg: #F7EFDC;  /* 4,6:1 sobre warn-bg */
  --bad: #AE3E2B; --bad-bg: #F7E7E3;    /* 5,0:1 sobre bad-bg */

  /* Custo (DualSpark) — achado real 08/08/2026: usar --bad aqui ficava visualmente indistinguível
     de --accent (ambos tons terracota/vermelho próximos, mesma família quente) numa barra ao lado
     da outra. Azul (mesmo tom do accent do tema Engenharia — reaproveitado, não inventado do
     zero) dá contraste de matiz de verdade, frio vs. quente, em vez de só variar saturação. */
  --cost: #2B5C86; --cost-bg: #E2EBF2;
}

/* ---------- TEMA: ARQUITETURA (default) — papel quente, terracota, serif presente ---------- */
.theme-arq {
  --paper: #FAF7F1;         /* fundo geral: papel manteiga */
  --surface: #FFFFFF;
  --surface-2: #F4EFE6;
  --ink: #211E19;
  --ink-2: #6E6659;
  --ink-3: #766D5C;         /* 4,9:1 sobre paper — AA p/ rótulos pequenos */
  --line: #E4DDCE;          /* hairline */
  --line-strong: #C9BFAC;
  --accent: #A9502F;        /* terracota — 5,1:1 sobre paper */
  --accent-soft: #F3E4DD;
  --accent-ink: #FFFFFF;
  --grid-dot: #E9E2D3;
  --display-weight: 500;
}

/* ---------- TEMA: ENGENHARIA — papel frio, azul aço, precisão de "painel de instrumento":
   sem serifada nos títulos (troca --f-display por --f-ui) e cantos retos (--r: 0). ---------- */
.theme-eng {
  --paper: #F5F7F8;
  --surface: #FFFFFF;
  --surface-2: #EDF1F3;
  --ink: #1A222A;
  --ink-2: #5C6B77;
  --ink-3: #61707A;         /* 4,8:1 sobre paper */
  --line: #DCE3E8;
  --line-strong: #B8C4CC;
  --accent: #2B5C86;        /* azul aço / blueprint */
  --accent-soft: #E2EBF2;
  --accent-ink: #FFFFFF;
  --grid-dot: #E2E9ED;
  --display-weight: 450;
  --f-display: var(--f-ui); /* títulos em Inter, não Fraunces — "painel de instrumento" */
  --r: 0px;                  /* cantos retos, precisão de desenho técnico */
}

/* ---------- TEMA: CONSTRUÇÃO — grafite, âmbar de sinalização, legibilidade de campo/tablet:
   tudo um pouco maior, peso mais forte, traços estruturais mais grossos. ---------- */
.theme-obra {
  --paper: #F7F6F4;
  --surface: #FFFFFF;
  --surface-2: #EFEDE9;
  --ink: #22211E;
  --ink-2: #6B685F;
  --ink-3: #6F6B60;         /* 4,9:1 sobre paper */
  --line: #E2DFD8;
  --line-strong: #C5C1B6;
  --accent: #9A6A15;        /* âmbar queimado */
  --accent-soft: #F2E8D4;
  --accent-ink: #FFFFFF;
  --grid-dot: #E8E5DE;
  --display-weight: 600;
  --fw-ui: 500;
  --border-w: 2px;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 25px; --fs-2xl: 36px; --fs-3xl: 47px;
}

/* ============ BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; }
body {
  font-family: var(--f-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Navegação por teclado — anel de foco visível em qualquer interativo */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r);
}

/* Papel milimetrado sutil (textura de prancheta) */
.blueprint-bg {
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ============ TIPOGRAFIA DE PÁGINA ============ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; gap: 16px; }
h1.page-title {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -.01em;
}
/* FocusOnNavigate (App.razor) foca este h1 em toda navegação pra leitor de tela — mantém o
   foco funcional, só esconde o anel visual, que confundia quem vê a tela achando que é
   estilo do layout (h1 não é clicável, não deveria parecer). */
h1.page-title:focus-visible {
  outline: none;
}
.page-sub { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 6px; max-width: 60ch; }
/* Base pra .sub usado solto (fora de .tbl/.alert, que já tinham sua própria versão escopada) —
   sem isso, .sub sozinho não herdava nenhum estilo da classe e caía no tamanho normal do corpo do
   texto, maior até que .card-title (achado real, 02/08: legenda "Aprovação cruzada" no card de
   Documentos renderizando maior que o próprio título do card). */
.sub { color: var(--ink-3); font-size: var(--fs-xs); }
.kicker {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; display: block;
}
h2.sec {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: var(--fs-xl); margin: 34px 0 14px;
}
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ============ GRID UTILITÁRIO ============ */
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
/* align-items:start — sem isso, o Grid estica as duas células de uma linha pra altura da mais
   alta (default "stretch"). No Painel, "Equipe esta semana" cresce sem teto (uma linha por
   colaborador) e forçava "Fluxo de caixa" (conteúdo curto e fixo: spark de 44px + uma linha de
   texto) a esticar junto, sobrando espaço vazio dentro do card. Cada card assume sua própria
   altura natural agora — achado real 20/08/2026. */
.g23 { grid-template-columns: 2fr 1fr; align-items: start; }
.g32 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1000px) { .g2,.g3,.g4,.g23,.g32 { grid-template-columns: 1fr; } }

/* Usado por Features/Ajuda/Ajuda.razor — nav de página fixa (sticky) ao lado do conteúdo,
   mesma gramática visual do .nav do menu principal (Components/Layout/Sidebar.razor), só que
   secundária/menor escala. Coluna da nav é proporcional (~25%, entre os 20/80–30/70 pedidos),
   não largura fixa, com piso de 160px pra não espremer o rótulo mais longo ("Fora do menu
   numerado"). Abaixo de 1000px empilha: a nav vira uma lista normal (não fixa) acima do
   conteúdo, mesmo breakpoint já usado pelos grids acima. */
.page-with-toc { display: grid; grid-template-columns: minmax(160px, 25%) minmax(0, 1fr); gap: 40px; align-items: start; }
.page-toc { padding: 0; position: sticky; top: 20px; }
.page-toc-content { max-width: 780px; min-width: 0; }
@media (max-width: 1000px) {
  .page-with-toc { grid-template-columns: 1fr; }
  .page-toc { position: static; }
}

/* Print-friendly (shell + ações não impressas). !important necessário: layout.css/topbar.css
   carregam depois de global.css e setam display sem media query nenhuma — mesma especificidade,
   ordem de carga venceria e a regra de print nunca aplicaria sem isso. */
@media print {
  .side, .topbar-actions, .theme-pick { display: none !important; }
  .main { margin: 0 !important; }
  /* Genérica — qualquer tela que queira esconder algo específico do print (filtros, ações de
     linha) sem afetar a regra global acima marca o elemento com essa classe. */
  .print-hide { display: none !important; }
  /* Sem isso, o navegador descarta toda cor de background na impressão/PDF por padrão (economia
     de tinta) — mas aqui background carrega informação de verdade: volume das barras de .spark/
     .spark.dual (só o border-top sobrevivia, virando um "traço" sem o preenchimento — achado
     real, 08/08/2026, no PDF exportado de Relatórios), cor de estado dos .badge, preenchimento
     das .bar de progresso. Sem "exact" essas cores viram texto/borda soltos, sem o preenchimento
     que dá o significado visual. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}