/* Luxury 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: #D4AF37;
  --metallic-gold: #D4AF37;
  --dark-bg: #0b0f19;
  --card-bg: #111827;
  --glass: rgba(17, 24, 39, 0.75);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #0b0f19;
  color: #f3f4f6;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
  -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, .glow-gold {
  box-shadow: 0 0 35px -10px rgba(212, 175, 55, 0.5);
}

/* Botón Dorado Metálico 3D (Gold Metálico) */
.btn-gold-metallic {
  background: linear-gradient(135deg, #9A6F1A 0%, #D4AF37 22%, #FFF3B0 48%, #C59B27 72%, #8A5A10 100%) !important;
  color: #0A0D12 !important;
  border: 1px solid rgba(255, 243, 176, 0.65) !important;
  box-shadow: 0 10px 25px -4px rgba(212, 175, 55, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.65) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.btn-gold-metallic:hover {
  background: linear-gradient(135deg, #B38728 0%, #E6C65B 25%, #FFF8CC 50%, #D4AF37 75%, #9A6F1A 100%) !important;
  box-shadow: 0 14px 32px -4px rgba(212, 175, 55, 0.68), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.btn-gold-metallic *,
html.light .btn-gold-metallic,
html.light .btn-gold-metallic * {
  color: #0A0D12 !important;
}

/* 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 {
  background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #D4AF37 50%, #FBF5B7 75%, #AA771C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.55));
  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(135deg, #BF953F 0%, #FCF6BA 25%, #D4AF37 50%, #FBF5B7 75%, #AA771C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 32px rgba(212, 175, 55, 0.65));
  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, #D4AF37, #9A6F1A) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.5) !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 {
  background: linear-gradient(135deg, #8A5A10 0%, #D4AF37 35%, #B38728 65%, #6E470B 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 4px rgba(180, 135, 35, 0.3)) !important;
  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: #B38728 !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(135deg, #8A5A10 0%, #C59B27 35%, #D4AF37 50%, #9A6F1A 80%, #6E470B 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(180, 135, 35, 0.3)) !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: 1.5px solid #64748B !important;
  font-weight: 600 !important;
}

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

html.light input::placeholder,
html.light textarea::placeholder {
  color: #334155 !important;
  font-weight: 600 !important;
  opacity: 1 !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: #D4AF37 !important;
  box-shadow: 0 12px 28px rgba(212, 175, 55, 0.18) !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 (CONTRASTE TOTAL 100%) */
html.light #super-tasador {
  background-color: #F8FAFC !important;
}

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

html.light #super-tasador [data-i18n="taz_badge"] {
  color: #065F46 !important;
  font-weight: 800 !important;
}

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

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

html.light #super-tasador p {
  color: #1E293B !important;
  font-weight: 500 !important;
}

html.light #super-tasador label,
html.light #super-tasador label span {
  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: #0F172A !important;
  border: 1.5px solid #94A3B8 !important;
  font-weight: 800 !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: #1D4ED8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35) !important;
}

/* CAJA DECODIFICADOR VIN EN MODO CLARO (CONTRASTE PERFECTO Y NÍTIDO) */
html.light #vin-decoder-box {
  background: #F1F5F9 !important;
  border: 2px solid #3B82F6 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

html.light #vin-decoder-box .vin-icon-badge {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
}

html.light #vin-decoder-box .vin-icon-badge svg {
  color: #FFFFFF !important;
}

html.light #vin-decoder-box .vin-box-title {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #vin-decoder-box .vin-box-subtitle {
  color: #1E293B !important;
  font-weight: 700 !important;
}

html.light #taz-vin-input {
  background-color: #FFFFFF !important;
  border: 2px solid #475569 !important;
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #taz-vin-input::placeholder {
  color: #334155 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

html.light #btn-decode-vin,
html.light #btn-decode-vin span,
html.light #btn-decode-vin svg {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

html.light #btn-decode-vin:hover {
  background-color: #1E40AF !important;
}

html.light #vin-decoder-box .vin-quick-label {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #vin-decoder-box .vin-sample-chip {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #475569 !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

html.light #vin-decoder-box .vin-sample-chip:hover {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-color: #1D4ED8 !important;
}

html.light #taz-vin-status {
  background-color: #EFF6FF !important;
  color: #0F172A !important;
  border: 1.5px solid #3B82F6 !important;
  font-weight: 800 !important;
}

