/*
 * Capa de unificación visual del club.
 *
 * Se carga la ÚLTIMA, después de entradas.css, y no reescribe ninguna hoja
 * anterior: solo añade lo que falta y corrige lo que produce salto al pasar de
 * una sección a otra.
 *
 * Por qué una capa nueva y no editar las existentes: cambios.css,
 * club-modernizacion-suave.css y header-adaptive.css tienen declaraciones
 * !important de las que dependen secciones que no se han revisado (Viajes,
 * Mi cuenta, promo_pruebas). Tocarlas era el cambio arriesgado; añadir, no.
 *
 * Todo el color sale de --color01..--color06, que inyecta cada club, o de los
 * tokens --club-* que ya declara .club-ui-refresh en club-modernizacion-suave.css
 * y que se heredan porque la clase va en el <body>. --color01 NO se usa como
 * fondo en ningún sitio de este fichero: en varios clubes es blanco.
 */


/* ==========================================================================
   1. MEGA-MENÚ: la causa real de que "a veces" se vea agolpado
   ========================================================================== */

/*
 * El panel del mega-menú es position:absolute, y su <li class="mega"> no le
 * sirve de referencia porque el tema lo deja en position:unset
 * (color12.css:14758). Su bloque contenedor acaba siendo el propio <ul> del
 * menú, que es position:relative (color12.css:14224). Como el tema le da
 * width:75% !important (color12.css:14670), el panel mide el 75% del ANCHO DE
 * LAS PESTAÑAS —unos 500-700px— en vez del 75% de la cabecera. Ahí es donde se
 * agolpan las cinco columnas.
 *
 * El tema lo tapa con un parche de JavaScript: al pasar el ratón por encima
 * añade .hover-unset al menú, que es position:unset !important
 * (color12.css:2264). Pero ese parche está enganchado EXCLUSIVAMENTE a
 * #hover-cls, que es Mi Tienda (script.js:196-201), y solo al entrar: nunca
 * retira la clase.
 *
 * De ahí el "a veces":
 *   - si el socio pasa antes por Mi Tienda, Entradas se ve bien;
 *   - si va directo a Entradas, se ve agolpado;
 *   - y en los clubes sin Mi Tienda (mostrar_seccion_tienda != '1') el
 *     elemento #hover-cls ni existe, así que Entradas se ve SIEMPRE agolpado.
 *
 * Se resuelve dejando el menú sin posicionar de forma permanente, que es el
 * mismo estado al que ya llega hoy Mi Tienda en producción, pero sin depender
 * del recorrido del ratón.
 *
 * Con el menú en static, el bloque contenedor pasa a ser el primer ancestro
 * posicionado de la cadena, que es .header-content
 * (header .header-content { position: relative }, color12.css:2116). Verificada
 * la cadena entera: ni .col-12, ni .content-header, ni .left-section, ni
 * .header-top, ni #main-nav declaran position para estas dos cabeceras (la
 * regla de #main-nav en color12.css:18890 es de header-center, que no usamos).
 * Y .header-content mide exactamente lo que el .container de la cabecera,
 * porque header-adaptive.css:35-37 le anula los márgenes negativos de la fila.
 * Por eso el panel alinea con el logotipo sin tener que calcular anchos.
 */
@media (min-width: 1200px) {

    .club-adaptive-header:not(.is-compact) .pixelstrap.sm-horizontal {
        position: static;
    }

    /*
     * Al pasar el menú a static su z-index:9 deja de valer, y con él lo pierden
     * TODOS los desplegables, no solo los dos megas: los de Viajes o Tarjetas
     * quedarían por debajo de los paneles de carrito y usuario, que van a
     * z-index 9 y son posteriores en el DOM. Se repone aquí, sobre los propios
     * submenús, que sí están posicionados y por tanto sí admiten z-index.
     */
    .club-adaptive-header:not(.is-compact) .pixelstrap.sm-horizontal > li > ul {
        z-index: 20;
    }

    /*
     * Con el menú en static, su z-index:9 queda inerte: z-index no aplica a
     * cajas estáticas. Hay que reponer el apilamiento AQUÍ, sobre el panel, que
     * sí está posicionado; si no, el mega queda por debajo de los desplegables
     * de carrito y usuario, que van a z-index 9 y son posteriores en el DOM.
     * 20 los supera y sigue por debajo del buscador a pantalla completa (10000).
     *
     * Los !important son necesarios: hay que vencer al width/max-width 75%
     * !important del tema y al left/margin-left que SmartMenus escribe en línea
     * al abrir el panel (menu.js:784). El margin-top en línea NO se toca: es lo
     * que coloca el panel justo debajo de su pestaña.
     *
     * Con left y right a 0, width:auto y las márgenes a 0, el panel se estira
     * hasta llenar su bloque contenedor, que es justo el ancho del .container
     * de la cabecera. No hace falta calcular ningún ancho ni repetir el 1600px
     * de header-adaptive.css: si algún día cambia allí, esto lo sigue solo.
     */
    .club-adaptive-header:not(.is-compact) .pixelstrap.sm-horizontal .feature-menu.full-mega-menu {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: 20;
    }

    /*
     * El .container que va dentro del panel es descendiente del <header>, así
     * que le cae la regla pensada para la barra (header-adaptive.css:21-27),
     * que le resta 32px. Dentro del panel eso solo lo estrecha sin motivo.
     */
    .club-adaptive-header .feature-menu.full-mega-menu > li > .container {
        width: 100%;
        max-width: none !important;
    }

    /*
     * Segunda banda rota, y esta explica el resto del "a veces".
     * updateAdaptiveHeaders() (script.js:123-164) activa .is-compact por
     * desbordamiento REAL, así que también puede activarse por encima de
     * 1200px —y es más probable desde que la pestaña Entradas ensanchó el nav—.
     * En esa banda el menú pasa a un cajón lateral de 360px
     * (header-adaptive.css:441) pero el viewport sigue siendo >=1200, de modo
     * que los col-xl-* de Bootstrap SIGUEN aplicando: cinco columnas de 65 a
     * 97px dentro de un cajón de 360px.
     *
     * Va acotado a >=1200px a propósito. Por debajo, .is-compact está SIEMPRE
     * activa (script.js:127 la fuerza con innerWidth < 1200) y allí el tema ya
     * resuelve el panel en acordeón: aplicar esto también abajo pisaría un
     * layout que hoy funciona.
     */
    .club-adaptive-header.is-compact .feature-menu.full-mega-menu {
        position: static;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 12px 15px;
    }

    .club-adaptive-header.is-compact .feature-menu.full-mega-menu > li > .container {
        width: 100%;
    }

    .club-adaptive-header.is-compact .feature-menu.full-mega-menu .row {
        margin-right: 0;
        margin-left: 0;
    }

    /* (0,5,0) gana a col-xl-3 / col-xl-2 (0,1,0) sin necesidad de !important */
    .club-adaptive-header.is-compact .feature-menu.full-mega-menu .mega-box {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    /* En un cajón de 360px la miniatura no aporta y alarga mucho la lista */
    .club-adaptive-header.is-compact .feature-menu.full-mega-menu .mega-menu-img {
        display: none;
    }
}


/* ==========================================================================
   2. TIPOGRAFÍA DE LAS TARJETAS DE ENTRADAS
   ========================================================================== */

/*
 * Entradas usa <h5> para el nombre y <h6> para el precio, y su CSS solo les
 * fijaba color y peso. El tamaño caía por tanto al del tema, que en esta
 * plantilla es diminuto: h5 = 11px y h6 = 10px (color12.css:356-368).
 *
 * El resultado era una tarjeta con la jerarquía invertida: el nombre de la
 * experiencia (11px) se leía MÁS PEQUEÑO que su ciudad (13px) y que el
 * proveedor (12px), y el precio —el dato comercial— era el texto más pequeño
 * de toda la tarjeta a 10px, frente a los 22px de Mi Tienda.
 *
 * Se adoptan los valores de Mi Tienda porque es lo que el socio lleva años
 * viendo: nombre a 14px y precio a 22px.
 */
.club-ui-refresh .entradas-card h5,
.club-ui-refresh .entradas-card h5 a {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #444444;
}

.club-ui-refresh .entradas-card h5 a:hover,
.club-ui-refresh .entradas-card h5 a:focus {
    color: var(--color06);
}

.club-ui-refresh .entradas-card h6 {
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    color: var(--color06);
}

/*
 * Titular de bloque. El resto del club abre sus secciones con .title
 * (color12.css:647-658): 24px, 700, mayúsculas y --color06. Entradas lo hacía
 * a 22px, peso normal, minúsculas y en --color05 heredado. Se copia .title
 * pero SIN su padding de 30px: aquí el titular convive en una fila flex con el
 * enlace "Ver todas", y ese padding la descuadraría.
 */
.club-ui-refresh .entradas-bloque-cabecera h3,
.club-ui-refresh .entradas-seccion > .container > h3 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 28px;
    color: var(--color06);
}

