/*
 * ProporcionaBR — Design Tokens (Charcoal Sage / Warm Teal)
 * Fonte única de verdade para cores, tipografia, espaçamento, bordas e sombras.
 *
 * Sistema novo (handoff "design_handoff_proporcionabr_theme"):
 *   - Tokens canônicos no namespace --pb-*
 *   - Tema claro em :root (Charcoal Sage)
 *   - Tema escuro em [data-theme="dark"] (Warm Teal)
 *
 * Compat:
 *   - data-bs-theme="dark" (Hyper) é mantido em paralelo a data-theme="dark"
 *   - Tokens legados --color-*, --surface-*, --text-*, --space-*, --radius-*
 *     viram aliases dos --pb-* → o app inteiro adota a nova paleta automaticamente
 *   - Variáveis --bs-* (Bootstrap) e --greeva-* (Hyper sidebar/topbar) também
 *     são reapontadas pra os tokens novos
 */

/* ── Nunito self-hosted (legado: classes .text-friendly) ─────────────── */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito/nunito-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito/nunito-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito/nunito-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito/nunito-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito/nunito-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito/nunito-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Sistema de cores — Tema claro · Charcoal Sage (C3)
   ============================================================ */
:root,
[data-theme="light"] {
  /* ── Surfaces ── */
  --pb-bg:            #ffffff;
  --pb-surface:       #ffffff;
  --pb-surface-2:     #f5f4f1;

  /* ── Sidebar (escura, mesmo no tema claro — "ancoragem" entre modos) ── */
  --pb-sidebar-bg:        #1a1d1c;
  --pb-sidebar-border:    #262826;
  --pb-sidebar-fg:        #ebe8e0;
  --pb-sidebar-fg-muted:  #9a948a;
  --pb-sidebar-fg-soft:   #6a655e;
  --pb-sidebar-item-active-bg: rgba(255,255,255,.08);
  --pb-sidebar-item-active-fg: #a8e0bf;

  /* ── Texto ── */
  --pb-text:          #1a1a1a;
  --pb-text-muted:    #56544f;
  --pb-text-soft:     #8a8580;

  /* ── Borders ── */
  --pb-border:        #e6e3dd;
  --pb-border-soft:   #ece9e2;
  --pb-divider:       #ece9e2;

  /* ── Brand: Sálvia BR ── */
  --pb-primary:         #2f6b48;
  --pb-primary-fg:      #ffffff;
  --pb-primary-soft:    #e3efe6;
  --pb-primary-soft-fg: #244f35;   /* Texto sobre primary-soft (badges, chips, callouts) */
  --pb-primary-shadow:  0 4px 12px -4px rgba(47,107,72,.45);

  /* ── Accent: Terracota ── */
  --pb-accent:        #c97b4a;
  --pb-accent-fg:     #6e3a18;
  --pb-accent-soft:   #fbe7d6;

  /* ── Chart ── */
  --pb-chart-band:        #cfe6d8;
  --pb-chart-band-stroke: #7ab395;
  --pb-chart-ref:         #bfb9b0;
  --pb-chart-grid:        #ece9e2;
  --pb-chart-axis:        #56544f;

  /* ── Chart tooltip (shared) — grafite quase preto em ambos os temas
   * pra "ancorar" o tooltip como um overlay flutuante. Header levemente
   * mais escuro que o body. Foreground em branco-cheio (não creme):
   * sobre grafite, qualquer creme parece apagado opticamente. */
  --pb-tooltip-bg:        #1a1d1c;
  --pb-tooltip-header-bg: #0f1413;
  --pb-tooltip-fg:        #ffffff;
  --pb-tooltip-fg-muted:  #e6e3dd;
  --pb-tooltip-border:    #2e3b36;
  --pb-tooltip-shadow:    0 12px 32px -8px rgba(0,0,0,.55);

  /* ── Chart series palette (5 séries canônicas)
   * Aplicada em ordem nas séries dos ApexCharts via PBCharts.colors. */
  --pb-series-patient:  #2f6b48;   /* paciente / "Maria" — sálvia */
  --pb-series-acondro:  #c97b4a;   /* faixa acondroplasia — terracota */
  --pb-series-oms:      #8a8580;   /* OMS / referências — taupe */
  --pb-series-band:     #cfe6d8;   /* banda P5–P95 acondro — sálvia clara */
  --pb-series-band-2:   #fbe7d6;   /* banda alternativa — terracota clara */

  /* ── Estados ── */
  --pb-success:  #2f6b48;
  --pb-warning:  #c97b4a;
  --pb-error:    #b54a3a;
  --pb-info:     #4a7ab5;

  /* ── Elevation ── */
  --pb-shadow-sm: 0 1px 2px rgba(0,0,0,.03);
  --pb-shadow:    0 1px 2px rgba(0,0,0,.03), 0 6px 22px -10px rgba(0,0,0,.10);
  --pb-shadow-lg: 0 8px 28px -8px rgba(0,0,0,.18);
}

/* ============================================================
   Sistema de cores — Tema escuro · Warm Teal
   Aplicado tanto em [data-theme="dark"] quanto [data-bs-theme="dark"]
   (compat com customizer Hyper enquanto a migração não termina).
   ============================================================ */
