@font-face{font-family:MA;src:url(assets/MontserratAlternates-Regular.otf);font-weight:400}
@font-face{font-family:MA;src:url(assets/MontserratAlternates-Medium.otf);font-weight:500}
@font-face{font-family:MA;src:url(assets/MontserratAlternates-SemiBold.otf);font-weight:600}
@font-face{font-family:MA;src:url(assets/MontserratAlternates-Bold.otf);font-weight:700}

:root{
  --marino:#233E7C; --azul:#2E7FC2; --cielo:#29ABE2; --verde:#6DBE45; --verde-o:#2e8b57; --ambar:#E08A00; --rojo:#c0392b;
  --fondo:#f4f7fb; --tarjeta:#ffffff; --borde:#e3eaf3; --texto:#1d2733; --suave:#6b7a8c; --tenue:#eef3f9;
  --lateral:#233E7C; --lateral-txt:#cfe1f3; --sombra:0 1px 3px rgba(20,40,80,.06),0 6px 18px rgba(20,40,80,.05);
  /* Acentos de la marca: el cielo manda en los títulos y el verde marca lo que está activo.
     Se redefinen en oscuro porque ahí el marino se aclara y los títulos quedaban del mismo tono
     que el texto: la pantalla se veía de un solo color. */
  --titulo:#233E7C; --acento:#1683b3; --acento2:#4f9b2e; --icono:#8aa4c8;
}
:root[data-tema="oscuro"]{
  --fondo:#132a52; --tarjeta:#1b3666; --borde:#2a4a80; --texto:#eaf2fc; --suave:#a9c1df; --tenue:#21406f;
  --lateral:#0f2347; --lateral-txt:#b9d3f0; --marino:#cfe1f7; --sombra:0 1px 3px rgba(0,0,0,.25);
  --titulo:#5cc8f5; --acento:#5cc8f5; --acento2:#8ed36a; --icono:#7fa6d8;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:MA,system-ui,sans-serif;background:var(--fondo);color:var(--texto);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
.oculto{display:none!important}

/* acceso */
.acceso{min-height:100%;display:grid;place-items:center;padding:24px;background:linear-gradient(165deg,#233E7C 0%,#2E7FC2 58%,#29ABE2 100%)}
.acceso-caja{background:#fff;color:#1d2733;width:100%;max-width:380px;border-radius:20px;padding:30px 28px;box-shadow:0 20px 50px rgba(10,30,70,.35)}
.acceso-caja img{height:40px;display:block;margin:0 auto 6px}
.acceso-caja h1{font-size:17px;text-align:center;color:#233E7C;margin:6px 0 20px;font-weight:600}
label.campo{display:block;font-size:12px;color:var(--suave);font-weight:600;margin:0 0 12px}
.acceso-caja label.campo{color:#6b7a8c}
label.campo input,label.campo select{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1.4px solid #cfdcea;border-radius:10px;background:#fff;color:#1d2733}
label.campo input:focus,label.campo select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(46,127,194,.18)}
.btn{background:var(--azul);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.07)} .btn:disabled{opacity:.5;cursor:default}
.btn.bloque{width:100%}
.btn.sec{background:var(--tenue);color:var(--azul)} :root[data-tema="oscuro"] .btn.sec{color:#cfe1f7}
.btn.peligro{background:#fdecea;color:var(--rojo)}
.btn.chico{padding:6px 12px;font-size:12px}
.error{color:var(--rojo);font-size:12.5px;min-height:18px;margin:4px 0 8px}
.nota{font-size:12px;color:var(--suave);line-height:1.5}

/* estructura */
.app{display:flex;min-height:100%}
/* El menú se queda fijo, pero con su propio desplazamiento: sin esto, en pantallas bajas las
   últimas opciones quedaban fuera y no había forma de llegar a ellas. */
aside.lateral{width:232px;flex:none;background:var(--lateral);padding:16px 12px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
aside.lateral::-webkit-scrollbar{width:6px}
aside.lateral::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.marca{background:#fff;border-radius:12px;padding:8px 10px;margin-bottom:14px}
.marca img{width:100%;display:block}
.lateral .sec-t{color:var(--acento);font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;padding:14px 10px 4px}
.lateral a{display:flex;align-items:center;gap:10px;color:var(--lateral-txt);padding:9px 10px;border-radius:9px;text-decoration:none;cursor:pointer;font-weight:500}
.lateral a:hover{background:rgba(255,255,255,.07)}
.lateral a.act{background:var(--azul);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--acento2)}
.lateral a svg{width:18px;height:18px;flex:none;color:var(--icono);transition:color .15s ease}
.lateral a:hover svg{color:var(--acento)}
.lateral a.act svg{color:#fff}
.lateral .insignia{margin-left:auto;background:var(--verde);color:#fff;border-radius:10px;font-size:10.5px;font-weight:700;padding:1px 7px}
.lateral .pie{margin-top:auto;color:#8fb2da;font-size:11.5px;padding:10px;border-top:1px solid rgba(255,255,255,.1)}
.lateral .pie b{color:#fff;display:block;font-size:12.5px}
.lateral .pie a{padding:6px 0;font-size:12px}
main{flex:1;min-width:0;padding:20px 26px 40px}
.barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.barra h2{margin:0;font-size:22px;color:var(--titulo);font-weight:700;margin-right:auto;letter-spacing:-.2px}
.barra h2::after{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--acento2);margin-top:6px}
.barra select,.barra input[type=date],.barra input[type=search]{padding:8px 11px;border:1.3px solid var(--borde);border-radius:9px;background:var(--tarjeta);color:var(--texto)}
.menu-movil{display:none;background:none;border:0;color:var(--marino);padding:4px}
.estado-op{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:20px;padding:5px 11px;background:var(--tenue);color:var(--suave)}
.estado-op.on{background:#eaf6e2;color:#3f8a1f} .estado-op i{width:8px;height:8px;border-radius:50%;background:currentColor}
.sinlinea{background:#e2f5fc;color:#155f86;border-left:3px solid var(--cielo);border-radius:10px;padding:8px 12px;font-size:12.5px;margin-bottom:14px}
:root[data-tema="oscuro"] .sinlinea{background:#1d4d6d;color:#d6f1fb}

/* tarjetas */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:14px 16px;box-shadow:var(--sombra);text-align:center}
.kpi b{display:block;font-size:28px;font-weight:700;color:var(--marino);line-height:1.1}
.kpi b.v{color:var(--verde-o)} .kpi b.a{color:var(--azul)} .kpi b.c{color:var(--verde)}
.kpi small{color:var(--suave);font-size:12px}
.kpi .det{font-size:11.5px;color:var(--suave);margin-top:6px}
.rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:16px 18px;box-shadow:var(--sombra);min-width:0}
.tarjeta h3{margin:0 0 4px;font-size:14.5px;color:var(--titulo);font-weight:700}
.tarjeta .expl{font-size:12.5px;color:var(--suave);margin:0 0 12px;line-height:1.5}
.grafica svg{width:100%;height:auto;display:block}
.grafica text{fill:var(--suave);font-family:MA;font-size:10px}
.vacio{padding:26px;text-align:center;color:var(--suave);font-size:13px}

/* tablas */
.tabla-cont{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;overflow:auto;box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--tenue);color:var(--acento);text-align:left;font-size:11.5px;font-weight:700;padding:10px 12px;white-space:nowrap;position:sticky;top:0;text-transform:uppercase;letter-spacing:.05em}
td{padding:9px 12px;border-top:1px solid var(--borde);vertical-align:middle}
tr.clic{cursor:pointer} tr.clic:hover td{background:var(--tenue)}
td.num,th.num{text-align:center;font-variant-numeric:tabular-nums}
.pill{display:inline-block;border-radius:10px;padding:2px 9px;font-weight:600;font-size:11.5px;white-space:nowrap}
.pill.ok{background:#eaf6e2;color:#3f8a1f} .pill.azul{background:#e5f0fa;color:var(--azul)} .pill.cielo{background:#e2f5fc;color:#1683b3}
.pill.marino{background:#e4e9f4;color:#233E7C} .pill.amb{background:#e2f5fc;color:#1683b3}
.pill.rojo{background:#fdecea;color:var(--rojo)} .pill.gris{background:var(--tenue);color:var(--suave)}
:root[data-tema="oscuro"] .pill.marino{background:#2a4a80;color:#e4ecf8} :root[data-tema="oscuro"] .pill.ok{background:#24502f;color:#b9e3a0}
:root[data-tema="oscuro"] .pill.cielo,:root[data-tema="oscuro"] .pill.amb{background:#1d4d6d;color:#aee4f8} :root[data-tema="oscuro"] .pill.azul{background:#23508a;color:#d3e6fa}
.pend{color:#1683b3;font-weight:600} .tachado{text-decoration:line-through;color:var(--suave)}
.conteo{font-size:12px;color:var(--suave);margin:8px 2px;text-align:center}

/* panel de edición */
.velo{position:fixed;inset:0;background:rgba(10,25,55,.4);z-index:20}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--tarjeta);z-index:21;box-shadow:-10px 0 30px rgba(0,0,0,.2);display:flex;flex-direction:column}
.cajon header{padding:18px 20px;border-bottom:1px solid var(--borde)} .cajon header h3{margin:0;color:var(--titulo);font-size:16px}
.cajon header small{color:var(--suave)}
.cajon .cuerpo{padding:16px 20px;overflow:auto;flex:1}
.cajon footer{padding:14px 20px;border-top:1px solid var(--borde);display:flex;gap:10px;justify-content:flex-end}
.cajon label.campo input,.cajon label.campo select{background:var(--tarjeta);color:var(--texto);border-color:var(--borde)}
.cajon .aviso-pend{font-size:11.5px;color:#1683b3;margin-top:4px}
.banda{background:#eef6fd;border-left:3px solid var(--azul);border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--texto);margin-bottom:14px}
:root[data-tema="oscuro"] .banda{background:#21406f}
.lista-avisos{display:grid;gap:10px}
.avi{background:var(--tarjeta);border:1px solid var(--borde);border-left:4px solid var(--azul);border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start}
.avi.conflicto{border-left-color:var(--cielo)} .avi.rechazado,.avi.error{border-left-color:var(--rojo)} .avi.aplicado{border-left-color:var(--verde-o)}
.avi.visto{opacity:.6} .avi div{flex:1} .avi b{color:var(--marino)} .avi p{margin:4px 0 0;font-size:12.5px;color:var(--suave);line-height:1.45}
.avi time{font-size:11px;color:var(--suave)}
.tabs{display:flex;gap:6px;margin-bottom:12px} .tabs button{border:1.3px solid var(--borde);background:var(--tarjeta);color:var(--texto);border-radius:9px;padding:6px 14px;cursor:pointer}
.tabs button.act{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}
.clave-temp{font-family:ui-monospace,Menlo,monospace;background:#fff8e6;color:#1d2733;border-radius:8px;padding:10px;font-size:15px;text-align:center;margin:10px 0;user-select:all}

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .rejilla{grid-template-columns:1fr}
  aside.lateral{position:fixed;left:0;top:0;z-index:30;transform:translateX(-100%);transition:transform .2s}
  aside.lateral.abierto{transform:none;box-shadow:10px 0 30px rgba(0,0,0,.3)}
  .menu-movil{display:block} main{padding:14px 14px 30px}
}

.cols-menu{position:relative;display:inline-block}
.cols-panel{position:absolute;right:0;top:110%;z-index:15;background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;box-shadow:0 12px 30px rgba(10,30,70,.18);padding:10px 14px;min-width:220px;max-height:60vh;overflow:auto}
.cols-panel label{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:12.5px;color:var(--texto);cursor:pointer}
.cols-panel .nota{margin-bottom:6px}

/* indicadores: cada uno con su tono de la paleta */
.kpi{border-top:4px solid var(--azul)}
.kpi.k-salidas{background:linear-gradient(160deg,#e2f5fc,#ffffff 70%);border-top-color:var(--cielo)}
.kpi.k-tiempo{background:linear-gradient(160deg,#e4e9f4,#ffffff 70%);border-top-color:var(--marino)}
.kpi.k-rapidas{background:linear-gradient(160deg,#eaf6e2,#ffffff 70%);border-top-color:var(--verde)}
.kpi.k-ingresos{background:linear-gradient(160deg,#e5f0fa,#ffffff 70%);border-top-color:var(--azul)}
:root[data-tema="oscuro"] .kpi.k-salidas{background:linear-gradient(160deg,#1d4d6d,#1b3666 75%)}
:root[data-tema="oscuro"] .kpi.k-tiempo{background:linear-gradient(160deg,#2a3f73,#1b3666 75%);border-top-color:#8fa7d6}
:root[data-tema="oscuro"] .kpi.k-rapidas{background:linear-gradient(160deg,#24502f,#1b3666 75%)}
:root[data-tema="oscuro"] .kpi.k-ingresos{background:linear-gradient(160deg,#23508a,#1b3666 75%)}

table.compacta td{white-space:nowrap}

.barra.filtros{margin-top:-8px}
.barra.filtros select{padding:7px 10px;border:1.3px solid var(--borde);border-radius:9px;background:var(--tarjeta);color:var(--texto);font-size:12.5px;max-width:220px}

/* menú colapsable */
aside.lateral{transition:width .18s ease}
.marca{position:relative} .marca .logo-mini{display:none;width:34px;margin:0 auto}
.colapsar{align-self:flex-end;margin:-6px 0 4px;background:rgba(255,255,255,.08);border:0;color:var(--lateral-txt);border-radius:8px;width:28px;height:24px;cursor:pointer;display:grid;place-items:center}
.colapsar:hover{background:rgba(255,255,255,.16)} .colapsar svg{width:18px;height:18px;transition:transform .18s}
.app.mini aside.lateral{width:70px;padding:16px 8px}
.app.mini .marca{padding:6px} .app.mini .marca .logo-grande{display:none} .app.mini .marca .logo-mini{display:block}
.app.mini .colapsar{align-self:center} .app.mini .colapsar svg{transform:rotate(180deg)}
.app.mini .lateral .txt,.app.mini .lateral .sec-t{display:none}
.app.mini .lateral a{justify-content:center;padding:10px 0;position:relative}
.app.mini .lateral .insignia{position:absolute;top:2px;right:6px;margin:0;font-size:9px;padding:0 5px}
.app.mini .lateral .sec-t+a,.app.mini #menuAdmin{margin-top:6px}
.app.mini .lateral .pie b,.app.mini .lateral .pie span{display:none}
.app.mini .lateral .pie a{font-size:0;justify-content:center}
.app.mini .lateral .pie a::before{font-size:16px}
.app.mini .lateral .pie #bTema::before{content:"◐"} .app.mini .lateral .pie #bSalir::before{content:"⏻"}
@media (max-width:900px){.colapsar{display:none}}
.filtros-en-linea{display:contents}
.filtros-en-linea select{padding:7px 10px;border:1.3px solid var(--borde);border-radius:9px;background:var(--tarjeta);color:var(--texto);font-size:12.5px;max-width:220px}

/* Contadores grandes para dirección (punto 4) — un color por tarjeta */
/* Tablero: los tres indicadores en una sola fila y a la vista de golpe. La altura sale del alto
   de la ventana en vez de ser fija, para que no haya que desplazar la pantalla ni en un portátil
   bajo ni en el celular del director. */
.contadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.contador { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.06);
  min-height: 150px; height: clamp(150px, calc(100dvh - 240px), 300px); }
.contador .c-relleno { position: absolute; left: 0; right: 0; bottom: 0; transition: height .6s ease; }
.contador .c-cuerpo { position: relative; padding: 16px 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; }
.contador .c-num { font-size: clamp(38px, 5.2vw, 64px); font-weight: 800; line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.contador .c-pct { font-size: .32em; font-weight: 700; opacity: .75; }
.contador .c-tit { font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; margin-top: 4px; }
.contador .c-sub { font-size: clamp(11.5px, 1vw, 13.5px); margin-top: 2px; opacity: .8; line-height: 1.35; }
.barra-dash { margin-top: -6px; }

/* Celular: las tres en columna, apaisadas y bajas, para que entren juntas sin desplazar. */
@media (max-width: 720px) {
  .contadores { grid-template-columns: 1fr; gap: 10px; }
  .contador { height: auto; min-height: 0; border-radius: 16px; }
  .contador .c-cuerpo { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 12px 16px; }
  .contador .c-num { font-size: 40px; grid-row: 1 / 3; }
  .contador .c-pct { font-size: .3em; }
  .contador .c-tit { font-size: 15px; margin: 0; align-self: end; }
  .contador .c-sub { font-size: 12px; align-self: start; }
}
/* Dentro del colegio — azul */
.c-dentro  { background: #e6f5fc; } .c-dentro .c-num, .c-dentro .c-tit { color: #0f5f86; } .c-dentro .c-sub { color: #3a7f9f; } .c-dentro .c-relleno { background: rgba(40,171,225,.35); }
/* Ingresaron — verde */
.c-ingreso { background: #eef7e6; } .c-ingreso .c-num, .c-ingreso .c-tit { color: #3d6b1f; } .c-ingreso .c-sub { color: #5c8a3a; } .c-ingreso .c-relleno { background: rgba(115,191,68,.35); }
/* Salieron — naranja */
.c-salida  { background: #fdf1e0; } .c-salida .c-num, .c-salida .c-tit { color: #9a5b00; } .c-salida .c-sub { color: #b8791f; } .c-salida .c-relleno { background: rgba(245,158,11,.35); }
/* Personal docente — morado */
.c-docente { background: #efedfb; } .c-docente .c-num, .c-docente .c-tit { color: #3f379e; } .c-docente .c-sub { color: #6a62c0; } .c-docente .c-relleno { background: rgba(120,110,220,.30); }



/* Brazaletes: el alta ocupa el ancho de una columna de lectura y el campo del código destaca,
   porque es donde vive el foco mientras se pasan brazaletes uno tras otro. */
/* Brazaletes: dos pasos en una sola caja estrecha. Se busca al alumno y se pasa su brazalete;
   nada más en pantalla, porque esto se usa de pie y con el lector en la mano. */
.brz-caja{background:var(--tarjeta);border:1px solid var(--borde);border-radius:16px;box-shadow:var(--sombra);
  max-width:620px;padding:18px 20px 20px}
.brz-pasos{display:flex;gap:8px;margin-bottom:16px;font-size:11.5px;font-weight:700;letter-spacing:.03em}
.brz-pasos span{flex:1;padding:7px 10px;border-radius:9px;background:var(--tenue);color:var(--suave);text-align:center}
.brz-pasos span.act{background:var(--azul);color:#fff}
.brz-pasos span.listo{background:transparent;color:var(--acento2);border:1.3px solid var(--acento2)}
.brz-grande input{font-size:17px;padding:13px 14px}
.brz-grande input::placeholder{font-size:13.5px}
.brz-sug{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.brz-op{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--tenue);border:1.3px solid transparent;border-radius:10px;padding:9px 12px;color:var(--texto)}
.brz-op b{flex:1;font-size:14px}
.brz-op small{color:var(--suave);font-size:12px}
.brz-op code{font-size:12px;color:var(--acento)}
.brz-op:hover,.brz-op.marcado{border-color:var(--azul);background:var(--tarjeta)}
.brz-elegido{display:flex;align-items:center;gap:12px;background:var(--tenue);border-radius:10px;padding:10px 14px;margin-bottom:14px}
.brz-elegido div{flex:1;min-width:0}
.brz-elegido b{display:block;font-size:15px;color:var(--titulo)}
.brz-elegido small{color:var(--suave);font-size:12px}
.brz-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.brz-hecho{margin-top:14px;padding-top:12px;border-top:1px solid var(--borde);font-size:13px}