/**
 * Honestia Connect - Premium Deep Dark Theme (v2.5)
 * Style: Apple-inspired, Minimalist, Solid Backgrounds.
 * STRICT: No Glassmorphism, No Neons.
 */

:root.dark {
  /* Core Colors - Neutral Premium (Apple Pro Standard) */
    /* [v126.50] Base Colors for Premium Contrast */
    --color-bg: #080808;
    --color-surface: #121212;
    --color-surface-elevated: #1c1c1e;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-accent: #2148b5;
    --color-success: #34c759;
    --color-error: #ff3b30;
    
    /* New Synced Variables for Checkout */
    --checkout-bg: #080808;
    --card-bg: #121212;
    --input-bg: #1c1c1e;
    --input-border: #2c2c2e;
    --border-subtle: rgba(255, 255, 255, 0.05);
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --accent-blue: #2148b5;
  --color-primary: #2148b5; /* Interactive Blue only */
  --color-primary-hover: #3b5fc9;

  /* Header Variables - Neutral Sync */
  --header-bg: #080808;
  --header-bg-scrolled: rgba(8, 8, 8, 0.98);
  --header-border: #1C1C1C;
  --header-border-scrolled: #1C1C1C;
  --header-link: var(--color-text-primary);
  --header-text-primary: var(--color-text-primary);
  --header-drawer-bg: var(--color-bg);
  --header-dropdown-bg: var(--color-surface);
  --header-logo-filter: brightness(0) invert(1);
  --nav-link-color: var(--color-text-secondary);
  --nav-link-active-color: var(--color-primary);
  --nav-link-active-bg: rgba(0, 113, 227, 0.05);

  background-color: var(--color-bg) !important;
  color: var(--color-text-primary);
}

/* [v10.3.3] Atomic Navigation Sync - Reactive variables for HeaderPublic/Private */
:root.dark {
    --nav-bg: #080808;
    --nav-text: #ffffff;
    --nav-border: rgba(255, 255, 255, 0.1);
    --nav-logo-filter: brightness(0) invert(1);
}

.dark header-public,
.dark header-private,
.dark .navbar,
.dark .navbar-root {
    background-color: var(--nav-bg) !important;
    color: var(--nav-text) !important;
    --nav-bg: #080808;
    --nav-text: #ffffff;
}

.dark .navbar.scrolled {
    background-color: rgba(8, 8, 8, 0.98) !important;
}

.dark .logo-img,
.dark #mainLogo,
.dark .navbar .logo-img {
    filter: var(--nav-logo-filter) !important;
}

.dark .nav-link,
.dark .btn-login,
.dark .theme-toggle,
.dark .mobile-link {
    color: var(--nav-text) !important;
}

/* Beat main.css .navbar.scrolled .nav-link { color: #1d1d1f !important } */
html.dark header-public .navbar.scrolled .nav-link,
html.dark .navbar-root .navbar.scrolled .nav-link,
.dark header-public .navbar.scrolled .nav-link,
.dark .navbar-root .navbar.scrolled .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

html.dark header-public .navbar.scrolled .nav-link:hover,
html.dark .navbar-root .navbar.scrolled .nav-link:hover,
.dark header-public .navbar.scrolled .nav-link:hover,
.dark .navbar-root .navbar.scrolled .nav-link:hover {
    color: #0a84ff !important;
}

html.dark header-public .navbar.scrolled .nav-link.active,
html.dark .navbar-root .navbar.scrolled .nav-link.active,
.dark header-public .navbar.scrolled .nav-link.active,
.dark .navbar-root .navbar.scrolled .nav-link.active {
    color: #0a84ff !important;
}

