/* HealthData Brasil — Platform Design System v3.0
   Direction: Oracle × Apple — Enterprise Data Platform
   ─────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────────────────── */
:root {
  --brand:      #00539a;
  --brand-2:    #0ea5e9;
  --brand-3:    #14b8a6;
  --brand-dark: #003d73;

  --ink:   #1d1d1f;
  --ink-2: #3a3a3c;
  --muted: #6e6e73;

  --bg:        #f5f5f7;
  --surface:   #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #e8e8ed;

  --line:   #d2d2d7;
  --line-2: #e8e8ed;

  --danger:  #c0392b;
  --success: #1a7a4a;
  --warn:    #a16207;

  /* Glosas / Recovery page semantic tokens
     ────────────────────────────────────── */
  /* Amber — distinct from --warn; used for chart bars and non-critical callouts */
  --amber:              #d97706;
  --amber-bg:           rgba(251,191,36,0.10);
  --amber-border:       rgba(180,83,9,0.20);
  --amber-text:         #b45309;

  /* Recovery-key — teal highlight for the "Recuperável agora" key card */
  --recovery-key:        #0f766e;
  --recovery-key-bg:     rgba(15,118,110,0.06);
  --recovery-key-border: rgba(15,118,110,0.18);

  /* OK alias used across glosas page (= --success, centralised here) */
  --ok:      #15803d;
  --ok-fill: rgba(21,128,61,0.12);

  /* Chart fill variants (alpha-reduced backgrounds for chart bars) */
  --danger-fill: rgba(185,28,28,0.10);
  --teal-fill:   rgba(15,118,110,0.12);

  /* Teal alias (0f766e is used inline in many places — token-only now) */
  --teal: #0f766e;
  --sky:  #0ea5e9;

  /* Info (sky/brand-2 tint) — used for rates-banner--info and similar informational callouts */
  --info-bg:            rgba(14,165,233,0.07);   /* sky at 7% — soft background */
  --info-border:        rgba(14,165,233,0.18);   /* sky at 18% — subtle outline */
  --info-border-medium: rgba(14,165,233,0.22);   /* sky at 22% — slightly stronger outline (cross-base notice) */
  --info-text:          #0c4a6e;                 /* dark sky — legible on white/light bg */
  --info-text-medium:   #0369a1;                 /* mid-dark sky — icon accent inside info callouts */

  /* Danger semantic variants (error banners, alert borders) */
  --danger-bg:     rgba(185,28,28,0.06);  /* danger at 6% — error banner fill */
  --danger-border: rgba(185,28,28,0.16);  /* danger at 16% — error banner outline */
  --ok-bg:         rgba(22,101,52,0.08);   /* green tint — badge/status-box "ok" fill (admin) */
  --warn-bg:       rgba(245,158,11,0.12);  /* amber tint — badge/status-box "warn" fill (admin) */

  /* Amber callout tokens — solid-background warning cards (.study-warning, .its-warn-steep,
     hung-state banner). Distinct from --warn-bg (alpha) and --amber-bg (glosas) because this
     pattern uses the opaque Tailwind yellow-50/100/900 triplet. */
  --warn-callout-bg:     #fffbeb;  /* yellow-50 — callout fill */
  --warn-callout-border: #fde68a;  /* yellow-200 — callout border */
  /* text color: reuse existing --amber-text-strong (#78350f / yellow-900) */

  /* Amber SIH banner tints — separate from --amber-bg/border (glosas) to allow independent tuning */
  --amber-bg-subtle:      rgba(245,158,11,0.08);  /* base AIH unit banner fill */
  --amber-border-subtle:  rgba(245,158,11,0.28);  /* base AIH unit banner border */
  --amber-bg-emphasis:    rgba(245,158,11,0.13);  /* non-standard base (SP/RJ/ER) banner fill */
  --amber-border-emphasis:rgba(245,158,11,0.45);  /* non-standard base (SP/RJ/ER) banner border */
  --amber-text-strong:    #78350f;                /* dark amber — bold banner heading text */
  --amber-text-subtle:    #92400e;                /* mid amber — secondary banner detail text */

  /* Rates table row hover — brand tint at 3%, keeps hover subtle on white rows */
  --rates-row-hover: rgba(0,83,154,0.03);

  /* Rates KPI highlight card — brand tint fill + outline */
  --rates-kpi-bg:     rgba(0,83,154,0.04);
  --rates-kpi-border: rgba(0,83,154,0.14);

  /* Tooltip emphasis — white at 92% opacity for <strong> text inside dark tooltips */
  --tooltip-strong: rgba(255,255,255,0.92);

  /* Hero banner gradient (brand → teal). Token-only so pages never inline the rgba. */
  --hero-gradient: linear-gradient(135deg, rgba(0,83,154,0.97) 0%, rgba(15,118,110,0.90) 100%);

  /* Enrich-note callout (SIH-SP panel, .sp-enrich-label-note) — teal tint at
     same hue as --teal (0f766e) but lighter, so it matches the teal accent
     without hardcoding rgba in the page. */
  --enrich-note-bg:     rgba(15,118,110,0.07);   /* teal at 7% — very soft fill */
  --enrich-note-border: rgba(15,118,110,0.22);   /* teal at 22% — visible outline */

  /* Badge text colors — dark legible text on alpha-tinted badge backgrounds.
     Centralised here so badge CSS never hardcodes hex. */
  --badge-green-text:  #14532d;
  --badge-red-text:    #7f1d1d;
  --badge-teal-text:   #134e4a;

  /* Rose — clinical accent for death/mortality events (distinct from --danger which is UI error red) */
  --rose: #be123c;

  /* Okabe-Ito palette — colorblind-safe tier colors for KM curves */
  --chart-tier-1: #0072B2; /* blue */
  --chart-tier-2: #E69F00; /* amber */
  --chart-tier-3: #009E73; /* green */
  --chart-tier-4: #D55E00; /* vermilion */

  /* painel escuro de destaque (prediction-card) — navy sólido, sem gradiente */
  --panel-dark: #16233a;

  /* Brand alpha variants — replaces rgba(0,83,154,...) hardcodes in timeline CSS and KM chart JS */
  --brand-fade-12: rgba(0,83,154,0.12); /* input focus ring */
  --brand-fade-22: rgba(0,83,154,0.22); /* timeline bar fill + KM CI band fill */
  --brand-fade-25: rgba(0,83,154,0.25); /* timeline point hover ring */

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 2px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.10);

  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --font: "SF Pro Display", -apple-system, "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", monospace;

  /* spacing scale — --space-sm aligned to existing fallback value (10px) used in
     custom-period-wrap; other values chosen to follow 4-px grid */
  --space-xs:  4px;
  --space-sm:  10px;   /* matches var(--space-sm, 10px) fallback already in use */
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* typographic scale — fonte: datasus_sih (values mirrored exactly so pages that
     declare these locally can drop their local :root decl without any visual change,
     and pages that reference them without declaring them — e.g. datasus_sim — get
     the correct value immediately) */
  --text-2xs: 10px;    /* micro info-icon / tooltip-trigger glyph (ℹ inline in metric labels) */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --section-title: 17px;
  --control-height: 38px;

  /* Code+name table cell typography (Design Principle #8 — single-cell code+name hierarchy).
     Use these instead of raw 13.5px / 11.5px to keep table rendering consistent across pages. */
  --text-table-primary: 13.5px;  /* primary name/description text in a code+name table cell */
  --text-table-sub:     11.5px;  /* sub-line code/identifier below the primary name */

  /* Chart annotation — font size for Canvas 2D labels (e.g. ITS intervention line label).
     Canvas ctx.font cannot use var(--token) directly; read via getComputedStyle in JS. */
  --chart-annotation-font-size: 11px;

  /* Ascertainment-survival bar chart (.asc-range-bar-*) — structural layout dimensions.
     Not color/spacing tokens but fixed visual-layout widths/heights required by the
     proportional bar mechanic (bars span 0–100% of a fixed-width track; label and
     pct columns need predictable widths so text doesn't reflow into the track). */
  --asc-bar-label-w:       68px;  /* label column width (desktop) */
  --asc-bar-label-w-mobile: 40px; /* label column width (≤780 px breakpoint) */
  --asc-bar-h:             12px;  /* track height — balances bar readability vs page density */
  --asc-bar-pct-w:        120px;  /* pct readout min-width (desktop) */
  --asc-bar-pct-w-mobile:  90px;  /* pct readout min-width (≤780 px breakpoint) */

  /* Regional-gradient survival bar chart (.reg-region-*) — structural layout dimensions.
     Mirrors the .asc-* pattern but with a wider label column to fit region names
     (Norte/Nordeste/Centro-Oeste) and a meta column for n_obs + median follow-up. */
  --reg-label-w:          108px;  /* region name column width (desktop) */
  --reg-label-w-mobile:    64px;  /* region name column width (≤780 px breakpoint) */
  --reg-meta-w:           120px;  /* n_obs + median follow-up readout min-width (desktop) */
  --reg-meta-w-mobile:     60px;  /* n_obs + median follow-up readout min-width (≤780 px) */
}

