/* ===============================================================
   Lightbox v3.0.0
   Integrado con el sistema de tokens nubarchiva (--nb-*)
   =============================================================== */

/* Tokens de componente (capa 2)
   Consumen tokens semánticos del visor; los específicos del lightbox
   se definen aquí con valores propios. */
:root {
    --nb-lb-spinner-size: 40px;
    --nb-lb-close-size: 50px;
    --nb-lb-z-overlay: 10000;
    --nb-lb-z-lightbox: 10001;
    --nb-lb-z-controls: 2;
}

/* ---------------------------------------------------------------
   Overlay
   --------------------------------------------------------------- */

#overlay {
    position: fixed;
    inset: 0;
    z-index: var(--nb-lb-z-overlay);
    background: var(--nb-viewer-overlay-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nb-duration-normal) var(--nb-ease-out);
}

#overlay.nb-lb-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------------------------------------------------------
   Lightbox (contenedor principal)
   --------------------------------------------------------------- */

#lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--nb-lb-z-lightbox);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--nb-space-3) var(--nb-space-12) var(--nb-space-3);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: opacity var(--nb-duration-normal) var(--nb-ease-out),
                transform var(--nb-duration-normal) var(--nb-ease-out);
}

#lightbox.nb-lb-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* ---------------------------------------------------------------
   Barra superior (título + descarga + cerrar)

   Layout: el caption se centra respecto al ancho completo del topBar
   mediante posición absoluta. Los botones (descarga + cerrar) se
   posicionan a la derecha en el flujo normal sin afectar al centrado.
   --------------------------------------------------------------- */

#lightboxTopBar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nb-space-3);
    width: 100%;
    flex-shrink: 0;
    min-height: var(--nb-lb-close-size);
    padding: 0 var(--nb-space-2);
    font-family: var(--nb-font-body-family);
    font-size: var(--nb-viewer-caption-font-size);
    line-height: var(--nb-line-height-md);
    color: var(--nb-viewer-caption-color);
    box-sizing: border-box;
}

#caption {
    position: absolute;
    left: var(--nb-lb-close-size);
    right: var(--nb-lb-close-size);
    font-weight: var(--nb-font-weight-bold);
    color: var(--nb-viewer-caption-color);
    text-decoration: none;
    text-align: center;
    pointer-events: none;
}

#caption:hover {
    text-decoration: underline;
}

/* Restaurar clicabilidad del enlace dentro del caption */
#caption[href] {
    pointer-events: auto;
}

#downloadUrl {
    color: var(--nb-viewer-caption-color);
    opacity: var(--nb-opacity-dimmed);
    transition: opacity var(--nb-duration-fast) var(--nb-ease-out);
    flex-shrink: 0;
    text-decoration: none;
}

#downloadUrl::before {
    font-family: var(--nb-icon-font-family);
    content: var(--nb-icon-action-download);
    font-size: var(--nb-icon-font-size);
}

#downloadUrl:hover {
    opacity: 1;
}

/* Botón cerrar: en el flujo del topBar, alineado verticalmente con flex */

#lightboxClose {
    flex-shrink: 0;
    width: var(--nb-lb-close-size);
    height: var(--nb-lb-close-size);
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--nb-viewer-nav-bg);
    color: var(--nb-viewer-control-color);
    cursor: pointer;
    filter: var(--nb-viewer-control-shadow);
    transition: opacity var(--nb-duration-fast) var(--nb-ease-out),
                background var(--nb-duration-fast) var(--nb-ease-out);
}

#lightboxClose::before {
    font-family: var(--nb-icon-font-family);
    content: var(--nb-icon-action-close);
    font-size: 24px;
    -webkit-text-stroke: 3px;
}

#lightboxClose:hover,
#lightboxClose:focus-visible {
    background: var(--nb-viewer-nav-bg-hover);
    opacity: 0.75;
    outline: none;
}

/* ---------------------------------------------------------------
   Contenedor de imagen
   --------------------------------------------------------------- */

#outerImageContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

#imageContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#lightboxImage {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: none;
    border-radius: var(--nb-radius-xs);
    transition: opacity var(--nb-duration-fast) var(--nb-ease-out),
                transform var(--nb-duration-fast) var(--nb-ease-out);
}

