/* Multimedia Tropas de Magón: grid de vídeos y fotos */
/* !important para vencer cualquier regla del template Cassiopeia */
.com-magon-videos .magon-videos-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.2rem !important;
    margin-bottom: 2rem !important;
}
.com-magon-videos .magon-video-embed {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    padding-top: 0 !important;
}
.com-magon-videos .magon-video-embed iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
.com-magon-videos .magon-video-titulo {
    font-weight: 700;
    margin-top: .4rem;
    color: var(--magon-dorado, #B8860B);
}
/* Grid de fotos */
.com-magon-galerias .magon-fotos-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: .6rem !important;
    margin-bottom: 1.5rem !important;
}
.com-magon-galerias .magon-foto-item {
    /*
     * VERTICAL, NO CUADRADA.
     *
     * Con la caja cuadrada, object-fit: cover recorta por arriba y por
     * abajo, y en las fotos de gente eso significa cortar las caras. Las
     * fotos de una asociacion son casi siempre personas: el formato
     * vertical las respeta. Es el mismo 3/4 que ya usan las miniaturas
     * del panel por esta misma razon.
     */
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #111 !important;
}
.com-magon-galerias .magon-foto-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
/* Grid de categorías/galerías */
.com-magon-galerias .magon-galerias-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
}

/* ------------------------------------------------------------------ */
/* Multimedia del BACKEND: la rejilla de galerias y la de fotos.       */
/*                                                                    */
/* Estas medidas estaban en atributos style= dentro de la plantilla.   */
/* Aqui se pueden cambiar sin tocar PHP, y sobre todo se pueden        */
/* adaptar al movil, cosa que un style= en linea no permite.          */
/* Sin !important: en el backend no hay ninguna Cassiopeia peleando.   */
/* ------------------------------------------------------------------ */
.magon-galerias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.magon-galeria {
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}
.magon-galeria:hover,
.magon-galeria:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.magon-galeria-portada {
    height: 140px;
    object-fit: cover;
}
/* Una galeria sin ninguna foto aprobada todavia: se reserva el mismo
   hueco que ocuparia la portada para que la rejilla no baile. */
.magon-galeria-vacia {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: rgba(0, 0, 0, .05);
}
.magon-fotos-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
/* LA MINIATURA ES VERTICAL, Y NO POR GUSTO.
 *
 * Era un recorte apaisado de 130 px de alto. La mayoria de las fotos de una
 * asociacion son de personas, y muchas estan hechas en vertical: metidas en
 * una caja apaisada, object-fit: cover recortaba por arriba y por abajo y
 * les cortaba la cara. Justo lo unico que hay que reconocer para moderar.
 *
 * Con la caja en vertical, una foto vertical entra casi entera y una
 * apaisada se recorta por los lados, donde no suele haber nadie.
 *
 * Y object-position center 30%: al recortar, se conserva la parte de ARRIBA,
 * que es donde estan las cabezas. Centrado, en un grupo se quedaba el torso.
 */
