/* ============================================================
   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 {
  /* === 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:      18px;
  --fs-body:    14px;
  --fs-caption: 12px;
  --fs-micro:   11px;
  --fs-kpi:      clamp(28px, 4.4vw, 36px);
  --fs-kpi-sm:   clamp(22px, 3.4vw, 28px);
  --fs-kpi-unit: 15px;
  --fs-kpi-full: 11px;

  /* === Espaçamento === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* === 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 === */
.layout-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* === Responsividade do grid === */
@media (max-width: 1023px) {
  .col-3, .col-4 { grid-column: span 6; }
  .col-8 { grid-column: span 12; }
}
@media (max-width: 767px) {
  .col-3, .col-4, .col-6, .col-8, .col-12 { grid-column: span 12; }
}

/* === Alturas de gráfico === */
.ch-480 { height: 480px; }
.ch-420 { height: 420px; }
.ch-360 { height: 360px; }

@media (max-width: 960px) {
  .ch-480 { height: 360px; }
  .ch-420 { height: 320px; }
  .ch-360 { height: 280px; }
}
@media (max-width: 767px) {
  .ch-480, .ch-420, .ch-360 { height: 280px; }
}
@media (max-width: 479px) {
  .ch-480, .ch-420, .ch-360 { height: 240px; }
}

/* === Grids de KPI responsivos === */
.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 1023px) { .grid-kpi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .grid-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .grid-kpi { grid-template-columns: 1fr; } }