/*
 * Acento tipográfico: Entradas se pintó entera con --color03 y el resto del
 * club usa --color06 (el .title y el fondo de .btn-solid). Dentro de la misma
 * tarjeta convivían precio en un color de marca y botón en otro, y eso hacía
 * que la sección se leyese como otra marca.
 * El distintivo .entradas-badge se queda en --color03 a propósito: ahí el
 * contraste es intencionado, es una etiqueta de estado y no compite con nada.
 */
.club-ui-refresh .entradas-vertodo,
.club-ui-refresh .entradas-seccion .collapse-block-title,
.club-ui-refresh .entradas-total strong {
    color: var(--color06);
}


/* ==========================================================================
   3. LA CAJA DE LA TARJETA
   ========================================================================== */

/*
 * Entradas se dibujó su propia tarjeta (borde #ececec, radio 8px, sin sombra)
 * mientras el resto del club ya tenía uno propio en tokens
 * (club-modernizacion-suave.css:251-270). Se unifican sobre los tokens, que es
 * el único sistema de variables del proyecto.
 * Se usan border-width/style/color por separado y no el atajo `border:` para
 * no borrar el borde de marca que .entradas-card-pack fija aparte.
 */
.club-ui-refresh .entradas-card {
    border-width: 1px;
    border-style: solid;
    border-color: var(--club-border);
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow-sm);
}

.club-ui-refresh .entradas-card:hover {
    border-color: var(--club-border-strong);
    box-shadow: var(--club-shadow);
}

/*
 * El pack se distingue del resto con un borde en color de marca
 * (entradas.css:122). Esa regla es (0,1,0) y la de arriba (0,2,0), así que sin
 * esto la unificación le habría borrado el distintivo.
 */
.club-ui-refresh .entradas-card-pack,
.club-ui-refresh .entradas-card-pack:hover {
    border-color: var(--color03);
}

/*
 * Proporción de la foto. El catálogo entero usa 5:3 (.ratio2_3 del tema es
 * padding-top 60%) y Entradas usaba 3:2. Igualarlo hace que las tarjetas midan
 * lo mismo al saltar de pestaña.
 */
.club-ui-refresh .entradas-card-img {
    aspect-ratio: 5 / 3;
}

/*
 * FALLO REAL, no diferencia de criterio: en /entradas/listado las fotos no se
 * veían, solo un rectángulo gris.
 * script.js:229-243 coge cada <img class="bg-img">, mueve su src al
 * background-image del PADRE y esconde el <img>. En home.php y experiencias.php
 * el padre es el propio .entradas-card-img, que tiene aspect-ratio y por tanto
 * altura. En listado.php el padre es un <a> intermedio sin altura ninguna, así
 * que el fondo se pintaba sobre una caja de 0px.
 * Dándole al <a> la caja completa hereda el ratio y la foto aparece.
 */
.club-ui-refresh .entradas-card-img > a {
    display: block;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   4. CONTROLES COMPARTIDOS
   ========================================================================== */

/*
 * Botón FILTROS. El tema lo pinta con background-color: var(--color01)
 * (color12.css:8641), y --color01 es BLANCO en varios clubes: el botón queda
 * blanco sobre blanco. Mi Tienda y Tarjetas lo tapan con un style en línea;
 * Outlet, Ventajas y Especial no, así que ahí es invisible.
 * Esto es un defecto de contraste, no una preferencia.
 * El :not(.btn-solid) evita pisar a los que ya tienen forma propia de botón.
 */
.club-ui-refresh .filter-btn:not(.btn-solid) {
    color: #ffffff;
    background-color: var(--color06);
    border-radius: var(--club-radius-sm);
}

/*
 * Caja de filtros: esquinas vivas y borde gris suelto en el catálogo antiguo,
 * junto a tarjetas redondeadas. El desajuste se ve dentro de la propia ficha,
 * antes incluso de comparar secciones.
 */
.club-ui-refresh .collection-filter-block {
    border-color: var(--club-border);
    border-radius: var(--club-radius-sm);
}

/*
 * Miga de pan. La banda lleva fondo de marca y el tema pinta los enlaces en
 * #555555, que sobre ese fondo casi no se lee. Cuatro secciones lo tapan con un
 * style en línea; Entradas, carrito y Mi cuenta no.
 * El <h2> de esa misma banda ya es blanco por tema: la miga en gris era la
 * excepción. Los style en línea existentes siguen ganando, así que nada cambia
 * donde ya estaba resuelto.
 */
.club-ui-refresh .breadcrumb-section .breadcrumb a {
    color: #ffffff;
}

/*
 * Paginación. El tema solo la estiliza bajo .product-pagination, envoltorio que
 * montan Mi Tienda, Ventajas y Tarjetas. Outlet, Especial y Entradas la
 * escriben desnuda y se quedaban con el azul de Bootstrap.
 * El padding se deja moderado y con flex-wrap: .pagination de Bootstrap es
 * flex SIN wrap, y con el padding de 18px del tema una paginación de nueve
 * páginas se sale de una pantalla de 360px; al ir centrada, se recortarían
 * justo la primera y la última.
 */
.club-ui-refresh .pagination {
    flex-wrap: wrap;
}

.club-ui-refresh .entradas-seccion .pagination .page-link,
.club-ui-refresh .collection-product-wrapper .pagination .page-link {
    color: #777777;
    border-color: var(--club-border);
    padding: 10px 14px;
}

.club-ui-refresh .entradas-seccion .pagination .page-item.active .page-link,
.club-ui-refresh .collection-product-wrapper .pagination .page-item.active .page-link {
    color: var(--color06);
    background-color: #ffffff;
    border-color: var(--club-border-strong);
}


/* ==========================================================================
   5. RITMO VERTICAL
   ========================================================================== */

/*
 * En Entradas la tarjeta lleva también .product-box y cae dentro de
 * .product-wrapper-grid, así que recibía del tema un margin-top de 50px
 * (color12.css:8593) ADEMÁS del mb-4 de la vista: la separación entre filas
 * saltaba de 24px a 74px dentro de la misma sección.
 * Se quita el del tema y se deja la de la vista, que es la que usa el resto de
 * páginas de Entradas.
 * No se toca el 50px de Mi Tienda: allí es la única separación que tienen sus
 * filas, y cambiarlo movería páginas que no se han revisado.
 */
.club-ui-refresh .product-wrapper-grid .product-box.entradas-card {
    margin-top: 0;
}


/* ==========================================================================
   6. SEGUNDA PASADA: acabado común entre secciones
   --------------------------------------------------------------------------
   Se toca solo el ACABADO (tamaño de letra, gris de borde, radio, sombra,
   color de acento, estados). La COMPOSICIÓN —alineación, orden de bloques,
   rejilla, anchos, paddings estructurales— se deja intacta: eso sería
   rediseño, y lo que se ha pedido es homogeneizar.
   ========================================================================== */

/*
 * Rótulos de panel de las fichas de Entradas. Mismo defecto que ya se corrigió
 * en las tarjetas: se usan <h4> y <h5>, que en esta plantilla son 12px y 11px,
 * de modo que "Descripción", "Condiciones de acceso" o "Dónde" se leían MÁS
 * PEQUEÑOS que el texto que encabezan.
 * Se acotan a los contenedores de ficha y NO a .entradas-seccion entera, para
 * no pisar el h5 de .entradas-card, que ya está resuelto en el bloque 2.
 */
.club-ui-refresh .entradas-ficha h4,
.club-ui-refresh .entradas-experiencia h4,
.club-ui-refresh .entradas-compra-box h4 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #444444;
    text-transform: none;
}

.club-ui-refresh .entradas-ficha h5,
.club-ui-refresh .entradas-experiencia h5,
.club-ui-refresh .entradas-compra-box h5 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #444444;
    text-transform: none;
}