.magon-foto-mini {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}
/* La casilla de seleccion, legible sobre cualquier foto. */
.magon-foto-marca {
    position: absolute;
    top: 0;
    left: 0;
    margin: .25rem;
    padding: 0 .2rem;
    background: rgba(255, 255, 255, .85);
    border-radius: 3px;
    z-index: 1;
}
.magon-sumario {
    cursor: pointer;
}
@media (max-width: 575px) {
    .magon-galerias {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .magon-fotos-rejilla {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* Vídeo subido como fichero: no hay miniatura de YouTube que pedir, así que
   se reserva el mismo hueco para que la tabla no baile. */
.magon-video-sin-miniatura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 72px;
    font-size: 1.6rem;
    background: rgba(0, 0, 0, .05);
    border-radius: .25rem;
}

/* Los vídeos dentro de una galería del backend. */
.magon-videos-mini {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
}
.magon-video-mini {
    color: inherit;
}
.magon-video-mini:hover span:first-of-type,
.magon-video-mini:focus-visible span:first-of-type {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Arrastrar y soltar ficheros.                                       */
/*                                                                    */
/* La clase la pone el JavaScript, no el PHP: si el script no llega,  */
/* no hay borde de puntos prometiendo algo que no funciona; se ve el  */
/* campo de examinar de siempre y ya está.                            */
/* ------------------------------------------------------------------ */
.magon-soltar {
    border: 2px dashed rgba(128, 128, 128, .55);
    border-radius: .5rem;
    padding: .6rem;
    transition: border-color .12s ease, background-color .12s ease;
}
.magon-soltar:focus-within {
    border-color: var(--magon-dorado, #B8860B);
}
/* Mientras se arrastra algo encima. */
.magon-soltar.magon-soltando {
    border-color: var(--magon-dorado, #B8860B);
    border-style: solid;
    background: rgba(184, 134, 11, .10);
}
.magon-soltar-aviso {
    margin: .4rem 0 0;
    font-size: .82rem;
    opacity: .75;
    /* Con quince ficheros soltados, la lista de nombres no debe empujar
       el botón de subir fuera de la pantalla. */
    max-height: 4.5rem;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

/* El reproductor dentro de la ventana de vídeo. Estas medidas estaban
   escritas dentro del JavaScript que construía la etiqueta; aquí se pueden
   cambiar sin tocar código. */
.magon-video-reproductor {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #000;
}

/* Vestuario: la miniatura del conjunto que se está viendo. El JavaScript
   escribía estos dos valores a mano en cada cambio, con el dorado a fuego;
   ahora solo pone la clase y el color sale de la paleta. */
.magon-vestuario-track {
    display: flex;
    transition: transform .25s ease;
}
.magon-vestuario-thumb {
    opacity: .7;
    border: 2px solid transparent;
    transition: opacity .15s ease, border-color .15s ease;
}
.magon-vestuario-thumb.es-activa {
    opacity: 1;
    border-color: var(--magon-dorado-claro, #D4A017);
}


/* ------------------------------------------------------------------
   LA VENTANA DE UNA FOTO EN EL PANEL

   Se abre con :target -el enlace de la miniatura apunta a su id- y se
   cierra volviendo a #. Sin una linea de JavaScript, que es lo que exige
   la politica de seguridad del sitio.
   ------------------------------------------------------------------ */
.magon-foto-ventana {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    padding: 2vh 2vw;
}

.magon-foto-ventana:target {
    display: block;
}

/* El fondo tambien cierra: pinchar fuera es lo que todo el mundo
   intenta antes de buscar el aspa. */
.magon-foto-ventana-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .75);
}

.magon-foto-ventana-caja {
    position: relative;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 1100px;
    max-height: 96vh;
    margin: 0 auto;
    padding: 1rem;
    overflow: auto;
    border-radius: .5rem;
    background: var(--magon-superficie, #1a1a1a);
    color: var(--magon-texto, #f2f2e9);
}

.magon-foto-ventana-img {
    flex: 1 1 320px;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: .35rem;
}

.magon-foto-ventana-opciones {
    flex: 1 1 260px;
    min-width: 260px;
}

.magon-foto-ventana-cerrar {
    position: absolute;
    top: .25rem;
    right: .5rem;
    z-index: 1;
    font-size: 2rem;
    line-height: 1;
    text-decoration: none;
    color: inherit;
    opacity: .8;
}


/* ------------------------------------------------------------------
   LA PORTADA DE CADA GALERIA

   Estaba escrita dentro del propio HTML -style="aspect-ratio:4/3..."-
   en dos sitios de la plantilla. Por eso cambiar la hoja de estilos no
   la afectaba: lo que va en el atributo style gana siempre.

   Y va VERTICAL como las fotos: la portada de una galeria es una foto
   de la asociacion, casi siempre con gente, y una caja apaisada les
   recorta la cabeza y los pies.
   ------------------------------------------------------------------ */
.magon-cat-portada {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    /* Un fondo oscuro mientras carga y para las fotos que no llenan la
       caja. No se fija el color del texto: aqui no hay texto. */
    background: rgba(0, 0, 0, .55);
}

.magon-cat-portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}