/* SanJuan Cars Auto Europe - High-Tech Styling & Mobile Responsive */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@600;700;800&display=swap');

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --racing-red: #ed2a2e;
  --dark-bg: #0b0f19;
  --card-bg: #111827;
  --glass: rgba(17, 24, 39, 0.75);
}

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

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #0b0f19;
  color: #f3f4f6;
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.font-display {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
  background: rgba(11, 15, 25, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Subtle glow */
.glow-primary {
  box-shadow: 0 0 40px -10px rgba(37, 99, 235, 0.4);
}

.glow-red {
  box-shadow: 0 0 35px -10px rgba(237, 42, 46, 0.4);
}

/* Mobile Input Zoom Prevention (iOS Safari fix) */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0b0f19;
}
::-webkit-scrollbar-thumb {
  background: #1f2937;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #374151;
}

/* Pulse animation */
@keyframes pulse-ring {
  0% { transform: scale(0.96); opacity: 0.85; }
  50% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(0.96); opacity: 0.85; }
}

.animate-pulse-slow {
  animation: pulse-ring 3s infinite ease-in-out;
}

/* Touch friendly active state */
button:active, a:active {
  transform: scale(0.98);
}


/* Estilos de Impresión para Certificado Oficial SanJuan Cars */
@media print {
  body * {
    visibility: hidden;
  }
  #appraisal-cert-modal, #appraisal-cert-modal * {
    visibility: visible;
  }
  #appraisal-cert-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    background: white !important;
    color: black !important;
    padding: 0;
    margin: 0;
  }
  #printable-cert-content {
    background: white !important;
    color: #111827 !important;
    border: 2px solid #111827 !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #printable-cert-content h2, #printable-cert-content h3, #printable-cert-content h4, #printable-cert-content b, #printable-cert-content span {
    color: #111827 !important;
  }
  #printable-cert-content .bg-gray-950, #printable-cert-content .bg-gray-900, #printable-cert-content .bg-blue-950\/40, #printable-cert-content .bg-emerald-950\/40 {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
  }
  .print\\:hidden {
    display: none !important;
  }
}


/* ==========================================================================
   SANJUAN CARS - LUXURY LIGHT & DARK THEME ENGINE (HIGH CONTRAST)
   ========================================================================== */

