/* ============================================================================
   PROVISPORT · Oficina Virtual · Personalización
   ----------------------------------------------------------------------------
   Refactor 15/07/2026 — Identidad Corporativa ProviSport

   ÍNDICE:
     0. PANEL DE PERSONALIZACIÓN     6. Actividades colectivas (AACC)
     1. Fuentes y base               7. AALL / Servicios / Cursillos
     2. Cabecera pública             8. Área privada
     3. Página de inicio             9. Modales, alertas y cookies
     4. Login                       10. Footer y utilidades
     5. Proceso de alta
   ========================================================================= */

/* Si cambias la fuente en --fuente, cambia también este @import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================================================
   0. PANEL DE PERSONALIZACIÓN
   ----------------------------------------------------------------------------
   Toda la hoja tira de estas variables. Para adaptar la web a otro centro
   basta con cambiar los valores de este bloque (los tonos translúcidos y
   degradados se recalculan solos a partir del color base).

   Además de los colores, revisa al reutilizar en otra web:
     - El @import de la fuente (justo encima).
     - Las imágenes de este panel y las de actividades/cursillos de la
       sección 7 (van por ID de actividad, distinto en cada centro).
   ========================================================================= */

:root {
    /* --- Colores protagonistas --- */
    --color-primario:           #000000;   /* Color principal de la marca: titulares, cabeceras, botones (demo: Azul Oscuro Provis) */
    --color-acento:             #cc1717;   /* Color de acento: hovers, subrayados, detalles (demo: Turquesa) */
    --color-fondo:              #FFFFFF;   /* Fondo de la web y texto sobre colores oscuros */
    --color-texto:              #000000;   /* Texto sobre fondos claros */

    /* --- Derivados (se recalculan solos al cambiar el primario) --- */
    --color-primario-oscuro:    color-mix(in srgb, var(--color-primario) 85%, black);

    /* --- Colores secundarios (gama intermedia para mosaicos del
           dashboard, degradados y textos destacados) --- */
    --color-secundario-1:       #1973B8;   /* demo: Azul Medio */
    --color-secundario-2:       #0097DC;   /* demo: Azul Cielo */
    --color-secundario-3:       #1088A8;   /* demo: Turquesa Intenso */
    --color-secundario-4:       #11A696;   /* demo: Turquesa Agua */
    --color-resaltado-suave:    #A0CBEA;   /* Fondo de elemento activo/hover en menús y filtros (demo: Azul Pastel) */

    /* --- Neutros --- */
    --color-fondo-suave:        #F2F2F2;   /* Fondos suaves, barras de progreso */
    --color-deshabilitado:      #ADADAD;   /* Líneas y elementos deshabilitados */
    --color-borde-suave:        #DDEBF7;   /* Bordes finos de tarjetas y tablas (demo: Azul Claro) */
    --color-neutro:             #E1E6F2;   /* Celdas vacías de la parrilla */

    /* --- Estados --- */
    --color-error:              #A50021;   /* Errores, acciones destructivas */
    --color-favorito:           #E0A800;   /* Estrella de tarjeta preferida */
    --color-ok:                 #38A57E;   /* Éxito (disponible para usos futuros) */
    --color-aviso:              #FFE699;   /* Aviso (disponible para usos futuros) */

    /* --- Tipografía --- */
    --fuente: 'Poppins', 'Segoe UI', Arial, Helvetica, sans-serif;

    /* --- Imágenes globales --- */
    --img-logo-mini:      url(/Personalizar/Img/logomini.png);      /* Logo compacto del menú fijo */
    --img-fondo-privada:  url(/Personalizar/Img/WebBackground.png); /* Fondo del área privada */
}




/* ------------------------------------------------------------------ */
/* 1. FUENTES Y BASE                                                   */
/* ------------------------------------------------------------------ */

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

html, body {
    background: var(--color-fondo) !important;
    width: 100%;
}

body {
    font-family: var(--fuente);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Red de seguridad: varias plantillas WebForms colocan filas Bootstrap
       (margen -15px) fuera de un container y generan un scroll horizontal
       fantasma de ~15px. El scroll útil (agendas, tablas) va en contenedores
       propios con overflow-x:auto, nunca en el body. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Fila suelta directamente bajo body (p. ej. selector de agrupaciones
   de Servicios): sin container que absorba sus márgenes negativos */
body > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

::selection {
    background: var(--color-acento);
    color: var(--color-fondo);
}

/* Scrollbars en color de marca */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-fondo-suave);
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primario) 35%, var(--color-fondo-suave));
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-acento);
}

html {
    scrollbar-color: color-mix(in srgb, var(--color-primario) 35%, var(--color-fondo-suave)) var(--color-fondo-suave);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primario) !important;
    font-weight: 600;
    font-family: var(--fuente);
    letter-spacing: -0.5px;
    margin: 0;
}

h2 {
    text-align: center;
    font-size: clamp(26px, 2vw + 18px, 42px);
    color: var(--color-primario) !important;
    font-weight: 700 !important;
}

strong {
    color: var(--color-texto);
}

/* Enlaces y botones: transición y foco accesible en color de marca */
a, button, .btn, input[type="submit"], input[type="button"] {
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, box-shadow .25s ease;
}

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

/* Botón primario de la plataforma → azul corporativo, hover turquesa */
body .btn-primary {
    color: var(--color-fondo) !important;
    text-shadow: none;
    border-radius: 6px !important;
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

body .btn-primary:hover {
    color: var(--color-fondo) !important;
    background-color: var(--color-acento) !important;
    border-color: var(--color-acento) !important;
}

/* Botones de éxito en el verde corporativo */
body .btn-success {
    background-color: var(--color-ok) !important;
    border-color: var(--color-ok) !important;
}

body .btn-primary:active, body .btn-primary:focus {
    border-color: var(--color-acento) !important;
    background-color: var(--color-primario-oscuro);
    color: var(--color-fondo);
}

body .btn-danger:hover {
    color: var(--color-error) !important;
    background: var(--color-fondo) !important;
}

.form-control:focus {
    border-color: var(--color-acento);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px color-mix(in srgb, var(--color-acento) 35%, transparent);
    background: var(--color-fondo);
}

/* Radios tipo botón (sexo, tipo de documento…) */
#radio > label, #radio2 > label, #radioTipoDocumento > span > label {
    padding: 15px 1px 15px;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all .3s;
    border: 2px solid;
}

div#USER1 {
    color: var(--color-primario);
    font-size: 1.5em;
    font-weight: bold;
}

div#USER2 {
    color: var(--color-texto);
    font-size: 1.5em;
}

table#tablaPlazas * {
    border: none;
    padding: 0;
    text-align: center;
    height: 50px;
    width: 50px;
    margin: 2px;
}

.shop .total-amount {
    font-size: 1.7em;
    display: block;
    padding-top: 10px;
    color: var(--color-texto) !important;
}

.card .content {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 10px 20px 20px;
    min-height: 250px;
}

.card .content img {
    max-width: 100%;
}

.col-xs-12 {
    box-shadow: none;
}

span.rotate {
    display: none;
}

/* ------------------------------------------------------------------ */
/* 2. CABECERA PÚBLICA                                                 */
/* ------------------------------------------------------------------ */

#header > .navbar-collapse > .container {
    position: relative;
    max-width: unset !important;
    width: 100%;
}

#header > .container {
    height: 111px;
    margin-bottom: -35px;
    position: relative;
    display: table;
    max-width: unset !important;
    width: 100%;
}

/* Idiomas: oculto por decisión del centro */
div#idiomas {
    display: none !important;
}

/* Logo */
#header .logo img {
    width: auto !important;
    height: 30px !important;
    margin-top: 7px;
}

#header .logo-sticky-active img {
    width: auto !important;
    height: 58px !important;
    top: -10px !important;
    content: var(--img-logo-mini) !important;
}

/* Barra superior */
#header {
    background: var(--color-fondo);
    border-top: none !important;
    height: 76px;
    min-height: unset !important;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primario) 7%, transparent);
}

header.header {
    background: var(--color-fondo) !important;
    border: 0px;
}

body.sticky-menu-active #header {
    border-bottom: 1px solid var(--color-fondo-suave);
    position: fixed;
    top: -29px;
    width: 100%;
    z-index: 1001;
    box-shadow: 0px 2px 8px color-mix(in srgb, var(--color-primario) 10%, transparent);
    filter: none;
    /* Cristal esmerilado al hacer scroll: el contenido se intuye debajo */
    background: color-mix(in srgb, var(--color-fondo) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Menú principal */
.sticky-menu-active #header .navbar-collapse {
    margin-top: -88px;
}

.sticky-menu-deactive #header .navbar-collapse {
    margin-top: -102px;
}

#header .navbar-collapse {
    margin-top: -85px;
}

#header nav ul.nav-main li a {
    font-family: var(--fuente);
    font-size: 100%;
    font-weight: 600;
    letter-spacing: 1px;
}

nav.nav-main.mega-menu ul li a {
    text-transform: capitalize;
}

nav.nav-main.mega-menu a {
    color: var(--color-primario) !important;
}

div#divContainerWell {
    padding: 0px !important;
    width: 100%;
}

/* Sin el padding del container, los márgenes negativos de sus filas
   quedan al aire y desbordan la ventana (p. ej. cuotas en el alta) */
div#divContainerWell > .row,
div#divContainerWell .row.row-flex {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Subrayado animado de los items del menú */
ul#mainMenu a {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    border-radius: 0px !important;
    position: relative;
}

ul#mainMenu a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: var(--color-acento);
    height: 2px;
    transition-property: left, right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

ul#mainMenu a:hover:before, ul#mainMenu a:focus:before, ul#mainMenu a:active:before {
    left: 0;
    right: 0;
}

/* Desplegables del menú público (p. ej. Campamentos): el tema fija la
   altura de la barra también en el ul anidado y los items se salían de
   la caja, dejando una zona clicable invisible */
#mainMenu li.dropdown ul.dropdown-menu {
    height: auto !important;
    min-width: 230px;
    padding: 6px 0 !important;
    border: 1px solid var(--color-borde-suave) !important;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primario) 18%, transparent);
    overflow: hidden;
}

/* Dentro del desplegable no aplica el subrayado animado del menú */
#mainMenu li.dropdown ul.dropdown-menu a:before {
    display: none !important;
}

#mainMenu li.dropdown ul.dropdown-menu li,
#mainMenu li.dropdown ul.dropdown-menu li a {
    background: var(--color-fondo) !important;
}

#mainMenu li.dropdown ul.dropdown-menu li a {
    color: var(--color-primario) !important;
    padding: 10px 18px;
    letter-spacing: 0.3px;
}

#mainMenu li.dropdown ul.dropdown-menu li a:hover,
#mainMenu li.dropdown ul.dropdown-menu li a:focus {
    background: var(--color-fondo-suave) !important;
    color: var(--color-acento) !important;
}

/* Menú móvil (colapsado): fondo blanco, enlaces turquesa */
#header .nav-main-collapse {
    background: var(--color-fondo) !important;
}

#header .nav-main-collapse.in {
    background: var(--color-fondo) !important;
}

#header nav ul.nav-main li a {
    color: var(--color-primario) !important;
    background: none !important;
}

#header nav ul.nav-main li a:hover,
#header nav ul.nav-main li a:focus {
    color: var(--color-acento) !important;
    background: none !important;
}

#header nav ul.nav-main li a.active {
    color: var(--color-fondo) !important;
    background: var(--color-acento) !important;
    border: 0px !important;
}

#header .nav-main ul li a {
    border-bottom: 1px solid var(--color-borde-suave) !important;
}

button.btn.btn-responsive-nav.btn-inverse {
    font-size: 2rem;
}

/* FIX: el icono hamburguesa estaba oculto por una regla global
   (el ID le da prioridad sobre el display:none de la zona privada) */
#header .btn-responsive-nav svg.svg-inline--fa.fa-bars,
#header .btn-responsive-nav .fa-bars,
body .btn-responsive-nav svg.svg-inline--fa.fa-bars.fa-w-14 {
    display: inline-block !important;
}

/* Menú escritorio: enlaces azul corporativo, hover turquesa */
@media (min-width: 992px) {
    /* Campamentos es el último item: su desplegable se alinea al borde
       derecho de su padre para no sobresalir de la ventana */
    #mainMenu > li.dropdown:last-child ul.dropdown-menu {
        left: auto;
        right: 0;
    }

    #header .nav-main-collapse.in {
        background: var(--color-fondo) !important;
    }

    #header nav ul.nav-main li a {
        color: var(--color-primario) !important;
    }

    #header nav ul.nav-main li a:hover,
    #header nav ul.nav-main li a:focus,
    #header nav ul.nav-main li a.active {
        background: transparent !important;
        border: 0px !important;
        color: var(--color-acento) !important;
    }

    #header .nav-main ul li a,
    #header .nav-main ul li a:hover {
        border: 0px !important;
    }
}

/* Cabecera en móvil */
@media (max-width: 991px) {
    #header .logo img {
        width: auto !important;
        max-width: 70vw !important;
    }

    .userbox.open .dropdown-menu {
        left: 5px !important;
    }

    .btn-responsive-nav {
        top: 8px !important;
        background: var(--color-fondo) !important;
        color: var(--color-primario) !important;
    }

    #header .nav-main-collapse {
        top: 8px;
        position: relative;
        max-height: none;
        box-shadow: 0px 14px 24px -6px color-mix(in srgb, var(--color-primario) 35%, transparent);
        width: 100%;
        overflow: hidden;
    }

    #header .nav-main ul li {
        padding: 0px;
        margin: 0px;
        clear: both;
        float: none;
        display: block;
    }

    #header .nav-main ul li a {
        padding-top: 14px;
        padding-bottom: 14px;
        margin: 0px;
        clear: both;
        float: none;
        display: block;
        font-size: 1.5rem;
        /* En las páginas interiores MaterialKit carga DESPUÉS de custom.css
           y centraba los items del menú (en la home salen a la izquierda) */
        text-align: left !important;
    }

    /* Blindaje del submenú abierto frente a los estilos de MaterialKit
       (animaciones con scale/opacity) cargados tras custom.css */
    #header #mainMenu li.dropdown.open ul.dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* Respaldo sin JS: si el submenú sigue siendo absoluto (custom.js
       antiguo en caché), el panel del menú no lo recorta */
    #header .nav-main-collapse.in:has(li.dropdown.open),
    #header .nav-main-collapse:has(li.dropdown.open) {
        overflow: visible !important;
    }

    /* Ancla del submenú: sin esto, en páginas donde el li no está
       posicionado (p. ej. cursillos) el desplegable absoluto se agarra
       al contenedor del menú y aparece pegado a la izquierda */
    #header #mainMenu li.dropdown {
        position: relative;
    }

    /* Submenú (Campamentos) desplegado EN FLUJO dentro del menú móvil:
       custom.js lo pasa a position static (el servidor lo trae con
       position:absolute!important inline y quedaba recortado tapando
       los botones de debajo). Aquí solo se le da el aspecto. */
    #header #mainMenu li.dropdown ul.dropdown-menu {
        background: var(--color-fondo-suave) !important;
        border: none !important;
        border-radius: 10px;
        box-shadow: none !important;
        margin: 0 0 8px !important;
        padding: 4px 0 !important;
    }

    #header #mainMenu li.dropdown ul.dropdown-menu li,
    #header #mainMenu li.dropdown ul.dropdown-menu li a {
        background: transparent !important;
    }

    #header #mainMenu li.dropdown ul.dropdown-menu li a {
        padding: 12px 16px 12px 34px;
        border-bottom: none !important;
        font-size: 1.4rem;
    }

    /* El último item del menú no necesita separador */
    #header .nav-main ul#mainMenu > li:last-child > a {
        border-bottom: none !important;
    }

    body.sticky-menu-active #header .logo img, #header.fixed .logo img {
        margin-top: 3px !important;
    }

    body.sticky-menu-active #header .btn-responsive-nav {
        top: 25px !important;
        background: var(--color-primario) !important;
        color: var(--color-fondo) !important;
    }

    .sticky-menu-deactive #header .navbar-collapse {
        margin-top: -66px;
    }

    #header .nav-main-collapse.in {
        width: 100%;
        overflow: hidden;
        z-index: 10;
        margin-top: -66px;
        display: block !important;
    }

    #header .nav-main-collapse.collapsing {
        top: 27px;
        z-index: 10;
    }

    /* La cabecera fija no aporta en móvil: se oculta */
    body.sticky-menu-active #header {
        display: none;
        position: fixed;
        top: -13px;
        width: 100%;
        z-index: 1001;
    }
}

/* ------------------------------------------------------------------ */
/* 3. PÁGINA DE INICIO                                                 */
/* ------------------------------------------------------------------ */

.imagenCentralInicio {
    /* La portada + footer caben en una pantalla: el hero mide la ventana
       menos cabecera y footer, con un mínimo para pantallas bajas */
    min-height: clamp(440px, calc(100dvh - 290px), 1400px);
    display: flex;
    flex-direction: column;
    background-position: 0px 0px;
    background-size: cover;
}