/* Opciones / Botones secundarios / Checkboxes de extras en tasador */
html.light #super-tasador button.bg-gray-800 {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
  border: 1.5px solid #64748B !important;
  font-weight: 800 !important;
}

html.light #super-tasador button.bg-gray-800 span,
html.light #super-tasador button.bg-gray-800 svg {
  color: #0F172A !important;
}

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

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

html.light #super-tasador #taz-step-3 .text-white:not(#res-cash-offer) {
  color: #0F172A !important;
}

html.light #super-tasador #taz-step-3 .text-gray-400 {
  color: #334155 !important;
  font-weight: 600 !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 */
html.light .bg-blue-600,
html.light .bg-blue-600 *,
html.light button.bg-blue-600,
html.light a.bg-blue-600 {
  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;
}

/* ==========================================================================
   PUBLICIDAD NEÓN: "TE AYUDAMOS A VENDER TU AUTO POR UN PRECIO JUSTO"
   ========================================================================== */

@keyframes fairPriceNeonPulse {
  0%, 100% {
    box-shadow: 0 0 32px rgba(250, 204, 21, 0.65), 0 0 70px rgba(234, 179, 8, 0.45), inset 0 0 28px rgba(253, 224, 71, 0.25);
  }
  50% {
    box-shadow: 0 0 55px rgba(253, 224, 71, 0.9), 0 0 95px rgba(250, 204, 21, 0.6), inset 0 0 35px rgba(250, 204, 21, 0.35);
  }
}

@keyframes neonTextFlicker {
  0%, 100% {
    filter: drop-shadow(0 0 18px rgba(250, 204, 21, 0.9)) drop-shadow(0 0 35px rgba(234, 179, 8, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(252, 246, 186, 0.95)) drop-shadow(0 0 50px rgba(212, 175, 55, 0.75));
  }
}

.fair-sell-neon-wrapper {
  background: linear-gradient(125deg, #FACC15 0%, #FEF08A 30%, #EAB308 65%, #FDE047 100%);
  animation: fairPriceNeonPulse 3.5s infinite ease-in-out;
}

.fair-sell-neon-inner {
  background: radial-gradient(circle at 15% 20%, rgba(212, 175, 55, 0.16) 0%, transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(250, 204, 21, 0.22) 0%, transparent 45%),
              rgba(7, 10, 19, 0.94);
  border: 1px solid rgba(252, 246, 186, 0.35);
}

.fair-sell-neon-title {
  background: linear-gradient(90deg, #FFFFFF 0%, #FEF08A 28%, #FACC15 55%, #FDE047 82%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: neonTextFlicker 3s infinite ease-in-out;
}

.fair-sell-neon-card {
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(212, 175, 55, 0.38);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.15), inset 0 0 15px rgba(253, 224, 71, 0.1);
  transition: all 0.3s ease;
}

.fair-sell-neon-card:hover {
  border-color: #FACC15;
  box-shadow: 0 0 28px rgba(250, 204, 21, 0.45), 0 0 15px rgba(212, 175, 55, 0.35);
  transform: translateY(-3px);
}

/* ==========================================================================
   MODO DÍA (html.light): PUBLICIDAD CON FONDO CLARO + DORADO Y NEÓN DE ALTO CONTRASTE
   ========================================================================== */

@keyframes fairPriceNeonPulseLight {
  0%, 100% {
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.7), 0 12px 35px rgba(180, 83, 9, 0.32), inset 0 0 24px rgba(250, 204, 21, 0.45);
  }
  50% {
    box-shadow: 0 0 55px rgba(234, 179, 8, 0.95), 0 16px 45px rgba(217, 119, 6, 0.48), inset 0 0 32px rgba(250, 204, 21, 0.65);
  }
}

html.light .fair-sell-neon-wrapper {
  background: linear-gradient(125deg, #B45309 0%, #F59E0B 28%, #FACC15 55%, #D97706 82%, #92400E 100%) !important;
  animation: fairPriceNeonPulseLight 3.5s infinite ease-in-out !important;
  padding: 4px !important;
}

html.light .fair-sell-neon-inner {
  background: radial-gradient(circle at 12% 20%, rgba(250, 204, 21, 0.35) 0%, transparent 48%),
              radial-gradient(circle at 88% 82%, rgba(245, 158, 11, 0.32) 0%, transparent 48%),
              linear-gradient(135deg, #FFFFFF 0%, #FFFDF5 50%, #FEF9C3 100%) !important;
  border: 2px solid #F59E0B !important;
  box-shadow: inset 0 0 40px rgba(250, 204, 21, 0.28) !important;
}

/* Badge Superior en Modo Día */
html.light #venta-justa-neon .fair-sell-badge {
  background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%) !important;
  border: 2px solid #D97706 !important;
  color: #78350F !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.55) !important;
}

html.light #venta-justa-neon .fair-sell-badge span {
  color: #78350F !important;
  font-weight: 900 !important;
}