/* ---------------------------------------------------------------
   Navegación (flechas prev/next ? centradas respecto a la imagen)
   --------------------------------------------------------------- */

#hoverNav {
    display: contents;
}

#hoverNav a {
    outline: none;
    text-decoration: none;
}

#prevLink,
#nextLink {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 75px;
    height: 100px;
    z-index: var(--nb-lb-z-controls);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nb-viewer-nav-bg);
    border-radius: 0;
    cursor: pointer;
    filter: var(--nb-viewer-control-shadow);
    opacity: 0;
    transition: opacity var(--nb-duration-normal) var(--nb-ease-out),
                background var(--nb-duration-fast) var(--nb-ease-out);
}

/* Visible via timer JS (flashNav) ? funciona en todos los dispositivos */
#prevLink.nb-lb-nav-visible,
#nextLink.nb-lb-nav-visible {
    opacity: 0.75;
}

/* Visible al pasar el ratón ? solo en dispositivos con cursor real */
@media (hover: hover) {
    #prevLink:hover,
    #nextLink:hover {
        opacity: 0.75;
        background: var(--nb-viewer-nav-bg-hover);
    }
}

#prevLink {
    left: 0;
}

#nextLink {
    right: 0;
}

#prevLink::after,
#nextLink::after {
    font-family: var(--nb-icon-font-family);
    color: var(--nb-viewer-control-color);
    font-size: 40px;
    -webkit-text-stroke: 3px;
}

#prevLink::after {
    content: var(--nb-icon-nav-prev);
}

#nextLink::after {
    content: var(--nb-icon-nav-next);
}

/* Indicador de carga en posición del botón next */

#nextLinkLoading {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 75px;
    height: 100px;
    z-index: var(--nb-lb-z-controls);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nb-viewer-nav-bg);
    filter: var(--nb-viewer-control-shadow);
}

#nextLinkLoading::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--nb-viewer-control-color);
    border-radius: var(--nb-radius-pill);
    animation: nb-lb-spin 0.8s linear infinite;
}

/* ---------------------------------------------------------------
   Loading (spinner CSS)
   --------------------------------------------------------------- */

#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

#loading a {
    display: block;
}

@keyframes nb-lb-spin {
    to { transform: rotate(360deg); }
}

#loadingLink::after {
    content: '';
    display: block;
    width: var(--nb-lb-spinner-size);
    height: var(--nb-lb-spinner-size);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--nb-viewer-control-color);
    border-radius: var(--nb-radius-pill);
    animation: nb-lb-spin 0.8s linear infinite;
}

/* ---------------------------------------------------------------
   Controles OpenSeadragon (debajo de imagen)
   --------------------------------------------------------------- */

#imageControls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--nb-space-2) 0 0;
    height: auto !important;
    width: auto !important;
    position: static !important;
}

/* Contenedores internos de OSD: resetear posición absoluta */
#imageControls > div {
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#imageControls > div > div {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
}

#imageControls > div > div > div {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Contenedor directo de botones OSD ? flex para habilitar order */
#imageControls > div > div > div > div {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
}

/* Orden visual: zoom out ? vista inicial ? zoom in ? fullscreen ? rotaciones ? flip */
#imageControls [data-action="zoom-out"]     { order: -2; }
#imageControls [data-action="home"]         { order: -1; }

/* Cada botón OSD (herramientas ? con fondo circular) */
#imageControls [title] {
    width: var(--nb-viewer-tool-size) !important;
    height: var(--nb-viewer-tool-size) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--nb-radius-pill);
    background: var(--nb-viewer-tool-bg) !important;
    cursor: pointer;
    transition: background var(--nb-duration-fast) var(--nb-ease-out);
    position: relative !important;
}

#imageControls [title]:hover {
    background: var(--nb-viewer-tool-bg-hover) !important;
}

/* Ocultar imágenes PNG originales de OSD */
#imageControls img {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

/* Iconos Phosphor Bold para botones OSD */
#imageControls [data-action]::after {
    font-family: var(--nb-icon-font-family);
    color: var(--nb-viewer-control-color);
    font-size: var(--nb-viewer-tool-icon-size);
    line-height: 1;
    pointer-events: none;
}

