/* =========================================================
   Hoja de estilos propia del sistema escolar.
   Esquema: encabezado fijo, menú lateral, tarjetas blancas
   sobre fondo gris azulado. Escrita desde cero.
   ========================================================= */
:root {
  --c-primario: #2f55d4;
  --c-primario-osc: #1f3fa8;
  --c-titulo: #0f2a5f;
  --c-texto: #3d4656;
  --c-tenue: #7a869a;
  --c-fondo: #f3f6fb;
  --c-borde: #e4e9f2;
  --c-activo: #eef2fd;
  --sombra: 0 2px 18px rgba(15, 42, 95, .08);
  --ancho-menu: 270px;
  --alto-header: 62px;
}
* { box-sizing: border-box; }
body {
  font-family: "Open Sans", system-ui, sans-serif; background: var(--c-fondo); color: var(--c-texto);
  font-size: .94rem;
}
h1, h2, h3, h4, h5, h6, .titulo { font-family: "Nunito", sans-serif; color: var(--c-titulo); }
a { color: var(--c-primario); text-decoration: none; }
a:hover { color: var(--c-primario-osc); }

/* ---------- Encabezado ---------- */
.encabezado {
  position: fixed; top: 0; left: 0; right: 0; height: var(--alto-header); z-index: 997;
  background: #fff; box-shadow: 0 1px 12px rgba(15, 42, 95, .07);
  display: flex; align-items: center; padding: 0 20px;
}
.encabezado .marca { display: flex; align-items: center; gap: 10px; width: calc(var(--ancho-menu) - 40px); }
.encabezado .marca img { height: 40px; }
.encabezado .marca span { font-family: "Nunito"; font-weight: 800; color: var(--c-titulo); font-size: 1.05rem; line-height: 1.1; }
.btn-menu { font-size: 30px; cursor: pointer; color: var(--c-titulo); }
.encabezado .perfil { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--c-titulo); }
.encabezado .perfil .avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--c-activo); color: var(--c-primario);
  display: grid; place-items: center; font-weight: 700; font-family: "Poppins";
}
.encabezado .sede-chip { font-size: .78rem; background: var(--c-activo); color: var(--c-primario); padding: 3px 10px; border-radius: 20px; }