html.light #venta-justa-neon .fair-sell-badge svg {
  color: #B45309 !important;
}

html.light #venta-justa-neon .fair-sell-dot {
  background-color: #D97706 !important;
}

/* Título Principal: Dorado Bronce Oscuro & Azul Marino con Resplandor Neón Dorado-Amarillo */
html.light .fair-sell-neon-title {
  background: linear-gradient(90deg, #0F172A 0%, #78350F 25%, #B45309 50%, #78350F 75%, #0F172A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: none !important;
  filter: drop-shadow(0 2px 0px rgba(254, 240, 138, 0.95)) drop-shadow(0 0 18px rgba(245, 158, 11, 0.75)) !important;
  font-weight: 900 !important;
}

/* Párrafo Descriptivo y Palabras Clave Resaltadas */
html.light #venta-justa-neon .fair-sell-desc {
  color: #0F172A !important;
  font-weight: 600 !important;
}

html.light #venta-justa-neon .fair-sell-highlight {
  color: #78350F !important;
  background-color: #FEF08A !important;
  padding: 1px 7px !important;
  border-radius: 6px !important;
  border: 1.5px solid #D97706 !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.6) !important;
  font-weight: 900 !important;
}

/* Las 3 Tarjetas de Beneficios en Modo Día (Fondo Claro + Borde Neón Dorado) */
html.light .fair-sell-neon-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEB 100%) !important;
  border: 2px solid #F59E0B !important;
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.14), 0 0 18px rgba(250, 204, 21, 0.45), inset 0 0 14px rgba(254, 240, 138, 0.35) !important;
}

html.light .fair-sell-neon-card:hover {
  border-color: #B45309 !important;
  box-shadow: 0 12px 28px rgba(180, 83, 9, 0.25), 0 0 26px rgba(245, 158, 11, 0.75) !important;
  transform: translateY(-3px);
}

html.light .fair-sell-neon-card .fair-sell-card-head,
html.light .fair-sell-neon-card .fair-sell-card-head span {
  color: #78350F !important;
  font-weight: 900 !important;
}

html.light .fair-sell-neon-card .fair-sell-card-head svg {
  color: #D97706 !important;
}

html.light .fair-sell-neon-card .fair-sell-card-text {
  color: #0F172A !important;
  font-weight: 600 !important;
}

/* Panel Derecho de Acción Directa (¿Cuánto vale hoy tu auto?) en Modo Día */
html.light #venta-justa-neon .fair-sell-cta-box {
  background: linear-gradient(180deg, #FFFFFF 0%, #FEFCE8 100%) !important;
  border: 2px solid #D97706 !important;
  box-shadow: 0 12px 32px rgba(180, 83, 9, 0.2), 0 0 28px rgba(250, 204, 21, 0.55), inset 0 0 18px rgba(254, 240, 138, 0.4) !important;
}

html.light #venta-justa-neon .fair-sell-cta-top {
  color: #92400E !important;
  font-weight: 900 !important;
}

html.light #venta-justa-neon .fair-sell-cta-main {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #venta-justa-neon .fair-sell-btn-secondary {
  background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%) !important;
  border: 2px solid #D97706 !important;
  color: #78350F !important;
  font-weight: 900 !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.45) !important;
}

html.light #venta-justa-neon .fair-sell-btn-secondary span,
html.light #venta-justa-neon .fair-sell-btn-secondary svg {
  color: #78350F !important;
  font-weight: 900 !important;
}

html.light #venta-justa-neon .fair-sell-btn-secondary:hover {
  background: linear-gradient(90deg, #FDE68A 0%, #FCD34D 100%) !important;
  border-color: #B45309 !important;
  box-shadow: 0 0 28px rgba(245, 158, 11, 0.75) !important;
}

/* ==========================================================================
   SECCIÓN "ENCARGA TU VEHÍCULO" (MODO CLARO & OSCURO CON CONTRASTE 100%)
   ========================================================================== */

html.light #encarga-vehiculo {
  background-color: #F1F5F9 !important;
}

html.light #encarga-vehiculo [data-i18n="ord_badge"] {
  color: #78350F !important;
  font-weight: 800 !important;
}