/* En el carrito el h4 ya estaba a 17px; aquí solo falta peso y color */
.club-ui-refresh .entradas-carrito-bloque h4 {
    font-weight: 700;
    color: #444444;
    text-transform: none;
}

/*
 * Las cajas que quedaban con el borde antiguo. El contraste se ve sin salir de
 * la portada: "Por categoría" iba a radio 8 y sin sombra, y "Experiencias
 * destacadas", 55 líneas más abajo, a radio 12 y con sombra.
 * Son clases con prefijo propio: ningún css_personalizado de cliente las usa.
 */
.club-ui-refresh .entradas-categoria-card,
.club-ui-refresh .entradas-categoria-grupo,
.club-ui-refresh .entradas-compra-box,
.club-ui-refresh .entradas-listado-productos {
    border-color: var(--club-border);
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow-sm);
}

.club-ui-refresh .entradas-categoria-card:hover {
    border-color: var(--club-border-strong);
    box-shadow: var(--club-shadow);
}

/* El estado vacío conserva el punteado, pero con el gris del sistema */
.club-ui-refresh .entradas-vacio {
    border-color: var(--club-border-strong);
    border-radius: var(--club-radius);
    background: var(--club-surface-soft);
}

/*
 * El precio se veía en tres colores de marca distintos según la pantalla. Es el
 * dato más importante de la compra y cambiaba de color al pasar de la rejilla a
 * la ficha. Se lleva todo a --color06, que es el acento de .title y el fondo de
 * .btn-solid.
 * OJO: esto NO deja el club entero con el precio del mismo color. El precio de
 * Mi Tienda y el de Outlet son #999999 escritos a mano en la vista
 * (tienda/familia.php:256, outlet/listado.php:91); ahí --color06 queda para el
 * precio de socio y para el total. Unificar aquello exige tocar las vistas.
 */
.club-ui-refresh .entradas-producto-precio,
.club-ui-refresh .entradas-categoria-total {
    color: var(--color06);
}

/*
 * Carrito: era la pantalla con más ruido, porque es donde conviven productos y
 * entradas. El bloque de entradas traía su propio borde, su radio de 6px y una
 * franja lateral en --color03, y la tabla de dentro volvía a recibir borde,
 * radio y sombra de la capa de modernización: una caja redondeada dentro de
 * otra caja redondeada, que no ocurre en ninguna otra parte del club.
 */
.club-ui-refresh .entradas-carrito-bloque {
    border-color: var(--club-border);
    border-left-color: var(--color06);
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow-sm);
}

.club-ui-refresh .entradas-carrito-bloque .cart-table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
 * Bloque de destacados: el nombre del producto va en <h4> y cae a los 12px del
 * tema, mientras el resto del club lo pone a 14px.
 * NO se toca el <h5> de este bloque: ahí el h5 es el PRECIO en 15 de las 17
 * apariciones, no el nombre. Bajarlo a 14px habría encogido el importe justo en
 * la portada, donde va como texto suelto sin tamaño propio.
 */
.club-ui-refresh .producto-top-ventas h4 {
    font-size: 14px;
    font-weight: 700;
}

/*
 * Fallo de contraste multi-marca: el botón de Ventajas pone en hover fondo
 * --color05 con texto blanco. En un club con --color05 claro el texto
 * desaparece al pasar el ratón. Se lleva al mismo acento que ya usa en reposo.
 */
.club-ui-refresh .btn-promo:hover,
.club-ui-refresh .btn-promo:focus {
    border-color: var(--color06);
    background-color: var(--color06);
    color: #ffffff;
}

/*
 * Avisos emergentes: eran la única pieza con esquinas vivas y sombra dura de
 * toda la interfaz. Se conserva el refuerzo de sombra al pasar el ratón, que es
 * la única pista de que el aviso se cierra al pulsarlo.
 */
.club-ui-refresh #toast-container > div {
    border-radius: var(--club-radius-sm);
    box-shadow: var(--club-shadow);
}

.club-ui-refresh #toast-container > div:hover {
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
}

/*
 * Foco de los campos del checkout, que era la única pantalla sin anillo de
 * foco visible. Se usa :focus-visible y el mismo acento que el resto del club,
 * para no crear un tercer estilo de foco.
 *
 * Antes excluia casillas y radios "porque tienen su propio tratamiento en el
 * resto de la plataforma". No lo tienen: no existe en ninguna hoja. El efecto
 * real era que la casilla que bloquea el pedido -el unico control obligatorio
 * de la pantalla- fuera el UNICO sin foco visible, porque el tema anula el
 * contorno de todos los campos del checkout (color12.css:10594).
 */
.club-ui-refresh .checkout-page .checkout-form input:focus-visible,
.club-ui-refresh .checkout-page .checkout-form select:focus-visible,
.club-ui-refresh .checkout-page .checkout-form textarea:focus-visible {
    border-color: var(--color06);
    outline: 2px solid var(--color06);
    outline-offset: 3px;
}


/* ==========================================================================
   7. ESTADO VACÍO COMÚN Y CABECERAS ILUSTRADAS
   ========================================================================== */

/*
 * Estado vacío. Mis Reservas usaba un .alert alert-info de Bootstrap: una caja
 * AZUL que no sale de ninguna variable de marca y que en un club con paleta
 * cálida desentona. Aquí se usa el mismo vacío neutro que ya emplea Entradas,
 * que se adapta solo a cualquier paleta porque no lleva color propio.
 */