/* ─────────────────────────────────────────────────────────────
   BASE RESET
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────────────────── */
.shell {
  width: min(1200px, calc(100vw - 32px));
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 64px;
}

/* ─────────────────────────────────────────────────────────────
   CARD / PANEL
───────────────────────────────────────────────────────────── */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card--lifted, .panel--lifted {
  box-shadow: var(--shadow);
}

.card-head, .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line-2);
}

.card-title, .panel-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.card-subtitle, .panel-copy {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.55;
}

.card-body, .panel-body {
  padding: 18px 22px;
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────── */
.btn, .button, .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.btn:disabled, .button:disabled, .cta:disabled,
.btn[disabled], .button[disabled], .cta[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary / solid */
.btn, .button, .cta {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.btn:hover, .button:hover, .cta:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Secondary */
.btn.secondary, .button.secondary, .cta-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.btn.secondary:hover, .button.secondary:hover, .cta-secondary:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}

/* Focus-visible rings on buttons — visible only with keyboard navigation */
.btn:focus-visible, .button:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Sizes */
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn--lg { height: 44px; padding: 0 22px; font-size: 14px; border-radius: 8px; }
.btn--full { width: 100%; }

/* ─────────────────────────────────────────────────────────────
   EYEBROW / LABELS
───────────────────────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 6px;
}

/* ─────────────────────────────────────────────────────────────
   FORMS
───────────────────────────────────────────────────────────── */
.field { display: grid; gap: 5px; min-width: 0; }
.field.full { grid-column: 1 / -1; }

label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  display: block;
}

.hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="month"],
select,
textarea {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder, textarea::placeholder { color: var(--muted); }

input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,83,154,0.12);
}