/* [v10.3.6] Header Parity & Alignment - Fixes vertical shifts */
.navbar-inner,
.navbar-root .navbar-inner {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.nav-actions,
.nav-actions-desktop {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.theme-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 32px !important;
}

.dark body, 
.dark html, 
.dark #root, 
.dark main,
.dark #root > div,
.dark section,
.dark .min-h-screen,
.dark .flex-col.flex-1 {
  background-color: var(--color-bg) !important;
  color: var(--color-text-primary);
}

/* Re-introducing Surface Armor (Prefix-free attribute matching to avoid overriding dark: and responsive classes, but catching opacities) */
.dark .bg-white,
.dark [class^="bg-white"],
.dark [class*=" bg-white"],
.dark [class^="bg-slate-"],
.dark [class*=" bg-slate-"],
.dark [class^="bg-gray-"],
.dark [class*=" bg-gray-"],
.dark [class^="bg-zinc-"],
.dark [class*=" bg-zinc-"],
.dark [class^="bg-neutral-"],
.dark [class*=" bg-neutral-"],
.dark [class^="bg-stone-"],
.dark [class*=" bg-stone-"],
.dark [class^="bg-[#f" i],
.dark [class*=" bg-[#f" i],
.dark [class^="bg-[#e" i],
.dark [class*=" bg-[#e" i],
.dark [class^="bg-[#d" i],
.dark [class*=" bg-[#d" i] {
  background-color: var(--color-bg) !important;
}

/* Gradient overrides: turn light Tailwind gradients (white/slate/gray/zinc) into solid dark background in dark mode */
.dark [class*="from-white"],
.dark [class*="to-white"],
.dark [class*="from-slate-50"],
.dark [class*="to-slate-50"],
.dark [class*="from-gray-50"],
.dark [class*="to-gray-50"],
.dark [class*="from-zinc-50"],
.dark [class*="to-zinc-50"],
.dark [class*="from-neutral-50"],
.dark [class*="to-neutral-50"],
.dark [class*="from-stone-50"],
.dark [class*="to-stone-50"],
.dark [class*="from-slate-100"],
.dark [class*="to-slate-100"],
.dark [class*="from-gray-100"],
.dark [class*="to-gray-100"],
.dark [class*="from-zinc-100"],
.dark [class*="to-zinc-100"],
.dark [class*="from-neutral-100"],
.dark [class*="to-neutral-100"] {
  background-image: none !important;
  background-color: var(--color-bg) !important;
}

/* Specific React-Injected Layout Fixes (Including generic background overrides) */
.dark #root [style*="background"],
.dark section [style*="background"],
.dark .sticky[style*="background"] {
    background-color: var(--color-bg) !important;
    background-image: none !important;
}

/* Surfaces (Cards, Containers) */
.dark .bg-surface,
.dark .card-premium,
.dark .session-item,
.dark [class^="bg-slate-100"],
.dark [class*=" bg-slate-100"],
.dark [class^="bg-gray-100"],
.dark [class*=" bg-gray-100"],
.dark [class^="bg-zinc-100"],
.dark [class*=" bg-zinc-100"],
.dark [class^="bg-neutral-100"],
.dark [class*=" bg-neutral-100"],
.dark [class^="bg-stone-100"],
.dark [class*=" bg-stone-100"] {
  background-color: var(--color-surface) !important;
}

/* Force dark surface for Form Elements */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #6e7681 !important;
  opacity: 1;
}

