/* Navigation in the server-rendered photo page and its fullscreen viewer. */
.photo-detail__viewer { position:relative; width:100%; display:flex; justify-content:center; }
.photo-detail__navigation { position:absolute; inset:0; pointer-events:none; z-index:3; }
.photo-detail__nav {
    position:absolute; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; border:1px solid var(--line); border-radius:50%;
    color:var(--fg); background:var(--bg); opacity:.9; pointer-events:auto;
    text-decoration:none; box-shadow:0 4px 20px #0003;
}
.photo-detail__nav--previous { left:.6rem; }
.photo-detail__nav--next { right:.6rem; }
.photo-detail__nav svg { width:24px; height:24px; }
.photo-detail__nav:hover { opacity:1; border-color:var(--accent); color:var(--accent); }
.photo-detail__nav:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.photo-detail__nav.is-disabled { opacity:.25; pointer-events:none; }
.photo-detail__btn, .lightbox__stage { touch-action:pan-y pinch-zoom; }
.photo-detail__btn:active, .lightbox__img:active { cursor:grabbing; }
.lightbox--immersive .lightbox__nav:not([hidden]) {
    display:flex !important; position:absolute; top:50%; z-index:5;
    background:#0009; border-color:#ffffff55; color:#fff;
}
.lightbox--immersive .lightbox__nav--prev { left:max(.6rem, env(safe-area-inset-left)); }
.lightbox--immersive .lightbox__nav--next { right:max(.6rem, env(safe-area-inset-right)); }
.lightbox__nav[hidden] { display:none !important; }
.lightbox__nav:disabled { opacity:.25; pointer-events:none; }
@media (max-width:768px) {
    .photo-detail__nav { width:40px; height:40px; }
    .photo-detail__nav--previous { left:.25rem; }
    .photo-detail__nav--next { right:.25rem; }
}

.lightbox--immersive { padding: 0; gap: 0; }
.lightbox--immersive .lightbox__stage { width: 100%; height: 100%; max-width: none; }

/* While sliding, both photos occupy an opaque viewport-sized surface. The image
   keeps its natural scale inside that surface, so changing aspect ratios cannot
   reveal a strip of the previous photo or leave a moving gap. */
.lightbox--immersive .lightbox__stage.photo-sliding { overflow: hidden; }
.lightbox--immersive .lightbox__stage.photo-sliding > .lightbox__img {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: scale-down; background: #000; border-radius: 0;
    box-shadow: none; transition: none; will-change: transform;
    z-index: 1;
}
.lightbox--immersive .lightbox__stage.photo-sliding > .lightbox__img--incoming { z-index: 2; pointer-events: none; }

/* En pantalla completa solo la foto: se apartan la barra de progreso y los botones flotantes de la web. */
body.photo-immersive-open .scroll-progress,
body.photo-immersive-open .upload-fab,
body.photo-immersive-open .top-btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Deslizar para cerrar: el fondo negro del visor se aclara con el gesto (main.js, pull/drop). */
/* En pantalla completa el gesto vertical es del visor (deslizar para cerrar), no del navegador; se permite el pellizco para ampliar. */
.lightbox--immersive .lightbox__stage { touch-action: pinch-zoom; }
.lightbox--immersive { transition: opacity .4s var(--ease-out), visibility .4s, background-color .25s ease; }

/* Si se recarga una ficha con el visor abierto (?viewer=1), se oculta lo de detrás hasta que el visor se abre: sin destello de la ficha. */
html.viewer-pending, html.viewer-pending body { background: #000; }
html.viewer-pending body > *:not(#lightbox):not(script) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    .lightbox__img--incoming { transition: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}