/* =============================================================
   ui/cuadro.css — cada foto como un cuadro de la hoja de contactos
   =============================================================
   (PLAN.md, Fase 5, punto 8.) Arriba, el nombre del archivo en el borde, como
   el número que la película trae impreso; abajo, la foto, sin nada encima
   (regla 3). Si está elegida, un círculo de lápiz graso la rodea (regla 1),
   dibujado por `marcaSvg()` de `shared.js`.

   La estructura la arma `renderGallery()` de `event.html`:

     .cuadro                      (.cuadro-elegido, .cuadro-recien)
       .cuadro-borde              el nombre del archivo
       .cuadro-foto               posición para la marca
         .thumb[data-id]          la foto de siempre: recorta, se toca para abrirla
         svg.cuadro-marca         AFUERA de .thumb, que recorta: el trazo se sale

   La marca se dibuja con animación SOLO en `.cuadro-recien` (regla 4). Elegir
   una foto vuelve a dibujar la galería entera; si la animación fuera de
   `.cuadro-elegido`, se redibujarían todos los círculos cada vez.
   ============================================================= */

.gallery {
  gap: 14px 8px;
}
@media (min-width: 480px) {
  .gallery { gap: 16px 10px; }
}

.cuadro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cuadro-borde {
  font-family: var(--fuente-cuadro);
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cuadro-borde::before {
  content: '▸ ';
  font-family: var(--fuente-texto);
}

.cuadro-foto {
  position: relative;
}

/* La foto ya no se levanta al pasar el mouse ni cambia de borde al elegirla:
   la elección la dice la marca, y el movimiento queda para cuando el
   comprador hace algo (regla 4). */
.cuadro .thumb {
  border: 0;
  border-radius: 2px;
}
.cuadro .thumb:hover { transform: none; }
.cuadro .thumb.selected { border-color: transparent; }

/* El botón de elegir: un círculo chico vacío; elegida, en papel con el tilde. */
.cuadro .thumb .check {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--papel);
  background: var(--negro-50);
}
.cuadro .thumb.selected .check {
  background: var(--papel);
  border-color: var(--papel);
}
.cuadro .thumb.selected .check svg { color: var(--bg); }

.cuadro-marca {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.cuadro-marca path {
  fill: none;
  stroke: var(--lapiz);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Se revela de izquierda a derecha, como la mano que la traza. No se anima
   con `stroke-dasharray`: con `non-scaling-stroke` el navegador mide los
   guiones en otra escala y el círculo terminaba punteado. */
.cuadro-recien .cuadro-marca {
  animation: trazar-marca 280ms ease-out;
}
@keyframes trazar-marca {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cuadro-recien .cuadro-marca { animation: none; }
}

/* Con teclado, el foco se ve sobre el cuadro entero. */
.cuadro .thumb .check:focus-visible {
  outline: 2px solid var(--papel);
  outline-offset: 2px;
}