#imageControls [data-action="zoom-in"]::after {
    content: var(--nb-icon-viewer-zoom-in);
}

#imageControls [data-action="zoom-out"]::after {
    content: var(--nb-icon-viewer-zoom-out);
}

#imageControls [data-action="home"]::after {
    content: var(--nb-icon-viewer-home);
}

#imageControls [data-action="fullscreen"]::after {
    content: var(--nb-icon-viewer-fullscreen);
}

#imageControls [data-action="rotate-left"]::after {
    content: var(--nb-icon-viewer-rotate-left);
}

#imageControls [data-action="rotate-right"]::after {
    content: var(--nb-icon-viewer-rotate-right);
}

#imageControls [data-action="flip"]::after {
    content: var(--nb-icon-viewer-flip);
}

/* ---------------------------------------------------------------
   Contador de imagen (parte inferior)
   --------------------------------------------------------------- */

#numberDisplay {
    flex-shrink: 0;
    padding: var(--nb-space-1) 0 0;
    font-family: var(--nb-font-body-family);
    font-size: var(--nb-viewer-counter-font-size);
    color: var(--nb-viewer-counter-color);
    text-align: center;
}

/* ---------------------------------------------------------------
   Responsive ? dispositivos móviles (? 768px)
   --------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Eliminar padding lateral para maximizar el espacio de imagen */
    #lightbox {
        padding: var(--nb-space-1) 0 env(safe-area-inset-bottom, 0px);
    }

    /* Flechas más estrechas: 44px cumple mínimo táctil Apple HIG */
    #prevLink,
    #nextLink {
        width: 44px;
        height: 80px;
    }

    #prevLink::after,
    #nextLink::after {
        font-size: 28px;
    }

    #nextLinkLoading {
        width: 44px;
        height: 80px;
    }

    /* Evitar activación accidental del swipe-back del navegador en Safari */
    #prevLink {
        left: max(4px, env(safe-area-inset-left));
    }

    #nextLink {
        right: max(0px, env(safe-area-inset-right));
    }

    /* Barra superior: reducir padding */
    #lightboxTopBar {
        padding: 0 var(--nb-space-2) var(--nb-space-1);
    }

    /* Toolbar OSD: scroll horizontal cuando no caben los botones */
    #imageControls > div > div > div > div {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 var(--nb-space-2);
    }

    #imageControls > div > div > div > div::-webkit-scrollbar {
        display: none;
    }
}

/* ---------------------------------------------------------------
   PhotoSwipe: barra de miniaturas, caption y contador
   (solo tienen efecto cuando viewerMode === 'photoswipe')
   --------------------------------------------------------------- */

/* Ocultar contador nativo de PhotoSwipe */
.pswp__counter {
    display: none !important;
}

.nb-lightbox-thumbs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000001;
    background: rgba(0, 0, 0, 0.85);
    padding: var(--nb-space-2) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nb-lightbox-thumbs__wrapper {
    display: flex;
    gap: var(--nb-space-2);
    overflow-x: auto;
    max-width: 100%;
    padding: var(--nb-space-1) var(--nb-space-4);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--nb-text-inverse) 30%, transparent) transparent;
}

.nb-lightbox-thumbs__wrapper::-webkit-scrollbar {
    height: 6px;
}

.nb-lightbox-thumbs__wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--nb-text-inverse) 30%, transparent);
    border-radius: var(--nb-radius-xs);
}

.nb-lightbox-thumbs__item {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: var(--nb-radius-sm);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--nb-duration-fast) var(--nb-ease-out),
                border-color var(--nb-duration-fast) var(--nb-ease-out);
    background: transparent;
    padding: 0;
}

.nb-lightbox-thumbs__item:hover {
    opacity: 0.9;
}

.nb-lightbox-thumbs__item--active {
    opacity: 1;
    border-color: var(--nb-text-inverse);
}

.nb-lightbox-thumbs__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nb-lightbox-counter {
    color: color-mix(in srgb, var(--nb-text-inverse) 80%, transparent);
    font-size: 13px;
    margin-top: var(--nb-space-1);
    font-family: var(--nb-font-body-family);
}