@media (min-width: 1200px) {
    .imagenCentralInicio {
        flex-direction: row;
    }
}

/* Contenedor de botones de acceso */
div#MainContent_divContainerInternoBotones {
    border-radius: 0px !important;
    border: 0px;
    background: none !important;
    order: 2;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    display: flex;
    box-shadow: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div#MainContent_divContainerInternoBotones div {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

/* En pantallas bajas (portátiles) se compacta el espaciado de los
   botones para que la portada + footer quepan sin scroll */
@media (max-height: 899px) and (min-width: 992px) {
    div#MainContent_divContainerInternoBotones div {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
}

div#MainContent_divContainerInternoBotones input {
    margin: 0px !important;
    width: 100% !important;
    min-width: min(32rem, 88vw) !important;
    font-size: 1.9rem !important;
    height: 8rem !important;
}

div#MainContent_divBtnLogin, div#MainContent_divBtnQuieroInformacion, div#MainContent_divBtnAlta {
    box-shadow: none !important;
    display: flex !important;
    justify-content: center;
    text-align: center !important;
    margin: 0rem !important;
}

/* Botones de acceso: píldoras con jerarquía (la acción principal rellena,
   las secundarias en cristal sobre la foto) y micro-interacción al hover */
input#btnLogin, input#btnQuieroInformacion, input#btnAlta {
    margin: 5%;
    box-shadow: 0px 6px 18px color-mix(in srgb, var(--color-primario) 25%, transparent) !important;
    background: var(--color-acento) !important;
    width: 90% !important;
    height: 10rem !important;
    border: 0 !important;
    color: var(--color-fondo);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1.5px;
    text-shadow: none;
    border-radius: 999px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

input#btnLogin:hover, input#btnQuieroInformacion:hover, input#btnAlta:hover,
input#btnLogin:focus, input#btnQuieroInformacion:focus, input#btnAlta:focus {
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    text-shadow: none !important;
    transform: translateY(-2px);
    box-shadow: 0px 10px 26px color-mix(in srgb, var(--color-primario) 38%, transparent) !important;
}

@media (min-width: 992px) {
    input#btnLogin, input#btnQuieroInformacion, input#btnAlta {
        margin: 0px !important;
        width: 55% !important;
        height: 7rem !important;
    }

    /* Sobre la foto, las acciones secundarias van en "cristal" translúcido */
    input#btnQuieroInformacion, input#btnAlta {
        background: color-mix(in srgb, var(--color-fondo) 14%, transparent) !important;
        border: 1.5px solid color-mix(in srgb, var(--color-fondo) 55%, transparent) !important;
        color: var(--color-fondo) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primario) 20%, transparent) !important;
    }

    input#btnQuieroInformacion:hover, input#btnAlta:hover,
    input#btnQuieroInformacion:focus, input#btnAlta:focus {
        background: var(--color-acento) !important;
        border-color: var(--color-acento) !important;
    }
}

@media (max-width: 991px) {
    /* Sobre fondo blanco: la principal rellena, las secundarias en contorno */
    input#btnQuieroInformacion, input#btnAlta {
        background: var(--color-fondo) !important;
        border: 2px solid var(--color-acento) !important;
        color: var(--color-acento) !important;
        box-shadow: 0 3px 12px color-mix(in srgb, var(--color-primario) 12%, transparent) !important;
    }

    input#btnQuieroInformacion:hover, input#btnAlta:hover,
    input#btnQuieroInformacion:focus, input#btnAlta:focus {
        background: var(--color-acento) !important;
        color: var(--color-fondo) !important;
    }
}

@media (max-width: 991px) {
    div#MainContent_divContainerInternoBotones div {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* En móvil el bloque central va sobre fondo blanco limpio */
    .imagenCentralInicio {
        background: var(--color-fondo) !important;
    }
}

/* Texto público de bienvenida */
#divContainerInternoTextoPublico {
    min-height: 250px;
    background: transparent !important;
    border-radius: 0px !important;
    border: 0px !important;
    margin-top: 35px;
    box-shadow: none;
    margin-bottom: -11px;
}

@media (min-width: 1200px) {
    #divContainerInternoTextoPublico {
        padding-top: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 991px) {
    /* Compacto: el contenedor traía min-height 250px para un texto de ~65px
       y, con el alto forzado del wrapper, echaba el footer fuera de la
       primera pantalla en móvil */
    #divContainerInternoTextoPublico {
        width: 100% !important;
        min-height: 0 !important;
        margin-top: 12px;
        margin-bottom: 0;
        padding-bottom: 0 !important;
    }

    /* La plantilla estira el contenedor interior de la home a toda la
       ventana aunque el contenido mida menos: se deja que mida lo suyo
       (el footer ya se ancla abajo con el flex del body) */
    div#upBody:has(.imagenCentralInicio),
    div#upBody:has(.imagenCentralInicio) > .body,
    div.body:has(.imagenCentralInicio) {
        min-height: 0 !important;
        height: auto !important;
    }

    /* Botones del hero algo más compactos para que portada + footer
       quepan también en pantallas de móvil bajas */
    div#MainContent_divContainerInternoBotones input {
        height: 6.6rem !important;
    }
}

/* Móviles de pantalla baja (iPhone SE y similares): apretar un poco más
   para que la portada siga cabiendo en una pantalla */
@media (max-width: 991px) and (max-height: 700px) {
    /* El suelo de 440px del hero era lo que forzaba el scroll:
       aquí manda el contenido */
    .imagenCentralInicio {
        min-height: 0 !important;
    }

    div#MainContent_divContainerInternoBotones div {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    div#MainContent_divContainerInternoBotones input {
        height: 5.8rem !important;
    }

    #divContainerInternoTextoPublico {
        margin-top: 6px;
    }
}

/* El texto viene de la configuración del centro con estilos inline:
   se fuerza el color de marca (blanco sobre la foto de escritorio) */
h2#textoBienvenida {
    color: var(--color-texto) !important;
    font-size: clamp(26px, 5vw + 6px, 50px) !important;
    line-height: 1.25 !important;
}

#MainContent_lblTextoPublico,
#MainContent_lblTextoPublico h2,
#MainContent_lblTextoPublico h3 {
    text-align: left;
}

#MainContent_lblTextoPublico h2,
#MainContent_lblTextoPublico h2 * {
    color: var(--color-primario) !important;
    font-size: clamp(26px, 4vw + 6px, 46px) !important;
    line-height: 1.25 !important;
    text-align: left;
}

#MainContent_lblTextoPublico a {
    color: var(--color-acento) !important;
    font-weight: 700;
}

@media (min-width: 992px) {
    h2#textoBienvenida {
        color: var(--color-fondo-suave) !important;
        letter-spacing: 3px !important;
    }

    /* Sobre la foto: texto blanco con sombra suave (regla de contraste) */
    #MainContent_lblTextoPublico,
    #MainContent_lblTextoPublico h2,
    #MainContent_lblTextoPublico h2 *,
    #MainContent_lblTextoPublico h3 {
        color: var(--color-fondo) !important;
        text-shadow: 0px 2px 12px color-mix(in srgb, var(--color-primario) 85%, transparent);
    }
}

div#users {
    margin-top: 43px;
    width: 100%;
    text-align: center;
    visibility: hidden !important;
}

div#users p {
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--color-texto);
    margin-bottom: 0px;
}

div#users p b {
    color: var(--color-primario);
}

div#user1, #user2 {
    display: inline-block;
    text-align: center;
    padding: 12px;
    width: 50%;
    background: color-mix(in srgb, var(--color-fondo) 49%, transparent);
}

@media (max-width: 991px) {
    div#user1, #user2 {
        width: 100%;
    }
}

.col-md-12.well.text-center {
    background: transparent !important;
    border: 0px;
    z-index: 1 !important;
}

/* ------------------------------------------------------------------ */
/* 4. LOGIN                                                            */
/* ------------------------------------------------------------------ */

section.body-sign {
    height: auto;
}

.imagenCentralLogin {
    height: 900px !important;
    min-height: 745px;
    background-size: 50% !important;
    background-position: left !important;
    background-attachment: local !important;
    background-repeat: no-repeat;
}

.body-sign {
    margin: 0px;
    margin-left: 60% !important;
    margin-top: 3.5% !important;
}

#divPanelSing {
    width: auto !important;
}

.body-sign .panel-sign .panel-body {
    border: 0px !important;
}

.body-sign .panel-sign .panel-title-sign .title {
    background-color: var(--color-acento);
    color: var(--color-fondo) !important;
    letter-spacing: 1px;
}

.panel-title-sign {
    text-align: left !important;
}

.panel-title-sign h2 {
    text-align: left !important;
    background: var(--color-fondo) !important;
}

.panel-title-sign span {
    color: var(--color-primario) !important;
    font-size: 1.9rem !important;
    letter-spacing: 0px !important;
    text-transform: uppercase !important;
}

.panel-body.panel-body-Login {
    box-shadow: none !important;
}

.panel-body.panel-body-Login label {
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

input#Password, input#Username {
    border-radius: 13px !important;
}

div#divBtnLogin {
    width: 100% !important;
    text-align: center !important;
    margin-top: 5% !important;
}

div#divBtnLogin input {
    width: 100% !important;
    height: 45px !important;
    border-radius: 13px !important;
    margin: 0px !important;
    font-size: 2rem;
}

input#submitLogin {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

input#submitLogin:hover, input#submitLogin:focus {
    background: var(--color-acento) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-fondo) !important;
}

img#imgLogoLogin {
    display: none !important;
}

li#liAviso a, #liNormas a, #liCondiciones a, #liPolitica a {
    color: var(--color-fondo) !important;
    font-family: var(--fuente);
    font-size: 11px;
    letter-spacing: 1px;
}

@media (max-width: 1240px) {
    .panel-body.panel-body-Login {
        padding: 0px !important;
    }

    .panel-title-sign {
        text-align: center !important;
    }

    .body-sign {
        margin: auto !important;
        padding: 0 15px;
    }

    .imagenCentralLogin {
        background: transparent !important;
        height: auto !important;
        min-height: 60vh;
    }
}

/* Recordar contraseña */
input#MainContent_txtNifEmail {
    border: 2px solid transparent !important;
    border-bottom: 2px solid var(--color-primario) !important;
    background: color-mix(in srgb, var(--color-primario) 15%, transparent) !important;
}

input#MainContent_txtNifEmail:focus {
    transition: .4s !important;
    border: 2px solid var(--color-primario) !important;
    background: transparent !important;
}

label#MainContent_lblNifEmail,
label#MainContent_lblInformacionRecordarEmail {
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

div#MainContent_EmailPanelRecordar h4 {
    text-align: center !important;
}

h1#MainContent_h1RecordarContraseña {
    color: var(--color-primario) !important;
    border-top: 2px solid var(--color-primario) !important;
    border-bottom: 2px solid var(--color-primario) !important;
    width: 50% !important;
    margin-left: 25% !important;
    font-size: 2rem !important;
    padding: 0px !important;
}

div#MainContent_divContainerInternoRecordar {
    margin-top: 1% !important;
}

@media (max-width: 991px) {
    div#divEmailNif {
        margin: 0px !important;
        margin-top: 5% !important;
    }

    h1#MainContent_h1RecordarContraseña {
        display: none !important;
    }
}

/* Formulario de consentimiento tras login */
.formConsentimiento {
    box-shadow: 0px 4px 24px color-mix(in srgb, var(--color-primario) 25%, transparent) !important;
}

legend#lgTitulo1, legend#lgtitulo2 {
    font-weight: bold !important;
    letter-spacing: 0.2px !important;
    padding-bottom: 2rem !important;
    color: var(--color-primario) !important;
}

.formConsentimiento h3 {
    padding-bottom: 3rem !important;
    color: var(--color-acento) !important;
    font-size: 3rem !important;
    margin-top: 4rem !important;
}

input#EnviarFormulario, .formConsentimiento .btn {
    background: var(--color-primario) !important;
    border: 2px solid var(--color-primario) !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    width: 15% !important;
    min-width: 140px;
    padding: 10px;
}

input#EnviarFormulario:hover, .formConsentimiento .btn:hover {
    background: var(--color-fondo) !important;
    color: var(--color-acento) !important;
    border: 2px solid var(--color-acento) !important;
}

label#lblAccionesComercialesRelativo {
    color: var(--color-primario) !important;
    font-weight: 700 !important;
}

@media (max-width: 576px) {
    .formConsentimiento {
        box-shadow: none !important;
    }

    input#EnviarFormulario, .formConsentimiento .btn {
        width: 50% !important;
    }
}

/* ------------------------------------------------------------------ */
/* 5. PROCESO DE ALTA                                                  */
/* ------------------------------------------------------------------ */

/* Barra de progreso del asistente */
html .wizard-progress .wizard-steps li.completed a span,
html.dark .wizard-progress .wizard-steps li.completed a span {
    border-color: var(--color-primario);
    background: var(--color-primario);
}

html .wizard-progress .wizard-steps li.active a span,
html.dark .wizard-progress .wizard-steps li.active a span {
    color: var(--color-acento);
    border-color: var(--color-acento);
}

/* El paso actual del asistente se distingue en azul corporativo */
html .wizard-progress .wizard-steps li.active a,
html.dark .wizard-progress .wizard-steps li.active a {
    color: var(--color-primario) !important;
    font-weight: 700;
}

html .wizard-progress.wizard-progress-lg ul li.active a span,
html.dark .wizard-progress.wizard-progress-lg ul li.active a span {
    color: var(--color-primario) !important;
    border-left-color: var(--color-primario) !important;
}

html .wizard-progress.wizard-progress-lg ul li a,
html.dark .wizard-progress.wizard-progress-lg ul li a {
    padding-top: 19px !important;
    padding-left: 13rem !important;
    font-size: 2rem;
    color: var(--color-acento) !important;
}

html .wizard-progress.wizard-progress-lg ul li a span,
html.dark .wizard-progress.wizard-progress-lg ul li a span {
    margin-left: -60px !important;
    margin-top: 15px !important;
    background: none !important;
    border: none !important;
    border-radius: 0px !important;
    color: var(--color-acento) !important;
    line-height: 25px !important;
    border-left: 3px solid var(--color-acento) !important;
    height: 23px !important;
    width: 35px !important;
}

.steps-progress {
    background: var(--color-fondo-suave) !important;
    height: 20px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

html .wizard-progress .steps-progress .progress-indicator,
html.dark .wizard-progress .steps-progress .progress-indicator,
html .wizard-progress.wizard-progress-lg .steps-progress,
html.dark .wizard-progress.wizard-progress-lg .steps-progress {
    height: 20px !important;
    border-radius: 8px !important;
}

html .wizard-progress .steps-progress .progress-indicator,
html.dark .wizard-progress .steps-progress .progress-indicator {
    background: linear-gradient(90deg, var(--color-acento) 0%, var(--color-primario) 100%) !important;
}

.progress-indicator {
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* Cabecera y textos del paso */
h1#MainContent_h2InformacionDatosPersona,
h1#MainContent_h2InformacionContacto,
span#MainContent_astNif,
label#MainContent_lblNif,
div#MainContent_divInformacionPagina,
div#MainContent_divFicherosAltaDNI {
    display: none !important;
}

label#MainContent_lblInformacionPagina {
    text-transform: initial;
    font-weight: initial;
    margin-top: 20px;
    visibility: hidden !important;
}

h1#MainContent_h2SeleccionarCuota {
    margin-left: 30px;
    text-align: center !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    color: var(--color-primario) !important;
    font-size: clamp(28px, 3vw + 14px, 42px);
}

div#divInformacionPagina {
    margin-left: 30px;
}

div#MainContent_pPasos {
    margin-top: 15px;
}

h3#h3YaFuiSocioDatosPersona {
    margin: 0px !important;
    float: none !important;
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    border-color: var(--color-primario) !important;
}

h3#h3YaFuiSocioDatosPersona:hover {
    transition: 400ms !important;
    background: var(--color-fondo) !important;
    color: var(--color-acento) !important;
    border-color: var(--color-primario) !important;
}

#h3YaFuiSocioDatosPersona:active {
    float: none !important;
}

/* Selección de cuota */
div#MainContent_divCuotas {
    text-align: center;
}

@media (min-width: 1200px) {
    div#MainContent_divCuotas {
        display: flex !important;
        justify-content: center;
        min-height: 50rem !important;
    }
}

@media (min-width: 1600px) {
    div#MainContent_divCuotas .col-md-3 {
        width: 18% !important;
    }
}

div#MainContent_divCuotas div {
    border-radius: 10px !important;
    border: 0px !important;
}

div#MainContent_divCuotas .box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cuotas-class {
    float: unset !important;
    display: inline-block;
    width: 90% !important;
}

@media (min-width: 623px) and (max-width: 1200px) {
    .cuotas-class {
        width: 40% !important;
    }
}

.featured-box {
    border-radius: 0px !important;
}

.featured-box .box-content {
    border-radius: 8px;
    border-top: 4px solid var(--color-acento);
    padding: 3rem 0px 0px 0px !important;
}