.club-ui-refresh .club-vacio {
    margin-top: 24px;
    padding: 32px 24px;
    border: 1px dashed var(--club-border-strong, #d8dde5);
    border-radius: var(--club-radius, 12px);
    background: var(--club-surface-soft, #f8f9fb);
    text-align: center;
}

.club-ui-refresh .club-vacio p {
    margin: 0;
    color: #666;
    font-size: 15px;
}

/* Se cualifica con p para ganar a la regla de arriba sin recurrir a !important */
.club-ui-refresh .club-vacio p.club-vacio-pista {
    margin-top: 6px;
    color: var(--club-text-muted, #667085);
    font-size: 13px;
}

/*
 * Las tablas de Mis Pedidos y Mis Favoritos anuncian el vacío con una fila de
 * una sola celda. Se le da el mismo aire que a la caja de arriba para que las
 * tres pantallas de Mi Cuenta digan lo mismo de la misma forma.
 */
.club-ui-refresh .cart-table tbody tr td[colspan] {
    padding: 28px 12px;
    color: var(--club-text-muted, #667085);
    font-size: 15px;
}

/*
 * Cabecera de Mis Favoritos en móvil.
 * Por debajo de 767px el tema esconde las tres últimas columnas del listado de
 * favoritos (color12.css:22478), pero NO la primera: quedaba un único rótulo
 * suelto encima de unas filas que ya no se corresponden con él. En el resto de
 * la plataforma esa cabecera se acompaña de un bloque .mobile-cart-content que
 * en Mi Cuenta no existe.
 * Con una sola columna visible la cabecera no aporta nada, así que se retira
 * entera y las filas se leen solas.
 */
@media (max-width: 767px) {
    .club-ui-refresh .wishlist-section .cart-table thead {
        display: none;
    }
}

/*
 * Ilustración de cabecera de sección. Misma idea que en Entradas: vectorial,
 * unos pocos KB, en blanco translúcido para que funcione sobre el color
 * corporativo de cualquier club, y desvanecida hacia la izquierda, que es donde
 * cae el título.
 * La banda ya es position:relative por el tema (color12.css:7878), así que no
 * hace falta tocar el posicionamiento.
 */
.club-cabecera-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
    user-select: none;
}

/* El contenido de la banda tiene que quedar por encima de la ilustración */
.club-cabecera-ilustrada > .container {
    position: relative;
    z-index: 1;
}

/* En móvil el título ocupa todo el ancho y la ilustración solo estorbaría */
@media (max-width: 767px) {
    .club-cabecera-svg {
        display: none;
    }
}


/* ==========================================================================
   8. PIE Y CABECERA DE INVITADO
   ========================================================================== */

/*
 * La barrita de acento bajo cada titular del pie iba en var(--color01)
 * (color12.css:7377). En los clubes donde ese color es el blanco del fondo, la
 * barra no se veia NUNCA: no era un adorno discreto, era un adorno ausente.
 * Se lleva al mismo color que el titular al que acompana.
 */
.club-ui-refresh footer .footer-section .footer-link .footer-title h4:after {
    background-color: var(--color03);
}

/*
 * Los titulares de columna del pie se leian MAS PEQUENOS que sus propios
 * enlaces: el h4 no fija tamano y cae al h4 base del tema, que en esta
 * plantilla es 12px (color12.css:347), mientras los enlaces van a 14px.
 * Es la misma jerarquia invertida que ya se corrigio en las tarjetas.
 */
.club-ui-refresh footer .footer-section .footer-link .footer-title h4 {
    font-size: 15px;
    letter-spacing: .04em;
}

/*
 * Doble filete al arrancar el pie: uno de la capa de modernizacion sobre
 * .footer-section, a todo el ancho, y otro del tema sobre .border-cls
 * (color12.css:7099), que va dentro del .container y por tanto es mas estrecho.
 * Dos grises distintos y un escalon visible en los extremos. Se deja solo el
 * de fuera, que es el que separa el pie del contenido.
 */
.club-ui-refresh footer .border-cls {
    border-top: 0;
}

/*
 * Numero de socio del pie. Se mantiene porque soporte lo usa para identificar a
 * quien manda una captura, pero se baja de tono: es un dato de servicio, no
 * parte del copyright.
 */
.club-ui-refresh .footer-socio {
    display: inline-block;
    margin-top: 2px;
    color: var(--club-text-muted, #667085);
    font-size: 12px;
}


/* Cabecera de invitado ---------------------------------------------------- */

/*
 * Las pestanas de la cabecera de invitado se encogian de forma desigual al
 * faltar espacio, porque no tenian el flex:0 0 auto que si tiene la de socio
 * (header-adaptive.css:123). Con esto las dos cabeceras se comportan igual:
 * las pestanas conservan su ancho y, cuando dejan de caber, el JavaScript pasa
 * a modo compacto, que es el comportamiento previsto.
 */
.club-guest-header .pixelstrap.sm-horizontal > li {
    flex: 0 0 auto;
}

/*
 * Estado de foco visible en las pestanas, que la cabecera de socio ya recibe de
 * la capa de modernizacion y esta no, por el !important del padding del tema.
 */
.club-guest-header .pixelstrap.sm-horizontal > li > a:focus-visible {
    outline: 2px solid var(--color03);
    outline-offset: -4px;
}


/* Mini-carrito ------------------------------------------------------------ */

/*
 * El boton de tramitar entradas aparecia cruzado por una linea y descuadrado.
 * La linea era el borde superior del bloque .total de PRODUCTOS, que el tema
 * pinta con borde arriba y abajo (color12.css:6888) y que se pegaba al boton.
 * El bloque de productos ya no se pinta cuando no hay productos (ver
 * carrito_lateral.php), y aqui se separa el boton de lo que venga detras para
 * que no vuelva a rozarse.
 */
.club-ui-refresh .add_to_cart .cart-inner .cart_media li .buttons {
    margin-top: 14px;
    margin-bottom: 6px;
}

.club-ui-refresh .add_to_cart .cart-inner .cart_media .buttons .btn {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    text-align: center;
}

.club-ui-refresh .add_to_cart .cart-inner .cart_media .buttons .btn:last-child {
    margin-bottom: 0;
}

/* El subtotal de entradas y el total de productos, con el mismo aire */
.club-ui-refresh .add_to_cart .cart-inner .cart_media li .total {
    margin-top: 6px;
}


/* ==========================================================================
   9. CABECERA DE INVITADO: separación entre el menú y las acciones
   --------------------------------------------------------------------------
   Las acciones del invitado (Acceder, Regístrate, Hucha) ya no usan el marcado
   de vendor del tema sino el mismo componente .header-action que la cabecera de
   socio, así que heredan color, hover, radio, área de pulsación y anillo de
   foco sin escribir aquí ni una regla. Lo único que faltaba era aire: el nav y
   las acciones son hermanos dentro de .nav-right, que es flex sin separación
   ninguna, y en la captura del club demo "ENTRADAS" y "ACCEDER" quedaban casi
   pegados.
   ========================================================================== */

.club-guest-header .nav-right {
    gap: clamp(8px, 1.2vw, 22px);
}

/*
 * Iconos originales del club en las acciones de la cabecera: el cerdito de la
 * hucha, la cartera del monedero y la tarjeta del regalo son SVG propios
 * rescatados del marcado histórico, no glifos de FontAwesome. El tamaño lo
 * fija el componente y el color se hereda con currentColor, así que responden
 * al hover igual que los demás iconos.
 * El fill va con !important para vencer a la regla del tema
 * header path { fill: var(--color03) !important } (color12.css:8), que si no
 * los dejaría clavados en el color de acento también en reposo.
 */
.header-action .header-action-svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.header-action .header-action-svg path,
.header-action .header-action-svg circle,
.header-action .header-action-svg rect {
    fill: currentColor !important;
}

/*
 * En el cajón lateral las acciones se apilan y ocupan el ancho, igual que en la
 * cabecera de socio: ahí la etiqueta manda sobre el icono.
 */
.club-adaptive-header.is-compact .header-guest-actions-menu {
    flex-direction: column;
    align-items: stretch;
}

.club-adaptive-header.is-compact .header-guest-actions-menu .header-action {
    justify-content: flex-start;
    padding: 10px 14px;
}


/* ==========================================================================
   10. TERCERA PASADA DE HOMOGENEIZACIÓN
   --------------------------------------------------------------------------
   Cierra los flecos que las dos pasadas anteriores dejaron señalados y
   verificados: el botón FILTROS, la ruta de catálogo y la banda de paginación.
   El precio, que era el fleco mayor, se ha unificado en las propias vistas
   porque iba escrito con style= en línea.
   ========================================================================== */

/*
 * El botón FILTROS llevaba en dos secciones un style en línea con
 * font-size:14px mientras las demás heredaban los 16px de .filter-main-btn.
 * Los style ya se han retirado de las vistas; el tamaño único vive aquí.
 */
.club-ui-refresh .filter-btn:not(.btn-solid) {
    font-size: 14px;
}

/*
 * Ruta de catálogo ("TODAS LAS SECCIONES / FAMILIA..."). Es un h4, que en esta
 * plantilla son 12px: quedaba más pequeña que los enlaces del listado que
 * encabeza. Alcanza a Mi Tienda (familia), Ventajas y Tarjetas y Experiencias,
 * que son las tres vistas que la montan como hijo directo del container.
 */
.club-ui-refresh .grid-portfolio > .container > h4 {
    font-size: 14px;
    line-height: 1.5;
}

/* La banda de la paginación de Mi Tienda llevaba sus filetes en el gris del
   tema; se alinean con el gris del sistema que ya usan las tarjetas. */
.club-ui-refresh .product-pagination {
    border-top-color: var(--club-border);
    border-bottom-color: var(--club-border);
}


/* ==========================================================================
   11. PÁGINAS DE ACCESO Y RECUPERACIÓN DE CONTRASEÑA
   --------------------------------------------------------------------------
   Las vistas dejaron el marcado de vendor (.login-page/.pwd-page, con inputs
   redondeados a 22px, texto centrado a la fuerza y estilos rotos en línea) y
   usan estas clases propias, que beben de los mismos tokens que el resto del
   club. El campo hereda de .form-control lo ya resuelto: caja, foco en el
   color del club y radio del sistema.
   ========================================================================== */

.club-auth {
    padding-top: 40px;
}

.club-auth-panel {
    padding: 28px 26px;
    border: 1px solid var(--club-border, #e5e8ed);
    border-radius: var(--club-radius, 12px);
    background: #fff;
    box-shadow: var(--club-shadow-sm, 0 2px 10px rgba(16, 24, 40, .05));
}

/* El panel de registro acompaña, no compite: fondo suave y sin sombra */
.club-auth-panel-secundario {
    background: var(--club-surface-soft, #f8f9fb);
    box-shadow: none;
}

/*
 * Titular propio en vez de .title del tema: aquí va en caja alta solo la
 * primera letra y alineado a la izquierda, como los rótulos de panel de las
 * fichas, porque es un formulario y no una portada de sección.
 */
.club-auth-titulo {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    text-transform: none;
}

.club-auth-panel p {
    font-size: 14px;
    line-height: 1.5;
}

.club-auth-panel .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.club-auth-ventajas {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.club-auth-ventajas li {
    position: relative;
    padding: 4px 0 4px 24px;
    font-size: 14px;
    color: #555;
}

/* La marca de verificación va en el acento del club */
.club-auth-ventajas li::before {
    content: "\2713";
    position: absolute;
    left: 2px;
    color: var(--color06);
    font-weight: 700;
}

/* Campo de contraseña con el botón de mostrar dentro */
.club-auth-pass {
    position: relative;
}

.club-auth-pass .form-control {
    padding-right: 44px;
}

.club-auth-ver-pass {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--club-text-muted, #667085);
    border-radius: var(--club-radius-sm, 8px);
    cursor: pointer;
}

.club-auth-ver-pass:hover,
.club-auth-ver-pass:focus-visible {
    color: var(--color06);
}

/*
 * Foco visible de verdad: el tema mata el outline de todos los botones y
 * enlaces (color12.css:404-410, button:focus { outline: none }), y un cambio
 * de color de icono no basta como indicador. currentColor sigue al estado
 * hover/focus, así que el anillo nunca puede quedar invisible.
 */
.club-auth-ver-pass:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.club-auth-olvido a:focus-visible {
    outline: 2px solid var(--color06);
    outline-offset: 2px;
}

.club-auth-olvido {
    margin: 4px 0 16px;
    font-size: 14px;
}

.club-auth-olvido a {
    color: var(--color06);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .club-auth {
        padding-top: 24px;
    }
    .club-auth-panel {
        padding: 22px 18px;
    }
}


/* ==========================================================================
   12. MI CUENTA: tablas, títulos y botones iguales en todas las pestañas
   --------------------------------------------------------------------------
   Cada pestaña había crecido por su cuenta: la tabla de movimientos traía un
   margin-top de 30px en línea, las de pedidos y favoritos ninguno, los saldos
   van en .table-bordered con el gris de Bootstrap, y dos títulos salían
   centrados por el text-align del tema. Los estados vacíos ya se unificaron
   sobre .club-vacio; aquí se iguala el resto.
   ========================================================================== */

/* Mismo aire entre el título de la pestaña y su tabla, en todas */
.club-ui-refresh .mi-cuenta-tabla {
    margin-top: 8px;
}

/*
 * El título de pestaña hereda de .title un padding de 30px arriba y abajo
 * (color12.css:647); el pt-0 de las vistas quita el de arriba y aquí se acorta
 * el de abajo, que sumado al margen de la tabla dejaba un hueco desigual según
 * la pestaña.
 */
.club-ui-refresh .tab-content h3.title {
    padding-bottom: 16px;
}

/*
 * Las tablas de resumen de saldo (.tabla-saldo) son las únicas con borde
 * completo: se les pone el gris del sistema en vez del #dee2e6 de Bootstrap,
 * y el mismo aire que a las demás.
 */
/* El !important es obligado: el contenedor lleva pt-4 de Bootstrap, que lo trae */
.club-ui-refresh .tabla-saldo {
    padding-top: 8px !important;
}

.club-ui-refresh .tabla-saldo .table-bordered,
.club-ui-refresh .tabla-saldo .table-bordered th,
.club-ui-refresh .tabla-saldo .table-bordered td {
    border-color: var(--club-border, #e5e8ed);
}

.club-ui-refresh .tabla-saldo .table-bordered thead th {
    background: var(--club-surface-soft, #f8f9fb);
    font-weight: 700;
    color: #444;
}

/* Los botones bajo las tablas (seguir comprando, añadir todos...) a un aire común */
.club-ui-refresh .cart-section .cart-buttons,
.club-ui-refresh .wishlist-section .cart-buttons {
    padding-top: 20px;
}


/* ==========================================================================
   13. DESPLEGABLES: el texto se recortaba con el select cerrado
   --------------------------------------------------------------------------
   Choque de capas: Bootstrap fija a los select una ALTURA rígida de 38px
   (select.form-control:not([size]):not([multiple]), bootstrap.css:1602) y el
   tema mete encima un padding de 12px arriba y abajo (color12.css:419). A los
   input el navegador les centra el texto igualmente, pero los select respetan
   el padding al pie de la letra: quedaban 14px para la línea y "Cargando
   pases" o la fecha elegida salían cortados por abajo.
   Se libera la altura y se equilibra el padding. Alcanza a todos los
   desplegables del club: pase y sala de butacas, fecha de visita de la compra
   rápida, sesiones de la ficha, selectores de Mi Cuenta y del checkout.
   ========================================================================== */

.club-ui-refresh select.form-control:not([size]):not([multiple]) {
    height: auto;
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.4;
}


/* ==========================================================================
   14. LIENZO ANCHO: el cuerpo y el pie al mismo ancho que la cabecera
   --------------------------------------------------------------------------
   La cabecera va a calc(100% - 32px) con tope de 1600px
   (header-adaptive.css:21-27), pero el cuerpo seguía en el .container de
   Bootstrap, capado a 1140px: en una pantalla grande el menú sobresalía por
   los dos lados del contenido. Se iguala el lienzo entero —secciones, pie,
   todo lo que use .container— y de paso se aprovechan las pantallas actuales:
   ~460px más de ancho útil a 1920.

   Las rejillas son fluidas (col-*), así que las tarjetas crecen solas. Los
   contenedores del mega-menú no se ven afectados: sus reglas del bloque 1 son
   más específicas. El texto de lectura larga tampoco: los bloques que capan
   su ancho a propósito (hero de Entradas a 720px) conservan su tope.
   ========================================================================== */

.club-ui-refresh .container {
    max-width: 1600px;
}

/*
 * El ancho con margen se aplica solo desde 576px: por debajo, el .container de
 * Bootstrap ya es fluido con sus 15px de padding, y restarle además 32px de
 * margen habría ESTRECHADO el móvil en vez de ensanchar el escritorio.
 */
@media (min-width: 576px) {
    .club-ui-refresh .container {
        width: calc(100% - 32px);
    }
}


/* ==========================================================================
   8. REFRESCO VISUAL 2026: cabecera, pie y superficie de toda pagina
   ==========================================================================
   Modernizacion SOLO de presentacion: ni el marcado ni el orden de las
   secciones cambian, y por eso vive aqui y no en las vistas (que se comparan
   token a token contra la v1).

   Reglas de la casa que se respetan:
   - Todo color de marca sale de --color01..--color06, que inyecta cada club.
     El acento de accion es --color06, igual que .btn-solid y .title.
   - --color01 es el fondo de la cabecera y en muchos clubes es BLANCO: jamas
     se usa como color de texto ni de acento.
   - Neutros y radios de los tokens --club-* de club-modernizacion-suave.css.
   - Los movimientos van tras prefers-reduced-motion: no-preference.
   ========================================================================== */

/* --- 8.1 Cabecera: fija arriba con el color de fondo del club ----------- */

/*
 * Solo en escritorio. En movil la cabecera despliega su menu en un panel
 * lateral cuya maquinaria (cambios.css) presupone la cabecera en el flujo;
 * fijarla ahi rompia el scroll del panel, asi que el movil queda como esta.
 *
 * El fondo opaco conserva exactamente --color01, sin mezclar el color del
 * club con el contenido que se desplaza por debajo de la cabecera.
 */
@media (min-width: 992px) {
    .club-ui-refresh .club-adaptive-header {
        position: sticky !important;
        top: 0 !important;
        /*
         * SIN backdrop-filter, y no es una preferencia estetica.
         *
         * Un filtro de fondo convierte la cabecera en bloque contenedor de
         * TODO descendiente position:fixed. El velo del buscador a pantalla
         * completa se declara fixed con inset:0 pero se pinta dentro del
         * <header>, asi que su inset dejaba de referirse a la ventana y pasaba
         * a la caja de la cabecera: el velo cubria solo la franja superior y el
         * formulario, centrado respecto a esa caja colapsada, salia montado
         * sobre la propia cabecera. Entre 992 y 1199px le pasaba lo mismo al
         * cajon lateral, con su 100vh medido contra 72px.
         *
         * El z-index sube por encima de los modales de Bootstrap (1050). Ojo
         * al diagnostico facil: el contexto de apilamiento no lo crea el
         * z-index sino el position:sticky de arriba, asi que BAJARLO no
         * arregla nada -el buscador y el cajon seguirian atrapados debajo-.
         */
        z-index: 1060;
        background: var(--color01);
        border-bottom: 1px solid var(--club-border);
        box-shadow: none;
    }

    /* El tema ponia sombra dura; con la linea fina sobra. */
    .club-ui-refresh .club-adaptive-header.header-boxshadow {
        box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
    }
}

/* --- 8.2 Navegacion: subrayado animado en vez de cambio de color -------- */

.club-ui-refresh .club-adaptive-header .pixelstrap.sm-horizontal > li > a,
.club-ui-refresh .header-guest-actions-desktop .header-action,
.club-ui-refresh .club-guest-header nav a {
    letter-spacing: 0.04em;
}

.club-ui-refresh .club-adaptive-header .pixelstrap.sm-horizontal > li > a {
    position: relative;
}

.club-ui-refresh .club-adaptive-header .pixelstrap.sm-horizontal > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--color06);
    transform: scaleX(0);
    transform-origin: left center;
}

.club-ui-refresh .club-adaptive-header .pixelstrap.sm-horizontal > li > a:hover::after,
.club-ui-refresh .club-adaptive-header .pixelstrap.sm-horizontal > li > a:focus-visible::after,
.club-ui-refresh .club-adaptive-header .pixelstrap.sm-horizontal > li.active > a::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
    .club-ui-refresh .club-adaptive-header .pixelstrap.sm-horizontal > li > a::after {
        transition: transform var(--club-transition);
    }
}

/* Los iconos de accion (buscar, favoritos, cuenta, carrito) responden. */
.club-ui-refresh .club-adaptive-header .header-action {
    border-radius: var(--club-radius-sm);
}

@media (prefers-reduced-motion: no-preference) {
    .club-ui-refresh .club-adaptive-header .header-action {
        transition: background-color var(--club-transition), transform var(--club-transition);
    }
}

.club-ui-refresh .club-adaptive-header .header-action:hover {
    background: color-mix(in srgb, var(--color06) 10%, transparent);
}

.club-ui-refresh .club-adaptive-header .header-action:active {
    transform: scale(0.96);
}

/* --- 8.3 Pie: jerarquia tranquila y enlaces que responden --------------- */

.club-ui-refresh footer .footer-section {
    border-top: 1px solid var(--club-border);
}

.club-ui-refresh footer .footer-title h4 {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-ui-refresh footer .footer-content li {
    line-height: 2.1;
}

.club-ui-refresh footer .footer-content a {
    display: inline-block;
    color: var(--club-text-muted);
    text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
    .club-ui-refresh footer .footer-content a {
        transition: color var(--club-transition), transform var(--club-transition);
    }
}

.club-ui-refresh footer .footer-content a:hover {
    color: var(--color06);
    transform: translateX(2px);
}

/*
 * El sub-pie NO se repinta: su fondo es var(--color01) por diseno del tema,
 * es decir, EL COLOR DEL CLUB que viene de la base de datos. Los logos e
 * iconos que contiene se eligen por logo_pie_para_fondo (variante "negativo"
 * blanca para fondos oscuros), asi que imponer aqui un neutro claro dejaba
 * esos activos blancos invisibles en clubes como Renfe. Paso con el morado
 * de tren.girloyalty.com el 27/08/2026.
 */

/* --- 8.4 Botones: radio comun, elevacion al pasar y estado pulsado ------ */

.club-ui-refresh .btn-solid,
.club-ui-refresh .btn-promo,
.club-ui-refresh button[type="submit"].btn {
    border-radius: var(--club-radius-sm);
}

@media (prefers-reduced-motion: no-preference) {
    .club-ui-refresh .btn-solid,
    .club-ui-refresh .btn-promo,
    .club-ui-refresh button[type="submit"].btn {
        transition: transform var(--club-transition), box-shadow var(--club-transition),
            background-color var(--club-transition), color var(--club-transition);
    }
}

.club-ui-refresh .btn-solid:hover,
.club-ui-refresh .btn-promo:hover,
.club-ui-refresh button[type="submit"].btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color06) 28%, transparent);
}

.club-ui-refresh .btn-solid:active,
.club-ui-refresh .btn-promo:active,
.club-ui-refresh button[type="submit"].btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- 8.5 Formularios: borde suave y anillo de foco del color del club --- */

.club-ui-refresh .form-control,
.club-ui-refresh input[type="text"],
.club-ui-refresh input[type="email"],
.club-ui-refresh input[type="password"],
.club-ui-refresh input[type="tel"],
.club-ui-refresh input[type="number"],
.club-ui-refresh select,
.club-ui-refresh textarea {
    border-radius: var(--club-radius-sm);
    border-color: var(--club-border-strong);
}

@media (prefers-reduced-motion: no-preference) {
    .club-ui-refresh .form-control,
    .club-ui-refresh input[type="text"],
    .club-ui-refresh input[type="email"],
    .club-ui-refresh input[type="password"],
    .club-ui-refresh input[type="tel"],
    .club-ui-refresh input[type="number"],
    .club-ui-refresh select,
    .club-ui-refresh textarea {
        transition: border-color var(--club-transition), box-shadow var(--club-transition);
    }
}

.club-ui-refresh .form-control:focus,
.club-ui-refresh input[type="text"]:focus,
.club-ui-refresh input[type="email"]:focus,
.club-ui-refresh input[type="password"]:focus,
.club-ui-refresh input[type="tel"]:focus,
.club-ui-refresh input[type="number"]:focus,
.club-ui-refresh select:focus,
.club-ui-refresh textarea:focus {
    border-color: var(--color06);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color06) 18%, transparent);
    outline: none;
}

/* --- 8.6 Tarjetas de producto: borde fino y elevacion sutil ------------- */

.club-ui-refresh .product-box,
.club-ui-refresh .club-promotion-card,
.club-ui-refresh .collection-product-wrapper .product-box {
    border-radius: var(--club-radius);
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .club-ui-refresh .product-box {
        transition: transform var(--club-transition), box-shadow var(--club-transition);
    }
}

.club-ui-refresh .product-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--club-shadow);
}

