/* ============================
   ESTILO BASE GLOBAL
============================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #f7f8f9;
  color: #222;
  overflow-x: hidden;
  padding-bottom: 70px;
}

/* ============================
   ENCABEZADOS Y TEXTOS
============================ */
h2, h4, h5, h6 {
  font-weight: 600;
  text-align: center;
  color: #00563F;
}

p {
  font-size: 14px;
  line-height: 1.4;
}

/* ============================
   BOTONES GENERALES
============================ */
.btn {
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn:active {
  transform: scale(0.95);
}

/* ============================
   TARJETAS DE AULAS (Dashboard)
============================ */
.aulas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 480px) {
  .aulas-grid {
    grid-template-columns: 1fr;
  }
}

.aula-card {
  text-align: center;
}

.aula-card .card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  transition: transform 0.2s ease-in-out;
}

.aula-card .card:hover {
  transform: scale(1.03);
}

.aula-card .fw-bold {
  color: #00563F;
  font-size: 15px;
}

.aula-card .small {
  font-size: 12px;
  color: #666;
}

/* Botones de encendido/apagado */
.card button {
  border: none;
  border-radius: 25px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}

.btn-success {
  background-color: #00563F;
}

.btn-danger {
  background-color: #D4AF37;
  color: #fff;
}

/* ============================
   GRÁFICOS (Chart.js)
============================ */
canvas {
  width: 100% !important;
  height: auto !important;
}

