/* gallery.css — el VESTIDO de la galeria de /media: la barra del visor y
   lo que la rejilla hace mientras el dialogo esta fuera.

   📂 ORIGEN: Adan, `docs/brain_dump/aa-src/ImageGridEffects-master/bp.media.html`
   (2026-10-12) — su `assets/css/media.css` y las reglas de consumidor de su
   `assets/dlg/demo.css` lineas 3-17. Las piezas que gobierna son `dlg.css` y
   `sldr.css`, que entraron al core SIN TOCAR UNA LINEA.

   🔑 POR QUE ESTO NO VIVE EN `dlg.css`: las clases `dlg-origin--away`,
   `dlg-origin--flying` y `dlg-sibling--away` las PONE el dialogo y las
   INTERPRETA la pantalla — lo dice la cabecera de `dlg.js`: «la pagina decide
   que significa (encogerse, apagarse...)». El mecanismo es del core y la
   presentacion del consumidor, que es §14 del contrato base.

   🎨 Y los colores salen de los tokens del design system, no de los hex de su
   prototipo: su hoja ya venia con `var(--app-*, #fallback)` y aqui se traducen
   a los nombres que usa esta casa (`--color-*`). */

/* ── EL ORIGEN mientras su dialogo esta abierto ─────────────────────────────
   La tarjeta pulsada se APAGA (no se oculta): su foto esta en el aire, asi que
   lo que queda debajo no debe competir con ella. Los nombres son los del core
   (`__thumb`, `__info`), no los del prototipo (`__photo`, `__body`). */
.media-card__thumb,
.media-card__info,
.media-card__actions { transition: opacity .35s, border-color .35s, background-color .35s; }

.media-card.dlg-origin--flying .media-card__thumb img { opacity: 0; }
.media-card.dlg-origin--away { border-color: transparent; background-color: transparent; box-shadow: none; }
.media-card.dlg-origin--away .media-card__thumb { background-color: transparent; }
.media-card.dlg-origin--away .media-card__info,
.media-card.dlg-origin--away .media-card__actions { opacity: 0; }

/* ── LOS VECINOS (opcion `siblings` del dialogo) ────────────────────────────
   Se encogen sobre su propio centro y se apagan al abrir; al cerrar vuelven
   creciendo. El retardo de cada uno lo pone el dialogo. Los valores son los de
   su `index2.html`: hasta el 10 % de su tamano, .5s al ir y .4s al volver. */
.media-card { transition: opacity .4s, transform .4s, border-color .35s, background-color .35s; }

/* ── EL COMPORTAMIENTO DE FÁBRICA DE UN VECINO, EN SUS DOS MITADES ──────────
   Y son DOS reglas a propósito, porque la coreografía es de IDA Y VUELTA: al
   abrir se encogen «hacia el rail de miniaturas», y al cerrar RECUPERAN su
   tamaño de la rejilla. Lo describió Adán: *«cuando cierras ves cómo recuperan
   el tamaño que tienen en el grid»*.

   🔴 LA TRANSICIÓN VA EN EL ESTADO BASE, no dentro de la clase, y ésa es toda la
   diferencia entre que funcione o no. Una transición declarada sólo en
   `--away` se aplica al AÑADIR la clase pero no al QUITARLA: el elemento vuelve
   a un estado base sin transición y SALTA de golpe. Medido el 2026-10-14 y lo
   reportó Adán: *«cuando clicas se ve que las vecinas se empequeñecen, pero al
   cerrar están como si no se hubieran movido»*.

   ⚖️ No es un diseño nuevo: es EXACTAMENTE lo que ya hace `.media-card` en la
   línea de abajo, que es la pantalla donde esto lleva funcionando desde el
   principio. Aquí sólo se le da el mismo trato a cualquier otra tarjeta, para
   que una pantalla nueva no tenga que redescubrirlo.

   🔒 Y NO puede pisar a nadie: estas clases sólo las recibe lo que seleccione la
   opción `siblings` del diálogo, así que una pantalla que no la pide no las ve.

   Los números son los suyos (`index2.html`): hasta el 10 %, .5s al ir. */