/* --- 8.7 Detalles transversales ----------------------------------------- */

/* La seleccion de texto lleva el acento del club, muy diluido. */
.club-ui-refresh ::selection {
    background: color-mix(in srgb, var(--color06) 22%, transparent);
}

/* Foco visible por teclado en toda la pagina, sin tocar el foco por raton. */
.club-ui-refresh a:focus-visible,
.club-ui-refresh button:focus-visible {
    outline: 2px solid var(--color06);
    outline-offset: 2px;
    border-radius: 4px;
}

/* El boton de volver arriba, como pieza redonda con sombra. */
.club-ui-refresh .tap-top {
    border-radius: 50%;
    box-shadow: var(--club-shadow);
}

/* Las esquinas de las imagenes sueltas dentro de listados. */
.club-ui-refresh .collection-banner img,
.club-ui-refresh .top-banner-wrapper img {
    border-radius: var(--club-radius);
}


/* --- 8.8 Paginacion del catalogo ----------------------------------------- */

/*
 * El tema pintaba la paginacion como cajas unidas por bordes, con la pagina
 * activa marcada solo por el color del numero: en la practica no se
 * distinguia. Pasa a botones sueltos y redondeados con la activa RELLENA del
 * color de accion del club, que es el mismo contrato que .btn-solid
 * (--color06 de fondo, blanco encima).
 *
 * Aplica a las dos formas que conviven: la lista del tema en los listados
 * (tarjetas, tienda, promociones, outlet) y la del parcial de catalogo.
 */

