/*
 * «Comunidad → Fotos» (/socio/contenidos), rediseño del 10 oct 2026: las
 * galerías a la vista, por categorías y con un filtro si hay varias, y lo
 * que publica la asociación debajo; dentro de una galería, las fotos en
 * mosaico, «Mandar fotos» plegado y el visor.
 *
 * Solo la carga plantillas/socio/contenidos.php, después de socio.css (de
 * ahí salen las pestañas de Comunidad).
 *
 *  1. La barra: filtro por categoría y buscador
 *  2. Las galerías
 *  3. Lo que publica la asociación
 *  4. Una galería: mosaico, tus fotos y mandar fotos
 *  5. El visor
 *
 * Convenciones: cada pieza lleva sus ajustes de móvil justo debajo; el texto
 * sobre una foto va siempre en blanco sobre un degradado oscuro, sea cual
 * sea el tema.
 */

/* #region 1. La barra: filtro por categoría y buscador */
.galerias__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin-bottom: var(--espacio-5);
}

.galerias__barra[hidden],
.galerias__filtro[hidden],
.galerias__buscar[hidden] {
    display: none;
}

.galerias__filtro {
    flex-wrap: wrap;
    max-width: 100%;
}

.galerias__buscar {
    flex: 1 1 14rem;
}
/* #endregion */

/* #region 2. Las galerías: todas seguidas, la primera en grande */
.galerias__rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: var(--espacio-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* La primera ocupa dos de ancho y dos de alto; con tres, la rejilla queda llena. */
.galerias__rejilla > :first-child {
    grid-row: span 2;
    grid-column: span 2;
}

/* Con una o dos, a todo lo ancho: sin huecos al lado. */
.galerias__rejilla:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.galerias__rejilla:has(> :nth-child(2):last-child) > :first-child {
    grid-row: auto;
    grid-column: auto;
}

.galerias__rejilla > :only-child {
    grid-row: auto;
    grid-column: 1 / -1;
}

.galerias__rejilla > :only-child .galeria-tarjeta {
    aspect-ratio: 21 / 9;
}

/* Cada galería: la portada a toda la tarjeta y, encima, lo que es. */
.galeria-tarjeta {
    position: relative;
    display: block;
    height: 100%;
    min-height: 15rem;
    overflow: hidden;
    border-radius: var(--radio-xl);
    background: var(--rs-superficie-2);
    color: #fff;
    text-decoration: none;
}

.galeria-tarjeta:hover {
    color: #fff;
}

.galeria-tarjeta:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.galeria-tarjeta__portada {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s var(--curva);
}

.galeria-tarjeta:hover .galeria-tarjeta__portada {
    transform: scale(1.03);
}

.galeria-tarjeta__portada--vacia {
    display: grid;
    place-items: center;
    color: var(--rs-texto-tenue);
}

.galeria-tarjeta__portada--vacia .icono {
    width: 40px;
    height: 40px;
}

.galeria-tarjeta__texto {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 2px;
    padding: var(--espacio-8) var(--espacio-5) var(--espacio-4);
    background: linear-gradient(to top, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.42) 62%, transparent);
}