textarea {
  height: auto;
  padding: 9px 10px;
  resize: vertical;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

select[multiple] { min-height: 100px; padding: 8px; background-image: none; padding-right: 10px; }

/* ─────────────────────────────────────────────────────────────
   DATA TABLES
───────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 600px;
  background: var(--surface);
}

thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

thead th {
  padding: 9px 14px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  vertical-align: middle;
  line-height: 1.4;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(0,83,154,0.025); }

/* ─────────────────────────────────────────────────────────────
   BADGES / TAGS
───────────────────────────────────────────────────────────── */
.tag, .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0,83,154,0.08);
  color: var(--brand);
  border: 1px solid rgba(0,83,154,0.14);
}

.tag--teal { background: rgba(20,184,166,0.08); color: #0f766e; border-color: rgba(20,184,166,0.14); }
.tag--red  { background: rgba(192,57,43,0.08);  color: var(--danger); border-color: rgba(192,57,43,0.14); }
.tag--gray { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.tag--green { background: rgba(26,122,74,0.08); color: var(--success); border-color: rgba(26,122,74,0.14); }

/* ─────────────────────────────────────────────────────────────
   ALERTS
───────────────────────────────────────────────────────────── */
.alert, .status-line {
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.55;
  border: 1px solid transparent;
}

.alert--error,   .status-line.error   { background: rgba(192,57,43,0.06); border-color: rgba(192,57,43,0.16); color: #7f1d1d; }
.alert--success, .status-line.success { background: rgba(26,122,74,0.06); border-color: rgba(26,122,74,0.16); color: #14532d; }
.alert--info,    .status-line         { background: rgba(0,83,154,0.05);  border-color: rgba(0,83,154,0.13);  color: #1e3a5f; }
.alert--warn                          { background: rgba(161,98,7,0.06);  border-color: rgba(161,98,7,0.16);  color: #713f12; }

/* ─────────────────────────────────────────────────────────────
   PROGRESS BAR
───────────────────────────────────────────────────────────── */
.progress {
  padding: 14px 16px;
  border-radius: var(--r);
  background: rgba(0,83,154,0.04);
  border: 1px solid rgba(0,83,154,0.1);
}

.progress-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--brand);
  font-weight: 700;
  font-size: 13px;
}

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(0,83,154,0.12);
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 0.25s ease;
}

.progress-detail { margin-top: 8px; color: var(--muted); font-size: 12px; }

/* ─────────────────────────────────────────────────────────────
   METRICS / KPI
───────────────────────────────────────────────────────────── */
.metric {
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line-2);
}

.metric span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.metric strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  letter-spacing: -0.04em;
  color: var(--brand);
  overflow-wrap: anywhere;
  line-height: 1.1;
}

/* ─────────────────────────────────────────────────────────────
   SKELETON LOADER
───────────────────────────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position:  600px 0; }
}

.skeleton, .hdb-skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 25%,
    rgba(0,0,0,0.07) 50%,
    rgba(0,0,0,0.04) 75%) !important;
  background-size: 600px 100% !important;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-xs);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────
   SPINNER
───────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(0,83,154,0.18);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────────
   LANGUAGE SWITCHER
───────────────────────────────────────────────────────────── */
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line-2);
}