.cuotas-class .featured-box {
    background: var(--color-primario) !important;
    width: auto !important;
    height: 450px !important;
}

.cuotas-class .featured-box * {
    color: var(--color-fondo) !important;
    background: var(--color-primario) !important;
}

.box-content h4:nth-child(2) {
    font-size: 3.3rem !important;
    color: var(--color-fondo) !important;
}

.featured-box h4.panel-title {
    justify-content: center;
    display: flex;
}

a.accordion-toggle {
    color: var(--color-fondo) !important;
    border-top: 1px solid var(--color-fondo);
    border-bottom: 1px solid var(--color-fondo);
    width: 80%;
}

label#lblPrecioTotal {
    color: var(--color-fondo) !important;
}

.cuotas-class .featured-box button {
    background: var(--color-fondo) !important;
    color: var(--color-acento) !important;
    border: 1px solid var(--color-acento) !important;
    width: 54% !important;
    min-height: 4rem;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    border-radius: 7px !important;
    font-weight: 600;
}

.cuotas-class .featured-box button:hover {
    background: var(--color-acento) !important;
    border-color: var(--color-fondo) !important;
    color: var(--color-fondo) !important;
}

@media (min-width: 992px) {
    .descriptionCuota {
        min-height: 22rem !important;
    }
}

#MainContent_lblTextoPromocion {
    color: var(--color-primario) !important;
    font-weight: bold;
    /* La plataforma le fija el ancho completo del contenedor y con su
       margen izquierdo desbordaba la ventana 14px */
    max-width: calc(100% - 30px) !important;
    box-sizing: border-box;
}

/* Botones atrás / validar */
input#MainContent_btnVolverAtras {
    letter-spacing: 0.3px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    width: 120px;
    background: var(--color-fondo) !important;
    color: var(--color-acento) !important;
    border-color: var(--color-acento) !important;
}

input#MainContent_btnVolverAtras:hover {
    background: var(--color-acento) !important;
    color: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
}

input#MainContent_btnValidar {
    letter-spacing: 0.3px !important;
    border-radius: 6px !important;
    width: 120px;
    background: var(--color-acento) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-fondo) !important;
    font-weight: bold !important;
}

input#MainContent_btnValidar:hover {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-fondo) !important;
}

@media (min-width: 1200px) {
    input#MainContent_btnVolverAtras:hover, input#MainContent_btnValidar:hover,
    button#btnFechaNacimiento:hover, a.btn.btn-success.btnNuevaPersona:hover {
        background: var(--color-primario) !important;
        color: var(--color-fondo) !important;
        border-color: var(--color-primario) !important;
    }

    .asignarCursilloCabeza {
        opacity: 1 !important;
        border-radius: 0px !important;
        background: var(--color-primario) !important;
        color: var(--color-fondo) !important;
        box-shadow: none !important;
    }

    button#btnFechaNacimiento, a.btn.btn-success.btnNuevaPersona {
        opacity: 1 !important;
        border-radius: 0px !important;
        background: var(--color-primario) !important;
        color: var(--color-fondo) !important;
        font-weight: bold !important;
        box-shadow: none !important;
    }

    .container.vistaPrincipal.well {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .container.vistaPrincipal.well div#w4-DatosPersonales {
        margin: 0px !important;
    }
}

/* Formulario de datos personales */
div#w4-DatosPersonales {
    margin: 1rem;
    background: var(--color-fondo) !important;
    border-radius: 10px !important;
    box-shadow: 0px 4px 24px color-mix(in srgb, var(--color-primario) 20%, transparent) !important;
    padding: 50px !important;
}

@media (min-width: 1440px) {
    div#w4-DatosPersonales {
        margin-left: 20% !important;
        margin-right: 20% !important;
        margin-bottom: 3% !important;
    }
}

@media (max-width: 991px) {
    div#w4-DatosPersonales {
        margin-left: 10px;
        margin-right: 10px;
        padding: 25px 15px !important;
    }
}

div#w4-DatosPersonales label {
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

legend#MainContent_lgDatosPersonales, legend#MainContent_lgDatosContacto,
legend#MainContent_lfFicherosAlta, legend#MainContent_lgVariosSubvarios,
legend#MainContent_lgTerminos {
    font-size: 2rem !important;
    letter-spacing: 0px !important;
    border: none !important;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-primario);
    border-bottom: 2px solid var(--color-acento) !important;
    width: 30% !important;
    min-width: 260px;
    padding-bottom: 3px;
}

#radioTipoDocumento {
    display: inline;
    padding-left: 0px !important;
}

#radioTipoDocumento > span > .border-active {
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
    font-weight: bold;
}

div#radioTipoDocumento label {
    padding: 17px 22px 17px 22px !important;
}

input#MainContent_txtNIF {
    margin-top: 3% !important;
}

div#MainContent_divSexo div#radio label {
    padding: 12px 14px !important;
    min-width: 92px;
}

/* Los selects de fecha de nacimiento venían demasiado estrechos */
select[id*="slcDia"], select[id*="slcMes"], select[id*="slcAnno"], select[id*="slcAno"] {
    min-width: 72px;
}

div#MainContent_divSexo div#radio label.border-active {
    background: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
    font-weight: bold;
}

html.dark .radio-primary input[type="radio"]:checked + label:after,
.radio-primary input[type="radio"]:checked + label:after {
    background: var(--color-acento);
    box-shadow: 0px 0px 1px var(--color-acento);
}

html.dark .checkbox-primary label:before, .checkbox-primary label:before {
    background: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
}

html.dark .checkbox-primary label:after, .checkbox-primary label:after {
    color: var(--color-acento) !important;
}

div#MainContent_pnlCondiciones a {
    color: var(--color-acento) !important;
    font-weight: bold !important;
}

@media (min-width: 1420px) {
    select#MainContent_slcMes {
        width: 33% !important;
    }
}

@media (max-width: 991px) {
    html .wizard-progress, html .wizard-progress.wizard-progress-lg,
    html.dark .wizard-progress, html.dark .wizard-progress.wizard-progress-lg {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    div#MainContent_divSexo div#radio label {
        width: 32.5% !important;
    }

    div#MainContent_UpdatePanelNIF label {
        width: 100% !important;
    }

    div#MainContent_UpdatePanelNIF span.radio-inline {
        margin: 0px !important;
    }

    legend#MainContent_lgDatosPersonales, legend#MainContent_lgDatosContacto,
    legend#MainContent_lgTerminos {
        padding-bottom: 5px !important;
        text-align: center !important;
    }
}

@media (max-width: 576px) {
    legend#MainContent_lgDatosPersonales, legend#MainContent_lgDatosContacto,
    legend#MainContent_lfFicherosAlta, legend#MainContent_lgVariosSubvarios,
    legend#MainContent_lgTerminos {
        width: 95% !important;
        min-width: 0;
    }
}

@media (max-width: 1200px) {
    html .wizard-progress.wizard-progress-lg ul li a span,
    html.dark .wizard-progress.wizard-progress-lg ul li a span {
        margin-left: -128px !important;
    }

    html .wizard-progress.wizard-progress-lg ul li a,
    html.dark .wizard-progress.wizard-progress-lg ul li a {
        padding-left: 0rem !important;
    }
}

/* LOPD */
#MainContent_divAccionesComerciales, #MainContent_divPermitirCompartirDatosATerceros,
div#MainContent_divPermitirCompartirImagenRedesSociales {
    border: 0px !important;
    border-left: 5px solid var(--color-acento) !important;
    box-shadow: none;
}

/* Condiciones con scroll */
.textoScroll {
    overflow-y: scroll;
    height: 250px !important;
    border-top: 1px solid var(--color-primario) !important;
    border-bottom: 1px solid var(--color-primario) !important;
    padding: 10px !important;
    color: var(--color-primario) !important;
    text-align: left;
    margin: 10px !important;
}

p.MsoNormal {
    color: var(--color-primario) !important;
}

div#MainContent_divCondiciones::-webkit-scrollbar {
    width: 5px !important;
}

div#MainContent_divCondiciones::-webkit-scrollbar-track {
    background: var(--color-fondo-suave) !important;
}

div#MainContent_divCondiciones::-webkit-scrollbar-thumb {
    background: var(--color-primario) !important;
}

div#MainContent_divCondiciones::-webkit-scrollbar-thumb:hover {
    background: var(--color-acento) !important;
}

/* Resumen de compra y pago */
h1#MainContent_h1TituloResumenCompra {
    text-align: center !important;
    margin-bottom: 3rem !important;
    font-size: clamp(28px, 3vw + 12px, 40px);
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--color-primario) !important;
}

div#MainContent_divPanelCobros .row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plan {
    max-width: 500px !important;
    background: linear-gradient(180deg, var(--color-primario) 0%, var(--color-secundario-1) 60%, var(--color-secundario-2) 100%) !important;
    border-radius: 15px !important;
}

div#MainContent_divImporteHTML {
    font-size: 3.5rem;
    padding-bottom: 2rem;
    padding-top: 2rem;
}

div#MainContent_divImporteHTML h1 {
    color: var(--color-fondo) !important;
    font-size: 3rem;
    letter-spacing: 2px;
}

.pricing-table h3 {
    background: transparent;
    color: var(--color-fondo) !important;
    text-shadow: none;
}

div#MainContent_divPanelImportes li, div#MainContent_divPanelImportes h1 {
    color: var(--color-fondo) !important;
    font-size: 1.5rem;
}

div#MainContent_divPanelImportes h1 {
    font-size: 2.3rem !important;
}

.pricing-table h3 span {
    height: 130px !important;
    width: 130px !important;
    line-height: 11.5rem !important;
    color: var(--color-primario) !important;
    box-shadow: 0px 0px 10px 2px var(--color-primario) !important;
    margin: 20px auto -50px !important;
}

div#MainContent_divPanelImagenesTarjeta img {
    width: 15rem !important;
    height: auto !important;
    max-width: 90vw !important;
}

.allTarjetas {
    margin-top: 0% !important;
}

div#MainContent_divPromociones {
    width: 100%;
    margin: 0px !important;
    border-radius: 0px;
    margin-top: 32px !important;
    margin-bottom: 28px !important;
    background: transparent !important;
    box-shadow: none !important;
}

input#MainContent_btnAplicarPromocion {
    border-color: var(--color-primario) !important;
    background-color: var(--color-primario) !important;
}

input#MainContent_btnAplicarPromocion:hover {
    border-color: var(--color-acento) !important;
    background-color: var(--color-acento) !important;
}

input#MainContent_txtCuponPromocion {
    box-shadow: inset 0px 0px 0px 0 var(--color-primario) !important;
}

input#MainContent_txtCuponPromocion:focus {
    transition: 0.1s;
    box-shadow: inset -1000px 0px 0px 0px color-mix(in srgb, var(--color-primario) 10%, transparent) !important;
}

a#MainContent_btnPagoTarjeta, input#MainContent_btnCancelar, input#MainContent_btnRecordar {
    background: var(--color-acento) !important;
    border-radius: 6px !important;
    border-color: var(--color-acento) !important;
}

a#MainContent_btnPagoTarjeta:hover, input#MainContent_btnCancelar:hover, input#MainContent_btnRecordar:hover {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-fondo) !important;
}

div#MainContent_divTransaccion {
    width: 100% !important;
    background: transparent;
    box-shadow: none !important;
    border: 0px !important;
    color: var(--color-error) !important;
}

div#MainContent_divTransaccion label {
    color: var(--color-primario) !important;
    font-size: 3rem !important;
}

.transaccion {
    background-color: var(--color-primario);
}

@media (max-width: 1200px) {
    div#MainContent_divPanelCobros .row .col-md-6 {
        margin: 0px !important;
    }
}

@media (max-width: 622px) {
    div#MainContent_divPanelCobros .row .col-md-6 {
        width: 95% !important;
    }
}

.resultPayment {
    list-style-type: none;
}

div.body-compra header.panel-heading.bg-white > div {
    position: relative;
}

div.body-compra header.panel-heading.bg-white > div > i {
    position: absolute;
    top: 27%;
    left: 32%;
}

#tituloInformacion, .panel-body-NuevoFamiliar {
    text-align: left !important;
    color: var(--color-texto);
}

h4#tituloInformacion {
    color: var(--color-fondo) !important;
}

.panel-body-NuevoFamiliar fieldset .form-group {
    margin-left: 0px !important;
}

.panel-body-NuevoFamiliar fieldset .form-group input {
    max-width: 32vh !important;
}

div#divContainerTratamientoDatos {
    width: 100%;
}

label#MainContent_lblInformacionDatosPersona {
    display: none;
}

/* ------------------------------------------------------------------ */
/* 6. ACTIVIDADES COLECTIVAS (AACC)                                    */
/* ------------------------------------------------------------------ */

div#filtrosParrilla {
    background: var(--color-fondo) !important;
}

/* Los márgenes negativos de las filas Bootstrap en secciones a sangre
   completa (sin container con padding) creaban scroll horizontal fantasma */
#filtros > .row,
.setup-content.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ANTIPARPADEO: el JS de la plataforma añade/quita .fadeThis a TODAS las
   celdas en cada movimiento del ratón. El tema pinta .vistaContenido al 80%
   de opacidad, así que cualquier diferencia entre el estado con y sin la
   clase parpadea. Solución: ambos estados idénticos (opacidad 1 siempre).
   La doble clase gana al tema también donde custom.css carga primero. */
div.vistaContenido.vistaContenido,
a.vistaContenido.vistaContenido {
    opacity: 1 !important;
    border-radius: 8px !important;
}

/* Sombra ESTÁTICA en las celdas: el hover de MaterialKit animaba la sombra
   de cada celda al cruzarla el cursor y la parrilla entera iba pulsando.
   El feedback de hover queda en un realce de brillo, que no mueve nada. */
div.vistaContenido.vistaContenido,
div.vistaContenido.vistaContenido:hover,
div.vistaContenido.vistaContenido:focus {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
    transition: filter 0.12s ease !important;
}

div.vistaContenido.vistaContenido:hover {
    filter: brightness(1.08) saturate(1.05) !important;
}

/* Hover de la agenda AACC más vistoso: elevación con sombra, anillo blanco
   y un velo de luz que barre la celda. Todo confinado a la celda bajo el
   cursor (:hover) y SIN transforms ni cambios de área — inmune al churn
   de fadeThis de la plataforma. La triple clase gana a MaterialKit, que
   en las páginas interiores carga después de custom.css. */
div.vistaContenido.vistaContenido.vistaContenido_AACC_Agenda {
    transition: filter 0.16s ease, box-shadow 0.16s ease !important;
}

div.vistaContenido.vistaContenido.vistaContenido_AACC_Agenda::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.10) 42%,
        transparent 65%);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

div.vistaContenido.vistaContenido.vistaContenido_AACC_Agenda:not(.no-disponible):hover {
    filter: brightness(1.12) saturate(1.15) !important;
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.32),
        inset 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
    z-index: 5;
}

div.vistaContenido.vistaContenido.vistaContenido_AACC_Agenda:not(.no-disponible):hover::before {
    opacity: 1;
}

.fadeThis {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

#dateAACC, #dateAALL {
    border-color: var(--color-primario) !important;
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

@media (max-width: 1200px) {
    #dateAACC {
        width: 100%;
    }
}

div#divNombreCentro {
    display: none !important;
}

/* Reloj de la parrilla pública: pastilla con la hora en azul corporativo */
div#cuentaAtrasContenedor {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde-suave);
    border-radius: 10px;
    padding: 6px 18px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primario) 8%, transparent);
}

div#cuentaAtrasContenedor label {
    color: var(--color-primario) !important;
    font-weight: 600;
}

label#CuentaAtras {
    color: var(--color-primario) !important;
    font-size: 2.4rem !important;
    letter-spacing: 1px;
    font-family: var(--fuente);
}

h4.nombreCentro {
    color: var(--color-primario);
}

h1#nombreCentro {
    color: var(--color-fondo) !important;
}

button#btnClosemodal {
    display: none !important;
}

button.close.btn.btn-white.btn-fab.btn-fab-mini.btn-round {
    opacity: 1 !important;
    color: var(--color-acento);
    box-shadow: none;
    font-size: 4rem;
    background: none !important;
    text-shadow: none;
}

button.close.btn.btn-white.btn-fab.btn-fab-mini.btn-round:hover {
    transition: 0.3s;
    transform: rotate(10deg) !important;
}

/* Parrilla de clases */
#tablaClasesColectivas > tbody > tr > td {
    height: 100%;
    background: var(--color-neutro) !important;
    border: 6px solid var(--color-fondo);
}

/* Cabeceras de día en color plano; columna de horas en claro */
th.horarioTDHead {
    border: 4px solid var(--color-fondo);
    background: var(--color-primario) !important;
    height: 60px !important;
}

th.horarioTD {
    border: 4px solid var(--color-fondo);
    background: var(--color-fondo) !important;
    border-left: 4px solid var(--color-acento) !important;
    box-shadow: inset 0 0 0 1px var(--color-borde-suave);
}

.horarioDIVHead {
    color: var(--color-fondo) !important;
    font-size: 1.7rem !important;
    letter-spacing: 1px;
    text-shadow: none !important;
}