html.light #encarga-vehiculo .glass-card {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important;
}

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

html.light #encarga-vehiculo p {
  color: #1E293B !important;
  font-weight: 500 !important;
}

html.light #encarga-vehiculo label,
html.light #encarga-vehiculo label span {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Indicadores de pasos de Encarga tu Vehículo en Modo Claro */
html.light #ord-step-indicator-1.bg-gray-800,
html.light #ord-step-indicator-2.bg-gray-800,
html.light #ord-step-indicator-3.bg-gray-800 {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
  border: 1.5px solid #94A3B8 !important;
  font-weight: 800 !important;
}

/* Banner de Inteligencia de Precios Regionales en Modo Claro */
html.light #ord-intel-banner {
  background: #FFFBEB !important;
  border: 2px solid #D97706 !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.08) !important;
}

html.light #ord-intel-banner .ord-intel-icon {
  background-color: #D97706 !important;
  color: #FFFFFF !important;
}

html.light #ord-intel-banner .ord-intel-icon svg {
  color: #FFFFFF !important;
}

html.light #ord-intel-banner .ord-intel-title {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #ord-intel-banner .ord-intel-desc {
  color: #1E293B !important;
  font-weight: 600 !important;
}

html.light #ord-intel-banner .ord-intel-pill {
  background-color: #FEF3C7 !important;
  color: #78350F !important;
  border: 1.5px solid #D97706 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* Paneles internos Paso 2 y Paso 3 de Encarga tu Vehículo en Modo Claro */
html.light #encarga-vehiculo .bg-gray-900\/60,
html.light #encarga-vehiculo .bg-gray-900\/80,
html.light #encarga-vehiculo .bg-gray-950\/80,
html.light #encarga-vehiculo .bg-gray-950\/60 {
  background-color: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
}

html.light #encarga-vehiculo button.bg-gray-800 {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
  border: 1.5px solid #64748B !important;
  font-weight: 800 !important;
}

html.light #encarga-vehiculo button.bg-gray-800 span,
html.light #encarga-vehiculo button.bg-gray-800 svg {
  color: #0F172A !important;
}

html.light #encarga-vehiculo .order-db-card {
  background-color: #FFFFFF !important;
  border: 1.5px solid #94A3B8 !important;
}

html.light #encarga-vehiculo .order-db-card .text-white,
html.light #encarga-vehiculo .order-db-card .text-gray-200 {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #encarga-vehiculo .order-db-card .text-gray-400 {
  color: #334155 !important;
  font-weight: 700 !important;
}

html.light #encarga-vehiculo .order-db-card .text-amber-300,
html.light #encarga-vehiculo .order-db-card .text-amber-400,
html.light #encarga-vehiculo .order-db-card .text-yellow-300 {
  color: #92400E !important;
  font-weight: 800 !important;
}

html.light #encarga-vehiculo .order-db-card .text-cyan-400 {
  color: #0369A1 !important;
  font-weight: 800 !important;
}

html.light #encarga-vehiculo .order-price-card-min,
html.light #encarga-vehiculo .order-price-card-max {
  background-color: #FFFFFF !important;
  border: 1.5px solid #94A3B8 !important;
}

html.light #encarga-vehiculo #ord-res-min-price {
  color: #0F172A !important;
}

html.light #encarga-vehiculo #ord-res-max-price {
  color: #B45309 !important;
}

html.light #encarga-vehiculo .order-price-card-min span,
html.light #encarga-vehiculo .order-price-card-max span {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light #encarga-vehiculo #ord-step-3 #ord-res-location-badge,
html.light #encarga-vehiculo #ord-step-3 #ord-res-units-count,
html.light #encarga-vehiculo #ord-step-3 #ord-breakdown-zone-lbl {
  color: #92400E !important;
  font-weight: 900 !important;
}

html.light #encarga-vehiculo #ord-step-3 .from-amber-950\/45 {
  background: linear-gradient(145deg, #0A2647 0%, #0F172A 100%) !important;
  border-color: #D97706 !important;
}

html.light #encarga-vehiculo #ord-step-3 .from-amber-950\/45 #ord-res-avg-price,
html.light #encarga-vehiculo #ord-step-3 .from-amber-950\/45 #ord-res-recommended-range {
  color: #FFFFFF !important;
}

html.light #encarga-vehiculo #ord-step-3 .from-amber-950\/45 p {
  color: #E2E8F0 !important;
}