/* Nested containers should go even deeper or maintain the surface */
.dark .bg-slate-200, .dark .bg-gray-200, .dark .bg-zinc-200 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Allow hierarchy in text colors with high contrast for dark mode readability */
.dark .text-slate-400, .dark .text-gray-400, .dark .text-zinc-400, .dark .text-neutral-400 { color: #cbd5e1 !important; }
.dark .text-slate-500, .dark .text-gray-500, .dark .text-zinc-500, .dark .text-neutral-500 { color: #a1a1a6 !important; }
.dark .text-slate-300, .dark .text-gray-300, .dark .text-zinc-300, .dark .text-neutral-300 { color: #e2e8f0 !important; }

/* Force dark background for specific identified sections and IDs */
.dark #asesor,
.dark #certificacion,
.dark #metodologia,
.dark #contacto,
.dark #hero,
.dark #hero-section,
.dark #commentsSection,
.dark #pricing-section > div,
.dark #enrollment-section > div,
.dark [id*="hero"],
.dark .checkout-section,
.dark .summary-card,
.dark .conversion-widget-container {
    background-color: var(--color-bg) !important;
}


/* [v2.7] FIX: Anti-Cloud & Typography Precision */
.dark .hero-title {
    background: linear-gradient(to right, #ffffff, #cbd5e1) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: none !important;
}

/**
 * === SECCIÓN ESCUELAS - MODO OSCURO CONTEXTUAL (v3.0) ===
 * Filosofía: Esta sección usa fondos pastel de marca (soft colors).
 * NO se aplica el fondo oscuro global. En su lugar, se oscurecen ligeramente
 * los pasteles y se preserva el texto OSCURO (es legible sobre pastel).
 * Los precios y colores de conversión SIEMPRE se preservan.
 */

/* Títulos principales en la sección escuelas (superseded by v3.0 block) */
.dark section#escuelas h2 {
    color: #f5f5f7 !important;
    background: none !important;
    -webkit-text-fill-color: #f5f5f7 !important;
}
.dark section#escuelas h3 {
    color: #f0f0f2 !important;
    background: none !important;
    -webkit-text-fill-color: #f0f0f2 !important;
}

.dark .session-desc-fade {
    background: linear-gradient(transparent, var(--color-surface)) !important;
}

.dark .hc-rich-content,
.dark .hc-rich-content p,
.dark .hc-rich-content span,
.dark .session-desc-container {
    color: #e2e8f0 !important;
}

.dark .hc-rich-content strong,
.dark .hc-rich-content h1,
.dark .hc-rich-content h2,
.dark .hc-rich-content h3 {
    color: #ffffff !important;
}

/* Fix for icons and badges that were too dark */
.dark .text-slate-900, .dark .text-slate-800 {
    color: #ffffff !important;
}

/* Fix for Hero list icons (the blue circles) */
.dark .bg-\[#0a1628\] {
    background-color: var(--color-primary) !important;
}

/* Bordes en Modo Oscuro */
.dark .border-gray-100, 
.dark .border-gray-200,
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-black\/\[0\.06\],
.dark .border-\[#0a1628\]\/12,
.dark .border-\[#0a1628\]\/15 {
  border-color: var(--color-border) !important;
}

/* Neutralize Decorative Color Backgrounds */
.dark .bg-blue-50, 
.dark .bg-purple-50, 
.dark .bg-indigo-50, 
.dark .bg-slate-50,
.dark .bg-rose-50,
.dark .bg-emerald-50,
.dark .bg-orange-50 {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Remove 'Neon' Shadows and Glows */
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl,
.dark [class*="shadow-blue-500"] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Forzamos que las superficies específicas mantengan su tono gris Apple */
.dark .bg-white.rounded-\[2rem\],
.dark .bg-white.rounded-3xl,
.dark .bg-white.rounded-2xl,
.dark .bg-white.rounded-\[32px\],
.dark .group\/instructor,
.dark .session-card,
.dark .kpi-card,
.dark .benefit-card,
.dark #conversionPaymentWidget {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

/* Force visible colors for KPI values */
.dark .kpi-value, .dark .kpi-label {
    color: #ffffff !important;
}
.dark .form-card,
.dark .bg-surface,
.dark .card-premium {
  background-color: var(--color-surface) !important;
}

/* Fix for the school carousel with inline styles */
.dark #escuelas {
    background-color: transparent !important;
}

/* ============================================================
 * SECCIÓN ESCUELAS — SISTEMA DE COLOR CONTEXTUAL (v3.0)
 * Objetivo: Preservar psicología de precios y colores de marca.
 * ============================================================ */

/* 1. La sección sticky tiene un backgroundColor inline (pastel).
   Lo oscurecemos con un overlay via pseudo-elemento sin romper
   el contenido interior. */
.dark section#escuelas .sticky {
    background-color: rgba(12, 12, 14, 0.92) !important;
}

/* 2. Títulos de sección: legibles en fondo oscuro */
.dark section#escuelas h2,
.dark section#escuelas h3 {
    color: #f5f5f7 !important;
    background: none !important;
    -webkit-text-fill-color: #f5f5f7 !important;
    text-shadow: none !important;
}

/* 3. Eyebrow y números de tab */
.dark section#escuelas .font-display.text-\[12px\],
.dark section#escuelas .text-\[11\.5px\],
.dark section#escuelas .text-\[13\.5px\] {
    color: rgba(245, 245, 247, 0.55) !important;
}

