/* estilos.css — hoja única del sistema. Sin frameworks ni fuentes externas:
   el sistema tiene que verse igual sin internet, en la PC del estudio. */

:root {
    --fondo:        #fbf7f9;
    --superficie:   #ffffff;
    --superficie-2: #fdf6f9;
    --borde:        #efe3e8;
    --borde-fuerte: #e0cdd6;

    --texto:        #33272c;
    --texto-suave:  #75626a;
    --texto-tenue:  #836c78;

    --acento:       #a8557a;
    --acento-claro: #fbeaf2;
    --acento-oscuro:#874060;

    /* Barra superior: el rosa claro que le da identidad al sistema. */
    --barra:        #fce6ef;
    --barra-2:      #f8d8e7;
    --barra-borde:  #f0c9dd;
    --barra-texto:  #6f4256;
    --barra-tenue:  #7d5468;

    --ok:      #3d7d55;
    --ok-bg:   #e7f3ec;
    --alerta:  #a06c26;
    --alerta-bg:#fbf0df;
    --error:   #b4453f;
    --error-bg:#fbe9e7;
    --info:    #5566a5;
    --info-bg: #ebeef8;

    --radio: 12px;
    --sombra: 0 1px 2px rgba(85, 45, 65, .05), 0 4px 16px rgba(85, 45, 65, .06);
    --sombra-alta: 0 2px 4px rgba(85, 45, 65, .06), 0 10px 26px rgba(85, 45, 65, .09);
    --fuente: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* Las clases del sistema fijan `display`, y eso le gana al `display:none` que
   el navegador aplica por el atributo hidden. Sin este !important, un campo
   marcado como oculto se sigue viendo. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 15px;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.55rem; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
a { color: var(--acento); }

/* ─── Encabezado y navegación ─────────────────────────────────────────────── */
.barra {
    background: linear-gradient(180deg, var(--barra) 0%, var(--barra-2) 100%);
    border-bottom: 1px solid var(--barra-borde);
    position: sticky;
    top: 0;
    z-index: 40;
}
.barra-interna {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 64px;
    flex-wrap: wrap;
}
.marca {
    display: flex; align-items: center; gap: 11px;
    font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em;
    color: var(--barra-texto); text-decoration: none;
    white-space: nowrap;
}
.marca-icono {
    width: 32px; height: 32px; border-radius: 10px;
    display: block;
    box-shadow: 0 2px 6px rgba(122, 58, 90, .22);
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--barra-texto);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.nav a:hover { background: rgba(255, 255, 255, .6); }
.nav a.activo {
    background: var(--superficie);
    color: var(--acento-oscuro);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(122, 58, 90, .14);
}
.barra-fecha { color: var(--barra-tenue); font-size: .85rem; }

/* ─── Campanita de notificaciones ─────────────────────────────────────────── */
.campana-caja { margin-left: auto; position: relative; display: flex; align-items: center; }
.campana {
    position: relative;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--barra-texto);
    cursor: pointer;
}
.campana:hover { background: rgba(255, 255, 255, .6); border-color: var(--barra-borde); }
.campana[aria-expanded="true"] { background: var(--superficie); border-color: var(--barra-borde); }
.campana-globo {
    position: absolute; top: 1px; right: 0;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px;
    background: var(--error); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center;
    border: 2px solid var(--barra-2);
}
.campana-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: min(370px, calc(100vw - 32px));
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    z-index: 60;
    overflow: hidden;
}
.campana-cabecera {
    padding: 11px 14px;
    border-bottom: 1px solid var(--borde);
    background: var(--superficie-2);
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .92rem;
}
.campana-lista { max-height: 380px; overflow-y: auto; }
.aviso-item {
    padding: 11px 14px;
    border-bottom: 1px solid var(--borde);
    display: flex; flex-direction: column; gap: 3px;
}
.aviso-item:last-child { border-bottom: none; }
.aviso-item:hover { background: var(--superficie-2); }
.aviso-fila { display: flex; align-items: baseline; gap: 8px; }
.aviso-nombre { font-weight: 600; font-size: .89rem; }
.aviso-monto { margin-left: auto; font-weight: 600; font-size: .86rem; color: var(--error); }
.aviso-detalle { font-size: .8rem; color: var(--texto-suave); }
.aviso-tiempo { font-size: .76rem; color: var(--texto-tenue); }
.aviso-acciones { display: flex; gap: 6px; margin-top: 6px; }
.campana-pie {
    padding: 9px 14px;
    border-top: 1px solid var(--borde);
    background: var(--superficie-2);
    text-align: center; font-size: .85rem;
}