[data-theme="dark"],
[data-bs-theme="dark"] {
  --pb-bg:            #1f2a2a;
  --pb-surface:       #27332f;
  --pb-surface-2:     #2e3b36;

  --pb-sidebar-bg:        #1a2424;
  --pb-sidebar-border:    #2e3b36;
  --pb-sidebar-fg:        #f0ebe0;
  --pb-sidebar-fg-muted:  #b5ad9e;
  --pb-sidebar-fg-soft:   #8a8276;
  --pb-sidebar-item-active-bg: #2d4438;
  --pb-sidebar-item-active-fg: #5cb285;

  --pb-text:          #f0ebe0;
  --pb-text-muted:    #b5ad9e;
  --pb-text-soft:     #8a8276;

  --pb-border:        #3a4742;
  --pb-border-soft:   #32403b;
  --pb-divider:       #32403b;

  --pb-primary:         #5cb285;
  --pb-primary-fg:      #0f1a17;
  --pb-primary-soft:    #2d4438;
  --pb-primary-soft-fg: #a8e0bf;   /* Mint claro sobre dark moss — passa AA bem */
  --pb-primary-shadow:  0 4px 12px -4px rgba(92,178,133,.40);

  --pb-accent:        #e3a76b;
  --pb-accent-fg:     #f0d9b6;
  --pb-accent-soft:   #3a3026;

  --pb-chart-band:        #365044;
  --pb-chart-band-stroke: #4a7060;
  --pb-chart-ref:         #5a6660;
  --pb-chart-grid:        #32403b;
  --pb-chart-axis:        #b5ad9e;

  /* Tooltip mantém o mesmo grafite escuro nos dois temas — é overlay,
   * não precisa "trocar". Apenas reduz o contraste da borda. */
  --pb-tooltip-border:    #3a4742;

  /* Séries no dark — versões luminosas pra ler no fundo teal. */
  --pb-series-patient:  #5cb285;
  --pb-series-acondro:  #e3a76b;
  --pb-series-oms:      #9a948a;
  --pb-series-band:     #365044;
  --pb-series-band-2:   #3a3026;

  --pb-success:  #5cb285;
  --pb-warning:  #e3a76b;
  --pb-error:    #e07a6a;
  --pb-info:     #7aa6d6;

  --pb-shadow-sm: 0 1px 2px rgba(0,0,0,.20);
  --pb-shadow:    0 1px 2px rgba(0,0,0,.20), 0 6px 18px -8px rgba(0,0,0,.35);
  --pb-shadow-lg: 0 12px 32px -8px rgba(0,0,0,.55);
}

/* ============================================================
   Tipografia, escala, spacing, radii, motion
   ============================================================ */
:root {
  /* Fraunces (serif humanista) + Inter (UI) — carregadas via Google Fonts em base.html */
  --pb-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pb-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --pb-fs-xs:   11px;
  --pb-fs-sm:   12px;
  --pb-fs-base: 14px;
  --pb-fs-md:   15px;
  --pb-fs-lg:   18px;
  --pb-fs-xl:   24px;
  --pb-fs-2xl:  28px;
  --pb-fs-3xl:  36px;
  --pb-fs-4xl:  44px;

  --pb-lh-tight:   1.1;
  --pb-lh-snug:    1.25;
  --pb-lh-normal:  1.45;
  --pb-lh-relaxed: 1.6;

  --pb-tracking-tight: -0.025em;
  --pb-tracking-snug:  -0.01em;
  --pb-tracking-wide:  0.14em;

  --pb-space-1:  4px;
  --pb-space-2:  8px;
  --pb-space-3:  12px;
  --pb-space-4:  16px;
  --pb-space-5:  20px;
  --pb-space-6:  24px;
  --pb-space-8:  32px;
  --pb-space-10: 40px;
  --pb-space-12: 48px;

  --pb-radius-sm:   6px;
  --pb-radius:      10px;
  --pb-radius-md:   12px;
  --pb-radius-lg:   14px;
  --pb-radius-xl:   18px;
  --pb-radius-pill: 999px;

  --pb-easing:        cubic-bezier(.2,.7,.3,1);
  --pb-duration-fast: 120ms;
  --pb-duration:      180ms;
  --pb-duration-slow: 280ms;
}

/* ============================================================
   Base — html/body
   Transição suave entre temas (claro ↔ escuro)
   ============================================================ */
html, body {
  background: var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-font-body);
  font-size: var(--pb-fs-base);
  line-height: var(--pb-lh-normal);
}

html, body, .card, .btn, .form-control, .form-select, .sidenav-menu, .app-topbar {
  transition: background-color var(--pb-duration-slow) var(--pb-easing),
              color var(--pb-duration-slow) var(--pb-easing),
              border-color var(--pb-duration-slow) var(--pb-easing);
}
@media (prefers-reduced-motion: reduce) {
  html, body, .card, .btn, .form-control, .form-select, .sidenav-menu, .app-topbar {
    transition: none;
  }
}