/* 4. Descripción de la escuela */
.dark section#escuelas p {
    color: rgba(245, 245, 247, 0.72) !important;
}

/* 5. Cards de cursos: fondo oscuro premium (reemplaza el bg-white inline) */
.dark section#escuelas .course-card {
    background-color: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 6. Header de la card (el bg-white/80 de los stats) */
.dark section#escuelas .bg-white\/80,
.dark section#escuelas .bg-white {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 7. Título del curso en la card */
.dark section#escuelas h4 {
    color: #f5f5f7 !important;
}

/* 8. === PRECIOS: PRESERVAR PSICOLOGÍA DEL COLOR === */
/* Precio final: verde esmeralda (confianza, acción) */
.dark section#escuelas .text-emerald-600 {
    color: #34d399 !important;  /* emerald-400: visible en oscuro */
}
/* Precio tachado: rosa/rojo (urgencia, descuento) */
.dark section#escuelas .text-rose-400 {
    color: #fb7185 !important;  /* rose-400: más saturado en oscuro */
}
/* Badge de descuento % */
.dark section#escuelas .bg-rose-100 {
    background-color: rgba(244, 63, 94, 0.15) !important;
}
.dark section#escuelas .text-rose-600 {
    color: #fb7185 !important;
}
/* Badge "Curso Nuevo" verde */
.dark section#escuelas .bg-emerald-50 {
    background-color: rgba(52, 211, 153, 0.1) !important;
}
.dark section#escuelas .text-emerald-700 {
    color: #34d399 !important;
}

/* 9. Rating en amarillo (social proof) */
.dark section#escuelas .text-amber-500 {
    color: #fbbf24 !important;
}

/* 10. Metadata badges (horas, certificación) */
.dark section#escuelas .bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
.dark section#escuelas .text-slate-500 {
    color: #a1a1a6 !important;
}
.dark section#escuelas .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.dark section#escuelas .border-t {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 11. Botones de navegación del carousel (flechas) */
.dark section#escuelas button.rounded-full.bg-white {
    background-color: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.dark section#escuelas button .text-\[\#0a1628\] {
    color: #f5f5f7 !important;
}

/* 12. ProgressTabs: jerarquía visual preservada */
.dark section#escuelas .text-\[\#0a1628\] {
    color: #f5f5f7 !important;
}
.dark section#escuelas .text-\[\#0a1628\]\/30,
.dark section#escuelas .text-\[\#0a1628\]\/35 {
    color: rgba(245, 245, 247, 0.35) !important;
}
.dark section#escuelas .text-\[\#0a1628\]\/40 {
    color: rgba(245, 245, 247, 0.4) !important;
}
.dark section#escuelas .text-\[\#0a1628\]\/50 {
    color: rgba(245, 245, 247, 0.5) !important;
}
.dark section#escuelas .text-\[\#0a1628\]\/65 {
    color: rgba(245, 245, 247, 0.65) !important;
}
/* Barra de progreso del tab (fondo) */
.dark section#escuelas .bg-\[\#0a1628\]\/5 {
    background-color: rgba(245, 245, 247, 0.08) !important;
}