/* ─── Pestañas ────────────────────────────────────────────────────────────── */
.pestanas {
    display: inline-flex; gap: 3px;
    padding: 3px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 999px;
}
.pestanas button {
    border: none; background: transparent;
    padding: 7px 16px; border-radius: 999px;
    font: inherit; font-size: .88rem; font-weight: 500;
    color: var(--texto-suave); cursor: pointer; white-space: nowrap;
}
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected="true"] {
    background: var(--superficie);
    color: var(--acento-oscuro);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(122, 58, 90, .14);
}

/* ─── Estructura ──────────────────────────────────────────────────────────── */
.contenido { max-width: 1500px; margin: 0 auto; padding: 22px 20px 60px; }
.encabezado-pagina {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-bottom: 18px;
}
.encabezado-pagina .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.subtitulo { color: var(--texto-suave); font-size: .88rem; margin-top: 3px; }

.panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.panel-titulo {
    padding: 13px 16px;
    border-bottom: 1px solid var(--borde);
    background: var(--superficie-2);
    border-radius: var(--radio) var(--radio) 0 0;
    display: flex; align-items: center; gap: 10px;
}
.panel-titulo .acciones { margin-left: auto; display: flex; gap: 6px; }
.panel-cuerpo { padding: 16px; }

.grilla { display: grid; gap: 16px; }
.grilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ─── Tarjetas de indicadores ─────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 14px 16px;
    box-shadow: var(--sombra);
    transition: box-shadow .15s, transform .15s;
}
.kpi:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.kpi-rotulo { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); }
.kpi-valor { font-size: 1.75rem; font-weight: 600; margin-top: 4px; line-height: 1.1; letter-spacing: -.02em; }
.kpi-pie { font-size: .8rem; color: var(--texto-suave); margin-top: 2px; }
.kpi.acento .kpi-valor { color: var(--acento); }
.kpi.alerta .kpi-valor { color: var(--alerta); }
.kpi.error  .kpi-valor { color: var(--error); }

/* ─── Botones ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--borde-fuerte);
    background: var(--superficie);
    color: var(--texto);
    border-radius: 8px;
    font: inherit; font-size: .88rem; font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { background: var(--superficie-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-oscuro); }
.btn-peligro { color: var(--error); border-color: #e2c4c0; }
.btn-peligro:hover { background: var(--error-bg); }
.btn-chico { padding: 5px 10px; font-size: .82rem; }
.btn-icono { padding: 6px 9px; }
.btn-plano { border-color: transparent; background: transparent; }
.btn-plano:hover { background: var(--superficie-2); border-color: var(--borde); }

/* ─── Formularios ─────────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.campo label { font-size: .83rem; font-weight: 500; color: var(--texto-suave); }
.campo .ayuda { font-size: .78rem; color: var(--texto-tenue); }
input[type=text], input[type=date], input[type=time], input[type=number],
input[type=email], input[type=search], input[type=month], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    font: inherit; font-size: .9rem;
    background: var(--superficie);
    color: var(--texto);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--acento-claro);
    border-color: var(--acento);
}
textarea { min-height: 70px; resize: vertical; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; }
.fila > * { flex: 1 1 160px; }
.check { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.check input { width: auto; }

/* Opciones excluyentes presentadas como tarjetas: se leen de un vistazo y se
   tocan bien, que es lo que hace falta en el mostrador. */
.opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.opcion {
    flex: 1 1 150px;
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 10px;
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.opcion:hover { background: var(--superficie-2); }
.opcion input { width: auto; flex: none; margin-top: 2px; }
.opcion small { display: block; color: var(--texto-tenue); font-size: .78rem; margin-top: 2px; }
/* La clase la pone el JS; el :has es el mismo efecto sin depender de eventos. */
.opcion.marcada,
.opcion:has(input:checked) {
    border-color: var(--acento);
    background: var(--acento-claro);
}
.opcion.marcada small,
.opcion:has(input:checked) small { color: var(--acento-oscuro); }

/* ─── Historial de asistencias ────────────────────────────────────────────── */
.barras-mes { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.barra-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 34px; }
.barra-pila {
    width: 100%; display: flex; flex-direction: column-reverse;
    border-radius: 5px 5px 0 0; overflow: hidden;
}
.barra-mes .rotulo { font-size: .7rem; color: var(--texto-tenue); text-align: center; line-height: 1.2; }

.linea-asistencia {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--borde);
    font-size: .86rem;
}
.linea-asistencia:last-child { border-bottom: none; }
.linea-asistencia .fecha { font-variant-numeric: tabular-nums; color: var(--texto-suave); min-width: 92px; }
.linea-asistencia .hora { color: var(--texto-tenue); font-size: .8rem; min-width: 46px; }
.linea-asistencia .extra-info { margin-left: auto; color: var(--texto-tenue); font-size: .79rem; text-align: right; }