/* ============================================================
   Compat layer — tokens legados viram aliases dos --pb-*
   Mantém ~200+ usos em templates funcionando com a nova paleta.
   ============================================================ */
:root {
  /* ── CORES legadas ── */
  --color-primary:        var(--pb-primary);
  --color-primary-dark:   #244f35;   /* sálvia mais escura — texto sobre branco */
  --color-primary-light:  var(--pb-primary-soft);
  --color-primary-glow:   rgba(47,107,72,.18);

  --color-danger:         var(--pb-error);
  --color-danger-light:   #f6dad4;

  --color-warning:        var(--pb-accent);
  --color-warning-light:  var(--pb-accent-soft);

  --color-info:           var(--pb-info);
  --color-info-light:     #dde6f1;

  --color-success:        var(--pb-success);
  --color-success-light:  var(--pb-primary-soft);

  /* Neutros — 10 níveis (mantidos para fallback de utilitários antigos) */
  --color-neutral-50:   #f8faf7;
  --color-neutral-100:  #f1f0eb;
  --color-neutral-200:  #e6e3dd;
  --color-neutral-300:  #cbc8c0;
  --color-neutral-400:  #9a948a;
  --color-neutral-500:  #6a655e;
  --color-neutral-600:  #56544f;
  --color-neutral-700:  #3a3934;
  --color-neutral-800:  #1a1a1a;
  --color-neutral-900:  #0f0f0f;

  /* Tema dark legado (onboarding) — aponta para teal */
  --color-navy:         var(--pb-bg);
  --color-navy-2:       var(--pb-surface);
  --color-navy-3:       var(--pb-surface-2);
  --color-navy-border:  rgba(255,255,255,.08);
  --color-navy-muted:   rgba(255,255,255,.45);

  /* Superfícies legadas */
  --surface-page:       var(--pb-bg);
  --surface-card:       var(--pb-surface);
  --surface-border:     var(--pb-border);

  /* Texto legado */
  --text-primary:       var(--pb-text);
  --text-secondary:     var(--pb-text-muted);
  --text-muted:         var(--pb-text-muted);

  /* Paleta warm legada — reapontada pra terracota nova
   * (Mantém compat com cards de boas-vindas, marIA, jornada.) */
  --color-peach:          var(--pb-accent);
  --color-peach-light:    var(--pb-accent-soft);
  --color-sand:           var(--pb-surface-2);
  --color-lavender:       var(--pb-info);
  --color-lavender-light: #e3eaf2;
  --color-sunshine:       var(--pb-accent);
  --color-sunshine-light: var(--pb-accent-soft);

  --tone-welcoming-bg:    var(--pb-surface-2);
  --tone-welcoming-fg:    var(--pb-text);
  --tone-welcoming-border:var(--pb-border);
  --tone-journey-bg:      var(--pb-accent-soft);
  --tone-journey-accent:  var(--pb-accent);
  --tone-journey-fg:      var(--pb-accent-fg);
  --tone-celebration:     var(--pb-accent);
  --tone-maria-bg:        var(--pb-primary-soft);
  --tone-maria-accent:    var(--pb-primary);
  --tone-maria-fg:        #244f35;

  /* Sombras legadas → reapontadas pro novo sistema */
  --shadow-soft:    var(--pb-shadow);
  --shadow-lift:    var(--pb-shadow-lg);
  --shadow-sm:      var(--pb-shadow-sm);
  --shadow-md:      var(--pb-shadow);
  --shadow-lg:      var(--pb-shadow-lg);
  --shadow-xl:      var(--pb-shadow-lg);

  /* Glow ambiente — neutralizado (era pêssego/lavanda; agora discreto)
   * O design Charcoal Sage usa fundo branco puro sem ambient gradient. */
  --ambient-glow:   transparent;
  --ambient-glow-2: transparent;

  /* Raio legado */
  --radius-card:    var(--pb-radius-xl);
  --radius-pill:    var(--pb-radius-pill);
  --radius-sm:      var(--pb-radius-sm);
  --radius-md:      var(--pb-radius);
  --radius-lg:      var(--pb-radius-lg);
  --radius-xl:      var(--pb-radius-xl);
  --radius-full:    var(--pb-radius-pill);

  /* Spacing legado */
  --space-1:   var(--pb-space-1);
  --space-2:   var(--pb-space-2);
  --space-3:   var(--pb-space-3);
  --space-4:   var(--pb-space-4);
  --space-5:   var(--pb-space-5);
  --space-6:   var(--pb-space-6);
  --space-8:   var(--pb-space-8);
  --space-10:  var(--pb-space-10);
  --space-12:  var(--pb-space-12);
  --space-16:  64px;

  /* Tipografia legada — agora aponta pra Inter/Fraunces, mas mantém Nunito
   * acessível em .text-friendly enquanto o redesign não chega lá. */
  --font-family-base:     var(--pb-font-body);
  --font-family-friendly: 'Nunito', 'Quicksand', system-ui, sans-serif;

  --font-size-2xs:  0.625rem;
  --font-size-xs:   0.6875rem;
  --font-size-sm:   0.75rem;
  --font-size-base: 0.875rem;
  --font-size-md:   0.9375rem;
  --font-size-lg:   1rem;
  --font-size-xl:   1.125rem;
  --font-size-2xl:  1.25rem;
  --font-size-3xl:  1.5rem;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:  1.2;
  --line-height-base:   1.5;
  --line-height-loose:  1.7;

  --border-width:   1px;
  --border-color:   var(--pb-border);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;

  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal:     1050;
  --z-toast:     1055;
  --z-skip-link: 99999;
}