/* Transiciones globales suaves */
body, .glass-card, .glass-nav, input, select, textarea, button {
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* ==========================================================================
   A. TIPOGRAFÍA Y BRANDING EN MODO OSCURO (DEFAULT TITANIUM CARBON)
   ========================================================================== */

.brand-sanjuan-word {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 45%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.brand-cars-word {
  color: #ED2A2E;
  text-shadow: 0 0 16px rgba(237, 42, 46, 0.65);
  display: inline-block;
}

.hero-title-line1 {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 40%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-title-line2 {
  background: linear-gradient(90deg, #ED2A2E 0%, #FF3B3F 50%, #DC2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 35px rgba(237, 42, 46, 0.75));
  display: inline-block;
}

.hero-subtitle-text {
  color: #D1D5DB; /* Plata suave con alto contraste en fondo oscuro */
}

/* Slim Theme Switcher Button */
.theme-switch-slim {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 9999px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  user-select: none;
}

.theme-switch-slim .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  pointer-events: none;
}

/* Estado Claro Activo en el botón Slim */
html.light .theme-switch-slim,
.theme-switch-slim.light-active {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

html.light .theme-switch-slim .knob,
.theme-switch-slim.light-active .knob {
  transform: translateX(24px) !important;
  background: linear-gradient(135deg, #f59e0b, #ed2a2e) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(237, 42, 46, 0.45) !important;
}

/* ==========================================================================
   B. MODO CLARO PERFECTO (SHOWROOM BLANCO Y COLORES DEL LOGO SANJUAN CARS)
   ========================================================================== */

html.light {
  color-scheme: light;
}

html.light body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* 1. BRANDING Y LOGO EN EL ENCABEZADO Y PIE DE PÁGINA (COLORES DEL LOGO) */
html.light .brand-sanjuan-word {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #0A2647 !important; /* Azul Marino Real del Logo SanJuan Cars */
  font-weight: 900 !important;
  text-shadow: none !important;
}

html.light .brand-cars-word {
  color: #ED2A2E !important; /* Rojo Racing Oficial del Logo */
  text-shadow: none !important;
  font-weight: 900 !important;
}

html.light [data-i18n="nav_subtitle"] {
  color: #1E3A5F !important; /* Subtítulo legible y sobrio */
  font-weight: 600 !important;
}

/* Badge "Auto Europe" */
html.light span.bg-blue-500\/20 {
  background-color: #E0F2FE !important;
  color: #0369A1 !important;
  border-color: #7DD3FC !important;
  font-weight: 800 !important;
}

/* Enlaces de Navegación */
html.light .glass-nav nav a {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light .glass-nav nav a:hover {
  color: #ED2A2E !important;
}

/* 2. TÍTULO Y SUBTÍTULO HERO EN MODO CLARO (COLORES EXACTOS DEL LOGO) */
html.light .hero-title-line1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #0A2647 !important; /* Azul Marino Profundo del Emblema Circular */
  font-weight: 900 !important;
  text-shadow: 0 2px 10px rgba(10, 38, 71, 0.08) !important;
}

html.light .hero-title-line2 {
  background: linear-gradient(90deg, #ED2A2E 0%, #C8102E 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(237, 42, 46, 0.25)) !important;
  font-weight: 900 !important;
}

html.light .hero-subtitle-text {
  color: #142850 !important; /* Azul marino secundario del logo, 100% nítido y legible */
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* Badge Superior Hero "Plataforma Automotriz Virtual Nº1 en Europa" */
html.light .bg-blue-500\/10 {
  background-color: #E0F2FE !important;
  color: #0369A1 !important;
  border-color: #7DD3FC !important;
  font-weight: 700 !important;
}

/* 3. HERO VIDEO Y ENCABEZADO EN MODO CLARO */
html.light #hero-video-container {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.75) 0%, rgba(248, 250, 252, 0.52) 50%, #F8FAFC 100%) !important;
}

html.light #hero-video-container video {
  opacity: 0.45 !important;
  filter: brightness(0.95) contrast(1.08) !important;
}

/* Ocultar las capas negras sobre el video en modo claro */
html.light #hero-video-container div {
  display: none !important;
}

/* 4. NAVBAR Y MENÚS */
html.light .glass-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.09) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light #mobile-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top-color: #E2E8F0 !important;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.08) !important;
}

html.light #mobile-menu a {
  color: #0F172A !important;
  font-weight: 600 !important;
}

html.light #mobile-menu a:hover {
  background-color: #F1F5F9 !important;
}

html.light #lang-selector-container button,
html.light a[href="/admin.html"] {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light #lang-dropdown {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

html.light #lang-dropdown button {
  color: #1E293B !important;
  font-weight: 600 !important;
}

html.light #lang-dropdown button:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

/* 5. TARJETAS DE MÉTRICAS HERO ("14 DÍAS", "24 MESES", "250+", "100%") */
html.light section.relative .glass-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

html.light [data-i18n="hero_stat_1_num"] { color: #1D4ED8 !important; } /* Azul Zafiro */
html.light [data-i18n="hero_stat_2_num"] { color: #047857 !important; } /* Esmeralda */
html.light [data-i18n="hero_stat_3_num"] { color: #4338CA !important; } /* Índigo */
html.light [data-i18n="hero_stat_4_num"] { color: #B45309 !important; } /* Ámbar */

html.light [data-i18n="hero_stat_1_lbl"],
html.light [data-i18n="hero_stat_2_lbl"],
html.light [data-i18n="hero_stat_3_lbl"],
html.light [data-i18n="hero_stat_4_lbl"] {
  color: #1E293B !important; /* Texto oscuro, 100% nítido */
  font-weight: 600 !important;
}

/* Botón Secundario Hero "Súper Tasador Inteligente" */
html.light a[href="#super-tasador"].bg-gray-900\/90 {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

html.light a[href="#super-tasador"].bg-gray-900\/90:hover {
  background-color: #F8FAFC !important;
  border-color: #3B82F6 !important;
}

/* 6. CATÁLOGO DE VEHÍCULOS EN MODO CLARO */
html.light [data-i18n="cat_badge"] {
  color: #0369A1 !important;
  font-weight: 800 !important;
}

html.light [data-i18n="cat_title"] {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light [data-i18n="cat_subtitle"] {
  color: #334155 !important;
  font-weight: 500 !important;
}

html.light #catalog-results-count {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Barra de Filtros */
html.light #catalogo .glass-card:first-of-type {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html.light input:not([type="range"]),
html.light select,
html.light textarea {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
  font-weight: 500 !important;
}

html.light select option {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #64748B !important;
}

/* Tarjetas de Vehículos del Catálogo */
html.light #vehicles-grid .glass-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

html.light #vehicles-grid .glass-card:hover {
  border-color: #ED2A2E !important;
  box-shadow: 0 12px 28px rgba(237, 42, 46, 0.12) !important;
}

html.light #vehicles-grid h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #vehicles-grid p.text-blue-400 {
  color: #0369A1 !important;
  font-weight: 700 !important;
}

/* Ficha técnica dentro de la tarjeta (Año, Km, Combustible, CV) */
html.light #vehicles-grid .grid.grid-cols-2 {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html.light #vehicles-grid .grid.grid-cols-2 span {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light #vehicles-grid .grid.grid-cols-2 i {
  color: #475569 !important;
}

/* Precios en la tarjeta */
html.light #vehicles-grid .text-2xl.font-bold {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #vehicles-grid .text-xs.text-gray-400.block {
  color: #475569 !important;
  font-weight: 600 !important;
}

html.light #vehicles-grid .text-sm.font-semibold.text-emerald-400 {
  color: #047857 !important;
  font-weight: 800 !important;
}

html.light #vehicles-grid .pt-3.border-t.border-gray-800 {
  border-color: #E2E8F0 !important;
}