/* ─── Tablas ──────────────────────────────────────────────────────────────── */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
    text-align: left; padding: 10px 12px;
    font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-tenue); font-weight: 600;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--superficie-2); }
td.derecha, th.derecha { text-align: right; }
td.acciones-celda { text-align: right; white-space: nowrap; }

/* ─── Etiquetas de estado ─────────────────────────────────────────────────── */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: .77rem; font-weight: 600;
    background: var(--superficie-2); color: var(--texto-suave);
    border: 1px solid var(--borde);
    white-space: nowrap;
}
.tag-ok     { background: var(--ok-bg);     color: var(--ok);     border-color: #c6e0cd; }
.tag-alerta { background: var(--alerta-bg); color: var(--alerta); border-color: #ecd8b4; }
.tag-error  { background: var(--error-bg);  color: var(--error);  border-color: #eccbc7; }
.tag-info   { background: var(--info-bg);   color: var(--info);   border-color: #cbd9e8; }
.tag-acento { background: var(--acento-claro); color: var(--acento-oscuro); border-color: #c8ded6; }

/* ─── Planning semanal ────────────────────────────────────────────────────── */
.semana-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.semana-rango { font-weight: 600; min-width: 210px; text-align: center; }

.planning {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

/* Vista de próximos días: en vez de repartir la semana en el ancho de la
   pantalla, se arma una tira de días que se desplaza en horizontal. */
.planning.desplazable {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximate;
}
.planning.desplazable .dia {
    flex: 0 0 190px;
    scroll-snap-align: start;
}
.planning.desplazable::-webkit-scrollbar { height: 10px; }
.planning.desplazable::-webkit-scrollbar-track {
    background: var(--superficie-2); border-radius: 999px;
}
.planning.desplazable::-webkit-scrollbar-thumb {
    background: var(--borde-fuerte); border-radius: 999px;
}
.planning.desplazable::-webkit-scrollbar-thumb:hover { background: var(--acento); }

/* Separador entre semanas dentro de la tira, para no perder la referencia. */
.dia.inicio-semana { box-shadow: -3px 0 0 var(--barra-borde), var(--sombra); }
.dia {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 90px;
}
.dia-cabecera {
    padding: 9px 11px;
    border-bottom: 1px solid var(--borde);
    background: var(--superficie-2);
    display: flex; align-items: center; gap: 8px;
}
.dia-titulo { flex: 1; min-width: 0; }
.btn-dia {
    flex: none;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--texto-tenue);
    font: inherit; font-size: 1rem; line-height: 1;
    cursor: pointer;
}
.btn-dia:hover { background: var(--superficie); border-color: var(--borde-fuerte); color: var(--acento); }
.dia-nombre { font-weight: 600; font-size: .88rem; }
.dia-fecha { font-size: .78rem; color: var(--texto-tenue); }
.dia.hoy { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra); }
.dia.hoy .dia-cabecera { background: var(--acento-claro); }
.dia.hoy .dia-nombre { color: var(--acento-oscuro); }
.dia.cerrado .dia-cuerpo { opacity: .55; }
.dia-cuerpo { padding: 9px; display: flex; flex-direction: column; gap: 8px; }

.clase {
    border: 1px solid var(--borde);
    border-radius: 9px;
    padding: 8px 9px;
    background: var(--superficie);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.clase:hover { border-color: var(--acento); background: var(--acento-claro); }
.clase:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.clase.vacia { border-style: dashed; }
.clase.llena { border-color: var(--borde-fuerte); background: var(--superficie-2); }

/* Clase que no se dicta ese día, o que llegó mudada desde otra fecha. */
.clase.cancelada { border-color: #e8d3ac; background: #fdf8ef; }
.clase.cancelada .clase-hora { text-decoration: line-through; color: var(--texto-tenue); }
.clase.movida { border-color: #cbd4ea; background: #f7f9fd; }
.clase-nota {
    display: block;
    font-size: .72rem; font-weight: 600;
    margin-bottom: 5px;
}
.clase.cancelada .clase-nota { color: var(--alerta); }
.clase.movida .clase-nota { color: var(--info); }
.clase-cabecera { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.clase-hora { font-weight: 600; font-size: .84rem; letter-spacing: -.01em; }
.clase-cupo { margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--texto-tenue); }
.clase.llena .clase-cupo { color: var(--alerta); }
.clase-alumnas { display: flex; flex-direction: column; gap: 3px; }
.alumna-linea {
    font-size: .8rem; color: var(--texto-suave);
    display: flex; align-items: center; gap: 5px;
    line-height: 1.35;
}
.alumna-linea .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); flex: none; }
.alumna-linea.ausente { text-decoration: line-through; color: var(--texto-tenue); }
.alumna-linea.ausente .punto { background: var(--borde-fuerte); }
.alumna-linea.recupera .punto { background: var(--info); }
.alumna-linea.extra .punto { background: var(--alerta); }
.alumna-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sin-clases { font-size: .8rem; color: var(--texto-tenue); padding: 6px 2px; }
.aviso-cerrado {
    font-size: .78rem; font-weight: 600; color: var(--alerta);
    background: var(--alerta-bg); border-radius: 6px; padding: 5px 8px;
}

.referencias { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--texto-suave); margin-top: 14px; }
.referencias span { display: flex; align-items: center; gap: 6px; }
.referencias .punto { width: 8px; height: 8px; border-radius: 50%; }

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.fondo-modal {
    position: fixed; inset: 0;
    background: rgba(38, 35, 32, .45);
    display: grid; place-items: center;
    padding: 18px; z-index: 90;
}
.fondo-modal[hidden] { display: none; }
.modal {
    background: var(--superficie);
    border-radius: 12px;
    width: min(620px, 100%);
    max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 18px 50px rgba(38, 35, 32, .25);
    /* Ancla del aviso de cambios sin guardar, que se dibuja adentro. */
    position: relative;
}
.modal.ancho { width: min(920px, 100%); }
.modal-cabecera {
    padding: 15px 18px; border-bottom: 1px solid var(--borde);
    display: flex; align-items: center; gap: 12px;
}
.modal-cabecera .cerrar {
    margin-left: auto; border: none; background: transparent;
    font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--texto-tenue);
    padding: 0 4px;
}
.modal-cuerpo { padding: 18px; overflow-y: auto; }
.modal-pie {
    padding: 13px 18px; border-top: 1px solid var(--borde);
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.modal-pie .izquierda { margin-right: auto; }

/* Las preguntas se dibujan sobre el modal sin sacarlo de pantalla: se sigue
   viendo atrás lo que está por perderse, que es justo lo que hay que mirar
   antes de decidir. Va adentro de .modal, de ahi su position: relative. */
.modal-pregunta {
    position: absolute; inset: 0; z-index: 2;
    background: rgba(38, 35, 32, .5);
    display: grid; place-items: center;
    padding: 18px; border-radius: 12px;
}
.modal-pregunta-cuadro {
    background: var(--superficie);
    border-radius: 10px; padding: 18px 20px;
    width: min(420px, 100%);
    box-shadow: 0 14px 40px rgba(38, 35, 32, .3);
}
.modal-pregunta-cuadro h3 { margin: 0 0 6px; }
.modal-pregunta-texto { margin-bottom: 16px; }
.modal-pregunta-texto p { margin: 0; line-height: 1.5; color: var(--texto-tenue); }
.modal-pregunta-botones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Un panel ancho sirve para los buscadores, que necesitan lugar para la lista.
   El alto se limita para que la lista scrollee adentro y los botones no se
   vayan abajo de la pantalla. */
.modal-pregunta-cuadro.ancho { width: min(700px, 100%); }
.modal-pregunta-cuadro.ancho .modal-pregunta-texto { max-height: 58vh; overflow-y: auto; }

/* ─── Biblioteca de bloques ────────────────────────────────────── */
.bib-grupo { margin-bottom: 16px; }
.bib-grupo-titulo {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-bottom: 5px; margin-bottom: 8px;
    border-bottom: 1px solid var(--borde);
    font-weight: 600; font-size: .9rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.bib-grupo-titulo .cuenta { font-weight: 400; color: var(--texto-tenue); letter-spacing: 0; }
.bib-bloque {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--borde-suave, var(--borde));
}
.bib-bloque:last-child { border-bottom: none; }
.bib-bloque-datos { flex: 1 1 auto; min-width: 0; }
.bib-bloque-nombre { font-weight: 600; }
.bib-bloque-muestra, .bib-bloque-plan {
    font-size: .8rem; color: var(--texto-tenue); line-height: 1.45;
}
.bib-bloque-etiquetas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }

/* ─── Avisos flotantes ────────────────────────────────────────────────────── */
#avisos {
    position: fixed; right: 18px; bottom: 18px; z-index: 100;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.aviso {
    background: var(--texto); color: #fff;
    padding: 10px 15px; border-radius: 9px;
    font-size: .88rem; max-width: 380px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    animation: entrar .16s ease-out;
}
.aviso.ok    { background: var(--ok); }
.aviso.error { background: var(--error); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

/* ─── Varios ──────────────────────────────────────────────────────────────── */
.vacio { text-align: center; padding: 34px 18px; color: var(--texto-tenue); font-size: .9rem; }
.cargando { text-align: center; padding: 30px; color: var(--texto-tenue); font-size: .88rem; }
.lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lista-simple li {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: .88rem;
}
.lista-simple li .acciones { margin-left: auto; display: flex; gap: 5px; }
.separador { height: 1px; background: var(--borde); margin: 18px 0; }
.tenue { color: var(--texto-tenue); }
.suave { color: var(--texto-suave); }
.mono { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

@media (max-width: 1200px) {
    .planning { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .planning { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .barra-fecha { display: none; }
}
@media (max-width: 560px) {
    .planning { grid-template-columns: 1fr; }
    .contenido { padding: 16px 12px 50px; }
    .encabezado-pagina .acciones { width: 100%; }
}
@media print {
    .barra, .encabezado-pagina .acciones, .btn, #avisos { display: none !important; }
    body { background: #fff; }
    .planning { grid-template-columns: repeat(7, 1fr); gap: 6px; }
    .dia, .panel, .kpi { box-shadow: none; }
    .clase { break-inside: avoid; }
}

/* ─── Ficha médica ────────────────────────────────────────────────────────── */
/* La planilla de papel se maqueta en seis columnas: cada campo declara si ocupa
   la línea entera, la mitad o un tercio. Acá se traduce a la misma grilla para
   que cargar la ficha en la pantalla sea seguir con el dedo el papel. */
.ficha-grilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 12px; }
.ficha-grilla > * { grid-column: span 6; }
.ficha-grilla > .medio  { grid-column: span 3; }
.ficha-grilla > .tercio { grid-column: span 2; }

.ficha-nota { color: var(--texto-tenue); font-size: .82rem; margin: -4px 0 12px; }

/* Dato que ya vive en la ficha de la alumna. Se muestra para no tener que ir a
   buscarlo, pero se edita donde corresponde y por eso va en punteado. */
.ficha-heredado {
    padding: 8px 10px;
    border: 1px dashed var(--borde-fuerte); border-radius: 8px;
    background: var(--superficie-2);
    font-size: .89rem; min-height: 36px;
    white-space: pre-wrap;
}

/* Un antecedente: la pregunta, el Sí/No y el "especificar" en un solo renglón,
   que es como está en el papel. */
.cond { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cond label { flex: 1 1 120px; font-size: .85rem; color: var(--texto-suave); }
.cond select { flex: 0 0 76px; }
.cond input { flex: 1 1 100px; }
.cond.marcada label { color: var(--acento-oscuro); font-weight: 600; }

.ficha-resumen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 10px 18px;
}
.ficha-resumen .dato { font-size: .88rem; white-space: pre-wrap; }
.ficha-resumen .positiva { color: var(--acento-oscuro); font-weight: 600; }

/* Aviso de que el programa se actualizó con el sistema abierto. Va arriba de
   todo y no se va solo: mientras no se reinicie, hay acciones que fallan. */
.aviso-version {
    background: var(--alerta-bg);
    color: var(--alerta);
    border-bottom: 1px solid #ecd8b4;
    padding: 11px 20px;
    font-size: .88rem;
    line-height: 1.45;
}

/* ─── Usuario en la barra superior ─────────────────────────────────────────── */
/* Aparece desde que el sistema tiene login: hace falta saber con qué cuenta se
   está trabajando, sobre todo ahora que se entra desde varios dispositivos. */
.barra-usuario {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--barra-borde);
}
.barra-usuario .usuario-nombre {
    /* Es un boton (abre el cambio de contrasena) pero tiene que leerse como
       texto: la barra ya tiene suficientes cosas compitiendo por atencion. */
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--barra-texto);
    background: none;
    border: 0;
    padding: 2px 4px;
    border-radius: 6px;
    cursor: pointer;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.barra-usuario .usuario-nombre:hover,
.barra-usuario .usuario-nombre:focus-visible {
    background: var(--barra-2);
    text-decoration: underline;
}
.barra-usuario .btn {
    padding: 4px 10px;
    font-size: .78rem;
}

/* En pantallas chicas el nombre se esconde y queda solo el botón: el espacio
   de la barra es escaso en un celular. */
@media (max-width: 640px) {
    .barra-usuario { margin-left: 8px; padding-left: 8px; }
    .barra-usuario .usuario-nombre { display: none; }
}

/* Cuándo sería la primera clase de un turno recién asignado. Va en su propia
   línea porque el nombre del día más la fecha no entran al lado de la hora en
   una columna angosta, y partido a la mitad se lee peor que debajo. */
.primera-clase {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    color: var(--acento);
    font-weight: 600;
}

/* Una alumna que avisó que no viene, con la falta todavía sin cargar. Se
   distingue de .ausente (falta ya registrada) porque son dos cosas distintas:
   una es un hecho del estudio, la otra un aviso pendiente de resolver. */
.alumna-linea.avisa { color: var(--alerta); }
.alumna-linea.avisa .punto { background: var(--alerta); }
.alumna-linea.avisa .alumna-nombre { text-decoration: line-through; text-decoration-style: dotted; }
.avisa-marca {
    margin-left: 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    display: inline-block;
}

/* Salón y profesora de un turno, en la tarjeta de la grilla de horarios. */
.turno-donde {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--borde);
    font-size: .74rem;
    color: var(--texto-tenue);
}
.turno-donde span { white-space: nowrap; }
.turno-donde .sin-profesora { color: var(--alerta); font-weight: 600; }

/* Repaso de clases dictadas: cada clase es un bloque dentro de UNA sola
   ventana. Antes se encadenaban de a una, lo que escondia cuantas faltaban y
   perdia las demas si la cadena se cortaba. */
.repaso-clase {
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--superficie-2);
}
.repaso-clase:last-child { margin-bottom: 0; }
.repaso-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.repaso-clase.repaso-hecha { opacity: .5; }

/* ─── Identificación visual de salones ────────────────────────────────────── */
/* Los nombres de salón se parecían demasiado entre sí ("Salón principal" y
   "Salón test" leídos rápido son lo mismo), y encima competían con el nombre de
   la profesora, que va al lado. Ahora cada salón toma un color de esta paleta
   según su posición, y la profesora va con otra forma: así se distinguen dos
   cosas a la vez, qué sala es y quién da la clase. */
:root {
    --salon-1: #8d5a9e;   /* violeta  */
    --salon-2: #2f7d8c;   /* petróleo */
    --salon-3: #9a6b2f;   /* ocre     */
    --salon-4: #3d7d55;   /* verde    */
    --salon-5: #a0485c;   /* borravino*/
    --salon-6: #4a5f93;   /* azul     */
}

.turno-donde .salon-chip { font-weight: 600; }
/* El color de cada sala. Se aplica a .salon-chip y nada más lo sobreescribe:
   la regla base no fija color, justamente para no tener que pelear con
   !important cuando alguien agregue un estilo nuevo. */
.salon-c1 { color: var(--salon-1); }
.salon-c2 { color: var(--salon-2); }
.salon-c3 { color: var(--salon-3); }
.salon-c4 { color: var(--salon-4); }
.salon-c5 { color: var(--salon-5); }
.salon-c6 { color: var(--salon-6); }

/* La profesora, en cambio, va en el gris del texto suave y con un círculo:
   distinta forma y distinto peso, para que no compita con el salón. */
.turno-donde .profesora-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--texto-suave);
    font-weight: 500;
}
.turno-donde .profesora-chip::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;          /* redondito: es una persona */
    background: var(--borde-fuerte);
    flex: none;
}

/* El chip de salón: un cuadradito del color de la sala más su nombre. Se usa
   en la grilla de Horarios, en el planning y en la lista de Configuración, que
   hace de referencia de qué color es cada una. */
.salon-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Sin color acá: lo pone la clase salon-cN. Una sala sin color asignado
       hereda el del texto, que es un estado válido y visible. */
}
.salon-chip::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 2px;
    background: currentColor;
    flex: none;
}