/* Dark mode — recalibra apenas os tokens legados que precisam virar.
 * (Os --pb-* já trocam sozinhos via o seletor [data-theme="dark"] acima.) */
[data-theme="dark"],
[data-bs-theme="dark"] {
  --color-primary-dark:   #7dc69e;
  --color-danger-light:   rgba(224,122,106,.18);
  --color-warning-light:  var(--pb-accent-soft);
  --color-info-light:     rgba(122,166,214,.18);
  --color-success-light:  var(--pb-primary-soft);

  --surface-page:         var(--pb-bg);
  --surface-card:         var(--pb-surface);
  --surface-border:       var(--pb-border);

  --text-primary:         var(--pb-text);
  --text-secondary:       var(--pb-text-muted);
  --text-muted:           var(--pb-text-muted);

  --tone-welcoming-bg:     var(--pb-surface-2);
  --tone-welcoming-border: var(--pb-border);
  --tone-welcoming-fg:     var(--pb-text);
  --tone-journey-bg:       var(--pb-accent-soft);
  --tone-journey-accent:   var(--pb-accent);
  --tone-journey-fg:       var(--pb-accent-fg);
  --tone-maria-bg:         var(--pb-primary-soft);
  --tone-maria-accent:     var(--pb-primary);
  --tone-maria-fg:         #c9f0d8;

  --color-peach:           var(--pb-accent);
  --color-peach-light:     var(--pb-accent-soft);

  --shadow-soft: var(--pb-shadow);
  --shadow-lift: var(--pb-shadow-lg);
  --shadow-sm:   var(--pb-shadow-sm);
  --shadow-md:   var(--pb-shadow);
  --shadow-lg:   var(--pb-shadow-lg);
}

/* ============================================================
   Bootstrap glue — Hyper usa --bs-* na cascata; reapontamos aqui
   pra herdar a paleta nova sem mexer no app.min.css.
   ============================================================ */
:root {
  --bs-body-bg:       var(--pb-bg);
  --bs-body-color:    var(--pb-text);
  --bs-secondary-bg:  var(--pb-surface);
  --bs-tertiary-bg:   var(--pb-surface-2);
  --bs-border-color:  var(--pb-border);
  /* Primary do Bootstrap → sálvia. Afeta .btn-primary, .text-primary,
   * .bg-primary, .border-primary etc. usados em toda a app. */
  --bs-primary:        47, 107, 72;     /* #2f6b48 RGB */
  --bs-primary-rgb:    47, 107, 72;
  --bs-primary-bg-subtle: var(--pb-primary-soft);
  --bs-primary-text-emphasis: var(--pb-primary-soft-fg);
  --bs-primary-border-subtle: color-mix(in srgb, var(--pb-primary) 30%, transparent);
}
[data-theme="dark"],
[data-bs-theme="dark"] {
  --bs-body-bg:       var(--pb-bg);
  --bs-body-color:    var(--pb-text);
  --bs-secondary-bg:  var(--pb-surface);
  --bs-tertiary-bg:   var(--pb-surface-2);
  --bs-border-color:  var(--pb-border);
  --bs-primary:        92, 178, 133;    /* #5cb285 RGB */
  --bs-primary-rgb:    92, 178, 133;
  --bs-primary-bg-subtle: var(--pb-primary-soft);
  --bs-primary-text-emphasis: var(--pb-primary-soft-fg);
  --bs-primary-border-subtle: color-mix(in srgb, var(--pb-primary) 30%, transparent);
}

/* btn-primary do Bootstrap usa background-color: var(--bs-primary)
 * — mas como rgba(...) com transparência. Forçamos a render em
 * sálvia sólida + fg branco/escuro coerente. */
.btn-primary {
  background-color: var(--pb-primary) !important;
  border-color: var(--pb-primary) !important;
  color: var(--pb-primary-fg) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: color-mix(in srgb, var(--pb-primary) 90%, #000 10%) !important;
  border-color: color-mix(in srgb, var(--pb-primary) 90%, #000 10%) !important;
  color: var(--pb-primary-fg) !important;
  filter: brightness(1.04);
}
.btn-outline-primary {
  color: var(--pb-primary) !important;
  border-color: var(--pb-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--pb-primary) !important;
  color: var(--pb-primary-fg) !important;
}
.text-primary { color: var(--pb-primary) !important; }
.bg-primary   { background-color: var(--pb-primary) !important; color: var(--pb-primary-fg); }
.bg-primary-subtle { background-color: var(--pb-primary-soft) !important; }
.text-primary-emphasis { color: var(--pb-primary-soft-fg) !important; }

body {
  background-color: var(--pb-bg) !important;
  color: var(--pb-text);
}

/* Cards genéricos Bootstrap → superfície clara */
.card,
.card-body {
  background-color: var(--pb-surface);
}

/* ============================================================
   Hyper sidebar/topbar — Sidebar GRAFITE em AMBOS os temas
   (princípio "ancoragem" do design Charcoal Sage).
   No tema escuro fica um pouco mais escura (#1a2424 vs #1a1d1c).
   ============================================================ */
:root {
  /* Sidebar — sempre grafite
   * Idle usa --pb-sidebar-fg (creme cheio) ao invés do "muted" do spec:
   * o muted apaga demais o contéudo clínico em ambos os temas. */
  --greeva-menu-bg:                var(--pb-sidebar-bg) !important;
  --greeva-menu-item-color:        var(--pb-sidebar-fg) !important;
  --greeva-menu-item-hover-bg:     rgba(255,255,255,.06) !important;
  --greeva-menu-item-hover-color:  #ffffff !important;
  --greeva-menu-item-active-bg:    var(--pb-sidebar-item-active-bg) !important;
  --greeva-menu-item-active-color: var(--pb-sidebar-item-active-fg) !important;

  /* Topbar — segue o tema (claro ou escuro) */
  --greeva-topbar-bg:               var(--pb-bg) !important;
  --greeva-topbar-item-color:       var(--pb-text-muted) !important;
  --greeva-topbar-item-hover-color: var(--pb-primary) !important;
  --greeva-topbar-search-bg:        var(--pb-surface-2) !important;
  --greeva-topbar-user-bg:          var(--pb-surface) !important;
  --greeva-topbar-user-border:      var(--pb-border) !important;
}
[data-theme="dark"],
[data-bs-theme="dark"] {
  --greeva-menu-bg:                var(--pb-sidebar-bg) !important;
  --greeva-menu-item-color:        var(--pb-sidebar-fg) !important;
  --greeva-menu-item-hover-bg:     rgba(255,255,255,.06) !important;
  --greeva-menu-item-hover-color:  #ffffff !important;
  --greeva-menu-item-active-bg:    var(--pb-sidebar-item-active-bg) !important;
  --greeva-menu-item-active-color: var(--pb-sidebar-item-active-fg) !important;

  --greeva-topbar-bg:               var(--pb-bg) !important;
  --greeva-topbar-item-color:       var(--pb-text-muted) !important;
  --greeva-topbar-item-hover-color: var(--pb-primary) !important;
  --greeva-topbar-search-bg:        var(--pb-surface-2) !important;
  --greeva-topbar-user-bg:          var(--pb-surface) !important;
  --greeva-topbar-user-border:      var(--pb-border) !important;
}

/* Logo box deve seguir a cor da sidebar (grafite), NÃO a do topbar.
 * Hyper força `.logo { background: var(--greeva-topbar-bg) !important }` via
 * `html[data-topbar-color=dark] .logo` (specificity 0,2,1). Como design-tokens.css
 * carrega ANTES de app.min.css, precisamos vencer no specificity. O seletor abaixo
 * (0,3,1) vence sem depender de ordem de cascata.
 *
 * Separador sutil entre o logo box e a área de navegação — usa a sidebar-border,
 * marca a transição sem violar a unidade visual do grafite. */
html[data-theme] .sidenav-menu .logo,
html[data-bs-theme] .sidenav-menu .logo {
  background: var(--pb-sidebar-bg) !important;
  border-bottom: 1px solid var(--pb-sidebar-border) !important;
}

/* ============================================================
   Topbar — border-bottom sutil
   No light theme o topbar branco precisa do separador pra não derreter
   no fundo branco da página. No dark fica quase invisível mas mantém
   a estrutura.
   ============================================================ */
.app-topbar {
  border-bottom: 1px solid var(--pb-border-soft) !important;
}

/* Texto "Proporciona" do logo era `color:#ffffff` inline — agora adapta
 * (sidebar é grafite → texto claro). */
.sidenav-menu .logo .logo-lg > span:first-child {
  color: var(--pb-sidebar-fg) !important;
}
.sidenav-menu .side-nav-title {
  color: var(--pb-sidebar-fg-soft) !important;
}

/* ============================================================
   Utilitários de tipografia legados (Hyper)
   ============================================================ */
.font-10 { font-size: var(--font-size-2xs) !important; }
.font-11 { font-size: var(--font-size-xs)  !important; }
.font-12 { font-size: var(--font-size-sm)  !important; }
.font-13 { font-size: 0.8125rem            !important; }
.font-14 { font-size: var(--font-size-base)!important; }
.font-15 { font-size: var(--font-size-md)  !important; }
.font-16 { font-size: var(--font-size-lg)  !important; }
.font-18 { font-size: var(--font-size-xl)  !important; }

/* Mantida — usada em welcome / marIA / jornada antes do redesign chegar lá */
.text-friendly {
  font-family: var(--font-family-friendly);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

/* ============================================================
   Display utilities (Fraunces) — novos
   ============================================================ */
.pb-display {
  font-family: var(--pb-font-display);
  font-weight: 500;
  letter-spacing: var(--pb-tracking-tight);
  line-height: var(--pb-lh-tight);
}
.pb-metric {
  font-family: var(--pb-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--pb-tracking-snug);
}
.pb-eyebrow {
  font-family: var(--pb-font-body);
  font-size: var(--pb-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pb-tracking-wide);
  color: var(--pb-text-muted);
}
.pb-mono {
  font-family: var(--pb-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Componentes legados — agora pintados com tokens novos
   ============================================================ */
.pbr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--pb-radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  line-height: 1.4;
}
.pbr-chip--journey { background: var(--pb-accent-soft);  color: var(--pb-accent-fg); }
.pbr-chip--maria   { background: var(--pb-primary-soft); color: var(--pb-primary-soft-fg); }
.pbr-chip--success { background: var(--pb-primary-soft); color: var(--pb-primary-soft-fg); }

.pbr-card {
  background: var(--pb-surface);
  border-radius: var(--pb-radius-xl);
  box-shadow: var(--pb-shadow);
  border: 1px solid var(--pb-border);
  padding: var(--pb-space-6);
}

.pbr-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--pb-radius-pill);
  background: var(--pb-primary);
  color: var(--pb-primary-fg);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pbr-badge-danger  { background: var(--color-danger-light);  color: var(--pb-error);  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--pb-radius-pill); padding: 2px 10px; }
.pbr-badge-warning { background: var(--pb-accent-soft);      color: var(--pb-accent-fg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--pb-radius-pill); padding: 2px 10px; }
.pbr-badge-info    { background: var(--color-info-light);    color: var(--pb-info);    font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--pb-radius-pill); padding: 2px 10px; }
.pbr-badge-success { background: var(--pb-primary-soft);     color: var(--pb-primary-soft-fg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--pb-radius-pill); padding: 2px 10px; }

/* Welcome card / cards info em dark mode */
[data-theme="dark"] .pbr-welcome-card,
[data-theme="dark"] .pbr-onboarding,
[data-theme="dark"] .pbr-info-card,
[data-theme="dark"] .pbr-vmca-alert,
[data-theme="dark"] .pbr-child-card,
[data-theme="dark"] .pbr-milestones,
[data-theme="dark"] .pbr-journey-empty,
[data-bs-theme="dark"] .pbr-welcome-card,
[data-bs-theme="dark"] .pbr-onboarding,
[data-bs-theme="dark"] .pbr-info-card,
[data-bs-theme="dark"] .pbr-vmca-alert,
[data-bs-theme="dark"] .pbr-child-card,
[data-bs-theme="dark"] .pbr-milestones,
[data-bs-theme="dark"] .pbr-journey-empty {
  background: var(--pb-surface);
  border-color: var(--pb-border);
}

[data-theme="dark"] .pbr-milestone,
[data-theme="dark"] .maria-suggestion,
[data-bs-theme="dark"] .pbr-milestone,
[data-bs-theme="dark"] .maria-suggestion {
  background: var(--pb-surface);
  border-color: var(--pb-border);
  color: var(--pb-text);
}

/* ============================================================
   Bugfixes legados (contraste WCAG, padding, sidebar fixed)
   Recalibrados pra paleta nova
   ============================================================ */

/* .text-success — sálvia tem contraste ~4.7:1 já em #2f6b48 sobre branco (passa AA);
 * mas mantemos token escuro pra texto pequeno se necessário */
.text-success { color: var(--color-primary-dark) !important; }
.badge.bg-success-subtle,
.bg-success-subtle .text-success,
.pbr-badge-success { color: var(--pb-primary-soft-fg) !important; }

.btn-success,
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
  background-color: var(--pb-primary) !important;
  border-color: var(--pb-primary) !important;
  color: var(--pb-primary-fg) !important;
}
.btn-outline-success {
  color: var(--pb-primary) !important;
  border-color: var(--pb-primary) !important;
}

.pbr-child-card__btn--primary,
.pbr-trail__cta {
  background: var(--pb-primary) !important;
  color: var(--pb-primary-fg) !important;
}
.pbr-child-card__btn--primary:hover,
.pbr-trail__cta:hover {
  background: #244f35 !important;
}
.pbr-child-card__btn--ghost { color: var(--pb-primary) !important; }

.text-muted { color: var(--pb-text-muted) !important; }

.pbr-welcome-card__lead { color: var(--pb-text) !important; }
[data-theme="dark"] .pbr-welcome-card__lead,
[data-bs-theme="dark"] .pbr-welcome-card__lead { color: var(--pb-text) !important; }

footer a,
.app-footer a { color: var(--pb-text-muted) !important; }
footer a:hover,
.app-footer a:hover { color: var(--pb-primary) !important; }
[data-theme="dark"] footer a,
[data-theme="dark"] .app-footer a,
[data-bs-theme="dark"] footer a,
[data-bs-theme="dark"] .app-footer a { color: var(--pb-text) !important; }
[data-theme="dark"] footer a:hover,
[data-theme="dark"] .app-footer a:hover,
[data-bs-theme="dark"] footer a:hover,
[data-bs-theme="dark"] .app-footer a:hover { color: var(--pb-accent) !important; }

