/**
 * La imagen ampliada.
 *
 * Todo cuelga de un `<dialog>` nativo, así que el fondo lo pone el
 * navegador con `::backdrop` y no hay ni un `z-index` inventado que
 * pueda pelearse con el de otro componente del sitio.
 *
 * ## Por qué la geometría va FUERA de la capa
 *
 * El diálogo ocupa la ventana ENTERA y centra la imagen por dentro, en
 * vez de ser una caja del tamaño de la imagen que el navegador centra
 * con `margin: auto`. La razón es un fallo real (2026-09-11, medido en
 * una web sobre un tema comprado): ese tema trae `* { margin: 0 }` sin
 * capa, y como todo el CSS del núcleo vive dentro de `@layer`, cualquier
 * hoja SIN capa le gana — la del navegador ya de entrada. Resultado: el
 * `margin: auto` que centra un `<dialog>` desaparecía y la imagen salía
 * pegada a la esquina superior izquierda, sin ningún error.
 *
 * Con un diálogo a pantalla completa no hay margen del que depender, y
 * las cuatro declaraciones que fijan su geometría van FUERA de la capa
 * para que ningún reset genérico pueda tocarlas: un selector de clase
 * gana a `*` por especificidad, se cargue lo que se cargue después. Lo
 * que sí queda dentro de la capa es el ASPECTO —colores, radios,
 * sombras—, que es lo que un sitio tiene derecho a redefinir.
 */

/* ---- Geometría, fuera de la capa a propósito (ver cabecera) ------- */

