/**
 * ============================================
 * DARK MODE FIXES - Transfer Express v7
 * Archivo unificado de correcciones de contraste
 * ============================================
 *
 * Este archivo DEBE cargarse DESPUES de style.css
 * para que las sobreescrituras funcionen correctamente.
 *
 * Corrige:
 * 1. Fondos pastel claros que no se adaptan a dark mode
 * 2. Texto oscuro sobre fondos oscuros
 * 3. Inline styles hardcodeados en HTML
 * 4. stat-counter con background-clip:text
 * 5. Selectores que usaban [data-theme="dark"] (corregido a body.dark-mode)
 *
 * Consolida: theme-fixes.css + contrast-fixes.css + forced-contrast.css
 */

/* ============================================
   1. BOTONES - Garantizar contraste en ambos modos
   ============================================ */

.btn-primary,
a.btn-primary {
    background: var(--gradiente-primario) !important;
    color: #ffffff !important;
    border: none !important;
}

.btn-primary:hover,
a.btn-primary:hover,
a.btn:hover,
a.btn-large:hover {
    filter: brightness(1.1);
    color: #FFF5E1 !important;
}

.btn-secondary,
a.btn-secondary {
    background: var(--gradiente-secundario) !important;
    color: #ffffff !important;
    border: none !important;
}

.btn-secondary:hover,
a.btn-secondary:hover {
    filter: brightness(1.1);
    color: #FFF5E1 !important;
}

.btn-outline {
    background: transparent !important;
    color: var(--color-primario) !important;
    border: 2px solid var(--color-primario) !important;
}

.btn-outline:hover {
    background: var(--color-primario) !important;
    color: #ffffff !important;
}

.btn-whatsapp {
    background: #25D366 !important;
    color: #ffffff !important;
}

.btn-whatsapp:hover {
    background: #20ba5a !important;
    color: #ffffff !important;
}

/* Botones en fondos oscuros (gradientes, hero, CTA) */
.btn-on-dark {
    background: #ffffff !important;
    color: #0d47a1 !important;
}

.btn-on-dark:hover {
    background: #f0f0f0 !important;
    color: #0d47a1 !important;
}

body.dark-mode .btn-on-dark {
    background: #ffffff !important;
    color: #0d47a1 !important;
}

/* ============================================
   2. TARJETAS Y CONTENEDORES
   ============================================ */

.card,
.testimonial-card,
.pricing-card,
.service-card,
.vehicle-card,
.info-card,
.benefit-card,
.plan-card,
.step-card,
.faq-item,
.detail-box,
.airport-card,
.service-detail-card {
    background: var(--color-tarjeta-fondo) !important;
    color: var(--color-texto) !important;
}

.card h2, .card h3, .card h4,
.info-card h3,
.benefit-card h3,
.plan-card h3,
.step-card h3,
.faq-item h3,
.detail-box h2,
.airport-card h3,
.service-detail-card h3 {
    color: var(--color-primario) !important;
}

.card p,
.testimonial-card p,
.pricing-card p,
.benefit-card p,
.step-card p,
.faq-item p {
    color: var(--color-texto) !important;
}

/* ============================================
   3. HEADERS CON GRADIENTE - Siempre texto blanco
   ============================================ */

.contact-header,
.about-header,
.testimonials-header,
.service-page-header,
.service-hero,
.blog-hero,
.services-header {
    color: #ffffff !important;
}

.contact-header h1, .contact-header h2, .contact-header p,
.about-header h1, .about-header p,
.testimonials-header h1, .testimonials-header p,
.service-page-header h1, .service-page-header p,
.service-hero h1, .service-hero .subtitle,
.blog-hero h1, .blog-hero p,
.services-header h1, .services-header p {
    color: #ffffff !important;
}

/* CTA banners */
.cta-banner,
.gradient-banner,
.cta-section {
    color: #ffffff !important;
}

.cta-banner h2, .cta-banner h3, .cta-banner p,
.gradient-banner h2, .gradient-banner h3, .gradient-banner p,
.cta-section h2, .cta-section p {
    color: #ffffff !important;
}

/* ============================================
   4. FORMULARIOS
   ============================================ */

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--color-input-bg, var(--color-tarjeta-fondo)) !important;
    color: var(--color-texto) !important;
    border-color: var(--color-input-border, var(--color-borde)) !important;
}

.form-group label {
    color: var(--color-texto-fuerte) !important;
}

/* ============================================
   5. FOOTER
   ============================================ */

