@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&display=swap');

/* ==========================================================
   Tema oscuro configurable sobre Cassiopeia (SociWeb)
   Paleta: negro #0A0A0A, dorado #B8860B (titulos) / #D4A017
   (enlaces), laurel #3A5F0B (decorativo) / #6FA82F (texto),
   rojo baya #8B0000 (accion), blanco hueso #F2F2E9 (texto),
   bronce #6A4A2F (marcos, nunca texto).
   ========================================================== */

:root {
    --cassiopeia-color-primary: #B8860B;
    --cassiopeia-color-link: #D4A017;
    --cassiopeia-color-hover: #F0C75E;
    --magon-negro: #0A0A0A;
    --magon-superficie: #121212;
    --magon-superficie-2: #1a1a1a;
    --magon-dorado: #B8860B;
    --magon-dorado-claro: #D4A017;
    --magon-dorado-brillo: #F0C75E;
    --magon-laurel: #3A5F0B;
    --magon-laurel-claro: #6FA82F;
    --magon-rojo: #8B0000;
    --magon-hueso: #F2F2E9;
    --magon-hueso-suave: #c9c9bf;
    --magon-bronce: #6A4A2F;
}

body.site {
    --bs-body-bg: var(--magon-negro);
    --bs-body-color: var(--magon-hueso);
    background-color: var(--magon-negro);
    color: var(--magon-hueso);
}

/* --- Tipografia --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--magon-fuente-titulos, 'Cinzel', serif);
    color: var(--magon-dorado);
    letter-spacing: 0.04em;
}

a {
    color: var(--magon-dorado-claro);
    text-decoration-color: var(--magon-bronce);
}

a:hover, a:focus {
    color: var(--magon-dorado-brillo);
}

::selection {
    background: var(--magon-dorado);
    color: var(--magon-negro);
}

/* --- Cabecera y marca --- */
.container-header {
    background-color: var(--magon-negro);
    background-image: none;
    border-bottom: 2px solid var(--magon-dorado);
}

.container-header .navbar-brand,
.container-header .navbar-brand .site-title {
    font-family: var(--magon-fuente-titulos, 'Cinzel', serif);
    color: var(--magon-dorado);
    letter-spacing: 0.06em;
}

.container-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
}

.container-header .navbar-brand img {
    max-height: 110px;
    width: auto;
}

/* El nombre de la asociación se pinta desde index.php de forma
   configurable (parámetro "nombreTexto" del template, o el título del
   sitio) — NO se cablea aquí en el CSS, para que la plantilla sirva a
   cualquier asociación sin tocar código. */

@media (max-width: 575.98px) {
    .container-header .navbar-brand img {
        max-height: 64px;
    }

    .container-header .navbar-brand::after {
        font-size: 1.05rem;
    }

    .container-header .navbar-brand {
        gap: 10px;
    }
}

/* --- Menu principal --- */
.container-header .mod-menu > li > a,
.container-header .metismenu > li > a,
.container-header .mod-menu .mod-menu__sub a {
    color: var(--magon-hueso);
}

.container-header .mod-menu > li > a:hover,
.container-header .metismenu > li > a:hover,
.container-header .mod-menu > li.active > a,
.container-header .metismenu > li.active > a {
    color: var(--magon-dorado-brillo);
}

.container-header .metismenu > li.active > a {
    box-shadow: inset 0 -3px 0 var(--magon-dorado);
}

.container-header .mod-menu .mod-menu__sub,
.container-header .metismenu .mm-collapse {
    background-color: var(--magon-superficie);
    border: 1px solid var(--magon-bronce);
}

/* --- Menús (cualquier posición): vencer la especificidad de Cassiopeia --- */
.mod-menu,
.mod-menu__sub {
    list-style: none;
}

.mod-menu a,
.mod-menu > li > a,
nav .mod-menu a,
.moduletable .mod-menu a,
ul.mod-menu li a {
    color: var(--magon-dorado-claro);
    font-family: var(--magon-fuente-titulos, 'Cinzel', serif);
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: color .15s ease;
}

.mod-menu a:hover,
.mod-menu a:focus,
.mod-menu > li > a:hover,
nav .mod-menu a:hover,
ul.mod-menu li a:hover {
    color: var(--magon-dorado-brillo);
}