.grafico-card {
  background-color: #fff;
  border-radius: 18px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  margin-top: 25px;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

.grafico-titulo {
  color: #00563F;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}

/* ============================
   ALERTA SUPERIOR
============================ */
.alerta-activa {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #D4AF37;
  color: #fff;
  text-align: center;
  padding: 0.6rem;
  font-weight: 500;
  z-index: 999;
  animation: alertaEntrada 0.3s ease-in-out;
}

.alerta-oculta {
  display: none;
}

@keyframes alertaEntrada {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* ============================
   POPUP EMERGENTE
============================ */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup-modal {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  width: 90%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  animation: popupFade 0.3s ease;
}

@keyframes popupFade {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================
   FOOTER INSTITUCIONAL
============================ */
footer, .app-footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #777;
}

footer a, .app-footer a {
  color: #00563F;
  text-decoration: none;
}

footer a:hover, .app-footer a:hover {
  color: #D4AF37;
}

/* ============================
   LOGO PRINCIPAL (index.html)
============================ */
.logo {
  width: 120px;
  height: auto;
}

/* ============================
   PANTALLA DE INICIO (index.html)
============================ */
.inicio-body {
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
  text-align: center;
}

.inicio-container {
  max-width: 360px;
  width: 100%;
}

.inicio-ilustracion {
  background: #fff6d9;
  width: 150px;
  height: 150px;
  margin: 0 auto 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.inicio-logo {
  width: 90px;
  height: auto;
}

.inicio-titulo {
  font-size: 1.4rem;
  color: #00563F;
  font-weight: 700;
  margin-bottom: 8px;
}

.inicio-texto {
  color: #7a7a7a;
  font-size: 14px;
  margin-bottom: 30px;
  line-height: 1.5;
}

.inicio-boton {
  background-color: #D4AF37;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4);
  transition: all 0.2s ease-in-out;
}

.inicio-boton:active {
  transform: scale(0.97);
}

/* ============================
   SPLASH SCREEN
============================ */
.splash-body {
  background-color: #00563F;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
}

.splash-logo {
  width: 90px;
  height: 90px;
  animation: zoomOut 1.3s ease-in-out forwards;
  transform-origin: center;
}

.splash-text {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 18px;
  color: #fff;
  opacity: 0;
  animation: fadeIn 1s ease-in 0.5s forwards;
}

@keyframes zoomOut {
  0% { transform: scale(0.1); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================
   ALERTAS EN GRID (reportes.html)
============================ */
.alertas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

/* Límite visual de alertas (máximo 8) */
.alertas-grid .alert-card:nth-child(n+9) {
  display: none;
}

@media (max-width: 480px) {
  .alertas-grid {
    grid-template-columns: 1fr;
  }
}

.alert-card {
  background: #fff;
  border-left: 6px solid #D4AF37;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  animation: fadeSlideIn 0.5s ease forwards;
  opacity: 0;
  transform: translateY(10px);
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.alert-info i {
  color: #D4AF37;
  font-size: 1.3rem;
}

.alert-text {
  color: #00563F;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.alertas-grid p {
  grid-column: span 2;
  text-align: center;
  color: #7a7a7a;
  font-size: 14px;
}

/* ============================
   BOTÓN PRINCIPAL GENERAL
============================ */
.btn-principal {
  background-color: #D4AF37;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4);
  transition: all 0.25s ease-in-out;
}

.btn-principal:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 14px rgba(212, 175, 55, 0.5);
}

/* ==========================================================
   NAVBAR INFERIOR (tipo app móvil)
========================================================== */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 2px solid #e6e6e6;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  text-decoration: none;
  color: #00563F;
  transition: all 0.2s ease;
}

.bottom-nav .nav-item i {
  font-size: 1.4rem;
  margin-bottom: 3px;
}

.bottom-nav .nav-item.active,
.bottom-nav .nav-item:hover {
  color: #D4AF37;
  font-weight: 600;
}

/* ==========================================================
   CONTROL DE ACCESO (acceso.html)
   Cerradura inteligente simulada con animaciones de estado
========================================================== */

/* Tarjeta que representa la cerradura física en la UI */
.lock-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 20px 16px;
  text-align: center;
  max-width: 360px;
  margin: 0 auto 20px auto;
  border: 2px solid #00563F;
  transition: all 0.25s ease-in-out;
  position: relative;
}

/* Estado estable cuando la puerta está abierta */
.lock-card.lock-open {
  border-color: #D4AF37;
  box-shadow: 0 6px 16px rgba(212,175,55,0.3);
}

/* Icono grande de candado/puerta.
   Cambia color según estado. */
.lock-icon {
  font-size: 3rem;
  line-height: 1;
  color: #00563F;
  margin-bottom: 8px;
}

.lock-card.lock-open .lock-icon {
  color: #D4AF37;
}

/* Texto principal de estado de la cerradura */
.lock-status {
  font-size: 1rem;
  font-weight: 600;
  color: #00563F;
  margin-bottom: 4px;
}

.lock-card.lock-open .lock-status {
  color: #D4AF37;
}

/* Subtexto / descripción corta bajo el estado */
.lock-hint {
  font-size: 0.8rem;
  color: #7a7a7a;
}

/* Contenedor de botones táctiles */
.acceso-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

/* Botón secundario (intento no autorizado) */
.btn-secundario {
  background-color: #00563F !important;
  box-shadow: 0 4px 10px rgba(0,86,63,0.4) !important;
}

.btn-secundario:active {
  transform: scale(0.97);
}

/* Botón "Cerrar puerta" */
.btn-cerrar {
  background-color: #444 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

.btn-cerrar:active {
  transform: scale(0.97);
}

/* Bitácora cronológica de accesos */
.acceso-log {
  width: 90%;
  max-width: 380px;
  margin: 0 auto 100px auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-item {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #00563F;
  padding: 10px 12px;
  border-left: 5px solid #00563F;
  word-break: break-word;
}

.log-item.ok {
  border-left-color: #D4AF37;
  color: #D4AF37;
  font-weight: 600;
}

.log-item.fail {
  border-left-color: #b00020;
  color: #b00020;
  font-weight: 600;
}

.log-item.info {
  border-left-color: #00563F;
  color: #00563F;
}

/* Ajuste para pantallas pequeñas:
   asegura que el log no quede tapado por la barra inferior fija */
@media (max-width: 480px) {
  .acceso-log {
    margin-bottom: 110px;
  }
}

/* ==========================================================
   ANIMACIONES DE ESTADO
   - lock-scan: escaneo NFC/BLE (borde pulsante verde)
   - lock-open-anim: realce dorado típico de "acceso concedido"
   - lock-closing-anim: pulso gris al cerrar
========================================================== */

/* Escaneo: borde pulsando en verde institucional.
   Se usa mientras se "verifica" el dispositivo. */
.lock-card.lock-scan {
  animation: scanPulse 0.8s infinite;
  border-color: #00563F;
  box-shadow: 0 0 12px rgba(0,86,63,0.4);
}

@keyframes scanPulse {
  0%   { box-shadow: 0 0 4px rgba(0,86,63,0.3); }
  50%  { box-shadow: 0 0 14px rgba(0,86,63,0.55); }
  100% { box-shadow: 0 0 4px rgba(0,86,63,0.3); }
}

/* Apertura: pequeño "pop" dorado cuando se concede acceso.
   Esta clase se agrega de forma temporal. */
.lock-card.lock-open-anim {
  animation: openPop 0.6s ease;
}

@keyframes openPop {
  0%   { transform: scale(0.95); box-shadow: 0 0 8px rgba(212,175,55,0.4); }
  50%  { transform: scale(1.02); box-shadow: 0 0 20px rgba(212,175,55,0.7); }
  100% { transform: scale(1.0); box-shadow: 0 6px 16px rgba(212,175,55,0.3); }
}

/* Cierre: pulso gris rápido al "bloquear" de nuevo la puerta.
   Esta clase se agrega de forma temporal durante el cierre. */
.lock-card.lock-closing-anim {
  animation: closePulse 0.6s ease;
  border-color: #444;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

@keyframes closePulse {
  0%   { transform: scale(1.02); box-shadow: 0 0 8px rgba(0,0,0,0.4); }
  50%  { transform: scale(0.97); box-shadow: 0 0 2px rgba(0,0,0,0.2); }
  100% { transform: scale(1);    box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
}

/* Animación de salida suave para las entradas del log.
   Se usa justo antes de eliminar el elemento del DOM.
   La clase .fade-out se agrega vía JavaScript. */
.log-item.fade-out {
  animation: logFadeOut 0.6s forwards ease;
}

@keyframes logFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ==========================================================
   AULA INTELIGENTE 3D (aula3d.html)
   Representación visual del aula y su estado IoE
========================================================== */

/* Contenedor donde va el canvas 3D de Three.js.
   Se da una altura fija amigable para móvil (tipo "tarjeta interactiva"). */
.three-wrapper {
  width: 100%;
  max-width: 420px;
  height: 240px;
  margin: 0 auto 16px auto;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  overflow: hidden;
  border: 2px solid #00563F;
}

/* Panel con el estado lógico del aula:
   - Presencia detectada (sensor de movimiento)
   - Luz encendida/apagada
   - Última acción (por ejemplo "Luz apagada automáticamente") */
.aula-status-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 2px solid #00563F;
  padding: 16px;
  max-width: 420px;
  margin: 0 auto 16px auto;
  font-size: 0.9rem;
}

.aula-status-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  line-height: 1.4;
}

.aula-status-line .label {
  color: #00563F;
  font-weight: 600;
  font-size: 0.9rem;
}

.aula-status-line .value {
  color: #222;
  font-weight: 500;
  font-size: 0.9rem;
}

/* Botones táctiles para simular movimiento / aula vacía.
   Reusa patrón visual de botones redondeados grandes. */
.aula3d-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 20px auto;
}

/* Bitácora de eventos en vivo (igual estilo base que acceso-log).
   Se vuelve a usar acceso-log y log-item para mantener coherencia
   visual en toda la app. */
#accesoLog,
#logAula3D {
  width: 90%;
  max-width: 380px;
  margin: 0 auto 100px auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Reutilizamos .log-item, .log-item.ok, .log-item.fail, .log-item.info
   que ya existen en tu CSS de acceso.html. Si por alguna razón no están,
   copia desde acceso.html.
   Aquí sólo aseguramos la animación de salida: */
.log-item.fade-out {
  animation: logFadeOut 0.6s forwards ease;
}

@keyframes logFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Ajuste responsive para que el log no quede tapado
   por la barra inferior fija en pantallas pequeñas. */
@media (max-width: 480px) {
  #accesoLog,
  #logAula3D {
    margin-bottom: 110px;
  }
}

/* ==========================================================
   MEJORAS VISUALES DEL DASHBOARD
   - Contenedor principal tipo "teléfono"
   - Grid 2x2 ordenado para aulas
   - Tarjetas con encabezado y cuerpo
   - Gráfico con borde suave
========================================================== */

/* Contenedor general del dashboard:
   limita el ancho para que se vea como una app y
   centra el contenido en pantallas más anchas. */
.dashboard-wrapper {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background-color: #f7f8f9;
  min-height: 100vh;
  padding-bottom: 100px; /* espacio para el bottom-nav */
}

/* Ajuste del header dentro del dashboard */
.dashboard-header {
  padding-top: 16px;
  padding-bottom: 8px;
  text-align: center;
}

/* Contenido principal desplazable */
.main-content {
  width: 92%;
  max-width: 400px;
  margin: 0 auto 24px auto;
  padding-bottom: 90px; /* asegura que el nav inferior no tape el gráfico */
}

/* GRID de aulas:
   - En pantallas normales: 2 columnas
   - En pantallas muy pequeñas: 1 columna
*/
#aulasContainer.aulas-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 480px) {
  #aulasContainer.aulas-grid {
    grid-template-columns: 1fr;
  }
}

/* Cada "tarjeta aula" se comporta como un bloque clickeable,
   sin usar la tarjeta blanca genérica de Bootstrap, sino nuestra estética. */
.aula-card .aula-card-inner {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 2px solid #00563F;
  overflow: hidden;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
}

/* Efecto táctil al presionar */
.aula-card .aula-card-inner:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Encabezado de la tarjeta (nombre del aula) */
.aula-header {
  background: linear-gradient(
    to right,
    #00563F 0%,
    #007a57 100%
  );
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
}

/* Título del aula dentro del header */
.aula-nombre {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}

/* Cuerpo de la tarjeta:
   muestra consumo, estado actual y botón de acción */
.aula-body {
  padding: 12px;
  text-align: center;
}

.aula-body .small {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

/* Estado ON/OFF grande y claro */
.estado-text {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.2;
}

.estado-text.on {
  color: #00563F;
}

.estado-text.off {
  color: #999;
}

/* Botón de acción dentro de cada aula:
   usamos los colores institucionales y no el gris por defecto */
.btn-accion {
  display: inline-block;
  border: none;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  padding: 8px 16px;
  min-width: 90px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.15s ease-in-out;
}

.btn-accion:active {
  transform: scale(0.95);
}

/* Botón cuando el aula está apagada → acción es "Encender" */
.btn-on {
  background-color: #00563F; /* verde institucional */
  box-shadow: 0 4px 10px rgba(0,86,63,0.4);
}

/* Botón cuando el aula está encendida → acción es "Apagar" */
.btn-off {
  background-color: #D4AF37; /* dorado institucional */
  color: #fff;
  box-shadow: 0 4px 10px rgba(212,175,55,0.4);
}

/* Indicador visual rápido:
   borde de estado cuando está ON o OFF */
.aula-card-inner.on {
  border-color: #D4AF37;
  box-shadow: 0 6px 16px rgba(212,175,55,0.25);
}

.aula-card-inner.off {
  border-color: #00563F;
  box-shadow: 0 4px 12px rgba(0,86,63,0.15);
}

/* Tarjeta del gráfico:
   le damos el mismo lenguaje visual que las aulas para consistencia */
.grafico-card {
  border: 2px solid #00563F;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  background-color: #fff;
  padding: 16px;
  margin-top: 24px;
  margin-bottom: 110px; /* para no chocar con el navbar en pantallas pequeñas */
}

/* Título del gráfico fijo arriba */
.grafico-titulo {
  font-size: 14px;
  color: #00563F;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.2;
}

/* El lienzo del gráfico debe ser compacto y simétrico dentro de la tarjeta */
#graficoConsumo {
  display: block;
  width: 100%;
  max-height: 180px;
}

/* Ajuste de navbar activo en el dashboard:
   reforzamos el dorado para dejar claro en qué pantalla está el usuario */
.bottom-nav .nav-item.active {
  color: #D4AF37;
  font-weight: 600;
}
.bottom-nav .nav-item.active i {
  color: #D4AF37;
}

/* Ajuste del header de bienvenida
   para que no quede pegado al borde superior del viewport */
.app-header.dashboard-header .app-titulo {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 600;
  color: #00563F;
}

.app-header.dashboard-header .app-subtitulo {
  color: #7a7a7a;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

/* ==========================================================
   OVERLAY DE ESCANEO (aula3d.html)
   - Esta capa se muestra encima del 3D cuando marcas "aula vacía".
   - Simula un barrido tipo sensor para justificar el apagado automático.
========================================================== */

.scan-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);        /* oscurece el aula durante el escaneo */
  border-radius: 16px;
  display: none;                         /* se activa con .active */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

/* Cuando el JS agrega .active mostramos la superposición */
.scan-overlay.active {
  display: flex;
}

/* Barra de escaneo que cruza verticalmente el aula 3D */
.scan-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: rgba(0, 128, 64, 0.4);          /* verde institucional translúcido */
  box-shadow: 0 0 20px rgba(0, 255, 128, 0.6); /* halo verde */
  animation: scanMove 1.5s linear infinite;
  border-top: 2px solid rgba(0, 255, 128, 0.8);
  border-bottom: 2px solid rgba(0, 255, 128, 0.8);
  backdrop-filter: blur(2px);
}

/* Movimiento vertical de la barra de escaneo */
@keyframes scanMove {
  0%   { transform: translateY(-30%); }
  50%  { transform: translateY(50%); }
  100% { transform: translateY(130%); }
}

/* Texto "Escaneando aula…" centrado sobre el overlay */
.scan-text {
  position: relative;
  z-index: 11;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  background: rgba(0, 86, 63, 0.8); /* verde institucional oscuro */
  border: 2px solid #D4AF37;        /* dorado institucional */
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  font-family: 'Poppins', sans-serif;
}