/* ============================================================================
   GALERIA DE IMAGENES DE UN ITEM
   ============================================================================
   Se apoya en los tokens que ya existen -radios, sombras, tiempos y curvas- y
   no define ningun color ni tipografia propios: la identidad del sitio no
   cambia por abrir una ficha.

   Celular y escritorio tienen layouts distintos a proposito. Lo unico que se
   comparte es el aspecto de la tarjeta y el comportamiento.
   ========================================================================= */

/* --- La pista de celular -------------------------------------------------
   scroll-snap: cada foto se detiene centrada sola, sin JavaScript.
   La proporcion 4:3 esta declarada para que el espacio quede reservado antes
   de que baje la imagen: sin eso, el texto de abajo salta cuando llega. */
/* La galeria vive en una celda de grilla, y una celda de grilla arranca con
   min-width:auto: no se encoge por debajo de su contenido. Con diez tomas de
   88% cada una, eso estiraba la columna y hacia desbordar la pagina entera.
   min-width:0 le devuelve el permiso de encogerse, y ahi si el overflow-x de
   la pista hace su trabajo. */
.galeria { min-width: 0; }

.gal-pista {
  display: flex;
  /* flex-start y no el stretch de fabrica: estirando, cada toma toma su alto
     del contenedor -que no tiene- y la proporcion 4:3 no llegaba a aplicarse.
     Resultado medido: la pista quedaba en 0px de alto y no se veia una sola
     foto en celular. */
  align-items: flex-start;
  min-width: 0;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Sangria a los costados: la primera foto no queda pegada al borde y se
     asoma un pedazo de la siguiente, que es lo que avisa que hay mas. */
  padding-inline: 1rem;
  scroll-padding-inline: 1rem;
}
.gal-pista::-webkit-scrollbar { display: none; }

.gal-toma {
  flex: 0 0 88%;
  scroll-snap-align: center;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-2);
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 0;
}
.gal-toma img { width: 100%; height: 100%; display: block; }

/* Con una sola imagen no hay nada que deslizar: ocupa todo el ancho. */
.gal-pista:has(.gal-toma:only-child) { padding-inline: 1rem; }
.gal-toma:only-child { flex-basis: 100%; }

.gal-contador {
  font-size: .75rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: .15rem .6rem;
  border-radius: var(--radio-pill);
  font-variant-numeric: tabular-nums;
}

/* --- Escritorio: tira de miniaturas + marco grande ---------------------- */
.gal-tira {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  /* Con diez miniaturas la columna se pasa de largo y descuadra la ficha: a
     partir de ahi se desplaza sola. */
  max-height: 30rem;
  overflow-y: auto;
  scrollbar-width: thin;
  flex: 0 0 5rem;
}
.gal-mini {
  flex: 0 0 auto;
  width: 5rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-1);
  overflow: hidden;
  border: 2px solid transparent;
  background: #fff;
  padding: 0;
  cursor: pointer;
  opacity: .62;
  transition: opacity var(--t-base), border-color var(--t-base);
}
.gal-mini img { width: 100%; height: 100%; display: block; }
.gal-mini:hover { opacity: 1; }
/* La activa se marca con el color de marca y ademas con opacidad plena: el
   borde solo no alcanza para quien no distingue bien los colores. */
.gal-mini-on { opacity: 1; border-color: var(--brand); }

.gal-marco {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-2);
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: zoom-in;
}
.gal-grande { width: 100%; height: 100%; display: block; }

.gal-lupa {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, .92);
  color: #0f172a;
  box-shadow: var(--sombra-1);
  opacity: 0;
  transition: opacity var(--t-base);
}
.gal-marco:hover .gal-lupa,
.gal-marco:focus-visible .gal-lupa { opacity: 1; }

/* --- El sello de "estado real" -------------------------------------------
   Para un equipo usado esto no es decoracion: es lo que dice que la foto
   muestra los rayones de verdad, y es el respaldo del taller ante un reclamo.
   Va en ambar y no en el color de marca justamente para que se lea como una
   advertencia honesta y no como un adorno. */
.gal-sello {
  position: absolute;
  left: .625rem;
  top: .625rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6875rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: var(--radio-pill);
  background: #fef3c7;
  color: #92400e;
}

/* --- La ampliacion ------------------------------------------------------- */
.gal-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, .94);
  display: grid;
  place-items: center;
}
.gal-lienzo {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: none;
}
.gal-zoom {
  max-width: 100%;
  max-height: 100vh;
  user-select: none;
  transition: transform var(--t-base) var(--curva-salida);
  will-change: transform;
}
/* Mientras se arrastra no hay transicion: si no, la imagen persigue al dedo
   con retraso y se siente pegajosa. */
.gal-lienzo.arrastrando .gal-zoom { transition: none; }

.gal-cerrar,
.gal-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background var(--t-base);
}
.gal-cerrar:hover, .gal-nav:hover { background: rgba(255, 255, 255, .24); }
.gal-cerrar { top: 1rem; right: 1rem; }
.gal-nav-izq { left: 1rem; top: 50%; transform: translateY(-50%); }
.gal-nav-der { right: 1rem; top: 50%; transform: translateY(-50%); }

.gal-barra {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .9rem;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .8125rem;
}
.gal-barra button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: .15rem;
}
.gal-barra button[disabled] { opacity: .35; cursor: default; }
.gal-barra-sep { width: 1px; height: 1rem; background: rgba(255, 255, 255, .25); }

/* En celular las flechas de la ampliacion estorban -se desliza con el dedo- y
   la barra sube para no chocar con el gesto del sistema. */
@media (max-width: 639px) {
  .gal-nav { display: none; }
  .gal-barra { bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* Quien pidio menos movimiento no recibe ninguno: ni el desplazamiento suave
   de la pista ni la transicion del zoom. */
@media (prefers-reduced-motion: reduce) {
  .gal-pista { scroll-behavior: auto; }
  .gal-zoom { transition: none; }
  .gal-mini { transition: none; }
}