/* Subrayado dorado que crece al pasar el ratón */
.mod-menu > li > a {
    position: relative;
    padding-bottom: 2px;
}

.mod-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--magon-dorado);
    transition: width .2s ease;
}

.mod-menu > li > a:hover::after,
.mod-menu > li.current > a::after,
.mod-menu > li.active > a::after {
    width: 100%;
}

.mod-menu > li.current > a,
.mod-menu > li.active > a {
    color: var(--magon-dorado-brillo);
}

/* Título del módulo de menú (ej. "Main Menu") en dorado pleno */
.moduletable > h3,
.moduletable-title,
.mod-menu-title {
    font-family: var(--magon-fuente-titulos, 'Cinzel', serif);
    color: var(--magon-dorado);
    border-bottom: 1px solid var(--magon-bronce);
    padding-bottom: 0.4rem;
}

/* --- Menú horizontal en la barra de cabecera --- */
.container-header > ul.mod-menu,
.container-header > .mod-menu,
.container-header nav > ul.mod-menu,
.container-header nav > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.6rem;
    margin: 0;
    padding: 0;
}

.container-header ul.mod-menu > li,
.container-header .mod-menu > li {
    list-style: none;
    float: none;
    width: auto;
}

/* En la cabecera el título del módulo de menú sobra */
.container-header .moduletable > h3,
.container-header .mod-menu-title {
    display: none;
}

/* --- DESPLEGABLES CSS PUROS (sin depender de JavaScript) --- */
/* El <li> padre es el ancla de posición */
.container-header .mod-menu > li {
    position: relative;
}

/* Submenú: oculto por defecto, posicionado bajo su padre */
.container-header .mod-menu .mod-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    flex-direction: column !important;
    background-color: var(--magon-superficie);
    border: 1px solid var(--magon-bronce);
    padding: 0.4rem 0;
    margin: 0;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    /* Oculto: no ocupa espacio ni se ve. !important para vencer el flex de la cabecera */
    display: none !important;
}

/* Al pasar el ratón (o foco) sobre el <li> padre, se muestra */
.container-header .mod-menu > li:hover > .mod-menu__sub,
.container-header .mod-menu > li:focus-within > .mod-menu__sub {
    display: block !important;
}

/* Refuerzo por aria-hidden: el submenú cerrado se oculta, abierto al hover se ve */
.container-header .mod-menu__sub[aria-hidden="true"] {
    display: none !important;
}
.container-header .mod-menu > li:hover > .mod-menu__sub[aria-hidden="true"],
.container-header .mod-menu > li:focus-within > .mod-menu__sub[aria-hidden="true"] {
    display: block !important;
}

/* Cada enlace del submenú en bloque, ancho completo */
.container-header .mod-menu .mod-menu__sub > li {
    width: 100%;
}

.container-header .mod-menu .mod-menu__sub > li > a {
    display: block;
    padding: 0.45rem 1.1rem;
    white-space: nowrap;
}

.container-header .mod-menu .mod-menu__sub > li > a:hover {
    background-color: var(--magon-superficie-alt, rgba(255,255,255,0.05));
}

/* El subrayado animado del menú principal no debe salir en los submenús */
.container-header .mod-menu .mod-menu__sub > li > a::after {
    display: none;
}

/* Responsive: en móvil vuelve a apilarse para que quepa */
@media (max-width: 767.98px) {
    .container-header .mod-menu,
    .container-header nav > ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    /* En móvil no hay :hover; mostramos el submenú apilado bajo su padre */
    .container-header .mod-menu .mod-menu__sub {
        position: static;
        display: block;
        border: none;
        box-shadow: none;
        padding-left: 1rem;
        min-width: 0;
        background-color: transparent;
    }

    /* El tamaño del logo/nombre/lema/menú en móvil ya se controla desde
       PHP (ver index.php) con variables independientes por configuración
       del admin — aquí solo el relleno y los espacios, que no dependen
       de ningún parámetro. */
    .asoc-cabecera {
        padding: 0.25rem 0.6rem;
        gap: 0.3rem;
    }

    .container-header .mod-menu,
    .container-header nav > ul {
        gap: 0.1rem;
    }

    .container-header ul.mod-menu > li > a,
    .container-header .mod-menu > li > a {
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }

    /* Pegar la hamburguesa/menú al bloque de cabecera (logo+nombre+lema):
       no sabemos si el hueco lo mete Cassiopeia con margin o con gap del
       propio <header>, así que se ataca por los dos lados a la vez con
       !important, a falta de poder ver su CSS interno. */
    .header.position-sticky,
    .header {
        gap: 0.2rem !important;
    }
    .asoc-cabecera {
        margin-bottom: 0 !important;
    }
    #magon-container-nav,
    .container-header .container-nav {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* Por si el margen de más lo trae el propio botón/toggler de
       Cassiopeia y no el contenedor — no dependemos de adivinar su
       nombre de clase exacto, solo de que sea el primer elemento. */
    #magon-container-nav > *:first-child {
        margin-top: 0 !important;
    }
}