[class~="dlg-sibling"] {
    -webkit-transition: opacity .5s cubic-bezier(.7, 0, .3, 1), -webkit-transform .5s cubic-bezier(.7, 0, .3, 1);
    transition: opacity .5s cubic-bezier(.7, 0, .3, 1), transform .5s cubic-bezier(.7, 0, .3, 1);
}

[class~="dlg-sibling--away"] {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, 1);
    transform: scale3d(.1, .1, 1);
}

.media-card.dlg-sibling--away {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, 1);
    transform: scale3d(.1, .1, 1);
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.7, 0, .3, 1);
}

/* ── EL PASE DENTRO DEL DIALOGO ─────────────────────────────────────────────
   La foto se ve ENTERA (`contain`) sobre el fondo del visor; el pase se lleva
   el alto que sobra. Las variables son las que declara `sldr.css`. */
.gallery .sldr {
    -webkit-flex: 1;
    flex: 1;
    min-height: 0;
    --sldr-fit: contain;
    /* 🌙 LA PALETA DEL LIGHTBOX, y sale de los MISMOS tokens que el visor del
       álbum (`--app-viewer-bg` / `--app-viewer-text`), no de la del panel. Así
       una sola declaración del tema pinta los DOS lightbox del producto: `kita`
       ya los declara en `portal/album.html`. Antes esto traducía a `--color-*`
       —la paleta clara del panel—, y de ahí el blanco que señaló Adán. */
    --sldr-bg: var(--app-viewer-bg, #0f172a);
    --sldr-ink: var(--app-viewer-text, #ffffff);
    --sldr-arrow-bg: rgba(255, 255, 255, .14);
    --sldr-thumb-bg: rgba(255, 255, 255, .22);
    --sldr-shade: rgba(15, 23, 42, .85);
}

/* La caja del diálogo es lo que se ve DETRÁS de la foto, y su token es suyo
   (`dlg.css`: `var(--dlg-bg, #ffffff)`). Se declara, no se sobreescribe la
   regla: ésa es la costura que su hoja dejó puesta. */

/* 🎬 EL RELEVO: mientras la foto de la tarjeta viene volando, las piezas del
   pase esperan OCULTAS; cuando aterriza, el pase enseña esa misma foto en ese
   mismo sitio y toma el relevo. Sin esto se verian las dos a la vez, que es el
   defecto que costo la sesion del 2026-10-12. */
.gallery .sldr__items { visibility: hidden; }
.gallery--live .sldr__items { visibility: visible; }

/* ── LA BARRA DEL VISOR: nombre a un lado; contador y acciones al otro ──── */
.gallery__bar {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
    padding: var(--space-2, 8px) var(--space-2, 10px) var(--space-2, 8px) var(--space-4, 20px);
}

/* variante: la barra ABAJO (la caja del dialogo es una columna: solo cambia el orden) */
.gallery--bottom .gallery__bar { -webkit-order: 2; order: 2; }

.gallery__name {
    overflow: hidden;
    min-width: 0;
    margin-right: auto;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gallery__count {
    margin-right: var(--space-2, 8px);
    font: var(--text-sm, 13px)/1 ui-monospace, Menlo, monospace;
    white-space: nowrap;
    color: var(--color-muted, #6b7080);
}

.gallery__btn {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex: none;
    flex: none;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    color: var(--color-text, #1f2333);
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, color .15s;
}

.gallery__btn[hidden] { display: none; }

.gallery__btn:hover,
.gallery__btn:focus {
    color: var(--color-accent, #4f6ef7);
    outline: none;
    background: var(--color-accent-soft, #eef1fe);
}

.gallery__btn[aria-pressed="true"] { color: var(--color-accent, #4f6ef7); }
.gallery__btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 🌙 EL LIGHTBOX VA OSCURO, Y POR TOKEN ──────────────────────────────────
 *
 * 🗣️ Lo pidió Adán el 2026-10-13 con una captura: *«aquí el color es blanco, yo
 * lo alinearía con el oscuro»*. «El oscuro» es el del visor del álbum, que ya
 * existe y lo pinta el TEMA: `modules/kita/templates/portal/album.html` declara
 * `--app-viewer-bg: #0f172a`, y `grid-fx.css` lo consume.
 *
 * 🧩 Por eso aquí se consumen **los mismos tokens** en vez de escribir otro
 * color: una sola declaración del tema pinta los DOS lightbox del producto, y el
 * día que un vertical quiera el suyo no tiene que descubrir dos nombres. Es el
 * §8 de `principios.md` —el core da el mecanismo, el que pinta aporta su piel—.
 *
 * ⚖️ Y sobre el registro: `patrones/presentar-una-coleccion.md` decía que el
 * visor «no es una sala de cine» y debía llevar el tema del panel. Esa entrada
 * mezclaba dos cosas, y se enmienda ahí: la REJILLA va con el tema del panel; el
 * LIGHTBOX —la foto sola a pantalla completa— va oscuro, como Google Fotos y
 * Apple Fotos aunque la aplicación esté en claro. Lo que NO cambia es la mitad
 * de higiene por la que nació aquella nota: el color va en un token, nunca
 * clavado. Aquel defecto era `#0b0b0d` a pelo.
 */
/* La caja del diálogo es lo que se ve DETRÁS de la foto, y su token es suyo
 * (`dlg.css`: `var(--dlg-bg, #ffffff)`). Se DECLARA, no se sobreescribe la regla:
 * ésa es la costura que su hoja dejó puesta, y pisarla rompería la igualdad con
 * su gemelo. */
.gallery.dlg--full {
    --dlg-bg: var(--app-viewer-bg, #0f172a);
    /* 🔴 Y la TINTA también, que es su token hermano (`dlg.css`:
     * `var(--dlg-text, #1f2333)`). Sin esta línea el pie heredaba la tinta del
     * panel —medido: `rgb(31,35,51)` sobre `#0f172a`, o sea texto oscuro sobre
     * fondo oscuro— y el nombre, el contador y los dos botones quedaban
     * ilegibles. Declarar el fondo sin la tinta es medio arreglo. */
    --dlg-text: var(--app-viewer-text, #ffffff);
    color: var(--app-viewer-text, #ffffff);
}

.gallery.dlg--full .gallery__name { color: inherit; }
.gallery.dlg--full .gallery__count { color: inherit; opacity: .78; }
.gallery.dlg--full .gallery__btn { color: inherit; }

/* El realce claro del panel no se ve sobre oscuro, pero el relleno TAMPOCO se
   puede derivar de la tinta: lo prohíbe `FactoryPartialContrastTest`, y con razón
   —un fondo calculado del propio texto no sabe sobre qué cae, así que basta con
   que un tema cambie `--app-viewer-bg` para que el botón se funda con él—.
   La salida que ese guard nombra es la CONTORNEADA: fondo transparente, tinta
   heredada, y el estado se dice con el contorno. No necesita saber la paleta. */
.gallery.dlg--full .gallery__btn:hover,
.gallery.dlg--full .gallery__btn:focus {
    color: inherit;
    background: none;
    outline: 2px solid currentColor;
    outline-offset: -6px;
}

/* ── LA SALIDA, EN LA ESQUINA ───────────────────────────────────────────────
 *
 * Misma métrica que el mando de cerrar del visor del álbum (`.action--close`):
 * pegado a la esquina, con su área de toque de 44 px —el objetivo táctil que el
 * core exige— y por encima del pase. */
.gallery__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    cursor: pointer;
    color: var(--app-viewer-text, #ffffff);
    border: 0;
    background: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s;
    opacity: .8;
}

.gallery__close:hover,
.gallery__close:focus { opacity: 1; outline: none; }
.gallery__close svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }