/* ==========================================================================
   WEBMEDICA99 - DESIGN SYSTEM THEME (OFICIAL AWD)
   Sincronizado 1:1 con Paper Design System
   Regla de Oro: Estilos puros. Textos 100% inmutables.
   ========================================================================== */

:root {
  /* 🎨 1. COLORES DE MARCA & SUPERFICIES */
  --wm-canvas: #090e1a;            /* Fondo base oscuro de cabina */
  --wm-surface: #121826;           /* Superficie de tarjetas y módulos */
  --wm-surface-hud: #0e1424;       /* Fondo de la consola médica */
  --wm-border-subtle: rgba(255, 255, 255, 0.07);

  /* 🎨 2. TOKENS DE TEXTO CANÓNICOS (PAPER EXACT VALUES) */
  --wm-platino-glaciar: #DEE2F3;   /* H1-H3: Encabezados clínicos */
  --wm-textos-arena: #CBBAB5;      /* Body p: Calidez humana de lectura */
  --wm-textos-tech: #8892A0;       /* Datos de consola, labels, telemetría */

  /* 🎨 3. LA TRÍADA DE ACCIÓN QUIRÚRGICA */
  --wm-cian-neon: #00F2FE;         /* El Pulso EKG del Logo, Score 99, Checks, HUD */
  --wm-carmin-clinico: #FB7185;    /* 27/100, Fuga 53%, WordPress lento, alertas */
  --wm-naranja-awd: #FF6B35;       /* CTAs de Conversión y Botones de Auditoría */
  --wm-verde-menta: #4EDEA3;       /* Backup / Indicador auxiliar */

  /* 🔤 4. TIPOGRAFÍAS */
  --wm-font-base: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --wm-font-tech: 'Geist Mono', monospace;

  /* 📏 5. ESCALA DE TAMAÑOS (SEMÁNTICA OFICIAL) */
  --wm-size-h1: 48px;
  --wm-size-h2: 36px;
  --wm-size-cta: 26px;             /* El titular de cierre de auditoría */
  --wm-size-h3: 20px;              /* Títulos de módulos y tarjetas */
  --wm-size-body: 16px;            /* Lectura en texto arena */
  --wm-size-badge: 12px;           /* Tags monoespaciadas */
}

/* ==========================================================================
   COMPONENTES MAESTROS
   ========================================================================== */

/* 1. PASTILLAS TÉCNICAS (TAGS SUPERIORES) */
.wm-pill {
  font-family: var(--wm-font-tech);
  font-size: var(--wm-size-badge);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.wm-pill-cyan {
  color: var(--wm-cian-neon);
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.28);
}

.wm-pill-carmin {
  color: var(--wm-carmin-clinico);
  background: rgba(251, 113, 133, 0.08);
  border: 1px solid rgba(251, 113, 133, 0.28);
}

.wm-pill-orange {
  color: var(--wm-naranja-awd);
  background: rgba(255, 107, 53, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.28);
}

/* 1.1 KICKERS / EYEBROWS (CERO BOLD • GEIST MONO 500 • TRACKING WIDEST) */
.wm-kicker {
  font-family: var(--wm-font-tech) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
}

.wm-kicker-cyan {
  font-family: var(--wm-font-tech) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
  color: var(--wm-cian-neon) !important;
}

.wm-kicker-carmin {
  font-family: var(--wm-font-tech) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
  color: var(--wm-carmin-clinico) !important;
}

.wm-kicker-orange {
  font-family: var(--wm-font-tech) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
  color: var(--wm-naranja-awd) !important;
}

/* 2. JERARQUÍA DE ENCABEZADOS (PLATINO GLACIAR & JETBRAINS MONO 800/700) */
h1, .wm-display {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: clamp(2.2rem, 4.5vw, var(--wm-size-h1));
  font-weight: 800 !important;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--wm-platino-glaciar);
}

h2, .wm-title-section {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--wm-size-h2);
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  color: var(--wm-platino-glaciar) !important;
}

.wm-title-cta {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--wm-size-cta);
  font-weight: 700 !important;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

h3, .wm-title-card {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--wm-size-h3);
  font-weight: 700 !important;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.wm-title-card .wm-text-cyan { color: var(--wm-cian-neon) !important; }
.wm-title-card .wm-text-orange { color: var(--wm-naranja-awd) !important; }
.wm-title-card .wm-text-carmin { color: var(--wm-carmin-clinico) !important; }

h4 { font-family: 'JetBrains Mono', monospace !important; font-weight: 600 !important; }
.font-tech-h1 { line-height: 1.2 !important; }

/* 3. CUERPO DE LECTURA (SLATE QUIRÚRGICO DE ALTO CONTRASTE) */
p, .font-body-md, .font-body-lg, .font-body-sm, .font-body-clean {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0.005em;
  line-height: 1.68;
}

p, .text-on-surface-variant, .wm-body {
  color: #94a3b8;
}
p.text-slate-400, .text-slate-400 { color: #94a3b8 !important; }
p.text-slate-300, .text-slate-300 { color: #cbd5e1 !important; }
p.text-slate-200, .text-slate-200 { color: #e2e8f0 !important; }
p .text-white, p strong.text-white { color: #ffffff !important; }
p .text-tertiary, p strong.text-tertiary { color: #00f2fe !important; }
p .text-rose-400, p strong.text-rose-400 { color: #fb7185 !important; }
p .text-amber-400, p strong.text-amber-400 { color: #fbbf24 !important; }

/* 4. LA TARJETA QUIRÚRGICA */
.wm-card {
  background: var(--wm-surface);
  border: 1px solid var(--wm-border-subtle);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wm-card:hover {
  border-color: rgba(0, 242, 254, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* 5. FOOTER DE TELEMETRÍA (LA BARRA INFERIOR) */
.wm-card-footer {
  background: rgba(10, 15, 29, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--wm-font-tech) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important; /* CERO BOLD */
}

.wm-footer-label {
  color: var(--wm-textos-tech) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
}

.wm-footer-val {
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  text-align: right !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* 6. CONSOLA MÉDICA HUD (LA CAJA HERO) */
.wm-hud-card, .wm-hud-chassis {
  background: var(--wm-surface-hud) !important;
  border: 1px solid rgba(0, 242, 254, 0.35) !important;
  box-shadow: 0 0 35px rgba(0, 242, 254, 0.12) !important;
  border-radius: 20px;
}

/* 7. UTILIDADES DIRECTAS DE MARCA (SIN DEPENDER DE TAILWIND) */
.wm-text-cyan    { color: var(--wm-cian-neon) !important; }
.wm-text-tech    { color: var(--wm-textos-tech) !important; font-family: var(--wm-font-tech) !important; }
.wm-text-arena   { color: var(--wm-textos-arena) !important; }
.wm-text-platino { color: var(--wm-platino-glaciar) !important; }
.wm-text-carmin  { color: var(--wm-carmin-clinico) !important; }
.wm-text-orange  { color: var(--wm-naranja-awd) !important; }

.wm-badge-cyan {
  color: var(--wm-cian-neon) !important;
  background-color: rgba(0, 242, 254, 0.08) !important;
  border: 1px solid rgba(0, 242, 254, 0.30) !important;
}

.wm-badge-orange {
  color: var(--wm-naranja-awd) !important;
  background-color: rgba(255, 107, 53, 0.10) !important;
  border: 1px solid rgba(255, 107, 53, 0.25) !important;
}

.wm-badge-carmin {
  color: var(--wm-carmin-clinico) !important;
  background-color: rgba(251, 113, 133, 0.10) !important;
  border: 1px solid rgba(251, 113, 133, 0.25) !important;
}

.wm-dot-cyan {
  background-color: var(--wm-cian-neon) !important;
  box-shadow: 0 0 8px var(--wm-cian-neon) !important;
}

.wm-dot-orange {
  background-color: var(--wm-naranja-awd) !important;
  box-shadow: 0 0 8px var(--wm-naranja-awd) !important;
}

.wm-dot-carmin {
  background-color: var(--wm-carmin-clinico) !important;
  box-shadow: 0 0 8px var(--wm-carmin-clinico) !important;
}

.wm-border-cyan {
  border: 1px solid rgba(0, 242, 254, 0.35) !important;
}

.wm-border-b-cyan {
  border-bottom: 1px solid rgba(0, 242, 254, 0.25) !important;
}

.wm-border-t-cyan {
  border-top: 1px solid rgba(0, 242, 254, 0.25) !important;
}

.wm-shadow-cyan {
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.18) !important;
}

.wm-bg-cyan-subtle {
  background-color: rgba(0, 242, 254, 0.06) !important;
}

/* AWD Unified Orange CTA Button Component */
.wm-btn-orange {
  border-radius: 12px !important;
  color: #FF6B35 !important;
  background-color: #0e0906 !important;
  background-image: none !important;
  border: 1px solid #FF6B35 !important;
  box-shadow: 0 0 18px rgba(255, 107, 53, 0.28), inset 0 0 10px rgba(255, 107, 53, 0.14) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wm-btn-orange:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 107, 53, 0.22) !important;
  background-image: none !important;
  border-color: #FF8C5A !important;
  box-shadow: 0 0 28px rgba(255, 107, 53, 0.55), inset 0 0 14px rgba(255, 107, 53, 0.25) !important;
}

.wm-btn-orange span, .wm-btn-orange svg {
  color: inherit !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.wm-btn-orange:hover svg {
  color: #FFFFFF !important;
}

/* Cifras y Números de Conversión (JetBrains Mono Canónico con Cifras Tabulares) */
.font-price, .font-metric-display, [data-metric] {
  font-family: 'JetBrains Mono', monospace !important;
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: -0.02em;
}

/* AWD Cyan Icon Button Component (WhatsApp Header) */
.wm-btn-cyan-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  padding: 8px !important;
  border-radius: 9999px !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  color: #00F2FE !important;
  background-color: rgba(0, 242, 254, 0.08) !important;
  border: 1px solid rgba(0, 242, 254, 0.32) !important;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.16) !important;
  transition: all 0.2s ease !important;
}

.wm-btn-cyan-icon:hover {
  color: #FFFFFF !important;
  background-color: rgba(0, 242, 254, 0.22) !important;
  border-color: #00F2FE !important;
  box-shadow: 0 0 22px rgba(0, 242, 254, 0.40) !important;
}

.wm-btn-cyan-icon svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  color: #00F2FE !important;
  fill: currentColor !important;
  transition: all 0.2s ease !important;
}

.wm-btn-cyan-icon:hover svg {
  color: #FFFFFF !important;
  transform: scale(1.1);
}

/* Selector de Idioma Minimalista (Header Micro Toggle) */
.wm-lang-toggle {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #0c1220 !important;
  padding: 2px 4px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: var(--wm-font-tech) !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.wm-lang-active {
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  color: var(--wm-platino-glaciar) !important;
  font-weight: 700 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  line-height: 1 !important;
  border: none !important;
}

.wm-lang-sep {
  color: rgba(136, 146, 160, 0.45) !important;
  font-size: 9px !important;
  padding: 0 3px !important;
  user-select: none !important;
}

.wm-lang-inactive {
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
  background-color: transparent !important;
  line-height: 1 !important;
  border: none !important;
  transition: color 0.2s ease !important;
}

.wm-lang-inactive:hover {
  color: #FFFFFF !important;
}

/* Card Variations for Pillars & Modules */
.wm-card-orange:hover {
  border-color: rgba(255, 107, 53, 0.50) !important;
  box-shadow: 0 8px 30px rgba(255, 107, 53, 0.18) !important;
}

.wm-card-cyan:hover {
  border-color: rgba(0, 242, 254, 0.50) !important;
  box-shadow: 0 8px 30px rgba(0, 242, 254, 0.18) !important;
}

.wm-card-carmin:hover {
  border-color: rgba(251, 113, 133, 0.50) !important;
  box-shadow: 0 8px 30px rgba(251, 113, 133, 0.18) !important;
}

/* 8. SELECCIÓN DE TEXTO QUIRÚRGICA (CANONICAL BRAND SELECTION) */
::selection {
  background-color: rgba(0, 242, 254, 0.28) !important;
  color: #FFFFFF !important;
}

::-moz-selection {
  background-color: rgba(0, 242, 254, 0.28) !important;
  color: #FFFFFF !important;
}

/* 9. CALCULADORA ROI - MÉTRICAS DE PÉRDIDA Y ANIMACIÓN REACTIVA */
.text-loss-gradient {
  background: linear-gradient(180deg, #FFA1B5 0%, #FB7185 52%, #F43F5E 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.loss-surging {
  transform: scale(1.05) translateY(-1px) !important;
}

.box-flaring {
  border-color: rgba(251, 113, 133, 0.6) !important;
  box-shadow: 0 0 24px -4px rgba(251, 113, 133, 0.25) !important;
}

.patients-bump {
  transform: scale(1.02) !important;
  border-color: rgba(251, 113, 133, 0.4) !important;
}

/* 10. SLIDERS QUIRÚRGICOS (COLOR CANÓNICO NATIVO EN NAVEGADORES) */
#visits-slider {
  accent-color: var(--wm-naranja-awd) !important;
}

#speed-slider {
  accent-color: var(--wm-carmin-clinico) !important;
}

#ticket-slider {
  accent-color: var(--wm-cian-neon) !important;
}

/* 11. MODELOS DE WEBS - GRID RESPONSIVO QUIRÚRGICO (3 COLUMNAS DESDE TABLET/LAPTOP) */
.wm-models-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
}

@media (min-width: 768px) {
  .wm-models-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (min-width: 1024px) {
  .wm-models-grid {
    gap: 1.5rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .wm-models-grid .wm-btn-orange {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11px !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .wm-models-grid .wm-card {
    padding: 18px !important;
  }
}

/* 12. TABS DE ESPECIALIDADES MÉDICAS (COCKPIT QUIRÚRGICO) */
.wm-spec-tab {
  width: 100% !important;
  text-align: left !important;
  padding: 0.65rem 1rem !important;
  border-radius: 12px !important;
  font-family: var(--wm-font-tech) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.wm-spec-tab-inactive {
  background: #060a14 !important;
  color: var(--wm-textos-tech) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-weight: 500 !important;
}

.wm-spec-tab-inactive:hover {
  background: #0c1424 !important;
  color: var(--wm-platino-glaciar) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.wm-spec-tab-active-cyan {
  background: #040e14 !important;
  color: var(--wm-cian-neon) !important;
  border: 1px solid var(--wm-cian-neon) !important;
  box-shadow: 0 0 18px rgba(0, 242, 254, 0.25) !important;
  font-weight: 700 !important;
}

.wm-spec-tab-active-carmin {
  background: #14070a !important;
  color: var(--wm-carmin-clinico) !important;
  border: 1px solid var(--wm-carmin-clinico) !important;
  box-shadow: 0 0 18px rgba(251, 113, 133, 0.28) !important;
  font-weight: 700 !important;
}

.wm-spec-tab-active-orange {
  background: #0e0906 !important;
  color: var(--wm-naranja-awd) !important;
  border: 1px solid var(--wm-naranja-awd) !important;
  box-shadow: 0 0 18px rgba(255, 107, 53, 0.28) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   13. SISTEMA DUAL LIGHT EXECUTIVE (DOSSIERS, WHITE PAPERS & PROPUESTAS HUD)
   ========================================================================== */

:root {
  /* TOKENS CANÓNICOS LIGHT QUIRÚRGICO */
  --wm-navy: #0c2340;               /* Navy Clínico Profundo Real (Azul Marino Ejecutivo) */
  --wm-blue-primary: #0284c7;        /* Azul Quirúrgico Oficial (99.com & EKG) */
  --wm-blue-border: #9acee9;         /* Borde Celeste Oficial del Emblema */
  --wm-blue-ice: #f0f9ff;            /* Fondo Hielo Quirúrgico (Chips, Tablas, Notas) */
  --wm-blue-ice-border: #bae6fd;     /* Borde Hielo Quirúrgico */
  --wm-orange-pulse: #ea580c;        /* Naranja Pulso Canónico (Alerta Técnica & Acción) */
  --wm-orange-ice: #fffcf8;          /* Fondo Ámbar/Naranja Tenue de Alerta (Ultra Sutil) */
  --wm-orange-ice-border: #ffedd5;   /* Borde Ámbar/Naranja Muy Suave */
  --wm-bg-card: #f8fafc;             /* Fondo neutral tarjeta */
  --wm-border-card: #e2e8f0;         /* Borde neutral */
  --wm-text-strong: #0c2340;         /* Texto principal */
  --wm-text-body: #334155;           /* Texto lectura */
  --wm-text-muted: #64748b;          /* Metadatos */
}

/* ESTILOS LIGHT / BLANCO QUIRÚRGICO (CANÓNICO) */
body.light-theme {
  background-color: #ffffff;
  color: var(--wm-text-body);
}

body.light-theme .page {
  background: #ffffff !important;
  border: 1px solid var(--wm-border-card);
  color: var(--wm-text-body);
}

body.light-theme .brand-title { color: var(--wm-navy); }
body.light-theme .brand-title .brand-accent { color: var(--wm-blue-primary); }
body.light-theme .brand-sub { color: var(--wm-orange-pulse); }
body.light-theme .logo-box-border { stroke: var(--wm-blue-border); }
body.light-theme .logo-ekg-line { stroke: var(--wm-blue-primary); }
body.light-theme .pre-title { color: var(--wm-blue-primary) !important; }
body.light-theme h1 { color: var(--wm-navy); font-weight: 800 !important; }
body.light-theme h2 { color: var(--wm-orange-pulse) !important; font-weight: 700 !important; }
body.light-theme h3 { color: var(--wm-blue-primary); font-weight: 700 !important; }
body.light-theme h3::before { background: var(--wm-blue-primary); }
body.light-theme .highlight { color: var(--wm-navy); }
body.light-theme .danger-text { color: var(--wm-orange-pulse) !important; }
body.light-theme .cyan-text { color: var(--wm-blue-primary); }

/* CONTENEDORES Y TARJETAS (BORDES REDONDEADOS) */
body.light-theme .card { background: var(--wm-bg-card); border-color: var(--wm-border-card); border-radius: 8px; }
body.light-theme .card.cyan { background: var(--wm-blue-ice) !important; border-color: var(--wm-blue-ice-border) !important; border-left-color: var(--wm-blue-primary) !important; border-radius: 8px; }
body.light-theme .metric-box { background: var(--wm-bg-card); border-color: var(--wm-border-card); border-radius: 8px; }
body.light-theme .step-row { background: var(--wm-bg-card); border-color: var(--wm-border-card); border-left-color: var(--wm-blue-primary); border-radius: 8px; }
body.light-theme .card-next-step { background: var(--wm-bg-card) !important; border-color: #cbd5e1 !important; color: var(--wm-text-body) !important; border-radius: 8px; }

/* CALLOUTS TÉCNICOS (ESPINA IZQUIERDA RECTA) */
body.light-theme .card.danger {
  background: var(--wm-orange-ice) !important;
  border: 1px solid var(--wm-orange-ice-border) !important;
  border-left: 3.5px solid var(--wm-orange-pulse) !important;
  border-radius: 0 6px 6px 0 !important;
}

body.light-theme .quote-callout {
  background: var(--wm-bg-card) !important;
  color: var(--wm-navy) !important;
  border: 1px solid var(--wm-border-card) !important;
  border-left: 3.5px solid var(--wm-orange-pulse) !important;
  border-radius: 0 6px 6px 0 !important;
}

body.light-theme .note-box {
  background: var(--wm-blue-ice) !important;
  border: 1px solid var(--wm-blue-ice-border) !important;
  border-left: 3px solid var(--wm-blue-primary) !important;
  color: var(--wm-text-body) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* MÉTRICAS DE TELEMETRÍA (TRÍADA AZUL / NARANJA / NAVY) */
body.light-theme .metric-val { color: var(--wm-navy); }
body.light-theme .metric-val.danger { color: var(--wm-orange-pulse) !important; }
body.light-theme .metric-val.cyan,
body.light-theme .metric-val.success { color: var(--wm-blue-primary) !important; }
body.light-theme .metric-price { color: var(--wm-blue-primary) !important; }

/* ELEMENTOS AUXILIARES */
body.light-theme .url-chip { background: var(--wm-blue-ice) !important; border-color: var(--wm-blue-ice-border) !important; color: var(--wm-blue-primary) !important; font-weight: 600; }
body.light-theme .status-pill { background: var(--wm-blue-ice) !important; border-color: var(--wm-blue-ice-border) !important; color: var(--wm-blue-primary) !important; }
body.light-theme .step-badge { background: var(--wm-blue-primary) !important; color: #ffffff !important; }
body.light-theme .step-num { color: var(--wm-blue-primary); background: #e0f2fe; border-color: var(--wm-blue-ice-border); }
body.light-theme .step-title { color: var(--wm-navy); }
body.light-theme .step-col-desc { color: var(--wm-text-body); }
body.light-theme .step-col-desc strong { color: var(--wm-navy); }
body.light-theme th { background: #f1f5f9; color: #475569; border-bottom-color: #cbd5e1; }
body.light-theme td { border-bottom-color: #f1f5f9; color: var(--wm-text-body); }
body.light-theme .table-compare th:nth-child(3) { color: #0369a1 !important; background: #e0f2fe !important; }
body.light-theme .table-compare td:nth-child(3) { background: var(--wm-blue-ice) !important; color: var(--wm-blue-primary) !important; }
body.light-theme .note-box strong { color: var(--wm-navy) !important; }
body.light-theme .card-plan-title { color: var(--wm-navy) !important; }
body.light-theme .card-plan-subtitle { color: #475569 !important; }
body.light-theme .card-price-sublabel { color: var(--wm-text-muted) !important; }
body.light-theme .card-next-step strong { color: var(--wm-navy) !important; }
body.light-theme .card-next-step span { color: #475569 !important; }
body.light-theme .card-next-step a { color: var(--wm-blue-primary) !important; text-decoration: underline; text-underline-offset: 2px; }
body.light-theme .card-next-step a:hover { color: var(--wm-orange-pulse) !important; }
body.light-theme .hud-footer { border-top-color: var(--wm-border-card); color: var(--wm-text-muted); }
body.light-theme .hud-footer a { color: var(--wm-navy); text-decoration: underline; text-underline-offset: 2px; }
body.light-theme .hud-footer a:hover { color: var(--wm-blue-primary); }
body.light-theme .doc-meta strong { color: var(--wm-navy); }