/* ==========================================================================
   MOTOR DE TARJETAS 3D ELEGANTES (CERRADAS Y ABIERTAS) + GALERÍA MULTIFOTO
   ========================================================================== */

#vehicles-grid {
  perspective: 1400px;
}

.vehicle-card-3d {
  position: relative;
  transform-style: preserve-3d;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  box-shadow:
    0 14px 34px -8px rgba(0, 0, 0, 0.65),
    0 4px 12px rgba(212, 175, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
  will-change: transform;
}

.vehicle-card-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    550px circle at var(--mouse-x, 50%) var(--mouse-y, 20%),
    rgba(212, 175, 55, 0.14),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.vehicle-card-3d:hover::before {
  opacity: 1;
}

.vehicle-card-3d:hover {
  border-color: rgba(250, 204, 21, 0.72) !important;
  box-shadow:
    0 24px 48px -10px rgba(0, 0, 0, 0.8),
    0 0 28px rgba(212, 175, 55, 0.28),
    inset 0 1px 1px rgba(255, 243, 176, 0.35) !important;
}

.card-3d-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 30%, rgba(255, 248, 204, 0.18) 48%, transparent 66%);
  transform: translateX(-110%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.vehicle-card-3d:hover .card-3d-sheen {
  transform: translateX(110%);
}

/* Flechas rápidas en tarjeta cerrada */
.card-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: rgba(10, 13, 18, 0.78);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.card-slide-arrow:hover {
  background: #D4AF37;
  color: #0A0D12;
  border-color: #FFF3B0;
  transform: translateY(-50%) scale(1.12);
}

/* Puntos (Dots) de Galería estilo Mercedes-Benz */
.card-gallery-dot,
.modal-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.65);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.modal-gallery-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.card-gallery-dot:hover,
.modal-gallery-dot:hover {
  background: #FFFFFF;
  transform: scale(1.2);
}

.card-gallery-dot.active-dot,
.modal-gallery-dot.active-dot {
  background: #38BDF8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
  transform: scale(1.22);
}

/* Efecto 3D en la Tarjeta Abierta (Modal de Ficha Técnica) */
@keyframes modal3DReveal {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateX(8deg) translateY(24px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
  }
}

.modal-card-3d {
  animation: modal3DReveal 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow:
    0 30px 70px -12px rgba(0, 0, 0, 0.85),
    0 0 40px rgba(212, 175, 55, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;
}

.modal-photo-stage-3d {
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   CONTRASTE PERFECTO EN MODO DÍA (html.light) PARA TARJETAS Y MODAL ABIERTO
   ========================================================================== */

/* 1. Tarjeta Cerrada 3D en Modo Día */
html.light .vehicle-card-3d {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow:
    0 14px 32px -8px rgba(15, 23, 42, 0.12),
    0 4px 12px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 #FFFFFF !important;
}

html.light .vehicle-card-3d:hover {
  border-color: #B45309 !important;
  box-shadow:
    0 22px 45px -10px rgba(15, 23, 42, 0.18),
    0 0 25px rgba(212, 175, 55, 0.32) !important;
}

html.light .vehicle-card-3d h3 {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light .vehicle-card-3d:hover h3 {
  color: #92400E !important;
}

html.light .card-trim-subtitle {
  color: #B45309 !important;
  font-weight: 800 !important;
}

html.light .card-specs-box {
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html.light .card-specs-box-header {
  border-bottom-color: #CBD5E1 !important;
}

html.light .card-specs-heading {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light .card-location-inline {
  color: #334155 !important;
  font-weight: 700 !important;
}

html.light .card-spec-lbl {
  color: #475569 !important;
  font-weight: 800 !important;
}

html.light .card-spec-val {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light .card-price-main {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light .card-price-sub {
  color: #475569 !important;
  font-weight: 700 !important;
}

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

html.light .card-btn-details {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
}

html.light .card-btn-details:hover {
  background-color: #1E293B !important;
}

/* 2. Tarjeta Abierta (Modal de Ficha Técnica #vehicle-detail-modal) en Modo Día */
html.light #vehicle-detail-modal .modal-card-3d {
  background: #FFFFFF !important;
  border: 2px solid #CBD5E1 !important;
  box-shadow:
    0 30px 65px -12px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(212, 175, 55, 0.35) !important;
}

html.light #vehicle-detail-modal .modal-header-divider,
html.light #vehicle-detail-modal .modal-bottom-section {
  border-color: #CBD5E1 !important;
}

html.light #modal-detail-title {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #modal-detail-trim {
  color: #B45309 !important;
  font-weight: 800 !important;
}

html.light #modal-detail-price {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #modal-detail-monthly {
  color: #047857 !important;
  font-weight: 900 !important;
}

html.light #vehicle-detail-modal .modal-close-pill {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

html.light #vehicle-detail-modal .modal-close-pill:hover {
  background-color: #E2E8F0 !important;
}

/* Tira de Emisiones, Ubicación y VIN en Modo Día */
html.light #vehicle-detail-modal .modal-meta-strip {
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
}

html.light #modal-detail-badge {
  background-color: #EFF6FF !important;
  color: #1E3A8A !important;
  border: 1px solid #93C5FD !important;
  font-weight: 800 !important;
}

