/* Ruta: /app/static/css/style.css */
/* Fecha: 2025-09-22 (autodisparo: hints/estados + botones utilitarios) */
/* Descripción: Estilos globales + overlay + responsive + barra progreso */

/* —— RESET & PALETA —— */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --celeste:#00bfff;
  --theme-color: var(--celeste);
  --blue-dark:#0090d6;
  --bg:#fdfdfd;
  --text:#333;
  --border:#a0a0a0;
}

/* —— CUERPO —— */
body{
  font-family:system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  text-align:center;
  padding-bottom:3rem;
}

/* —— CABECERA —— */
header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.5rem;
  padding:1rem;
  background:var(--theme-color); /* Color de tema inyectado */
  color:#fff;
}
.hamburger{
  display:none;
  background:none;border:none;
  font-size:2rem;
  color:#fff;
  cursor:pointer;
  line-height:1;
}
header h1{margin:0;font-size:1.6rem}
header h1 a{color:#fff;text-decoration:none}

main{padding:1.5rem}
footer{padding:1rem;background:#eee;font-size:.9em}

/* —— POPUP MENU (topbar + submenús) —— */
/* NOTA: El fondo del header ya es el color de tema; no forzamos fondo aquí. */
.popup-menu{margin:1rem 0}
.popup-menu > ul{
  list-style:none;
  display:inline-flex;
  gap:1rem;
  border-radius:4px;
  overflow:visible;
  flex-wrap:wrap;
  background:transparent; /* antes: var(--theme-color) */
}
.popup-menu > ul > li{
  position:relative;
  padding:.25rem .25rem;
  cursor:pointer;
  color:#fff;
  font-weight:500;
}
.popup-menu > ul > li > a{
  color:#fff; /* enlaces del top sobre header de color */
  text-decoration:none;
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:6px;
}
.popup-menu > ul > li > a:hover{
  background:rgba(255,255,255,.15);
}

/* Submenú: fondo claro + texto oscuro para legibilidad */
.popup-menu .submenu{
  display:none;
  position:absolute;
  top:100%;left:0;
  list-style:none;
  background:#fff;                 /* ← fondo claro */
  color:#222;                      /* ← texto oscuro */
  border:1px solid #e5e7eb;
  border-radius:6px;
  margin-top:.2rem;
  min-width:200px;
  z-index:1000;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  text-align:left;
  padding:.25rem;
}
.popup-menu li:hover>.submenu{display:block}
.popup-menu .submenu li{margin:0}
.popup-menu .submenu li+li{border-top:1px solid #f1f5f9}
.popup-menu .submenu a{
  display:block;
  padding:.5rem .75rem;
  text-decoration:none;
  color:#222;
  border-radius:4px;
}
.popup-menu .submenu a:hover{ background:#f3f4f6; }

/* —— TABLAS —— */
table{margin:1rem auto;width:100%;max-width:100%;border-collapse:collapse}
.data-table,.data-table th,.data-table td{border:.5px solid var(--border)}
.data-table th,.data-table td{
  padding:.6rem 1rem;
  text-align:center;
  font-size:.95em;
}
.data-table th{background:var(--theme-color);color:#fff}
.tabla-scroll{overflow-x:auto}

/* —— FORMULARIOS Y BOTONES —— */
.form-block{
  margin-bottom:2rem;
  padding:1rem;
  border:1px solid #ccc;
  border-radius:8px;
  background:#f9f9f9;
  max-width:600px;
  margin-left:auto;margin-right:auto;
}
input[type="text"],
input[type="email"],
input[type="password"],
select,textarea{
  width:100%;
  padding:12px;
  font-size:1em;
  border:1px solid #ccc;
  border-radius:6px;
  margin-top:.4rem;
}
button{
  padding:12px 20px;
  font-size:1em;
  cursor:pointer;
  border:none;
  background:var(--theme-color);
  color:#fff;
  border-radius:6px;
  width:100%;
  margin-top:.8rem;
}
button:hover{background:var(--blue-dark)}

/* Botones utilitarios (tablas/acciones) */
.btn{display:inline-block;padding:.45rem .75rem;border-radius:6px;text-decoration:none;cursor:pointer}
.btn-small{padding:.25rem .5rem;font-size:.85em;color:#fff;background:var(--theme-color)}
.btn-small:hover{background:var(--blue-dark)}
.btn-secondary{background:#6c757d;color:#fff}
.btn-secondary:hover{filter:brightness(.95)}
.btn-danger{background:#e03131;color:#fff}
.btn-danger:hover{filter:brightness(.95)}

/* —— RESULTADOS —— */
.resultado{
  margin-top:1.5rem;
  font-size:1.2em;
  font-weight:bold;
  text-align:center;
}

/* —— VIDEO —— */
.video-container{
  width:100%;
  max-width:480px;
  margin:0 auto;
  border:1px solid #ccc;
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
video{
  width:100%;
  aspect-ratio:1 / 1.2;
  height:auto;
  transform:scaleX(-1);
  display:block;
  object-fit:cover;
}

/* —— OVERLAY CÁMARA —— */
.overlay-cam{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.overlay-oval{
  position:absolute;
  left:20%;
  right:20%;
  top:12%;
  bottom:12%;
  border:5px dashed blue;
  border-radius:9999px;
  box-sizing:border-box;
}

/* Estados del óvalo para autodisparo */
.overlay-oval.warn{ border-color:#e67e22 !important; }
.overlay-oval.bad{ border-color:#c0392b !important; }
.overlay-oval.ready{ border-color:#27ae60 !important; }

/* Hint guiado para autodisparo */
.auto-hint{ margin:.6rem 0 0; font-size:.95em; }
.auto-hint.ok{ color:#27ae60; }
.auto-hint.warn{ color:#e67e22; }
.auto-hint.bad{ color:#c0392b; }

/* —— TÍTULO & AYUDA —— */
.titulo-asistencia{
  text-align:center;
  font-size:1.6em;
  margin-bottom:1rem;
}
.texto-ayuda{
  text-align:center;
  font-size:.95em;
  color:gray;
  margin-bottom:1rem;
}

/* —— ESTADO DE ASISTENCIA —— */
.status { margin-top: 1rem; font-size: 1.1em; font-weight: normal; }
.status.tarde { color: #c0392b; }
.status.puntual { color: #27ae60; }

/* —— BARRA DE PROGRESO (controlada por JS) —— */
.progress-container{
  width:100%;
  height:8px;
  background:#ddd;
  border-radius:5px;
  margin:1rem 0;
  overflow:hidden;
}
.progress-bar{
  height:100%;
  width:0%;
  background-color:var(--theme-color, #00aaff);
  transition:width .2s ease-out;
}

/* —— Utilidades varias —— */
.img-circle{width:80px;height:80px;border-radius:50%;object-fit:cover;display:block;margin:0 auto}

/* —— RESPONSIVE ≤ 768 px —— */
@media(max-width:768px){
  .popup-menu > ul{flex-direction:column; gap:.25rem}
  .popup-menu > ul > li{text-align:center}
  .form-block{padding:1rem .5rem}
  .data-table th,.data-table td{font-size:.85em;padding:.4rem}
  button{font-size:1em;padding:12px}
}

/* —— RESPONSIVE ≤ 576 px —— */
@media(max-width:576px){
  .hamburger{display:block}
  header{padding:.5rem}
  .hamburger{font-size:1.8rem}
  header h1{font-size:1.3rem}
  .popup-menu > ul{display:none;width:100%}
  .popup-menu > ul.activo{display:block}
  .popup-menu > ul > li{
    border-top:1px solid rgba(255,255,255,.3);
    padding:.6rem .75rem;
  }
  .titulo-asistencia{
    font-size:2.0em;
    color:green;
    line-height:1.1;
  }
  button,
  input[type="text"]{min-height:44px}
}