.horarioDIV {
    color: var(--color-primario) !important;
    font-size: 1.5rem !important;
    font-weight: 700;
    text-shadow: none !important;
}

div#target {
    background: var(--color-fondo-suave);
    box-shadow: none !important;
    border-radius: 0px;
}

#fondoParrilla {
    z-index: 1;
    background: transparent;
}

.vistaContenido {
    height: 92px;
    border-radius: 8px;
    color: var(--color-fondo) !important;
    text-align: left !important;
    font-size: 15px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    text-shadow: 1px 1px 2px color-mix(in srgb, var(--color-primario) 80%, transparent) !important;
    border-top: 1px solid var(--color-fondo) !important;
}

.celda {
    border: 1px transparent solid !important;
}

.text-truncate {
    transition: none !important;
    text-align: center !important;
}

.text-truncate:hover {
    opacity: 1 !important;
}

/* Timeline (vista agenda / lista) */
.timeline {
    position: relative;
    padding: 30px 0;
    padding-left: 0;
    padding-right: 0;
    background: var(--color-fondo) !important;
    background-image: none !important;
}

.timeline .tm-body {
    position: relative;
    background: var(--color-fondo) !important;
    margin-top: -30px;
    padding: 30px 0;
}

.tm-title {
    background: transparent !important;
}

.timeline .tm-title {
    min-width: 180px;
    width: 100%;
    margin: 0px !important;
}

.tm-datetime-date {
    color: var(--color-fondo);
}

.timeline .tm-items > li .tm-datetime .tm-datetime-time {
    color: var(--color-primario);
    text-shadow: none !important;
    font-size: 18px;
    line-height: 1.3;
}

.col-xs-12.col-sm-12.col-md-12.col-lg-4.col-tm h2 b {
    color: var(--color-primario) !important;
}

div.timeline ol.tm-items div.col-xs-12.col-sm-12.col-md-12.col-lg-4.col-tm h2 > b,
div.timeline ol.tm-items div.tm-meta span {
    color: var(--color-texto) !important;
}

.tm-icon.ImagenTrabajador {
    display: none;
}

.tm-title .h5.text-uppercase {
    display: none;
}

/* Solo en pantallas pequeñas la hora va como etiqueta flotante;
   en escritorio se muestra en el margen izquierdo del timeline */
@media (max-width: 1200px) {
    .tm-info {
        position: absolute;
        right: 4px;
        z-index: 1;
    }
}

.tm-meta span {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}

/* En escritorio los datos de la clase (aforo, monitor, zona, duración)
   van en una fila con separación cómoda */
@media (min-width: 992px) {
    .tm-box .tm-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 20px;
    }

    .tm-box .tm-meta span {
        font-size: 15px !important;
        white-space: nowrap;
    }
}

.row-tm [class*="col-"] {
    display: flex;
    align-items: center;
    width: 100%;
}

.tm-body .row {
    width: 100%;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.timeline .tm-items > li .tm-box {
    border-radius: 14px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.timeline .tm-items > li .tm-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primario) 14%, transparent);
}

ol.tm-items li {
    padding: 0px !important;
}

.tm-box.appear-animation.fadeInRight.appear-animation-visible,
.tm-box.appear-animation.noPermitidaReserva.animated.appear-animation-visible {
    background-color: var(--color-fondo) !important;
}

.tm-box button.btn-danger {
    opacity: 1 !important;
    background: var(--color-error) !important;
    color: var(--color-fondo) !important;
    box-shadow: 0px 0px 3px 1px color-mix(in srgb, var(--color-error) 50%, transparent) !important;
}

.tm-box button.btn-danger:focus {
    animation-name: shake;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes shake {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(1px, 0, 0);
    }
}

.timeline .tm-body:after {
    display: none !important;
}

.userbox:after {
    display: none;
}

.col-tm h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    /* Tamaño fluido con aire a la derecha: los títulos largos ya no
       chocan con los iconos de aforo/monitor de la columna contigua */
    font-size: clamp(22px, 1.3vw + 12px, 30px);
    line-height: 1.2;
    padding-right: 16px;
    margin-bottom: 10px !important;
}

.form-group.pull-left.selectorFecha.is-empty {
    padding: 0;
    margin: 0;
    border: 0px;
}

@media (max-width: 1200px) {
    .form-group.pull-left.selectorFecha.is-empty {
        width: 100%;
    }

    .btn-group, .btn-group-vertical {
        position: relative;
        margin: 10px 1px;
        width: 100%;
    }

    button#btnLista, #btnParrilla, #btnAgenda {
        width: 33%;
        border-radius: 0px;
        margin-top: -30px;
    }

    .timeline .tm-items > li .tm-datetime {
        margin: 0;
        position: static;
        text-align: left;
    }

    .tm-datetime-date {
        display: none;
    }
}

.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom.pull-right {
    z-index: 9999 !important;
}

@media (min-width: 992px) {
    div.selectorFecha > input#dateAACC, input#dateAALL {
        padding-right: 2.5rem;
        width: 222px !important;
        box-sizing: border-box !important;
    }

    div.timeline > div.tm-body > div.tm-title {
        z-index: 1 !important;
    }

    .tm-box.appear-animation.animated.fadeInRight.appear-animation-visible {
        width: 98% !important;
    }
}

/* Vista de escritorio ancha */
@media (min-width: 1200px) {
    .selectorFecha label, .dropdown.pull-left label {
        visibility: hidden !important;
    }

    /* Celda del timeline como tarjeta compacta: el borde hereda el color
       de la actividad (inline) pero solo como filo izquierdo + marco fino */
    .timeline .tm-items > li .tm-box {
        padding: 8px 24px !important;
        border-radius: 12px !important;
        border-width: 2px 2px 2px 10px !important;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primario) 8%, transparent);
    }

    /* Columnas en una sola fila: título | datos | botón a la derecha */
    .tm-box .row-tm {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .tm-box .row-tm [class*="col-"] {
        width: auto !important;
    }

    .tm-box .row-tm > div:first-child {
        min-width: 30%;
    }

    .tm-box .row-tm > .add-block {
        margin-left: auto;
        position: static !important;
        justify-content: flex-end;
    }

    .tm-box .col-tm h2 {
        margin-bottom: 0 !important;
    }

    .tm-box button {
        border-radius: 8px !important;
        color: var(--color-acento) !important;
        font-size: 1.2em !important;
        padding: 10px 26px;
        background: transparent !important;
        border: 1px solid var(--color-acento) !important;
        box-shadow: none !important;
        float: none !important;
    }

    .tm-box button:hover {
        background: var(--color-acento) !important;
        color: var(--color-fondo) !important;
        box-shadow: 0px 4px 14px color-mix(in srgb, var(--color-acento) 45%, transparent) !important;
    }

    .timeline .tm-items > li .tm-box:after {
        visibility: hidden !important;
    }

    .timeline .tm-items > li .tm-icon {
        display: none !important;
    }

    .timeline .tm-body:after {
        background: var(--color-acento) !important;
        opacity: 1 !important;
    }

    .tm-datetime-date {
        color: var(--color-acento) !important;
        font-size: 1.5rem !important;
    }

    .timeline .tm-items > li .tm-datetime .tm-datetime-time {
        font-size: 3rem !important;
        color: var(--color-acento) !important;
        text-shadow: none !important;
    }

    h3.h5.text-uppercase {
        color: var(--color-acento) !important;
        font-size: 2rem !important;
    }

    .timeline .tm-items > li {
        padding: 0 0 0 170px !important;
    }

    #dateAACC {
        border-color: var(--color-resaltado-suave) !important;
    }

    .dropdown.pull-right.btn-imprimir {
        display: none !important;
    }

    th.horarioTDHead:first-child {
        background: var(--color-fondo) !important;
    }

    th.horarioTDHead, table#tablaClasesColectivas tbody td, th.horarioTD {
        border-radius: 12px !important;
        border: 6px solid var(--color-fondo) !important;
    }

    th.horarioTDHead {
        background: var(--color-primario) !important;
    }

    th.horarioTD {
        background: var(--color-fondo) !important;
        border-left: 6px solid var(--color-acento) !important;
    }

    #tablaClasesColectivas > tbody > tr > td {
        background: var(--color-neutro) !important;
    }

    button#btnCancelar {
        display: none !important;
    }
}

/* Botones lista/agenda y filtros */
a#btnAgenda, a#btnLista {
    opacity: 1 !important;
    background: var(--color-fondo) !important;
    color: var(--color-secundario-1) !important;
    text-shadow: none !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    border: 1px solid var(--color-resaltado-suave) !important;
}

a#btnAgenda:hover, a#btnLista:hover {
    background: var(--color-resaltado-suave) !important;
    color: var(--color-fondo) !important;
}

a#btnAgenda.selected, a#btnLista.selected {
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    border-color: var(--color-primario) !important;
}

/* Desplegables de filtro claros, a juego con el selector de fecha
   (antes eran bloques azul marino que apelmazaban la barra) */
div#filtroMonitores a.btn, div#filtroActividad a.btn, div#filtroAgrupacion a.btn {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    border: 1px solid var(--color-borde-suave) !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primario) 7%, transparent) !important;
    font-weight: 600;
}

div#filtroMonitores a.btn:hover, div#filtroActividad a.btn:hover,
div#filtroAgrupacion a.btn:hover,
div#filtroMonitores.open a.btn, div#filtroActividad.open a.btn,
div#filtroAgrupacion.open a.btn {
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
}

div#filtroMonitores a.btn .caret, div#filtroActividad a.btn .caret,
div#filtroAgrupacion a.btn .caret {
    color: var(--color-acento);
}

div#filtroMonitores a.dropdown-item:hover,
div#filtroActividad a.dropdown-item:hover,
div#filtroAgrupacion a.dropdown-item:hover {
    background: var(--color-resaltado-suave) !important;
}

div#filtroAgrupacion label, div#filtroMonitores label, div#filtroActividad label {
    visibility: visible !important;
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

/* Barra de filtros (fecha + vista + agrupación/actividad/monitor):
   todos los controles alineados por la base y con la misma altura.
   En vista Lista los controles van dentro de un div.pull-left extra. */
#filtros > .row > div[class*="col-"],
#filtros > .row > div[class*="col-"] > div[class="pull-left"],
#filtros > .row > div[class*="col-"] > .elementosFiltro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 10px;
}

#filtros > .row > div[class*="col-"] > div[class="pull-left"],
#filtros > .row > div[class*="col-"] > .elementosFiltro {
    flex: 1 1 auto;
    min-width: 0;
}

#filtros .selectorfechaParent {
    margin-top: 0 !important;
}

#filtros .btn-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#filtros #dateAACC, #filtros #dateAALL,
#filtros .btn-group.selectorVista .btn,
#filtros a.dropdown-toggle.filtros {
    height: 42px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
}

#filtros #dateAACC, #filtros #dateAALL {
    border: 1px solid var(--color-borde-suave) !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primario) 7%, transparent);
}

/* El grupo LISTA/AGENDA como segmento con extremos redondeados */
#filtros .btn-group.selectorVista .btn {
    border-radius: 0 !important;
}

#filtros .btn-group.selectorVista .btn:first-child {
    border-radius: 10px 0 0 10px !important;
}

#filtros .btn-group.selectorVista .btn:last-child {
    border-radius: 0 10px 10px 0 !important;
}

#filtros .btn-group.selectorVista .btn,
#filtros a.dropdown-toggle.filtros {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* La plataforma aplica opacity 0.8 solo a algunos filtros: se unifica */
#filtros a.dropdown-toggle.filtros {
    opacity: 1 !important;
}

/* En pantallas pequeñas la agenda semanal scrollea dentro de su contenedor
   en vez de desbordar la página entera */
@media (max-width: 1200px) {
    .container-fluid_AACC_Agenda {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* La vista parrilla sigue oculta (decisión original del centro) */
#filtros a.vistaParrilla,
#filtros .btn-group.selectorVista a.btn.vistaParrilla {
    display: none !important;
}

/* El flex anula los floats: el reloj recupera su hueco a la derecha
   (en vista Agenda es hijo directo; en vista Lista va dentro de un div) */
#filtros #cuentaAtrasContenedor,
#filtros .pull-left:has(#cuentaAtrasContenedor) {
    margin-left: auto;
}

/* Separación entre el texto del filtro y la flecha del desplegable
   (el inline-flex colapsa el espacio en blanco del HTML) */
#filtros a.dropdown-toggle.filtros .caret {
    margin-left: 6px;
}

.btn-group.selectorVista a, div#filtroAgrupacion a {
    opacity: 1 !important;
}

div#selectorVista label, div#selectorVista h3 {
    display: none !important;
}

div.agrupacionContenedor > div.panel-body > div.row div.btn-group > a {
    border-right: 1px solid var(--color-acento);
}

/* Ocultar vista parrilla en AACC */
div.dropdown.pull-left div.btn-group > a.vistaParrilla {
    display: none;
}

div#filtros > div.row > div.col-md-11 > div#selectorVista:nth-child(3) {
    display: none;
}

.dropdown.pull-left {
    z-index: 1 !important;
}

ol.breadcrumbs {
    margin-right: 25px !important;
}

.page-header .sidebar-right-toggle {
    display: none !important;
}

.leyendaInfo {
    display: none !important;
}

section.col-xs-12.col-sm-12.col-md-12.col-lg-12.panel.no-padding {
    box-shadow: none;
}

.col-xs-12.col-sm-12.col-md-12.col-lg-12.divTable {
    min-height: 1200px !important;
}

@media (max-width: 991px) {
    .col-xs-12.col-sm-12.col-md-12.col-lg-12.divTable {
        width: auto !important;
        min-height: 0 !important;
    }
}

/* Tablet / móvil */
@media (max-width: 1200px) {
    .col-tm.add-block {
        display: block;
        position: absolute;
        bottom: 42px;
        right: 25px;
    }

    .timeline .tm-items > li .tm-box:after {
        display: none;
    }

    a#btnLista, #btnAgenda {
        width: 50% !important;
        margin-top: 0 !important;
    }

    .col-md-11.col-lg-11.col-md-offset-1.col-lg-offset-1 {
        display: flex;
        flex-wrap: wrap;
    }

    div#filtroAgrupacion, div#filtroActividad, div#filtroMonitores {
        width: auto !important;
    }

    .btn.vistaContenidoT {
        color: var(--color-fondo) !important;
        right: -25px;
        background-color: var(--color-primario) !important;
        box-shadow: 2px 2px 6px color-mix(in srgb, var(--color-primario) 50%, transparent) !important;
        bottom: -42px;
    }

    label.label-control {
        color: var(--color-primario) !important;
        margin-left: 10px;
    }

    .timeline .tm-items > li .tm-datetime .tm-datetime-time {
        font-size: 15px;
        margin-top: 7px;
        margin-right: 8px;
        color: var(--color-texto) !important;
        text-shadow: none !important;
    }

    .vistaContenidoT {
        width: 175px;
        height: 50px;
        text-align: center;
        padding: 0px !important;
        right: -33px;
        position: absolute !important;
        background: color-mix(in srgb, var(--color-fondo) 59%, transparent) !important;
        border-radius: 0px !important;
        color: var(--color-texto) !important;
    }

    .pull-left {
        float: unset !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* El usuario (nombre + cerrar sesión) va a la derecha de su fila;
       antes un margen negativo lo escondía detrás del logo */
    .userbox {
        float: right !important;
        margin: 8px 17px 0 0 !important;
    }

    .userbox .profile-info {
        text-align: right;
    }

    button#btnCancelar {
        display: none !important;
    }
}

