@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 --- */
/* ------------------------------------------------------------------
 * Pie de pagina
 * ------------------------------------------------------------------
 * SE VEIA DORADO CON LETRAS BLANCAS, que es ilegible. La culpa era de
 * Cassiopeia: su regla .container-footer pinta el fondo con
 * --cassiopeia-color-primary, y en esta web esa variable ES el dorado de
 * la marca. Dos selectores de una sola clase empatan en especificidad, asi
 * que ganaba el que cargara despues y eso no se puede dar por sabido.
 *
 * Se resuelve con .magon-footer.container-footer -dos clases, gana siempre-
 * en vez de subir la guerra de !important.
 *
 * El color sale de la paleta de la asociacion, con el de Magon de
 * respaldo: el pie tambien se personaliza.
 */
.magon-footer.container-footer,
.magon-footer {
    background-color: var(--magon-negro, #0A0A0A);
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, .04) 0%,
        rgba(255, 255, 255, 0) 60%);
    color: var(--magon-hueso, #F2F2E9);
    border-top: 2px solid var(--magon-dorado, #B8860B);
    padding: 2.5rem 1.25rem 2rem;
    margin-top: 3rem;
    width: 100%;
    display: block;
}

.magon-footer-inner {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    /* Las columnas se reparten solas: cada modulo pide 220px y baja de
       linea cuando no cabe. Sin media queries y sin suponer cuantos
       modulos ha puesto la asociacion, que pueden ser uno o cuatro. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem 2.5rem;
    align-items: start;
}

/* Un solo modulo: centrado, que si no se queda pegado a la izquierda con
   un hueco enorme al lado. */
.magon-footer-inner > *:only-child {
    grid-column: 1 / -1;
    text-align: center;
}

.magon-footer .mod-magon-redes {
    justify-content: center;
}

/* Titulos de cada bloque del pie. */
.magon-footer h1,
.magon-footer h2,
.magon-footer h3,
.magon-footer h4,
.magon-footer .module-title {
    color: var(--magon-dorado-claro, #D4A017);
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 .9rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--magon-bronce, #6A4A2F);
}

.magon-footer p,
.magon-footer li,
.magon-footer td {
    color: var(--magon-hueso-suave, #C9C4B4);
    line-height: 1.7;
}

.magon-footer a {
    color: var(--magon-dorado-claro, #D4A017);
    text-decoration: none;
    /* El subrayado aparece al pasar por encima, no de entrada: un pie con
       diez enlaces subrayados es ruido. */
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.magon-footer a:hover,
.magon-footer a:focus {
    color: var(--magon-dorado-brillo, #F0C75E);
    border-bottom-color: currentColor;
}

/* El foco del teclado TIENE que verse: hay quien recorre el pie tabulando
   y sin esto no sabe donde esta. */
.magon-footer a:focus-visible {
    outline: 2px solid var(--magon-dorado-brillo, #F0C75E);
    outline-offset: 3px;
    border-radius: 2px;
}

.magon-footer ul,
.magon-footer ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.magon-footer li + li {
    margin-top: .35rem;
}

/* En movil una columna, centrado y con mas aire entre bloques: en una
   pantalla estrecha los bloques quedan uno debajo de otro y sin separacion
   se leen como una lista sola. */
@media (max-width: 575.98px) {
    .magon-footer.container-footer,
    .magon-footer {
        padding: 2rem 1rem 1.5rem;
        text-align: center;
    }

    .magon-footer-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .magon-footer h1,
    .magon-footer h2,
    .magon-footer h3,
    .magon-footer h4,
    .magon-footer .module-title {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: .5rem;
    }

    /* El area pinchable de un enlace del pie en un movil no puede ser la
       altura de una linea de texto. */
    .magon-footer a {
        display: inline-block;
        padding: .25rem 0;
    }
}

/* --- 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 el logo y el nombre COMPARTEN FILA.
   Antes se apilaba todo (logo / nombre+lema / derecha = tres filas) y,
   con la cabecera fija, se comía casi un tercio de la pantalla del
   móvil antes de empezar el contenido.
   No se fija aquí "text-align" a propósito: así manda la justificación
   que haya elegido el administrador en las opciones de la plantilla
   (clases asoc-just--left/center/right) en vez de imponer una. */
@media (max-width: 768px) {
    .asoc-cabecera {
        /* logo | nombre + lema */
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 0.5rem;
    }
    .asoc-cabecera__logo {
        justify-content: flex-start;
    }
    /* Un nombre largo no debe empujar ni desbordar su columna. */
    .asoc-cabecera__nombre {
        min-width: 0;
    }
    /* Por defecto la zona derecha baja a su propia fila, a lo ancho:
       puede llevar módulos anchos (el saludo al socio, avisos...) que
       no cabrían junto al nombre. */
    .asoc-cabecera__derecha {
        grid-column: 1 / -1;
        justify-content: center;
    }
    /* Pero si ahí solo está el segundo logo (visitante sin sesión), cabe
       de sobra y sube a la misma fila: la cabecera baja a UNA sola fila.
       La clase la decide index.php, que es quien sabe si hay módulos. */
    .asoc-cabecera--compacta {
        grid-template-columns: auto 1fr auto;
    }
    .asoc-cabecera--compacta .asoc-cabecera__derecha {
        grid-column: auto;
        justify-content: flex-end;
    }
}

/* 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;
}
/* ==========================================================
   PORTADA DE LA DEMO  ·  demo.sociweb.es
   Pegar esto AL FINAL de user.css de la plantilla.

   La fuente Cinzel NO se pide aqui a proposito: un @import solo vale en
   la primera linea de una hoja de estilos, y ahi el navegador lo
   ignoraria sin decir nada. El user.css ya la importa en su linea 1.
   Todo cuelga de .sw-demo: no toca ni una linea del resto del sitio.
   ========================================================== */

.sw-demo{
    /*
     * EL COLOR DE MARCA. Cambia estas tres lineas y cambia la pagina
     * entera: titulares, numeros, florones, botones y enlaces.
     *
     * Va en oro sobre negro, que es como se vio y se aprobo.
     * Para el azul de SociWeb: #60A5FA, #2563EB, rgba(96,165,250,.28)
     * y #1D4ED8 el de encima.
     */
    --oro:#D4A017; --oro-osc:#B8860B; --oro-tenue:rgba(184,134,11,.30);
    --oro-oscuro-hover:#F0C75E;
    --tinta:#F2F2E9; --tinta-suave:#b9b4a6; --fondo:#0A0A0A; --caja:#141210;
    --borde:#3a3229; --papel:#F5EFDD; --papel-tinta:#171512; --papel-gris:#6b6355;
    --rojo:#8B0000;
    --titulo:'Cinzel','Trajan Pro',Georgia,serif;
    --texto:'Segoe UI',Inter,system-ui,-apple-system,'Helvetica Neue',sans-serif;
    color:var(--tinta); background:var(--fondo); font-family:var(--texto);
    line-height:1.62; font-size:1.02rem; padding:1rem 0 3rem;
    /* Un halo muy flojo detras del titulo. Sin esto el negro es una pared. */
    background-image:radial-gradient(120% 55% at 50% 0%,rgba(184,134,11,.14),transparent 62%);
}
.sw-demo *{box-sizing:border-box}
.sw-demo p{color:var(--tinta)}
.sw-demo .centro{max-width:44rem;margin-left:auto;margin-right:auto;padding:0 1.1rem}

/* ---------- Entradilla ---------- */
.sw-demo .sobre{font-family:var(--titulo);color:var(--oro);font-size:.76rem;
    letter-spacing:.32em;text-transform:uppercase;margin:0 0 1rem}
.sw-demo h1.titular{font-family:var(--titulo);font-weight:700;
    font-size:clamp(2.3rem,7.5vw,4.4rem);line-height:1.02;letter-spacing:.01em;
    color:var(--oro) !important;margin:0 0 1.4rem;
    text-shadow:0 2px 30px rgba(184,134,11,.24)}
/* Capitular. Es lo mas viejo que hay en tipografia y lo que mas dice
   "esto lo ha compuesto alguien" en una pantalla. */
.sw-demo .lead{font-size:1.22rem;line-height:1.55;color:var(--tinta);margin:0 0 1.1rem}
.sw-demo .lead::first-letter{font-family:var(--titulo);font-weight:700;
    float:left;font-size:3.7rem;line-height:.82;color:var(--oro);
    margin:.16em .14em 0 0}
.sw-demo .apunte{color:var(--tinta-suave);font-size:1rem;margin:0}

/* ---------- Florones ----------
   Dibujados con CSS y no con un <svg>, porque Joomla BORRA la etiqueta
   svg de todo lo que se guarda en un modulo -igual que borra -.
   Se subieron cuatro y no llego ninguno. Un div vacio con dos
   pseudoelementos no se lo puede comer ningun filtro. */
.sw-demo .floron{position:relative;height:14px;width:210px;max-width:70%;
    margin:2.9rem auto}
.sw-demo .floron::before{content:"";position:absolute;top:50%;left:0;right:0;
    height:1px;background:var(--oro-osc)}
.sw-demo .floron::after{content:"";position:absolute;top:50%;left:50%;
    width:11px;height:11px;margin:-6px 0 0 -6px;background:var(--oro-osc);
    transform:rotate(45deg);box-shadow:0 0 0 6px var(--fondo)}

/* ---------- La ficha de las claves ----------
   Papel color hueso, con celo arriba y un sello de tinta roja. Torcida
   grado y medio: recta parece un formulario, torcida parece una tarjeta
   que alguien ha dejado encima de la mesa. */
.sw-demo .claves{position:relative;background:var(--papel);color:var(--papel-tinta);
    max-width:38rem;margin:0 auto;padding:2.1rem 1.9rem 1.7rem;border-radius:2px;
    transform:rotate(-1.4deg);box-shadow:0 22px 55px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.3);
    background-image:
        repeating-linear-gradient(0deg,rgba(23,21,18,.022) 0 1px,transparent 1px 4px),
        repeating-linear-gradient(90deg,rgba(23,21,18,.016) 0 1px,transparent 1px 6px)}
.sw-demo .claves::before{content:"";position:absolute;top:-13px;left:50%;
    width:132px;height:27px;transform:translateX(-50%) rotate(-1.8deg);
    background:linear-gradient(100deg,rgba(255,250,225,.34),rgba(255,250,225,.16) 46%,
        rgba(255,250,225,.32));
    border-left:1px dashed rgba(255,250,225,.42);
    border-right:1px dashed rgba(255,250,225,.42);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sw-demo .claves h2{font-family:var(--titulo);color:var(--papel-tinta) !important;
    font-size:1.28rem;letter-spacing:.02em;margin:0 0 .25rem}
.sw-demo .claves .sub{color:var(--papel-gris);font-size:.94rem;margin:0 0 1.35rem}
.sw-demo .llave{border-top:1px solid #ddd3b8;padding:1rem 0 .95rem}
.sw-demo .llave:first-of-type{border-top:0;padding-top:0}
.sw-demo .llave b{display:block;font-family:var(--titulo);font-weight:600;
    color:var(--papel-tinta);font-size:1.04rem;letter-spacing:.015em;margin-bottom:.45rem}
.sw-demo .llave code{display:inline-block;background:#171512;color:#F5EFDD;
    border-radius:3px;padding:.2rem .62rem;font-size:1.02rem;font-weight:700;
    font-family:'Courier New',monospace;letter-spacing:.06em}
.sw-demo .llave .y{color:var(--papel-gris);padding:0 .3rem}
.sw-demo .llave span.q{display:block;color:var(--papel-gris);font-size:.93rem;
    margin-top:.5rem;line-height:1.5}
.sw-demo .claves .fin{color:var(--papel-gris);font-size:.88rem;margin:1.3rem 0 0;
    border-top:1px dashed #ddd3b8;padding-top:.95rem;max-width:24rem}
.sw-demo .sello{position:absolute;right:1.1rem;bottom:1rem;width:104px;height:104px;
    border:3px double var(--rojo);border-radius:50%;transform:rotate(-15deg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:var(--titulo);color:var(--rojo);opacity:.42;text-align:center;
    letter-spacing:.09em;line-height:1.25;font-size:.66rem;pointer-events:none}
.sw-demo .sello b{font-size:.86rem;font-weight:700;display:block}

/* ---------- Botones ---------- */
.sw-demo .botones{text-align:center;margin:3rem auto 0;max-width:44rem;padding:0 1.1rem}
.sw-demo .botones a{display:inline-block;margin:.4rem;padding:.92rem 1.9rem;
    border-radius:3px;text-decoration:none;font-family:var(--titulo);font-weight:600;
    font-size:1rem;letter-spacing:.06em}
.sw-demo .b-si{background:var(--oro-osc);color:#0A0A0A !important;
    box-shadow:0 8px 24px rgba(184,134,11,.30)}
.sw-demo .b-si:hover,.sw-demo .b-si:focus{background:var(--oro-oscuro-hover);
    color:#0A0A0A !important}
.sw-demo .b-no{background:transparent;color:var(--oro) !important;
    border:1px solid var(--oro-osc)}
.sw-demo .b-no:hover,.sw-demo .b-no:focus{background:var(--caja);color:var(--oro) !important}

/* ---------- El paseo ----------
   Numeros enormes y desvaidos detras del texto, como en una revista. No
   son tres tarjetas iguales en fila, que es la manera de que parezca que
   lo ha maquetado una plantilla y no una persona. */
.sw-demo h2.seccion{font-family:var(--titulo);color:var(--oro) !important;font-weight:600;
    font-size:clamp(1.45rem,3.6vw,1.95rem);letter-spacing:.02em;margin:0 0 .35rem}
.sw-demo .seccion-sub{color:var(--tinta-suave);margin:0 0 2.2rem;font-size:1.02rem}
.sw-demo .parada{position:relative;padding:0 0 1.7rem 4.4rem;margin:0}
.sw-demo .parada .n{position:absolute;left:0;top:-.85rem;font-family:var(--titulo);
    font-weight:700;font-size:4.1rem;line-height:1;color:var(--oro-tenue);
    user-select:none}
.sw-demo .parada h3{font-family:var(--titulo);font-weight:600;
    color:var(--tinta) !important;font-size:1.13rem;letter-spacing:.015em;margin:0 0 .3rem}
.sw-demo .parada h3 b{color:var(--oro);font-weight:600}
.sw-demo .parada p{color:var(--tinta-suave);font-size:1rem;margin:0}

/* ---------- Lo abierto ---------- */
.sw-demo .abierto{background:var(--caja);border:1px solid var(--borde);
    border-left:3px solid var(--oro-osc);border-radius:3px;padding:1.7rem 1.6rem;
    max-width:44rem;margin:0 auto}
.sw-demo .abierto h2{font-family:var(--titulo);color:var(--oro) !important;font-weight:600;
    font-size:1.32rem;letter-spacing:.02em;margin:0 0 .35rem}
.sw-demo .abierto>p{color:var(--tinta-suave);font-size:1rem;margin:0 0 1.15rem}
.sw-demo .abierto ul{list-style:none;padding:0;margin:0}
.sw-demo .abierto li{padding:.52rem 0;border-top:1px solid rgba(58,50,41,.55)}
.sw-demo .abierto li:first-child{border-top:0}
.sw-demo .abierto a{color:var(--oro) !important;font-weight:600;text-decoration:none;
    border-bottom:1px solid var(--oro-tenue)}
.sw-demo .abierto a:hover,.sw-demo .abierto a:focus{color:#F0C75E !important;
    border-bottom-color:#F0C75E}
.sw-demo .abierto em{color:var(--tinta-suave);font-style:normal;font-size:.94rem}

/* ---------- La nota firmada ---------- */
.sw-demo .nota{max-width:40rem;margin:0 auto;padding:0 1.1rem}
.sw-demo .nota .comilla{font-family:var(--titulo);color:var(--oro-tenue);
    font-size:4.6rem;line-height:.5;display:block;margin:0 0 .6rem}
.sw-demo .nota p{color:var(--tinta-suave);font-size:1.06rem;line-height:1.68;margin:0 0 1rem}
.sw-demo .nota .firma{color:var(--tinta);font-size:.98rem;margin-top:1.6rem;
    padding-top:1.1rem;border-top:1px solid var(--borde)}
.sw-demo .nota .firma b{font-family:var(--titulo);color:var(--oro);font-size:1.1rem;
    letter-spacing:.03em}
.sw-demo .nota .firma a{color:var(--oro) !important}

@media(max-width:640px){
  .sw-demo{font-size:1rem}
  .sw-demo .claves{transform:none;padding:1.7rem 1.2rem 1.3rem;margin:0 1.1rem}
  /* Los dos recuadros, con el mismo aire a los lados que el texto:
     a sangre parecen bandas de fondo, no piezas. */
  .sw-demo .abierto{margin:0 1.1rem;padding:1.4rem 1.2rem}
  .sw-demo .sello{position:static;margin:1.2rem auto 0;transform:rotate(-6deg)}
  .sw-demo .claves .fin{max-width:none}
  .sw-demo .botones a{display:block;margin:.55rem 0}
  .sw-demo .parada{padding-left:3.4rem}
  .sw-demo .parada .n{font-size:3.1rem;top:-.45rem}
}