/* La galería del evento. Encima del sistema neón, sin redefinir sus fichas. */

.galeria-barra { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }

/* Mosaico de ancho fijo por columna: con fotos de teléfono mezcladas —vertical,
   horizontal, cuadrada— una grilla de proporción fija recorta la mitad. Acá
   cada pieza entra entera y la altura la pone la foto. */
.galeria { columns: 4 13rem; column-gap: .7rem; }
@media (max-width: 640px) { .galeria { columns: 2 8rem; column-gap: .5rem; } }

.pieza { break-inside: avoid; margin-bottom: .7rem; position: relative;
  border-radius: var(--r); overflow: hidden; background: var(--humo);
  border: 1px solid var(--borde); display: block; width: 100%; padding: 0; cursor: zoom-in; }
.pieza img { width: 100%; height: auto; display: block; }
.pieza:hover { border-color: var(--borde-vivo); }
.pieza:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 2px; }

/* El sello de video: un triángulo, no un ícono cargado. Dice lo único que hay
   que saber antes de tocar. */
.pieza-video::after {
  content: '▶'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.6rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7);
  background: linear-gradient(transparent 40%, rgba(10,7,20,.5));
}
.pieza-autor { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .6rem .45rem;
  font-size: .76rem; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(10,7,20,.82)); }

/* ---------- La cola de subida ---------- */

.cola { display: grid; gap: .5rem; margin-top: .9rem; }
.cola:empty { margin-top: 0; }
.item { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem;
  border: 1px solid var(--borde); border-radius: var(--r); background: var(--noche); }
.item .mini { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto;
  background: var(--humo); }
.item .nom { flex: 1 1 auto; min-width: 0; font-size: .88rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.item .est { font-size: .82rem; color: var(--flash-3); flex: 0 0 auto; }
.item.listo .est { color: var(--lima); }
.item.falla .est { color: #ff8fb4; }

/* ---------- El visor ---------- */

.visor { position: fixed; inset: 0; z-index: 200; background: rgba(10,7,20,.96);
  display: grid; grid-template-rows: 1fr auto; padding: 3.4rem 1rem 1rem; }
.visor-caja { display: grid; place-items: center; min-height: 0; }
.visor-caja img, .visor-caja video { max-width: 100%; max-height: 100%; border-radius: var(--r); }
.visor-pie { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .9rem; color: var(--flash-2); font-size: .9rem; }

.visor-cerrar, .visor-flecha {
  position: absolute; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--borde-vivo); background: rgba(21,15,38,.9);
  color: var(--flash); font-size: 1.1rem; cursor: pointer; z-index: 1;
}
.visor-cerrar { top: 1rem; right: 1rem; }
.visor-flecha { top: 50%; transform: translateY(-50%); }
.visor-izq { left: 1rem; }
.visor-der { right: 1rem; }
.visor-flecha:disabled { opacity: .3; cursor: default; }
.visor-cerrar:hover, .visor-flecha:hover:not(:disabled) { border-color: var(--fucsia); }

/* Con el dedo se pasa deslizando; las flechas ocupan lugar sobre la foto. */
@media (pointer: coarse) { .visor-flecha { display: none; } }

/* ---------- La vista del dueño ---------- */

.qr-evento { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }
.qr-marco { flex: 0 0 auto; padding: .9rem; border-radius: var(--r); background: #fff; }
.qr-marco svg { display: block; width: 168px; height: 168px; }
.qr-marco svg path, .qr-marco svg rect { shape-rendering: crispEdges; }

.moderar { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.mod-pieza { position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--borde); background: var(--noche); aspect-ratio: 1; }
.mod-pieza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-pieza.oculta img { opacity: .28; filter: grayscale(1); }
.mod-pieza button { position: absolute; left: .35rem; right: .35rem; bottom: .35rem;
  padding: .35rem; border-radius: 8px; border: 1px solid var(--borde-vivo);
  background: rgba(10,7,20,.86); color: var(--flash); font: inherit; font-size: .76rem;
  cursor: pointer; }
.mod-pieza button:hover { border-color: var(--fucsia); }

/* Al imprimir, el QR es lo único que importa: se va todo lo demás. */
@media print {
  .site-header, .site-footer, .no-imprimir { display: none !important; }
  body { background: #fff; color: #000; }
  .caja { border: 0; background: #fff; }
  .qr-marco { padding: 0; }
  .qr-marco svg { width: 320px; height: 320px; }
}