.club-ui-refresh .product-pagination {
    border-top-color: var(--club-border);
}

.club-ui-refresh .theme-paggination-block .row {
    align-items: center;
}

.club-ui-refresh .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 0;
}

.club-ui-refresh .pagination .page-item {
    border: 0;
}

.club-ui-refresh .product-pagination .pagination .page-item a,
.club-ui-refresh .pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--club-border-strong);
    border-radius: var(--club-radius-sm);
    background: var(--club-surface);
    color: var(--club-text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
    .club-ui-refresh .product-pagination .pagination .page-item a,
    .club-ui-refresh .pagination .page-link {
        transition: background-color var(--club-transition), color var(--club-transition),
            border-color var(--club-transition), transform var(--club-transition);
    }
}

.club-ui-refresh .product-pagination .pagination .page-item:not(.active) a:hover,
.club-ui-refresh .pagination .page-item:not(.active) .page-link:hover {
    border-color: color-mix(in srgb, var(--color06) 45%, var(--club-border-strong));
    background: color-mix(in srgb, var(--color06) 8%, var(--club-surface));
    color: var(--color06);
}

/* La pagina actual se ve desde lejos: rellena, texto blanco y leve sombra. */
.club-ui-refresh .product-pagination .pagination .page-item.active a,
.club-ui-refresh .pagination .page-item.active .page-link {
    background: var(--color06) !important;
    border-color: var(--color06) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color06) 35%, transparent);
    cursor: default;
}