/* 13. Versión mobile: el wrapper bg-white y los bloques de pastel */
.dark section#escuelas .lg\:hidden.block {
    background-color: #0c0c0e !important;
}
.dark section#escuelas .p-8.rounded-\[32px\] {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* 14. Estado "Próximos programas" (empty state) */
.dark section#escuelas .text-\[\#0a1628\]\/40 {
    color: rgba(245, 245, 247, 0.4) !important;
}
.dark section#escuelas .text-\[\#0a1628\]\/30 {
    color: rgba(245, 245, 247, 0.3) !important;
}

/* --- TEXT VISIBILITY ENGINE (RE-ENGINEERED v2.6) --- */
/* Forzamos que cualquier texto oscuro de Tailwind sea blanco en modo oscuro */
.dark .text-gray-900, .dark .text-gray-950,
.dark .text-slate-900, .dark .text-slate-950,
.dark .text-zinc-900, .dark .text-zinc-950,
.dark .text-neutral-900, .dark .text-neutral-950,
.dark .text-stone-900, .dark .text-stone-950,
.dark .text-indigo-900, .dark .text-indigo-950,
.dark .text-blue-900, .dark .text-blue-950,
.dark .text-violet-900, .dark .text-violet-950,
.dark .text-black,
.dark .text-\[\#0a1628\] {
  color: #ffffff !important;
}

.dark .text-gray-800, .dark .text-slate-800, .dark .text-indigo-800, .dark .text-blue-800,
.dark .text-\[\#0a1628\]\/80 {
  color: #f5f5f7 !important;
}