.footer {
    background: var(--color-cabecera-fondo) !important;
    color: var(--color-texto) !important;
}

.footer h4 {
    color: var(--color-primario) !important;
}

.footer a {
    color: var(--color-texto) !important;
}

.footer a:hover {
    color: var(--color-primario) !important;
}

/* ============================================
   6. STATS SECTION - Texto visible en ambos modos
   ============================================ */

/* Stats en sección con gradiente oscuro */
.stat-counter,
.stats .stat-counter {
    color: #FFF5E1 !important;
    -webkit-text-fill-color: #FFF5E1 !important;
    background: none !important;
}

.stat-item p,
.stats .stat-item p {
    color: #ffffff !important;
}

body.dark-mode .stat-counter,
body.dark-mode .stats .stat-counter {
    color: #FFF5E1 !important;
    -webkit-text-fill-color: #FFF5E1 !important;
    background: none !important;
}

body.dark-mode .stat-item p,
body.dark-mode .stats .stat-item p {
    color: #ffffff !important;
}

/* ============================================
   7. DARK MODE - Fondos pastel -> fondos oscuros
   ============================================
   Estos overrides convierten fondos claros pastel
   en fondos oscuros apropiados para dark mode.
   ============================================ */

/* --- Fondos azules claros --- */
body.dark-mode [style*="background: #e3f2fd"],
body.dark-mode [style*="background:#e3f2fd"],
body.dark-mode [style*="background: #bbdefb"],
body.dark-mode [style*="background: #dbeafe"],
body.dark-mode [style*="background: #f0f8ff"],
body.dark-mode [style*="background: #f8f9ff"] {
    background: rgba(92, 156, 230, 0.12) !important;
    color: var(--color-texto) !important;
}

/* --- Fondos verdes claros --- */
body.dark-mode [style*="background: #e8f5e9"],
body.dark-mode [style*="background:#e8f5e9"],
body.dark-mode [style*="background: #c8e6c9"],
body.dark-mode [style*="background: #a5d6a7"],
body.dark-mode [style*="background: #f0fdf4"],
body.dark-mode [style*="background: #f1f8e9"] {
    background: rgba(129, 199, 132, 0.12) !important;
    color: var(--color-texto) !important;
}

/* --- Fondos naranjas/amarillos claros --- */
body.dark-mode [style*="background: #fff3e0"],
body.dark-mode [style*="background:#fff3e0"],
body.dark-mode [style*="background: #ffecb3"],
body.dark-mode [style*="background: #fffde7"],
body.dark-mode [style*="background: #fff9c4"],
body.dark-mode [style*="background: #fff3cd"] {
    background: rgba(255, 183, 77, 0.12) !important;
    color: var(--color-texto) !important;
}

/* --- Fondos rojos claros --- */
body.dark-mode [style*="background: #ffebee"],
body.dark-mode [style*="background:#ffebee"],
body.dark-mode [style*="background: #fef2f2"] {
    background: rgba(229, 115, 115, 0.12) !important;
    color: var(--color-texto) !important;
}

/* --- Fondos grises claros --- */
body.dark-mode [style*="background: #f5f5f5"],
body.dark-mode [style*="background:#f5f5f5"],
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background: #fafafa"],
body.dark-mode [style*="background: #eeeeee"],
body.dark-mode [style*="background: #e0e0e0"] {
    background: var(--color-gris-claro, #2a2a2a) !important;
    color: var(--color-texto) !important;
}

/* --- Fondos blancos puros --- */
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color: #fff"] {
    background: var(--color-tarjeta-fondo, #1e1e1e) !important;
    color: var(--color-texto) !important;
}

/* --- Fondos blancos semi-transparentes --- */
body.dark-mode [style*="background: rgba(255,255,255,0.8)"],
body.dark-mode [style*="background: rgba(255,255,255,0.15)"],
body.dark-mode [style*="background: rgba(255, 255, 255"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--color-texto) !important;
}