/* Las flechas, con el icono centrado y sin herencias raras del tema. */
.club-ui-refresh .product-pagination .pagination .page-item a i {
    font-size: 12px;
    line-height: 1;
}

/*
 * Los dos selectores que acompañan a la lista ("N productos por pagina" e
 * "Ir a pagina...") iban desnudos y a otra altura. Misma pieza de 40px que
 * los botones, con su flecha propia para que el aspecto no dependa del
 * navegador.
 */
.club-ui-refresh .product-page-per-view select,
.club-ui-refresh .product-page-filter select,
.club-ui-refresh #catalogo-num-elementos {
    height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--club-border-strong);
    border-radius: var(--club-radius-sm);
    background-color: var(--club-surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--club-text-muted);
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.club-ui-refresh .product-page-per-view select:focus,
.club-ui-refresh .product-page-filter select:focus {
    border-color: var(--color06);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color06) 18%, transparent);
    outline: none;
}


/* --- 8.9 Arreglos reportados: pie, Ultimos vistos y listas de la ficha ---- */

/*
 * Pie: la imagen "Ofrecido por GIR Loyalty" va DEBAJO del logo secundario del
 * servicio, no a su derecha. Son dos <img> en linea dentro de .footer-logo;
 * se apilan en bloque. Vale para el pie de socio y el de invitado, que
 * comparten la clase.
 */
.club-ui-refresh .footer-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.club-ui-refresh .footer-logo img + img {
    margin-top: 14px;
}

/*
 * Ficha de producto: el titulo "ULTIMOS VISTOS" (h5.title-border) se montaba
 * sobre el borde de la tarjeta lateral. Se da a la tarjeta su propio lienzo
 * con relleno y el titulo queda dentro, con su regla inferior alineada a los
 * tokens neutros.
 */
.club-ui-refresh .theme-card {
    padding: 18px;
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    background: var(--club-surface);
}

.club-ui-refresh .theme-card h5.title-border {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--club-border);
    font-weight: 700;
    letter-spacing: .04em;
}

/* Las flechas del carrusel lateral, dentro del lienzo nuevo. */
.club-ui-refresh .theme-card .slick-prev,
.club-ui-refresh .theme-card .slick-next {
    top: -46px;
}

/*
 * Ficha de producto, pestana de descripcion: las listas heredadas del editor
 * llegaban con un color distinto al del parrafo y se veian "raras". Formato
 * historico que se corrige aqui: todo el contenido de la pestana comparte el
 * mismo color de texto neutro. Sin tocar tamanos ni margenes: solo el color.
 */
.club-ui-refresh .tab-product .tab-pane,
.club-ui-refresh .tab-product .tab-pane p,
.club-ui-refresh .tab-product .tab-pane li,
.club-ui-refresh .tab-product .tab-pane ul,
.club-ui-refresh .tab-product .tab-pane ol,
.club-ui-refresh .tab-product .tab-pane span {
    color: var(--club-text-muted);
}


/* ==========================================================================
   8.10 Colores de marca clavados a mano -> tokens del club
   ========================================================================== */

/*
 * La banda de titulo de las paginas interiores y del acceso, su variante de
 * registro y el fondo de la confirmacion de pedido llevan en color12.css un
 * degradado naranja->rojo ESCRITO A MANO (color12.css:493, :7869 y :7929),
 * identico para los 209 clubes. Era el ultimo color de marca que quedaba
 * fuera de la configuracion: el resto del tema ya usa var(--color06) como
 * acento (.tap-top, .btn-solid), con texto blanco garantizado por ese mismo
 * contrato, asi que la banda usa el mismo token. En este fichero no entra
 * ningun hexadecimal de marca: solo neutros.
 */
.club-ui-refresh .breadcrumb-section,
.club-ui-refresh .breadcrumb-section-registro,
.club-ui-refresh .light-layout {
    background: var(--color06);
}

/*
 * Las migas dentro de la banda venian en #555555 (color12.css:7913), un gris
 * pensado para el fondo claro que la banda no tiene. Blanco neutro, igual que
 * el titulo que la banda ya traia de serie.
 */
.club-ui-refresh .breadcrumb-section .breadcrumb,
.club-ui-refresh .breadcrumb-section .breadcrumb a,
.club-ui-refresh .breadcrumb-section .breadcrumb-item.active,
.club-ui-refresh .breadcrumb-section .breadcrumb-item + .breadcrumb-item::before,
.club-ui-refresh .breadcrumb-section-registro .breadcrumb a {
    color: #ffffff;
}

/*
 * Mis reservas (Mi cuenta): el naranja #ff7900 del proveedor de viajes viene
 * escrito a mano en el <style> de la vista. La marca que se ensena es la del
 * club. La especificidad de .club-ui-refresh gana a la de la vista sin
 * necesidad de !important.
 */
.club-ui-refresh .det-misreservas h3 {
    color: var(--color06);
}

.club-ui-refresh .btn-can-reserva {
    background-color: var(--color06);
}

/*
 * Iconos de servicio de la ficha de la seccion especial: 14 trazados SVG con
 * fill="#ff4c3b" (el rojo de fabrica del tema) incrustados en la vista. El
 * atributo de presentacion pierde contra cualquier regla CSS, asi que esto
 * basta para tenirlos con el acento del club. Los verdes y rojos de ESTADO
 * (pedido correcto #1A9323, errores) no se tocan: son semantica, no marca.
 */
.club-ui-refresh .product-service svg,
.club-ui-refresh .product-service svg path {
    fill: var(--color06);
}


/* ==========================================================================
   8.11 Mi cuenta: aire entre el selector de orden y la cabecera de reservas
   ========================================================================== */

/*
 * En la pestana Mis Reservas, la fila del titulo y el selector de ordenacion
 * termina pegada a la tarjeta que hace de cabecera de la tabla (#accordion va
 * justo debajo, sin margen). Reportado el 27/08/2026: "dejar espacio en
 * blanco entre el selector y la cabecera de la tabla".
 */
.club-ui-refresh #v-pills-reservas #accordion {
    margin-top: 18px;
}


/* ==========================================================================
   8.12 La cabecera no puede depender de la barra de scroll
   ========================================================================== */

/*
 * updateAdaptiveHeaders() (script.js) compacta la cabecera midiendo si el menu
 * desborda. Esa medida depende del ancho del contenedor, y el contenedor
 * depende de si la pagina tiene barra de scroll: una pagina corta mide ~15px
 * mas que una larga. En clubes con el menu justo de sitio, ese margen bastaba
 * para que una pagina saliera compacta (hamburguesa, iconos en el cajon) y la
 * siguiente no ("los iconos del header no se mantienen iguales en toda la
 * navegacion"). Reservando el canal de la barra siempre, todas las paginas
 * miden lo mismo y la cabecera decide siempre igual.
 */
html {
    scrollbar-gutter: stable;
}


/* ==========================================================================
   8.13 Las imagenes, sin marco: elevacion en vez de contorno
   ========================================================================== */

/*
 * Reportado el 27/08/2026: "los bordes alrededor de las imagenes le quitan
 * calidad al sitio". Las tarjetas cuyo protagonista es una imagen (familias
 * y destacados de Mi Tienda, promociones de Ventajas, tarjetas y carteles de
 * Ocio) llevaban el filete de --club-border pegado a la foto, y un filete
 * alrededor de una foto se lee como un marco. La separacion del fondo pasa a
 * ponerla la elevacion (sombra), no el contorno.
 *
 * border-color transparente y NO border:0, a proposito: el ancho del borde
 * sigue ocupando su pixel y la geometria de las tarjetas no se mueve.
 * Tampoco se toca el encuadre de las fotos: ya van con object-fit cover o
 * con background cover, que recortan sin deformar. Las tarjetas SOLO de
 * texto (categorias de Ocio, chips de ciudad, filtros) conservan su filete:
 * ahi el borde da forma, no enmarca ninguna foto.
 */