.language-flag {
  width: 36px;
  height: 26px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 4px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.language-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }

.language-flag.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(0,83,154,0.15);
}

.language-flag:hover:not(.is-active) { border-color: var(--line); }

/* ─────────────────────────────────────────────────────────────
   SEGMENTED CONTROL / BUTTON GROUP
   Used by pages needing discrete option sets (period, window)
───────────────────────────────────────────────────────────── */
.seg-control {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
  -webkit-appearance: none;
  appearance: none;
}

.seg-btn:hover:not(.is-active):not(:disabled) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.seg-btn.is-active {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: var(--shadow-xs);
}

.seg-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Regulatory default pill inside a seg-btn */
.seg-btn .reg-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--ok-fill);
  color: var(--ok);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Custom-period reveal area */
.custom-period-wrap {
  display: none;
  margin-top: var(--space-sm, 10px);
  padding-top: var(--space-sm, 10px);
  border-top: 1px solid var(--line-2);
}

.custom-period-wrap.is-visible { display: block; }

/* ─────────────────────────────────────────────────────────────
   INFO TOOLTIP (accessible popover on ℹ click)
───────────────────────────────────────────────────────────── */
/* Inline trigger icon */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  cursor: pointer;
  padding: 0;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1;
  transition: color 0.13s;
  -webkit-appearance: none;
  appearance: none;
}

.info-btn:hover { color: var(--brand); }

.info-btn:focus-visible {
  color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Popover panel */
.info-popover {
  position: fixed;
  z-index: 200;
  max-width: 300px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  background: var(--ink-2);
  color: var(--surface);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.info-popover.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────
   METHODOLOGY PANEL (expandable details)
───────────────────────────────────────────────────────────── */
.method-details {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.method-details summary {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}

.method-details summary::-webkit-details-marker { display: none; }

.method-details summary::after {
  content: '▸';
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.18s;
  flex-shrink: 0;
}

.method-details[open] summary::after {
  transform: rotate(90deg);
}

.method-details summary:hover { color: var(--brand); }

.method-body {
  padding: 6px 18px 18px;
  display: grid;
  gap: 16px;
  border-top: 1px solid var(--line-2);
}

.method-section h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 6px;
}

.method-section p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.method-note {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  color: var(--amber-text);
  font-size: 12px;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 48px;
  padding: 18px 0;
  border-top: 1px solid var(--line-2);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────────────────────────── */
.hdb-empty-state, .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
}

.hdb-empty-state__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.hdb-empty-state__body  { font-size: 13.5px; line-height: 1.6; max-width: 38ch; margin: 0; }
.hdb-empty-state__hint  { font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; margin-top: 4px; }
.hdb-empty-state__hint:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   GRID UTILITIES
───────────────────────────────────────────────────────────── */
.g-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.g-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.g-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .shell { padding-top: 20px; }
}

@media (max-width: 640px) {
  .shell { width: calc(100vw - 20px); }
  .card-body, .card-head, .panel-body, .panel-head { padding: 14px 16px; }
}

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

/* ─────────────────────────────────────────────────────────────
   RATES PANEL — Taxas populacionais (shared across SIH/SIM/SIA)
───────────────────────────────────────────────────────────── */

/* Container: hidden until extraction ready */
.rates-panel {
  margin-top: 24px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rates-panel[hidden] { display: none !important; }

/* Panel header row */
.rates-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line-2);
}

