/* Piezas que Tailwind no cubre bien con utilidades: animaciones
   a medida, esquinas del visor de cámara y reglas de impresión. */

[x-cloak]{display:none !important}

/* ── Visor de cámara (finder) ───────────────────────────── */
.finder{position:relative}
.finder::before,.finder::after{content:'';position:absolute;width:22px;height:22px}
.finder::before{top:-2px;left:-2px;border-top:3px solid #fff;border-left:3px solid #fff;border-radius:4px 0 0 0}
.finder::after{bottom:-2px;right:-2px;border-bottom:3px solid #fff;border-right:3px solid #fff;border-radius:0 0 4px 0}
.finder.found{border-color:#4CAF50 !important;box-shadow:0 0 0 4px rgba(76,175,80,.3)}

.scan-line{position:absolute;width:90%;height:2px;background:linear-gradient(90deg,transparent,#90CAF9,transparent);top:10%;left:5%;animation:scanAnim 2s linear infinite;opacity:.85}
@keyframes scanAnim{0%{top:10%}100%{top:90%}}

/* ── Carnet imprimible ───────────────────────────────────── */
#carnet-print-area{position:fixed;left:-9999px;top:0;width:400px;pointer-events:none}
@page{margin:8mm}
@media print{
  /* #app-shell contiene TODO el resto de la página (incluida la tabla
     de alumnos, que puede tener cientos de filas). Ocultarlo con
     display:none saca su espacio del flujo por completo, así no genera
     páginas en blanco extra — a diferencia de visibility:hidden, que
     oculta visualmente pero sigue reservando el alto en el documento. */
  #app-shell{display:none !important}
  #carnet-print-area{visibility:visible;background:#fff}
  .carnet,.carnet *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  #carnet-print-area.mode-single{position:fixed;inset:0;display:flex !important;justify-content:center;align-items:center}
  /* Carnet vertical, tamaño fotocheck exacto: 5.4cm x 8.6cm.
     Las medidas internas (padding, fuentes, QR) ya vienen en mm
     directo desde buildCarnetHTML(), no se reescriben aquí.
     En vez de forzar un salto de página cada N tarjetas (un número
     fijo que depende de los márgenes exactos del motor de impresión
     de cada navegador/impresora), se deja que el navegador decida
     solas cuántas caben por hoja — break-inside:avoid solo evita que
     una tarjeta se corte a la mitad entre dos páginas. */
  .carnet{break-inside:avoid;page-break-inside:avoid}
  #carnet-print-area.mode-multi{position:absolute;top:0;left:0;width:100% !important;display:flex !important;flex-wrap:wrap;gap:5mm;padding:5mm;box-sizing:border-box;align-content:flex-start}
}