.dark .text-gray-700, .dark .text-slate-700, .dark .text-indigo-700, .dark .text-blue-700,
.dark .text-\[\#0a1628\]\/65,
.dark .text-\[\#0a1628\]\/60,
.dark .text-\[\#0a1628\]\/55,
.dark .text-\[\#0a1628\]\/50,
.dark .text-\[\#0a1628\]\/45,
.dark .text-\[\#0a1628\]\/40 {
  color: #e5e5e7 !important;
}

/* --- LIBRO DE RECLAMACIONES & FORMULARIOS --- */
.dark .form-card {
  background-color: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

.dark .form-section-title {
  color: #0071e3 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .field label {
  color: #a1a1a6 !important;
}

.dark .field input, 
.dark .field select, 
.dark .field textarea {
  background-color: #000000 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.dark .field input:focus, 
.dark .field select:focus, 
.dark .field textarea:focus {
  border-color: #0071e3 !important;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2) !important;
}

.dark .legal-header h1 {
  color: #ffffff !important;
}

.dark .legal-header p {
  color: #a1a1a6 !important;
}

/* --- SECCIONES DE ESCUELAS (CORRECCIÓN DE CONTRASTE) --- */
/* NOTA: Las reglas definitivas están en el bloque "SISTEMA DE COLOR CONTEXTUAL v3.0" 
   de arriba. Este bloque es mantenido solo para compatibilidad con otros templates. */
.dark section#escuelas h2,
.dark section#escuelas h3 {
  color: #f5f5f7 !important;
  background: none !important;
  -webkit-text-fill-color: #f5f5f7 !important;
}

/* Botón "Ver escuela completa" - preservar color de acento */
.dark section#escuelas a[style*="background"] {
  color: #ffffff !important;
}

/* Parche para el fondo de la página de reclamos */
.dark body {
  background-color: #000000 !important;
}

/* --- NUCLEAR TEXT FIX (v2.6) --- */
.dark h1:not(.text-gradient), .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .font-bold, .dark .font-semibold {
  color: #ffffff !important;
}

/* Preserve gradient headings */
.dark .text-gradient,
.dark h1.text-gradient,
.dark h2.text-gradient {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.dark p, .dark span:not(.logo-text) {
  color: #f5f5f7;
}

html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning header,
html.theme-transitioning footer,
html.theme-transitioning main,
html.theme-transitioning nav {
  transition: 
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark header,
.dark footer,
.dark main,
.dark nav,
.dark section,
.dark aside,
.dark .hc-card,
.dark .footer-public-root {
  border-color: var(--color-border);
}

/* --- [HC-EDU] PREMIUM HEADER SYNC --- */
.dark header, 
.dark .hc-main-header,
.dark .static-header,
.dark header-public nav,
.dark header-public header,
.dark header-private nav,
.dark header-private header {
    background-color: var(--color-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Ensure Logo and icons transition smoothly */
.dark .header-logo,
.dark .logo-img {
    filter: brightness(0) invert(1) !important;
    transition: filter 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark header-public, 
.dark header-private {
    --header-bg: var(--color-surface);
    --header-text: var(--color-text-primary);
    --header-border: var(--color-border);
}

.dark .nav-link,
.dark .nav-item span,
.dark .nav-actions a,
.dark .header-inner a,
.dark .nav-toggle {
    color: var(--color-text-primary) !important;
}

.dark .nav-icon-btn,
.dark #dark-mode-toggle {
    color: var(--color-text-primary) !important;
}

/* Active navigation state */
.dark .nav-link.active,
.dark .nav-item.active {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-primary) !important;
}
/* --- [HC-EDU] PREMIUM SPLASH SYNC --- */
.dark #splash {
    background-color: var(--color-bg) !important;
}

.dark .loader {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-top-color: var(--color-primary) !important;
}

.dark #hc-update-splash {
    background-color: var(--color-bg) !important;
}

.dark #hc-update-splash h2 {
    color: var(--color-text-primary) !important;
}

.dark #hc-update-splash p {
    color: var(--color-text-secondary) !important;
}

/* --- [HC-EDU] CHECKOUT SPECIFIC SYNC (v2.3) --- */
.dark, :root.dark {
    --checkout-bg: var(--color-bg) !important;
}

.dark body {
    background-color: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
}

.dark .checkout-section,
.dark .summary-card,
.dark .premium-section-highlight {
    background-color: var(--card-bg) !important;
    border-color: var(--input-border) !important;
    box-shadow: 0 8px 30px var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.dark .section-title {
    color: var(--text-primary) !important;
}

.dark .input-premium {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.dark .section-title {
    color: var(--color-text-primary) !important;
}

.dark .section-title i {
    color: var(--color-primary) !important;
}

.dark .step-badge {
    background: #2c2c2e !important;
    color: #a1a1a6 !important;
}

.dark .section-active .step-badge {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.dark .form-group label {
    color: var(--color-text-secondary) !important;
}

.dark .input-premium {
    background-color: #1c1c1e !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.dark .input-premium::placeholder {
    color: var(--color-text-muted) !important;
}

.dark #phone-input-wrapper {
    background-color: #1c1c1e !important;
    border-color: var(--color-border) !important;
}

.dark #phone-prefix-display {
    color: var(--color-text-primary) !important;
    border-right-color: var(--color-border) !important;
}

.dark #buyer-whatsapp {
    color: var(--color-text-primary) !important;
}

/* Gateway Selector */
.dark .gateway-option {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}

.dark .gateway-option:hover {
    background-color: var(--card-bg) !important;
    border-color: var(--accent-blue) !important;
}

.dark .gateway-name, .dark .gateway-desc {
    color: var(--text-primary) !important;
}

.dark .gateway-icon-wrapper {
    background-color: var(--checkout-bg) !important;
}

.dark .gateway-option:hover {
    background-color: #2c2c2e !important;
    border-color: var(--color-primary) !important;
}

.dark .gateway-option.selected {
    background-color: rgba(0, 113, 227, 0.1) !important;
    border-color: var(--color-primary) !important;
}

.dark .gateway-name {
    color: var(--color-text-primary) !important;
}

.dark .gateway-desc {
    color: var(--color-text-secondary) !important;
}

.dark .gateway-icon-wrapper {
    background-color: #2c2c2e !important;
    color: var(--color-text-primary) !important;
}

/* Sidebar & Cart */
.dark #credits-wrapper {
    background-color: #1c1c1e !important;
    border-color: var(--color-border) !important;
    border-style: solid !important;
}

.dark #hc-balance-value {
    color: var(--color-primary) !important;
}

.dark #credits-checkbox-container {
    background-color: #2c2c2e !important;
    border-color: var(--color-border) !important;
}

.dark #coupon-wrapper {
    border-top-color: var(--color-border) !important;
}

