/* ============================================================
   MODO OSCURO (Jávea)
   Se activa con el botón de la luna de la cabecera: js/hero.js pone
   data-tema="oscuro" en <html> y lo recuerda en el navegador. Un script
   en el <head> de javea/index.php lo aplica antes de pintar la página,
   para que no haya destello blanco al cargar.
   Para quitar el modo oscuro: borrar este archivo, su <link> y el botón.
   ============================================================ */

/* Colores del modo oscuro */
html[data-tema="oscuro"] {
    --osc-fondo: #07111f;
    --osc-fondo-alt: #0b1a2c;
    --osc-tarjeta: #0f2136;
    --osc-texto: #e8eef5;
    --osc-texto-suave: #a9b6c6;
    --osc-linea: rgba(255, 255, 255, 0.1);
    color-scheme: dark;
}

/* Fundido al cambiar de modo. Solo dura ese momento: si estuviera siempre,
   cualquier hover arrastraría el cambio de color de media página. */
html.cambiando-tema *,
html.cambiando-tema *::before,
html.cambiando-tema *::after {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}

html[data-tema="oscuro"] body,
html[data-tema="oscuro"] .loading-overlay {
    background-color: var(--osc-fondo);
    color: var(--osc-texto);
}

/* ---------- Cabecera y menús ---------- */
html[data-tema="oscuro"] .header-sticky {
    background: var(--osc-fondo);
}

/* Cristal también en oscuro (ver css/hero.css) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-tema="oscuro"] .header-sticky {
        background: rgba(7, 17, 31, 0.72);
    }
}

html[data-tema="oscuro"] .header-sticky,
html[data-tema="oscuro"] .header-sticky.sb-con-sombra {
    box-shadow: 0 1px 0 var(--osc-linea);
}

/* El logo tiene "BOX" en gris oscuro: en oscuro, entero en blanco */
html[data-tema="oscuro"] .header-sticky .resize {
    filter: brightness(0) invert(1);
}

html[data-tema="oscuro"] .header-sticky nav ul a {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .header-sticky nav ul a:hover,
html[data-tema="oscuro"] .header-sticky nav ul a.sb-activo {
    color: #3db4ff;
}

html[data-tema="oscuro"] .header-sticky .center-menu a::after {
    background: linear-gradient(90deg, #1282C7, #3db4ff 60%, #8fd6ff);
}

html[data-tema="oscuro"] .header-sticky .sidenav-trigger {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] #responsive-menu.sidenav {
    background: var(--osc-fondo-alt);
    border-top-color: var(--osc-linea);
}

html[data-tema="oscuro"] #responsive-menu > li > a[href^="#"] {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] #responsive-menu > li > a[href^="#"]:hover {
    color: #3db4ff;
}

html[data-tema="oscuro"] #responsive-menu > li:last-of-type .col a {
    border-color: rgba(255, 255, 255, 0.2);
}

html[data-tema="oscuro"] #responsive-menu > li:last-of-type .bx {
    color: #ffffff !important;
}

/* ---------- Secciones ---------- */
html[data-tema="oscuro"] .galeria-section,
html[data-tema="oscuro"] .tf {
    background: var(--osc-fondo-alt);
}

html[data-tema="oscuro"] .sb-seccion,
html[data-tema="oscuro"] .hr {
    background: var(--osc-fondo);
}

html[data-tema="oscuro"] .tf {
    background: var(--osc-fondo-alt);
}

html[data-tema="oscuro"] .sb-antetitulo,
html[data-tema="oscuro"] .qs-equipo-titulo {
    color: #3db4ff;
}

