:root{
  --azul-900:#00335A; --azul-700:#004C7A; --azul:#005F95; --azul-400:#2E8BC9; --azul-100:#E4EFF7;
  --verde:#51B747; --verde-700:#3A8F33; --verde-100:#E8F5E6;
  --guinda:#9F2241;
  --tinta:#16232E; --gris:#5C6B76; --linea:#D6DEE5; --papel:#F5F7F9; --blanco:#fff;
  --sombra:0 1px 2px rgba(0,50,90,.06),0 8px 24px rgba(0,50,90,.07);
  --radio:10px;
  --ui:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--ui);color:var(--tinta);background:var(--papel);font-size:15px;line-height:1.5}
h1,h2,h3{margin:0;line-height:1.25;font-weight:700}

/* ---------- encabezado ---------- */
.barra{height:5px;background:linear-gradient(90deg,var(--azul-900) 0%,var(--azul) 45%,var(--verde) 100%)}
.cabecera{background:var(--blanco);border-bottom:1px solid var(--linea)}
.cabecera .interior{max-width:1180px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;gap:16px}
.cabecera img{height:46px;width:auto}
.cabecera .sep{width:1px;height:40px;background:var(--linea)}
.cabecera h1{font-size:19px;color:var(--azul-900);letter-spacing:-.2px}
.cabecera p{margin:2px 0 0;font-size:12.5px;color:var(--gris)}
.cabecera .der{margin-left:auto;text-align:right;font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.09em}

/* ---------- pasos ---------- */
.pasos{max-width:1180px;margin:0 auto;padding:18px 22px 0;display:flex;gap:6px;flex-wrap:wrap}
.paso{flex:1 1 150px;min-width:130px;padding:9px 12px;border-radius:8px;background:var(--blanco);
  border:1px solid var(--linea);font-size:12.5px;color:var(--gris);display:flex;gap:9px;align-items:center}
.paso b{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--azul-100);
  color:var(--azul);font-size:11.5px;flex:none}
.paso.activo{border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul);color:var(--azul-900);font-weight:600}
.paso.activo b{background:var(--azul);color:#fff}
.paso.hecho b{background:var(--verde);color:#fff}

/* ---------- estructura ---------- */
main{max-width:1180px;margin:0 auto;padding:20px 22px 70px}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:22px;margin-bottom:18px}
.tarjeta > h2{font-size:16px;color:var(--azul-900);margin-bottom:4px}
.tarjeta > h2 + p{margin:0 0 18px;color:var(--gris);font-size:13.5px}
.rejilla{display:grid;gap:14px}
.c2{grid-template-columns:repeat(2,1fr)} .c3{grid-template-columns:repeat(3,1fr)} .c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.c2,.c3,.c4{grid-template-columns:1fr}}

label{display:block;font-size:12px;font-weight:600;color:var(--azul-900);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.05em}
input,select{width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:7px;font:inherit;
  font-size:14px;background:var(--blanco);color:var(--tinta)}
input:focus,select:focus{outline:2px solid var(--azul-400);outline-offset:1px;border-color:var(--azul-400)}
.ayuda{font-size:12px;color:var(--gris);margin:5px 0 0}

button{font:inherit;font-size:14px;font-weight:600;padding:10px 18px;border-radius:7px;border:1px solid transparent;
  cursor:pointer;background:var(--azul);color:#fff;transition:background .15s}
button:hover{background:var(--azul-700)}
button:focus-visible{outline:2px solid var(--azul-400);outline-offset:2px}
button.sec{background:var(--blanco);color:var(--azul);border-color:var(--linea)}
button.sec:hover{background:var(--azul-100)}
button.verde{background:var(--verde-700)} button.verde:hover{background:#2f7a29}
button.mini{padding:6px 11px;font-size:12.5px}
button:disabled{opacity:.5;cursor:not-allowed}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--linea)}
.acciones .empuje{margin-left:auto}