.nb-lightbox-caption {
    position: absolute;
    left: 0;
    right: 0;
    height: 60px; /* Misma altura que .pswp__top-bar */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-4);
    padding: var(--nb-space-3) 120px var(--nb-space-3) 60px; /* Espacio interno para flechas (izq) y botones PhotoSwipe (der) */
    color: var(--nb-text-inverse);
    font-family: var(--nb-font-body-family);
    font-size: var(--nb-viewer-caption-font-size);
    text-align: center;
}

/* z-index por debajo de .pswp__top-bar (10) para no oscurecer los botones.
   PhotoSwipe aplica z-index:10 vía ".pswp .pswp__hide-on-close" en hoja CDN
   que se carga después. Necesitamos (0,3,0) para ganar. */
.pswp .nb-lightbox-caption.pswp__hide-on-close {
    z-index: 9;
    pointer-events: none;
}

.nb-lightbox-caption--top {
    top: 0;
    background: rgba(0, 0, 0, 0.5);
}

.nb-lightbox-caption__text {
    pointer-events: auto;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--nb-font-weight-bold);
}

.nb-lightbox-caption__link {
    flex-shrink: 0;
    color: var(--nb-text-inverse);
    text-decoration: none;
    padding: var(--nb-space-1) var(--nb-space-3);
    background: color-mix(in srgb, var(--nb-text-inverse) 50%, transparent);
    border-radius: var(--nb-radius-sm);
    font-size: 13px;
    transition: background var(--nb-duration-fast) var(--nb-ease-out);
    pointer-events: auto;
}

.nb-lightbox-caption__link:visited,
.nb-lightbox-caption__link:active {
    color: var(--nb-text-inverse);
}

.nb-lightbox-caption__link:hover {
    background: color-mix(in srgb, var(--nb-text-inverse) 65%, transparent);
    color: var(--nb-text-inverse);
    text-decoration: none;
}

/* Personalización de iconos PhotoSwipe: color uniforme, sin contorno.
   Doble selector para ganar especificidad sobre photoswipe.min.css (se carga después). */
.pswp.pswp {
    --pswp-icon-color: var(--nb-text-inverse);
    --pswp-icon-stroke-color: transparent;
    --pswp-icon-stroke-width: 0;
}

.pswp .pswp__button--zoom,
.pswp .pswp__button--close,
.pswp .pswp__button--download-button,
.pswp .pswp__button--rotate-left-button,
.pswp .pswp__button--rotate-right-button,
.pswp .pswp__button--flip-button {
    opacity: 1;
}

/* Iconos de rotación/flip: Phosphor Bold vía tokens CSS.
   No usar pswp__icn ? esa clase aplica color secundario (gris) al texto.
   Se usa Phosphor-Bold explícitamente (siempre disponible vía components.css)
   para igualar el peso visual de los iconos SVG nativos de PhotoSwipe. */
.nb-pswp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: "Phosphor-Bold";
    font-style: normal;
    font-weight: normal;
    color: var(--nb-text-inverse);
    font-size: 18px;
    line-height: 1;
}
.nb-pswp-icon--download::before      { content: var(--nb-icon-action-download); }
.nb-pswp-icon--rotate-left::before  { content: var(--nb-icon-viewer-rotate-left); }
.nb-pswp-icon--rotate-right::before { content: var(--nb-icon-viewer-rotate-right); }
.nb-pswp-icon--flip::before         { content: var(--nb-icon-viewer-flip); }

/* Indicador de carga en posición de flecha derecha (cargando más imágenes) */
.nb-pswp-loading-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.nb-pswp-loading-arrow::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid color-mix(in srgb, var(--nb-text-inverse) 30%, transparent);
    border-top-color: var(--nb-text-inverse);
    border-radius: 50%;
    animation: nb-pswp-spin 0.8s linear infinite;
}
@keyframes nb-pswp-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .nb-lightbox-thumbs__item {
        width: 50px;
        height: 50px;
    }

    .nb-lightbox-thumbs__wrapper {
        gap: var(--nb-space-1);
    }

    .nb-lightbox-caption {
        left: 0;
        right: 0;
        height: auto;
        flex-direction: column;
        gap: var(--nb-space-2);
        padding: var(--nb-space-2) 50px;
    }

    .nb-lightbox-caption__text {
        white-space: normal;
        font-size: 13px;
    }
}