/* Timeline compacta en móvil */
@media (max-width: 576px) {
    div.timeline > div.tm-body > ol.tm-items > li div.tm-box div.tm-meta {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box > div.row-tm > div.add-block:nth-child(3) {
        position: static !important;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box > div.row-tm {
        display: flex !important;
        flex-direction: column !important;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box div.tm-meta span {
        font-size: 1.8rem !important;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box button.btn {
        position: static !important;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box {
        padding: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    .timeline .tm-items > li .tm-box {
        background: var(--color-fondo) !important;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box > div.row-tm > div:not(:nth-child(3)) {
        padding: 10px 20px !important;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box > div.row-tm > div:nth-child(2) {
        padding-top: 0 !important;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box > div.row-tm > div:nth-child(2) > div.tm-meta > span {
        flex-basis: 45% !important;
        padding: 0 !important;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    div.timeline > div.tm-body > ol.tm-items > li div.tm-box > div.row-tm > div > h2 {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 350px) {
    div.timeline > div.tm-body > ol.tm-items > li div.tm-box > div.row-tm > div:nth-child(2) > div.tm-meta > span {
        flex-basis: 100% !important;
    }
}

/* Datepicker en color de marca */
.datepicker .table-condensed > thead > tr > th {
    padding: 0;
    background: var(--color-fondo);
}

.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover,
.datepicker table tbody tr td.day.active, .datepicker table tr td span.active.active {
    color: var(--color-fondo) !important;
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.datepicker table tbody tr td.day:hover, .datepicker table tr td span.active:hover {
    background-color: var(--color-acento) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-fondo) !important;
}

.datepicker table thead tr:first-child th:hover {
    background: var(--color-borde-suave);
}

th.prev.disabled, th.next.disabled, th.prev.disabled:hover, th.next.disabled:hover,
td.day.disabled:hover {
    color: var(--color-deshabilitado) !important;
    opacity: 0.5 !important;
    background: var(--color-fondo) !important;
}

th.prev span, th.next span {
    background: transparent !important;
}

th.prev, th.next, th.picker-switch, th.datepicker-switch {
    color: var(--color-primario) !important;
    background: var(--color-fondo) !important;
    font-size: 1.5rem !important;
}

th.prev:hover, th.next:hover, th.picker-switch:hover, th.datepicker-switch:hover {
    transition: 0.1s !important;
    background: transparent !important;
    color: var(--color-acento) !important;
}

/* Modal de reserva pública */
div.modal.fade.in#modalReservaPublic div.card > div.front > div#imagenAC {
    height: auto !important;
    z-index: 4 !important;
}

div#modalReserva div.content div.footer.btn-center {
    border-top: 1px solid var(--color-deshabilitado) !important;
}

.modal-dialog a#btnRegistrar, .modal-dialog a#btnLogin {
    border: 1px solid transparent;
    font-size: 1rem;
    border-radius: 8px !important;
    width: 100% !important;
    margin-top: 2.3rem !important;
    background: var(--color-primario) !important;
}

.modal-dialog a#btnRegistrar:hover, .modal-dialog a#btnLogin:hover {
    background: var(--color-fondo) !important;
    border: 1px solid var(--color-acento) !important;
    color: var(--color-acento) !important;
}

div#divMenu > nav > ul#mainMenu li.dropdown.open ul.dropdown-menu li a {
    color: var(--color-texto) !important;
}

.main.mainCard {
    height: auto !important;
}

div#modalReservaPublic.modal.fade.in div.mainCard td > button#btnLogin.btn.btn-success:hover {
    font-size: 12px;
    box-shadow: 0 10px color-mix(in srgb, var(--color-acento) 15%, transparent);
}

@media (max-width: 750px) {
    .card-container, .front, .back {
        width: 100% !important;
    }
}

/* ------------------------------------------------------------------ */
/* 7. AALL / SERVICIOS / CURSILLOS                                     */
/* ------------------------------------------------------------------ */

/* Fondos por actividad (las imágenes viven en /Personalizar/Img) */
div[actividadlibre="1"] {
    background-image: url(/Personalizar/Img/basket.jpg) !important;
}

div[actividadlibre="4"] {
    background-image: url(/Personalizar/Img/futbol.jpg) !important;
    background-position: 0px 0px !important;
}

div[actividadlibre="5"] {
    background-image: url(/Personalizar/Img/basket.jpg) !important;
    background-position: 0px -35px !important;
}

div[actividadlibre="6"] {
    background-image: url(/Personalizar/Img/squash.jpg) !important;
}

div[actividadlibre="11"] {
    background-image: url(/Personalizar/Img/padel.jpg) !important;
}

div[idactividad="14"] {
    background-image: url(/Personalizar/Img/reserva/padel.jpg) !important;
}

div[idactividad="18"] {
    background-image: url(/Personalizar/Img/reserva/tenis.jpg) !important;
}

/* Servicios */
div[agrupacion='1000'], div[servicio='6'] {
    background-image: url(/Personalizar/Img/personal.jpg) !important;
    background-size: cover !important;
}

div[agrupacion='1001'], div[servicio='3'] {
    background-image: url(/Personalizar/Img/fisio.jpg) !important;
    background-size: cover !important;
}

div[servicio='4'] {
    background-image: url(/Personalizar/Img/osteo.jpg) !important;
    background-size: cover !important;
}

div[agrupacion='1021'] {
    background-image: url(/Personalizar/Img/estetica.jpg) !important;
    background-size: cover !important;
}

div[servicio='1'] {
    background-image: url(/Personalizar/Img/laser.jpg) !important;
    background-size: cover !important;
}

section[role="main"].content-body section.col-xs-12 div.contenedorBotones > div[idagrupacion='1025'] {
    background-image: url(/Personalizar/Img/spinning.jpg) !important;
}

section[role="main"].content-body section.col-xs-12 div.contenedorBotones > div[idagrupacion='1023'] {
    background-image: url(/Personalizar/Img/yoga.jpg) !important;
}

.bono.card.card-just-text.card-with-border.col-xs-12.col-sm-6.col-md-3.col-lg-3 {
    background-image: url(/Personalizar/Img/padel2.jpg) !important;
}

/* Parrilla de reservas: cuadrícula limpia sobre fondo neutro
   (la plataforma ponía una foto de fondo con las celdas invisibles) */
/* Doble clase para ganar a la hoja del tema, que carga después
   que custom.css en el área privada */
div.Horarios.Horarios {
    background: var(--color-neutro) !important;
    background-image: none !important;
    border-radius: 0 0 12px 12px;
}

.Horarios .vistaContenido {
    opacity: 1 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--color-acento) !important;
    border: 2px solid var(--color-fondo) !important;
    border-radius: 8px !important;
    cursor: pointer;
}

/* Franjas no disponibles: rayado sutil en vez del negro al 50%
   que pinta la plataforma */
.Horarios div.nodisponible {
    background: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--color-deshabilitado) 30%, transparent) 0 8px,
        transparent 8px 16px
    ) !important;
}

/* Los huecos disponibles se etiquetan como libres */
.Horarios .vistaContenido::after {
    content: "LIBRE";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-fondo);
}

.Horarios .vistaContenido:hover {
    background: var(--color-primario) !important;
}

@media (min-width: 592px) {
    .ejeHoras {
        padding-right: 10px !important;
        color: var(--color-primario) !important;
    }
}

/* Títulos de sección */
h1.sectiontitle, h1.cursillotitle {
    margin: 4rem auto 6rem !important;
    color: var(--color-primario) !important;
    border: none !important;
    width: auto !important;
    max-width: 90%;
    text-align: center;
    position: relative;
    padding-bottom: 16px;
    font-weight: 700;
}

/* Subrayado corto turquesa en lugar de las líneas superior/inferior */
h1.sectiontitle:after, h1.cursillotitle:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-acento);
}

@media (max-width: 991px) {
    h1.sectiontitle {
        display: none;
    }
}

h1#MainContent_h2LocalizacionCentro {
    color: var(--color-fondo) !important;
}

/* Cards de actividad */
.content.divNombreDescripcionALPublic {
    padding: 0px !important;
}

.content.divNombreDescripcionALPublic h4 {
    width: 100% !important;
    margin-top: 0px !important;
    padding: 0px !important;
    border-bottom: 2px solid var(--color-acento) !important;
}

.content.divNombreDescripcionALPublic .description {
    color: var(--color-fondo) !important;
    text-shadow: 1px 1px 3px color-mix(in srgb, var(--color-primario) 80%, transparent) !important;
    font-size: 1.5rem !important;
    padding: 15% !important;
    padding-top: 0px !important;
}

h4.title.title-modern {
    padding-top: 3rem !important;
    color: var(--color-fondo) !important;
    text-shadow: 1px 1px 3px color-mix(in srgb, var(--color-primario) 80%, transparent) !important;
    border-bottom: 2px solid var(--color-acento) !important;
}

h4.title-modern.titulogrupo {
    color: var(--color-fondo) !important;
}

.card[data-background="image"] .title, .card[data-background="image"] .stats,
.card[data-background="image"] .category, .card[data-background="image"] .description,
.card[data-background="image"] .content, .card[data-background="image"] .footer,
.card[data-background="image"] small, .card[data-background="image"] a,
.card[data-background="color"] .title, .card[data-background="color"] .stats,
.card[data-background="color"] .category, .card[data-background="color"] .description,
.card[data-background="color"] .content, .card[data-background="color"] .footer,
.card[data-background="color"] small, .card[data-background="color"] a {
    color: var(--color-fondo) !important;
}

.card[data-background="image"] .filter, .card[data-background="color"] .filter {
    border-radius: 20px !important;
}

.card[data-background="image"] .filter {
    opacity: 0.1 !important;
}

.card .footer {
    padding: 35px 0 0 !important;
}

.actividadlibre {
    height: 400px !important;
    border-radius: 20px !important;
}

.actividadlibre:after {
    border: 0px !important;
}

div#filterAL {
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--color-primario) 57%, transparent) !important;
    opacity: 0 !important;
}

div#filterAL:hover {
    filter: blur(30px) !important;
    transition: 0.1s;
}

div#filterS {
    background: var(--color-acento) !important;
}

.agrupacion {
    background: var(--color-acento) !important;
    border-radius: 20px !important;
}

.agrupacion:after {
    border: none !important;
}

.agrupacion div#filterS {
    background: var(--color-primario) !important;
    border-radius: 20px !important;
}

.actividadNombre {
    text-align: center !important;
}

h4.actividadNombre, p.actividadDescripcion {
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

button#btnReserva {
    background: var(--color-primario);
    opacity: 1;
    border-radius: 7px !important;
    box-shadow: none !important;
    border: 1px solid var(--color-primario);
    width: 150px !important;
    font-size: 15px;
}

button#btnReserva:hover {
    background: var(--color-fondo);
    color: var(--color-primario);
}

h2.nombreActividadLibre {
    background: var(--color-fondo) !important;
    width: auto !important;
    max-width: 70%;
    margin: 0 auto !important;
    letter-spacing: 2px;
    padding: 10px 34px;
    border-radius: 12px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primario) 12%, transparent);
    border-bottom: 4px solid var(--color-acento);
}

.main {
    background: color-mix(in srgb, var(--color-fondo) 67%, transparent) !important;
}

.main.main-raised.col-md-12 {
    background: var(--color-fondo) !important;
}

.form-group .checkbox label, .form-group .radio label, .form-group label {
    color: var(--color-texto) !important;
    font-weight: 700 !important;
    padding-left: 0rem;
}

td.importeTotal.importePorPersona {
    width: 100px !important;
}

/* Botones lista / parrilla */
button#btnLista, button#btnParrilla {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    font-weight: bold !important;
    border: 1px solid var(--color-primario) !important;
    opacity: 0.5;
}

button#btnLista.selected, button#btnParrilla.selected,
button#btnLista:hover, button#btnParrilla:hover {
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    opacity: 1 !important;
}

.cabecera {
    box-sizing: border-box;
    color: var(--color-fondo);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    background: var(--color-primario) !important;
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: none;
}

/* Hover suave: la celda conserva el color de su actividad y solo
   se eleva ligeramente (antes saltaba de tamaño y cambiaba de color) */
div.colHorario .vistaContenido {
    transition: filter 0.15s ease, box-shadow 0.15s ease !important;
}

div.colHorario .vistaContenido:hover {
    filter: brightness(1.1) saturate(1.08) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primario) 35%, transparent) !important;
    z-index: 9999 !important;
}

/* Cursillos */

/* Campamentos → Cursillos en móvil: la plataforma deja el RESUMEN COMPRA
   con position:fixed abajo y el footer lo pintaba encima, cortándolo.
   En flujo normal queda tras la lista de menores y no choca con nada. */
@media (max-width: 767px) {
    div#cursillosFamiliaresResumen {
        position: static !important;
        width: 100% !important;
        margin-top: 12px;
    }
}

.content.divNombreCursillosPrivate {
    padding: 0px !important;
    background: transparent !important;
}

.content.divNombreDescripcionCursillosPrivate {
    height: 40rem !important;
}

h4.title.title-modern.tituloCursillo-modern {
    padding-top: 120px !important;
    text-align: left !important;
    font-size: 1.8rem !important;
    color: var(--color-acento) !important;
    text-shadow: none !important;
}

h6.title.title-modern.descripcionCursillo-modern {
    text-align: left !important;
    color: var(--color-fondo-suave) !important;
    letter-spacing: 1px;
    text-shadow: none !important;
    font-size: 1.3rem !important;
    margin-top: -5px !important;
    text-transform: capitalize !important;
}

h6.title.title-modern.descripcionCursillo-modern:nth-child(3):before {
    content: "Duracion: ";
}

div#filterC {
    background: transparent !important;
}

.cursillogrupo div#filterS {
    background: var(--color-primario) !important;
    opacity: 1 !important;
}

.cursillogrupo {
    min-width: auto !important;
}

.cursillo {
    display: inline-flex;
    min-width: 320px;
    min-height: 170px;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 5px !important;
    border: 1px solid var(--color-primario) !important;
    box-shadow: 0px 2px 12px color-mix(in srgb, var(--color-primario) 35%, transparent) !important;
}

.cursillo:hover {
    box-shadow: 0px 4px 20px color-mix(in srgb, var(--color-primario) 45%, transparent) !important;
}

.cursillo.card.card-with-border:after {
    position: absolute;
    display: block;
    width: 100% !important;
    height: calc(100% - 140px) !important;
    content: "";
    top: 120px !important;
    left: 0px !important;
    border-radius: 0px !important;
    border: 1px solid var(--color-primario) !important;
    background: color-mix(in srgb, var(--color-primario) 79%, transparent) !important;
}

/* Imágenes de cursillos (existen en el servidor) */
.cursillo[id="58"] {
    background: url(/Personalizar/Img/cursillos/piscina.jpg) !important;
    background-size: cover !important;
}

.cursillo[id="54"] {
    background: url(/Personalizar/Img/cursillos/piscina_kid.jpg) !important;
    background-size: cover !important;
}

.cursillo[id="29"], .cursillo[id="53"] {
    background: url(/Personalizar/Img/cursillos/strecth.jpg) !important;
    background-size: cover !important;
    background-position: 0px -180px !important;
}

.cursillo[id="56"] {
    background: url(/Personalizar/Img/cursillos/futbol.jpg) !important;
    background-size: cover !important;
}

.agrupacion[id="1009"] {
    background: url(/Personalizar/Img/cursillos/piscina.jpg) !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
}

.agrupacion[id="1007"] {
    background: url(/Personalizar/Img/cursillos/strecth.jpg) !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
}

.agrupacion[id="40"] {
    background: url(/Personalizar/Img/cursillos/piscina_kid.jpg) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 576px) {
    .agrupacion {
        min-width: 100% !important;
    }
}

.content.divNombreDescripcionCursillosPrivateGrupos {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.content.divNombreDescripcionCursillosPrivateGrupos .btndiv.btn-group {
    display: flex;
    justify-content: center;
}

button.btn-horario.btn.btn-info {
    box-shadow: none !important;
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    border: 2px solid var(--color-primario) !important;
    border-right: none !important;
}

button.btn-inscribirse.btn.btn-success {
    box-shadow: none !important;
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    border: 2px solid var(--color-primario) !important;
    border-left: none !important;
}

button.btn-horario.btn.btn-info:hover,
button.btn-inscribirse.btn.btn-success:hover {
    transition: 0.2s;
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
}

.tituloHorarioFondo, .imagenHorario {
    background: var(--color-primario) !important;
}

h2.tituloHorario {
    letter-spacing: 1px;
    margin: 0px !important;
    text-align: left !important;
    color: var(--color-fondo) !important;
    text-shadow: none !important;
    border-bottom: 2px solid var(--color-acento) !important;
    width: 150px;
}

h4.cursilloNombre {
    color: var(--color-primario) !important;
    font-size: 3rem !important;
    border-bottom: 3px solid var(--color-primario) !important;
    padding-bottom: 10px !important;
}

p.cursilloDescripcion, p.periodicidad {
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

table#tablaPrecios {
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

.panel-body.panel-body-ModalCursillos hr {
    border-bottom: 0px solid var(--color-primario) !important;
}

#imagenCursillo {
    height: 69px !important;
    background: var(--color-primario) !important;
}

#imagenAL2 {
    background: var(--color-primario) !important;
    height: 69px !important;
}

.importeTotalcircular {
    margin: 0px 0px 0px auto !important;
}

.panel-heading-icon.bg-primary {
    height: 50px !important;
    background: transparent !important;
    color: var(--color-acento) !important;
    font-weight: bold !important;
    border-radius: 0px !important;
    line-height: 40px !important;
}

button#btnLogin, button#btnRegistrar {
    height: 50px !important;
    border-radius: 7px !important;
    width: 120px !important;
    background: var(--color-primario) !important;
    opacity: 1 !important;
    border: 1px solid var(--color-primario) !important;
    box-shadow: none !important;
}

button#btnLogin:hover, button#btnRegistrar:hover {
    transition: 0.2s !important;
    background: var(--color-fondo) !important;
    text-shadow: none !important;
    border: 1px solid var(--color-acento) !important;
    color: var(--color-acento) !important;
}

h4.resTitle {
    font-size: 25px !important;
}

.instrucciones, .selectorFecha {
    text-align: left !important;
}

li.nav-item.list-group-item {
    border: none !important;
    padding-left: 0px !important;
}

