/* ═══════════════════════════════════════════════════════════════════════════
🔄 EL VOCABULARIO DE ESTADO CAMBIÓ EL 2026-11-02 (166ª) — y es traducción, no rediseño.
Este visor se montaba sobre `CMS.Modal` + `morph.js`, que marcaban el estado con
CLASES (`.is-open`, `.is-morphing`). Ahora se monta sobre el `Dialog` de `nd/`,
que lo marca con un ATRIBUTO —`data-dialog-state`, una lista de palabras:
`open · closing · in · prep · settled`— más `data-dialog-effect`.
🔑 **Y POR QUÉ IMPORTA, medido:** al migrar el JS sin traducir esto, el diálogo
abría de verdad (`isOpen=true`, `data-dialog-state="open in settled"`) y la
pantalla se quedaba en `opacity: 0` con `pointer-events: none`. Un visor que
abre y no se ve, **sin un solo error en consola**: el mecanismo y el vestido
hablaban idiomas distintos. Lo destapó la sonda, no la lectura — las dos
mitades se leen perfectas por separado.
⚖️ La traducción es 1:1 a propósito. La visibilidad, el velo y el layout a
pantalla completa los gobierna ya `dialog.css` (`.dialog[data-dialog-state~=…]`,
`data-dialog-layout="full"`); lo que queda aquí es el VESTIDO de este visor y la
entrada de sus piezas (barra, tira de miniaturas, flechas).
═══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
EL VISOR DE FOTOS — el COMPONENTE, autocontenido
══════════════════════════════════════════════════════════════════════════
Su composición vive en `templates/partials/media-viewer.html` y su vestido
aquí. Los dos juntos son el componente, y el partial ENCOLA esta hoja: quien
lo incluya la recibe sin tener que acordarse de nada.
── POR QUÉ EXISTE ESTA HOJA (2026-10-09) ──────────────────────────────────
🔴 Adán trajo una captura del ÁLBUM del portal de familias: los controles del
visor —pantalla completa, «Descargar», «Cerrar»— aparecían **sueltos en el pie
de la página**, fuera de todo diálogo. 📐 Medido: el visor CERRADO ocupaba
756×25 px con 3 controles visibles.
La causa no era la pieza: el partial subió al core el 2026-10-01 y **su CSS se
quedó en `cms.css`**, que es la hoja del PANEL. El portal es público y no la
carga, así que el marcado se desplegaba en el flujo del documento. Las dos
mitades estaban bien por separado — el defecto vivía en que la pieza viajaba
sin su presentación.
🔑 Y el patrón NO se inventa aquí: lo fijó Adán en la 49ª con estas palabras,
*«dejar lo del slider como componente, autocontenido y reutilizable; se puede
usar en front o en backend»*, y `assets/css/carousel.css` es su precedente.
La ficha de aquel día lo dejó dicho: *«el patrón es una hoja por componente, y
el siguiente que lo necesite lo replica»*. Éste es el siguiente.
── TRES DECISIONES QUE SE TOMARON AQUÍ, Y POR QUÉ ─────────────────────────
**(1) La trae `enqueue_style`, NO un `` computaba 53×36 px. Mismo contrato que
`design-system.css`, y lo vigila `HiddenFromScriptSurvivesTest`. */
#mediaViewer .btn[hidden] { display: none; }
#mediaViewer .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2, 8px);
padding: var(--btn-py, 7px) var(--btn-px, 12px);
min-height: var(--btn-height, 34px);
border-radius: var(--radius-sm, 8px);
font-family: inherit;
font-size: var(--text-sm, 13px);
font-weight: 500;
line-height: 1;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
text-decoration: none;
user-select: none;
background: transparent;
}
#mediaViewer .btn:active { transform: scale(0.97); }
#mediaViewer .btn svg {
width: 14px; height: 14px; flex-shrink: 0;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* ── 🎫 VISOR DE COMPROBANTES ──────────────────────────────────────────────
El justificante se mira DENTRO del panel, no en otra pestaña. Lo pidió Adán
el 2026-09-07: «cuando la ves abre directamente, ¿no sería mejor usar el
dialog?… la idea es dar esa sensación de aplicación nativa (premium)».
Se monta sobre `.overlay` + `.modal`, que ya traen el velo con `backdrop-filter`
y la entrada con `translateY + scale`: aquí sólo va lo que un visor de
imágenes necesita y una caja de diálogo no tiene.
🔑 **Y por qué el efecto de paso vive AQUÍ y no se reusa el del sitio.** El
motor (`czCarousel`) SÍ se reusa —es JavaScript y el panel también carga
Alpine—, pero sus clases `.cz-*` viven en `site.css`, y **el panel no carga
esa hoja**: medido el 2026-09-07, el sitio público carga `site.css` y el panel
`design-system.css` + `cms.css`, sin ninguna hoja en común. Moverlas al design
system las quitaría del sitio público, que sí lo necesita. El hueco real —que
el core no tiene una capa CSS compartida entre sus dos caras— queda declarado
en «Decisiones diferidas»; duplicarlo en silencio sería la segunda copia que
`principios.md` §8 prohíbe, y decirlo es la mitad del trabajo. */
/* ── PANTALLA COMPLETA DE VERDAD ────────────────────────────────────────────
*
* 🔴 Medido con Adán el 2026-10-01: *«el fullscreen me lo imaginaba más bonito;
* aquí lo que haces es que centras el diálogo»*. Y tenía razón — pedir
* `requestFullscreen()` sobre el `.overlay` llevaba el ELEMENTO a pantalla
* completa, pero el `.modal` de dentro conservaba su ancho máximo y sus
* esquinas: una ventanita centrada sobre fondo negro.
*
* 🎨 Su referencia (el configurador de VW) enseña el canon y es el de cualquier
* visor serio —Google Fotos, Apple Fotos, Lightbox de Unsplash—: **la foto de
* borde a borde y los controles FLOTANDO encima**, no una franja que le robe
* alto. Aquí eso significa tres cosas, y las tres sólo dentro de `:fullscreen`,
* para que el diálogo normal no cambie:
*
* 1. el `.modal` pierde ancho máximo, radio y sombra: pasa a ser el lienzo;
* 2. la barra inferior se despega del flujo y se posa SOBRE la imagen, con un
* degradado para que el texto se lea esté la foto clara u oscura;
* 3. la tira de miniaturas hace lo mismo, justo encima de la barra.
*
* `:-webkit-full-screen` va aparte y no en la misma lista: un selector que el
* navegador no entiende invalida la REGLA ENTERA, así que agruparlos dejaría sin
* estilo a los que sí la soportan. */
#mediaViewer:fullscreen .modal,
#mediaViewer:-webkit-full-screen .modal {
max-width: none;
width: 100%;
height: 100%;
/* 🔴 `max-height: 90vh` y el `border` de 1 px son del diálogo NORMAL, y en
* pantalla completa se notaban los dos: el alto dejaba una franja y el borde
* dibujaba un marco claro en todo el perímetro — *«ese borde blanco alrededor
* le quita glamour, es como demasiado»*. En un visor el marco sobra: el
* encuadre lo pone la propia foto. */
max-height: none;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: #000;
}
/* La foto usa TODO el alto disponible. Su tope normal —`min(64vh, 560px)`—
* existe para que un comprobante no desborde un diálogo; aquí el diálogo ES la
* pantalla, así que ese tope deja la foto flotando en medio de un marco negro,
* que es justo lo contrario de «pantalla completa». */
:fullscreen .mviewer__img,
:-webkit-full-screen .mviewer__img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
:fullscreen .mviewer__stage,
:-webkit-full-screen .mviewer__stage {
height: 100%;
max-height: none;
}
/* ── EL VISOR, CON EL TEMA DEL PANEL ────────────────────────────────────────
*
* 🔴 **Esto sustituye a un apaño, y conviene que quede dicho.** El 2026-10-02 el
* visor se dejó oscuro con `#0b0b0d` y `rgba(255,255,255,…)` **a pelo**, para
* tapar que los botones no se leían. Adán lo llamó por su nombre: *«resuelve el
* problema que te describí, sí, pero con una curita… ya tenemos los temas
* light/dark, me refería a esa discontinuidad con lo que nosotros mismos hemos
* definido»*. Tenía razón: el `CLAUDE.md` lo declara invariante —**tokens, nunca
* colores hardcodeados**— y un color clavado deja la pieza fuera del tema para
* siempre.
*
* 🎨 Y su referencia (`demo.io200.com`) enseña por qué además era un error de
* DISEÑO, no sólo de higiene: un visor de galería **no es una sala de cine**. Va
* sobre la superficie del panel, con los controles discretos y la foto
* respirando — que es lo que hacen Google Fotos en su tema claro, Apple Fotos y
* SmugMug. El negro sólo es canon cuando el producto ES el cine.
*
* Con tokens, claro y oscuro salen de serie y sin una línea más. */
#mediaViewer .modal {
/* La CAJA — lo que `.modal` aporta en `cms.css` y un portal público no recibe.
🔴 Medido abriendo el visor el 2026-10-09, DESPUÉS de que la sonda diera
verde: sin la columna flex el escenario no se lleva el alto, la foto no
aparecía y la tira de miniaturas salía arriba. La sonda sólo medía el visor
CERRADO, y cerrado estaba perfecto — medir un momento no es medir la
ventana. */
position: relative;
display: flex;
flex-direction: column;
max-width: none; /* la copia base pedía `min(940px, 96vw)` y PERDÍA por
especificidad; al fundirse se conserva quien ganaba. */
width: 100vw;
height: 100vh;
max-height: none;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: var(--color-bg, #f0f2f8);
padding: 0;
overflow: hidden; /* de la copia base: no conflictuaba, así que aplicaba. */
/* La ENTRADA — ver el comentario largo más abajo: todo en `transform`/`opacity`,
que el compositor anima sin recalcular el diseño. */
transform: scale(.94);
opacity: 0;
transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease;
}
#mediaViewer .mviewer__stage {
flex: 1;
min-height: 0;
height: auto;
background: transparent;
padding: var(--space-5, 20px);
}
#mediaViewer .mviewer__img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}
#mediaViewer .mviewer__bar,
#mediaViewer .cz-thumbs {
background: transparent;
border: 0;
color: var(--color-text, #1a1f35);
/* Los controles ENTRAN después de la foto (retardo de 180 ms): da la sensación
de que la imagen «llega» y la interfaz la acompaña, en vez de todo de golpe.
Va aquí y no en una segunda regla con el mismo selector — eso es la copia que
`CssRulesAreWrittenOnceTest` persigue. */
opacity: 0;
transition: opacity 200ms ease 180ms;
}
/* Los controles, DISCRETOS: en la referencia son iconos finos que no compiten
* con la foto. Ganan presencia al pasar el ratón, no antes. */
#mediaViewer .mviewer__bar .btn {
background: transparent;
border-color: transparent;
color: var(--color-muted, #6d7590);
}
#mediaViewer .mviewer__bar .btn:hover {
background: var(--color-surface-2, #f5f6fa);
color: var(--color-text, #1a1f35);
}
#mediaViewer .mviewer__bar .btn:focus-visible {
outline: 2px solid var(--color-accent, #4f7cff);
outline-offset: 2px;
}
#mediaViewer .mviewer__title { color: var(--color-text, #1a1f35); }
#mediaViewer .mviewer__sub,
#mediaViewer .mviewer__count { color: var(--color-muted, #6d7590); }
#mediaViewer .mviewer__nav {
background: transparent;
color: var(--color-muted, #6d7590);
/* Los controles ENTRAN después de la foto (retardo de 180 ms): da la sensación
de que la imagen «llega» y la interfaz la acompaña, en vez de todo de golpe.
Va aquí y no en una segunda regla con el mismo selector — eso es la copia que
`CssRulesAreWrittenOnceTest` persigue. */
opacity: 0;
transition: opacity 200ms ease 180ms;
}
#mediaViewer .mviewer__nav:hover {
background: var(--color-surface-2, #f5f6fa);
color: var(--color-text, #1a1f35);
}
/* ── LAS TRANSICIONES, que es lo que lo hace sentir una aplicación ──────────
*
* 🎨 Descritas por Adán mirando la referencia: *«cuando abres una imagen hace una
* transición suave, el efecto se asemeja a un zoom-in, y cuando se completa,
* fade-in de los botones; al cambiar de imagen aplica el típico spinner de
* precarga (si es la primera vez; luego ya no, porque está cargada); al cerrar,
* zoom-out»*.
*
* 🔑 **Por qué en ESE orden y no todo a la vez:** la foto entra primero y los
* controles después porque lo que la persona vino a ver es la foto — mover los
* dos juntos obliga a elegir dónde mirar. Es lo mismo que hace iOS al abrir una
* imagen, y lo que su propio componente de precarga ya hacía en `onlainez.net`.
*
* Todo en `transform`/`opacity`: son las dos propiedades que el compositor anima
* sin recalcular el diseño, así que esto no cuesta un reflujo por foto.
* `prefers-reduced-motion` lo apaga entero — para algunas personas el zoom es
* mareo. */
/* ⬆️ Su entrada (`transform`/`opacity`/`transition`) está arriba, EN LA MISMA
* regla: separarla en un segundo `#mediaViewer .modal` era la segunda copia que
* `CssRulesAreWrittenOnceTest` persigue, y el día que las dos declaren lo mismo
* gana la de abajo sin que se vea leyendo. */
#mediaViewer[data-dialog-state~="open"] .modal {
transform: none;
opacity: 1;
}
#mediaViewer[data-dialog-state~="open"] .mviewer__bar,
#mediaViewer[data-dialog-state~="open"] .cz-thumbs,
#mediaViewer[data-dialog-state~="open"] .mviewer__nav {
opacity: 1;
}
/* ── EL SPINNER, sólo mientras la foto no está ──────────────────────────────
* Canónico y discreto. `is-loading` lo pone el componente al cambiar de slide y
* lo quita el `load` de la imagen: si ya estaba en caché, el navegador resuelve
* `complete` al instante y **el spinner no llega a verse**, que es justo lo que
* Adán describió. */
#mediaViewer .mviewer__stage::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border: 3px solid var(--color-border-2, #c8cde0);
border-top-color: var(--color-accent, #4f7cff);
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease;
}
#mediaViewer.is-loading .mviewer__stage::after {
opacity: 1;
animation: mviewerSpin .7s linear infinite;
}
#mediaViewer.is-loading .mviewer__img { opacity: .25; }
@keyframes mviewerSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
#mediaViewer .modal,
#mediaViewer .mviewer__bar,
#mediaViewer .cz-thumbs,
#mediaViewer .mviewer__nav {
transition: none;
transform: none;
opacity: 1;
}
#mediaViewer.is-loading .mviewer__stage::after { animation: none; }
}
:fullscreen .mviewer__bar,
:-webkit-full-screen .mviewer__bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
border: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
color: #fff;
}
/* ── LOS BOTONES, ADAPTADOS AL CONTEXTO OSCURO ──────────────────────────────
* 🔴 `btn--ghost` aclara su fondo al pasar el ratón, y con `color: #fff` encima
* el resultado era **blanco sobre blanco**: el botón desaparecía justo al ir a
* pulsarlo. Sobre una foto no vale heredar los estados del panel claro — el
* fondo aquí no es una superficie, es la imagen de alguien.
* Vidrio translúcido oscuro, como los controles de YouTube o Apple Fotos: se
* lee sobre foto clara y sobre foto oscura, que es la única forma de acertar
* sin saber qué foto habrá. */
#mediaViewer:fullscreen .mviewer__bar .btn,
#mediaViewer:-webkit-full-screen .mviewer__bar .btn {
color: #fff;
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .22);
backdrop-filter: blur(6px);
}
#mediaViewer:fullscreen .mviewer__bar .btn:hover,
#mediaViewer:-webkit-full-screen .mviewer__bar .btn:hover {
background: rgba(255, 255, 255, .28);
color: #fff;
}
#mediaViewer:fullscreen .mviewer__bar .btn:focus-visible,
#mediaViewer:-webkit-full-screen .mviewer__bar .btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Y la línea que separaba la barra: en el diálogo normal ordena; sobre una foto
* es un trazo claro cruzando la imagen. */
:fullscreen .mviewer__title,
:fullscreen .mviewer__sub,
:fullscreen .mviewer__count,
:-webkit-full-screen .mviewer__title,
:-webkit-full-screen .mviewer__sub,
:-webkit-full-screen .mviewer__count { color: #fff; }
#mediaViewer:fullscreen .cz-thumbs,
#mediaViewer:-webkit-full-screen .cz-thumbs {
position: absolute;
left: 0;
right: 0;
bottom: 64px;
z-index: 3;
background: transparent;
}
.mviewer__stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: min(64vh, 560px);
background: #0b0b0d; /* Un comprobante se lee mejor sobre oscuro, y
deja de competir con el fondo del panel. */
}
/* 🔴 CENTRAR EL SLIDE, y sin esto la foto sale pegada arriba.
El escenario es un flex que centra a sus hijos, pero desde que se pintan
TODOS los slides su hijo directo es el `.cz-slide` —`position:absolute;
inset:0`—, que se sale del flujo y deja de obedecer a ese centrado. Es el
slide quien tiene que centrar lo suyo. Lo vio Adán: la imagen arriba y un
hueco negro debajo. */
#mediaViewer .mviewer__stage .cz-slide {
display: flex;
align-items: center;
justify-content: center;
}
.mviewer__img {
max-width: 100%;
max-height: min(64vh, 560px);
object-fit: contain; /* NUNCA `cover`: recortar un tiquet puede
esconder justo el importe. */
display: block;
/* La entrada va por `@keyframes` y NO por una clase que alguien conmute: el
`:key` del visor recrea el `