/* ============================================================
   RN Tintas — Design System BI · Tokens
   Fonte: skill rn-dashboards-bi (references/css-tokens.css)
   Não alterar valores: governança cromática da marca.
   ============================================================ */
:root {
  /* === Escala fluida da UI (NÍTIDA, sem zoom) ===
     `--ui` (0.75–1) é o fator global: o app.js define pela LARGURA da tela (e limita pela altura
     da 1ª dobra). Todos os tokens de TAMANHO abaixo são `base * var(--ui)` → o navegador
     renderiza no tamanho real (fonte crisp, sem borrão). Default 1 (sem JS = sem escala). */
  --ui: 1;
  /* Fator de FONTE: piso mais alto (0.85) que o layout, p/ o texto pequeno ficar SEMPRE legível/
     nítido enquanto cards/espaçamento encolhem mais (--ui até 0.75). Fontes usam --uf; resto --ui. */
  --uf: max(0.85, var(--ui));

  /* === Cores institucionais === */
  --rn-white:  #ffffff;
  --rn-navy:   #000942;
  --rn-blue:   #26348b;
  --rn-red:    #e40421;

  /* === Variações do manual === */
  --rn-green:  #3cff00;
  --rn-purple: #180094;

  /* === Neutros (hue 232 do Navy, saturação atenuada) === */
  --rn-bg:            #f4f5fa;
  --rn-surface:       #ffffff;
  --rn-surface-2:     #fbfbfd;
  --rn-border:        #e1e4ef;
  --rn-border-strong: #c4c9dd;
  --rn-text:          #000942;
  --rn-text-muted:    #5a6488;
  --rn-text-soft:     #8a93b3;
  --rn-overlay:       rgba(0, 9, 66, 0.55);

  /* === Estados de dados === */
  --rn-positive:    #1f8f3a;
  --rn-positive-bg: #e6f5ec;
  --rn-negative:    #e40421;
  --rn-negative-bg: #fde6e9;
  --rn-info:        #26348b;
  --rn-info-bg:     #e7eaf5;
  --rn-warning:     #c41a36;
  --rn-warning-bg:  #fdeef0;

  /* === Meta atingida (acento semântico reservado) === */
  --rn-target-hit:        #3cff00;
  --rn-target-hit-strong: #1f8f3a;
  --rn-target-hit-bg:     #e6ffe0;

  /* === Tipografia === */
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-light:     300;
  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* === Escala tipográfica === */
  --fs-display: clamp(32px, 5.5vw, 48px);
  --fs-h1:      clamp(24px, 3.6vw, 32px);
  --fs-h2:      clamp(20px, 2.8vw, 24px);
  --fs-h3:      calc(18px * var(--uf));
  --fs-body:    calc(14px * var(--uf));
  --fs-caption: calc(12px * var(--uf));
  --fs-micro:   calc(11px * var(--uf));
  --fs-kpi:      calc(32px * var(--uf));
  --fs-kpi-sm:   calc(25px * var(--uf));
  --fs-kpi-unit: calc(14px * var(--uf));
  --fs-kpi-full: calc(11px * var(--uf));

  /* === Espaçamento (fluido: 3..9 escalam; 1/2 fixos p/ detalhes) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: calc(12px * var(--ui));
  --space-4: calc(16px * var(--ui));
  --space-5: calc(20px * var(--ui));
  --space-6: calc(24px * var(--ui));
  --space-7: calc(32px * var(--ui));
  --space-8: calc(48px * var(--ui));
  --space-9: calc(64px * var(--ui));

  /* === Raios === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* === Sombras === */
  --shadow-sm: 0 1px 2px rgba(0,9,66,0.05), 0 1px 1px rgba(0,9,66,0.02);
  --shadow-md: 0 4px 12px rgba(0,9,66,0.07), 0 2px 4px rgba(0,9,66,0.04);
  --shadow-lg: 0 14px 32px rgba(0,9,66,0.10), 0 4px 8px rgba(0,9,66,0.04);

  /* === Motion === */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-medium: 240ms;
  --dur-slow:   420ms;

  /* === Layout === */
  --nav-h:         56px;
  --container-max: 1920px;  /* near full-width nos dashboards; margem lateral ≈ padding */
}

/* === Reset base === */
* { box-sizing: border-box; }
body {
  background: var(--rn-bg);
  color: var(--rn-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* === Grid de 12 "colunas" via FLEX (auto-preenche lacunas) ===
   flex-grow = PESO da coluna (col-3→3, col-6→6…). Quando um card é ESCONDIDO (pode_ver off), os
   demais da linha CRESCEM proporcionais ao seu peso e PREENCHEM o espaço — sem lacuna, sem distorcer
   (mantém a razão relativa). Linha cheia (pesos somam 12) renderiza IGUAL ao grid antigo.
   flex-basis:0 = largura puramente pela razão dos pesos; min-width = QUEBRA a linha no mobile (em
   vez de espremer). Ex.: [col-3 + col-3 + col-6]; esconde o col-6 → os col-3 viram 50%/50%. */
.layout-grid-12 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: stretch;   /* cards da mesma linha ficam com a MESMA altura */
}
.layout-grid-12 > * { min-width: 0; }
.col-3  { flex: 3 1 0; min-width: calc(215px * var(--ui)); }
.col-4  { flex: 4 1 0; min-width: calc(235px * var(--ui)); }
.col-6  { flex: 6 1 0; min-width: calc(330px * var(--ui)); }
.col-8  { flex: 8 1 0; min-width: calc(430px * var(--ui)); }
.col-12 { flex: 1 1 100%; }

/* Mobile: cada card ocupa a linha inteira (empilha e rola). */
@media (max-width: 620px) {
  .col-3, .col-4, .col-6, .col-8 { flex-basis: 100%; min-width: 0; }
}

/* === Grid de FORMULÁRIOS (grid FIXO — nº de campos por linha PREVISÍVEL) ===
   Os formulários usam `.form-grid` (não `.layout-grid-12`): col-N = span N exato (col-6 = 2 por
   linha), SEM o auto-preenchimento por flex dos cards de dashboard (que encheria a linha de campos).
   `> .col-N` tem especificidade maior que o `.col-N { flex }` global, então vence dentro do form. */
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.form-grid > * { min-width: 0; }
.form-grid > .col-3  { grid-column: span 3; }
.form-grid > .col-4  { grid-column: span 4; }
.form-grid > .col-6  { grid-column: span 6; }
.form-grid > .col-8  { grid-column: span 8; }
.form-grid > .col-12 { grid-column: span 12; }
@media (max-width: 720px) { .form-grid > * { grid-column: 1 / -1; } }

/* === Alturas de gráfico (fluidas via --ui — encolhem junto) === */
.ch-480 { min-height: calc(420px * var(--ui)); }
.ch-420 { min-height: calc(360px * var(--ui)); }
.ch-360 { min-height: calc(300px * var(--ui)); }
.ch-300 { min-height: calc(260px * var(--ui)); }
.ch-200 { min-height: calc(220px * var(--ui)); }
@media (max-width: 620px) {   /* mobile: piso legível */
  .ch-480, .ch-420, .ch-360, .ch-300, .ch-200 { min-height: 240px; }
}

/* === Grids de KPI responsivos (seguram 4-up até 900px) === */
.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .grid-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-kpi { grid-template-columns: 1fr; } }