/* Galería de imágenes de una ficha (convocatoria, espacio): foto grande para deslizar,
   tiras de miniaturas y visor a pantalla completa. assets/js/galeria-ficha.js arma todo
   a partir de la rejilla simple de la página; sin JavaScript se queda la rejilla. */

.gfc { margin: 14px 0 26px; }
.gfc-escenario {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0c0c0c;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
}
.gfc-pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.gfc-pista::-webkit-scrollbar { display: none; }
.gfc-pista:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
.gfc-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 4 / 5;
    max-height: 82vh;
    padding: 0;
    border: 0;
    background: #0c0c0c;
    cursor: zoom-in;
    overflow: hidden;
    display: block;
}
@media (min-width: 640px) { .gfc-slide { aspect-ratio: 1 / 1; max-height: 78vh; } }
/* La misma foto, muy desenfocada, rellena los lados cuando la imagen no es del mismo formato. */
.gfc-fondo {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    object-fit: cover;
    filter: blur(26px) brightness(0.45) saturate(1.3);
    pointer-events: none;
}
.gfc-frente {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gfc-contador {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.gfc-ampliar {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.gfc-ampliar svg { width: 20px; height: 20px; }
.gfc-flecha {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    display: none;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.gfc-flecha[disabled] { opacity: 0; pointer-events: none; }
.gfc-prev { left: 12px; }
.gfc-sig { right: 12px; }
@media (hover: hover) and (pointer: fine) {
    .gfc-flecha { display: grid; }
    .gfc-flecha:hover, .gfc-ampliar:hover { background: rgba(0, 0, 0, 0.82); }
}
.gfc-minis {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: none;
}
.gfc-minis::-webkit-scrollbar { display: none; }
.gfc-mini {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #0c0c0c;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gfc-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfc-mini.activo { opacity: 1; border-color: var(--accion); }
.gfc-mini:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Visor a pantalla completa */
.gfc-visor {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 12px 24px;
    touch-action: pan-y pinch-zoom;
}
.gfc-visor[hidden] { display: none; }
.gfc-visor-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.gfc-visor-cerrar {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}
.gfc-visor-cuenta {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    left: 16px;
    color: #ddd;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.gfc-visor .gfc-flecha { display: grid; background: rgba(255, 255, 255, 0.1); }
.gfc-visor .gfc-flecha[disabled] { opacity: 0; }
@media (hover: none) { .gfc-visor .gfc-flecha { width: 40px; height: 40px; margin-top: -20px; } }
html.gfc-bloqueo, html.gfc-bloqueo body { overflow: hidden; }