/* --- Fondos con gradientes claros --- */
body.dark-mode [style*="background: linear-gradient(135deg, #e8f5e9"],
body.dark-mode [style*="background: linear-gradient(135deg, #e3f2fd"],
body.dark-mode [style*="background: linear-gradient(135deg, #f5f5f5"],
body.dark-mode [style*="background: linear-gradient(135deg, #f8f9ff"] {
    background: var(--color-gris-claro, #2a2a2a) !important;
    color: var(--color-texto) !important;
}

/* ============================================
   8. DARK MODE - Texto que necesita aclararse
   ============================================ */

/* Texto oscuro que se vuelve invisible en dark mode */
body.dark-mode [style*="color: #0d47a1"],
body.dark-mode [style*="color:#0d47a1"] {
    color: var(--color-primario) !important;
}

body.dark-mode [style*="color: #1976d2"],
body.dark-mode [style*="color:#1976d2"] {
    color: var(--color-primario) !important;
}

body.dark-mode [style*="color: #2e7d32"],
body.dark-mode [style*="color:#2e7d32"] {
    color: var(--color-text-success, #81c784) !important;
}

body.dark-mode [style*="color: #1b5e20"] {
    color: var(--color-text-success, #81c784) !important;
}

body.dark-mode [style*="color: #c62828"],
body.dark-mode [style*="color:#c62828"] {
    color: var(--color-text-danger, #e57373) !important;
}

body.dark-mode [style*="color: #856404"] {
    color: var(--color-text-warning, #ffb74d) !important;
}

/* Grises medios -> mas claros en dark mode */
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"] {
    color: var(--color-texto-secundario, #c0c0c0) !important;
}

body.dark-mode [style*="color: #757575"],
body.dark-mode [style*="color:#757575"] {
    color: var(--color-texto-muted, #a8a8a8) !important;
}

body.dark-mode [style*="color: #999"],
body.dark-mode [style*="color:#999"] {
    color: var(--color-texto-secundario, #c0c0c0) !important;
}

body.dark-mode [style*="color: #888"],
body.dark-mode [style*="color:#888"] {
    color: var(--color-texto-secundario, #c0c0c0) !important;
}

body.dark-mode [style*="color: #212121"],
body.dark-mode [style*="color:#212121"] {
    color: var(--color-texto, #e8e8e8) !important;
}

/* ============================================
   9. DARK MODE - Elementos hijos en fondos convertidos
   ============================================ */

/* Headings dentro de fondos pastel convertidos */
body.dark-mode [style*="background: #e3f2fd"] h1,
body.dark-mode [style*="background: #e3f2fd"] h2,
body.dark-mode [style*="background: #e3f2fd"] h3,
body.dark-mode [style*="background: #e3f2fd"] h4,
body.dark-mode [style*="background: #e8f5e9"] h1,
body.dark-mode [style*="background: #e8f5e9"] h2,
body.dark-mode [style*="background: #e8f5e9"] h3,
body.dark-mode [style*="background: #e8f5e9"] h4,
body.dark-mode [style*="background: #fff3e0"] h3,
body.dark-mode [style*="background: #fff3e0"] h4,
body.dark-mode [style*="background: #f5f5f5"] h3,
body.dark-mode [style*="background: #f5f5f5"] h4,
body.dark-mode [style*="background: #f8f9fa"] h3,
body.dark-mode [style*="background: #f8f9fa"] h4 {
    color: var(--color-texto-fuerte) !important;
}

/* Paragraphs dentro de fondos pastel convertidos */
body.dark-mode [style*="background: #e3f2fd"] p,
body.dark-mode [style*="background: #e3f2fd"] span,
body.dark-mode [style*="background: #e3f2fd"] div,
body.dark-mode [style*="background: #e8f5e9"] p,
body.dark-mode [style*="background: #e8f5e9"] span,
body.dark-mode [style*="background: #e8f5e9"] div,
body.dark-mode [style*="background: #fff3e0"] p,
body.dark-mode [style*="background: #fff3e0"] span,
body.dark-mode [style*="background: #f5f5f5"] p,
body.dark-mode [style*="background: #f5f5f5"] span,
body.dark-mode [style*="background: #f8f9fa"] p,
body.dark-mode [style*="background: #f8f9fa"] span,
body.dark-mode [style*="background: #fafafa"] p,
body.dark-mode [style*="background: #fafafa"] span {
    color: var(--color-texto) !important;
}

/* Links en fondos convertidos */
body.dark-mode [style*="background: #e3f2fd"] a,
body.dark-mode [style*="background: #e8f5e9"] a,
body.dark-mode [style*="background: #fff3e0"] a,
body.dark-mode [style*="background: #f5f5f5"] a,
body.dark-mode [style*="background: #f8f9fa"] a {
    color: var(--color-primario) !important;
}

/* ============================================
   10. DARK MODE - Tablas
   ============================================ */

body.dark-mode table {
    color: var(--color-texto);
}

body.dark-mode th {
    color: #ffffff;
}

body.dark-mode td {
    color: var(--color-texto);
}

/* Filas alternas en dark mode */
body.dark-mode [style*="background: ${"] {
    background: var(--color-gris-claro) !important;
}

body.dark-mode tr:nth-child(even) {
    background: var(--color-gris-claro);
}

/* ============================================
   11. DARK MODE - Selected Points Info (Mapa)
   ============================================ */

body.dark-mode .selected-points-info,
body.dark-mode #selected-points-info {
    background: rgba(129, 199, 132, 0.15) !important;
    color: var(--color-texto) !important;
    border-color: var(--color-acento) !important;
}

body.dark-mode .selected-points-info *,
body.dark-mode #selected-points-info * {
    color: var(--color-texto) !important;
}

body.dark-mode .selected-points-info h4,
body.dark-mode #selected-points-info h4 {
    color: var(--color-text-success, #81c784) !important;
}

body.dark-mode .selected-points-info button,
body.dark-mode #selected-points-info button {
    color: var(--color-primario) !important;
}

/* ============================================
   12. DARK MODE - Error containers
   ============================================ */

body.dark-mode .error-container {
    background: rgba(185, 28, 28, 0.1) !important;
    border-color: rgba(185, 28, 28, 0.3) !important;
}

body.dark-mode .error-container p {
    color: #fca5a5 !important;
}

body.dark-mode .error-message {
    background: rgba(185, 28, 28, 0.1) !important;
}

body.dark-mode .error-message p {
    color: var(--color-text-danger, #e57373) !important;
}

/* ============================================
   13. DARK MODE - Noscript warning
   ============================================ */

body.dark-mode noscript [style*="background: #fff3cd"] {
    background: rgba(255, 183, 77, 0.15) !important;
    color: var(--color-text-warning, #ffb74d) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

/* ============================================
   14. DARK MODE - Admin pricing specific fixes
   ============================================ */

/* Sync indicator */
body.dark-mode [style*="background: #f5f5f5"][style*="color: #757575"] {
    background: var(--color-gris-claro, #2a2a2a) !important;
    color: var(--color-texto-muted, #a8a8a8) !important;
}

/* Config cards */
body.dark-mode .config-card {
    background: var(--color-tarjeta-fondo) !important;
    color: var(--color-texto) !important;
}

/* Card body */
body.dark-mode .card-body {
    color: var(--color-texto) !important;
}

body.dark-mode .card-body h1,
body.dark-mode .card-body h2,
body.dark-mode .card-body h3,
body.dark-mode .card-body h4,
body.dark-mode .card-body h5 {
    color: var(--color-texto-fuerte) !important;
}

body.dark-mode .card-body p,
body.dark-mode .card-body span,
body.dark-mode .card-body div {
    color: var(--color-texto) !important;
}

/* ============================================
   15. DARK MODE - Badges y status indicators
   ============================================ */

body.dark-mode .badge-success {
    background: rgba(129, 199, 132, 0.15) !important;
    color: var(--color-success) !important;
    border-color: rgba(129, 199, 132, 0.3) !important;
}

body.dark-mode .badge-warning {
    background: rgba(255, 183, 77, 0.15) !important;
    color: var(--color-warning) !important;
    border-color: rgba(255, 183, 77, 0.3) !important;
}

body.dark-mode .badge-primary {
    background: rgba(92, 156, 230, 0.15) !important;
    color: var(--color-primario) !important;
    border-color: rgba(92, 156, 230, 0.3) !important;
}

/* ============================================
   16. DARK MODE - Breadcrumb
   ============================================ */

body.dark-mode .breadcrumb {
    background: var(--color-gris-claro) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .breadcrumb a {
    color: var(--color-primario) !important;
}

body.dark-mode .breadcrumb span {
    color: var(--color-texto-secundario) !important;
}

/* ============================================
   17. DARK MODE - Trust section
   ============================================ */

body.dark-mode .trust-section {
    background: var(--color-gris-claro) !important;
}

body.dark-mode .trust-item {
    background: var(--color-tarjeta-fondo) !important;
    color: var(--color-texto) !important;
}

/* ============================================
   18. DARK MODE - Quote validity / warning boxes
   ============================================ */

body.dark-mode .quote-validity {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
}

body.dark-mode .round-trip-notice {
    background: rgba(255, 193, 7, 0.1) !important;
}

/* ============================================
   19. DARK MODE - Map containers
   ============================================ */

body.dark-mode [style*="background: #e0e0e0"][style*="height"] {
    background: var(--color-gris-claro, #2a2a2a) !important;
}

/* ============================================
   20. CLASES UTILITARIAS
   ============================================ */

/* Fondos semánticos */
.bg-white { background-color: #ffffff !important; }
body.dark-mode .bg-white { background-color: var(--color-tarjeta-fondo) !important; }

.bg-card { background: var(--color-tarjeta-fondo) !important; }
.bg-gray-light { background: var(--color-gris-claro) !important; }
.bg-primary { background: var(--gradiente-primario) !important; }
.bg-secondary { background: var(--gradiente-secundario) !important; }

.bg-success-light { background: var(--color-success-light, #e8f5e9) !important; }
.bg-info-light { background: var(--color-info-light, #e3f2fd) !important; }
.bg-warning-light { background: var(--color-warning-light, #fff3e0) !important; }
.bg-error-light { background: var(--color-error-light, #ffebee) !important; }

/* Textos semánticos */
.text-white { color: #ffffff !important; }
.text-primary { color: var(--color-primario) !important; }
.text-strong { color: var(--color-texto-fuerte) !important; }
.text-muted { color: var(--color-texto-secundario) !important; }
.text-success { color: var(--color-text-success, #2e7d32) !important; }
body.dark-mode .text-success { color: var(--color-text-success, #81c784) !important; }

/* Forzar contraste */
.force-white-text, .force-white-text * { color: #ffffff !important; }
.force-dark-text, .force-dark-text * { color: #212121 !important; }

/* ============================================
   21. ACCESIBILIDAD - Focus visible
   ============================================ */

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primario) !important;
    outline-offset: 2px !important;
}

/* Disabled states */
.btn:disabled,
.btn[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5) !important;
}

/* ============================================
   22. DARK MODE - Stop items (calculadora multi-stop)
   ============================================ */

body.dark-mode .stop-item select {
    background: var(--color-input-bg, #2a2a2a) !important;
    color: var(--color-texto) !important;
    border-color: var(--color-input-border, #404040) !important;
}

body.dark-mode .stop-item .remove-stop-btn {
    background: rgba(229, 115, 115, 0.15) !important;
    color: var(--color-text-danger, #e57373) !important;
}

body.dark-mode .stop-item .remove-stop-btn:hover {
    background: #f44336 !important;
    color: white !important;
}

/* ============================================
   23. DARK MODE - Pricing table
   ============================================ */

body.dark-mode .pricing-table {
    background: var(--color-tarjeta-fondo) !important;
}

body.dark-mode .pricing-table td {
    color: var(--color-texto) !important;
    border-color: var(--color-borde) !important;
}

body.dark-mode .pricing-table .price {
    color: var(--color-primario) !important;
}

/* ============================================
   24. RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary {
        width: 100%;
        min-width: auto;
    }
}

/* ============================================
   25. DARK MODE - Status badges (aeropuertos.html)
   ============================================ */

body.dark-mode .status-active {
    background: rgba(129, 199, 132, 0.15) !important;
    color: var(--color-text-success, #81c784) !important;
}

body.dark-mode .status-works {
    background: rgba(255, 183, 77, 0.15) !important;
    color: var(--color-text-warning, #ffb74d) !important;
}

body.dark-mode .status-recommended {
    background: rgba(92, 156, 230, 0.15) !important;
    color: var(--color-primario) !important;
}

/* ============================================
   26. DARK MODE - Error elements (calculator-v4.css overrides)
   ============================================ */

body.dark-mode .error-message {
    background: rgba(185, 28, 28, 0.12) !important;
    border-color: var(--color-error, #e57373) !important;
}

body.dark-mode .error-message p {
    color: var(--color-text-danger, #e57373) !important;
}

body.dark-mode .error-container {
    background: rgba(185, 28, 28, 0.1) !important;
    border-color: rgba(185, 28, 28, 0.3) !important;
}

body.dark-mode .error-container p {
    color: #fca5a5 !important;
}

/* ============================================
   27. DARK MODE - Stop item elements
   ============================================ */

body.dark-mode .stop-item select {
    background: var(--color-input-bg, #2a2a2a) !important;
    color: var(--color-texto, #e8e8e8) !important;
}

body.dark-mode .stop-item .remove-stop-btn {
    background: rgba(229, 115, 115, 0.15) !important;
    color: var(--color-text-danger, #e57373) !important;
}

body.dark-mode .stop-item .remove-stop-btn:hover {
    background: #f44336 !important;
    color: #ffffff !important;
}

/* ============================================
   28. DARK MODE - JS-generated content overrides
   ============================================
   These catch dynamically generated HTML from
   calculator-v5.js and admin-pricing.html scripts
   ============================================ */

/* Info windows and popups (Google Maps) */
body.dark-mode .gm-style-iw,
body.dark-mode .gm-style-iw-d {
    background: var(--color-tarjeta-fondo, #1e1e1e) !important;
    color: var(--color-texto, #e8e8e8) !important;
}

/* Marker info content */
body.dark-mode [style*="background: white"][style*="border-radius"] {
    background: var(--color-tarjeta-fondo, #1e1e1e) !important;
    color: var(--color-texto, #e8e8e8) !important;
}

body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"] {
    color: var(--color-texto, #e8e8e8) !important;
}

body.dark-mode [style*="color: #888"],
body.dark-mode [style*="color:#888"] {
    color: var(--color-texto-muted, #a8a8a8) !important;
}

body.dark-mode [style*="border: 1px solid #ddd"],
body.dark-mode [style*="border: 1px solid #0d47a1"] {
    border-color: var(--color-borde, #404040) !important;
}

/* Alternating row backgrounds in JS */
body.dark-mode [style*="background: #fff"] {
    background: var(--color-tarjeta-fondo, #1e1e1e) !important;
}

/* JS-generated status indicators */
body.dark-mode [style*="background: #c8e6c9"],
body.dark-mode [style*="background: #ffcdd2"] {
    background: rgba(129, 199, 132, 0.12) !important;
}

/* Price/red/green conditional colors */
body.dark-mode [style*="color: #f44336"],
body.dark-mode [style*="color:#f44336"] {
    color: var(--color-text-danger, #e57373) !important;
}

body.dark-mode [style*="color: #4caf50"],
body.dark-mode [style*="color:#4caf50"],
body.dark-mode [style*="color: #4CAF50"] {
    color: var(--color-text-success, #81c784) !important;
}

body.dark-mode [style*="color: #ff9800"],
body.dark-mode [style*="color:#ff9800"] {
    color: var(--color-text-warning, #ffb74d) !important;
}

body.dark-mode [style*="color: #e65100"],
body.dark-mode [style*="color:#e65100"],
body.dark-mode [style*="color: #E65100"] {
    color: var(--color-text-warning, #ffb74d) !important;
}

body.dark-mode [style*="color: #1976d2"],
body.dark-mode [style*="color:#1976d2"] {
    color: var(--color-primario) !important;
}

body.dark-mode [style*="color: #1b5e20"] {
    color: var(--color-text-success, #81c784) !important;
}

body.dark-mode [style*="color: #b91c1c"],
body.dark-mode [style*="color:#b91c1c"] {
    color: var(--color-text-danger, #e57373) !important;
}

/* Gradient backgrounds in admin */
body.dark-mode [style*="background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb"] {
    background: rgba(92, 156, 230, 0.1) !important;
}

body.dark-mode [style*="background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee"] {
    background: var(--color-gris-claro, #2a2a2a) !important;
}

/* Border colors (dynamic) */
body.dark-mode [style*="border: 1px solid #ffcdd2"],
body.dark-mode [style*="border: 1px solid #c8e6c9"] {
    border-color: var(--color-borde, #404040) !important;
}

body.dark-mode [style*="border: 1px solid #ddd"] {
    border-color: var(--color-borde, #404040) !important;
}

/* ============================================
   29. DARK MODE - Additional admin/JS color overrides
   ============================================ */

/* #ef5350 text (error variant) */
body.dark-mode [style*="color: #ef5350"],
body.dark-mode [style*="color:#ef5350"] {
    color: var(--color-text-danger, #e57373) !important;
}

/* #26A69A text (teal accent - case sensitive) */
body.dark-mode [style*="color: #26A69A"],
body.dark-mode [style*="color: #26a69a"],
body.dark-mode [style*="color:#26A69A"],
body.dark-mode [style*="color:#26a69a"] {
    color: var(--color-acento, #4dd0e1) !important;
}

/* #ff6f00 background (orange badge/button) */
body.dark-mode [style*="background: #ff6f00"],
body.dark-mode [style*="background:#ff6f00"] {
    background: var(--color-secundario, #ff9a44) !important;
    color: #ffffff !important;
}

/* #4CAF50 variants (case-insensitive coverage) */
body.dark-mode [style*="color: #4CAF50"],
body.dark-mode [style*="color:#4CAF50"] {
    color: var(--color-text-success, #81c784) !important;
}

body.dark-mode [style*="background: #4CAF50"],
body.dark-mode [style*="background:#4CAF50"],
body.dark-mode [style*="background: #4caf50"],
body.dark-mode [style*="background:#4caf50"] {
    background: rgba(129, 199, 132, 0.2) !important;
    color: #ffffff !important;
}

/* #2196F3 (blue tier color) */
body.dark-mode [style*="color: #2196F3"],
body.dark-mode [style*="color:#2196F3"],
body.dark-mode [style*="color: #2196f3"] {
    color: var(--color-primario, #5c9ce6) !important;
}

/* #9C27B0 (purple tier color) */
body.dark-mode [style*="color: #9C27B0"],
body.dark-mode [style*="color:#9C27B0"],
body.dark-mode [style*="color: #9c27b0"] {
    color: #ce93d8 !important;
}

/* #7cb342 background (green step in admin flow) */
body.dark-mode [style*="background: #7cb342"],
body.dark-mode [style*="background:#7cb342"] {
    background: #558b2f !important;
    color: #ffffff !important;
}

/* #f4511e background (red-orange step in admin flow) */
body.dark-mode [style*="background: #f4511e"],
body.dark-mode [style*="background:#f4511e"] {
    background: #d84315 !important;
    color: #ffffff !important;
}

/* #26a69a background (teal step in admin flow) */
body.dark-mode [style*="background: #26a69a"],
body.dark-mode [style*="background:#26a69a"] {
    background: #00897b !important;
    color: #ffffff !important;
}

/* border-left-color overrides */
body.dark-mode [style*="border-left-color: #1976d2"] {
    border-left-color: var(--color-primario, #5c9ce6) !important;
}

/* Admin CSS class overrides */
body.dark-mode .error-msg {
    background: rgba(185, 28, 28, 0.12) !important;
    color: var(--color-text-danger, #e57373) !important;
}

body.dark-mode .success-msg {
    background: rgba(129, 199, 132, 0.12) !important;
    color: var(--color-text-success, #81c784) !important;
}

body.dark-mode .save-btn:disabled {
    background: var(--color-gris-medio, #3d3d3d) !important;
    color: var(--color-texto-muted, #a8a8a8) !important;
}

/* ============================================
   30. PREFERS-COLOR-SCHEME (auto dark mode)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .stat-counter,
    .stats .stat-counter {
        -webkit-text-fill-color: currentColor;
    }
}

/* ============================================
   31. DARK MODE - Secciones con fondo claro
   Audit: 2026-04-04 via Playwright WCAG check
   ============================================ */
body.dark-mode .services { background: var(--color-fondo) !important; }
body.dark-mode .service-card { background: var(--color-tarjeta-fondo) !important; border-color: var(--color-borde) !important; }
body.dark-mode .service-card h3 { color: var(--color-texto-fuerte) !important; }
body.dark-mode .service-card p { color: var(--color-texto) !important; }
body.dark-mode .service-card .btn { color: #fff !important; }
body.dark-mode .service-card .price-tag,
body.dark-mode .service-card [style*="background"] { background: var(--color-gris-claro) !important; color: var(--color-texto-fuerte) !important; }
body.dark-mode .stats { background-color: #0a1628 !important; }
body.dark-mode .stats .stat-label, body.dark-mode .stats p { color: rgba(255,255,255,0.85) !important; }
body.dark-mode .faq-section { background: var(--color-fondo) !important; }
body.dark-mode .faq-item, body.dark-mode details { background: var(--color-tarjeta-fondo) !important; border-color: var(--color-borde) !important; }
body.dark-mode .faq-item summary, body.dark-mode details summary { color: var(--color-texto-fuerte) !important; }
body.dark-mode .faq-item summary h3, body.dark-mode details summary h3 { color: var(--color-primario) !important; }
body.dark-mode .faq-item p, body.dark-mode details p { color: var(--color-texto) !important; }
body.dark-mode .how-it-works { background: var(--color-fondo) !important; }
body.dark-mode .how-it-works h3, body.dark-mode .how-it-works h4 { color: var(--color-texto-fuerte) !important; }
body.dark-mode .how-it-works p { color: var(--color-texto-muted) !important; }
body.dark-mode .quote-section { background: var(--color-fondo) !important; }
body.dark-mode .quote-section label { color: var(--color-texto) !important; }
body.dark-mode footer { background: #0d1117 !important; }
body.dark-mode footer a { color: var(--color-texto) !important; }
body.dark-mode footer a:hover { color: var(--color-primario) !important; }
body.dark-mode footer p, body.dark-mode footer span { color: var(--color-texto-muted) !important; }
body.dark-mode footer h4, body.dark-mode footer h3 { color: var(--color-texto-fuerte) !important; }
body.dark-mode .trust-badge, body.dark-mode .footer-badge { background: rgba(255,255,255,0.08) !important; color: var(--color-texto-muted) !important; }
body.dark-mode [style*="text-align: center"] h2 { color: var(--color-primario) !important; }
body.dark-mode [style*="text-align: center"] p { color: var(--color-texto) !important; }
body.dark-mode .header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) !important; }

/* ============================================
   32. WWWv2 - Image Heroes & New Components
   ============================================ */

/* Image hero overlay darker in dark mode */
body.dark-mode .hero--image::before {
    background: linear-gradient(
        135deg,
        rgba(2, 6, 15, 0.92) 0%,
        rgba(6, 30, 70, 0.85) 50%,
        rgba(2, 6, 15, 0.90) 100%
    ) !important;
}

/* Destination card images */
body.dark-mode .destination-card-img {
    border-bottom: 1px solid var(--color-borde) !important;
    filter: brightness(0.9);
}
body.dark-mode .destination-card--visual {
    background: var(--color-tarjeta-fondo) !important;
    border: 1px solid var(--color-borde) !important;
}
body.dark-mode .destination-card--visual .card-body h3 {
    color: var(--color-primario) !important;
}
body.dark-mode .destination-card--visual .card-body p {
    color: var(--color-texto-muted) !important;
}

/* Pricing vehicle cards */
body.dark-mode .pricing-vehicle-card {
    background: var(--color-tarjeta-fondo) !important;
    border-color: var(--color-borde) !important;
}
body.dark-mode .pricing-vehicle-card h3 {
    color: var(--color-primario) !important;
}
body.dark-mode .pricing-vehicle-card .vehicle-capacity,
body.dark-mode .pricing-vehicle-card .vehicle-from-label,
body.dark-mode .pricing-vehicle-card .text-muted {
    color: var(--color-texto-muted) !important;
}
body.dark-mode .pricing-vehicle-card .vehicle-from-price {
    color: var(--color-secundario) !important;
}

/* Pricing table dark mode */
body.dark-mode .pricing-table-wrapper {
    border: 1px solid var(--color-borde) !important;
}
body.dark-mode .pricing-table {
    background: var(--color-tarjeta-fondo) !important;
}
body.dark-mode .pricing-table th {
    background: rgba(13, 71, 161, 0.3) !important;
    color: var(--color-texto-fuerte) !important;
}
body.dark-mode .pricing-table td {
    border-color: var(--color-borde) !important;
    color: var(--color-texto) !important;
}
body.dark-mode .pricing-table tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}
body.dark-mode .pricing-table .price {
    color: var(--color-secundario) !important;
}

/* Pricing includes/excludes */
body.dark-mode .pricing-includes .includes-card {
    background: var(--color-tarjeta-fondo) !important;
    border: 1px solid var(--color-borde) !important;
}
body.dark-mode .pricing-includes .includes-card h3 {
    color: var(--color-primario) !important;
}

/* FAQ details/summary dark mode */
body.dark-mode .faq-section details {
    background: var(--color-tarjeta-fondo) !important;
    border: 1px solid var(--color-borde) !important;
}
body.dark-mode .faq-section details summary {
    color: var(--color-primario) !important;
}
body.dark-mode .faq-section details summary:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
body.dark-mode .faq-section details .faq-answer {
    color: var(--color-texto) !important;
}

/* Related destinations dark mode */
body.dark-mode .related-destinations a {
    background: var(--color-tarjeta-fondo) !important;
    color: var(--color-primario) !important;
    border: 1px solid var(--color-borde) !important;
}

/* H2 question border */
body.dark-mode .content-section h2,
body.dark-mode .h2-question {
    border-color: var(--color-secundario) !important;
}

/* Popular/Recommended badges (HTML elements) */
body.dark-mode .pricing-vehicle-card--popular,
body.dark-mode .plan-card--recommended {
    background: var(--color-tarjeta-fondo) !important;
}
body.dark-mode .pricing-vehicle-card--popular h3,
body.dark-mode .plan-card--recommended h3 {
    color: var(--color-primario) !important;
}
body.dark-mode .popular-badge {
    color: #ffffff !important;
}