/* ══════════════════════════════════════════════════════════════════════════
   CARRUSEL / SLIDESHOW — el COMPONENTE, autocontenido
   ══════════════════════════════════════════════════════════════════════════

   Su comportamiento vive en `templates/sections/_partials/carousel-engine.html`
   (`window.czCarousel`) y su vestido aquí. Los dos juntos son el componente, y
   se declaran juntos: quien lo usa carga esta hoja e incluye aquel partial.

   ── POR QUÉ EXISTE ESTA HOJA (2026-09-07) ─────────────────────────────────

   Estas reglas vivían en `site.css`, que carga **sólo el sitio público**. El
   panel carga `design-system.css` + `cms.css`, y **el core no tiene ninguna
   hoja en común entre sus dos caras** (medido). Así que al reusar el motor en
   el visor de comprobantes del panel, el comportamiento llegaba y el efecto no:
   se veía pasar la imagen sin transición, y Adán lo notó a la primera.

   Se movieron aquí y NO al design system: meter el sistema de diseño entero en
   el sitio público cambiaría cómo se ve el sitio de un cliente para arreglar un
   carrusel. Una hoja por componente es la unidad correcta — es lo que Adán
   pidió con estas palabras: *«dejar lo del slider como componente, autocontenido
   y reutilizable, se puede usar en front o en backend»*.

   ⚠️ Las reglas movidas son **las mismas byte a byte**: si el sitio público
   cambia de aspecto, es que algo se perdió por el camino.

   ── LOS DOS EFECTOS ───────────────────────────────────────────────────────

   `fade`      — funde por opacidad. Discreto; para secciones de contenido.
   `archive-x` — el que sale **se escala al 60 % desvaneciéndose** y el que entra
                 **desliza desde la izquierda**. Es el de las galerías nativas
                 (WhatsApp, Fotos): da profundidad en vez de un fundido plano, y
                 es el que un visor de imágenes quiere por defecto.
   ══════════════════════════════════════════════════════════════════════════ */

.cz-slide { position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; pointer-events:none; overflow:hidden; }
.cz-slide.is-on { pointer-events:auto; }
.cz-fade { transition:opacity .9s ease; }
.cz-fade.is-on { opacity:1; z-index:10; }
/* archive-x: al avanzar, la vieja se encoge y la nueva entra deslizando; al retroceder, inverso. */
.cz-ax.is-on     { opacity:1; z-index:2; }
.cz-ax.navOutNext { z-index:1;    opacity:1; animation:czScaleHalfDownX  .7s forwards cubic-bezier(.7,0,.3,1); }
.cz-ax.navInNext  { z-index:1001; opacity:1; animation:czSlideInFromLeftX .7s forwards cubic-bezier(.7,0,.3,1); }
.cz-ax.navOutPrev { z-index:1001; opacity:1; animation:czSlideOutToLeftX  .7s forwards cubic-bezier(.7,0,.3,1); }
.cz-ax.navInPrev  { z-index:1;             animation:czScaleHalfUpX     .7s forwards cubic-bezier(.7,0,.3,1); }
.cz-ax::before, .cz-ax::after { content:''; position:absolute; inset:0; pointer-events:none; background:rgba(0,0,0,.6); transition:opacity .7s cubic-bezier(.7,0,.3,1); z-index:5; }
.cz-ax::before { opacity:0; } .cz-ax::after { opacity:1; }
.cz-ax.is-on::after { opacity:0; }
.cz-ax.navOutNext::before { opacity:1; }
.cz-ax.navInNext::after, .cz-ax.navInPrev::after { opacity:0; }
.cz-ax.navInNext::after { transition:none; }
@keyframes czScaleHalfDownX  { to   { transform:scale(.6); opacity:0; } }
@keyframes czSlideInFromLeftX { from { transform:translateX(-100%); } to { transform:translateX(0); } }
@keyframes czSlideOutToLeftX  { to   { transform:translateX(-100%); } }
@keyframes czScaleHalfUpX     { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .cz-ax { animation:none !important; } .cz-ax.is-on { opacity:1; } }

/* ── NAVEGACIÓN POR MINIATURAS ────────────────────────────────────────────
   La variante que pidió Adán: *«ahora soportaría las miniaturas en lugar de los
   dots»*. Los puntos dicen CUÁNTOS hay y dónde estás; las miniaturas dicen
   además QUÉ hay — y cuando los slides son fotos de justificantes, eso es la
   diferencia entre contar y encontrar.

   No sustituyen a los dots: conviven. Una galería de tres fotos se lee mejor con
   puntos, y una de veinte comprobantes sólo se navega con miniaturas. */
.cz-thumbs {
  display: flex;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.cz-thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: .55;
  scroll-snap-align: center;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;

  /* La entrada EN CASCADA: cada miniatura llega un poco después que la anterior.
     La referencia la dio Adán (tympanus, «Animated Border Menus»), y el retardo
     lo pone una variable que escribe el consumidor con su índice — así el CSS no
     necesita saber cuántas hay. */
  /* `backwards` y NO `both`: `both` conserva el estado final del keyframe al
     terminar y **pisa** las propiedades de la clase —de ahí que el activo no se
     distinguiera y que hiciera falta una segunda animación, que fue el defecto
     que Adán vio—. Con `backwards` sólo se aplica el estado INICIAL antes de
     arrancar, y al acabar mandan las clases. */
  animation: czThumbIn .32s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.cz-thumb:hover  { opacity: .85; transform: translateY(-2px); }
.cz-thumb:focus-visible { outline: 2px solid var(--color-primary, #4f46e5); outline-offset: 2px; }

/* 🔴 La marca del ACTIVO tiene que verse de un vistazo — Adán: *«no sabes en
   cuál está»*. Un borde de color sobre una tira de fotos oscuras se pierde: se
   le suma OPACIDAD plena contra el `.55` de las demás, un halo que la despega
   del fondo y un punto de anclaje debajo. Tres señales redundantes, que es lo
   que hace que se lea también en una pantalla al sol y para quien no distingue
   ese color. */
/* 🚨 SIN `transform`: la animación de entrada lleva `both`, así que fija el
   suyo al terminar y los dos pelean. El activo se distingue con opacidad,
   borde, halo y su marca de abajo — cuatro señales que no compiten con nada. */
.cz-thumb.is-on {
  opacity: 1;
  border-color: var(--color-primary, #4f46e5);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, .35), 0 4px 12px rgba(0, 0, 0, .45);
}

.cz-thumb.is-on::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--color-primary, #4f46e5);
}

/* El `::after` necesita un contenedor posicionado, y el botón no lo era. */
.cz-thumb { position: relative; }

.cz-thumb.is-on:hover { transform: none; }   /* ni al pasar por encima: ver arriba */

.cz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes czThumbIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
}

/* 🔴 AQUÍ HABÍA UN `animation-name` DISTINTO PARA LA ACTIVA, y era un defecto
   que se veía: al seleccionar una miniatura le CAMBIABA el `animation-name`, y
   eso hace que el navegador **re-ejecute la animación de entrada** — la
   miniatura bajaba 10 px y volvía, dejando su hueco vacío un instante. Adán lo
   describió exacto: *«cuando cambias de imagen la miniatura se coloca al pie y
   su posición se queda vacía»*.

   La entrada es de la TIRA, no del estado: una sola animación para todas, y el
   activo se marca sólo con propiedades que no compiten con ella. */

@media (prefers-reduced-motion: reduce) {
  .cz-thumb { animation: none; opacity: .55; }
  .cz-thumb.is-on { opacity: 1; }
  .cz-thumb:hover { transform: none; }
}