/* ========================================= DARK MODE Se activa cuando tiene la clase .tema-oscuro ========================================= */ /* ── Variables del modo oscuro ───────────────────────────── */ .tema-oscuro { --teal: #2AABB9; --teal-oscuro: #1E8896; --teal-claro: #44C7D8; --teal-muy-oscuro: #0A2E33; --lima: #C5F408; --cian: #44DCF1; --blanco: #FFFFFF; --fondo: #0E1C1F; --fondo-alt: #142428; --texto: #E8F4F6; --texto-suave: #8AADB3; /* Sombras más sutiles en oscuro */ --sombra-suave: 0 2px 12px rgba(0, 0, 0, 0.4); --sombra-media: 0 8px 30px rgba(0, 0, 0, 0.5); --sombra-fuerte: 0 20px 60px rgba(0, 0, 0, 0.6); } /* ── Fondo y texto base ───────────────────────────────────── */ .tema-oscuro body { background: var(--fondo); color: var(--texto); } /* ── Header ──────────────────────────────────────────────── */ .tema-oscuro .site-header { background: linear-gradient(135deg, #071214 0%, #0E2428 100%); border-bottom-color: rgba(44, 171, 185, 0.15); } .tema-oscuro .frutos { background: rgba(10, 46, 51, 0.9); border-bottom-color: rgba(44, 171, 185, 0.1); } /* ── Nav ─────────────────────────────────────────────────── */ .tema-oscuro .nav a { color: rgba(232, 244, 246, 0.85); } .tema-oscuro .nav a:hover { color: var(--lima); } .tema-oscuro .nav a.nav-cta { background: var(--teal); color: white; } /* Menú móvil desplegado */ .tema-oscuro .nav.nav--abierto { background: #0E1C1F; border-top-color: rgba(44, 171, 185, 0.15); } /* ── Hero ────────────────────────────────────────────────── */ .tema-oscuro .hero { background: linear-gradient(135deg, #071214 0%, #0E2428 60%, #122C30 100%); } /* ── Secciones ───────────────────────────────────────────── */ .tema-oscuro .seccion { background: var(--fondo); } .tema-oscuro .seccion:nth-child(even), .tema-oscuro .seccion--intro-transporte, .tema-oscuro .seccion--mapa-transporte, .tema-oscuro .seccion--como-llegar { background: var(--fondo-alt); } /* ── Cards ───────────────────────────────────────────────── */ .tema-oscuro .parada-card, .tema-oscuro .stat-card, .tema-oscuro .faq-item, .tema-oscuro .contenido-contacto { background: #1A2F34; border-color: rgba(44, 171, 185, 0.15); } .tema-oscuro .faq-item.abierto { border-color: rgba(44, 171, 185, 0.3); } /* ── Timeline horarios ───────────────────────────────────── */ .tema-oscuro .timeline-dia { background: #1A2F34; border-color: rgba(44, 171, 185, 0.15); } .tema-oscuro .actividad-card { background: #142428; border-color: rgba(44, 171, 185, 0.1); } /* ── Pills días ──────────────────────────────────────────── */ .tema-oscuro .dia-pill--activo { background: rgba(44, 171, 185, 0.15); border-color: rgba(44, 171, 185, 0.3); } .tema-oscuro .dia-pill--inactivo { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } /* ── Reproductor ─────────────────────────────────────────── */ .tema-oscuro .audio-player { background: linear-gradient(135deg, #071214 0%, #0E2428 100%); border-top-color: rgba(44, 171, 185, 0.2); } /* ── Footer ──────────────────────────────────────────────── */ .tema-oscuro .site-footer { background: #050E10; border-top-color: rgba(44, 171, 185, 0.1); } /* ── Acordeón FAQ ────────────────────────────────────────── */ .tema-oscuro .faq-respuesta-inner { border-top-color: rgba(44, 171, 185, 0.1); } .tema-oscuro .faq-icono { background: rgba(44, 171, 185, 0.1); } /* ── Bloques de contenido legal ──────────────────────────── */ .tema-oscuro .contenido-bloque { border-bottom-color: rgba(44, 171, 185, 0.08); } .tema-oscuro .contenido-fecha { background: rgba(44, 171, 185, 0.07); border-color: rgba(44, 171, 185, 0.15); } .tema-oscuro .contenido-aviso { background: rgba(44, 171, 185, 0.07); } /* ── Dato icono (sección cómo llegar) ───────────────────── */ .tema-oscuro .dato-icono { background: #1A2F34; border-color: rgba(44, 171, 185, 0.15); } /* ── Mapa Leaflet ────────────────────────────────────────── */ .tema-oscuro .mapa-wrapper, .tema-oscuro .como-llegar-mapa { border-color: rgba(44, 171, 185, 0.2); } .tema-oscuro .mapa-leyenda { background: rgba(14, 28, 31, 0.95); color: var(--texto); } /* ── Botón tema ──────────────────────────────────────────── */ /* Botón en el menú móvil */ .theme-toggle--menu { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.9rem 1.5rem; background: none; border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; font-family: var(--fuente-cuerpo); font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); text-align: left; transition: color 0.2s ease, background 0.2s ease; margin-top: 0.25rem; } .theme-toggle--menu:hover { color: var(--lima); background: rgba(197, 244, 8, 0.06); } .theme-toggle--menu .theme-icon svg { width: 18px; height: 18px; vertical-align: middle; color: var(--teal-claro); } .theme-toggle--menu .theme-texto { flex: 1; } /* Botón en el footer */ .footer-theme-wrapper { margin-top: 1rem; } .theme-toggle--footer { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px; cursor: pointer; font-family: var(--fuente-cuerpo); font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); transition: all 0.25s ease; } .theme-toggle--footer:hover { background: rgba(197, 244, 8, 0.1); border-color: rgba(197, 244, 8, 0.3); color: var(--lima); } .theme-toggle--footer .theme-icon svg { width: 14px; height: 14px; vertical-align: middle; } /* Estado oscuro: el botón del footer se ve más brillante */ .tema-oscuro .theme-toggle--footer { background: rgba(44, 171, 185, 0.08); border-color: rgba(44, 171, 185, 0.2); color: var(--teal-claro); } .tema-oscuro .theme-toggle--footer:hover { background: rgba(197, 244, 8, 0.1); border-color: rgba(197, 244, 8, 0.3); color: var(--lima); } /* Ocultar el icono que no toca según el estado */ /* (lo gestiona theme.js, pero por si acaso hay flash) */ .tema-oscuro .theme-icon-luna { display: block !important; } .tema-oscuro .theme-icon-sol { display: none !important; } .tema-claro .theme-icon-luna { display: none !important; } .tema-claro .theme-icon-sol { display: block !important; }