/* Botón "Ver Ficha Completa" */
html.light #vehicles-grid button.bg-gray-800 {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 700 !important;
}

html.light #vehicles-grid button.bg-gray-800:hover {
  background-color: #E2E8F0 !important;
}

/* ==========================================================================
   GLOBAL RANGE SLIDERS ENGINE (HIGH CONTRAST LIGHT & DARK)
   ========================================================================== */

input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 8px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  outline: none !important;
  margin: 10px 0 !important;
}

/* Modo Oscuro - Rail de Deslizamiento */
html:not(.light) input[type="range"] {
  background-color: #334155 !important;
  border: 1px solid #475569 !important;
}

/* Modo Claro - Rail de Deslizamiento de Alto Contraste */
html.light input[type="range"] {
  background-color: #CBD5E1 !important;
  border: 1px solid #94A3B8 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Thumbs Personalizados con Halo y Sombra */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

input[type="range"]::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.18) !important;
}

#fin-price-slider::-webkit-slider-thumb {
  background: #2563EB !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5) !important;
}

#fin-down-slider::-webkit-slider-thumb {
  background: #10B981 !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5) !important;
}

#fin-term-slider::-webkit-slider-thumb {
  background: #6366F1 !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5) !important;
}

#taz-soh::-webkit-slider-thumb {
  background: #10B981 !important;
  border: 2.5px solid #FFFFFF !important;
}

/* 7. SÚPER TASADOR EN MODO CLARO */
html.light #super-tasador {
  background-color: #F8FAFC !important;
}

html.light #super-tasador .glass-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

html.light #super-tasador h2 {
  color: #0F172A !important;
}

html.light #super-tasador h3,
html.light #super-tasador h4 {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #super-tasador p {
  color: #334155 !important;
}

html.light #super-tasador label,
html.light #super-tasador .text-gray-300 {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Indicadores de Pasos del Tasador */
html.light #step-indicator-1.bg-gray-800,
html.light #step-indicator-2.bg-gray-800,
html.light #step-indicator-3.bg-gray-800 {
  background-color: #E2E8F0 !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
}

html.light #step-indicator-1.bg-blue-600,
html.light #step-indicator-2.bg-blue-600,
html.light #step-indicator-3.bg-blue-600 {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

/* Caja Decodificador VIN en Modo Claro */
html.light #super-tasador .from-blue-950\/40 {
  background: linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border-color: #93C5FD !important;
}

html.light #super-tasador .from-blue-950\/40 span {
  color: #1E3A8A !important;
}

/* Opciones / Botones / Checkboxes de extras en tasador */
html.light #super-tasador button.border-gray-800 {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

html.light #super-tasador button.border-gray-800:hover {
  background-color: #F1F5F9 !important;
}

html.light #super-tasador .bg-gray-950\/80,
html.light #super-tasador .bg-gray-900\/60 {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* Tarjetas de ofertas financieras del tasador */
html.light #taz-step-3 .bg-gray-900\/60:first-child {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

html.light #res-market-value {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #res-price-range {
  color: #1E293B !important;
  font-weight: 800 !important;
}

html.light #taz-step-3 [data-i18n="taz_res_market_title"] {
  color: #475569 !important;
  font-weight: 800 !important;
}

html.light #taz-step-3 [data-i18n="taz_res_market_desc"] {
  color: #334155 !important;
}