.iris-lightbox[open] {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    border: 0;
    background: transparent;
    /* Una columna centrada en la ventana: la imagen y, pegada debajo,
       la barra con la leyenda y el contador. Centrar el CONJUNTO y no
       solo la imagen es lo que evita que la leyenda se quede huérfana
       al pie de la pantalla, lejos de la foto a la que pertenece —que
       es como salía con una rejilla de dos filas—. Las flechas y el
       cierre van en absoluto encima. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* El aire alrededor de la imagen y de la barra del pie también va
   aquí: son `padding`, y `padding` es justo lo que un `* { padding: 0 }`
   pisa. Medido en la misma web: con esta regla dentro de la capa, la
   imagen ocupaba el ancho entero de la ventana, de borde a borde. */
.iris-lightbox[open] > .iris-lightbox__marco {
    display: grid;
    place-items: center;
    flex: 0 1 auto;
    min-block-size: 0;
    /* Carril para las flechas y el cierre en una pantalla ancha. En una
       estrecha se reduce y las flechas flotan sobre los bordes de la
       foto: el dedo ya tiene el gesto de arrastrar. */
    padding: 3.75rem 4.5rem 0.75rem;
}

.iris-lightbox[open] > .iris-lightbox__barra {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0 1.5rem 1.5rem;
}

@media (max-width: 47.99rem) {
    .iris-lightbox[open] > .iris-lightbox__marco { padding: 3.75rem 0.75rem 0.5rem; }
}

/* El modo zoom cambia `display`/`overflow`, así que —como el resto de
   esta sección— va FUERA de la capa: `.iris-lightbox[open] > .iris-lightbox__marco`
   de arriba también vive sin capa, y un selector en `@layer` nunca le
   gana a uno sin capa por mucha especificidad que tenga (ver la
   cabecera del archivo). Puesto dentro de la capa, un tema con reset
   propio sin capa habría dejado el zoom SIN scroll, sin dar ningún
   error — exactamente el fallo que ya costó una tarde en 2026-09-11. */
.iris-lightbox[open] > .iris-lightbox__marco.iris-lightbox__marco--zoom {
    display: block;
    place-items: unset;
    overflow: auto;
    cursor: grab;
}

.iris-lightbox[open] > .iris-lightbox__marco.iris-lightbox__marco--zoom:active {
    cursor: grabbing;
}

/* La página de detrás no debe desplazarse mientras el diálogo está
   abierto: `showModal()` bloquea la interacción, no el scroll. */
html:has(.iris-lightbox[open]) { overflow: hidden; }

@layer iris.public {
    .iris-lightbox {
        color: #fff;
        font-family: inherit;
    }

    .iris-lightbox::backdrop {
        background: rgb(0 0 0 / 0.88);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    /* Aparece con un fundido breve. `@starting-style` es lo que permite
       animar la ENTRADA de algo que pasa de `display: none` a visible;
       sin él, la transición no tiene desde dónde empezar. Y siempre
       detrás de la preferencia del sistema: quien pide menos movimiento
       lo ve aparecer sin más. */
    @media (prefers-reduced-motion: no-preference) {
        .iris-lightbox[open],
        .iris-lightbox[open]::backdrop {
            transition: opacity 0.2s ease;
        }

        @starting-style {
            .iris-lightbox[open],
            .iris-lightbox[open]::backdrop { opacity: 0; }
        }
    }

    /* ---- La imagen, centrada en lo que sobra ---------------------- */

    .iris-lightbox__imagen {
        display: block;
        max-inline-size: 100%;
        /* Lo que queda de alto tras el carril superior, el aire y la
           barra del pie (unas 9,5rem en total): así la leyenda siempre
           cabe debajo sin empujar nada fuera de la ventana. */
        max-block-size: calc(100dvh - 9.5rem);
        inline-size: auto;
        block-size: auto;
        object-fit: contain;
        border-radius: var(--radius-sm, 0.25rem);
        box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.5);
        transition: opacity 0.2s ease;
    }

    /* Mientras carga la siguiente, la actual se atenúa: dice «está
       llegando» sin un indicador aparte, y sin dejar un hueco negro
       con el tamaño de la anterior. */
    .iris-lightbox__imagen[data-cargando] { opacity: 0.35; }

    /* ---- La barra del pie: leyenda y contador --------------------- */

    .iris-lightbox__barra { text-align: center; }

    .iris-lightbox__pie {
        margin: 0;
        max-inline-size: 70ch;
        font-size: var(--text-sm, 0.875rem);
        line-height: 1.4;
        opacity: 0.9;
    }

    .iris-lightbox__pie[hidden] { display: none !important; }

    .iris-lightbox__contador {
        font-size: var(--text-xs, 0.75rem);
        letter-spacing: 0.06em;
        opacity: 0.6;
        font-variant-numeric: tabular-nums;
    }

    /* ---- Los botones ---------------------------------------------- */

    .iris-lightbox__flecha,
    .iris-lightbox__cerrar {
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 44px de área táctil, como el resto de la interfaz pública. */
        inline-size: 2.75rem;
        block-size: 2.75rem;
        padding: 0;
        border: 1px solid rgb(255 255 255 / 0.25);
        border-radius: 50%;
        background: rgb(255 255 255 / 0.12);
        color: #fff;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: background-color 0.15s ease;
    }

    .iris-lightbox__flecha:hover,
    .iris-lightbox__cerrar:hover { background: rgb(255 255 255 / 0.28); }

    .iris-lightbox__flecha:focus-visible,
    .iris-lightbox__cerrar:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .iris-lightbox__flecha[hidden],
    .iris-lightbox__cerrar[hidden] { display: none !important; }

    /* Las flechas, a media altura de la ventana: es donde las busca la
       mano, y donde no tapan la leyenda. */
    .iris-lightbox__flecha {
        inset-block-start: 50%;
        translate: 0 -50%;
    }

    .iris-lightbox__flecha--anterior  { inset-inline-start: var(--space-3, 1rem); }
    .iris-lightbox__flecha--siguiente { inset-inline-end: var(--space-3, 1rem); }

    .iris-lightbox__cerrar {
        inset-block-start: var(--space-3, 1rem);
        inset-inline-end: var(--space-3, 1rem);
    }

    /* Los glifos son texto y se centran ópticamente un pelo alto. */
    .iris-lightbox__flecha > span,
    .iris-lightbox__cerrar > span {
        display: block;
        translate: 0 -0.06em;
    }

    /* En una pantalla estrecha no cabe reservar carril para las
       flechas: la imagen usa el ancho y las flechas flotan sobre sus
       bordes. El dedo, además, ya tiene el gesto de arrastrar. */
    @media (max-width: 47.99rem) {
        .iris-lightbox__flecha--anterior  { inset-inline-start: var(--space-2, 0.5rem); }
        .iris-lightbox__flecha--siguiente { inset-inline-end: var(--space-2, 0.5rem); }
    }

    /* El enlace que envuelve una miniatura no debe cambiar su aspecto:
       sin esto hereda el subrayado y el color de enlace del sitio. */
    a[data-lightbox] {
        display: block;
        color: inherit;
        text-decoration: none;
        cursor: zoom-in;
    }

    /* ---- El zoom (2026-09-16) --------------------------------------
     *
     * Nada de `transform: scale()`: un elemento transformado NO amplía
     * su área de desplazamiento —es un efecto puramente visual—, así
     * que `overflow: auto` no serviría de nada y la mitad ampliada de
     * la imagen quedaría fuera de alcance sin forma de llegar a ella.
     * El zoom cambia el ANCHO real de la imagen (`width`, no
     * `max-width`), y es ESO lo que hace que el marco tenga de verdad
     * más contenido que sitio — con lo que `overflow: auto` pasa a
     * dar scroll y arrastre de verdad, con rueda, trackpad o dedo, sin
     * una sola línea de JavaScript para el propio desplazamiento.
     */
    .iris-lightbox__marco--zoom {
        text-align: center;
    }

    .iris-lightbox__marco--zoom .iris-lightbox__imagen {
        max-inline-size: none;
        max-block-size: none;
        cursor: zoom-out;
    }

    /* Los cuatro niveles: 100 (sin clase) → 150 → 200 → 250. Se aplican
       sobre el ANCHO del marco (`cqi`, la unidad de container query) y
       no sobre el de la imagen, porque la imagen ya está limitada por
       `object-fit` — es el contenedor el que tiene que crecer para que
       haya algo que recorrer. */
    .iris-lightbox__marco { container-type: inline-size; }

    .iris-lightbox__imagen--zoom-150 { inline-size: 150cqi; block-size: auto; }
    .iris-lightbox__imagen--zoom-200 { inline-size: 200cqi; block-size: auto; }
    .iris-lightbox__imagen--zoom-250 { inline-size: 250cqi; block-size: auto; }

    .iris-lightbox__zoom {
        position: absolute;
        inset-block-start: var(--space-3, 1rem);
        inset-inline-start: var(--space-3, 1rem);
        display: flex;
        gap: 0.4rem;
    }

    .iris-lightbox__zoom-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.75rem;
        block-size: 2.75rem;
        padding: 0;
        border: 1px solid rgb(255 255 255 / 0.25);
        border-radius: 50%;
        background: rgb(255 255 255 / 0.12);
        color: #fff;
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: background-color 0.15s ease;
    }

    .iris-lightbox__zoom-btn:hover:not(:disabled) { background: rgb(255 255 255 / 0.28); }

    .iris-lightbox__zoom-btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .iris-lightbox__zoom-btn:disabled {
        opacity: 0.35;
        cursor: default;
    }

    /* En una pantalla estrecha el zoom convive con las flechas y el
       cierre en el mismo carril superior: se apila debajo en vez de
       superponerse, que es lo que pasaría con las cuatro esquinas
       ocupadas a la vez en 360px. */
    @media (max-width: 47.99rem) {
        .iris-lightbox__zoom {
            inset-block-start: auto;
            inset-block-end: var(--space-3, 1rem);
            inset-inline-start: 50%;
            translate: -50% 0;
        }
    }
}