@media (max-width: 991px) {
    table.table.table-striped.table-bordered.tablalistas th:nth-child(3),
    table.table.table-striped.table-bordered.tablalistas th:nth-child(4),
    table.table.table-striped.table-bordered.tablalistas td:nth-child(3),
    table.table.table-striped.table-bordered.tablalistas td:nth-child(4) {
        display: none !important;
    }

    .modal-horarios .modal-dialog {
        margin: 0px !important;
        width: 100% !important;
    }
}

.modal-reserva .footer * {
    margin: 3px !important;
}

/* Servicios: botones de zona y monitor */
button#btnZona, button#btnMonitor {
    background: var(--color-primario) !important;
    box-shadow: none !important;
    border: 2px solid var(--color-primario) !important;
    color: var(--color-fondo) !important;
    font-weight: bold !important;
    font-size: 13px !important;
}

button#btnZona:hover, button#btnMonitor:hover,
button#btnZona.selected, button#btnMonitor.selected {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    box-shadow: 0px 0px 3px 0px var(--color-acento) !important;
}

/* Cursillos familiares */
div#ListaDisponibles {
    border-right: 3px solid var(--color-acento) !important;
}

div#ListaDisponibles .panel {
    width: 100% !important;
    box-shadow: 0px 0px 3px 0px var(--color-acento);
}

div#ListaDisponibles .cursillo {
    min-height: auto !important;
}

.contenedorAgrupacion {
    background: transparent !important;
    box-shadow: none !important;
}

.contenedorAgrupacion .agrupacionTituloContenedor {
    background: var(--color-fondo) !important;
    border: 1px solid var(--color-acento);
}

.contenedorAgrupacion .agrupacionTituloContenedor h3 {
    color: var(--color-primario) !important;
    font-weight: bold !important;
    margin: 10px 0px 10px 10px !important;
}

.contenedorAgrupacion .agrupacionTituloContenedor .filter {
    opacity: 1 !important;
}

.contenedorAgrupacion .btn-group .btnHorario,
.contenedorAgrupacion .btn-group .btn-bloquearCursillo, .btnNext {
    background: var(--color-primario) !important;
    opacity: 1 !important;
    border: 1px solid var(--color-primario) !important;
    box-shadow: none !important;
    font-weight: bold !important;
}

.contenedorAgrupacion .btn-group .btnHorario:hover,
.contenedorAgrupacion .btn-group .btn-bloquearCursillo:hover, .btnNext:hover {
    background: var(--color-fondo) !important;
    opacity: 1 !important;
    border: 1px solid var(--color-primario) !important;
    color: var(--color-primario) !important;
    box-shadow: none !important;
    font-weight: bold !important;
}

.nombreCarroCursillo {
    font-weight: bold !important;
    letter-spacing: 0.2px;
    margin-left: 17px !important;
}

span.grupodesc, span.grupoimp {
    color: var(--color-secundario-1) !important;
    font-weight: bold !important;
}

.totalTexto {
    font-weight: bold !important;
    font-size: 18px !important;
    letter-spacing: 0.1px !important;
    padding-top: 3px !important;
}

.rowTotalImporte .importe {
    color: var(--color-secundario-1) !important;
}

.contenedorBotones.row.row-flex.row-flex-wrap.row-nomag {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.card.card-just-text.card-with-border {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card.card-just-text.card-with-border:hover {
    transform: translateY(-4px);
    box-shadow: 0px 10px 24px color-mix(in srgb, var(--color-primario) 28%, transparent) !important;
}

/* Partidos ocultos por decisión del centro */
a#lblMenuPartidos, a#lblPartidos {
    display: none;
}

div.panel-body-ListaPartidos {
    background-color: color-mix(in srgb, var(--color-fondo-suave) 33%, transparent) !important;
}

div.panel-body-ListaPartidos div.panel-body-InicioListaPartidos {
    background-color: color-mix(in srgb, var(--color-texto) 24%, transparent) !important;
}

.panel-body.panel-body-FichaPartidos * {
    color: var(--color-primario) !important;
}

/* Pestañas perfil partidos en móvil */
@media (max-width: 576px) {
    section[role="main"].content-body ul.nav.nav-tabs.tabs-primary.tabs-partidos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    section[role="main"].content-body ul.nav.nav-tabs.tabs-primary.tabs-partidos > li {
        flex-basis: 50%;
    }

    section[role="main"].content-body ul.nav.nav-tabs.tabs-primary.tabs-partidos li:last-child {
        flex-basis: 100%;
    }

    section[role="main"].content-body ul.nav.nav-tabs.tabs-primary.tabs-partidos > li > a {
        border-radius: 0 !important;
    }
}

/* ------------------------------------------------------------------ */
/* 8. ÁREA PRIVADA                                                     */
/* ------------------------------------------------------------------ */

/* Fondo corporativo suave en el cuerpo */
section.content-body {
    background: var(--img-fondo-privada) !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

section.content-body .panel {
    background: var(--color-fondo) !important;
}

section.content-body > h2 {
    display: none !important;
}

/* Cabecera del área privada */
.logo-container {
    background: var(--color-fondo) !important;
    border: 0px !important;
}

.header .header-right {
    background: var(--color-fondo) !important;
}

/* En pantallas medianas/pequeñas la cabecera pasa a dos filas
   (estas reglas SOLO aplican hasta 1200px; en escritorio manda la plantilla) */
@media (max-width: 1200px) {
    .header .logo img {
        color: transparent;
        width: 100% !important;
        height: 35px;
        max-width: 25rem !important;
    }

    .header .header-right {
        float: none !important;
        height: 60px;
        margin-top: 60px;
        width: 100%;
    }

    .header .toggle-sidebar-left {
        background: var(--color-fondo) !important;
        color: var(--color-primario) !important;
        border-radius: 0px !important;
        right: 0px !important;
        top: 14px !important;
        width: 45px !important;
        height: 30px !important;
        line-height: 28px !important;
    }
}

span#spLayoutTipoDeCliente {
    padding-left: 2%;
    border-left: 3px solid var(--color-primario);
    border-radius: 0px;
}

nav.container-fluid .buttons {
    display: none !important;
}

ol.breadcrumbs * {
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

.page-header h2 {
    border-bottom-color: var(--color-acento) !important;
}

button#btnMultiinstalacion {
    display: none;
}

a.dropdown-toggle.dropdownGruposFamiliares ul.dropdown-menu:nth-child(1n) {
    display: none !important;
}

li#liGruposFamiliares ul.nav.nav-children li:nth-child(2) {
    display: none;
}

li#liHistoricoReservas, li#liTitularExterno, li#liInvitaciones {
    display: none !important;
}

/* Menú lateral */
.sidebar-title {
    background: var(--color-fondo) !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    color: var(--color-primario) !important;
}

.sidebar-left .sidebar-header .sidebar-toggle, header.page-header {
    border: 0px !important;
    background: var(--color-fondo) !important;
}

.sidebar-left .sidebar-header .sidebar-toggle i {
    font-size: 2.5rem !important;
}

.sidebar-left .sidebar-header .sidebar-toggle i:hover {
    color: var(--color-acento) !important;
}

.nano-content {
    background: var(--color-fondo) !important;
}

html.no-overflowscrolling .nano > .nano-pane > .nano-slider {
    background: transparent !important;
}

.sidebar-toggle.hidden-xs i, div#divpadre {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

.nav-expanded div#divpadre {
    background: var(--color-resaltado-suave) !important;
}

div#divpadre:hover, div#divhijo:hover {
    color: var(--color-primario) !important;
    background: var(--color-resaltado-suave) !important;
}

ul.nav-main li .nav-children {
    background: var(--color-fondo) !important;
}

ul.nav-main > li.nav-parent > a {
    background: var(--color-fondo) !important;
}

ul.nav-main > li.nav-expanded > a {
    background: var(--color-resaltado-suave) !important;
}

ul.nav-main li.nav-parent > a:after {
    font-weight: bold !important;
    font-size: 2rem !important;
    color: var(--color-primario) !important;
}

nav#menu ul.nav.nav-children a {
    color: var(--color-primario) !important;
    font-weight: bold !important;
    background: var(--color-fondo) !important;
}

nav#menu ul.nav.nav-children a:hover {
    transition: 0.2s;
    background: var(--color-fondo) !important;
    border-left: 5px solid var(--color-acento) !important;
    color: var(--color-acento) !important;
}

#etiquetafix {
    text-align: left !important;
}

/* La página trae un <style> inline con badges azul/rojo genéricos */
.sidebar-left .nav-main .badge {
    background-color: var(--color-acento) !important;
}

.badge.badgePagosPendientes {
    background-color: var(--color-acento) !important;
}

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

.open li a:hover {
    color: var(--color-fondo) !important;
    background: var(--color-primario) !important;
}

.dropdown-menu {
    background-color: var(--color-fondo) !important;
}

ul.dropdown-menu > li > a {
    background-color: var(--color-fondo);
}

li.dropdown ul li, li.dropdown ul li:hover {
    background-color: var(--color-fondo-suave);
}

ul#idiomaPanel {
    padding-left: 15px;
}

/* Dashboard */
.dashpanel {
    box-shadow: 0px 4px 14px color-mix(in srgb, var(--color-primario) 18%, transparent) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.dashpanel h4 {
    color: var(--color-fondo) !important;
    font-size: clamp(24px, 2vw + 12px, 40px) !important;
}

.dashpanel .row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* El gráfico de accesos se pinta en canvas con textos grises:
   necesita tarjeta blanca para leerse bien */
.dashaccesos > .dashpanel {
    background: var(--color-fondo) !important;
    border-top: 4px solid var(--color-acento);
}

.dashaccesos > .dashpanel h4 {
    color: var(--color-primario) !important;
}

.dashpagos > .dashpanel {
    background-color: var(--color-secundario-1) !important;
}

.dashcolectivas > .dashpanel {
    background: var(--color-acento) !important;
}

.dashlibres > .dashpanel {
    background: var(--color-secundario-2) !important;
}

.dashservicios > .dashpanel {
    background: var(--color-secundario-3) !important;
}

.dashcursillos > .dashpanel {
    background: var(--color-secundario-4) !important;
}

/* El contador viene de la plataforma con tamaño fluido en vw y desborda su
   columna tapando el icono: acotarlo para que quepa en la mitad del panel */
.dashpanel .dashtext {
    font-size: clamp(22px, 2.2vw, 34px) !important;
}

.dashpagos span {
    font-size: clamp(22px, 2.2vw, 34px) !important;
}

span.dashtext.countlibres, span.dashtext.countpagos {
    font-size: 3rem !important;
}

.fa-credit-card, .fa-dribbble {
    font-size: 8rem !important;
}

/* El icono del panel de cursillos (raqueta) solo existe en FontAwesome 5,
   pero hereda la fuente de FA4 y pinta un cuadrado vacío: forzar FA5 */
.fa-table-tennis {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Los paneles del dashboard vienen de la plataforma con ancho fijo en px
   (más anchos que la pantalla de un móvil): nunca dejarles desbordar */
div.dash-flex.dash-flex, div.dash-flex.dash-flex > .dashpanel {
    max-width: 100% !important;
}

@media (max-width: 767px) {
    /* En móvil las columnas texto/icono/tabla se apilan: sin el flex-row
       forzado de escritorio, que encoge las tablas y corta los iconos */
    .dashpanel .row {
        display: block !important;
    }

    .dashpanel .row [class*="col-sm"] {
        width: 100% !important;
        padding: 2% 5% !important;
    }

    .dashpanel table {
        width: 100% !important;
    }

    .dashpanel .dashicon {
        font-size: 70px !important;
    }

    .dashpanel .dashtext {
        font-size: 2.8rem !important;
    }

    .dashpagos span {
        font-size: 2.8rem !important;
    }

    .fa-credit-card, .fa-dribbble {
        font-size: 6rem !important;
    }
}

.publicidad {
    font-size: clamp(20px, 2vw + 10px, 35px);
    padding: 1.5rem;
}

td.publicidad h2.tituloAreaPrivada {
    font-size: clamp(26px, 2vw + 16px, 42px) !important;
}

td.publicidad p.bodyAreaPrivada {
    font-size: 2.2rem !important;
}

.infoAreaPrivada p {
    font-size: 2rem;
    color: var(--color-secundario-1);
}

h1.textoAreaPrivada {
    font-size: clamp(26px, 2vw + 16px, 40px);
    letter-spacing: 1px;
    color: var(--color-primario);
}

a#carritoRef {
    color: var(--color-primario) !important;
    font-weight: bold;
    font-size: clamp(18px, 2vw + 10px, 28px) !important;
}

/* Tienda: botón de añadir al carrito en color de marca */
div[class*="add-to-cart"] {
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    transition: background-color .25s ease;
    cursor: pointer;
}

div[class*="add-to-cart"]:hover {
    background: var(--color-acento) !important;
}

/* Carrito en móvil: la tabla de 6 columnas no cabe y partía las
   palabras letra a letra → cada artículo pasa a ser una tarjeta */
@media (max-width: 576px) {
    table.shop_table.cart thead {
        display: none;
    }

    table.shop_table.cart, table.shop_table.cart tbody, table.shop_table.cart tfoot,
    table.shop_table.cart tr, table.shop_table.cart td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    table.shop_table.cart tbody tr {
        border: 1px solid var(--color-borde-suave);
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 12px;
        position: relative;
        background: var(--color-fondo);
    }

    table.shop_table.cart td {
        border: 0 !important;
        padding: 4px 0 !important;
        text-align: left !important;
        white-space: normal;
    }

    table.shop_table.cart td.product-name {
        font-weight: 600;
        padding-right: 34px !important;
    }

    table.shop_table.cart td.product-price::before {
        content: "Precio: ";
        font-weight: 600;
        color: var(--color-primario);
    }

    table.shop_table.cart td.product-subtotal::before {
        content: "Total: ";
        font-weight: 600;
        color: var(--color-primario);
    }

    table.shop_table.cart td.product-remove {
        position: absolute;
        top: 10px;
        right: 12px;
        width: auto !important;
        padding: 0 !important;
    }

    table.shop_table.cart td.product-thumbnail img {
        max-width: 56px;
        height: auto;
    }
}

/* Paneles: tarjetas redondeadas con cabecera azul corporativo */
.panel-heading {
    border-radius: 0px !important;
    background: var(--color-primario) !important;
}

.panel-heading h2 {
    color: var(--color-fondo) !important;
}

.panel-body {
    border-radius: 0px !important;
}

section.content-body .panel {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 14px color-mix(in srgb, var(--color-primario) 12%, transparent);
    border: 0;
}

.panel-title {
    color: var(--color-primario) !important;
}

header.panel-heading.portlet-handler {
    background: var(--color-fondo) !important;
    border: none !important;
}

header.panel-heading.portlet-handler h2 {
    color: var(--color-primario) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
}

/* Datos personales */
legend#lgTokenizarTarjeta {
    display: none !important;
}

legend#lgDatosPersonales, legend#lgDatosAcceso, legend#lgDatosContacto,
legend#lgDatosBancarios, legend#lgLOPD, legend#lgDatosATerceros,
legend#lgRedesSociales, legend#lgTarjetasTokens {
    padding-bottom: 1rem !important;
    color: var(--color-acento) !important;
    font-size: 2.5rem !important;
    border-bottom: 2px solid var(--color-acento) !important;
    width: 25% !important;
    min-width: 240px;
}

.panel-body.panel-body-DatosPersonales input {
    border: 0px !important;
    border-bottom: 1px solid var(--color-primario) !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

.panel-body.panel-body-DatosPersonales span.degradado {
    color: var(--color-primario) !important;
    font-size: 1.7rem !important;
}

div#sexo label {
    font-size: 1.5rem !important;
    letter-spacing: 1px !important;
    background: var(--color-fondo) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-primario) !important;
}

div#sexo label.border-active {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    box-shadow: 0px 0px 10px 0px var(--color-secundario-1) !important;
}

button.btn.btn-success.btntokens.btntokensagregar {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

button.btn.btn-success.btntokens.btntokensagregar:hover {
    letter-spacing: 0.5px !important;
    transition: 0.1s;
}

button.btn.btn-danger.btntokens.btntokenseliminar {
    background: var(--color-fondo) !important;
    color: var(--color-error) !important;
    border-color: var(--color-primario) !important;
}

button.btn.btn-danger.btntokens.btntokenseliminar:hover {
    background: var(--color-error) !important;
    color: var(--color-fondo) !important;
    border-color: var(--color-primario) !important;
}

button.btn.btntokens.btntokenspreferido.btn-success {
    background: var(--color-fondo) !important;
    color: var(--color-favorito) !important;
    border-color: var(--color-primario) !important;
}

button.btn.btntokens.btntokenspreferido.btn-success:hover {
    background: var(--color-favorito) !important;
    color: var(--color-fondo) !important;
    border-color: var(--color-primario) !important;
}

table.table.table-striped.tabletokens tbody tr th {
    border: 1px solid var(--color-primario) !important;
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    font-size: 1.5rem !important;
}

table.table.table-striped.tabletokens tbody tr td {
    border: 1px solid var(--color-primario) !important;
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    font-size: 1.5rem !important;
}

button#EliminarCuentaBancaria {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

button#EliminarCuentaBancaria:hover {
    background: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
}