html[data-tema="oscuro"] .sb-cabecera-seccion .sb-titulo,
html[data-tema="oscuro"] .qs-lead,
html[data-tema="oscuro"] .qs-valores .qs-valor,
html[data-tema="oscuro"] .coach-info .coach-nombre,
html[data-tema="oscuro"] .coach-unete-titulo {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .sb-titulo span,
html[data-tema="oscuro"] .coach-unete-titulo span,
html[data-tema="oscuro"] .qs-numero {
    color: #3db4ff;
}

html[data-tema="oscuro"] .qs-parrafo,
html[data-tema="oscuro"] .qs-valores p,
html[data-tema="oscuro"] .coach-instagram,
html[data-tema="oscuro"] .coach-unete-texto,
html[data-tema="oscuro"] .ct-intro {
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .qs-valores,
html[data-tema="oscuro"] .qs-valores li {
    border-color: var(--osc-linea);
}

html[data-tema="oscuro"] .qs-dato {
    background: var(--osc-tarjeta);
}

html[data-tema="oscuro"] .qs-dato span {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .coach {
    background: var(--osc-tarjeta);
}

html[data-tema="oscuro"] .coach:not(.coach--unete) .coach-instagram {
    color: #ffffff;
}

html[data-tema="oscuro"] .coach--unete {
    background: radial-gradient(120% 140% at 50% 0%, #143454 0%, var(--osc-tarjeta) 60%);
    border-color: rgba(61, 180, 255, 0.25);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

html[data-tema="oscuro"] .galeria-foto {
    background: var(--osc-tarjeta);
}

/* Tarjetas limpias de horarios en modo oscuro */
html[data-tema="oscuro"] .hr-tarjeta {
    background: radial-gradient(120% 140% at 50% 0%, #143454 0%, var(--osc-tarjeta) 60%);
    border-color: rgba(61, 180, 255, 0.25);
    color: var(--osc-texto);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

/* La tarjeta de acento azul marino no se vería sobre el fondo oscuro:
   línea de arriba y círculo del icono en blanco */
html[data-tema="oscuro"] .hr-tarjeta--oscura::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}

html[data-tema="oscuro"] .hr-tarjeta--oscura .hr-icono {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

html[data-tema="oscuro"] .hr-cabecera {
    border-bottom-color: var(--osc-linea);
}

html[data-tema="oscuro"] .hr-cabecera .hr-dia,
html[data-tema="oscuro"] .hr-horas li,
html[data-tema="oscuro"] .hr-openbox {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .hr-turno,
html[data-tema="oscuro"] .hr-aviso {
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .hr-tarjeta--oscura .hr-icono {
    color: #ffffff;
}

html[data-tema="oscuro"] .hr-horas li {
    border-color: rgba(var(--hr-rgb), 0.35);
    background: rgba(var(--hr-rgb), 0.16);
}

/* Horario en directo (WodBuster) en modo oscuro */
html[data-tema="oscuro"] .wb-titulo,
html[data-tema="oscuro"] .wb-turno__titulo {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .wb-tipo {
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .wb-turno + .wb-turno {
    border-top-color: var(--osc-linea);
}

html[data-tema="oscuro"] .wb-dia {
    border-color: rgba(61, 180, 255, 0.2);
    background: radial-gradient(120% 140% at 50% 0%, #143454 0%, var(--osc-tarjeta) 70%);
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .wb-dia[aria-selected="true"] {
    border-color: #1282C7;
    background: #1282C7;
    color: #ffffff;
}

html[data-tema="oscuro"] .wb-clase {
    border-color: rgba(61, 180, 255, 0.2);
    background: radial-gradient(120% 140% at 50% 0%, #143454 0%, var(--osc-tarjeta) 65%);
    color: var(--osc-texto);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

html[data-tema="oscuro"] .wb-reservar {
    border-color: rgba(255, 255, 255, 0.85);
    color: #ffffff;
}

/* En oscuro, velo blanco suave, igual que EMPEZAR en las tarifas */
html[data-tema="oscuro"] .wb-reservar:hover,
html[data-tema="oscuro"] .wb-reservar:focus-visible {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

html[data-tema="oscuro"] .wb-reservar--prueba {
    border-color: #3db4ff;
    color: #3db4ff;
}

html[data-tema="oscuro"] .wb-reservar--prueba:hover,
html[data-tema="oscuro"] .wb-reservar--prueba:focus-visible {
    border-color: #3db4ff;
    background: rgba(61, 180, 255, 0.14);
    color: #3db4ff;
}

html[data-tema="oscuro"] .wb-refrescar {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .wb-refrescar:hover,
html[data-tema="oscuro"] .wb-refrescar:focus-visible {
    border-color: #3db4ff;
    color: #3db4ff;
}

html[data-tema="oscuro"] .wb-vacio {
    border-color: var(--osc-linea);
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .wb-pendiente {
    border-color: var(--osc-linea);
    background: var(--osc-tarjeta);
}

html[data-tema="oscuro"] .wb-pendiente__titulo {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .wb-pendiente__texto,
html[data-tema="oscuro"] .wb-pendiente__nota {
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .wb-cuenta span {
    border-color: rgba(61, 180, 255, 0.25);
    background: rgba(61, 180, 255, 0.08);
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .wb-cuenta strong {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .wb-cuenta--lista {
    color: #3db4ff;
}

html[data-tema="oscuro"] .wb-dias-flecha {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .wb-cargando {
    background: rgba(7, 17, 30, 0.6);
}

html[data-tema="oscuro"] .wb--sin-conexion [data-wb-mensaje] {
    color: #fbbf24;
}

html[data-tema="oscuro"] .wb-nombre {
    color: #3db4ff;
}

html[data-tema="oscuro"] .wb-intro {
    border-color: rgba(61, 180, 255, 0.25);
    background: radial-gradient(120% 140% at 50% 0%, #143454 0%, var(--osc-tarjeta) 60%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

html[data-tema="oscuro"] .wb-intro__icono {
    border-color: rgba(61, 180, 255, 0.5);
    background: rgba(18, 130, 199, 0.18);
    color: #3db4ff;
}

html[data-tema="oscuro"] .wb-intro__titulo {
    color: #ffffff;
}

html[data-tema="oscuro"] .wb-intro__texto {
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .wb-ig {
    border-color: rgba(61, 180, 255, 0.3);
    background: radial-gradient(120% 140% at 50% 0%, #143454 0%, var(--osc-tarjeta) 60%);
    color: var(--osc-texto);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

html[data-tema="oscuro"] .wb-ig__cerrar,
html[data-tema="oscuro"] .wb-ig__texto {
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .wb-ig__titulo i {
    color: #3db4ff;
}

html[data-tema="oscuro"] .wb-ig__mensaje {
    background: rgba(61, 180, 255, 0.1);
}

html[data-tema="oscuro"] .wb-probar {
    border-color: rgba(61, 180, 255, 0.35);
    background: rgba(61, 180, 255, 0.1);
    color: #3db4ff;
}

html[data-tema="oscuro"] .wb-probar:hover,
html[data-tema="oscuro"] .wb-probar:focus-visible {
    border-color: #3db4ff;
    background: #3db4ff;
    color: #0b1b2e;
}

html[data-tema="oscuro"] .wb-barra {
    background: rgba(var(--wb-rgb), 0.22);
}

html[data-tema="oscuro"] .wb-plazas,
html[data-tema="oscuro"] .wb-estado {
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .wb-clase--pocas .wb-plazas {
    color: #fbbf24;
}

html[data-tema="oscuro"] .ct-dato {
    border-color: var(--osc-linea);
    background: var(--osc-tarjeta);
    color: var(--osc-texto);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

html[data-tema="oscuro"] .ct-dato:hover {
    border-color: rgba(61, 180, 255, 0.4);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);
}

html[data-tema="oscuro"] .ct-dato i {
    background: rgba(61, 180, 255, 0.14);
    color: #3db4ff;
}

html[data-tema="oscuro"] .ct-dato:hover i {
    background: #1282C7;
    color: #ffffff;
}

html[data-tema="oscuro"] .ct-dato small {
    color: var(--osc-texto-suave);
}

/* El mapa de Google, oscurecido invirtiendo sus colores */
html[data-tema="oscuro"] .ct-mapa iframe {
    filter: invert(0.9) hue-rotate(180deg) saturate(0.7);
}

/* Tarjeta "Encuéntranos" sobre el mapa */
html[data-tema="oscuro"] .ct-mapa__tarjeta {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(5, 17, 31, 0.9);
    box-shadow: 0 14px 30px rgba(3, 10, 20, 0.28);
    color: #ffffff;
}

html[data-tema="oscuro"] .ct-mapa__tarjeta:hover {
    background: #1282C7;
}

html[data-tema="oscuro"] .ct-mapa__texto small {
    color: #3db4ff;
}

html[data-tema="oscuro"] .ct-mapa__tarjeta:hover .ct-mapa__texto small {
    color: #ffffff;
}

/* Pie */
html[data-tema="oscuro"] .sb-pie {
    background: #030a14;
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .sb-pie__marca,
html[data-tema="oscuro"] .sb-pie__menu a,
html[data-tema="oscuro"] .sb-pie__abajo a {
    color: var(--osc-texto);
}

html[data-tema="oscuro"] .sb-pie__marca img {
    filter: brightness(0) invert(1);
}

html[data-tema="oscuro"] .sb-pie__marca small,
html[data-tema="oscuro"] .sb-pie__menu a:hover,
html[data-tema="oscuro"] .sb-pie__abajo a:hover {
    color: #3db4ff;
}

html[data-tema="oscuro"] .sb-pie__arriba {
    border-bottom-color: var(--osc-linea);
}

html[data-tema="oscuro"] .sb-pie__redes a {
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

html[data-tema="oscuro"] .sb-pie__redes a:hover {
    background: #1282C7;
    border-color: #1282C7;
}

html[data-tema="oscuro"] .sb-pie__abajo p {
    color: var(--osc-texto-suave);
}

/* ---------- Botón de cambiar de modo (lo crea js/hero.js) ---------- */
.sb-tema {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(4, 12, 24, 0.15);
    border-radius: 50%;
    background: transparent;
    color: #0b1b2e;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* Materialize pinta de verde agua cualquier botón con el foco */
.sb-tema:focus {
    background-color: transparent;
}

.sb-tema:hover {
    border-color: #1282C7;
    color: #1282C7;
}

.sb-tema:focus-visible {
    outline: 3px solid #3db4ff;
    outline-offset: 2px;
}

.header-sticky .sb-tema i {
    height: auto;
    line-height: 1;
    font-size: 1.3rem;
}

.sb-tema.gira i {
    animation: sbTemaGira 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sbTemaGira {
    from { transform: rotate(-120deg) scale(0.4); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

html[data-tema="oscuro"] .sb-tema {
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

html[data-tema="oscuro"] .sb-tema:hover {
    border-color: #3db4ff;
    color: #3db4ff;
}

/* En el móvil va a la derecha de la barra, frente a la hamburguesa */
@media (max-width: 992px) {
    .sb-tema--movil {
        position: absolute;
        top: 50%;
        right: 14px;
        width: 40px;
        height: 40px;
        transform: translateY(-50%);
    }
}

@media (min-width: 993px) {
    .sb-tema--movil {
        display: none;
    }
}

@media (max-width: 992px) {
    .header-sticky .nav-wrapper .sb-tema:not(.sb-tema--movil) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.cambiando-tema *,
    html.cambiando-tema *::before,
    html.cambiando-tema *::after {
        transition: none !important;
    }

    .sb-tema.gira i {
        animation: none;
    }
}

/* Barra de desplazamiento (el estilo base está en style-javea.css) */
html[data-tema="oscuro"] {
    scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
}

html[data-tema="oscuro"]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

html[data-tema="oscuro"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    background-clip: padding-box;
}

html[data-tema="oscuro"]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
    background-clip: padding-box;
}

/* Botones flotantes de cristal (el estilo base está en style-javea.css) */
html[data-tema="oscuro"] body .sb-whatsapp,
html[data-tema="oscuro"] body .sb-arriba {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(11, 27, 46, 0.45);
    color: #3db4ff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

html[data-tema="oscuro"] body .sb-whatsapp:hover,
html[data-tema="oscuro"] body .sb-arriba:hover {
    border-color: rgba(61, 180, 255, 0.5);
    background: rgba(18, 130, 199, 0.8);
    color: #ffffff;
}

/* Enlaces legales del pie */
html[data-tema="oscuro"] .sb-pie__legal,
html[data-tema="oscuro"] .sb-pie__credito {
    border-top-color: var(--osc-linea);
}

html[data-tema="oscuro"] .sb-pie__legal a {
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .sb-pie__legal a:hover {
    color: #3db4ff;
}

/* Botones sin fondo en modo oscuro: borde y texto en azul claro */
html[data-tema="oscuro"] .coach-unete-boton,
html[data-tema="oscuro"] .ct-boton,
html[data-tema="oscuro"] #responsive-menu .sb-menu-cta {
    border-color: #3db4ff;
    color: #3db4ff;
}

html[data-tema="oscuro"] .coach-unete-boton:hover,
html[data-tema="oscuro"] .ct-boton:hover,
html[data-tema="oscuro"] #responsive-menu .sb-menu-cta:hover,
html[data-tema="oscuro"] #responsive-menu .sb-menu-cta:active {
    border-color: #3db4ff;
    background: rgba(61, 180, 255, 0.14);
    color: #3db4ff;
}

/* El pie del dato de "¿Quiénes somos?" en modo oscuro */
html[data-tema="oscuro"] .qs-dato .qs-dato__pie,
html[data-tema="oscuro"] .qs-dato__cifra + .qs-dato__cifra {
    border-color: var(--osc-linea);
    color: var(--osc-texto-suave);
}

html[data-tema="oscuro"] .qs-dato__cifra small {
    color: var(--osc-texto);
}