.club-ui-refresh .collection-banner,
.club-ui-refresh .product-box,
.club-ui-refresh .center-product.product-box,
.club-ui-refresh .product-wrapper-grid .product-box,
.club-ui-refresh .product-layout .product-box,
.club-ui-refresh .ratio2_3 .product-box,
.club-ui-refresh .entradas-card,
.club-ui-refresh .category .category-block {
    border-color: transparent !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 18px rgba(16, 24, 40, 0.07);
}

/*
 * El salto al pasar el raton se conserva, pero sin que reaparezca el filete
 * (las reglas hover del refresh oscurecian border-color a proposito) y con
 * una sombra un punto mas honda que la de reposo, para que la elevacion se
 * note tambien ahi.
 */
.club-ui-refresh .collection-banner:hover,
.club-ui-refresh .product-box:hover,
.club-ui-refresh .center-product.product-box:hover,
.club-ui-refresh .product-wrapper-grid .product-box:hover,
.club-ui-refresh .product-layout .product-box:hover,
.club-ui-refresh .ratio2_3 .product-box:hover,
.club-ui-refresh .entradas-card:hover,
.club-ui-refresh .category .category-block:hover {
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 14px 32px rgba(16, 24, 40, 0.12);
}

/*
 * Los logos de las promociones son imagenes con el fondo blanco; el lienzo
 * gris que tenian debajo los enmarcaba igual que un borde (el efecto "caja
 * vacia" del TOP 12 de Ventajas). En blanco, el logo y la tarjeta son una
 * sola superficie continua.
 */
.club-ui-refresh .product-box .img-block {
    background: #ffffff;
}


/* ==========================================================================
   8.14 El contador del carrito no ensena numeros que no sabe
   ========================================================================== */

/*
 * La burbuja arrancaba con un "0" escrito en el HTML y el numero real
 * llegaba por AJAX: cada pagina parpadeaba 0 -> N. Ahora arranca vacia y
 * oculta, y aparece cuando el servidor contesta (tambien con el 0 real).
 */
.club-ui-refresh .header-cart-count:empty {
    display: none;
}


/* ==========================================================================
   8.15 Las imagenes de familia llenan su hueco, sin franjas
   ========================================================================== */

/*
 * En la portada de Mi Tienda, cada tarjeta de familia dejaba una franja en
 * blanco arriba y abajo de la foto. La causa: el hueco tiene proporcion 2,00
 * exacta (.ratio2_1 .bg-size:before => padding-top 50%) y las imagenes de
 * familia se suben a 438x206, que es 2,13. El tema las pinta como fondo con
 * background-size: contain (script.js, seccion 06), asi que la foto se ajusta
 * al ancho y deja 11 px sin cubrir: unos 6 arriba y 6 abajo, en CADA tarjeta.
 *
 * Con cover la foto llena el hueco entero. No se deforma -cover mantiene la
 * proporcion- y el recorte es del 3 % por lado, imperceptible en una foto
 * decorativa. Las tarjetas no cambian de tamano: solo desaparece la franja.
 *
 * El !important es necesario: script.js escribe background-size EN LINEA.
 *
 * Acotado a .partition_4, que es solo la parrilla de familias. Los banners de
 * producto de esa misma pagina van en .ratio2_3 y siguen con contain a
 * proposito: ahi la foto es del producto y recortarla si se notaria.
 */
.club-ui-refresh .partition_4 .collection-banner .img-part {
    background-size: cover !important;
}


/* ==========================================================================
   8.16 Parrilla de destacados: misma altura y aire entre tarjetas
   ========================================================================== */

/*
 * Reportado en Tarjetas y Experiencias: los destacados salian "apelotonados y
 * con distintas alturas". Medido en maqueta con las hojas reales: 17 px de
 * diferencia de altura entre tarjetas de la misma fila, los precios
 * desalineados otros 17 px, y CERO separacion entre tarjetas.
 *
 * Dos causas encadenadas:
 *
 *  1. El tema dibujaba esta parrilla como una reja: las columnas llevan p-0
 *     -sin canal- y cada .product-box aportaba un filete de 1px
 *     (color12.css:5310) que, al tocarse, formaba una cuadricula continua. La
 *     seccion 8.13 de este fichero puso el borde transparente y una sombra a
 *     TODAS las .product-box; aqui eso borro la reja y dejo tarjetas con
 *     sombra pegadas unas a otras. De ahi el "apelotonado".
 *
 *  2. Las alturas nunca se igualaron: .product-box no se estiraba, asi que
 *     cada tarjeta medida lo que midiera su contenido. Un titulo de dos
 *     lineas, o un precio tachado, y esa tarjeta sobresalia.
 *
 * Se resuelve con la reja convertida en tarjetas de verdad: canal entre ellas,
 * misma altura -la columna se estira sola porque .row es flex- y el bloque de
 * texto tambien en columna, con el precio empujado abajo. Asi los precios
 * quedan alineados aunque los titulos ocupen una linea o tres.
 *
 * Los !important del canal son inevitables: p-0 es una utilidad de Bootstrap y
 * ya viene con !important.
 *
 * Vale para las cinco parrillas que usan .border-row1 -Tarjetas, Especial,
 * Outlet, Ventajas y las familias de Mi Tienda-, que comparten marcado.
 */
.club-ui-refresh .border-row1 > [class*="col-"] {
    display: flex;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px;
}

.club-ui-refresh .border-row1 .product-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.club-ui-refresh .border-row1 .product-box .producto-top-ventas {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* El precio, siempre pegado abajo: es lo que alinea las tarjetas entre si. */
.club-ui-refresh .border-row1 .product-box .producto-top-ventas > a:last-child {
    margin-top: auto;
}


/* ==========================================================================
   12.1 Las tablas de Mi Cuenta en movil
   ========================================================================== */

/*
 * Dos averias distintas por debajo de 767px, las dos en la misma pantalla.
 *
 * 1. Mis Pedidos y Mis entradas PERDIAN columnas. El tema oculta las cuatro
 *    ultimas celdas de cada fila (color12.css:22468) contando con que la tabla
 *    tenga muchas mas; la de pedidos tiene exactamente cuatro, asi que solo
 *    sobrevivia "Acciones" -rescatada por color12.css:20968-. El socio veia una
 *    columna con el boton PAGAR o un guion: sin numero de pedido, sin importe,
 *    sin estado y sin seguimiento.
 *
 * 2. Movimientos DESBORDABA la pagina entera. Llevaba la clase
 *    table-responsive-xs, que no existe en Bootstrap 4 (solo -sm/-md/-lg/-xl),
 *    y ademas queda fuera de .cart-section, asi que ni siquiera recibia el
 *    recorte del tema: se pintaba completa y empujaba el body, con lo que toda
 *    la pagina se desplazaba en horizontal, cabecera y pie incluidos. Y es la
 *    pantalla del saldo, en sus tres pestanas.
 *
 * La solucion es la misma para las dos: la tabla se queda entera y se desplaza
 * DENTRO de su propia caja. Se prefiere al apilado en tarjetas porque no exige
 * tocar el marcado celda a celda.
 *
 * La especificidad no es negociable: la regla del tema que repone "Acciones" es
 * (0,3,3), asi que reponer las demas celdas necesita al menos (0,4,3). De ahi
 * que el selector nombre las cuatro clases.
 */
@media (max-width: 767px) {

    .club-ui-refresh .mi-cuenta-tabla {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .club-ui-refresh .cart-section .mi-cuenta-tabla tbody tr td,
    .club-ui-refresh .cart-section.order-history .mi-cuenta-tabla tbody tr td {
        display: table-cell;
    }

    /* Sin esto las celdas se estrujan en vez de provocar el desplazamiento. */
    .club-ui-refresh .mi-cuenta-tabla thead th,
    .club-ui-refresh .mi-cuenta-tabla tbody tr td {
        white-space: nowrap;
    }
}


/*
 * Los rotulos del checkout eran <div> y ahora son <label>, que Bootstrap deja
 * en inline-block (bootstrap.css:196): sin esto dejarian de ocupar su linea y
 * el campo se subiria al lado del texto.
 */
.club-ui-refresh .checkout-page .field-label {
    display: block;
}