/* Padding da .page-content (mantém bugfix anterior) */
.page-content {
  padding-left:  var(--pb-space-6) !important;
  padding-right: var(--pb-space-6) !important;
  background-image: none; /* remove o ambient gradient pêssego/lavanda antigo */
}
@media (min-width: 1200px) {
  .page-content {
    padding-left:  var(--pb-space-8) !important;
    padding-right: var(--pb-space-8) !important;
  }
}

/* Sidebar condensado: position fixed (bugfix anterior) */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu {
  position: fixed !important;
}

/* ============================================================
   .surface-light — "ilha clara" (utilitário existente, mantido)
   Usado em simuladores de WhatsApp/SMS, prévia de impressão, etc.
   ============================================================ */
.surface-light,
[data-theme="dark"] .surface-light,
[data-bs-theme="dark"] .surface-light {
  --bs-body-color:        #111b21;
  --bs-body-bg:           #ffffff;
  --bs-secondary-color:   #54656f;
  --bs-secondary-bg:      #f5f6f6;
  --bs-tertiary-color:    #667781;
  --bs-tertiary-bg:       #ece5dd;
  --bs-emphasis-color:    #000000;
  --bs-border-color:      #d1d7db;
  --bs-link-color:        var(--pb-primary);
  --bs-link-hover-color:  #244f35;
  --bs-heading-color:     #111b21;

  color: #111b21;
  background-color: var(--bs-body-bg);
}

.surface-light *,
[data-theme="dark"] .surface-light *,
[data-bs-theme="dark"] .surface-light * {
  color: inherit;
  border-color: var(--bs-border-color);
}

.surface-light .form-control,
.surface-light .form-select,
[data-theme="dark"] .surface-light .form-control,
[data-theme="dark"] .surface-light .form-select,
[data-bs-theme="dark"] .surface-light .form-control,
[data-bs-theme="dark"] .surface-light .form-select {
  background-color: #ffffff;
  color: #111b21;
  border-color: #d1d7db;
}
.surface-light .form-control::placeholder,
[data-theme="dark"] .surface-light .form-control::placeholder,
[data-bs-theme="dark"] .surface-light .form-control::placeholder {
  color: #8696a0;
}

.surface-light .text-muted,
.surface-light .text-secondary,
[data-theme="dark"] .surface-light .text-muted,
[data-theme="dark"] .surface-light .text-secondary,
[data-bs-theme="dark"] .surface-light .text-muted,
[data-bs-theme="dark"] .surface-light .text-secondary {
  color: #54656f !important;
}

.surface-light .card,
[data-theme="dark"] .surface-light .card,
[data-bs-theme="dark"] .surface-light .card {
  background-color: #ffffff;
  color: #111b21;
  border-color: #e5e7eb;
}

/* ============================================================
   Wordmark "Proporciona[BR]" — sufixo BR
   Sidebar é grafite em ambos os temas; sálvia luminosa (#5cb285) lê bem
   sobre grafite no claro E no escuro.
   ============================================================ */
.pb-brand-suffix { color: #5cb285; }

/* ============================================================
   ApexCharts tooltip — força paleta do sistema PB
   Hyper paint `.apexcharts-tooltip * { color: var(--greeva-tertiary-color)
   !important }` apaga qualquer cor inline que a gente seta no custom HTML.
   Seletor com html (0,1,1) vence o de Hyper (0,1,0) com mesma flag !important.
   ============================================================ */
html .apexcharts-tooltip,
html .apexcharts-tooltip.apexcharts-theme-light,
html .apexcharts-tooltip.apexcharts-theme-dark {
  background: var(--pb-tooltip-bg) !important;
  border: 1px solid var(--pb-tooltip-border) !important;
  box-shadow: var(--pb-tooltip-shadow) !important;
  color: var(--pb-tooltip-fg) !important;
  overflow: hidden;
}
html .apexcharts-tooltip *,
html .apexcharts-tooltip.apexcharts-theme-light *,
html .apexcharts-tooltip.apexcharts-theme-dark * {
  color: var(--pb-tooltip-fg) !important;
}
/* O título "default" da Apex (quando não usamos custom) também adapta */
html .apexcharts-tooltip .apexcharts-tooltip-title {
  background: var(--pb-tooltip-header-bg) !important;
  border-bottom: 1px solid var(--pb-tooltip-border) !important;
  color: var(--pb-tooltip-fg) !important;
  font-weight: 700 !important;
}

/* ============================================================
   Ficha clínica — cards de patient detail (Charcoal Sage)
   Classes .pb-fc-* substituem visualmente os .card Bootstrap das
   3 caixas principais (criança, última medição, explainer VMCA),
   sem alterar a lógica do template.
   ============================================================ */
.pb-fc-card {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-xl);
  box-shadow: var(--pb-shadow);
  padding: var(--pb-space-6);
  margin-bottom: var(--pb-space-4);
}
.pb-fc-card--flat {
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-border-soft);
  box-shadow: none;
}