/* Card 2: Compra Inmediata Cash 24H */
html.light #taz-step-3 .border-blue-500 {
  background: linear-gradient(145deg, #0A2647 0%, #142850 100%) !important;
  border-color: #2563EB !important;
  box-shadow: 0 10px 25px rgba(10, 38, 71, 0.25) !important;
}

html.light #res-cash-offer {
  color: #FFFFFF !important;
  font-weight: 900 !important;
}

html.light #taz-step-3 [data-i18n="taz_res_cash_title"] {
  color: #93C5FD !important;
  font-weight: 800 !important;
}

html.light #taz-step-3 [data-i18n="taz_res_cash_desc"] {
  color: #E2E8F0 !important;
}

/* Card 3: Plan Canje Trade-In */
html.light #taz-step-3 .border-emerald-500\/40 {
  background: #F0FDF4 !important;
  border: 1.5px solid #10B981 !important;
}

html.light #res-tradein-value {
  color: #047857 !important;
  font-weight: 900 !important;
}

html.light #taz-step-3 [data-i18n="taz_res_tradein_title"] {
  color: #065F46 !important;
  font-weight: 800 !important;
}

html.light #taz-step-3 [data-i18n="taz_res_tradein_desc"] {
  color: #166534 !important;
}

/* Desglose Analítico DAT / Eurotax */
html.light #taz-step-3 .p-5.rounded-2xl.bg-gray-900\/50 {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

html.light #taz-step-3 .p-5.rounded-2xl.bg-gray-900\/50 h4 {
  color: #0F172A !important;
}

html.light #taz-step-3 .p-3.rounded-xl.bg-gray-950\/60 {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html.light #taz-step-3 .p-3.rounded-xl.bg-gray-950\/60 span:first-child {
  color: #475569 !important;
}

html.light #res-breakdown-equipment { color: #047857 !important; }
html.light #res-breakdown-km { color: #0F172A !important; }
html.light #res-breakdown-condition { color: #047857 !important; }
html.light #res-breakdown-battery { color: #1D4ED8 !important; }

/* Factores de Auditoría */
html.light #taz-step-3 .bg-gray-950\/50 {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

html.light #res-positive-factors li,
html.light #res-negative-factors li {
  color: #1E293B !important;
  font-weight: 600 !important;
}

/* 8. FINANCIACIÓN EN MODO CLARO (HIGH CONTRAST & LUXURY PRESTIGE) */
html.light #financiacion {
  background-color: #F1F5F9 !important;
}

html.light #financiacion .glass-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

html.light #financiacion h2 {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #financiacion p {
  color: #334155 !important;
  font-weight: 500 !important;
}

/* Labels de los Sliders Financieros */
html.light #financiacion .text-gray-300,
html.light [data-i18n="fin_lbl_price"],
html.light [data-i18n="fin_lbl_down"],
html.light [data-i18n="fin_lbl_term"] {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

html.light #fin-price-val {
  color: #1D4ED8 !important;
  font-weight: 900 !important;
}

html.light #fin-down-val {
  color: #047857 !important;
  font-weight: 900 !important;
}

html.light #fin-term-val {
  color: #4338CA !important;
  font-weight: 900 !important;
}

/* Tarjeta Resultado Cuota Mensual (Cockpit Azul Marino SanJuan Cars) */
html.light #financiacion .bg-gray-900\/80 {
  background: linear-gradient(145deg, #0A2647 0%, #142850 100%) !important;
  border: 1.5px solid #1E40AF !important;
  box-shadow: 0 15px 35px -5px rgba(10, 38, 71, 0.3) !important;
}

html.light #financiacion .bg-gray-900\/80 [data-i18n="fin_lbl_monthly"] {
  color: #93C5FD !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

html.light #fin-monthly-result {
  color: #34D399 !important; /* Verde Neón Esmeralda brillante de máximo contraste */
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.45) !important;
  font-weight: 900 !important;
}

html.light #financiacion .bg-gray-900\/80 .border-gray-800 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.light #financiacion .bg-gray-900\/80 span[data-i18n="fin_lbl_financed"],
html.light #financiacion .bg-gray-900\/80 span[data-i18n="fin_lbl_interest"],
html.light #financiacion .bg-gray-900\/80 span[data-i18n="fin_lbl_tin"] {
  color: #CBD5E1 !important;
  font-weight: 600 !important;
}

html.light #fin-total-financed,
html.light #fin-total-interest,
html.light #financiacion .bg-gray-900\/80 span.font-semibold.text-gray-200 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* 8.1 GARANTÍAS EUROPEAS EN MODO CLARO */
html.light #garantias {
  background-color: #F8FAFC !important;
}

