/* v2.50.85 — Panel de comentarios del visor de la Galería Histórica.
   Escritorio: columna lateral pegada al borde derecho.
   Móvil: panel situado debajo de la fotografía.
   Al plegar en escritorio, el panel queda arriba y libera todo el ancho de imagen. */

:root {
    --gallery-lightbox-panel-width: clamp(320px, 23vw, 390px);
    --gallery-lightbox-panel-collapsed-width: min(330px, calc(100vw - 88px));
}

@media (min-width: 761px) {
    .gallery-viewer-immersive {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
    }

    .gallery-viewer-immersive .gallery-viewer-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--gallery-lightbox-panel-width) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        transition: grid-template-columns var(--motion-normal) var(--ease-standard);
    }

    .gallery-viewer-immersive .gallery-viewer-image-area {
        position: relative !important;
        inset: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: auto !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .gallery-viewer-immersive .gallery-viewer-image-stage,
    .gallery-viewer-immersive.layout-side .gallery-viewer-image-stage {
        position: absolute !important;
        inset: 12px !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .gallery-viewer-immersive .gallery-viewer-social,
    .gallery-viewer-immersive.layout-side .gallery-viewer-social,
    .gallery-viewer-immersive.layout-overlay .gallery-viewer-social {
        position: relative !important;
        inset: auto !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-width: 0 0 0 1px !important;
        border-radius: 0 !important;
        background: rgba(16, 14, 13, .94) !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: -12px 0 34px rgba(0, 0, 0, .25) !important;
    }

    .gallery-viewer-immersive .gallery-viewer-social-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .gallery-viewer-immersive .gallery-viewer-social-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    .gallery-viewer-immersive .gallery-viewer-close,
    .gallery-viewer-immersive .gallery-viewer-next,
    .gallery-viewer-immersive.layout-side .gallery-viewer-next {
        right: calc(var(--gallery-lightbox-panel-width) + 16px) !important;
        transition: right var(--motion-normal) var(--ease-standard), background var(--motion-fast), transform var(--motion-fast);
    }

    .gallery-viewer-immersive.is-panel-collapsed .gallery-viewer-shell {
        grid-template-columns: minmax(0, 1fr) 0 !important;
    }

    .gallery-viewer-immersive.is-panel-collapsed .gallery-viewer-social,
    .gallery-viewer-immersive.is-panel-collapsed.layout-side .gallery-viewer-social,
    .gallery-viewer-immersive.is-panel-collapsed.layout-overlay .gallery-viewer-social {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        width: var(--gallery-lightbox-panel-collapsed-width) !important;
        max-width: calc(100vw - 88px) !important;
        height: 48px !important;
        max-height: 48px !important;
        min-height: 48px !important;
        border: 1px solid rgba(255, 255, 255, .13) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .4) !important;
        overflow: hidden !important;
    }

    .gallery-viewer-immersive.is-panel-collapsed .gallery-viewer-close {
        right: calc(var(--gallery-lightbox-panel-collapsed-width) + 28px) !important;
    }

    .gallery-viewer-immersive.is-panel-collapsed .gallery-viewer-next {
        right: 16px !important;
    }
}

@media (max-width: 760px) {
    .gallery-viewer-immersive {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        overflow-y: auto !important;
    }

    .gallery-viewer-immersive .gallery-viewer-shell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow: visible !important;
    }

    .gallery-viewer-immersive .gallery-viewer-image-area {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 min(64dvh, 620px) !important;
        width: 100% !important;
        min-height: 300px !important;
        overflow: hidden !important;
    }

    .gallery-viewer-immersive .gallery-viewer-image-stage {
        position: absolute !important;
        inset: 6px !important;
    }

    .gallery-viewer-immersive .gallery-viewer-social,
    .gallery-viewer-immersive.layout-side .gallery-viewer-social,
    .gallery-viewer-immersive.layout-overlay .gallery-viewer-social {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto !important;
        width: calc(100% - 12px) !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 6px 6px !important;
        border-radius: 18px !important;
    }

    .gallery-viewer-immersive .gallery-viewer-social-scroll {
        max-height: min(42dvh, 430px) !important;
    }
}