html.light #vehicle-detail-modal .modal-loc-text,
html.light #modal-detail-location {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light #modal-detail-vin {
  color: #0F172A !important;
  font-weight: 800 !important;
}

/* Panel Derecho de Características (Estilo Muestra Mercedes-Benz) en Modo Día */
html.light #vehicle-detail-modal .modal-specs-panel {
  background-color: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
}

html.light #vehicle-detail-modal .modal-specs-header {
  border-bottom-color: #CBD5E1 !important;
}

html.light #vehicle-detail-modal .modal-specs-header h4 {
  color: #0F172A !important;
  font-weight: 900 !important;
}

html.light #vehicle-detail-modal .modal-specs-header span {
  background-color: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #F59E0B !important;
}

html.light #vehicle-detail-modal .modal-spec-label {
  color: #1E293B !important;
  font-weight: 800 !important;
}

html.light #vehicle-detail-modal .modal-spec-value {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* Descripción y Equipamiento Destacado en Modo Día */
html.light #vehicle-detail-modal #modal-detail-desc,
html.light #vehicle-detail-modal .modal-desc-text {
  color: #0F172A !important;
  font-weight: 500 !important;
}

html.light #vehicle-detail-modal .modal-feature-item {
  background-color: #F8FAFC !important;
  border: 1.5px solid #94A3B8 !important;
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light #vehicle-detail-modal .modal-feature-item span {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light #vehicle-detail-modal .modal-feature-item svg {
  color: #B45309 !important;
}

/* ==========================================================================
   CALIBRACIÓN PERFECTA PARA PANTALLAS MÓVILES (320px - 640px)
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

@media screen and (max-width: 640px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Contenedor de Video de Fondo calibrado a altura móvil */
  #hero-video-container {
    height: 760px !important;
    max-width: 100vw !important;
  }

  /* Botón de tema más compacto en barra superior móvil para encajar incluso en 320px */
  header .theme-switch-slim {
    width: 44px;
    height: 24px;
    padding: 0 4px;
  }

  header .theme-switch-slim .knob {
    width: 18px;
    height: 18px;
    top: 2px;
    left: 2px;
  }

  html.light header .theme-switch-slim .knob,
  header .theme-switch-slim.light-active .knob {
    transform: translateX(20px) !important;
  }

  /* Menú desplegable de idioma ajustado dentro de la pantalla móvil */
  #lang-dropdown {
    right: -8px;
    width: 175px;
    max-width: calc(100vw - 24px);
  }

  /* Toast de idioma centrado en móvil */
  #lang-toast-notification {
    top: 72px;
    right: 12px;
    left: auto;
    max-width: calc(100vw - 24px);
    padding: 6px 14px;
    font-size: 11px;
  }

  /* Tarjetas 3D de vehículos en móvil: sin desbordamiento de perspectiva */
  #vehicles-grid {
    perspective: 1000px;
  }

  .vehicle-card-3d {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Evitar que códigos VIN, emails o referencias largas rompan el ancho móvil */
  #modal-detail-vin,
  #res-ref-code,
  #ord-res-code,
  #cert-ref-code {
    word-break: break-all;
  }

  /* Modales perfectamente encajados en el alto y ancho del móvil */
  #vehicle-detail-modal > div,
  #reservation-modal > div,
  #compare-modal > div,
  #appraisal-cert-modal > div {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Pantallas ultra-compactas (320px - 365px como iPhone SE / Galaxy S Mini) */
@media screen and (max-width: 365px) {
  header .brand-title-text {
    font-size: 14px !important;
  }

  header .theme-logo {
    height: 34px !important;
  }

  #lang-selector-btn {
    padding: 5px 7px !important;
  }
}