.dark #coupon-applied-container {
    background-color: rgba(52, 199, 89, 0.1) !important;
    border-color: rgba(52, 199, 89, 0.2) !important;
}

.dark #applied-coupon-label {
    color: var(--color-text-primary) !important;
}

.dark .trust-card {
    background-color: rgba(52, 199, 89, 0.05) !important;
}

/* Components Overrides */
.dark cart-summary,
.dark cart-upsell,
.dark country-selector {
    color: var(--color-text-primary) !important;
}

.dark .upsell-nav-btn {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

/* Refined Blue Accents */
.dark .text-blue-600, .dark .text-blue-500, .dark .text-indigo-600 {
    color: #58a6ff !important;
}

/* --- VERIFICATION PAGE SYNC --- */
.dark .verification-wrapper .card-verification,
.dark .verification-wrapper .premium-card,
.dark .verification-wrapper .tutorial-card {
    background-color: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f5f5f7 !important;
}

.dark .verification-wrapper .info-content-box,
.dark .verification-wrapper .syllabus-session-item {
    background-color: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .verification-wrapper .input-pill input {
    background-color: transparent !important;
    border-color: transparent !important;
}

.dark .verification-wrapper .support-mini-card {
    background-color: rgba(10, 132, 255, 0.08) !important;
}

/* WhatsApp tooltip bubble */
html.dark .hc-tooltip {
    background: #1c1c1e !important;
    color: #f5f5f7 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark .hc-tooltip::after {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .hc-tooltip span {
    color: #f5f5f7 !important;
}

html.dark .hc-tooltip-close {
    color: #a1a1a6 !important;
}

/* ================================================================
 * COURSE-CARD — SISTEMA DE PSICOLOGÍA DE COLOR EN MODO OSCURO (v1.0)
 * Aplica a: Dashboard de Alumno, Catálogo Público, Showcase.
 * Objetivo: Preservar jerarquía visual y colores de conversión.
 * ================================================================ */

/* 1. Superficie de la card: gris Apple oscuro (NO negro plano) */
.dark .course-card {
    background-color: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}
.dark .course-card:hover {
    border-color: rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Título del curso: blanco puro para máximo contraste */
.dark .course-card h3,
.dark .course-card h4 {
    color: #f5f5f7 !important;
}
.dark .course-card a:hover h3,
.dark .course-card:hover h3 {
    color: #6366f1 !important; /* Indigo al hover — color corporativo */
}

/* 3. === PRECIO FINAL: VERDE ESMERALDA (psicología: barato, acción, confianza) === */
.dark .course-card .text-emerald-600,
.dark .course-card .text-emerald-700 {
    color: #34d399 !important; /* emerald-400 — más luminoso en oscuro */
}
/* "Gratis" */
.dark .course-card .text-xl.font-black.text-emerald-600,
.dark .course-card .text-2xl.font-black.text-emerald-600 {
    color: #34d399 !important;
}

/* 4. === PRECIO BASE TACHADO: ROJO/ROSA (psicología: caro, urgencia del descuento) === */
.dark .course-card .text-rose-500 {
    color: #fb7185 !important; /* rose-400 */
}
/* Badge % de descuento */
.dark .course-card .bg-rose-500 {
    background-color: #e11d48 !important; /* rose-600: más saturado y visible */
}
/* Badge bg-rose-50 (si aplica en renderPublic) */
.dark .course-card .bg-rose-50 {
    background-color: rgba(244, 63, 94, 0.12) !important;
}
.dark .course-card .text-rose-600 {
    color: #fb7185 !important;
}

/* 5. === RATING: ÁMBAR/AMARILLO (social proof, confianza) === */
.dark .course-card .text-amber-500,
.dark .course-card .fill-amber-500 {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}
.dark .course-card .text-amber-400,
.dark .course-card .fill-amber-400 {
    color: #fcd34d !important;
    fill: #fcd34d !important;
}

/* 6. === TEXTOS SECUNDARIOS: jerarquía con opacidades === */
.dark .course-card .text-slate-400,
.dark .course-card .text-slate-500 {
    color: #8e8e93 !important; /* secondary text Apple */
}
.dark .course-card .text-slate-800,
.dark .course-card .text-slate-900 {
    color: #f5f5f7 !important;
}

/* 7. Categoría badge (indigo) — preservar color corporativo */
.dark .course-card .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}
.dark .course-card .text-indigo-600 {
    color: #818cf8 !important; /* indigo-400: más luminoso */
}

/* 8. Badge "Clase en Vivo" (rose) */
.dark .course-card .bg-rose-500\/10 {
    background-color: rgba(244, 63, 94, 0.1) !important;
}
.dark .course-card .text-rose-600 {
    color: #fb7185 !important;
}

/* 9. Badge "Curso Grabado" (indigo) */
.dark .course-card .bg-indigo-500\/10 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}

/* 10. Separador inferior de la card */
.dark .course-card .border-t,
.dark .course-card .border-slate-50,
.dark .course-card .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* 11. Mini-bloques de metadata (horas, certificación) */
.dark .course-card .bg-slate-50,
.dark .course-card .bg-slate-50\/50 {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* 12. Barra de progreso — azul corporativo sobre fondo oscuro */
.dark .course-card .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* 13. Badge "Certificado" — verde */
.dark .course-card .bg-emerald-50 {
    background-color: rgba(52, 211, 153, 0.1) !important;
}

/* 14. Badge "Curso" neutro */
.dark .course-card .bg-slate-50.text-slate-500 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 15. Botón de acción principal — preservar colores de estado */
/* bg-blue-600: "Continuar" */
.dark .course-card .bg-blue-600 {
    background-color: #2563eb !important; /* Se mantiene — es CTA primario */
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}
/* bg-emerald-600: "Ver Certificado" */
.dark .course-card .bg-emerald-600 {
    background-color: #059669 !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
}
/* bg-amber-500: "Confirmar Nombre" */
.dark .course-card .bg-amber-500 {
    background-color: #d97706 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
}

/* 16. Botón flecha (arrow-up-right en catálogo público) */
.dark .course-card .bg-slate-50.group-hover\:bg-indigo-600 {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* 17. Rating badge flotante (en imagen de card) */
.dark .course-card .bg-white\/90 {
    background-color: rgba(28, 28, 30, 0.92) !important;
    backdrop-filter: blur(8px) !important;
}
.dark .course-card .bg-white\/90 .text-slate-900 {
    color: #f5f5f7 !important;
}

/* 18. Wishlist button */
.dark .course-card .bg-white\/80 {
    background-color: rgba(28, 28, 30, 0.85) !important;
}

/* 19. Badge gradient "1ª Clase Gratis" — preservar (ya es oscuro) */
/* .bg-gradient-to-r from-indigo-600 to-blue-600 = no override needed */

/* 20. Texto "Repasar Material del Curso" link */
.dark .course-card .text-slate-400.hover\:text-indigo-600 {
    color: #6b6b6f !important;
}

/* ================================================================
 * DASHBOARD — ELEMENTOS PERIFÉRICOS (KPIs, Welcome Banner, Tabs)
 * ================================================================ */

/* Progreso de lección numérico */
.dark .course-card .text-slate-900.text-base {
    color: #f5f5f7 !important;
}

/* Etiqueta "Progreso" */
.dark .course-card .text-slate-400.uppercase {
    color: #8e8e93 !important;
}

/* Lecciones completadas X/Y */
.dark .course-card .text-slate-500 {
    color: #8e8e93 !important;
}