html.light #garantias .glass-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

html.light [data-i18n="guar_title"] {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light [data-i18n="guar_subtitle"] {
  color: #334155 !important;
  font-weight: 500 !important;
}

html.light [data-i18n="guar_1_title"],
html.light [data-i18n="guar_2_title"],
html.light [data-i18n="guar_3_title"] {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light [data-i18n="guar_1_desc"],
html.light [data-i18n="guar_2_desc"],
html.light [data-i18n="guar_3_desc"] {
  color: #334155 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* 9. MODALES EN MODO CLARO */
html.light #appraisal-cert-modal > div,
html.light #vehicle-detail-modal > div,
html.light #reservation-modal > div,
html.light #testdrive-modal > div,
html.light #compare-modal > div {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

html.light #vehicle-detail-modal h3,
html.light #reservation-modal h3,
html.light #compare-modal h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #vehicle-detail-modal p,
html.light #reservation-modal p {
  color: #334155 !important;
}

html.light #vehicle-detail-modal label,
html.light #reservation-modal label,
html.light #compare-modal label {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light #vehicle-detail-modal h4,
html.light #reservation-modal h4 {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #reservation-modal .bg-gray-900\/60 {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

html.light #res-modal-car-title {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #reservation-modal .text-gray-300 {
  color: #0F172A !important;
}

html.light #vehicle-detail-modal .text-gray-300,
html.light #vehicle-detail-modal .text-gray-400 {
  color: #334155 !important;
}

/* 10. PRESERVACIÓN ESTRICTA DE BOTONES CON TEXTO BLANCO */
html.light [class*="from-[#ED2A2E]"],
html.light [class*="from-[#ED2A2E]"] *,
html.light .bg-blue-600,
html.light .bg-blue-600 *,
html.light button.bg-blue-600,
html.light a.bg-blue-600,
html.light .btn-primary-red,
html.light .btn-primary-red * {
  color: #FFFFFF !important;
}

/* 11. PIE DE PÁGINA EN MODO CLARO */
html.light footer {
  background-color: #FFFFFF !important;
  border-top-color: #E2E8F0 !important;
}

html.light footer p {
  color: #475569 !important;
}

html.light footer a[href="/admin.html"] {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* ==========================================================================
   ESTILOS PREMIUM BOTÓN SELECTOR DE IDIOMA E INDICADOR
   ========================================================================== */

.lang-btn-premium {
  background: rgba(15, 23, 42, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  user-select: none;
}

.lang-btn-premium:hover {
  border-color: #3B82F6;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
}

html.light .lang-btn-premium {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.light .lang-btn-premium:hover {
  border-color: #2563EB !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.25) !important;
}

/* Efecto de Pulso y Resplandor al Cambiar Idioma */
@keyframes langRipple {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8); }
  50% { transform: scale(1.05); box-shadow: 0 0 22px 5px rgba(59, 130, 246, 0.65); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.lang-swapped-glow {
  animation: langRipple 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-color: #3B82F6 !important;
}

/* Toast Sutil de Confirmación de Idioma */
#lang-toast-notification {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #FFFFFF;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html.light #lang-toast-notification {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #93C5FD !important;
  color: #0F172A !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

#lang-toast-notification.show {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   GOMEZ SYSTEMS ULTRA-FUTURISTIC NEON ARCHITECTURE ENGINE
   ========================================================================== */

@keyframes cyberNeonGlow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.4), 0 0 50px rgba(37, 99, 235, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.65), 0 0 70px rgba(99, 102, 241, 0.35);
  }
}

.gomez-neon-wrapper {
  animation: cyberNeonGlow 4s infinite ease-in-out;
}

.gomez-neon-inner {
  border: 1px solid rgba(6, 182, 212, 0.35);
}

/* Modo Claro: Alto contraste elegante manteniendo el resplandor neón */
html.light .gomez-neon-wrapper {
  background: linear-gradient(90deg, #06B6D4 0%, #2563EB 50%, #4F46E5 100%) !important;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.25) !important;
}

html.light .gomez-neon-inner {
  background: #FFFFFF !important;
  border-color: #BFDBFE !important;
}

html.light .gomez-neon-inner span.text-transparent {
  background: linear-gradient(90deg, #0A2647 0%, #0284C7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

html.light .gomez-neon-sub {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light .gomez-neon-inner a,
html.light .gomez-neon-inner a * {
  color: #FFFFFF !important;
}