#eliminarCuenta {
    padding: 0px !important;
}

.toggleVisibilityAccountNumber .fa-eye:before {
    color: var(--color-acento) !important;
}

div#mostrarCuenta {
    width: auto !important;
}

#toggleVisibilityAccountNumber {
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
}

#toggleVisibilityAccountNumber:hover {
    color: var(--color-acento) !important;
    background: transparent !important;
    border: 1px solid var(--color-acento) !important;
}

div#notifComerciales, div#datosTerceros, div#redesSociales {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin: 0px !important;
}

div#enviosComercialesLOPD {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

div#enviosComercialesLOPD * {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin: 0px !important;
}

.panel-body.panel-body-BotonValidarDatosPersonales button#confirmar,
.panel-body.panel-body-BotonValidarDatosPersonales button#cancelar {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.panel-body.panel-body-BotonValidarDatosPersonales button#confirmar:hover,
.panel-body.panel-body-BotonValidarDatosPersonales button#cancelar:hover {
    background: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
}

div#ConfirmarEliminarCuentaBancaria header.panel-heading {
    background: var(--color-primario) !important;
}

div#ConfirmarEliminarCuentaBancaria h2 {
    color: var(--color-fondo) !important;
}

div#ConfirmarEliminarCuentaBancaria.modal-block-warning .fa {
    color: var(--color-acento) !important;
}

label#lblMensajeConfirmarEliminarH4CuentaBancaria {
    color: var(--color-primario) !important;
}

@media (max-width: 576px) {
    button#EliminarCuentaBancaria {
        margin-bottom: 2rem;
    }

    #toggleVisibilityAccountNumber {
        width: 25% !important;
    }

    div#mostrarCuenta {
        text-align: center !important;
        margin: 1rem;
    }

    div#sexo label {
        width: 32.5% !important;
    }

    legend#lgDatosPersonales, legend#lgDatosAcceso, legend#lgDatosContacto,
    legend#lgDatosBancarios, legend#lgLOPD, legend#lgDatosATerceros,
    legend#lgRedesSociales {
        text-align: center !important;
        width: 100% !important;
        min-width: 0;
    }

    .panel-body.panel-body-DatosPersonales {
        padding: 0px !important;
    }

    .panel-body.panel-body-DatosPersonales input {
        margin-bottom: 2rem !important;
    }

    div#divNumIban input, div#NumIban input, div#divSucursal input,
    div#divDc input, div#divNumCuenta input, div#divNumBanco input {
        margin: 0px !important;
    }

    .panel-body.panel-body-BotonValidarDatosPersonales button#confirmar,
    .panel-body.panel-body-BotonValidarDatosPersonales button#cancelar {
        width: 100% !important;
        margin-bottom: 2rem !important;
    }
}

/* Tablas del área privada (notificaciones, accesos, recibos, facturas…) */
.panel-body.panel-body-MisNotificaciones th, .panel-body.panel-body-Accesos th,
.panel-body.panel-body-Recibos th, .panel-body.panel-body-Facturas th,
.panel-body.panel-body-PagosPendientes th, .panel-body.panel-body-Documentos th,
.panel-body.panel-body-Credito th, .panel-body.panel-body-Cuotas th {
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    border: 1px solid var(--color-primario) !important;
}

.panel-body.panel-body-MisNotificaciones td, .panel-body.panel-body-Accesos td,
.panel-body.panel-body-Recibos td, .panel-body.panel-body-Facturas td,
.panel-body.panel-body-PagosPendientes td, .panel-body.panel-body-Documentos td,
.panel-body.panel-body-Credito td, .panel-body.panel-body-Cuotas td {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    border: 1px solid var(--color-borde-suave) !important;
}

/* Tablas con scroll horizontal en pantallas pequeñas */
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.panel-body.panel-body-MisNotificaciones label input, .panel-body.panel-body-Accesos label input,
.panel-body.panel-body-Recibos label input, .panel-body.panel-body-Facturas label input,
.panel-body.panel-body-Documentos label input, .panel-body.panel-body-Credito label input {
    background: var(--color-fondo) !important;
    border: 2px solid var(--color-primario) !important;
}

.panel-body.panel-body-MisNotificaciones .dt-buttons, .dt-buttons {
    display: none !important;
}

i.fa.fa-info-circle.informacionNotificaciones {
    color: var(--color-acento) !important;
}

.panel-body.panel-body-Accesos table#datatable-ajax td:nth-child(2),
.panel-body.panel-body-Accesos table#datatable-ajax th:nth-child(2),
.panel-body.panel-body-Accesos table#datatable-ajax td:nth-child(3),
.panel-body.panel-body-Accesos table#datatable-ajax th:nth-child(3),
.panel-body.panel-body-Accesos table#datatable-ajax td:nth-child(4),
.panel-body.panel-body-Accesos table#datatable-ajax th:nth-child(4) {
    text-align: center !important;
}

.panel-body.panel-body-MisNotificaciones table#datatable-ajax td:nth-child(4),
.panel-body.panel-body-MisNotificaciones table#datatable-ajax th:nth-child(4) {
    text-align: center !important;
}

.panel-body.panel-body-Recibos table#datatable-ajax td:nth-child(1),
.panel-body.panel-body-Recibos table#datatable-ajax th:nth-child(1),
.panel-body.panel-body-Recibos table#datatable-ajax td:nth-child(3),
.panel-body.panel-body-Recibos table#datatable-ajax th:nth-child(3),
.panel-body.panel-body-Recibos table#datatable-ajax td:nth-child(4),
.panel-body.panel-body-Recibos table#datatable-ajax th:nth-child(4) {
    text-align: center !important;
}

.panel-body.panel-body-Recibos table#datatable-ajax td:nth-child(5),
.panel-body.panel-body-Recibos table#datatable-ajax th:nth-child(5) {
    text-align: right !important;
}

.panel-body.panel-body-Facturas td:nth-child(1), .panel-body.panel-body-Facturas th:nth-child(1),
.panel-body.panel-body-Facturas td:nth-child(3), .panel-body.panel-body-Facturas th:nth-child(3) {
    text-align: center !important;
}

.panel-body.panel-body-Facturas td:nth-child(4), .panel-body.panel-body-Facturas th:nth-child(4) {
    text-align: right !important;
}

.panel-body.panel-body-PagosPendientes td:nth-child(1), .panel-body.panel-body-PagosPendientes th:nth-child(1),
.panel-body.panel-body-PagosPendientes td:nth-child(2), .panel-body.panel-body-PagosPendientes th:nth-child(2) {
    text-align: center !important;
}

.panel-body.panel-body-Documentos td:nth-child(1), .panel-body.panel-body-Documentos th:nth-child(1) {
    text-align: center !important;
}

.panel-body.panel-body-Credito td:nth-child(1), .panel-body.panel-body-Credito th:nth-child(1),
.panel-body.panel-body-Credito td:nth-child(2), .panel-body.panel-body-Credito th:nth-child(2),
.panel-body.panel-body-Credito td:nth-child(5), .panel-body.panel-body-Credito th:nth-child(5) {
    text-align: center !important;
}

.panel-body.panel-body-Credito td:nth-child(3), .panel-body.panel-body-Credito th:nth-child(3) {
    text-align: right !important;
}

.panel-body.panel-body-Cuotas td:nth-child(2), .panel-body.panel-body-Cuotas th:nth-child(2),
.panel-body.panel-body-Cuotas td:nth-child(3), .panel-body.panel-body-Cuotas th:nth-child(3),
.panel-body.panel-body-Cuotas td:nth-child(4), .panel-body.panel-body-Cuotas th:nth-child(4),
.panel-body.panel-body-Cuotas td:nth-child(6), .panel-body.panel-body-Cuotas th:nth-child(6),
.panel-body.panel-body-Cuotas td:nth-child(7), .panel-body.panel-body-Cuotas th:nth-child(7) {
    text-align: center !important;
}

.panel-body.panel-body-Cuotas td:nth-child(5), .panel-body.panel-body-Cuotas th:nth-child(5) {
    text-align: right !important;
}

.panel-body-Documentos div#datatable-ajax_wrapper thead tr[role="row"] th:nth-child(2),
.panel-body-Documentos div#datatable-ajax_wrapper tbody > tr > td:nth-child(2) {
    display: none;
}

input#txtImporte {
    border: 2px solid var(--color-primario) !important;
    width: 10rem !important;
}

/* Paginación de tablas */
.dataTables_paginate a.paginate_button.current {
    background: var(--color-fondo) !important;
    border-color: var(--color-primario) !important;
}

a.paginate_button:hover, a#datatable-ajax_previous:hover, a.paginate_button.active:hover {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-fondo) !important;
}

a#datatable-ajax_previous:hover, a#datatable-ajax_next:hover, .current:hover {
    color: var(--color-fondo) !important;
    font-weight: bold !important;
}

a#datatable-ajax_previous, a#datatable-ajax_next, .current {
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

.fa-plus-square:before {
    background: var(--color-fondo);
    color: var(--color-acento);
    font-size: 1.5rem !important;
}

.form-group.col-md-10 .col-sm-3 span {
    color: var(--color-primario) !important;
    font-size: 1.7rem !important;
}

.col-sm-3 span {
    color: var(--color-primario) !important;
}

/* Notificaciones: modal y selector de fechas */
div#modalDatosNotificacion .modal-header {
    background: var(--color-primario);
}

div#modalDatosNotificacion .modal-header h4 {
    color: var(--color-fondo) !important;
    font-size: 2rem !important;
}

div#modalDatosNotificacion .modal-header button {
    color: var(--color-fondo) !important;
    opacity: 1 !important;
    font-size: 3rem !important;
}

div#botonConfirmarModal {
    font-weight: bold !important;
    background: var(--color-primario) !important;
    box-shadow: none !important;
    border-color: var(--color-primario) !important;
}

div#botonConfirmarModal:hover {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

span#mainNotif {
    text-align: justify !important;
    color: var(--color-texto) !important;
    font-weight: bold !important;
}

h2#fechaSeleccionada, button#fechaAtras, button#fechaAdelante {
    color: var(--color-acento) !important;
}

button#fechaAdelante, button#fechaAtras {
    background: transparent !important;
    border: none !important;
    font-size: 2.5rem !important;
    margin-top: 0px !important;
}

button#fechaAdelante:hover, button#fechaAtras:hover {
    transition: 0.1s !important;
    box-shadow: 0px 0px 10px 0px var(--color-acento) !important;
    border-radius: 10px !important;
}

button#btnSelectorDesde, button#btnSelectorHasta {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    width: 100% !important;
    font-size: 1.7rem !important;
}

button#btnSelectorDesde:hover, button#btnSelectorHasta:hover {
    background: var(--color-fondo) !important;
    color: var(--color-acento) !important;
    border-color: var(--color-acento) !important;
}

.formNotificaciones {
    border: none !important;
}

/* Pagos pendientes */
.panel-body.panel-body-PagosPendientes thead th:nth-child(4) {
    text-align: right !important;
}

div#filtroEstados {
    margin-left: 1% !important;
    margin-top: 0px !important;
}

div#filtroEstados a {
    animation-name: bounceIn;
    animation-duration: 1s;
    animation-fill-mode: both;
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

div#filtroEstados ul li a {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

div#filtroEstados ul li a:hover {
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
}

.totalPagosPendientes, .totalPagosPendientes strong {
    color: var(--color-primario) !important;
    font-size: 1.5rem !important;
}

.panel-body-PagosPendientes th {
    color: var(--color-fondo) !important;
}

.panel-body.panel-body-ConfirmaPagosSeleccionadosPagosPendientes button#Confirmar, button#pagar {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.panel-body.panel-body-ConfirmaPagosSeleccionadosPagosPendientes button#Confirmar:hover, button#pagar:hover {
    background: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
}

.panel-body.panel-body-Recibos .btn-primary {
    color: var(--color-fondo);
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

/* Crédito */
.panel-body.panel-body-BotonCredito table tbody tr {
    display: flex;
    flex-direction: column;
    align-items: center !important;
}

.panel-body.panel-body-BotonCredito table tbody td {
    text-align: center !important;
    margin-bottom: 1rem !important;
}

.panel-body.panel-body-BotonCredito {
    width: 100% !important;
}

button#Confirmar, button#Cancelar {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

button#Confirmar:hover, button#Cancelar:hover {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

button#btnAdd:before {
    content: "+";
    font-size: 2rem;
    padding-right: 1rem;
}

button#btnAdd {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

button#btnAdd:hover {
    background: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-acento);
}

#creditoTotal {
    color: var(--color-acento) !important;
    font-size: 4rem !important;
}

.panel-body.panel-body-BotonCredito strong {
    font-size: 3rem !important;
    color: var(--color-primario) !important;
}

@media (max-width: 576px) {
    .panel-body.panel-body-BotonCredito table tbody td {
        width: 100% !important;
    }
}

/* Excedencias */
.panel-body.panel-body-Excedencias .widget-toggle-expand.mb-md {
    margin-top: 0px !important;
}

.panel-body.panel-body-PagarExcedencias button#confirmar,
.panel-body.panel-body-PagarExcedencias button#cancelar {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.panel-body.panel-body-PagarExcedencias button#confirmar:hover,
.panel-body.panel-body-PagarExcedencias button#cancelar:hover {
    background: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
}

button#confirmar, button#cancelar {
    background: var(--color-primario) !important;
    border: none !important;
}

/* Cuotas contratadas / cambio de cuota */
.panel-body.panel-body-Cuotas button {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-fondo) !important;
}

.panel-body.panel-body-Cuotas button:hover {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

.panel-body.panel-body-MisCuotas .col-md-12,
.panel-body.panel-body-CambioCuotas .col-md-12 {
    font-size: 2rem !important;
    color: var(--color-primario) !important;
    font-weight: bold !important;
}

li#listaCuotasContratadas, li#listaCuotasACambiar {
    margin-top: 2rem !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

li#listaCuotasContratadas .card, li#listaCuotasACambiar .card {
    background: var(--color-fondo) !important;
    border: 3px solid var(--color-primario) !important;
}

li#listaCuotasContratadas div#filterAL {
    background: transparent !important;
}

li#listaCuotasACambiar .card h1 {
    color: var(--color-primario) !important;
    font-size: 2rem !important;
    margin-top: 0px !important;
}

li#listaCuotasACambiar div {
    background: var(--color-fondo) !important;
    border-radius: 30px;
}

li#listaCuotasACambiar p {
    color: var(--color-texto);
}

li#listaCuotasACambiar .content {
    padding: 1rem;
}

p.nombreCuotaCard {
    background: var(--color-primario);
    padding: 1rem;
    color: var(--color-fondo) !important;
}

p.fechaCuota {
    color: var(--color-primario);
}

p.importeCuota strike {
    color: var(--color-acento) !important;
}

.corner-ribbon.red {
    background-color: var(--color-acento) !important;
}

.panel-body.panel-body-MisCuotas .content {
    padding: 1rem;
    box-shadow: 0px 2px 14px color-mix(in srgb, var(--color-primario) 30%, transparent) !important;
}

.panel-body.panel-body-AltaNuevaCuota .row.col-md-12.col-lg-12.col-sm-12.col-xl-12 {
    display: none !important;
}

div#carta_152, div#carta_151 {
    max-height: 26rem;
    border-radius: 3px !important;
}

div#imagenCuota {
    background: var(--color-fondo) !important;
    height: 1rem !important;
}

div#modalCuotas .modal-header {
    background: var(--color-primario) !important;
}

div#modalCuotas .modal-header h1 {
    color: var(--color-fondo) !important;
}

div#modalCuotas button#botonCerrarModal {
    color: var(--color-fondo) !important;
    opacity: 1 !important;
}

tbody#bodyDatosCuota td:nth-child(1) {
    border-right: 2px solid var(--color-acento) !important;
    padding-right: 1rem !important;
}

tbody#bodyDatosCuota td:nth-child(2) {
    color: var(--color-texto) !important;
    padding-left: 1rem;
}

i.fa.fa-trash {
    color: var(--color-acento) !important;
    font-size: 2rem !important;
}

button.btn.btn-default.borrarCuota {
    background: var(--color-fondo) !important;
}

table#datosReserva td.descripcion * {
    color: var(--color-texto) !important;
    font-size: 1.2rem;
}

/* Bonos */
.panel-body.panel-body-Bonos div#filterAL {
    background: var(--color-primario) !important;
    opacity: 1 !important;
    border-radius: 5px !important;
}

.panel-body.panel-body-Bonos div#filterAL:hover {
    filter: blur(0px) !important;
}

.panel-body.panel-body-Bonos .bono {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px !important;
    height: 35rem !important;
}

.panel-body.panel-body-Bonos .content {
    padding: 0px !important;
}

.panel-body.panel-body-Bonos h4 {
    padding: 0px !important;
}

.panel-body.panel-body-Bonos button {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    opacity: 1 !important;
    border: 2px solid var(--color-fondo) !important;
}

.panel-body.panel-body-Bonos button:hover {
    background: var(--color-primario) !important;
    color: var(--color-fondo) !important;
    border: 2px solid var(--color-fondo) !important;
}