/* ---------- avisos ---------- */
.aviso{border-radius:8px;padding:12px 15px;font-size:13.5px;margin:14px 0;border:1px solid}
.aviso.info{background:var(--azul-100);border-color:#BBD8EC;color:var(--azul-900)}
.aviso.bien{background:var(--verde-100);border-color:#BFE3B9;color:#245C1F}
.aviso.mal{background:#FDECEF;border-color:#F0C4CD;color:var(--guinda)}
.aviso ul{margin:7px 0 0 18px;padding:0}
.aviso b{display:block;margin-bottom:3px}

/* ---------- filas de docentes ---------- */
.fila-doc{display:grid;grid-template-columns:34px 1fr 240px 40px;gap:10px;align-items:end;margin-bottom:10px}
.fila-doc .num{height:38px;display:grid;place-items:center;background:var(--azul-100);color:var(--azul);
  border-radius:7px;font-weight:700;font-size:13px}
.fila-doc .quitar{height:38px;background:var(--blanco);color:var(--guinda);border:1px solid var(--linea);
  border-radius:7px;font-size:17px;line-height:1;padding:0}
.fila-doc .quitar:hover{background:#FDECEF}
@media(max-width:820px){.fila-doc{grid-template-columns:34px 1fr 40px}.fila-doc select{grid-column:2/4}}

/* ---------- medidor de carga ---------- */
.medidores{display:grid;gap:9px;margin-top:6px}
.medidor{display:grid;grid-template-columns:1fr 210px 96px;gap:12px;align-items:center;font-size:13.5px}
.medidor .nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.medidor .nom small{display:block;font-weight:400;color:var(--gris);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.pista{height:9px;background:#EAEFF3;border-radius:99px;position:relative;overflow:hidden}
.pista i{position:absolute;inset:0 auto 0 0;background:var(--azul-400);border-radius:99px;transition:width .2s}
.pista.ok i{background:var(--verde)} .pista.mal i{background:var(--guinda)}
.medidor .cifra{text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--gris)}
.medidor .cifra b{color:var(--tinta)}
.medidor.ok .cifra b{color:var(--verde-700)}
.medidor.mal .cifra b{color:var(--guinda)}
@media(max-width:820px){.medidor{grid-template-columns:1fr 96px}.pista{grid-column:1/3}}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{border:1px solid var(--linea);padding:7px 9px;text-align:left;vertical-align:top}
th{background:var(--azul-100);color:var(--azul-900);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.tabla-uac td:first-child{width:46%}
.tabla-uac select{padding:6px 8px;font-size:13px}
.hh{display:inline-block;min-width:26px;padding:2px 7px;border-radius:99px;background:var(--azul-100);
  color:var(--azul-900);font-size:11.5px;font-weight:700;text-align:center}
.sinref{color:var(--gris);font-size:11.5px}
.grupo-bloque{margin-bottom:22px}
.grupo-bloque h3{font-size:14px;color:var(--azul-900);margin-bottom:8px;display:flex;align-items:center;gap:9px}
.etiq{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;
  border-radius:99px;background:var(--verde-100);color:var(--verde-700)}
.etiq.gris{background:#EEF2F5;color:var(--gris)}
.etiq.azul{background:var(--azul-100);color:var(--azul)}

/* ---------- horario ---------- */
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--linea);padding-bottom:12px}
.pestanas button{background:var(--blanco);color:var(--gris);border:1px solid var(--linea);font-weight:600;
  padding:7px 14px;font-size:13px}
.pestanas button.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.horario{font-size:12px;table-layout:fixed}
.horario th:first-child,.horario td:first-child{width:88px;text-align:center;background:#F8FAFB;
  font-weight:600;color:var(--azul-900);font-size:11px;vertical-align:middle}
.horario td{height:52px;padding:5px 6px}
.horario .uac{font-weight:600;display:block;line-height:1.25}
.horario .quien{color:var(--gris);font-size:11px;display:block;margin-top:2px}
.horario .receso{background:repeating-linear-gradient(45deg,#F3F6F8,#F3F6F8 8px,#EAEFF3 8px,#EAEFF3 16px);
  text-align:center;font-weight:700;color:var(--gris);letter-spacing:.22em;font-size:11px;vertical-align:middle}
.horario td.larga{background:var(--verde-100)}
.horario td.ref{box-shadow:inset 3px 0 0 var(--verde)}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--gris);margin-top:10px}
.leyenda span{display:flex;align-items:center;gap:6px}
.muestra{width:13px;height:13px;border-radius:3px;border:1px solid var(--linea)}
.oculto{display:none!important}
.pie{max-width:1180px;margin:0 auto;padding:0 22px 40px;font-size:12px;color:var(--gris)}