/* --- Migas y zona principal --- */
.container-breadcrumbs .breadcrumb {
    background: transparent;
    color: var(--magon-hueso-suave);
}

.container-breadcrumbs .breadcrumb a {
    color: var(--magon-dorado-claro);
}

.site-grid {
    background-color: var(--magon-negro);
}

main {
    color: var(--magon-hueso);
}

/* --- Tarjetas, fieldsets, modulos --- */
.card, fieldset.options-form, .com-magon-ficha .border {
    background-color: var(--magon-superficie);
    border: 1px solid var(--magon-bronce);
    color: var(--magon-hueso);
}

.card-header, legend {
    color: var(--magon-dorado);
    border-color: var(--magon-bronce);
}

.card-body {
    color: var(--magon-hueso);
}

hr {
    border-color: var(--magon-bronce);
    opacity: 1;
}

blockquote, .blockquote {
    border-left: 4px solid var(--magon-laurel);
    color: var(--magon-hueso-suave);
}

/* --- Texto VISIBLE del desplegable (valor seleccionado) ---
   Fondo claro + texto oscuro: la combinacion mas legible y a prueba de
   navegadores, ya que el texto del select es dificil de forzar en oscuro. */
body.site select,
body.site select.form-select,
body.site .form-select {
    background-color: #f2f2e9 !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    opacity: 1 !important;
}

body.site select option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* --- Opciones de los desplegables: legibles (texto oscuro) --- */
.form-select option,
select option {
    color: #1a1a1a;
    background-color: #ffffff;
}


/* --- Formularios --- */
.form-control, .form-select, textarea.form-control,
select.form-select {
    background-color: var(--magon-superficie-2);
    border: 1px solid var(--magon-bronce);
    color: var(--magon-hueso) !important;
}

.form-control:focus, .form-select:focus {
    background-color: var(--magon-superficie-2);
    border-color: var(--magon-dorado);
    color: var(--magon-hueso);
    box-shadow: 0 0 0 0.2rem rgba(184, 134, 11, 0.25);
}

.form-control:disabled, .form-control[readonly],
.form-select:disabled, .form-select[readonly] {
    background-color: #1c1c1c;
    color: #d8d8d0 !important;
    border-color: #4a4a4a;
    opacity: 1;
}

.form-control::placeholder {
    color: #8a8a80;
}

.form-label {
    color: var(--magon-dorado-claro);
}

.form-text {
    color: var(--magon-laurel-claro);
}

.form-check-input {
    background-color: var(--magon-superficie-2);
    border-color: var(--magon-bronce);
}

.form-check-input:checked {
    background-color: var(--magon-laurel);
    border-color: var(--magon-laurel-claro);
}