/* ---------- Menú lateral ---------- */
.menu {
  position: fixed; top: var(--alto-header); left: 0; bottom: 0; width: var(--ancho-menu); z-index: 996;
  background: #fff; padding: 18px 16px; overflow-y: auto; box-shadow: 0 0 18px rgba(15, 42, 95, .06);
  transition: left .25s;
}
.menu .seccion { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #9aa5b8; margin: 14px 10px 6px; font-weight: 700; }
.menu .item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 6px; margin-bottom: 3px;
  color: var(--c-titulo); font-family: "Nunito"; font-weight: 700; font-size: .95rem; cursor: pointer;
}
.menu .item i { font-size: 1.2rem; color: #8994a8; }
.menu a.item:hover, .menu .grupo > .item:hover { background: var(--c-activo); color: var(--c-primario); }
.menu a.item:hover i { color: var(--c-primario); }
.menu a.item.activo { background: var(--c-activo); color: var(--c-primario); }
.menu a.item.activo i { color: var(--c-primario); }
.menu .sub { padding-left: 22px; }
.menu .sub a.item { font-weight: 600; font-size: .9rem; padding: 8px 14px; }
.menu .item .fase { margin-left: auto; font-size: .62rem; background: #eef1f6; color: #8b95a7; padding: 2px 6px; border-radius: 10px; }
.menu .item.inactivo { opacity: .55; pointer-events: none; }

/* ---------- Contenido ---------- */
.principal { margin-top: var(--alto-header); margin-left: var(--ancho-menu); padding: 24px 28px; min-height: calc(100vh - var(--alto-header)); transition: margin .25s; }
.pie { margin-left: var(--ancho-menu); padding: 16px 28px; font-size: .8rem; color: var(--c-tenue); border-top: 1px solid var(--c-borde); }
body.menu-cerrado .menu { left: calc(-1 * var(--ancho-menu)); }
body.menu-cerrado .principal, body.menu-cerrado .pie { margin-left: 0; }
@media (max-width: 1199px) {
  .menu { left: calc(-1 * var(--ancho-menu)); }
  body.menu-abierto .menu { left: 0; }
  .principal, .pie { margin-left: 0; padding: 18px 14px; }
  .encabezado .marca { width: auto; }
  .encabezado .marca span { display: none; }
}

.titulo-pagina { margin-bottom: 18px; }
.titulo-pagina h1 { font-size: 1.5rem; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
.titulo-pagina .migas { font-size: .82rem; color: var(--c-tenue); margin-top: 2px; }
.titulo-pagina .migas a { color: var(--c-tenue); }

/* ---------- Tarjetas ---------- */
.card { border: 0; border-radius: 8px; box-shadow: var(--sombra); margin-bottom: 24px; }
.card-header { background: #fff; border-bottom: 1px solid var(--c-borde); font-family: "Nunito"; font-weight: 800; color: var(--c-titulo); padding: 14px 20px; }
.card-body { padding: 20px; }
.card-title { font-family: "Nunito"; font-weight: 800; color: var(--c-titulo); font-size: 1.05rem; }

.kpi { display: flex; align-items: center; gap: 16px; }
.kpi .icono { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; flex-shrink: 0; }
.kpi .valor { font-family: "Nunito"; font-size: 1.5rem; font-weight: 800; color: var(--c-titulo); line-height: 1.1; }
.kpi .etiqueta { font-size: .82rem; color: var(--c-tenue); }
.kpi .sub { font-size: .82rem; }
.ic-azul { background: #e7edff; color: #2f55d4; } .ic-verde { background: #e0f8e9; color: #2eca6a; }
.ic-ambar { background: #fff4dc; color: #e09a00; } .ic-rojo { background: #fde8e8; color: #dc3545; }

/* ---------- Tablas ---------- */
.table { font-size: .9rem; }
.table thead th { font-family: "Nunito"; font-weight: 800; color: var(--c-titulo); text-transform: uppercase; font-size: .76rem; letter-spacing: .03em; border-bottom-width: 1px; white-space: nowrap; }
.table td { vertical-align: middle; }
.btn-accion { font-size: .82rem; }
.vacio { text-align: center; color: var(--c-tenue); padding: 40px 10px; }
.vacio i { font-size: 3rem; color: #d3dae6; display: block; margin-bottom: 8px; }

/* ---------- Formularios ---------- */
.form-label { font-weight: 600; font-size: .85rem; color: var(--c-titulo); margin-bottom: 4px; }
.req::after { content: " *"; color: #dc3545; }
.form-control, .form-select { font-size: .92rem; border-color: #d8dfeb; }
.form-control:focus, .form-select:focus { border-color: var(--c-primario); box-shadow: 0 0 0 .2rem rgba(47, 85, 212, .12); }
.btn-primary { background: var(--c-primario); border-color: var(--c-primario); }
.btn-primary:hover { background: var(--c-primario-osc); border-color: var(--c-primario-osc); }

/* ---------- Insignias y semáforo ---------- */
.badge { font-weight: 600; }
.sem { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.sem::before { content: ""; width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.sem-verde::before { background: #2eca6a; } .sem-amarillo::before { background: #f0b400; } .sem-rojo::before { background: #dc3545; }

/* ---------- Escáner ---------- */
.lector { max-width: 520px; margin: 0 auto; }
#reader { border-radius: 8px; overflow: hidden; }
.resultado-acceso { border-radius: 10px; overflow: hidden; }
.resultado-acceso .cabeza { padding: 18px; color: #fff; display: flex; gap: 16px; align-items: center; }
.resultado-acceso .cabeza img, .resultado-acceso .cabeza .sinfoto { width: 92px; height: 92px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 40px; }
.bg-sem-verde { background: #1fa65a; } .bg-sem-amarillo { background: #d99a00; } .bg-sem-rojo { background: #c62f3d; }

/* ---------- Pasos del asistente de inscripción ---------- */
.pasos { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.pasos .paso { padding: 6px 14px; border-radius: 20px; background: #eef1f6; color: #8b95a7; font-weight: 700; font-size: .82rem; }
.pasos .paso.activo { background: var(--c-primario); color: #fff; }

/* ---------- Login ---------- */
.login-fondo { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #eef2fd 0%, #f3f6fb 60%); }
.login-caja { width: 100%; max-width: 410px; }
.login-fondo.con-banner { background-size: cover; background-position: center; }
.login-fondo.con-banner h4 { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.login-fondo.con-banner .text-center > img { background: #fff; border-radius: 12px; padding: 6px; }

/* ---------- Credencial ---------- */
.credencial {
  width: 86mm; height: 54mm; border-radius: 3mm; overflow: hidden; background: #fff; position: relative;
  box-shadow: 0 2px 14px rgba(0,0,0,.18); font-family: "Nunito"; display: flex;
}
.credencial .franja { flex-shrink: 0; width: 9mm; background: linear-gradient(180deg, var(--c-primario), var(--c-titulo)); }
.credencial .cuerpo { flex: 1; padding: 3mm 4mm; display: flex; gap: 3mm; }
.credencial .foto { width: 22mm; height: 28mm; border-radius: 2mm; object-fit: cover; background: #eef1f6; display: grid; place-items: center; color: #b7c0cf; font-size: 30px; }
.credencial .inst { font-size: 7.5pt; font-weight: 800; color: var(--c-titulo); line-height: 1.1; }
.credencial .nom { font-size: 9.5pt; font-weight: 800; color: #111; line-height: 1.1; margin-top: 2mm; }
.credencial .dato { font-size: 7pt; color: #444; }
.credencial .qr { width: 21mm; height: 21mm; }
@media print {
  .no-imprimir { display: none !important; }
  .encabezado, .menu, .pie { display: none !important; }
  .principal { margin: 0; padding: 0; }
  body { background: #fff; }
}

/* Banner de efectivo en cajas (Dirección) */
.efectivo-banner { background: linear-gradient(120deg, #1d3a9e, #2f55d4 60%, #4f74ec); color: #fff; border: 0; }
.efectivo-banner .etq { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.efectivo-banner .total { font-family: "Nunito"; font-weight: 800; font-size: 2.1rem; line-height: 1.1; }
.efectivo-banner .total2 { font-family: "Nunito"; font-weight: 800; font-size: 1.4rem; }
.efectivo-banner .sub { font-size: .8rem; opacity: .85; }
.efectivo-banner .sede-chip-ef { background: rgba(255,255,255,.12); border-radius: 8px; padding: 8px 10px; color: #fff; height: 100%; }
.efectivo-banner .sede-chip-ef:hover { background: rgba(255,255,255,.2); }
.efectivo-banner .sede-chip-ef .n { font-size: .78rem; opacity: .85; }
.efectivo-banner .sede-chip-ef .v { font-family: "Nunito"; font-weight: 800; font-size: 1.15rem; }
.efectivo-banner .sede-chip-ef .d { font-size: .72rem; opacity: .8; }
.efectivo-banner .sede-chip-ef .pend { color: #ffe08a; opacity: 1; }