.galeria-tarjeta__texto small {
    color: rgb(255 255 255 / 0.85);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.galeria-tarjeta__texto strong {
    font-family: var(--fuente-display);
    font-size: clamp(1.125rem, 1.5vw, 1.35rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.galerias__rejilla > :first-child .galeria-tarjeta__texto strong {
    font-size: clamp(1.5rem, 2.8vw, 2.5rem);
    letter-spacing: -0.03em;
}

.galeria-tarjeta__texto > span {
    color: rgb(255 255 255 / 0.85);
    font-size: var(--texto-etiqueta);
}

/* «Puedes mandar fotos»: una línea más, sin pastillas sobre la foto. */
.galeria-tarjeta__envios {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    margin-top: 2px;
}

.galeria-tarjeta__envios .icono {
    flex: none;
    width: 14px;
    height: 14px;
}

/* En el móvil, de dos en dos y cuadradas (15 oct 2026: una por pantalla, enorme, obligaba a bajar mucho); la primera, a lo ancho. */
@media (max-width: 640px) {
    .galerias__rejilla,
    .galerias__rejilla:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-3);
    }

    .galeria-tarjeta {
        min-height: 0;
        aspect-ratio: 1;
        border-radius: var(--radio-lg);
    }

    .galerias__rejilla > :first-child,
    .galerias__rejilla:has(> :nth-child(2):last-child) > :first-child {
        grid-row: auto;
        grid-column: 1 / -1;
    }

    .galerias__rejilla > :first-child .galeria-tarjeta,
    .galerias__rejilla > :only-child .galeria-tarjeta {
        aspect-ratio: 3 / 2;
    }

    .galeria-tarjeta__texto {
        padding: var(--espacio-6) var(--espacio-3) var(--espacio-3);
    }

    .galeria-tarjeta__texto strong {
        font-size: var(--texto-base);
    }

    .galeria-tarjeta__texto > span,
    .galeria-tarjeta__texto small {
        font-size: var(--texto-pequeno);
    }
}

@media (prefers-reduced-motion: reduce) {
    .galeria-tarjeta__portada {
        transition: none;
    }
}
/* #endregion */

/* #region 3. Lo que publica la asociación */
.comunidad-informacion {
    margin-top: var(--espacio-8);
}

.comunidad-informacion[hidden] {
    display: none;
}

.comunidad-informacion h2 {
    margin: 0 0 var(--espacio-3);
    font-size: var(--texto-grande);
}

.comunidad-informacion__lista {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    list-style: none;
}

/* Cada cosa: su icono (texto, enlace o documento), el título, el texto y su botón. */
.comunidad-informacion__elemento {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    padding-block: var(--espacio-4);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.comunidad-informacion__icono {
    flex: none;
    color: var(--marca-acento);
}

.comunidad-informacion__icono .icono {
    display: block;
    width: 22px;
    height: 22px;
}

.comunidad-informacion__textos {
    display: grid;
    flex: 1;
    justify-items: start;
    gap: var(--espacio-2);
    min-width: 0;
}

.comunidad-informacion__textos h3 {
    margin: 0;
    font-size: var(--texto-base);
}

.comunidad-informacion__textos p {
    margin: 0;
    color: var(--rs-texto-secundario);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* #endregion */

/* #region 4. Una galería: mosaico, tus fotos y mandar fotos */
.galeria__datos {
    margin: var(--espacio-1) 0 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* Las fotos, cuadradas, una junto a otra; el pie, encima de la foto. */
.mosaico-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mosaico-fotos--pequeno {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.mosaico-fotos__foto {
    display: grid;
    gap: var(--espacio-1);
    min-width: 0;
}

.mosaico-fotos__abrir {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    aspect-ratio: 1;
    cursor: zoom-in;
}

.mosaico-fotos__abrir:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.mosaico-fotos__abrir img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--curva);
}

.mosaico-fotos__abrir:hover img {
    transform: scale(1.05);
}

.mosaico-fotos__pie {
    position: absolute;
    inset: auto 0 0;
    overflow: hidden;
    padding: var(--espacio-5) var(--espacio-2) var(--espacio-2);
    background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
    color: #fff;
    font-size: var(--texto-pequeno);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Las tuyas aún sin publicar: cómo van, encima de la foto. */
.mosaico-fotos__estado {
    position: absolute;
    top: var(--espacio-2);
    left: var(--espacio-2);
    background: var(--rs-superficie-1);
    box-shadow: var(--sombra-sm);
}

.mosaico-fotos__motivo {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.galeria-mias {
    margin-bottom: var(--espacio-6);
}

.galeria-mias[hidden] {
    display: none;
}

.galeria-mias h2 {
    margin: 0 0 var(--espacio-3);
    font-size: var(--texto-base);
}

/* Mandar fotos: el formulario, plegado tras el botón. */
.galeria-enviar {
    display: grid;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-5);
}

.galeria-enviar__cabecera h2 {
    margin: 0;
    font-size: var(--texto-grande);
}

.galeria-enviar__cabecera p {
    margin: 2px 0 0;
}

.galeria-enviar__formulario {
    display: grid;
    gap: var(--espacio-3);
}

.galeria-enviar__formulario[hidden] {
    display: none;
}

.galeria-enviar__formulario .campo,
.galeria-enviar__formulario .campo-checkbox,
.galeria-enviar__formulario .formulario-acciones {
    margin: 0;
}

/* La zona para elegir las fotos: grande, con su dibujo, y dice cuántas has elegido. */
.galeria-enviar__zona {
    display: grid;
    justify-items: center;
    gap: var(--espacio-1);
    padding: var(--espacio-6) var(--espacio-4);
    border: 2px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-lg);
    background: var(--rs-control-fondo);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    text-align: center;
    cursor: pointer;
}

.galeria-enviar__zona:hover,
.galeria-enviar__zona:focus-within {
    border-color: var(--rs-azul);
    color: var(--rs-texto);
}

.galeria-enviar__zona .icono {
    width: 32px;
    height: 32px;
    color: var(--rs-azul);
}

.galeria-enviar__zona strong {
    color: var(--rs-texto);
    font-size: var(--texto-base);
}

#enviar-hecho {
    margin: 0 0 var(--espacio-5);
}

@media (max-width: 767px) {
    .mosaico-fotos {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }

    .mosaico-fotos--pequeno {
        grid-template-columns: repeat(3, 1fr);
    }

    .mosaico-fotos__abrir {
        border-radius: var(--radio-sm);
    }

    .mosaico-fotos__pie {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mosaico-fotos__abrir img {
        transition: none;
    }
}
/* #endregion */

/* #region 5. El visor */
/* La foto a pantalla completa sobre negro; arriba, cuántas, descargar y cerrar. */
.visor-fotos {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
    color: #fff;
}

.visor-fotos[open] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
}

.visor-fotos::backdrop {
    background: #000;
}

.visor-fotos__barra {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4);
}

.visor-fotos__contador {
    flex: 1;
    margin: 0;
    color: rgb(255 255 255 / 0.8);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

.visor-fotos__descargar[hidden] {
    display: none;
}

.visor-fotos__cerrar {
    color: #fff;
}

.visor-fotos__cerrar:hover {
    background: rgb(255 255 255 / 0.12);
    color: #fff;
}

.visor-fotos__figura {
    display: grid;
    grid-column: 2;
    justify-items: center;
    gap: var(--espacio-3);
    max-height: 100%;
    margin: 0;
    padding: 0 0 var(--espacio-5);
    min-height: 0;
}

.visor-fotos__figura img {
    max-width: 100%;
    max-height: calc(100dvh - 9rem);
    object-fit: contain;
}

.visor-fotos__figura figcaption {
    color: rgb(255 255 255 / 0.85);
    text-align: center;
}

.visor-fotos__flecha {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 var(--espacio-3);
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    cursor: pointer;
}

.visor-fotos__flecha:hover {
    background: rgb(255 255 255 / 0.22);
}

.visor-fotos__flecha:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.visor-fotos__flecha[hidden] {
    visibility: hidden;
}

/* En el móvil, las flechas, abajo a los lados (se pasa también deslizando el dedo). */
@media (max-width: 767px) {
    .visor-fotos[open] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .visor-fotos__figura {
        grid-column: 1;
        grid-row: 2;
    }

    .visor-fotos__flecha {
        grid-row: 3;
        margin: 0 var(--espacio-4) calc(var(--espacio-4) + env(safe-area-inset-bottom));
    }

    .visor-fotos__flecha--anterior {
        justify-self: start;
        grid-column: 1;
    }

    .visor-fotos__flecha--siguiente {
        justify-self: end;
        grid-column: 1;
    }
}
/* #endregion */

/* #region «Ver más» debajo de las galerías y las fotos (revisión de huecos del 31 oct 2026) */
.cont-ver-mas {
    display: flex;
    margin: var(--espacio-4) auto 0;
}

.cont-ver-mas[hidden] {
    display: none;
}
/* #endregion */