/* ============================================================
   Vistas del personal del colegio (Secretaría, Dirección, Inspectoría,
   Convivencia y UTP). Lo que ya existe en estilo.css no se repite: aquí
   solo van las piezas nuevas (pestañas, sanciones y la lista de alumnos).
   ============================================================ */

/* pestañas dentro de una vista (En vivo / Justificados, por ejemplo) */
.col-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.col-tabs button{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
.col-tabs button.on{background:var(--acc-s);border-color:var(--acc);color:var(--acc);font-weight:600}

/* una sanción de la lista */
.sanc{padding:12px 14px;margin-bottom:8px;border-left:4px solid var(--line)}
.sanc.vigente{border-left-color:var(--rojo)}
.sanc.cumplida{border-left-color:var(--verde)}
.sanc.anulada{border-left-color:var(--gris)}
.sanc .tit{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sanc .tit b{font-size:15px}
.sanc .det{font-size:13px;margin:4px 0 0}
.sanc .pie-sanc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.sanc time{color:var(--mute);font-family:var(--mono);font-size:11.5px;margin-left:auto}

/* filtros de una vista: en el celular ocupan todo el ancho */
.col-filtros{gap:8px;margin-bottom:10px}
.col-filtros .txt{max-width:320px}
@media (max-width:760px){ .col-filtros .txt,.col-filtros select{max-width:none;width:100%} }

/* contadores de anotaciones en la lista de alumnos */
.col-cont{display:inline-flex;gap:4px;align-items:center}
.col-cont span{min-width:26px;text-align:center}

/* elegir a un alumno dentro de un panel */
.col-elegir{max-height:52vh;overflow:auto}
.col-elegir .it{cursor:pointer}

/* avance de una carga larga (la sábana de notas pide una ficha por alumno) */
.col-avance{font-size:13px;color:var(--mute);padding:10px 0}