/* --- Botones: acabado de placa grabada (firma del template) --- */
.btn {
    --bs-btn-font-family: var(--magon-fuente-titulos, 'Cinzel', serif);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 0.3rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.6rem;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.92rem;
    transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Barrido de luz metálica al pasar el ratón */
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left .55s ease;
    pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn + .btn { margin-inline-start: 0.6rem; }
.btn-toolbar .btn + .btn, .btn-group .btn + .btn { margin-inline-start: 0; }

/* PRIMARIO: placa de bronce al rojo, con doble filo dorado grabado */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-border-color: var(--magon-dorado);
    --bs-btn-hover-border-color: var(--magon-dorado-brillo);
    background: linear-gradient(170deg, #9a0a0a 0%, var(--magon-rojo) 45%, #6d0000 100%);
    border: 1px solid var(--magon-dorado);
    box-shadow: inset 0 1px 0 rgba(255,215,120,0.35),
                inset 0 0 0 1px rgba(0,0,0,0.35),
                0 2px 6px rgba(0,0,0,0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(170deg, #b01010 0%, #9a0a0a 45%, #7a0000 100%);
    box-shadow: inset 0 1px 0 rgba(255,215,120,0.5),
                inset 0 0 0 1px rgba(0,0,0,0.3),
                0 6px 18px rgba(154,10,10,0.5);
    filter: saturate(1.1);
}

/* CONTORNO DORADO: epigrafía sobre piedra; se rellena de oro pulido al pasar */
.btn-outline-primary {
    --bs-btn-color: var(--magon-dorado-claro);
    color: var(--magon-dorado-claro);
    background: transparent;
    border: 1px solid var(--magon-dorado);
    box-shadow: inset 0 0 0 1px rgba(184,134,11,0.25);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: var(--magon-negro);
    background: linear-gradient(170deg, var(--magon-dorado-brillo), var(--magon-dorado) 60%, #8a6608);
    border-color: var(--magon-dorado-brillo);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px rgba(184,134,11,0.4);
    text-shadow: none;
}

/* ÉXITO: bronce de laurel */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    background: linear-gradient(170deg, #4d7d0f, var(--magon-laurel) 60%, #2c4708);
    border: 1px solid var(--magon-laurel-claro);
    box-shadow: inset 0 1px 0 rgba(180,230,120,0.3), 0 2px 6px rgba(0,0,0,0.45);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.btn-success:hover, .btn-success:focus {
    filter: saturate(1.15) brightness(1.08);
    box-shadow: inset 0 1px 0 rgba(180,230,120,0.45), 0 6px 16px rgba(58,95,11,0.5);
}

/* SECUNDARIO / NEUTRO: piedra oscura con filo bronce */
.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--magon-hueso);
    --bs-btn-hover-color: var(--magon-hueso);
    color: var(--magon-hueso);
    background: var(--magon-superficie-2);
    border: 1px solid var(--magon-bronce);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-secondary:focus, .btn-outline-secondary:focus {
    background: #242424;
    border-color: var(--magon-dorado);
    color: var(--magon-hueso);
}

/* Botón pequeño: menos ceremonia */
.btn-sm {
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-padding-y: 0.35rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
    .btn, .btn::after { transition: none; }
    .btn:hover { transform: none; }
    .btn:hover::after { left: -130%; }
}

/* --- Alertas --- */
.alert-success {
    background-color: #15240a;
    border-color: var(--magon-laurel);
    color: #b9dd97;
}

.alert-warning {
    background-color: #2b2106;
    border-color: var(--magon-dorado);
    color: #ecd49a;
}

.alert-danger {
    background-color: #2a0a0a;
    border-color: var(--magon-rojo);
    color: #f0b9b9;
}

.alert-info {
    background-color: #101c24;
    border-color: #2a5674;
    color: #b9d8ec;
}

/* --- Tablas y paginacion --- */
.table {
    --bs-table-bg: var(--magon-superficie);
    --bs-table-color: var(--magon-hueso);
    --bs-table-border-color: var(--magon-bronce);
    --bs-table-striped-bg: #161616;
    --bs-table-striped-color: var(--magon-hueso);
    --bs-table-hover-bg: #1e1e1e;
    --bs-table-hover-color: var(--magon-hueso);
}

.page-link {
    background-color: var(--magon-superficie);
    border-color: var(--magon-bronce);
    color: var(--magon-dorado-claro);
}

.page-item.active .page-link {
    background-color: var(--magon-dorado);
    border-color: var(--magon-dorado);
    color: var(--magon-negro);
}

/* --- Imagenes y ficha del socio --- */
.com-magon-ficha img.img-fluid,
.com-magon-activar img {
    border: 2px solid var(--magon-bronce);
}

.badge.bg-secondary {
    background-color: var(--magon-bronce) !important;
    color: var(--magon-hueso);
}

/* --- Pie --- */
.container-footer, footer.container-footer .footer {
    background-color: var(--magon-negro);
    border-top: 2px solid var(--magon-dorado);
    color: var(--magon-hueso-suave);
}

.container-footer a {
    color: var(--magon-dorado-claro);
}

/* --- Accesibilidad: foco visible --- */
a:focus-visible, button:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
    outline: 2px solid var(--magon-dorado-brillo);
    outline-offset: 2px;
}

/* --- Footer Tropas de Magón --- */
.magon-footer {
    background-color: var(--magon-negro, #0A0A0A);
    border-top: 2px solid var(--magon-bronce, #6A4A2F);
    padding: 1.5rem 1rem;
    margin-top: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.magon-footer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
}
/* El módulo de redes centrado en el footer */
.magon-footer .mod-magon-redes {
    justify-content: center;
}

/* --- Legibilidad de texto secundario sobre fondo oscuro --- */
/* Bootstrap usa text-muted gris oscuro, ilegible sobre negro. Lo aclaramos
   dentro de las vistas del componente Magón. */
.com-magon-eventos .text-muted,
.com-magon-videos .text-muted,
.com-magon-galerias .text-muted,
.com-magon-ficha .text-muted,
.com-magon-subirfoto .text-muted,
.com-magon-subirfoto p,
.com-magon-subirfoto small,
.com-magon-subirfoto label,
.com-magon-eventos .text-muted.small,
.com-magon-videos .text-muted.small {
    color: #e8e4d8 !important;
}

/* --- Mensajes del sistema en Joomla 6 (custom element joomla-alert) --- */
/* El componente joomla-alert no responde a .alert-* normal; hay que forzar
   su fondo y, sobre todo, el color del texto interno para que se lea. */
joomla-alert,
.joomla-alert,
#system-message-container .alert {
    color: #f2f2e9 !important;
}
joomla-alert[type="success"],
joomla-alert.success,
#system-message-container .alert-success {
    background-color: #15240a !important;
    border-color: var(--magon-laurel) !important;
    color: #d8f0c0 !important;
}
joomla-alert[type="warning"],
#system-message-container .alert-warning {
    background-color: #2b2106 !important;
    border-color: var(--magon-dorado) !important;
    color: #f3e3b4 !important;
}
joomla-alert[type="danger"],
joomla-alert[type="error"],
#system-message-container .alert-danger {
    background-color: #2a0a0a !important;
    border-color: var(--magon-rojo) !important;
    color: #f5cccc !important;
}
joomla-alert[type="info"],
#system-message-container .alert-info {
    background-color: #101c24 !important;
    border-color: #2a5674 !important;
    color: #cce6f5 !important;
}
/* El texto y los enlaces dentro de cualquier alerta del sistema */
joomla-alert *,
#system-message-container .alert * {
    color: inherit !important;
}
/* El botón de cerrar (X) visible sobre fondo oscuro */
joomla-alert .joomla-alert--close,
joomla-alert button,
#system-message-container .btn-close {
    filter: invert(1) brightness(1.5);
}