.rates-panel__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.rates-panel__title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rates-panel__subtitle {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* Controls area */
.rates-panel__controls {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.rates-control-group {
  display: flex;
  flex-direction: column;
  gap: var(--r-xs, 4px);
}

.rates-control-group__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rates-control-group__body {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Checkbox group */
.rates-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.rates-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Rates KPI card */
.rates-kpi {
  margin: 16px 20px 0;
  padding: 16px 20px;
  border-radius: var(--r);
  background: var(--rates-kpi-bg);
  border: 1px solid var(--rates-kpi-border);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.rates-kpi[hidden] { display: none !important; }

.rates-kpi__main {
  flex: 0 0 auto;
}

.rates-kpi__value {
  display: block;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--brand);
  line-height: 1;
}

.rates-kpi__unit {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rates-kpi__meta {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rates-kpi__meta-item {
  font-size: 13px;
  color: var(--ink-2);
}

.rates-kpi__meta-item strong {
  color: var(--ink);
}

/* Banners */
.rates-banner {
  margin: 12px 20px 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
}

.rates-banner[hidden] { display: none !important; }

.rates-banner--warn {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  color: var(--amber-text);
}

.rates-banner--info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
}

.rates-banner--error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

/* Coverage meta strip below KPI */
.rates-coverage {
  margin: 10px 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.rates-coverage[hidden] { display: none !important; }

.rates-coverage__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rates-coverage__value {
  font-weight: 700;
  color: var(--ink-2);
}

/* Table wrapper */
.rates-table-wrap {
  margin: 14px 20px 20px;
  overflow: auto;
  max-height: 540px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}

.rates-table-wrap[hidden] { display: none !important; }

.rates-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: var(--surface);
  font-size: 13px;
}

.rates-table th,
.rates-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

.rates-table tr:last-child td { border-bottom: 0; }

.rates-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}

.rates-table thead th.is-num { text-align: right; }

.rates-table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rates-table tbody tr:hover { background: var(--rates-row-hover); }

/* Row with no denominator: subtle muted indicator */
.rates-table tr.no-denom td { color: var(--muted); }
.rates-table tr.no-denom td.is-num { color: var(--muted); }

.rates-no-denom-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--amber-text);
}

/* Pagination row */
.rates-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.rates-pagination[hidden] { display: none !important; }

.rates-pagination__info {
  flex: 1;
  font-size: 12px;
  color: var(--muted);
}

/* Tooltip trigger for rates ℹ icon */
.rates-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  transition: color 0.13s, border-color 0.13s;
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
}

.rates-info-btn:hover { color: var(--brand); border-color: var(--brand); }

.rates-info-btn:focus-visible {
  color: var(--brand);
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Tooltip popover for rates */
.rates-tooltip {
  position: fixed;
  z-index: 300;
  max-width: 320px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--ink-2);
  color: var(--surface);
  font-size: 12px;
  line-height: 1.55;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.rates-tooltip.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.rates-tooltip p { margin: 0 0 7px; }
.rates-tooltip p:last-child { margin: 0; }
.rates-tooltip strong { color: var(--tooltip-strong); }

/* Loading state inside panel */
.rates-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  color: var(--muted);
  font-size: 13px;
}

.rates-loading[hidden] { display: none !important; }