@media (max-width: 576px) {
    div.panel-body-Bonos > div#contenedorPrincipal {
        justify-content: center;
        align-items: center;
    }

    div.panel-body-Bonos {
        background: unset !important;
        background-color: transparent !important;
        box-shadow: unset !important;
    }

    div.inner-wrapper > section[role="main"] > section.panel {
        box-shadow: unset !important;
    }
}

/* Rutinas */
.panel-body.panel-exer.panel-body-MisRutinasCarga b,
.panel-body.panel-exer.panel-body-MisRutinasCarga p {
    color: var(--color-texto) !important;
}

.panel-body.panel-exer.panel-body-MisRutinas h2 {
    color: var(--color-acento) !important;
    text-transform: lowercase !important;
    letter-spacing: 0px !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--color-primario) !important;
    padding-bottom: 1rem !important;
}

.panel-body.panel-exer.panel-body-MisRutinas, .panel-body.panel-exer.panel-body-MisRutinasCarga {
    border: none !important;
    box-shadow: none !important;
}

h2#title-footer-rutinas {
    display: none !important;
}

.panel-body.panel-exer.panel-body-MisRutinasCarga .col-xs-8.col-sm-8.col-md-7.col-lg-7 {
    display: flex;
    flex-direction: column;
}

p.p-exer.descripcion-exer {
    order: 1 !important;
    color: var(--color-primario) !important;
    border-bottom: 2px solid var(--color-acento) !important;
    font-size: 1.5rem !important;
}

h5.text-primary.title-exer {
    order: 2 !important;
    text-transform: capitalize;
}

p.p-exer.repeticiones-exer {
    order: 3 !important;
}

p.p-exer.descanso-exer {
    order: 4 !important;
}

button.btn.btn-primary.save-scheudule {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

button.btn.btn-primary.save-scheudule:hover {
    background: var(--color-fondo) !important;
    color: var(--color-acento) !important;
    border-color: transparent !important;
}

/* Perfil: subida de imagen y ficheros */
button#imageUpload, input#FilesSubmit, input#ImgSubmit {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

button#imageUpload:hover, input#FilesSubmit:hover, input#ImgSubmit:hover {
    background: var(--color-fondo) !important;
    border-color: var(--color-acento) !important;
    color: var(--color-acento) !important;
}

button#submitProfile, button#imageUpload2, button#btnCrop, button#updateHorario,
button#nuevosAmigosSubmit, button#groupSubmit_1, button#groupSubmit_0 {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

button#btnRotate, button#btnZoomOut, button#btnZoomIn {
    color: var(--color-fondo) !important;
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    margin-bottom: 1rem !important;
}

button#botonModalAceptar, button#botonRotar {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
    margin: 1rem 0.2rem !important;
}

a.btn.btn-danger.botonModalCancelar {
    background: var(--color-fondo) !important;
    color: var(--color-error) !important;
    margin: 1rem 0.2rem !important;
}

form.form-horizontal.form-bordered .form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-append {
    text-align: center !important;
}

.fileupload .uneditable-input .fa {
    display: none !important;
}

/* Darme de baja */
.panel-body.panel-body-DarmeDeBaja ul.simple-todo-list li {
    color: var(--color-primario) !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
}

textarea#txtObservaciones {
    border: 2px solid var(--color-primario) !important;
}

.panel-body.panel-body-DarmeDeBaja .widget-toggle-expand.mb-md {
    font-size: 2rem !important;
    color: var(--color-texto) !important;
}

.panel-body.panel-body-DarmeDeBaja .widget-content-expanded.row span {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: var(--color-texto) !important;
}

.panel-body.panel-body-DarmeDeBaja .widget-content-expanded.row input {
    font-size: 1.5rem !important;
    background: var(--color-fondo) !important;
    font-weight: bold !important;
    color: var(--color-primario) !important;
    border: 2px solid var(--color-primario) !important;
}

.panel-body.panel-body-DarmeDeBaja .widget-content-expanded.row #NoBajaValida {
    color: var(--color-error) !important;
}

.panel-body.panel-body-DarmeDeBaja button#confirmar,
.panel-body.panel-body-DarmeDeBaja button#cancelar {
    background: var(--color-primario) !important;
    border: 2px solid var(--color-primario) !important;
    font-weight: bold !important;
}

.panel-body.panel-body-DarmeDeBaja button#confirmar:hover,
.panel-body.panel-body-DarmeDeBaja button#cancelar:hover {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

ul.simple-todo-list li.completed {
    font-weight: bold !important;
}

/* Invitaciones */
.panel-body.panel-body-Invitaciones button#submit {
    background: var(--color-primario) !important;
    border: 2px solid var(--color-primario) !important;
    font-weight: bold !important;
    color: var(--color-fondo) !important;
}

.panel-body.panel-body-Invitaciones button#submit:hover {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

/* Pestañas */
.nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus {
    border-top: 3px solid var(--color-acento) !important;
    color: var(--color-acento) !important;
}

.switch.switch-primary .ios-switch .on-background {
    background: var(--color-acento) !important;
}

.progress-bar {
    background: var(--color-acento) !important;
}

/* Selección de plaza */
td.plazaSelecionada button {
    background: var(--color-primario) !important;
    opacity: 1;
}

table#tablaPlazas td button {
    background: var(--color-fondo);
    color: var(--color-primario);
    box-shadow: 0px 0px 10px 1px var(--color-primario);
}

h2#textoSeleccionPlaza {
    font-size: 2rem;
}

button.btn.btn-default.btn-primary.asignarCursilloPersona.asignarCursillo,
button.btn.btn-default.btn-primary.cursillosAnon.verCursillos,
.col-sm-6.btn-group-vertical .btn {
    background: var(--color-primario) !important;
    opacity: 1;
    box-shadow: none !important;
}

.col-sm-6.btn-group-vertical .btn {
    margin-top: 1rem;
}

/* Menú móvil del área privada */
.menuMovilPersonal, .menuMovilQR, .menuMovilReservas, .menuMovilServicios,
.menuMovilCursillos, .menuMovilPagos, .menuMovilCreditos, .menuMovilBonos,
.menuMovilPerfilPartidos, .menuMovilPartidos, .menuMovilRutinas,
.menuMovilAccesos, .menuMovilDocumentos, .menuMovilArticulos {
    background: var(--color-primario) !important;
    text-shadow: none !important;
    margin: 2% !important;
    width: 46% !important;
    padding-bottom: 0px !important;
    height: 160px !important;
    border-radius: 10px;
}

.menuMovilClasesColectivas {
    width: 96% !important;
    margin: 2% !important;
    height: 170px !important;
    background: var(--color-acento) !important;
    border-radius: 10px;
}

.menuMovilClasesColectivas img {
    height: 75% !important;
}

div[class^="col-xs-6 menuMovil"] h3 {
    color: var(--color-fondo) !important;
    font-size: 2.24rem !important;
}

svg.svg-inline--fa.fa-bars.fa-w-14 {
    display: none !important;
}

@media (max-width: 991px) {
    section.content-body > h2 {
        font-size: 2.6em !important;
    }

    ul#idiomaPanel {
        display: none !important;
    }

    .logo-container {
        background: var(--color-fondo) !important;
    }

    .header .header-right {
        background: var(--color-fondo) !important;
    }
}

/* Keypass */
@media only screen and (orientation: landscape) {
    .iconoKeypass {
        margin-top: -1.7% !important;
        margin-left: 1% !important;
    }
}

@media only screen and (min-width: 768px) {
    .iconoKeypass {
        width: 5vw !important;
        height: 10vw !important;
    }
}

/* ------------------------------------------------------------------ */
/* 9. MODALES, ALERTAS Y COOKIES                                       */
/* ------------------------------------------------------------------ */

/* SweetAlert */
.swal-icon--info:after, .swal-icon--info:before {
    background: var(--color-acento) !important;
}

.swal-icon--info {
    border-color: var(--color-acento) !important;
}

.swal-content {
    text-transform: lowercase !important;
    color: rgba(0, 0, 0, .65) !important;
}

.swal-title {
    font-size: 3rem !important;
    text-transform: uppercase !important;
}

button.swal-button.swal-button--confirm {
    background: var(--color-primario) !important;
}

/* Modales de aviso */
.modal-block-primary.modal-header-color .panel-heading,
.modal-block-warning.modal-header-color .panel-heading {
    background-color: var(--color-primario) !important;
}

.modal-block-primary .modal-icon .fa {
    color: var(--color-primario);
}

.modal-block-warning .fa {
    color: var(--color-acento);
}

button.btn.btn-warning.modal-dismiss {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

button.btn.btn-warning.modal-dismiss:hover {
    font-weight: bold !important;
    transition: 0.2s;
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

label#lblMensajeWarningH4 {
    font-size: 2.5rem;
}

div#mensajeWarningBody {
    font-size: 1.5rem;
}

h2#alertWarning {
    color: var(--color-fondo) !important;
    letter-spacing: 1px;
}

/* Aviso de cookies */
.cookiealert {
    background: var(--color-primario) !important;
    text-align: center !important;
}

h4.titleCookies {
    width: 20% !important;
    margin-left: 40% !important;
    color: var(--color-fondo) !important;
    border-bottom: 3px solid var(--color-acento) !important;
    font-size: 2.5rem !important;
}

p.bodyCookies {
    color: var(--color-fondo) !important;
}

p.bodyCookiesEnlace a {
    color: var(--color-acento) !important;
    font-size: 1.5rem !important;
}

button#btnCookiesSeleccionadas, button#btnCookiesTodas, button#btnCookiesSoloNecesarias {
    background: var(--color-acento) !important;
    border-color: var(--color-acento) !important;
    border-radius: 8px !important;
    min-width: 15% !important;
    font-size: 1.5rem !important;
}

button#btnCookiesSeleccionadas:hover, button#btnCookiesTodas:hover,
button#btnCookiesSoloNecesarias:hover {
    background: var(--color-fondo) !important;
    color: var(--color-primario) !important;
}

.cookiealert.show {
    border-top: 1px solid var(--color-acento) !important;
}

label.form-check-label.cookieLabel {
    vertical-align: middle !important;
}

@media (max-width: 991px) {
    h4.titleCookies {
        width: 100% !important;
        margin: 0px !important;
        font-size: 2rem !important;
    }

    button#btnCookiesSeleccionadas, button#btnCookiesTodas, button#btnCookiesSoloNecesarias {
        min-width: 90% !important;
        margin-bottom: 3% !important;
    }

    p.bodyCookies {
        margin-top: 3% !important;
    }

    div#cookieChecksContainer {
        display: flex;
    }
}

/* Cuestionarios web */
h2#Cuestionario-titulo {
    margin-left: 0%;
    font-size: clamp(24px, 2vw + 14px, 40px);
    text-align: left !important;
    border-bottom: 2px solid var(--color-acento);
    width: 40% !important;
    margin-bottom: 5rem !important;
}

form#Cuestionario-formulario h4.Cuestionario-tituloPregunta {
    font-size: 2.5rem !important;
    margin: 0px !important;
    border-bottom: 2px solid var(--color-acento);
    width: 35%;
    margin-top: 2rem !important;
}

form#Cuestionario-formulario li.respuesta {
    color: var(--color-primario);
    font-weight: bold;
    text-transform: lowercase;
}

input#EnviarCuestionario {
    margin: 5rem 0rem;
    background: var(--color-primario) !important;
}

div#Cuestionario-contenedorPrincipal {
    text-align: center !important;
}

@media (max-width: 991px) {
    h2#Cuestionario-titulo {
        font-size: 2rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    form#Cuestionario-formulario h4.Cuestionario-tituloPregunta {
        width: 100% !important;
        text-align: center !important;
    }

    form#Cuestionario-formulario li.respuesta {
        margin-left: 15px !important;
        margin-top: 2px !important;
    }
}

/* ------------------------------------------------------------------ */
/* 10. FOOTER Y UTILIDADES                                             */
/* ------------------------------------------------------------------ */

/* Banda azul corporativa con filo turquesa, como las cabeceras
   del manual de identidad */
/* El contenedor #footer queda transparente: en algunas vistas la
   plataforma lo estira como capa de fondo a página completa. El flex
   empuja la franja visible (.footer-copyright) siempre a su base. */
#footer {
    margin-bottom: 0;
    margin-top: 24px;
    background: transparent !important;
    border-top: 0 !important;
    position: relative !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Footer siempre anclado abajo: en páginas con poco contenido (p. ej. la
   selección de cursillos de Campamentos) quedaba flotando a media pantalla
   con un vacío blanco debajo. Si el navegador no soporta :has(), todo
   queda como estaba. */
body:has(> footer#footer) {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > footer#footer {
    margin-top: auto;
}

/* Como item flex, un contenedor con margin:auto deja de estirarse (los
   márgenes auto absorben el espacio libre) y el contenido se estruja */
body:has(> footer#footer) > .container.vistaPrincipal {
    width: 100%;
}

/* Footer CLARO translúcido: cristal esmerilado sobre el fondo con filo
   turquesa y textos en azul corporativo (el azul macizo pesaba demasiado) */
#footer .footer-copyright {
    background: color-mix(in srgb, var(--color-fondo-suave) 55%, transparent) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 0 !important;
    padding: 24px 0 16px !important;
    margin: 0 !important;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Línea de acento turquesa en la parte superior */
#footer .footer-copyright::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-acento);
}

#footer .container .row > div {
    margin-bottom: 6px;
}

#footer .footer-copyright #sub-menu ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    margin: 4px 0 0;
}

nav#sub-menu ul li a {
    color: var(--color-primario) !important;
    font-weight: 600 !important;
    font-size: 13px;
    letter-spacing: 0.4px;
}

nav#sub-menu ul li a:hover {
    color: var(--color-acento) !important;
}

nav#sub-menu * {
    text-transform: capitalize !important;
    padding-top: 0px !important;
}

span#lblFooterDesarrolladoPor {
    color: color-mix(in srgb, var(--color-primario) 65%, transparent);
    font-weight: 400;
}

a.devBy, a.devBy *, a.devBy:hover, a.devBy:focus {
    text-decoration: none !important;
}

a.devBy {
    color: var(--color-primario) !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-primario) 18%, transparent);
    background: color-mix(in srgb, var(--color-fondo) 65%, transparent);
    transition: border-color .25s ease, background-color .25s ease;
}

a.devBy:hover {
    border-color: var(--color-acento);
    background: color-mix(in srgb, var(--color-acento) 12%, transparent);
}

/* Sobre fondo claro el logo del pie conserva sus colores originales */
a.devBy img {
    filter: none;
    opacity: 1;
    height: 22px !important;
    width: auto !important;
}

#footer .col-md-3 {
    text-align: right;
}

div#AppsMoviles {
    border-top: 1px solid color-mix(in srgb, var(--color-primario) 12%, transparent);
    padding-top: 12px;
    margin-top: 2px;
}

span#lblFooterApps {
    font-size: 12px !important;
    letter-spacing: 2.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-primario) 65%, transparent);
    display: block;
    margin-bottom: 6px;
}

div#AppsMoviles img {
    width: auto !important;
    height: 38px !important;
    max-width: 100%;
    margin: 0 6px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--color-primario) 15%, transparent);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

div#AppsMoviles a:hover img {
    border-color: var(--color-acento);
}

div#AppsMoviles a:hover img {
    transform: translateY(-3px);
}

@media (max-width: 767px) {
    #footer .col-md-3 {
        text-align: center;
    }

    #footer .footer-copyright #sub-menu ul {
        justify-content: center;
    }

    /* Footer compacto en móvil para caber en la primera pantalla */
    #footer .footer-copyright {
        padding: 12px 0 8px !important;
    }

    #footer .container .row > div {
        margin-bottom: 2px;
    }

    a.devBy {
        padding: 5px 12px;
    }

    div#AppsMoviles {
        padding-top: 8px;
    }

    div#AppsMoviles img {
        height: 32px !important;
    }
}


div#MainContent_divContainerInternoBotones input {
    border-radius: 10px !important;
    border: 1px solid !important;
}
input#btnQuieroInformacion {
    background-color: #cc1717 !important;
}
input#btnLogin{
    background-color: #333333 !important;
}
input#btnLogin:hover{
    background-color: #cc1717 !important;
}
input#btnAlta{
    background-color: #333333 !important;
}

span#MainContent_lblTextoPublico {
    text-align: center !important;
    font-family: 'Poppins' !important;
    font-size: 3rem !important;
    letter-spacing: 8px;
}
div#MainContent_divContainerInternoBotones input {
    height: 7rem !important;
}
div#MainContent_divContainerInternoBotones div {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    width: 50% !important;
}
input#submitLogin {
    background: #cc1717 !important;
    border-color: #cc1717 !important;
}

.cuotas-class .featured-box {
    background: #ffffff !important;
}
.cuotas-class .featured-box * {
    color: #000000 !important;
    background: #ffffff !important;
}
.box-content h4:nth-child(2) {
    font-size: 3.3rem !important;
    color: #000000 !important;
}