/* ============================================================
   Cabecera en tres bloques: Logo | Nombre | Zona derecha
   ============================================================ */
.asoc-cabecera {
    display: grid;
    /* Columnas laterales iguales (1fr) y centro que se ajusta a su contenido.
       Así el bloque central queda SIEMPRE centrado en la cabecera, sin moverse
       cuando el socio se conecta y cambia el contenido de la zona derecha. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    width: 100%;
}
/* El bloque derecho se alinea a la derecha dentro de su columna */
.asoc-cabecera__derecha {
    justify-content: flex-end;
}
/* Los laterales no deben desbordar su columna (protege el centrado del nombre) */
.asoc-cabecera__logo,
.asoc-cabecera__derecha {
    min-width: 0;
    overflow: hidden;
}
.asoc-cabecera__logo,
.asoc-cabecera__nombre,
.asoc-cabecera__derecha {
    display: flex;
    align-items: center;
    min-width: 0;
}
/* El bloque del nombre apila nombre + lema en vertical */
.asoc-cabecera__nombre {
    flex-direction: column;
}
.asoc-cabecera__nombre.asoc-just--left   { align-items: flex-start; }
.asoc-cabecera__nombre.asoc-just--center { align-items: center; }
.asoc-cabecera__nombre.asoc-just--right  { align-items: flex-end; }
/* Justificaciones independientes por bloque */
.asoc-just--left   { justify-content: flex-start; text-align: left; }
.asoc-just--center { justify-content: center; text-align: center; }
.asoc-just--right  { justify-content: flex-end; text-align: right; }

.asoc-cabecera__logo .brand-logo {
    display: inline-flex;
    align-items: center;
}
.asoc-cabecera__logo img {
    display: block;
}
.asoc-nombre-link {
    font-family: var(--magon-fuente-titulos, 'Cinzel', serif);
    color: var(--magon-dorado) !important;
    letter-spacing: 0.04em;
    text-decoration: none;
    line-height: 1.15;
}
.asoc-nombre-link:hover {
    color: var(--magon-dorado-claro) !important;
    text-decoration: none;
}
.asoc-cabecera__lema {
    color: var(--magon-hueso-suave);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.asoc-cabecera__derecha {
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Saludo al socio + avisos */
.asoc-saludo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--magon-hueso);
    font-size: 0.95rem;
}
.asoc-saludo__hola {
    color: var(--magon-hueso);
}
.asoc-saludo__avisos {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: var(--magon-dorado-claro);
}
.asoc-saludo__num {
    background: var(--magon-rojo);
    color: #fff;
    border-radius: 999px;
    padding: 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Responsive: en móvil, la cabecera se apila */
@media (max-width: 768px) {
    .asoc-cabecera {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
    }
    .asoc-cabecera__logo,
    .asoc-cabecera__nombre,
    .asoc-cabecera__derecha {
        justify-content: center;
    }
}

/* Cabecera fija en móvil: "position: sticky" es frágil — basta que
   CUALQUIER ancestro tenga overflow distinto de "visible" para que se
   rompa en silencio, y no controlamos el CSS interno de Cassiopeia.
   "position: fixed" es inmune a eso (se posiciona contra el viewport,
   no contra un ancestro), así que en móvil forzamos fixed cuando el
   admin ha activado "Cabecera fija al desplazar". El hueco que deja
   (fixed sale del flujo normal) se compensa con JS, ver el script
   junto al cierre de </header> en index.php — porque el alto varía
   según cuántos módulos/menú haya, no es un valor fijo que podamos
   adivinar aquí en CSS.
   El límite de alto + scroll propio es para que, si el menú apilado
   tiene muchos enlaces, la cabecera no se trague toda la pantalla del
   móvil — se vuelve desplazable por dentro en vez de tapar el resto. */
@media (max-width: 767.98px) {
    .header.position-sticky {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1030;
    }
    /* El menú colapsado de Cassiopeia, si tiene muchos enlaces, se hace
       desplazable POR DENTRO en vez de que toda la cabecera ocupe la
       pantalla — así la cabecera solo mide lo que mide su contenido
       visible, y no queda una franja invisible (el viejo max-height:85vh)
       capturando los toques del contenido que hay debajo, como el botón
       "Añadir al carrito". */
    /* El menu colapsado, con muchos enlaces, se desplaza POR DENTRO
       (comportamiento original estable) — sin franjas invisibles. */
    .header.position-sticky .navbar-collapse.show {
        max-height: 70vh;
        overflow-y: auto;
    }
    /* Mejora tipografica del menu movil: items grandes y tactiles,
       cabeceras del Area de Socios en dorado, grupos indentados.
       Solo estilo: cero cambios estructurales. */
    .header.position-sticky .navbar-collapse.show li a {
        font-size: 1.06rem;
        padding: 0.7rem 0.4rem;
        border-bottom: 1px solid rgba(184, 134, 11, 0.14);
    }
    .header.position-sticky .navbar-collapse.show .nav-header {
        display: block;
        color: #D4A017;
        font-family: Cinzel, serif;
        font-size: 0.85rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-top: 1rem;
        padding: 0.4rem 0.4rem 0.2rem;
        border-bottom: 1px solid rgba(184, 134, 11, 0.35);
    }
    .header.position-sticky .navbar-collapse.show ul ul {
        padding-left: 0.95rem;
        border-left: 1px solid rgba(184, 134, 11, 0.25);
        margin: 0.1rem 0 0.6rem;
    }
}

/* --- Logo con fade cruzado entre imagen fija y GIF --- */
.asoc-logo-fade {
    position: relative;
    display: inline-block;
}
.asoc-logo-fade .asoc-logo__fija,
.asoc-logo-fade .asoc-logo__gif {
    display: block;
    transition: opacity 0.6s ease;
}
/* La capa del GIF se superpone sobre la fija */
.asoc-logo-fade .asoc-logo__gif {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.asoc-logo-fade .asoc-logo__fija {
    opacity: 1;
}