/* Card 1 — criança */
.pb-fc-child__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pb-primary-soft), var(--pb-accent-soft));
  color: var(--pb-text);
  font-family: var(--pb-font-display);
  font-size: 28px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pb-fc-child__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.pb-fc-child__name {
  font-family: var(--pb-font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: var(--pb-tracking-snug);
  line-height: 1.1;
  color: var(--pb-text);
  margin: 0 0 4px;
}
.pb-fc-child__birth {
  font-size: 0.825rem;
  color: var(--pb-text-muted);
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.pb-fc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pb-primary);
}
.pb-fc-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pb-primary);
  box-shadow: 0 0 0 3px var(--pb-primary-soft);
}

/* Grid 2×2 de meta (CNS/CPF, Quem cuida, Cidade, Contato) */
.pb-fc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: var(--pb-space-4);
  padding-top: var(--pb-space-4);
  border-top: 1px solid var(--pb-border-soft);
}
.pb-fc-meta__label {
  font-family: var(--pb-font-body);
  font-size: var(--pb-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pb-tracking-wide);
  color: var(--pb-text-muted);
  margin: 0 0 4px;
}
.pb-fc-meta__value {
  font-size: 0.875rem;
  color: var(--pb-text);
  margin: 0;
  font-weight: 500;
  word-break: break-word;
}
.pb-fc-meta__value.is-mono {
  font-family: var(--pb-font-mono);
  font-size: 0.825rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Card 2 — última medição */
.pb-fc-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.pb-fc-section__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--pb-radius);
  background: var(--pb-primary-soft);
  color: var(--pb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pb-fc-section__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pb-text);
  margin: 0;
  line-height: 1.2;
}
.pb-fc-section__date {
  font-size: 0.75rem;
  color: var(--pb-text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pb-fc-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--pb-radius-pill);
  background: var(--pb-primary-soft);
  color: var(--pb-primary-soft-fg);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* 3 tiles de métrica (altura · perímetro · VMCA) */
.pb-fc-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.pb-fc-metric {
  background: var(--pb-surface-2);
  border-radius: var(--pb-radius-md);
  padding: 12px;
  text-align: center;
}
.pb-fc-metric__label {
  font-size: var(--pb-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pb-tracking-wide);
  color: var(--pb-text-muted);
  margin: 0 0 6px;
}
.pb-fc-metric__value {
  font-family: var(--pb-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: var(--pb-tracking-snug);
  color: var(--pb-text);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.pb-fc-metric__value .pb-fc-metric__unit {
  font-family: var(--pb-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--pb-text-muted);
  letter-spacing: 0;
  margin-left: 2px;
}
.pb-fc-metric--primary .pb-fc-metric__value { color: var(--pb-primary); }
.pb-fc-metric--accent  .pb-fc-metric__value { color: var(--pb-accent); }
.pb-fc-metric--muted   .pb-fc-metric__value { color: var(--pb-text-muted); }

/* Callout de velocidade — terracota */
.pb-fc-velocity {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--pb-accent-soft);
  border: 1px solid color-mix(in srgb, var(--pb-accent) 25%, transparent);
  border-radius: var(--pb-radius-md);
  font-size: 0.85rem;
  color: var(--pb-accent-fg);
  line-height: 1.4;
}
.pb-fc-velocity__icon {
  flex-shrink: 0;
  color: var(--pb-accent);
}
.pb-fc-velocity__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pb-fc-velocity__tag {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pb-primary);
  white-space: nowrap;
}

/* Card 3 — explainer VMCA (surface-2, sem sombra) */
.pb-fc-explainer__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pb-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pb-tracking-wide);
  color: var(--pb-text-muted);
  margin: 0 0 6px;
}
.pb-fc-explainer__body {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--pb-text-muted);
  margin: 0 0 10px;
}
.pb-fc-explainer__legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.pb-fc-explainer__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--pb-radius-pill);
  border: 1px solid;
  align-self: flex-start;
}
.pb-fc-explainer__chip--ok    { background: var(--pb-primary-soft); color: var(--pb-primary-soft-fg); border-color: color-mix(in srgb, var(--pb-primary) 30%, transparent); }
.pb-fc-explainer__chip--watch { background: var(--pb-accent-soft);  color: var(--pb-accent-fg);       border-color: color-mix(in srgb, var(--pb-accent) 30%, transparent); }
.pb-fc-explainer__chip--alert { background: rgba(181, 74, 58, 0.10); color: var(--pb-error);          border-color: color-mix(in srgb, var(--pb-error) 30%, transparent); }
.pb-fc-explainer__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pb-primary);
}
.pb-fc-explainer__link:hover { text-decoration: underline; }

/* ============================================================
   Botão de toggle de tema (topbar)
   - Light ativo → mostra ícone da lua (clicar = ir pro dark)
   - Dark ativo  → mostra ícone do sol (clicar = ir pro light)
   ============================================================ */
.pb-theme-toggle .pb-theme-icon-dark { display: none; }
[data-theme="dark"] .pb-theme-toggle .pb-theme-icon-light,
[data-bs-theme="dark"] .pb-theme-toggle .pb-theme-icon-light { display: none; }
[data-theme="dark"] .pb-theme-toggle .pb-theme-icon-dark,
[data-bs-theme="dark"] .pb-theme-toggle .pb-theme-icon-dark { display: inline-block; }