/* ============================================================================
   GOES · Panel de monitoreo
   Sin librerías. Un archivo, leíble, y que aguante en un teléfono.

   ⚠ Para esconder cosas se usa SIEMPRE la clase .oculto, nunca el atributo
   hidden: cualquier regla de clase con `display` le gana al atributo, y el
   diálogo «no responde» sin que se vea por qué.
   ========================================================================== */
:root{
  --tinta:#1a2230;
  --tinta-suave:#5a6678;
  --linea:#dfe4ec;
  --fondo:#f4f6fa;
  --blanco:#fff;
  --oro:#c8a24a;          /* la marca de GOES */
  --azul:#2f6fb0;
  --verde:#1f8a54;
  --ambar:#c98a12;
  --rojo:#c0392b;
  --sombra:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color:var(--tinta); background:var(--fondo);
}
.oculto{display:none !important}
.tenue{color:var(--tinta-suave); font-weight:400}
button{font:inherit; cursor:pointer}
a{color:var(--azul)}

/* ── la puerta ───────────────────────────────────────────────────────────── */
.entrada{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; background:linear-gradient(160deg,#182131,#2b3a52);
}
.tarjeta-entrada{
  width:100%; max-width:360px; background:var(--blanco); border-radius:12px;
  padding:28px 24px 24px; box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.tarjeta-entrada h1{
  margin:0; font-size:30px; letter-spacing:6px; color:var(--tinta);
  border-bottom:3px solid var(--oro); display:inline-block; padding-bottom:4px;
}
.tarjeta-entrada .sub{margin:10px 0 22px; color:var(--tinta-suave); font-size:13px}
.tarjeta-entrada label{
  display:block; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; color:var(--tinta-suave); margin:14px 0 5px;
}
.tarjeta-entrada input{
  width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:7px;
  font:inherit; background:#fbfcfe;
}
.tarjeta-entrada input:focus{outline:2px solid var(--azul); outline-offset:1px}
.tarjeta-entrada input::placeholder{color:#aeb7c4}
#btn-entrar{
  width:100%; margin-top:22px; padding:11px; border:0; border-radius:7px;
  background:var(--tinta); color:#fff; font-weight:600; letter-spacing:.3px;
}
#btn-entrar:disabled{background:#8d97a8; cursor:progress}
.aviso-entrada{
  margin:14px 0 0; padding:9px 11px; border-radius:7px; font-size:13px;
  background:#fdecea; color:#8c2c20; border:1px solid #f3c6c0;
}

/* ── la barra de arriba ──────────────────────────────────────────────────── */
.barra{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--tinta); color:#fff; padding:10px 18px;
}
.marca{font-size:19px; font-weight:700; letter-spacing:5px; color:var(--oro)}
.pestanas{display:flex; gap:2px; flex:1; flex-wrap:wrap}
.pest{
  background:transparent; border:0; color:#c3ccdb; padding:8px 14px;
  border-radius:6px 6px 0 0; font-size:14px;
}
.pest:hover{background:rgba(255,255,255,.08); color:#fff}
.pest.activa{background:var(--fondo); color:var(--tinta); font-weight:600}
.barra-der{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.barra-der select{
  padding:6px 9px; border-radius:6px; border:1px solid #47566f;
  background:#212c3e; color:#e6ebf3; font:inherit;
}
.quien{font-size:12px; color:#aab6c8}
.chico{
  background:#2c3a51; color:#e6ebf3; border:1px solid #47566f;
  border-radius:6px; padding:6px 11px; font-size:13px;
}
.chico:hover{background:#384965}

.aviso{
  margin:12px 18px 0; padding:10px 13px; border-radius:8px; font-size:14px;
  background:#fdf3d8; color:#7a5610; border:1px solid #efd79a;
}
.vista{padding:16px 18px 8px; max-width:1500px; margin:0 auto}
.generado{
  max-width:1500px; margin:4px auto 26px; padding:0 18px;
  font-size:12px; color:var(--tinta-suave);
}

/* ── tarjetas de cifras ──────────────────────────────────────────────────── */
.tarjetas{
  display:grid; gap:12px; margin-bottom:16px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-left:4px solid var(--azul);
  border-radius:9px; padding:13px 15px; box-shadow:var(--sombra);
}
.tarjeta .cifra{font-size:27px; font-weight:700; line-height:1.15}
.tarjeta .rotulo{font-size:12px; color:var(--tinta-suave); text-transform:uppercase;
                 letter-spacing:.5px; margin-top:2px}
.tarjeta .nota{font-size:12px; color:var(--tinta-suave); margin-top:5px}
.tarjeta.acento-verde{border-left-color:var(--verde)}
.tarjeta.acento-ambar{border-left-color:var(--ambar)}
.tarjeta.acento-rojo{border-left-color:var(--rojo)}
.tarjeta.acento-oro{border-left-color:var(--oro)}
.tarjeta.pulsable{cursor:pointer}
.tarjeta.pulsable:hover{box-shadow:0 2px 4px rgba(16,24,40,.1), 0 8px 20px rgba(16,24,40,.1)}

/* ── cajas y rejillas ────────────────────────────────────────────────────── */
.rejilla-2{display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-bottom:14px}
@media (max-width:980px){ .rejilla-2{grid-template-columns:1fr} }
.caja{
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  padding:14px 16px 16px; box-shadow:var(--sombra); margin-bottom:14px;
}
.caja h2{margin:0 0 12px; font-size:15px; letter-spacing:.2px}
.pie{margin:10px 0 0; font-size:12px; color:var(--tinta-suave)}
.vacio{margin:6px 0; padding:14px; text-align:center; color:var(--tinta-suave);
       font-size:13px; background:#fafbfd; border:1px dashed var(--linea); border-radius:8px}

/* ── embudo ──────────────────────────────────────────────────────────────── */
.embudo{display:flex; flex-direction:column; gap:7px}
.fila-embudo{display:grid; grid-template-columns:150px 1fr 96px; gap:10px; align-items:center}
.fila-embudo .et{font-size:13px}
.fila-embudo .barra-e{background:#eef1f6; border-radius:5px; height:20px; overflow:hidden}
.fila-embudo .barra-e span{display:block; height:100%; border-radius:5px; min-width:2px}
.fila-embudo .cifras{font-size:13px; text-align:right; white-space:nowrap}
.fila-embudo .estancados{color:var(--rojo); font-weight:600}
@media (max-width:620px){ .fila-embudo{grid-template-columns:110px 1fr 84px} }

/* ── pendientes ──────────────────────────────────────────────────────────── */
.lista-pendientes{display:flex; flex-direction:column; gap:7px; max-height:330px; overflow:auto}
.pendiente{
  display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:8px;
  background:#fafbfd; border:1px solid var(--linea); font-size:13px;
}
.pendiente.p1{background:#fdecea; border-color:#f3c6c0}
.pendiente.p2{background:#fdf6e3; border-color:#efdfae}
.pendiente .punto{width:8px; height:8px; border-radius:50%; margin-top:6px; flex:0 0 8px}
.pendiente.p1 .punto{background:var(--rojo)}
.pendiente.p2 .punto{background:var(--ambar)}
.pendiente.p3 .punto{background:var(--tinta-suave)}
.pendiente .texto{flex:1}
.pendiente .ir{background:none; border:0; color:var(--azul); font-size:12px; padding:0}

/* ── tablas ──────────────────────────────────────────────────────────────── */
.tabla-envoltura{overflow-x:auto}
.tabla{width:100%; border-collapse:collapse; font-size:13.5px}
.tabla th{
  text-align:left; padding:8px 10px; border-bottom:2px solid var(--linea);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--tinta-suave); white-space:nowrap; background:#fafbfd;
}
.tabla td{padding:8px 10px; border-bottom:1px solid var(--linea); vertical-align:middle}
.tabla tbody tr:hover{background:#f7f9fc}
.tabla tbody tr.pulsable{cursor:pointer}
.tabla .num{text-align:right; font-variant-numeric:tabular-nums}
.tabla .cod{font-family:"Consolas", monospace; font-size:12.5px; color:var(--tinta-suave)}
.filtros{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.filtros input[type=search], .filtros select{
  padding:7px 10px; border:1px solid var(--linea); border-radius:7px; font:inherit;
}
.filtros input[type=search]{min-width:230px}
.check{font-size:13px; display:flex; gap:6px; align-items:center}
.total{margin-left:auto; font-size:13px; color:var(--tinta-suave)}

/* ── etiquetas ───────────────────────────────────────────────────────────── */
.eti{
  display:inline-block; padding:2px 8px; border-radius:11px; font-size:11.5px;
  font-weight:600; white-space:nowrap; border:1px solid transparent;
}
/* «menor» en rojo significa UNA cosa: falta el consentimiento del tutor. Si el
   rojo saliera también con el consentimiento en regla, dejaría de avisar. */
.eti-menor{background:#fdf0f0; color:#9b2c20; border-color:#f0c8c2}
.eti-menor-ok{background:#f5f0e2; color:#7a6420; border-color:#e6dcbd}
.eti-sin{background:#f1f3f7; color:var(--tinta-suave)}
.dias-rojo{color:var(--rojo); font-weight:700}
.dias-ambar{color:var(--ambar); font-weight:600}

/* ── la ficha ────────────────────────────────────────────────────────────── */
.modal-fondo{
  position:fixed; inset:0; background:rgba(16,22,34,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:28px 14px; overflow:auto; z-index:50;
}
.modal{
  background:var(--blanco); border-radius:12px; width:100%; max-width:900px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.modal-barra{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--linea);
  background:var(--tinta); color:#fff; border-radius:12px 12px 0 0;
}
.modal-barra h2{margin:0; font-size:17px}
.modal-cuerpo{padding:16px 18px 22px}
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px 18px;
       margin-bottom:16px}
.dato .rot{font-size:11px; text-transform:uppercase; letter-spacing:.4px;
           color:var(--tinta-suave)}
.dato .val{font-size:14px}
.modal h3{margin:18px 0 8px; font-size:13.5px; text-transform:uppercase;
          letter-spacing:.5px; color:var(--tinta-suave);
          border-bottom:1px solid var(--linea); padding-bottom:5px}
.privado{
  background:#fafbfd; border:1px dashed var(--linea); border-radius:8px;
  padding:11px 13px; font-size:13px; color:var(--tinta-suave);
}
.linea-tiempo{list-style:none; margin:0; padding:0; font-size:13px}
.linea-tiempo li{padding:6px 0 6px 14px; border-left:2px solid var(--linea); position:relative}
.linea-tiempo li::before{
  content:""; position:absolute; left:-5px; top:12px; width:8px; height:8px;
  border-radius:50%; background:var(--linea);
}