:root {
    --purple-light: #6b6bff;
    --purple: #6054ff;
    --purple-text: #7272cd;
    --purple-dark: #4a40d4;
    --aqua: #3ecbee;
    --aqua-dark: #43bedd;
}

.stepwizard-step p {
    margin-top: 10px;
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-index: 0;
}
.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}
.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.container {
    width: 100% !important;
}

.menu-purple-fixed{
    background-color: var(--purple) !important;
    color: white !important;
}

.menu-purple{
    background-color: var(--purple) !important;
    color: white !important;
}

.menu-purple:hover{
    background-color: var(--purple) !important;
    color: white !important;
}

.menu-item-purple{
    background-color: var(--purple) !important;
    color: white !important;
}

.menu-item-purple:hover{
    background-color: var(--purple-dark) !important;
    color: white !important;
}

.menu-active-purple{
    background-color: var(--purple-dark) !important;
}

.treeview-menu{
    background-color: var(--purple) !important;
}

.treeview-menu:hover{
    background-color: var(--purple) !important;
}

.background-fixed{
    background-color: #ecf0f5 !important;
}

.main-header .sidebar-toggle:before {
    content: "\f053" !important;
    color: white !important;
}

.main-header .sidebar-toggle:hover:before {
    color: white !important;
}

.items-menu{
    text-decoration: none;
    color: var(--purple-text) !important;
    font-size: 16px;
}

.items-menu:hover{
    background-color: var(--purple) !important;
    color: white !important;
}

@media (max-width: 750px) {
    .main-header .sidebar-toggle:before {
        color: var(--purple) !important;
        content: "\f0c9" !important;
    }
}

.box-style{
    background-color: #f1f2fb;
    border-radius: 20px;
    padding: 14px;
}

.add-bottom{
    font-size: 20px;
    padding: 5px;
    color:#28a745;
}

.add-bottom:hover{
    background-color: #3ae6183d;
    border-radius: 5px;
}

.edit-bottom{
    font-size: 20px;
    padding: 5px;
    color:#18c7e6;
}

.edit-bottom:hover{
    background-color: #18c7e63d;
    border-radius: 5px;
}

.delete-bottom{
    font-size: 20px;
    padding: 5px;
    color:#ff0000;
}

.delete-bottom:hover{
    background-color: #f00d0d3d;
    border-radius: 5px;
}

.filas:hover{
    background-color: white;
}

.first-box{
    background-color: white;
    border-radius: 15px;
    padding: 10px 30px;
    margin-bottom: 10px;
}

/* INPUT DE BUSQUEDA */
.input-wrapper {
    position: relative;
    width: 100%;
}

.input {
    box-sizing: border-box;
    color: var(--aqua);
    padding: 7px 10px 7px 35px;
    width: 100%;
    /* El borde celeste va desde el principio: con el borde transparente el buscador se
       confundia con el fondo blanco de la tarjeta y no se veia que fuera un campo. */
    border: 2px solid var(--aqua);
    border-radius: 15px;
    outline: none; /* Para quitar el resaltado al hacer clic */
    transition: box-shadow 0.3s, border-color 0.3s;
}

/* Al enfocar ya no cambia el color (ese es el de siempre), asi que el foco se marca con
   un halo; sin el no habria manera de saber que campo tiene el cursor. */
.input:focus {
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px rgba(62, 203, 238, .18);
}

.input::placeholder {
    color: var(--aqua);
}

.input-icon {
    color: var(--aqua);
    position: absolute;
    width: 20px;
    height: 20px;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}
/* FIN DE INPUT DE BUSQUEDA */

/* INPUT DE BUSQUEDA PURPLE */
.input-wrapper-purple {
    position: relative;
    width: 100%;
}

.input-purple {
    box-sizing: border-box;
    color: white;
    padding: 7px 10px 7px 35px;
    width: 100%;
    border: 2px solid transparent; /* Establece un borde inicial transparente */
    border-radius: 15px;
    outline: none; /* Para quitar el resaltado al hacer clic */
    transition: border-color 0.3s; /* Agrega una transición suave al cambio de color */
    background-color: var(--purple-light);
}

.input-purple:focus {
    border-color: white; /* Cambia el color del borde cuando se hace clic */
}

.input-purple::placeholder {
    color: white;
}

.input-icon-purple {
    color: white;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}
/* FIN DE INPUT DE BUSQUEDA PURPLE*/


.centrar-vertical{
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-item a {
    border-color: var(--purple);
    color: var(--purple);
}

.pagination .page-item a:hover {
    border-color: var(--purple);
    color: var(--purple);
}

.pagination .page-item.active a {
    border-color: var(--purple);
    color: var(--purple);
}


.box-style-form{
    background-color: white;
    border-radius: 20px;
    padding: 20px;
}

.input-group-addon{
    background-color: var(--purple) !important;
    border-color: var(--purple) !important;
    color: white !important;
    border-radius: 10px 0px 0px 10px !important;
}

.final{
    background-color: var(--purple) !important;
    border-color: var(--purple) !important;
    color: white !important;
    border-radius: 0px 10px 10px 0px !important;
}

.form-control{
    border-color: var(--purple);
    color: gray;
    border-radius: 0px 10px 10px 0px;
}

.normal{
    border-radius: 0px !important
}

.btn-purple{
    background-color: var(--purple);
    border-color: var(--purple);
    color: white;
}

.btn-purple:hover{
    background-color: var(--purple-dark);
    color: white;
}

.btn-aqua{
    background-color: var(--aqua);
    border-color: var(--aqua);
    color: white;
}

.btn-aqua:hover{
    background-color: var(--aqua-dark);
    color: white;
}

.centrar-horizontal{
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagen-estudiante{
    width: 200px;
    height: 200px;
    border: 3px solid white;
    overflow: hidden;
    border-radius: 20px;
}

.imagen-colegio{
    width: 200px !important;
    border: 3px solid white;
    overflow: hidden;
    border-radius: 20px;
}

.choose-imagen-colegio{
    width: 150px;
    height: 150px;
    border: 3px solid white;
    overflow: hidden;
    border-radius: 20px;
}

.badge-purple{
    background-color: var(--purple);
    border-radius: 5px;
    color: white;
    padding: 5px;
}

/* iNICIO CSS DE LOGIN  */
.login-background{
    background-color: #3d3dba;
}
.login-page {
    background-image: url('../img/fondo.jpg'); /* Cambia 'ruta/a/tu/imagen.jpg' a la URL de tu imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fija la imagen de fondo */
    background-color: #4443c3;
    height: 100%;
    margin: 0;
}

.login-box-body{
    padding: 10%;
    background: #4949cc17 !important;
    border-radius: 5%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: #FFF!important;
}

.login-box, .register-box {
    width: 485px!important;
}
.login-box-body input.form-control{
    background: #5757ee!important;
    border-radius: 10px;
    border-color: transparent;
    color: #FFF;
}

.login-box-body .has-feedback a{
    background-color: #18c7e6!important;
    border-radius: 15px;
    width: 80%;
    margin: auto;
}

.login-box-body .has-feedback button{
    background-color: #18c7e6!important;
    border-radius: 15px;
    width: 80%;
    margin: auto;
}
.label-footer a{
    color: #FFFF;
    padding-right: 5px;
}

.label-footer{
    text-align: center;
    font-size: 17px;
}
.label-footer a.register-new-label{
    color:#d2d900;
}

.line-login{

    border-radius: 15px;
    padding: 5px;
    text-align: center;
    border: solid 2px transparent;
    position: relative;
    background-color: #4242c2;
}

.line-login i.fa{
    color:#d2d900;
    position: relative;
    font-size: 20px;
}

.line-login:hover{

    border: solid 2px #d2d900!important;
}


.line-login span{
    color: #FFF;
}

.link-buttom{
    padding-top: 30px;
    padding-bottom: 30px;
}
.login-box-body input::placeholder{
    color:#FFF!important;
}

.login-box-body .checkbox{
    padding-top: 30px;
    padding-bottom: 30px;
}
.icheckbox_square-blue input{
    border-color: #18C7E6;
}

.titulo-school{
    color: var(--purple);
    font-size: 17px;
}

.bottom-fixed{
    position: absolute;
    bottom: 0;
}

.custom-swal {
    font-size: 16px !important; /* Ajusta el tamaño de fuente según tus preferencias */
    width: 500px !important; /* Ajusta el ancho de la ventana emergente según tus necesidades */
}


/* tabla responsive */
.table-responsive {
    border: none; /* Elimina el borde gris alrededor de la tabla */
}

/* Estilo para mantener el menú desplegable junto al botón */
.table-responsive .dropdown {
    position: relative; /* Establece la posición relativa en el contenedor */
}


::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #adadad;
}
/* fin tabla responsive */

.uploaded-image {
    max-width: 100px;
    max-height: 100px;
    margin: 10px;
    border-radius: 10px;
}

.select2-selection__choice {
    background-color: var(--purple-light) !important;
}

.activee{
    background-color: #4a40d4 !important;
}

.activee a{
    background-color: #4a40d4 !important;
}

.activee_2 a{
    background-color: #6b6bff !important;
}

.fc-event {
    cursor: pointer;
}
 /*  ===================================
        CSS PARA RESPONSIVE
       ====================================
   */


   .custom-scroll {
    max-height: 700px;
    overflow-y: auto;
    padding: 10px;
  }


/* Tablets */
@media (max-width: 992px) {
    body {
        font-size: 16px;
    }

    .login-box-body {
        margin-top: 50%;
    }

    .main-header{
        margin-bottom: 50px;
    }
    #conAjaxGradeActivity .col-md-10{
        padding: 35px!important;
    }

    #conAjaxGradeActivity2 .col-md-10{
        padding: 35px!important;
    }
}

/* Smartphones */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .link-buttom .col-md-6{
        padding-bottom: 15px!important;

    }

    .btn-movil a{
        width: 100%;
        margin-bottom: 5px;
    }


}

/* Pantallas muy pequeñas */
@media (max-width: 576px) {
    body {
        font-size: 12px;
    }

    .login-box, .register-box {
        width: 300px !important;
    }
}

.difuminado {
    background: rgba(0, 0, 0, 0.6); /* Fondo negro con 70% de opacidad */
    color: white; /* Texto blanco */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Efecto de difuminado */
    text-align: center; /* Alineación centrada del texto */
  }

  .login-new{
    color: white;
    margin-top: 10%;
}

.cajones {
    display: flex;
    flex-wrap: wrap;  /* Permite que las columnas se ajusten en múltiples líneas */
    justify-content: center;
    gap: 2%; /* Espaciado entre las columnas */
    padding: 1% 5%;
}

.link-rol {
    height: 150px;
    width: 150px;
    margin: 2%;
    border-radius: 5%;
    background: #4949cc17;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s, border 0.3s, box-shadow 0.3s;
    /* Ancho máximo y tamaño responsivo */
    flex: 1 1 20%;  /* Los elementos ocupan el 20% del ancho disponible, pero pueden crecer o reducirse */
    max-width: 150px;  /* Limita el ancho máximo para evitar que se estiren demasiado */
}

.link-rol:hover {
    border: 2px solid yellow;
    transform: scale(1.1);
}

.icono-grande {
    color: yellow;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.link-a{
    margin: 1%;
}

.box-style-form-registro{
    background-color: white;
    border-radius: 20px;
    padding: 20px;
}



.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 80%;
    margin: auto;
}

.step {
    text-align: center;
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #ada4a4;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 12px;
    z-index: 2;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.step p {
    margin: 0;
    font-weight: 600;
    font-size: 17px;
    color: #eee;
    line-height: 1.3;
    max-width: 140px;
    min-height: 60px;  /* todos iguales */
    text-align: center;
    display: block;    /* quita el flex, evita que desajuste */
}

@media (max-width: 600px) {
    .circle {
        width: 45px;
        height: 45px;
        font-size: 12px;   /* número dentro del círculo más pequeño */
        margin-bottom: 8px;
    }

    .step p {
        margin-top: 15px;
        font-size: 12px;   /* texto más pequeño */
        max-width: 100px;  /* menos ancho para que no se desordene */
        min-height: 35px;  /* ajusta la altura del bloque */
        line-height: 1.2;
    }
}

/* Línea de fondo */
.steps::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    height: 8px;
    background: #ada4a4;
    z-index: 1;
    border-radius: 4px;
}

/* Línea activa */
.steps::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 0;
    height: 8px;
    background: white;
    z-index: 1;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Estado de los pasos */
.steps.step-1::after { width: 14%; }   /* Solo paso 1 */
.steps.step-2::after { width: 39%; }  /* Hasta paso 2 */
.steps.step-3::after { width: 64%; } /* Hasta paso 3 */
.steps.step-4::after { width: 100%; } /* Hasta paso 4 */

/* Circulos activos */
.steps.step-1 .step:nth-child(1) .circle { background: white; color: #000; }
.steps.step-1 .step:nth-child(1) p { color: white; }

.steps.step-2 .step:nth-child(-n+2) .circle { background: white; color: #000; }
.steps.step-2 .step:nth-child(-n+2) p { color: white; }

.steps.step-3 .step:nth-child(-n+3) .circle { background: white; color: #000; }
.steps.step-3 .step:nth-child(-n+3) p { color: white; }

.steps.step-4 .step:nth-child(-n+4) .circle { background: white; color: #000; }
.steps.step-4 .step:nth-child(-n+4) p { color: white; }

.error-small {
    font-size: 1.50rem; /* Ajusta según lo pequeño que quieras */
}



/* Overlay */
#loaderOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    display: none; /* aseguramos que está oculto */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Loader animado */
.loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #28a745;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

        /* Loader animado */
.loader2 {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #28a745;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.option-letter {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 0.7rem;
    border-radius: 50%;
    width: 3rem; /* Tamaño fijo de la esfera */
    height: 3rem; /* Asegura que la esfera sea un círculo perfecto */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem; /* Ajustamos el tamaño de la letra */
    flex-shrink: 0; /* Evita que la esfera se deforme */
}


/* ############################################################################
   MODULO DE GESTION DISCIPLINARIA

   Portado tal cual desde el modulo de maestros (escuelapp_teachers) para que las
   dos pantallas se vean y se usen igual. Si se toca algo aqui, tocar tambien alla.
   ############################################################################ */

/* ============================================================================
   GESTION DISCIPLINARIA - panel de carga rapida
   Pantalla de dos columnas: a la izquierda los alumnos del grado, a la derecha
   los tipos de falta con un contador por alumno. Todo bajo el prefijo
   `.disciplina` para no chocar con nada del resto del sistema.
   ============================================================================ */

.disciplina .disciplina-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 6px 0;
}

.disciplina-toolbar__campo {
    flex: 0 0 260px;
    min-width: 220px;
}

.disciplina-toolbar__campo--periodos {
    flex: 1 1 340px;
}

.disciplina-toolbar__campo label {
    display: block;
    margin-bottom: 6px;
    color: var(--purple-text);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.disciplina-toolbar__acciones {
    margin-left: auto;
}

.disciplina-ayuda {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid #ececf7;
    color: #8a8aa3;
    font-size: 12.5px;
}

/* --- Selector de periodo (pastillas) --- */

.disciplina-periodos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
    align-items: center;
}

.disciplina-periodo {
    border: 2px solid #e2e2f5;
    background: white;
    color: var(--purple-text);
    border-radius: 999px;
    padding: 6px 18px;
    font-weight: 600;
    font-size: 13px;
    transition: all .15s ease;
}

.disciplina-periodo:hover {
    border-color: var(--purple-light);
    color: var(--purple);
}

.disciplina-periodo.is-activo {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
    box-shadow: 0 4px 10px rgba(96, 84, 255, .28);
}

.disciplina-periodos__vacio {
    color: #a0a0b8;
    font-size: 13px;
    font-style: italic;
}

/* --- Tarjetas de las dos columnas --- */

.disciplina-card {
    background: white;
    border-radius: 20px;
    padding: 18px;
    height: 100%;
}

.disciplina-card__head h4 {
    margin: 0 0 12px;
    font-weight: 700;
    color: #3f3f5a;
}

.disciplina-chip {
    display: inline-block;
    min-width: 26px;
    padding: 1px 9px;
    margin-left: 4px;
    border-radius: 999px;
    background: #f1f2fb;
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

/* --- Lista de alumnos --- */

.disciplina-alumnos {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    max-height: 620px;
    overflow-y: auto;
}

.disciplina-alumno {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 6px;
    border-radius: 14px;
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.disciplina-alumno:hover {
    background: #f6f6fd;
}

.disciplina-alumno.is-activo {
    background: #eeecff;
    border-left-color: var(--purple);
}

.disciplina-alumno__nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    color: #3f3f5a;
}

.disciplina-alumno__marcas {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.disciplina-alumno__nota {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.disciplina-alumno__marcas small {
    color: #a0a0b8;
    font-size: 11px;
}

.disciplina-alumnos__vacio {
    padding: 22px 12px;
    color: #a0a0b8;
    font-style: italic;
    text-align: center;
}

/* Semaforo: sin faltas verde, con faltas naranja, nota negativa rojo. */
.disciplina-alumno.is-limpio  .disciplina-alumno__nota { color: #24a37a; }
.disciplina-alumno.is-alerta  .disciplina-alumno__nota { color: #e08a1e; }
.disciplina-alumno.is-critico .disciplina-alumno__nota { color: #d9463f; }

.disciplina-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eeecff;
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Cabecera del detalle --- */

.disciplina-detalle__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ececf7;
}

.disciplina-detalle__quien {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.disciplina-detalle__quien .disciplina-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.disciplina-detalle__quien h4 {
    margin: 0 0 2px;
    font-weight: 700;
    color: #3f3f5a;
}

.disciplina-detalle__quien small {
    color: var(--purple-text);
    font-weight: 600;
}

.disciplina-detalle__marcador {
    display: flex;
    gap: 10px;
}

.disciplina-marcador {
    min-width: 96px;
    padding: 8px 14px;
    border-radius: 14px;
    background: #f6f6fd;
    text-align: center;
}

.disciplina-marcador__label {
    display: block;
    color: #8a8aa3;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.disciplina-marcador__valor {
    display: block;
    margin-top: 2px;
    font-size: 21px;
    font-weight: 700;
    color: #3f3f5a;
    font-variant-numeric: tabular-nums;
}

.disciplina-marcador__valor--perdidos { color: #e08a1e; }
.disciplina-marcador__valor.is-limpio  { color: #24a37a; }
.disciplina-marcador__valor.is-alerta  { color: #e08a1e; }
.disciplina-marcador__valor.is-critico { color: #d9463f; }

/* --- Lista de tipos de falta con su contador --- */

.disciplina-faltas {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.disciplina-falta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
    transition: border-color .15s ease, background .15s ease;
}

.disciplina-falta:hover {
    border-color: #e2e2f5;
}

.disciplina-falta.is-marcada {
    border-color: var(--purple-light);
    background: #faf9ff;
}

.disciplina-falta__texto {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Columnas de contadores ------------------------------------------------
   La fila y la cabecera comparten estas medidas: asi cada titulo cae justo
   encima de su contador y se entiende que son dos columnas distintas. */

.disciplina-falta__col {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.disciplina-falta__col--redimidas {
    border-left: 2px solid #f1f2fb;
}

/* La etiqueta de la columna solo sale en movil, donde la cabecera no cabe. */
.disciplina-falta__col-label { display: none; }

.disciplina-faltas__head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    /* 18px = los 16 de la fila mas los 2 de su borde, para que cada titulo caiga
       exactamente encima de su columna. */
    padding: 0 18px 10px;
    margin-bottom: 6px;
    border-bottom: 2px solid #f1f2fb;
}

.disciplina-faltas__head .disciplina-falta__col { border-left: none; }

.disciplina-faltas__head b {
    display: block;
    color: #5a5a75;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.disciplina-faltas__head small {
    display: block;
    margin-top: 2px;
    color: #b0b0c4;
    font-size: 10.5px;
}

.disciplina-falta__nombre {
    display: block;
    color: #3f3f5a;
    font-size: 13.5px;
    line-height: 1.35;
}

.disciplina-falta__valor {
    display: block;
    margin-top: 3px;
    color: #a0a0b8;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* --- Contador +/- --- */

.disciplina-stepper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.disciplina-stepper__btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    transition: transform .12s ease, background .15s ease;
}

.disciplina-stepper__btn:active { transform: scale(.9); }

.disciplina-stepper__btn--mas {
    background-color: var(--purple);
    color: white;
}

.disciplina-stepper__btn--mas:hover { background-color: var(--purple-dark); }

.disciplina-stepper__btn--menos {
    background-color: #f1f2fb;
    color: var(--purple);
}

.disciplina-stepper__btn--menos:hover { background-color: #e2e2f5; }

/* El estado deshabilitado se declara sobre cada modificador (y sobre su :hover) para que
   gane sin depender del orden del archivo: asi el + de un alumno con la conducta en cero
   se ve claramente apagado y no invita a pulsarlo. */
.disciplina-stepper__btn:disabled,
.disciplina-stepper__btn--mas:disabled,
.disciplina-stepper__btn--menos:disabled,
.disciplina-stepper__btn--mas:disabled:hover,
.disciplina-stepper__btn--menos:disabled:hover {
    background-color: #f0f0f6;
    color: #cdcddd;
    cursor: not-allowed;
    transform: none;
}

.disciplina-stepper__conteo {
    min-width: 34px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #3f3f5a;
    font-variant-numeric: tabular-nums;
}

/* --- Contador de faltas redimidas, junto al contador de activas -----------
   Verde para separarlo visualmente del +/- morado: lo verde suma conducta,
   lo morado la resta. */

.disciplina-redimidas {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 999px;
    background: #f6f6fa;
    transition: background .15s ease;
}

.disciplina-redimidas.is-activo { background: #e3f6ee; }

.disciplina-redimidas__conteo {
    min-width: 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #b9b9cc;
    font-variant-numeric: tabular-nums;
}

.disciplina-redimidas.is-activo .disciplina-redimidas__conteo { color: #1c8963; }

.disciplina-redimidas__btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    background-color: transparent;
    color: #1c8963;
    transition: transform .12s ease, background-color .15s ease, color .15s ease;
}

.disciplina-redimidas__btn:active { transform: scale(.9); }

.disciplina-redimidas__btn--redimir:hover {
    background-color: #1c8963;
    color: white;
}

.disciplina-redimidas__btn--revertir {
    color: #a0a0b8;
}

.disciplina-redimidas__btn--revertir:hover {
    background-color: #e2e2f5;
    color: #5a5a75;
}

.disciplina-redimidas__btn:disabled,
.disciplina-redimidas__btn--redimir:disabled,
.disciplina-redimidas__btn--revertir:disabled,
.disciplina-redimidas__btn--redimir:disabled:hover,
.disciplina-redimidas__btn--revertir:disabled:hover {
    background-color: transparent;
    color: #dcdce8;
    cursor: not-allowed;
    transform: none;
}

/* Una falta cuyas ocurrencias estan todas redimidas: se marca en verde, no en morado. */
.disciplina-falta.is-redimida {
    border-color: #cceadd;
    background: #f7fdfa;
}

.disciplina-marcador__valor--redimidas { color: #1c8963; }

/* --- Envoltura de los tooltips ---------------------------------------------
   Un <button disabled> no emite eventos de raton, asi que un tooltip colgado del
   boton no saldria nunca — y es apagado cuando mas falta hace explicar por que.
   El mensaje vive en este <span> y el boton le cede los eventos. */

.disciplina-tip {
    display: inline-flex;
}

.disciplina-tip > button:disabled {
    pointer-events: none;
}


/* --- Estados vacios --- */

.disciplina-vacio {
    padding: 42px 20px;
    color: #a0a0b8;
    text-align: center;
}

.disciplina-vacio i {
    font-size: 34px;
    color: #d5d5e8;
}

.disciplina-vacio h4 {
    margin: 14px 0 4px;
    color: #8a8aa3;
}

.disciplina-vacio p { margin: 0; }

/* --- Historial: misma tarjeta y mismo lenguaje visual que el panel --------- */

.disciplina-toolbar__campo--titulo {
    flex: 1 1 auto;
    min-width: 0;
}

.disciplina-titulo {
    margin: 0;
    font-weight: 700;
    color: #3f3f5a;
}

.disciplina-toolbar__acciones .btn + .btn {
    margin-left: 6px;
}

.disciplina-historial__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ececf7;
}

.disciplina-historial__head h4 { margin: 0; }

.disciplina-historial__buscador {
    flex: 0 1 340px;
    min-width: 220px;
}

/* --- Filtros del historial --- */

.disciplina-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding-top: 16px;
}

/* Los campos no crecen: crece solo el buscador, que absorbe el hueco sobrante. Si
   creciesen todos, el que quedara solo en la segunda fila se estiraria de lado a lado. */
.disciplina-filtros__campo {
    flex: 0 1 135px;
    min-width: 0;
}

.disciplina-filtros__campo--buscador {
    flex: 1 1 200px;
}

.disciplina-filtros__campo--fechas {
    flex: 0 1 250px;
}

.disciplina-filtros__rango {
    display: flex;
    align-items: center;
    gap: 6px;
}

.disciplina-filtros__rango .form-control {
    min-width: 0;
}

.disciplina-filtros__rango span {
    flex: 0 0 auto;
    color: #b0b0c4;
}

.disciplina-filtros__campo > label {
    display: block;
    margin-bottom: 5px;
    color: var(--purple-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.disciplina-filtros__campo .form-control {
    height: 36px;
    border: 2px solid #e6e6f4;
    border-radius: 12px;
    box-shadow: none;
    color: #5a5a75;
    font-size: 13px;
}

.disciplina-filtros__campo .form-control:focus {
    border-color: var(--purple-light);
    box-shadow: none;
}

.disciplina-filtros__acciones {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

/* ============================================================================
   SELECT2 CON LA PINTA DEL MODULO

   select2 esconde el <select> y pinta el suyo, asi que las reglas de .form-control
   no le llegan: hay que repetirlas sobre su contenedor. Lo comparten el selector de
   grado del panel, la barra de filtros del historial y el formulario de alta/edicion;
   solo se diferencian en el tamano, porque los del formulario son mas grandes.
   ============================================================================ */

.disciplina-filtros .select2-container,
.disciplina-toolbar .select2-container,
.disciplina-form .select2-container {
    width: 100% !important;
}

.disciplina-filtros .select2-container--default .select2-selection--single,
.disciplina-toolbar .select2-container--default .select2-selection--single,
.disciplina-form .select2-container--default .select2-selection--single {
    height: 36px;
    border: 2px solid #e6e6f4;
    border-radius: 12px;
    background: white;
}

.disciplina-filtros .select2-container--default .select2-selection--single .select2-selection__rendered,
.disciplina-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered,
.disciplina-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 10px;
    padding-right: 26px;
    color: #5a5a75;
    font-size: 13px;
    line-height: 32px;
}

.disciplina-filtros .select2-container--default .select2-selection--single .select2-selection__arrow,
.disciplina-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow,
.disciplina-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
    right: 5px;
}

.disciplina-filtros .select2-container--default.select2-container--open .select2-selection--single,
.disciplina-filtros .select2-container--default.select2-container--focus .select2-selection--single,
.disciplina-toolbar .select2-container--default.select2-container--open .select2-selection--single,
.disciplina-toolbar .select2-container--default.select2-container--focus .select2-selection--single,
.disciplina-form .select2-container--default.select2-container--open .select2-selection--single,
.disciplina-form .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--purple-light);
}

/* Al abrirse, select2 cuadra las esquinas del lado por donde sale la lista y le quita el
   borde a ese lado, para que campo y lista parezcan una sola pieza pegada. Aqui se quiere
   lo contrario: dos cajas redondeadas con un respiro entre ellas, como el resto de la
   pantalla. Los selectores llevan --below/--above para ganarle en especificidad al plugin. */

.disciplina-filtros .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.disciplina-filtros .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.disciplina-toolbar .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.disciplina-toolbar .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.disciplina-form .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.disciplina-form .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-radius: 12px;
}

/* --- En la barra del panel el campo es mas ancho y va solo, asi que se le da el
       tamano de texto del resto de la barra. --- */

.disciplina-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    font-size: 14px;
}

/* --- En el formulario los campos son mas altos (42px) y el borde va del mismo color
       que los .form-control de esa tarjeta, para que el desplegable no desentone al
       lado de los textareas. --- */

.disciplina-form .select2-container--default .select2-selection--single {
    height: 42px;
    border-color: #e2e2f5;
}

.disciplina-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    color: #3f3f5a;
    font-size: 14px;
    line-height: 38px;
}

.disciplina-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.disciplina-form .select2-container--default.select2-container--open .select2-selection--single,
.disciplina-form .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--purple);
}

/* Un campo con error se marca igual que los demas (ver .disciplina-campo.is-invalido). */
.disciplina-form .disciplina-campo.is-invalido .select2-container--default .select2-selection--single {
    border-color: #f0b4b1;
    background-color: #fffbfb;
}

.disciplina-form .disciplina-campo.is-invalido .select2-container--default.select2-container--open .select2-selection--single,
.disciplina-form .disciplina-campo.is-invalido .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #d9463f;
}

/* --- La lista ---
   Se pinta al final del <body>, fuera de la tarjeta, asi que no se le llega por el
   ancestro: la clase se le pone a mano al abrir (dropdownCssClass es del build `full`). */

.select2-dropdown.disciplina-select__lista {
    /* select2 le da al desplegable el ancho de su campo, y los nombres de las faltas son
       frases largas que en una columna de 135px caian en cuatro renglones. El min-width
       gana al width en linea, asi que la lista se lee aunque el campo sea estrecho. */
    min-width: 330px;
    border: 2px solid #e6e6f4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(63, 63, 90, .12);
}

/* El min-width de arriba es por los nombres de las faltas; en la barra del panel las
   opciones son nombres de grado y la lista se veria desproporcionada al lado de su campo. */
.select2-dropdown.disciplina-select__lista--campo {
    min-width: 0;
}

/* Devuelve el borde y el redondeo que el plugin le quita al lado por el que se abre. */
.select2-container--open .select2-dropdown.disciplina-select__lista {
    border: 2px solid var(--purple-light);
    border-radius: 12px;
}

.select2-container--open .select2-dropdown--below.disciplina-select__lista { margin-top: 4px; }
.select2-container--open .select2-dropdown--above.disciplina-select__lista { margin-top: -4px; }

.disciplina-select__lista .select2-results__option {
    padding: 7px 10px;
    color: #5a5a75;
    font-size: 13px;
}

.disciplina-select__lista .select2-results__option--highlighted[aria-selected] {
    background-color: var(--purple);
}

.disciplina-select__lista .select2-search--dropdown {
    padding: 8px;
}

.disciplina-select__lista .select2-search--dropdown .select2-search__field {
    padding: 5px 8px;
    border: 2px solid #e6e6f4;
    border-radius: 10px;
    outline: none;
    font-size: 13px;
}

.disciplina-select__lista .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--purple-light);
}

.disciplina-registros {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.disciplina-registro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
    transition: border-color .15s ease, background .15s ease;
}

.disciplina-registro:hover {
    border-color: #e2e2f5;
    background: #faf9ff;
}

/* Un demerito ya redimido pesa menos: se apaga un poco. */
.disciplina-registro.is-redimido { opacity: .72; }

.disciplina-registro .disciplina-avatar { margin-top: 2px; }

.disciplina-registro__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.disciplina-registro__alumno {
    display: block;
    font-weight: 700;
    color: #3f3f5a;
    font-size: 14px;
}

.disciplina-registro__falta {
    display: block;
    margin-top: 2px;
    color: #5a5a75;
    font-size: 13px;
    line-height: 1.35;
}

.disciplina-registro__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    color: #a0a0b8;
    font-size: 11.5px;
}

.disciplina-registro__meta i {
    margin-right: 4px;
    color: #c5c5dc;
}

.disciplina-registro__nota {
    display: block;
    margin-top: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    background: #f6f6fd;
    color: #5a5a75;
    font-size: 12px;
    line-height: 1.4;
}

.disciplina-registro__nota b { color: #3f3f5a; }

.disciplina-registro__marcas {
    flex: 0 0 auto;
    /* El cuerpo se alinea arriba (puede crecer con la descripcion), pero las marcas y los
       botones quedan centrados respecto a la fila: si no, bailan entre si. */
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.disciplina-puntos {
    font-size: 15px;
    font-weight: 700;
    color: #e08a1e;
    font-variant-numeric: tabular-nums;
}

.disciplina-badge {
    display: inline-block;
    padding: 2px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.disciplina-badge.is-ok {
    background: #e3f6ee;
    color: #1c8963;
}

.disciplina-badge.is-espera {
    background: #f1f2fb;
    color: #8a8aa3;
}

/* --- Botones de accion, en el mismo tono redondo que el contador +/- --- */

.disciplina-registro__acciones {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
}

.disciplina-icono {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease;
}

.disciplina-icono:active { transform: scale(.9); }

.disciplina-icono.is-editar {
    background: #f1f2fb;
    color: var(--purple);
}

.disciplina-icono.is-editar:hover {
    background: var(--purple);
    color: white;
}

.disciplina-icono.is-redimir {
    background: #e3f6ee;
    color: #1c8963;
}

.disciplina-icono.is-redimir:hover {
    background: #1c8963;
    color: white;
}

.disciplina-icono.is-borrar {
    background: #fdeceb;
    color: #d9463f;
}

.disciplina-icono.is-borrar:hover {
    background: #d9463f;
    color: white;
}

/* --- Paginacion --- */

.disciplina-paginacion {
    display: flex;
    justify-content: center;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid #ececf7;
}

.disciplina-paginacion .pagination { margin: 0; }

.disciplina-paginacion .pagination > li > a,
.disciplina-paginacion .pagination > li > span {
    border: none;
    margin: 0 2px;
    border-radius: 10px;
    color: var(--purple-text);
    background: #f6f6fd;
}

.disciplina-paginacion .pagination > li > a:hover {
    background: #e2e2f5;
    color: var(--purple);
}

.disciplina-paginacion .pagination > .active > a,
.disciplina-paginacion .pagination > .active > span,
.disciplina-paginacion .pagination > .active > a:hover,
.disciplina-paginacion .pagination > .active > span:hover {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
}

.disciplina-paginacion .pagination > .disabled > span {
    background: #fafafd;
    color: #cdcddd;
}

.disciplina-vacio a { color: var(--purple); }

@media (max-width: 991px) {
    .disciplina-toolbar__campo--titulo { flex: 1 1 100%; }
    .disciplina-historial__buscador { flex: 1 1 100%; }
}

@media (max-width: 767px) {
    .disciplina-registro { flex-wrap: wrap; }
    .disciplina-registro__cuerpo { flex: 1 1 100%; order: 2; }
    .disciplina-registro__marcas {
        flex-direction: row;
        align-items: center;
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;
    }
    .disciplina-registro__acciones { order: 4; margin-left: auto; }
}

/* --- Aviso en linea (descripcion del tipo de falta, conducta agotada) ------ */

.disciplina-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f1f2fb;
    color: #5a5a75;
    font-size: 12.5px;
    line-height: 1.45;
}

.disciplina-aviso > i {
    margin-top: 2px;
    color: var(--purple);
    font-size: 15px;
}

.disciplina-aviso b { color: #3f3f5a; }

/* El de "conducta en cero" es una advertencia, no un dato: va en rojo. */
#detalle_agotada {
    background: #fdeceb;
    color: #8f3733;
    margin: 16px 0 0;
}

#detalle_agotada > i { color: #d9463f; }
#detalle_agotada b { color: #8f3733; }

/* --- Formulario de alta / edicion ----------------------------------------- */

.disciplina-form__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.disciplina-form__fila > .disciplina-campo {
    flex: 1 1 260px;
    min-width: 0;
}

.disciplina-campo {
    margin-bottom: 18px;
}

.disciplina-campo > label {
    display: block;
    margin-bottom: 6px;
    color: var(--purple-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.disciplina-form .form-control {
    border-width: 2px;
    border-color: #e2e2f5;
    border-radius: 12px;
    box-shadow: none;
    color: #3f3f5a;
    transition: border-color .15s ease;
}

.disciplina-form .form-control:focus {
    border-color: var(--purple);
    box-shadow: none;
}

.disciplina-form select.form-control {
    height: 42px;
}

.disciplina-form textarea.form-control {
    padding: 10px 12px;
    resize: vertical;
}

.disciplina-campo__pista {
    display: block;
    margin-top: 5px;
    color: #a0a0b8;
    font-size: 11.5px;
}

/* --- Validacion pegada a su campo -----------------------------------------
   El mensaje va justo debajo del campo que lo provoca; el bloque rojo de arriba y
   el toastr se apagan en estas pantallas (ver la seccion 'errores_en_linea'). */

.disciplina-campo__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: #d9463f;
    font-size: 12px;
    line-height: 1.35;
}

.disciplina-campo__error i {
    margin-top: 1px;
}

.disciplina-campo.is-invalido > label {
    color: #d9463f;
}

.disciplina-form .disciplina-campo.is-invalido .form-control {
    border-color: #f0b4b1;
    background-color: #fffbfb;
}

.disciplina-form .disciplina-campo.is-invalido .form-control:focus {
    border-color: #d9463f;
}

/* Aviso de "revise los campos": va arriba del formulario, no debajo de un campo, asi
   que lleva su propio margen (el de .disciplina-aviso separa por arriba). */
.disciplina-form > .disciplina-aviso.is-error {
    margin: 0 0 18px;
    background: #fdeceb;
    color: #8f3733;
}

.disciplina-aviso.is-error > i {
    color: #d9463f;
}

.disciplina-aviso.is-error b { color: #8f3733; }

/* --- Interruptor de estatus --- */

.disciplina-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
}

/* Hijo directo: dentro del <small> hay otro <b> que NO debe volverse bloque. */
.disciplina-switch__texto > b {
    display: block;
    color: #3f3f5a;
    font-size: 13.5px;
}

.disciplina-switch__texto small {
    display: block;
    margin-top: 2px;
    color: #a0a0b8;
    font-size: 11.5px;
    line-height: 1.45;
}

.disciplina-switch__texto small b { color: #8a8aa3; }

/* bootstrap-switch se dibuja solo; aqui unicamente se le quita el borde duro. */
.disciplina-switch .bootstrap-switch {
    flex: 0 0 auto;
    border-color: #e2e2f5;
    border-radius: 10px;
}

/* --- Botonera --- */

.disciplina-form__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #ececf7;
}

.disciplina-form__acciones .btn {
    border-radius: 10px;
    padding: 8px 20px;
}

.disciplina-form__acciones .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.disciplina-form__acciones .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

@media (max-width: 575px) {
    .disciplina-switch { flex-wrap: wrap; }
    .disciplina-form__acciones { flex-direction: column-reverse; }
    .disciplina-form__acciones .btn { width: 100%; }
}

/* --- En pantallas chicas las dos columnas se apilan --- */

@media (max-width: 991px) {
    .disciplina .disciplina-toolbar { gap: 12px; }
    .disciplina-toolbar__campo,
    .disciplina-toolbar__acciones { flex: 1 1 100%; margin-left: 0; }
    .disciplina-alumnos { max-height: 320px; }
    .disciplina-card { margin-bottom: 14px; }
    .disciplina-detalle__marcador { width: 100%; }
    .disciplina-marcador { flex: 1; min-width: 0; }
}

@media (max-width: 575px) {
    /* Sin sitio para columnas: el nombre arriba y los dos contadores debajo, cada uno
       con su etiqueta porque la cabecera deja de verse. */
    .disciplina-faltas__head { display: none; }
    .disciplina-falta { flex-wrap: wrap; gap: 10px; }
    .disciplina-falta__texto { flex: 1 1 100%; }
    .disciplina-falta__col { flex: 1 1 0; }
    .disciplina-falta__col--redimidas { border-left: none; }
    .disciplina-falta__col-label {
        display: block;
        margin-bottom: 4px;
        color: #a0a0b8;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .disciplina-filtros__campo { flex: 1 1 100%; }
}


/* ============================================================================
   GLOBOS DE AYUDA (tooltips)

   Los pinta public/js/tooltip-eduapp.js. No se usa el tooltip de Bootstrap
   porque jQuery UI se carga despues y se queda con $.fn.tooltip.
   ============================================================================ */

.tooltip-eduapp {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    max-width: 260px;
    padding: 7px 11px;
    border-radius: 10px;
    background: #3f3f5a;
    color: white;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 6px 18px rgba(63, 63, 90, .25);
    /* Nunca debe robarle el raton al boton que esta explicando. */
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}

.tooltip-eduapp.is-visible {
    opacity: 1;
}

/* ============================================================================
   SOLO EN EL ADMIN: viñetas de los filtros aplicados

   El historial del administrador filtra por mas campos (alumno, fechas) que el de
   maestros, asi que ademas del boton de limpiar se enseña que hay puesto y se puede
   quitar de uno en uno. Va aparte del bloque portado para no desincronizarlo.
   ============================================================================ */

.disciplina-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.disciplina-chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
    background: #f1f2fb;
    color: #5a5a75;
    font-size: 12px;
    line-height: 1.2;
}

.disciplina-chip-filtro b {
    color: var(--purple);
}

.disciplina-chip-filtro > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    color: #a0a0b8;
    font-size: 10px;
    transition: background-color .15s ease, color .15s ease;
}

.disciplina-chip-filtro > a:hover {
    background: #d9463f;
    color: white;
}

/* Campo corto dentro de una fila del formulario (la valoracion de un tipo de falta:
   son dos digitos, no necesita la mitad del ancho). */
.disciplina-form__fila > .disciplina-campo--corto {
    flex: 0 1 180px;
}


/* ############################################################################
   MODULO DE ASISTENCIA DE PADRES A REUNIONES

   Mismo lenguaje visual que la gestion disciplinaria (tarjetas blancas de 20px,
   morado corporativo, pastillas y listas en vez de tablas), pero con prefijo
   propio `.asistencia`: el bloque de disciplina esta portado tal cual desde
   escuelapp_teachers y hay que poder tocar este sin desincronizar aquel.

   Semaforo de este modulo: verde asistio, rojo no asistio, ambar con permiso.
   ############################################################################ */

/* --- Barra superior de las tres pantallas --------------------------------- */

.asistencia .asistencia-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 6px 0;
}

.asistencia-toolbar__campo--titulo {
    flex: 1 1 auto;
    min-width: 0;
}

.asistencia-toolbar__campo--titulo > label {
    display: block;
    margin-bottom: 4px;
    color: var(--purple-text);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.asistencia-titulo {
    margin: 0;
    font-weight: 700;
    color: #3f3f5a;
}

.asistencia-toolbar__acciones {
    margin-left: auto;
}

.asistencia-toolbar__acciones .btn + .btn {
    margin-left: 6px;
}

.asistencia-ayuda {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid #ececf7;
    color: #8a8aa3;
    font-size: 12.5px;
}

.asistencia-ayuda a,
.asistencia-vacio a { color: var(--purple); }

/* --- Tarjeta contenedora --- */

.asistencia-card {
    background: white;
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 14px;
}

.asistencia-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ececf7;
}

.asistencia-card__head h4 {
    margin: 0;
    font-weight: 700;
    color: #3f3f5a;
}

.asistencia-chip {
    display: inline-block;
    min-width: 26px;
    padding: 1px 9px;
    margin-left: 4px;
    border-radius: 999px;
    background: #f1f2fb;
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.asistencia-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eeecff;
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Filtros del listado --- */

.asistencia-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding-top: 16px;
}

.asistencia-filtros__campo {
    flex: 0 1 180px;
    min-width: 0;
}

.asistencia-filtros__campo--buscador {
    flex: 1 1 220px;
}

/* Buscador sin mas filtros al lado (la toma de asistencia): sin tope se estiraria
   de lado a lado de la tarjeta. */
.asistencia-filtros__campo--solo {
    flex: 0 1 340px;
}

.asistencia-filtros__campo > label {
    display: block;
    margin-bottom: 5px;
    color: var(--purple-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.asistencia-filtros__campo .form-control {
    height: 36px;
    border: 2px solid #e6e6f4;
    border-radius: 12px;
    box-shadow: none;
    color: #5a5a75;
    font-size: 13px;
}

.asistencia-filtros__campo .form-control:focus {
    border-color: var(--purple-light);
    box-shadow: none;
}

.asistencia-filtros__acciones {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

/* Vinetas de lo que esta filtrado: se ve de un vistazo y se quita de una en una. */

.asistencia-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.asistencia-chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
    background: #f1f2fb;
    color: #5a5a75;
    font-size: 12px;
    line-height: 1.2;
}

.asistencia-chip-filtro b { color: var(--purple); }

.asistencia-chip-filtro > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    color: #a0a0b8;
    font-size: 10px;
    transition: background-color .15s ease, color .15s ease;
}

.asistencia-chip-filtro > a:hover {
    background: #d9463f;
    color: white;
}

/* --- select2 con la pinta del modulo --------------------------------------
   select2 esconde el <select> y pinta el suyo, asi que las reglas de .form-control
   no le llegan: hay que repetirlas sobre su contenedor. */

.asistencia-filtros .select2-container {
    width: 100% !important;
}

.asistencia-filtros .select2-container--default .select2-selection--single {
    height: 36px;
    border: 2px solid #e6e6f4;
    border-radius: 12px;
    background: white;
}

.asistencia-filtros .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 10px;
    padding-right: 26px;
    color: #5a5a75;
    font-size: 13px;
    line-height: 32px;
}

.asistencia-filtros .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
    right: 5px;
}

/* Al abrirse, select2 cuadra las esquinas del lado por donde sale la lista y le quita
   el borde. Aqui se quiere lo contrario: dos cajas redondeadas con un respiro entre
   ellas. Los selectores llevan --below/--above para ganarle en especificidad. */
.asistencia-filtros .select2-container--default.select2-container--open .select2-selection--single,
.asistencia-filtros .select2-container--default.select2-container--focus .select2-selection--single,
.asistencia-filtros .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.asistencia-filtros .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-color: var(--purple-light);
    border-radius: 12px;
}

/* La lista se pinta al final del <body>, fuera de la tarjeta, asi que no se le llega
   por el ancestro: la clase se le pone a mano al abrir (dropdownCssClass es del
   build `full` de select2 y aqui se carga el core). */

.select2-dropdown.asistencia-select__lista {
    border: 2px solid #e6e6f4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(63, 63, 90, .12);
}

.select2-container--open .select2-dropdown.asistencia-select__lista {
    border: 2px solid var(--purple-light);
    border-radius: 12px;
}

.select2-container--open .select2-dropdown--below.asistencia-select__lista { margin-top: 4px; }
.select2-container--open .select2-dropdown--above.asistencia-select__lista { margin-top: -4px; }

.asistencia-select__lista .select2-results__option {
    padding: 7px 10px;
    color: #5a5a75;
    font-size: 13px;
}

.asistencia-select__lista .select2-results__option--highlighted[aria-selected] {
    background-color: var(--purple);
}

.asistencia-select__lista .select2-search--dropdown { padding: 8px; }

.asistencia-select__lista .select2-search--dropdown .select2-search__field {
    padding: 5px 8px;
    border: 2px solid #e6e6f4;
    border-radius: 10px;
    outline: none;
    font-size: 13px;
}

.asistencia-select__lista .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--purple-light);
}

/* --- Listado de eventos ---------------------------------------------------- */

.asistencia-eventos {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.asistencia-evento {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
    transition: border-color .15s ease, background .15s ease;
}

.asistencia-evento:hover {
    border-color: #e2e2f5;
    background: #faf9ff;
}

/* Bloque de fecha tipo hoja de calendario: la reunion se ubica de un vistazo. */
.asistencia-fecha {
    flex: 0 0 58px;
    width: 58px;
    padding: 6px 0;
    border-radius: 14px;
    background: #f1f2fb;
    text-align: center;
    line-height: 1.1;
}

.asistencia-fecha__dia {
    display: block;
    color: var(--purple);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.asistencia-fecha__mes {
    display: block;
    margin-top: 2px;
    color: #8a8aa3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.asistencia-fecha__anio {
    display: block;
    color: #b0b0c4;
    font-size: 10px;
}

.asistencia-evento__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.asistencia-evento__titulo {
    display: block;
    font-weight: 700;
    color: #3f3f5a;
    font-size: 14px;
    line-height: 1.35;
}

.asistencia-evento__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 6px;
    color: #a0a0b8;
    font-size: 11.5px;
}

.asistencia-evento__meta i {
    margin-right: 4px;
    color: #c5c5dc;
}

/* --- Resumen de la asistencia (barra + cifras) ----------------------------- */

.asistencia-resumen {
    flex: 0 0 210px;
    align-self: center;
}

.asistencia-barra {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: #f1f2fb;
}

.asistencia-barra__parte { transition: width .25s ease; }
.asistencia-barra__parte--si      { background: #24a37a; }
.asistencia-barra__parte--no      { background: #d9463f; }
.asistencia-barra__parte--permiso { background: #e08a1e; }

.asistencia-resumen__cifras {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 7px;
    font-size: 11.5px;
    color: #a0a0b8;
}

.asistencia-resumen__dato {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.asistencia-resumen__dato i { margin-right: 3px; font-size: 8px; vertical-align: middle; }
.asistencia-resumen__dato.is-si      { color: #24a37a; }
.asistencia-resumen__dato.is-no      { color: #d9463f; }
.asistencia-resumen__dato.is-permiso { color: #e08a1e; }

.asistencia-resumen__total {
    margin-left: auto;
    color: #8a8aa3;
    font-variant-numeric: tabular-nums;
}

.asistencia-resumen__total b { color: #3f3f5a; font-size: 13px; }

/* Sin nadie en el listado no hay porcentaje que ensenar. */
.asistencia-resumen__vacio {
    color: #b0b0c4;
    font-size: 11.5px;
    font-style: italic;
}

.asistencia-badge {
    display: inline-block;
    padding: 2px 11px;
    border-radius: 999px;
    background: #f1f2fb;
    color: #8a8aa3;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.asistencia-badge.is-periodo {
    background: #eeecff;
    color: var(--purple);
}

/* --- Botones de accion redondos, como en disciplina --- */

.asistencia-evento__acciones {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
}

.asistencia-icono {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease;
}

.asistencia-icono:active { transform: scale(.9); }

.asistencia-icono.is-tomar {
    background: #f1f2fb;
    color: var(--purple);
}

.asistencia-icono.is-tomar:hover {
    background: var(--purple);
    color: white;
}

.asistencia-icono.is-borrar {
    background: #fdeceb;
    color: #d9463f;
}

.asistencia-icono.is-borrar:hover {
    background: #d9463f;
    color: white;
}

/* --- Marcadores del detalle (asistieron / faltaron / permiso) --------------- */

.asistencia-marcadores {
    display: flex;
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.asistencia-marcador {
    flex: 1 1 96px;
    min-width: 96px;
    padding: 8px 14px;
    border-radius: 14px;
    background: #f6f6fd;
    text-align: center;
}

.asistencia-marcador__label {
    display: block;
    color: #8a8aa3;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.asistencia-marcador__valor {
    display: block;
    margin-top: 2px;
    font-size: 21px;
    font-weight: 700;
    color: #3f3f5a;
    font-variant-numeric: tabular-nums;
}

.asistencia-marcador__valor.is-si      { color: #24a37a; }
.asistencia-marcador__valor.is-no      { color: #d9463f; }
.asistencia-marcador__valor.is-permiso { color: #e08a1e; }

/* --- Ficha del evento en la pantalla de tomar asistencia --- */

.asistencia-ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f6f6fd;
}

.asistencia-ficha__cuerpo {
    flex: 1 1 260px;
    min-width: 0;
}

.asistencia-ficha__titulo {
    display: block;
    font-weight: 700;
    color: #3f3f5a;
    font-size: 15px;
    line-height: 1.35;
}

.asistencia-ficha__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 6px;
    color: #8a8aa3;
    font-size: 11.5px;
}

.asistencia-ficha__meta i { margin-right: 4px; color: #c5c5dc; }

.asistencia-progreso {
    flex: 1 1 240px;
    min-width: 200px;
}

.asistencia-progreso__cifra {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    color: #8a8aa3;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.asistencia-progreso__cifra b {
    color: #24a37a;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    text-transform: none;
}

/* --- Lista de alumnos con su interruptor de estado ------------------------- */

.asistencia-lista {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.asistencia-alumno {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 8px;
    border: 2px solid #f1f2fb;
    border-left-width: 5px;
    border-radius: 16px;
    transition: border-color .15s ease, background .15s ease;
}

.asistencia-alumno:hover { background: #faf9ff; }

/* El borde izquierdo repite el color del estado: la lista se lee de un vistazo
   sin tener que mirar cada interruptor. */
.asistencia-alumno.is-si      { border-left-color: #24a37a; }
.asistencia-alumno.is-no      { border-left-color: #d9463f; }
.asistencia-alumno.is-permiso { border-left-color: #e08a1e; }

.asistencia-alumno__orden {
    flex: 0 0 26px;
    color: #c5c5dc;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.asistencia-alumno__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.asistencia-alumno__nombre {
    display: block;
    color: #3f3f5a;
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asistencia-alumno__pista {
    display: block;
    margin-top: 1px;
    color: #b0b0c4;
    font-size: 11px;
}

/* El aviso de guardado ocupa sitio siempre (visibility, no display) para que el
   interruptor no se corra unos pixeles cada vez que se marca a alguien. */
.asistencia-alumno__guardado {
    flex: 0 0 18px;
    color: #24a37a;
    font-size: 12px;
    text-align: center;
    visibility: hidden;
}

.asistencia-alumno__guardado.is-visible { visibility: visible; }
.asistencia-alumno__guardado.is-guardando { color: #b0b0c4; }

.asistencia-lista__vacio {
    padding: 22px 12px;
    color: #a0a0b8;
    font-style: italic;
    text-align: center;
}

/* --- Interruptor de tres estados --- */

.asistencia-segmento {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: #f1f2fb;
}

.asistencia-segmento__btn {
    border: none;
    border-radius: 999px;
    padding: 6px 15px;
    background: transparent;
    color: #8a8aa3;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}

.asistencia-segmento__btn:active { transform: scale(.95); }

.asistencia-segmento__btn:hover {
    background: #e5e5f4;
    color: #5a5a75;
}

.asistencia-segmento__btn.is-activo {
    color: white;
    box-shadow: 0 3px 8px rgba(63, 63, 90, .18);
}

.asistencia-segmento__btn.is-activo.is-si,
.asistencia-segmento__btn.is-activo.is-si:hover      { background: #24a37a; color: white; }
.asistencia-segmento__btn.is-activo.is-no,
.asistencia-segmento__btn.is-activo.is-no:hover      { background: #d9463f; color: white; }
.asistencia-segmento__btn.is-activo.is-permiso,
.asistencia-segmento__btn.is-activo.is-permiso:hover { background: #e08a1e; color: white; }

/* --- Formulario de alta ---------------------------------------------------- */

.asistencia-form__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.asistencia-form__fila > .asistencia-campo {
    flex: 1 1 260px;
    min-width: 0;
}

.asistencia-campo { margin-bottom: 18px; }

.asistencia-campo > label {
    display: block;
    margin-bottom: 6px;
    color: var(--purple-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.asistencia-campo__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.asistencia-campo__cabecera > label { margin-bottom: 0; }

.asistencia-form .form-control {
    border-width: 2px;
    border-color: #e2e2f5;
    border-radius: 12px;
    box-shadow: none;
    color: #3f3f5a;
    transition: border-color .15s ease;
}

.asistencia-form .form-control:focus {
    border-color: var(--purple);
    box-shadow: none;
}

.asistencia-form input.form-control { height: 42px; }

.asistencia-campo__pista {
    display: block;
    margin-top: 5px;
    color: #a0a0b8;
    font-size: 11.5px;
}

/* Validacion pegada a su campo: el bloque rojo de arriba se apaga con la seccion
   'errores_en_linea' del layout. */

.asistencia-campo__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: #d9463f;
    font-size: 12px;
    line-height: 1.35;
}

.asistencia-campo__error i { margin-top: 1px; }

.asistencia-campo.is-invalido > label,
.asistencia-campo.is-invalido .asistencia-campo__cabecera > label { color: #d9463f; }

.asistencia-form .asistencia-campo.is-invalido .form-control { border-color: #f0b4b1; background-color: #fffbfb; }
.asistencia-form .asistencia-campo.is-invalido .form-control:focus { border-color: #d9463f; }
.asistencia-campo.is-invalido .asistencia-opciones { border-color: #f0b4b1; background-color: #fffbfb; }

/* --- Pastillas seleccionables (periodo y grados) ---------------------------
   El <input> real se esconde y la pastilla es su <label>: asi el formulario sigue
   mandando measure_id / school_grades[] sin JavaScript de por medio. */

.asistencia-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
}

.asistencia-opciones--grados {
    max-height: 260px;
    overflow-y: auto;
}

.asistencia-opcion {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.asistencia-opcion input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.asistencia-opcion span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 2px solid #e2e2f5;
    border-radius: 999px;
    background: white;
    color: var(--purple-text);
    font-size: 13px;
    font-weight: 600;
    transition: all .15s ease;
}

.asistencia-opcion span:before {
    content: '\f00c'; /* fa-check */
    font-family: FontAwesome;
    font-size: 10px;
    color: #d5d5e8;
}

.asistencia-opcion:hover span {
    border-color: var(--purple-light);
    color: var(--purple);
}

.asistencia-opcion input:checked + span {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
    box-shadow: 0 4px 10px rgba(96, 84, 255, .28);
}

.asistencia-opcion input:checked + span:before { color: white; }

/* El foco de teclado tiene que verse: el <input> real es invisible. */
.asistencia-opcion input:focus + span { border-color: var(--purple-dark); }

/* Grado que no tiene el periodo escogido (o que no tiene ninguno): se apaga para que se
   vea que no se puede crear un evento suyo con ese periodo. El <input> va disabled, asi
   que ademas no se envia; el globo de ayuda lo pone el JS en la propia pastilla. */
.asistencia-opcion.is-incompatible {
    cursor: not-allowed;
}

.asistencia-opcion.is-incompatible span,
.asistencia-opcion.is-incompatible:hover span {
    border-color: #f0f0f6;
    background: #fafafd;
    color: #c5c5dc;
    box-shadow: none;
}

.asistencia-opcion.is-incompatible span:before { color: #e4e4ee; }

.asistencia-opciones__vacio {
    color: #a0a0b8;
    font-size: 13px;
    font-style: italic;
}

/* --- Botonera --- */

.asistencia-form__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #ececf7;
}

.asistencia-form__acciones .btn {
    border-radius: 10px;
    padding: 8px 20px;
}

.asistencia-form__acciones .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.asistencia-form__acciones .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

/* --- Aviso en linea --- */

.asistencia-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f1f2fb;
    color: #5a5a75;
    font-size: 12.5px;
    line-height: 1.45;
}

.asistencia-aviso > i {
    margin-top: 2px;
    color: var(--purple);
    font-size: 15px;
}

.asistencia-aviso b { color: #3f3f5a; }

.asistencia-form > .asistencia-aviso.is-error {
    margin: 0 0 18px;
    background: #fdeceb;
    color: #8f3733;
}

.asistencia-aviso.is-error > i { color: #d9463f; }
.asistencia-aviso.is-error b { color: #8f3733; }

/* --- Estados vacios --- */

.asistencia-vacio {
    padding: 42px 20px;
    color: #a0a0b8;
    text-align: center;
}

.asistencia-vacio i { font-size: 34px; color: #d5d5e8; }

.asistencia-vacio h4 {
    margin: 14px 0 4px;
    color: #8a8aa3;
}

.asistencia-vacio p { margin: 0; }

/* --- Paginacion --- */

.asistencia-paginacion {
    display: flex;
    justify-content: center;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid #ececf7;
}

.asistencia-paginacion .pagination { margin: 0; }

.asistencia-paginacion .pagination > li > a,
.asistencia-paginacion .pagination > li > span {
    border: none;
    margin: 0 2px;
    border-radius: 10px;
    color: var(--purple-text);
    background: #f6f6fd;
}

.asistencia-paginacion .pagination > li > a:hover {
    background: #e2e2f5;
    color: var(--purple);
}

.asistencia-paginacion .pagination > .active > a,
.asistencia-paginacion .pagination > .active > span,
.asistencia-paginacion .pagination > .active > a:hover,
.asistencia-paginacion .pagination > .active > span:hover {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
}

.asistencia-paginacion .pagination > .disabled > span {
    background: #fafafd;
    color: #cdcddd;
}

/* --- Adaptacion a pantallas chicas ---------------------------------------- */

@media (max-width: 991px) {
    .asistencia .asistencia-toolbar { gap: 12px; }
    .asistencia-toolbar__campo--titulo,
    .asistencia-toolbar__acciones { flex: 1 1 100%; margin-left: 0; }

    /* El resumen baja debajo del titulo y ocupa todo el ancho: en tablet no caben
       las cuatro columnas en la misma fila. */
    .asistencia-evento { flex-wrap: wrap; }
    .asistencia-evento__cuerpo { flex: 1 1 200px; }
    .asistencia-resumen { flex: 1 1 100%; order: 4; }
    .asistencia-evento__acciones { order: 3; }
}

@media (max-width: 767px) {
    .asistencia-filtros__campo { flex: 1 1 100%; }

    .asistencia-alumno { flex-wrap: wrap; }
    .asistencia-alumno__cuerpo { flex: 1 1 160px; }
    .asistencia-segmento { flex: 1 1 100%; justify-content: center; margin-top: 4px; }
}

@media (max-width: 575px) {
    .asistencia-segmento__btn { padding: 6px 10px; font-size: 11.5px; }
    .asistencia-form__acciones { flex-direction: column-reverse; }
    .asistencia-form__acciones .btn { width: 100%; }
}


/* ============================================================================
   PANEL DE NOTAS DEL ADMINISTRADOR  (/school/notas)

   Misma línea gráfica que el colector y el panorama del panel de maestros: tarjetas
   blancas de esquinas redondeadas sobre el fondo gris del sistema, morado de la marca
   para lo activo, textos secundarios apagados y una sola señal de color —la franja de
   la izquierda de cada fila— para saber cómo va un alumno sin leer una sola nota.

   Los prefijos `.colector-*` y `.panorama-*` son los mismos de escuelapp_teachers a
   propósito: las dos pantallas se leen igual y quien conoce una conoce la otra.
   ============================================================================ */

.colector {
    --colector-borde: #e6e6f2;
    --colector-tenue: #8a8aa3;
    --colector-ok: #14915c;
    --colector-ok-suave: #e5f7ee;
    --colector-mal: #cf3050;
    --colector-mal-suave: #fdeaee;
    --colector-alerta: #b26a00;
    --colector-alerta-suave: #fff4e0;
    --panorama-bien: #17a06a;
    --panorama-atencion: #d98324;
    --panorama-riesgo: #d63a58;
    --panorama-sin: #b6b6c8;
    color: #3f3f57;
}

/* --- Cabecera de la pantalla --- */

.colector-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 8px 0 4px;
}

.colector-cabecera__texto {
    flex: 1 1 320px;
}

.colector-cabecera h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: var(--purple);
}

.colector-cabecera h3 .fa { margin-right: 8px; }

.colector-cabecera__sub {
    margin: 4px 0 0;
    color: var(--colector-tenue);
    font-size: 13px;
}

.colector-cabecera__acciones {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.colector-ayuda {
    margin: 6px 0 10px;
    color: var(--colector-tenue);
    font-size: 12.5px;
    line-height: 1.6;
    max-width: 1000px;
}

/* --- Tarjetas --- */

.colector-card {
    background: white;
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 16px;
}

.colector-vacio {
    text-align: center;
    padding: 34px 20px;
    color: var(--colector-tenue);
}

.colector-vacio i {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    color: #cfcfe4;
}

.colector-vacio p { margin: 0; line-height: 1.7; }

/* --- Marcadores (KPI) --- */

.colector-marcadores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.colector-marcador {
    flex: 1 1 130px;
    background: #f8f8fd;
    border-left: 4px solid var(--colector-borde);
    border-radius: 12px;
    padding: 9px 12px;
}

.colector-marcador--ok { border-left-color: var(--colector-ok); }
.colector-marcador--mal { border-left-color: var(--colector-mal); }
.colector-marcador--alerta { border-left-color: var(--colector-alerta); }

.colector-marcador__label {
    display: block;
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--colector-tenue);
    font-weight: 700;
}

.colector-marcador__valor {
    display: block;
    margin-top: 2px;
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.colector-marcador__valor--texto { font-size: 15px; }

.colector-marcador--ok .colector-marcador__valor { color: var(--colector-ok); }
.colector-marcador--mal .colector-marcador__valor { color: var(--colector-mal); }
.colector-marcador--alerta .colector-marcador__valor { color: var(--colector-alerta); }

/* --- Avisos --- */

.colector-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.6;
    margin-bottom: 14px;
    background: #f1f1fb;
    color: #55556e;
}

.colector-aviso i { margin-top: 2px; }

.colector-aviso--alerta {
    background: var(--colector-alerta-suave);
    color: var(--colector-alerta);
}

.colector-aviso--error {
    background: var(--colector-mal-suave);
    color: var(--colector-mal);
}

.colector-aviso a { color: inherit; text-decoration: underline; }

/* --- Tabla --- */

.colector-tabla-wrap {
    overflow: auto;
    border-radius: 16px;
    border: 1px solid var(--colector-borde);
}

.colector-tabla {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    font-size: 13px;
}

.colector-tabla th,
.colector-tabla td {
    padding: 9px 10px;
    border-bottom: 1px solid #f0f0f7;
    vertical-align: middle;
    white-space: nowrap;
}

.colector-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f6f6fc;
    color: var(--purple-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--colector-borde);
    text-align: center;
}

.colector-tabla thead th.colector-tabla__alumno {
    text-align: left;
    background: #f6f6fc;
    z-index: 3;
}

/* La regla `.colector-tabla td` que centra las notas le gana en especificidad a una
   clase suelta, así que la primera columna tiene que calificar el elemento para
   quedarse alineada a la izquierda. */
.colector-tabla td.colector-tabla__alumno,
.colector-tabla th.colector-tabla__alumno {
    position: sticky;
    left: 0;
    background: white;
    text-align: left;
    min-width: 240px;
    z-index: 1;
    border-right: 1px solid var(--colector-borde);
}

.colector-tabla tbody tr:hover td,
.colector-tabla tbody tr:hover td.colector-tabla__alumno {
    background-color: #fbfbfe;
}

.colector-tabla td {
    text-align: center;
    color: #55556e;
}

.colector-tabla__sep {
    border-left: 2px solid var(--colector-borde) !important;
}

.colector-tabla tfoot td {
    background: #f8f8fd;
    font-weight: 700;
    color: var(--purple-text);
    border-bottom: none;
}

.colector-tabla tfoot td.colector-tabla__alumno {
    background: #f8f8fd;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* --- Resumen del grado --- */

.panorama-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    background: white;
    border-radius: 18px;
    padding: 16px 22px;
    margin-bottom: 16px;
}

.panorama-resumen__promedio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 20px;
    border-right: 1px solid var(--colector-borde);
}

.panorama-resumen__cifra {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--purple);
    font-variant-numeric: tabular-nums;
}

.panorama-resumen__cifra.is-bajo { color: var(--panorama-riesgo); }

.panorama-resumen__pie {
    font-size: 12.5px;
    color: #55556e;
    line-height: 1.5;
}

.panorama-resumen__pie small { color: var(--colector-tenue); font-size: 11px; }

.panorama-resumen__estados {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.panorama-pastilla {
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--colector-borde);
    background: white;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 12.5px;
    color: #55556e;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.panorama-pastilla b {
    font-size: 15px;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}

.panorama-pastilla:hover,
.panorama-pastilla:focus {
    border-color: #cfcfe4;
    outline: none;
}

.panorama-pastilla.is-bien b { color: var(--panorama-bien); }
.panorama-pastilla.is-atencion b { color: var(--panorama-atencion); }
.panorama-pastilla.is-riesgo b { color: var(--panorama-riesgo); }
.panorama-pastilla.is-sin b { color: var(--panorama-sin); }

.panorama-pastilla.is-activa {
    color: white;
    border-color: transparent;
}

.panorama-pastilla.is-activa b { color: white; }

.panorama-pastilla.is-bien.is-activa { background: var(--panorama-bien); }
.panorama-pastilla.is-atencion.is-activa { background: var(--panorama-atencion); }
.panorama-pastilla.is-riesgo.is-activa { background: var(--panorama-riesgo); }
.panorama-pastilla.is-sin.is-activa { background: #8f8fa8; }

/* --- Barra de la tabla --- */

.panorama-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.panorama-barra__buscar { flex: 0 1 280px; }

.panorama-barra__conteo {
    color: var(--colector-tenue);
    font-size: 12.5px;
}

.panorama-barra__limpiar { color: var(--purple); font-size: 12.5px; }

.panorama-barra__todos { margin-left: auto; }

/* --- Ordenamiento por columna --- */

.panorama-orden {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px !important;
}

.panorama-orden:hover { color: var(--purple); }

.panorama-orden:after {
    content: '\f0dc';
    font-family: FontAwesome;
    position: absolute;
    right: 5px;
    opacity: .25;
    font-size: 10px;
}

.panorama-orden.is-asc:after { content: '\f0de'; opacity: .9; }
.panorama-orden.is-desc:after { content: '\f0dd'; opacity: .9; }

/* --- Filas --- */

.panorama-fila td.colector-tabla__alumno {
    border-left: 4px solid transparent;
}

.panorama-fila.is-bien td.colector-tabla__alumno { border-left-color: var(--panorama-bien); }
.panorama-fila.is-atencion td.colector-tabla__alumno { border-left-color: var(--panorama-atencion); }
.panorama-fila.is-riesgo td.colector-tabla__alumno { border-left-color: var(--panorama-riesgo); }
.panorama-fila.is-sin td.colector-tabla__alumno { border-left-color: var(--panorama-sin); }

.panorama-nombre {
    font-weight: 600;
    color: #3f3f57;
}

.panorama-nota,
.panorama-promedio {
    display: inline-block;
    min-width: 46px;
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.panorama-promedio { font-weight: 700; }

/* Las tres bandas del grado: rojo bajo la mínima del MINED, ámbar entre esa y la del
   colegio, y sin color de la del colegio para arriba. Lo normal no se pinta: así lo
   único que resalta es lo que hay que mirar. */
.panorama-nota.es-mal,
.panorama-promedio.es-mal {
    background: var(--colector-mal-suave);
    color: var(--colector-mal);
}

.panorama-nota.es-justo,
.panorama-promedio.es-justo {
    background: var(--colector-alerta-suave);
    color: var(--colector-alerta);
}

.panorama-vacio { color: #c3c3d4; }

.panorama-estado { text-align: left !important; }

.panorama-etiqueta {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.panorama-fila.is-bien .panorama-etiqueta { color: var(--panorama-bien); }
.panorama-fila.is-atencion .panorama-etiqueta { color: var(--panorama-atencion); }
.panorama-fila.is-riesgo .panorama-etiqueta { color: var(--panorama-riesgo); }
.panorama-fila.is-sin .panorama-etiqueta { color: var(--panorama-sin); }

.panorama-estado small {
    display: block;
    color: var(--colector-tenue);
    font-size: 11px;
}

.panorama-nota-pie {
    margin: 12px 0 0;
    color: var(--colector-tenue);
    font-size: 11.5px;
    line-height: 1.6;
}

/* ============================================================================
   Lo propio del panel de notas del administrador
   ============================================================================ */

.notas-selector {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 260px;
}

.notas-selector label {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--colector-tenue);
    font-weight: 700;
}

.notas-selector .form-control {
    border-radius: 10px;
    border-color: var(--colector-borde);
    height: 34px;
}

/* --- Pestañas de periodo --- */

.notas-periodos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--colector-borde);
}

.notas-periodo {
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--colector-borde);
    background: white;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #55556e;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.notas-periodo:hover,
.notas-periodo:focus {
    border-color: var(--purple-light);
    color: var(--purple);
    outline: none;
}

.notas-periodo.is-activo {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
}

/* El promedio del año no es un periodo más: se separa del resto. */
.notas-periodo--anual { margin-left: auto; }
.notas-periodo--anual .fa { margin-right: 5px; }

.notas-vista-pie {
    margin: 0 0 10px;
    color: var(--colector-tenue);
    font-size: 11.5px;
}

/* --- Tabla del grado --- */

.notas-tabla-wrap { max-height: 68vh; }

.notas-materia {
    max-width: 130px;
    min-width: 92px;
    white-space: normal !important;
    line-height: 1.35;
}

.notas-alumno {
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    color: #3f3f57;
    /* Un <button> no hereda la tipografía de la página: sin esto el nombre del alumno
       saldría en la fuente por defecto del navegador y no en la del sistema. */
    font: inherit;
    cursor: pointer;
}

.notas-alumno .fa {
    color: #c3c3d4;
    margin-right: 5px;
}

.notas-alumno:hover .panorama-nombre,
.notas-alumno:focus .panorama-nombre {
    color: var(--purple);
    text-decoration: underline;
}

.notas-alumno:hover .fa { color: var(--purple-light); }

.notas-nie {
    display: block;
    padding-left: 20px;
    color: #b9b9cc;
    font-size: 10.5px;
}

.notas-celda {
    border: 1px solid transparent;
    background: none;
    border-radius: 9px;
    padding: 1px 4px;
    min-width: 58px;
    position: relative;
    font: inherit;
    cursor: pointer;
}

.notas-celda:hover,
.notas-celda:focus {
    border-color: var(--purple-light);
    background: #f6f6ff;
    outline: none;
}

/* La flecha marca las notas que subieron con la recuperación. */
.notas-celda__reca {
    position: absolute;
    top: -2px;
    right: -1px;
    font-size: 8px;
    color: var(--purple-light);
}

.notas-sin-resultados {
    text-align: center !important;
    padding: 26px !important;
    color: var(--colector-tenue);
}

/* --- Panel lateral (expediente y editor) --- */

body.notas-sin-scroll { overflow: hidden; }

.notas-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    visibility: hidden;
    opacity: 0;
    transition: opacity .18s ease, visibility .18s ease;
}

.notas-drawer.is-abierto { visibility: visible; opacity: 1; }

.notas-drawer__fondo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(35, 35, 60, .38);
}

.notas-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 620px;
    max-width: 96vw;
    background: #fbfbff;
    box-shadow: -14px 0 40px rgba(40, 40, 80, .18);
    display: flex;
    flex-direction: column;
    transform: translateX(24px);
    transition: transform .18s ease;
}

.notas-drawer.is-abierto .notas-drawer__panel { transform: translateX(0); }

.notas-drawer__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid var(--colector-borde);
}

.notas-drawer__titulo { flex: 1 1 auto; min-width: 0; }

.notas-drawer__titulo h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #3f3f57;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notas-drawer__titulo small {
    display: block;
    color: var(--colector-tenue);
    font-size: 12px;
    margin-top: 2px;
}

.notas-drawer__volver,
.notas-drawer__cerrar {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
    color: var(--purple);
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 8px;
}

.notas-drawer__volver:hover,
.notas-drawer__cerrar:hover { background: #f1f1fb; }

.notas-drawer__cerrar { font-size: 24px; line-height: 1; color: var(--colector-tenue); }

.notas-drawer__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px 24px;
}

.notas-cargando {
    text-align: center;
    padding: 40px 20px;
    color: var(--colector-tenue);
}

.notas-cargando .fa { margin-right: 8px; }

/* --- Expediente del alumno --- */

.notas-expediente__tabla td.colector-tabla__alumno,
.notas-expediente__tabla th.colector-tabla__alumno {
    min-width: 150px;
    white-space: normal;
}

/* --- Editor de notas --- */

.notas-editor__tabla {
    width: 100%;
    background: white;
    border: 1px solid var(--colector-borde);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 13px;
}

.notas-editor__tabla thead th {
    background: #f6f6fc;
    color: var(--purple-text);
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--colector-borde);
}

.notas-editor__tabla td {
    padding: 8px 12px;
    border-bottom: 1px solid #f2f2f8;
    vertical-align: middle;
}

.notas-editor__tabla tbody tr:last-child td { border-bottom: none; }

.notas-editor__col { width: 1%; white-space: nowrap; text-align: right !important; }

.notas-editor__act { line-height: 1.35; }

.notas-editor__act small {
    display: block;
    color: #a8a8bd;
    font-size: 11px;
    margin-top: 1px;
}

.notas-editor__sello {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eeeef7;
    color: var(--colector-tenue);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.notas-editor__peso { color: var(--colector-tenue); font-size: 12px; }

.notas-editor__aporte {
    color: #55556e;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.notas-editor__tabla tfoot td {
    background: #f8f8fd;
    font-weight: 700;
    color: var(--purple-text);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.notas-editor__total {
    font-size: 17px;
    color: var(--purple);
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.notas-input {
    width: 74px;
    text-align: right;
    padding: 5px 8px;
    border: 1px solid var(--colector-borde);
    border-radius: 9px;
    font-weight: 600;
    font-size: 13.5px;
    color: #3f3f57;
    font-variant-numeric: tabular-nums;
}

.notas-input:focus {
    outline: none;
    border-color: var(--purple-light);
    box-shadow: 0 0 0 3px rgba(96, 84, 255, .12);
}

.notas-input.is-mala {
    border-color: var(--colector-mal);
    background: var(--colector-mal-suave);
}

/* Las flechitas del input numérico estorban en una tabla de notas. */
.notas-input::-webkit-outer-spin-button,
.notas-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.notas-input[type=number] { -moz-appearance: textfield; }

/* --- Recuperación --- */

.notas-editor__reca {
    margin-top: 14px;
    padding: 14px 16px;
    background: #f6f4ff;
    border: 1px dashed #d7d0f7;
    border-radius: 14px;
}

.notas-editor__reca-head h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--purple);
}

.notas-editor__reca-head .fa { margin-right: 6px; }

.notas-editor__reca-head small {
    display: block;
    color: var(--colector-tenue);
    font-size: 11.5px;
    margin-top: 2px;
    line-height: 1.5;
}

.notas-editor__reca-cuerpo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.notas-editor__reca-cuerpo label {
    margin: 0;
    font-size: 12px;
    color: #55556e;
    font-weight: 600;
}

.notas-editor__reca-flecha { color: #c3b6e8; }

.notas-editor__reca-final { text-align: right; margin-left: auto; }

.notas-editor__reca-final small {
    display: block;
    color: var(--colector-tenue);
    font-size: 11px;
}

.notas-editor__reca-final b {
    font-size: 19px;
    color: var(--purple);
    font-variant-numeric: tabular-nums;
}

.notas-editor__reca-pie {
    margin: 10px 0 0;
    color: var(--colector-tenue);
    font-size: 11px;
    line-height: 1.5;
}

/* --- Pie del editor --- */

.notas-editor__pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--colector-borde);
}

.notas-editor__ayuda {
    flex: 1 1 220px;
    margin: 0;
    color: var(--colector-tenue);
    font-size: 11.5px;
    line-height: 1.5;
}

.notas-editor__sucio {
    display: block;
    margin-top: 3px;
    color: var(--colector-alerta);
    font-weight: 600;
}

.notas-editor__guardar { border-radius: 12px; padding: 9px 22px; font-weight: 600; }

.notas-editor__guardar.is-cargando { opacity: .6; }

/* --- Responsive --- */

@media (max-width: 991px) {
    .colector-cabecera__acciones { margin-left: 0; flex: 1 1 100%; }
    .panorama-resumen__estados { margin-left: 0; }
    .notas-periodo--anual { margin-left: 0; }
}

@media (max-width: 767px) {
    .colector-card { padding: 16px; border-radius: 16px; }
    .notas-selector { min-width: 100%; }
    .panorama-barra__buscar { flex: 1 1 100%; }
    .panorama-barra__todos { margin-left: 0; }
    .panorama-resumen__promedio { border-right: none; padding-right: 0; }
    .colector-tabla td.colector-tabla__alumno,
    .colector-tabla th.colector-tabla__alumno { min-width: 190px; }
    .notas-drawer__panel { width: 100%; }
}

@media print {
    .notas-drawer,
    .notas-periodos,
    .panorama-barra,
    .notas-vista-pie { display: none !important; }

    .notas-tabla-wrap { max-height: none; overflow: visible; }
    .colector-tabla { font-size: 11px; }
}


/* ============================================================================
   INICIO  (/home)

   Era el logo del colegio, un "Bienvenido" y nada mas: una pantalla que no
   llevaba a ninguna parte. Ahora abre con el saludo y con los accesos a lo que
   el administrador usa, agrupados y respetando exactamente las mismas
   condiciones de rol / RESTRINGIR_MENU / CREAR_USUARIOS que el menu lateral.
   Es la misma linea grafica del inicio del panel de maestros.
   ============================================================================ */

/* El logo del colegio manda: va centrado y en grande, siempre visible. */
.inicio-hola {
    text-align: center;
    padding: 26px 20px 22px;
}

.inicio-hola__logo {
    margin-bottom: 18px;
}

.inicio-hola__logo img {
    max-width: 260px;
    max-height: 210px;
    object-fit: contain;
    border-radius: 20px;
}

.inicio-hola h3 {
    margin: 0 0 6px;
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -.3px;
}

.inicio-hola__nombre {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #3f3f57;
}

.inicio-hola__sub {
    margin: 0;
    color: #8a8aa3;
    font-size: 13px;
    line-height: 1.55;
}

/* El panel cambia segun el rol y el año en curso: conviene que el usuario vea
   con que permisos esta trabajando sin tener que abrir el menu. */
.inicio-hola__rol {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 12px;
    font-weight: 600;
}

/* --- Accesos --- */

.inicio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.inicio-acceso {
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 18px;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.inicio-acceso:hover,
.inicio-acceso:focus {
    transform: translateY(-2px);
    border-color: #ddd9ff;
    box-shadow: 0 8px 22px rgba(96, 84, 255, .10);
    text-decoration: none;
    color: inherit;
}

.inicio-acceso__icono {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #f0eeff;
    color: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.inicio-acceso__icono img {
    width: 20px;
    height: 20px;
}

.inicio-acceso b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: #3f3f57;
    line-height: 1.3;
}

.inicio-acceso small {
    color: #9a9ab0;
    font-size: 12px;
}

/* Un tono por acceso, el mismo criterio del inicio de maestros. */
.inicio-acceso.is-aqua .inicio-acceso__icono { background: #e6f8fd; color: #1fa5c9; }
.inicio-acceso.is-verde .inicio-acceso__icono { background: #e7f7ef; color: #17a06a; }
.inicio-acceso.is-naranja .inicio-acceso__icono { background: #fff3e2; color: #d98324; }
.inicio-acceso.is-rosa .inicio-acceso__icono { background: #fdeef2; color: #d63a58; }
.inicio-acceso.is-indigo .inicio-acceso__icono { background: #eef0fb; color: #4a5bb8; }

.inicio-titulo {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a0a0b8;
}

@media (max-width: 767px) {
    .inicio-hola { padding: 20px 12px 16px; }
    .inicio-hola__logo img { max-width: 190px; max-height: 150px; border-radius: 16px; }
    .inicio-grid { grid-template-columns: 1fr; }
}


/* ============================================================================
   FICHA DEL ALUMNO  (/student/{student_id})

   Eran cinco secciones plegadas detras de pastillas moradas, separadas por <hr>,
   con todo cerrado al entrar; y como casi todos los datos opcionales vienen
   vacios, lo que se abria era una lista de etiquetas sin valor. Ahora todo esta
   a la vista en tarjetas y la vista solo pinta los campos que traen algo.

   Es la misma linea grafica de la ficha del alumno de `escuelapp_teachers`
   (mismos prefijos .ficha-* / .alumno-*), mas las piezas que aqui hacen falta
   porque el administrador tiene acciones que el maestro no: editar, inscribir,
   dar de baja / alta, becar, registrar pagos y agregar familiares.
   ============================================================================ */

/* Las variables van en :root y no en `.alumno`: las piezas .ficha-* las usan
   tambien los parciales que se cargan por AJAX dentro de la ficha. */
:root {
    --ficha-borde: #e6e6f2;
    --ficha-tenue: #8a8aa3;
    --ficha-ok: #17a06a;
    --ficha-mal: #d63a58;
    --ficha-alerta: #d98324;
}

/* --- Tarjeta --- */

.ficha-card {
    background: white;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 16px;
}

.ficha-card:last-child {
    margin-bottom: 0;
}

.ficha-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

.ficha-card__head h4 {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--purple-text);
}

/* Contador al lado del titulo de la tarjeta ("Actividades 24"). */
.ficha-chip {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
}

/* Las acciones de la tarjeta se van a la derecha del titulo. */
.ficha-card__acciones {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ficha-card__acciones .btn {
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
}

.ficha-card__acciones .btn .fa {
    margin-right: 6px;
}

/* --- Tabla --- */

.ficha-tabla-wrap {
    overflow-x: auto;
}

.ficha-tabla {
    width: 100%;
    border-collapse: collapse;
}

.ficha-tabla thead th {
    padding: 10px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ficha-tenue);
    border-bottom: 2px solid var(--ficha-borde);
    white-space: nowrap;
}

.ficha-tabla td {
    padding: 12px 10px;
    text-align: center;
    font-size: 13.5px;
    color: #4a4a63;
    border-bottom: 1px solid #f2f2f9;
}

.ficha-tabla tbody tr:hover td {
    background: #fbfbff;
}

.ficha-tabla th.ficha-tabla__nombre,
.ficha-tabla td.ficha-tabla__nombre {
    text-align: left;
    font-weight: 500;
    color: #3f3f57;
    min-width: 200px;
}

.ficha-tabla__ver {
    width: 1%;
    white-space: nowrap;
}

.ficha-tabla__ver .btn {
    border-radius: 999px;
    padding: 4px 16px;
}

/* Una matricula dada de baja se apaga en vez de pintarse de rojo, que era lo que
   hacia la clase .danger de Bootstrap sobre toda la fila. */
.ficha-fila.is-baja td {
    opacity: .55;
}

.ficha-estado {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #f4f4fa;
    color: #6b6b85;
}

.ficha-estado.is-ok { background: #e7f7ef; color: var(--ficha-ok); }
.ficha-estado.is-mal { background: #fdeef2; color: var(--ficha-mal); }
.ficha-estado.is-alerta { background: #fff3e2; color: var(--ficha-alerta); }

/* --- Vacios (compartidos por cualquier listado en tarjeta) --- */

.ficha-vacio {
    padding: 34px 20px;
    text-align: center;
}

.ficha-vacio .fa {
    font-size: 36px;
    color: #d9d6ff;
    margin-bottom: 12px;
}

.ficha-vacio p {
    margin: 0;
    color: #9a9ab0;
    font-size: 13px;
}

.ficha-hora {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Cabecera del alumno --- */

.alumno-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 8px 0;
}

.alumno-foto {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 20px;
    overflow: hidden;
    background: #f4f3ff;
}

.alumno-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alumno-cabecera__texto {
    flex: 1 1 300px;
}

.alumno-cabecera h3 {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -.3px;
}

.alumno-cabecera__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.alumno-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f4f4fa;
    color: #6b6b85;
    font-size: 12px;
    font-weight: 600;
}

.alumno-chip .fa {
    color: #c3c3d8;
}

/* El estado de la matricula del año en curso es lo que mas se consulta: va en la
   cabecera y con color, no escondido entre los demas datos. */
.alumno-chip.is-baja {
    background: #fdeef2;
    color: var(--ficha-mal);
}

.alumno-chip.is-baja .fa {
    color: var(--ficha-mal);
}

.alumno-cabecera__acciones {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.alumno-cabecera__acciones .btn {
    border-radius: 15px;
    padding: 8px 18px;
}

.alumno-cabecera__acciones .btn .fa {
    margin-right: 6px;
}

/* Datos e historia van lado a lado: son dos listas cortas. */
.alumno-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* La separacion entre estas dos la pone el `gap`; la de abajo, el margen del grid. */
.alumno-columnas .ficha-card {
    margin-bottom: 0;
}

/* Pares etiqueta / valor. La etiqueta arriba en versalitas se lee mejor que el
   "<strong>Telefono:</strong> valor" en una sola linea que habia antes. */
.alumno-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 22px;
    margin: 0;
}

.alumno-datos > div {
    min-width: 0;
}

.alumno-datos dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #a0a0b8;
}

.alumno-datos dd {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: #3f3f57;
    line-height: 1.45;
    word-break: break-word;
}

/* Acciones de cada inscripcion, en un desplegable.

   El menu se abre DENTRO de `.ficha-tabla-wrap`, que lleva `overflow-x: auto` para
   que las tablas anchas se puedan desplazar; eso convierte al contenedor en area de
   scroll y le recortaba el menu. Mientras esta abierto, el JS de la ficha le pone la
   clase `is-desplegando` al contenedor y se le suelta el overflow. */
.ficha-tabla-wrap.is-desplegando {
    overflow: visible;
}

.ficha-tabla th.alumno-acciones__col,
.ficha-tabla td.alumno-acciones {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.alumno-menu {
    display: inline-block;
}

/* La celda lleva dos botones (Acciones y Reporte de notas) y va con `white-space:
   nowrap`, asi que el espacio del HTML no separa nada: la separacion se pone aqui. */
.alumno-acciones > .alumno-menu + .alumno-menu,
.alumno-acciones > .alumno-menu + .alumno-menu__btn,
.alumno-acciones > .alumno-menu__btn + .alumno-menu {
    margin-left: 6px;
}

.alumno-menu__btn {
    padding: 5px 14px;
    border: 1px solid var(--ficha-borde);
    border-radius: 999px;
    background: white;
    color: #6b6b85;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none;
}

.alumno-menu__btn:hover,
.alumno-menu__btn:focus,
.open > .alumno-menu__btn {
    border-color: #cfcbf7;
    background: #f6f5ff;
    color: var(--purple);
    box-shadow: none;
    outline: none;
}

.alumno-menu__btn .caret {
    margin-left: 5px;
}

.alumno-menu__lista {
    min-width: 210px;
    padding: 6px;
    border: 1px solid #ececf7;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(63, 63, 87, .13);
}

.alumno-menu__lista > li > a {
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13px;
    color: #4a4a63;
    white-space: nowrap;
}

.alumno-menu__lista > li > a:hover,
.alumno-menu__lista > li > a:focus {
    background: #f6f5ff;
    color: var(--purple);
}

.alumno-menu__lista > li > a .fa {
    width: 16px;
    margin-right: 8px;
    color: #c3c3d8;
}

.alumno-menu__lista > li > a:hover .fa,
.alumno-menu__lista > li > a:focus .fa {
    color: var(--purple);
}

.alumno-menu__lista .divider {
    margin: 5px 6px;
    background-color: #f0f0f8;
}

/* Baja / alta de la matricula: los iconos sueltos de la tabla vieja quedaban a la
   deriva; aqui van dentro de un boton redondeado del tamano de un area de toque. */
.alumno-baja {
    width: 1%;
    white-space: nowrap;
}

.alumno-baja form {
    display: inline;
}

.alumno-baja__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.alumno-baja__btn.is-baja { color: var(--ficha-mal); }
.alumno-baja__btn.is-baja:hover { background: #fdeef2; }

.alumno-baja__btn.is-alta { color: var(--ficha-ok); }
.alumno-baja__btn.is-alta:hover { background: #e7f7ef; }

/* --- Avisos y vacios --- */

.alumno-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fdeef2;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.alumno-aviso .fa {
    font-size: 18px;
    color: var(--ficha-mal);
    margin-top: 2px;
}

.alumno-aviso b {
    display: block;
    margin-bottom: 3px;
    color: var(--ficha-mal);
    font-size: 14px;
}

.alumno-aviso p {
    margin: 0;
    color: #7a5560;
    font-size: 13px;
    line-height: 1.5;
}

.alumno-nada,
.alumno-cargando {
    margin: 0;
    color: #a0a0b8;
    font-size: 13px;
}

.alumno-card__pista {
    color: #9a9ab0;
    font-size: 12.5px;
}

.alumno-card__pista--bloque {
    display: block;
    margin: -6px 0 14px;
}

/* --- Impresion --- */

@media print {
    .alumno-cabecera__acciones,
    .ficha-card__acciones,
    .alumno-acciones,
    .alumno-baja { display: none; }

    .alumno-foto,
    .alumno-chip,
    .ficha-estado {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .alumno-columnas { display: block; }
    .alumno-columnas .ficha-card { margin-bottom: 12px; }

    .ficha-tabla-wrap { overflow: visible !important; }
    .ficha-tabla { font-size: 12px; }
    .ficha-tabla tbody tr { break-inside: avoid; }
}

/* --- Responsive --- */

@media (max-width: 767px) {
    .ficha-card { padding: 18px; border-radius: 16px; }

    .alumno-foto { width: 64px; height: 64px; border-radius: 16px; }
    .alumno-cabecera__acciones { margin-left: 0; flex: 1 1 100%; }
    .ficha-card__acciones { margin-left: 0; flex: 1 1 100%; }
    .alumno-columnas { grid-template-columns: 1fr; gap: 12px; }

    .alumno-menu__lista { min-width: 190px; }
}


/* ============================================================================
   CALENDARIO DE ACTIVIDADES  (/activities-calendar)

   Era una tabla de trece columnas —cuatro solo para fechas y horas— con badges de
   AdminLTE de cuatro colores distintos. Ahora cada actividad es una fila con su
   bloque de fecha a la izquierda, que es lo primero que se busca en una agenda, y
   las etiquetas quedaron en un solo tono salvo las que de verdad avisan algo.

   Es la misma linea grafica del calendario de `escuelapp_teachers` (mismo prefijo
   .calendario-*), mas lo que aqui hace falta porque el administrador tiene el
   selector de Tipo —toda la institucion o por grados— que alla no existe.
   ============================================================================ */

.calendario {
    --cal-borde: #e6e6f2;
    --cal-tenue: #8a8aa3;
    --cal-ok: #17a06a;
    --cal-aviso: #d98324;
}

/* --- Cabecera --- */

.calendario-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.calendario-cabecera__texto {
    flex: 1 1 320px;
}

.calendario-cabecera h3 {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -.3px;
}

.calendario-cabecera__sub {
    margin: 0;
    color: var(--cal-tenue);
    font-size: 13px;
    line-height: 1.55;
    max-width: 620px;
}

/* El buscador y el botón van SIEMPRE en la misma línea: con flex-wrap el botón se
   caía debajo del campo y quedaba flotando solo. El ancho del buscador es fijo (no
   flex-basis) para que el botón nunca tenga que competir por el espacio. */
.calendario-cabecera__acciones {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-left: auto;
}

.calendario-cabecera__buscar {
    margin: 0;
    width: 260px;
    flex: 0 0 auto;
}

.calendario-cabecera__acciones .btn {
    flex: 0 0 auto;
    /* El mismo radio del buscador: una pastilla al lado de un campo redondeado se
       veía como si fueran de dos pantallas distintas. */
    border-radius: 15px;
    padding: 8px 18px;
    line-height: 1.45;
    white-space: nowrap;
}

.calendario-cabecera__acciones .btn .fa {
    margin-right: 6px;
}

/* --- Tarjetas --- */

.calendario-card {
    background: white;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 16px;
}

.calendario-card__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.calendario-card__head h4 {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--purple-text);
}

.calendario-card__pista,
.calendario-card__filtro {
    font-size: 12.5px;
    color: var(--cal-tenue);
}

.calendario-card__filtro {
    margin-left: auto;
}

.calendario-card__filtro a {
    margin-left: 8px;
    color: var(--purple);
}

.calendario-chip {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
}

/* --- Lista de actividades --- */

.calendario-lista {
    display: flex;
    flex-direction: column;
}

.calendario-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 4px;
    border-top: 1px solid #f2f2f9;
}

.calendario-item:first-child {
    border-top: none;
    padding-top: 4px;
}

/* Bloque de fecha: día grande y mes debajo, como en una agenda de papel. */
.calendario-item__fecha {
    flex: 0 0 70px;
    text-align: center;
    background: #f6f5ff;
    border-radius: 14px;
    padding: 10px 6px;
}

.calendario-item__fecha b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--purple);
}

.calendario-item__fecha span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--purple-text);
}

.calendario-item__fecha small {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    color: #a0a0b8;
}

.calendario-item__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.calendario-item__titulo {
    margin: 0 0 5px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #3f3f57;
}

.calendario-item__ya {
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f2f2f8;
    color: #a0a0b8;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: middle;
}

.calendario-item__desc {
    margin: 0 0 8px;
    color: #6b6b85;
    font-size: 13px;
    line-height: 1.5;
}

.calendario-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.calendario-dato {
    font-size: 12.5px;
    color: var(--cal-tenue);
    font-variant-numeric: tabular-nums;
}

.calendario-dato .fa {
    margin-right: 4px;
    color: #c3c3d8;
}

/* Un solo tono para las etiquetas informativas: destacarlas todas era destacar
   ninguna. Solo se colorean las dos que de verdad avisan algo. */
.calendario-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #f4f4fa;
    color: #6b6b85;
    font-size: 11.5px;
    font-weight: 600;
}

.calendario-etiqueta.is-publico {
    background: #e7f7ef;
    color: var(--cal-ok);
}

.calendario-etiqueta.is-asistencia {
    background: #fff3e2;
    color: var(--cal-aviso);
}

.calendario-etiqueta .fa {
    font-size: 10.5px;
}

.calendario-grado {
    padding: 3px 11px;
    border-radius: 999px;
    background: #eef0fb;
    color: #4a5bb8;
    font-size: 11.5px;
    font-weight: 600;
}

.calendario-item__foto {
    flex: 0 0 auto;
}

.calendario-item__foto img {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    object-fit: cover;
}

.calendario-item__acciones {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.calendario-item__acciones .take-attendance {
    font-size: 20px;
    padding: 5px;
    color: var(--purple);
    cursor: pointer;
}

.calendario-item__acciones .take-attendance:hover {
    background-color: #6054ff26;
    border-radius: 5px;
}

.calendario-item__acciones .delete-bottom {
    cursor: pointer;
}

/* Una actividad que ya pasó sigue estando, pero deja de competir por la atención. */
.calendario-item.is-pasada .calendario-item__fecha {
    background: #f6f6fa;
}

.calendario-item.is-pasada .calendario-item__fecha b,
.calendario-item.is-pasada .calendario-item__fecha span {
    color: #a0a0b8;
}

.calendario-item.is-pasada .calendario-item__titulo {
    color: #6b6b85;
}

/* --- Paginación y vacío --- */

.calendario-paginacion {
    margin-top: 14px;
    text-align: center;
}

.calendario-paginacion .pagination {
    margin: 0;
}

.calendario-vacio {
    padding: 40px 20px;
    text-align: center;
}

.calendario-vacio .fa {
    font-size: 38px;
    color: #d9d6ff;
    margin-bottom: 12px;
}

.calendario-vacio p {
    margin: 0;
    color: #9a9ab0;
    font-size: 13px;
}

/* --- Formulario de alta y edición ------------------------------------------
   Mismo lenguaje que el formulario de asistencia de padres (campos de 2px y
   esquinas de 12px, etiquetas en versalitas moradas, error pegado a su campo),
   con prefijo propio para no desincronizar aquel módulo al tocar este.

   Los grados y los dos interruptores son pastillas: el <input> real se esconde y
   la pastilla es su <label>, así el formulario sigue mandando school_grades[],
   public y attendance_parent sin JavaScript de por medio. --- */

.calendario-form__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.calendario-form__fila > .calendario-campo {
    flex: 1 1 240px;
    min-width: 0;
}

.calendario-campo { margin-bottom: 18px; }

.calendario-campo > label {
    display: block;
    margin-bottom: 6px;
    color: var(--purple-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.calendario-form .form-control {
    border-width: 2px;
    border-color: #e2e2f5;
    border-radius: 12px;
    box-shadow: none;
    color: #3f3f5a;
    transition: border-color .15s ease;
}

.calendario-form .form-control:focus {
    border-color: var(--purple);
    box-shadow: none;
}

.calendario-form input.form-control { height: 42px; }
.calendario-form textarea.form-control { padding-top: 9px; resize: vertical; }

.calendario-campo__pista {
    display: block;
    margin-top: 5px;
    color: #a0a0b8;
    font-size: 11.5px;
}

/* Validación pegada a su campo: el bloque rojo de arriba se apaga con la sección
   'errores_en_linea' del layout. */

.calendario-campo__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: #d9463f;
    font-size: 12px;
    line-height: 1.35;
}

.calendario-campo__error i { margin-top: 1px; }

.calendario-campo.is-invalido > label { color: #d9463f; }

.calendario-form .calendario-campo.is-invalido .form-control { border-color: #f0b4b1; background-color: #fffbfb; }
.calendario-form .calendario-campo.is-invalido .form-control:focus { border-color: #d9463f; }
.calendario-campo.is-invalido .calendario-opciones { border-color: #f0b4b1; background-color: #fffbfb; }

/* --- Pastillas seleccionables --- */

.calendario-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
}

.calendario-opciones--grados {
    max-height: 260px;
    overflow-y: auto;
}

.calendario-opcion {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.calendario-opcion input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.calendario-opcion span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 2px solid #e2e2f5;
    border-radius: 999px;
    background: white;
    color: var(--purple-text);
    font-size: 13px;
    font-weight: 600;
    transition: all .15s ease;
}

.calendario-opcion span:before {
    content: '\f00c'; /* fa-check */
    font-family: FontAwesome;
    font-size: 10px;
    color: #d5d5e8;
}

.calendario-opcion:hover span {
    border-color: var(--purple-light);
    color: var(--purple);
}

.calendario-opcion input:checked + span {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
    box-shadow: 0 4px 10px rgba(96, 84, 255, .28);
}

.calendario-opcion input:checked + span:before { color: white; }

/* El foco de teclado tiene que verse: el <input> real es invisible. */
.calendario-opcion input:focus + span { border-color: var(--purple-dark); }

.calendario-opciones__vacio {
    color: #a0a0b8;
    font-size: 13px;
    font-style: italic;
}

/* Los dos interruptores (público / asistencia de padres): un switch de verdad
   —riel y perilla que se desliza— con su rótulo al lado y la explicación debajo.
   Eran dos bootstrapSwitch de Sí/No que no decían qué implicaba cada opción.

   El switch se dibuja con CSS y no con bootstrapSwitch para que el <input> siga
   siendo el de siempre: el formulario manda public / attendance_parent tal cual. */

.calendario-interruptores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.calendario-interruptor {
    flex: 1 1 260px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin: 0;
    padding: 12px 14px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
    font-weight: normal;
    cursor: pointer;
    transition: border-color .15s ease;
}

.calendario-interruptor:hover { border-color: var(--purple-light); }

.calendario-interruptor input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* --- El switch --- */

.calendario-switch {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #d5d5e8;
    transition: background-color .18s ease;
}

.calendario-switch:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(63, 63, 90, .3);
    transition: transform .18s ease;
}

.calendario-interruptor input:checked + .calendario-switch {
    background: var(--purple);
}

.calendario-interruptor input:checked + .calendario-switch:before {
    transform: translateX(18px);
}

/* El foco de teclado tiene que verse: el <input> real es invisible. */
.calendario-interruptor input:focus + .calendario-switch {
    box-shadow: 0 0 0 3px rgba(96, 84, 255, .22);
}

.calendario-interruptor__texto {
    flex: 1 1 auto;
    color: var(--purple-text);
    font-size: 13px;
    font-weight: 600;
}

.calendario-interruptor input:checked ~ .calendario-interruptor__texto {
    color: var(--purple);
}

.calendario-interruptor__pista {
    flex: 1 1 100%;
    display: block;
    margin-top: 7px;
    color: #a0a0b8;
    font-size: 11.5px;
    line-height: 1.45;
}

/* --- Foto: el <input type=file> crudo no combina con el resto --- */

.calendario-foto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.calendario-foto__boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 18px;
    border: 2px dashed #d5d5e8;
    border-radius: 12px;
    color: var(--purple);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

.calendario-foto__boton:hover {
    border-color: var(--purple);
    background: #f6f5ff;
}

.calendario-foto__boton input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.calendario-foto__nombre {
    color: #a0a0b8;
    font-size: 12px;
}

.calendario-foto__preview {
    max-width: 120px;
    max-height: 120px;
    border-radius: 12px;
    border: 2px solid #f1f2fb;
}

/* --- Botonera --- */

.calendario-form__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #ececf7;
}

.calendario-form__acciones .btn {
    border-radius: 10px;
    padding: 8px 20px;
}

.calendario-form__acciones .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.calendario-form__acciones .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

/* --- Aviso en línea --- */

.calendario-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f1f2fb;
    color: #5a5a75;
    font-size: 12.5px;
    line-height: 1.45;
}

.calendario-aviso > i {
    margin-top: 2px;
    color: var(--purple);
    font-size: 15px;
}

.calendario-aviso b { color: #3f3f5a; }

.calendario-aviso.is-error {
    background: #fdeceb;
    color: #8f3733;
}

.calendario-aviso.is-error > i { color: #d9463f; }
.calendario-aviso.is-error b { color: #8f3733; }

/* --- FullCalendar: se le quita el aire de tabla de sistema --- */

.calendario .fc-toolbar h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--purple-text);
    text-transform: capitalize;
}

.calendario .fc button {
    height: auto;
    padding: 6px 14px;
    border: 1px solid var(--cal-borde);
    border-radius: 8px;
    background: white;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    font-size: 13px;
    color: #6b6b85;
}

.calendario .fc button:hover {
    background: #f6f5ff;
    color: var(--purple);
}

.calendario .fc-state-active,
.calendario .fc-state-down {
    background: var(--purple) !important;
    border-color: var(--purple) !important;
    color: white !important;
    box-shadow: none !important;
}

.calendario .fc-state-disabled {
    opacity: .45;
}

.calendario .fc-day-header {
    padding: 8px 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cal-tenue);
}

.calendario .fc-unthemed th,
.calendario .fc-unthemed td,
.calendario .fc-unthemed .fc-divider,
.calendario .fc-unthemed .fc-row {
    border-color: #f0f0f8;
}

.calendario .fc-unthemed td.fc-today {
    background: #f6f5ff;
}

.calendario .fc-day-number {
    padding: 6px 8px;
    font-size: 12.5px;
    color: #6b6b85;
}

.calendario .fc-event {
    border: none;
    border-radius: 7px;
    padding: 2px 7px;
    font-size: 12px;
    cursor: pointer;
}

.calendario .fc-event:hover {
    filter: brightness(1.08);
}

/* --- Impresión --- */

@media print {
    .calendario-item { break-inside: avoid; }

    .calendario-item__fecha,
    .calendario-etiqueta,
    .calendario-grado {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- Responsive --- */

@media (max-width: 767px) {
    .calendario-cabecera__acciones { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
    .calendario-cabecera__buscar { width: 100%; flex: 1 1 100%; }

    .calendario-card { padding: 18px; border-radius: 16px; }

    .calendario-item {
        flex-wrap: wrap;
        gap: 12px;
    }

    .calendario-item__fecha { flex: 0 0 58px; }
    .calendario-item__cuerpo { flex: 1 1 60%; }
    .calendario-item__acciones { flex: 1 1 100%; margin-left: 0; }

    .calendario-interruptor { flex: 1 1 100%; }
    .calendario-form__acciones { flex-direction: column-reverse; }
    .calendario-form__acciones .btn { width: 100%; }

    .calendario .fc-toolbar .fc-left,
    .calendario .fc-toolbar .fc-center,
    .calendario .fc-toolbar .fc-right {
        float: none;
        text-align: center;
        margin-bottom: 8px;
    }
}



/* --- Tipo de actividad: el extra del administrador --------------------------

   El maestro solo convoca grados (`type` va fijo en 2). El administrador ademas
   elige si la actividad es de toda la institucion, y de esa eleccion depende que
   el bloque de grados se muestre o no. Son dos radios con la misma pastilla que
   los grados, pero con el punto del radio en vez del check. --- */

.calendario-opcion--radio span:before {
    content: '\f10c'; /* fa-circle-o */
}

.calendario-opcion--radio input:checked + span:before {
    content: '\f058'; /* fa-check-circle */
}

/* El bloque de grados aparece y desaparece con el radio: al ocultarse no debe
   dejar el hueco de su margen inferior. */
.calendario-campo[hidden] {
    display: none !important;
}


/* ============================================================================
   ACTIVIDADES POR DEFECTO  (/school/default_grade_activities)

   Era una tarjeta gris de filtros con las etiquetas moradas puestas a mano, una
   tabla `table-bordered` con la franja celeste del DataTable y un formulario de
   `input-group` con la etiqueta pegada al campo. Ahora comparte la tarjeta y la
   tabla con el resto del sistema (.ficha-card / .ficha-tabla) y aporta lo suyo:
   la barra de filtros, el medidor de la sumatoria del grado y el formulario.

   El formulario habla el mismo idioma que el de asistencia de padres y el del
   calendario —campos de 2px, esquinas de 12px, rotulo en versalitas moradas y el
   error pegado a su campo— con prefijo propio, para no desincronizar aquellos
   modulos al tocar este.
   ============================================================================ */

.actdef {
    --actdef-tenue: #8a8aa3;
    --actdef-ok: #17a06a;
    --actdef-aviso: #d98324;
}

/* --- Cabecera --- */

.actdef-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.actdef-cabecera__texto {
    flex: 1 1 320px;
}

.actdef-cabecera h3 {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -.3px;
}

.actdef-cabecera__sub {
    margin: 0;
    color: var(--actdef-tenue);
    font-size: 13px;
    line-height: 1.55;
    max-width: 640px;
}

.actdef-cabecera__acciones {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.actdef-cabecera__acciones .btn {
    border-radius: 15px;
    padding: 8px 18px;
    line-height: 1.45;
    white-space: nowrap;
}

.actdef-cabecera__acciones .btn .fa {
    margin-right: 6px;
}

/* --- Barra de filtros --- */

.actdef-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}

.actdef-filtros__campo {
    flex: 0 1 220px;
    min-width: 0;
}

.actdef-filtros__campo--buscador {
    flex: 1 1 240px;
}

.actdef-filtros__campo > label {
    display: block;
    margin-bottom: 5px;
    color: var(--purple-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.actdef-filtros__campo .form-control {
    height: 36px;
    border: 2px solid #e6e6f4;
    border-radius: 12px;
    box-shadow: none;
    color: #5a5a75;
    font-size: 13px;
}

.actdef-filtros__campo .form-control:focus {
    border-color: var(--purple-light);
    box-shadow: none;
}

.actdef-filtros__acciones {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.actdef-filtros__acciones .btn {
    height: 36px;
    border-radius: 12px;
    padding: 0 18px;
    font-size: 13px;
}

.actdef-filtros__acciones .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.actdef-filtros__acciones .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

/* --- Medidor de la sumatoria del grado ------------------------------------
   Es el dato que se viene a consultar: los porcentajes de un grado tienen que
   sumar 100. Antes era un alert de Bootstrap con el numero suelto; ahora la
   barra deja ver de un vistazo cuanto falta o cuanto sobra. --- */

.actdef-suma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f6f5ff;
    margin-bottom: 16px;
}

.actdef-suma__texto {
    flex: 0 0 auto;
    color: #5a5a75;
    font-size: 13px;
}

.actdef-suma__valor {
    font-size: 17px;
    font-weight: 700;
    color: var(--purple);
    font-variant-numeric: tabular-nums;
}

.actdef-suma__barra {
    flex: 1 1 200px;
    height: 8px;
    border-radius: 999px;
    background: #e2e2f5;
    overflow: hidden;
}

.actdef-suma__relleno {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--purple);
    transition: width .25s ease;
}

.actdef-suma__nota {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.actdef-suma.is-ok { background: #e7f7ef; }
.actdef-suma.is-ok .actdef-suma__valor { color: var(--actdef-ok); }
.actdef-suma.is-ok .actdef-suma__barra { background: #cdebdd; }
.actdef-suma.is-ok .actdef-suma__relleno { background: var(--actdef-ok); }
.actdef-suma.is-ok .actdef-suma__nota { background: white; color: var(--actdef-ok); }

.actdef-suma.is-aviso { background: #fff3e2; }
.actdef-suma.is-aviso .actdef-suma__valor { color: var(--actdef-aviso); }
.actdef-suma.is-aviso .actdef-suma__barra { background: #f6e0c2; }
.actdef-suma.is-aviso .actdef-suma__relleno { background: var(--actdef-aviso); }
.actdef-suma.is-aviso .actdef-suma__nota { background: white; color: var(--actdef-aviso); }

/* --- Filas de la tabla --- */

.actdef-grado {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    background: #eef0fb;
    color: #4a5bb8;
    font-size: 11.5px;
    font-weight: 600;
}

/* El nombre corto manda en la fila; la etiqueta larga del colector va debajo, en
   pequeno, porque es la que el maestro reconoce pero no la que se usa en el sistema. */
.actdef-nombre b {
    display: block;
    font-weight: 600;
    color: #3f3f57;
}

.actdef-nombre small {
    display: block;
    margin-top: 2px;
    color: #9a9ab0;
    font-size: 12px;
}

.actdef-bloque {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #f4f4fa;
    color: #6b6b85;
    font-size: 11.5px;
    font-weight: 600;
}

/* El orden dentro del colector ("2.1") explica de un vistazo por que la fila esta
   donde esta; sin el, el listado parecia desordenado. */
.actdef-bloque__orden {
    color: var(--purple);
    font-variant-numeric: tabular-nums;
}

.actdef-bloque.is-sin {
    background: #fff3e2;
    color: var(--actdef-aviso);
}

.actdef-bloque.is-sin .actdef-bloque__orden { color: var(--actdef-aviso); }

.ficha-tabla th.actdef-acciones__col,
.ficha-tabla td.actdef-acciones {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.actdef-acciones form {
    display: inline;
}

.actdef-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.actdef-btn.is-editar { color: var(--aqua-dark); }
.actdef-btn.is-editar:hover { background: #e6f8fd; color: var(--aqua-dark); }

.actdef-btn.is-borrar { color: #d63a58; }
.actdef-btn.is-borrar:hover { background: #fdeef2; }

.actdef-paginacion {
    margin-top: 14px;
    text-align: center;
}

.actdef-paginacion .pagination {
    margin: 0;
}

/* --- Formulario de alta y edicion --- */

.actdef-form__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.actdef-form__fila > .actdef-campo {
    flex: 1 1 240px;
    min-width: 0;
}

/* Los campos de la agrupacion del colector no son del mismo peso que el nombre y el
   porcentaje: el orden es un numero de un digito y no necesita media fila. */
.actdef-form__fila > .actdef-campo--ancho { flex: 2 1 280px; }
.actdef-form__fila > .actdef-campo--corto { flex: 0 1 150px; }

.actdef-campo { margin-bottom: 18px; }

/* Separador de la seccion del colector dentro del formulario. */

.actdef-seccion {
    margin: 4px 0 18px;
    padding-top: 18px;
    border-top: 1px solid #ececf7;
}

.actdef-seccion__titulo {
    margin: 0 0 4px;
    color: var(--purple);
    font-size: 14px;
    font-weight: 600;
}

.actdef-seccion__sub {
    margin: 0;
    color: #a0a0b8;
    font-size: 12px;
    line-height: 1.5;
    max-width: 640px;
}

.actdef-campo > label {
    display: block;
    margin-bottom: 6px;
    color: var(--purple-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.actdef-form .form-control {
    border-width: 2px;
    border-color: #e2e2f5;
    border-radius: 12px;
    box-shadow: none;
    color: #3f3f5a;
    transition: border-color .15s ease;
}

.actdef-form .form-control:focus {
    border-color: var(--purple);
    box-shadow: none;
}

.actdef-form input.form-control,
.actdef-form select.form-control { height: 42px; }

.actdef-campo__pista {
    display: block;
    margin-top: 5px;
    color: #a0a0b8;
    font-size: 11.5px;
}

/* El porcentaje lleva su signo dentro del campo: un "%" de adorno a la derecha
   se lee mejor que el input-group con la etiqueta pegada que habia antes. */
.actdef-porcentaje {
    position: relative;
}

.actdef-porcentaje .form-control {
    padding-right: 38px;
}

.actdef-porcentaje:after {
    content: '%';
    position: absolute;
    top: 0;
    right: 14px;
    height: 42px;
    display: flex;
    align-items: center;
    color: #a0a0b8;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

/* Validacion pegada a su campo: el bloque rojo del layout se apaga con la seccion
   'errores_en_linea'. */

.actdef-campo__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: #d9463f;
    font-size: 12px;
    line-height: 1.35;
}

.actdef-campo__error i { margin-top: 1px; }

.actdef-campo.is-invalido > label { color: #d9463f; }

.actdef-form .actdef-campo.is-invalido .form-control { border-color: #f0b4b1; background-color: #fffbfb; }
.actdef-form .actdef-campo.is-invalido .form-control:focus { border-color: #d9463f; }

.actdef-form__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #ececf7;
}

.actdef-form__acciones .btn {
    border-radius: 10px;
    padding: 8px 20px;
}

.actdef-form__acciones .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.actdef-form__acciones .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

/* --- Aviso en linea --- */

.actdef-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f1f2fb;
    color: #5a5a75;
    font-size: 12.5px;
    line-height: 1.45;
}

.actdef-aviso > i {
    margin-top: 2px;
    color: var(--purple);
    font-size: 15px;
}

.actdef-aviso b { color: #3f3f5a; }

.actdef-aviso.is-error {
    background: #fdeceb;
    color: #8f3733;
}

.actdef-aviso.is-error > i { color: #d9463f; }
.actdef-aviso.is-error b { color: #8f3733; }

/* --- Impresion --- */

@media print {
    .actdef-cabecera__acciones,
    .actdef-filtros,
    .actdef-acciones,
    .actdef-paginacion { display: none !important; }

    .actdef-grado,
    .actdef-suma {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- Responsive --- */

@media (max-width: 767px) {
    .actdef-cabecera__acciones { margin-left: 0; flex: 1 1 100%; }
    .actdef-filtros__campo,
    .actdef-filtros__campo--buscador { flex: 1 1 100%; }
    .actdef-filtros__acciones { flex: 1 1 100%; }
    .actdef-filtros__acciones .btn { flex: 1 1 0; }

    .actdef-form__acciones { flex-direction: column-reverse; }
    .actdef-form__acciones .btn { width: 100%; }
}


/* ============================================================================
   CITAS PSICOLOGICAS  (/available-appointments  y  /booked-appointments)

   Las dos pantallas eran la misma tabla `table-bordered` con la franja celeste
   del DataTable: la de horarios listaba de diez en diez cada bloque de quince
   minutos —cien bloques daban diez paginas de la misma hoja de horario— y la de
   citas agendadas metia ocho columnas en la fila, con las dos observaciones
   cortadas contra el borde de la pantalla.

   Ahora los horarios se agrupan por dia (que es como se configuran y como se
   consultan) y cada cita es una fila con su bloque de fecha a la izquierda, igual
   que en el calendario de actividades. El prefijo `.citas-*` lo comparten las dos
   pantallas y sus formularios, porque son un mismo modulo del menu.
   ============================================================================ */

.citas {
    --citas-borde: #e6e6f2;
    --citas-tenue: #8a8aa3;
    --citas-ok: #17a06a;
    --citas-aviso: #d98324;
    --citas-mal: #d9463f;
    --citas-agenda: #4a5bb8;
}

/* --- Cabecera --- */

.citas-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.citas-cabecera__texto {
    flex: 1 1 320px;
}

.citas-cabecera h3 {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -.3px;
}

.citas-cabecera__sub {
    margin: 0;
    color: var(--citas-tenue);
    font-size: 13px;
    line-height: 1.55;
    max-width: 640px;
}

/* El buscador y el boton van siempre en la misma linea: el ancho del buscador es
   fijo para que el boton nunca tenga que competir por el espacio sobrante. */
.citas-cabecera__acciones {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-left: auto;
}

.citas-cabecera__buscar {
    margin: 0;
    width: 260px;
    flex: 0 0 auto;
}

.citas-cabecera__acciones .btn {
    flex: 0 0 auto;
    border-radius: 15px;
    padding: 8px 18px;
    line-height: 1.45;
    white-space: nowrap;
}

.citas-cabecera__acciones .btn .fa {
    margin-right: 6px;
}

/* --- Marcadores (KPI) --------------------------------------------------------
   Lo que se viene a mirar de un vistazo: cuantas citas esperan horario y cuantos
   bloques hay configurados. Mismo marcador del panel de notas. --- */

.citas-marcadores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.citas-marcador {
    flex: 1 1 150px;
    background: #f8f8fd;
    border-left: 4px solid var(--citas-borde);
    border-radius: 12px;
    padding: 10px 14px;
}

.citas-marcador--agenda { border-left-color: var(--citas-agenda); }
.citas-marcador--aviso { border-left-color: var(--citas-aviso); }
.citas-marcador--ok { border-left-color: var(--citas-ok); }
.citas-marcador--mal { border-left-color: var(--citas-mal); }

.citas-marcador__label {
    display: block;
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--citas-tenue);
    font-weight: 700;
}

.citas-marcador__valor {
    display: block;
    margin-top: 2px;
    font-size: 21px;
    font-weight: 700;
    color: #3f3f57;
    font-variant-numeric: tabular-nums;
}

.citas-marcador__valor--texto { font-size: 15px; line-height: 1.9; }

.citas-marcador--agenda .citas-marcador__valor { color: var(--citas-agenda); }
.citas-marcador--aviso .citas-marcador__valor { color: var(--citas-aviso); }
.citas-marcador--ok .citas-marcador__valor { color: var(--citas-ok); }
.citas-marcador--mal .citas-marcador__valor { color: var(--citas-mal); }

/* --- Tarjeta contenedora --- */

.citas-card {
    background: white;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 16px;
}

.citas-card:last-child { margin-bottom: 0; }

.citas-card__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.citas-card__head h4 {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--purple-text);
}

.citas-card__pista,
.citas-card__filtro {
    font-size: 12.5px;
    color: var(--citas-tenue);
}

.citas-card__filtro {
    margin-left: auto;
}

.citas-card__filtro a { margin-left: 8px; color: var(--purple); }

.citas-chip {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
}

/* --- Pastillas de filtro (dia de la semana / estado de la cita) --------------
   Son enlaces, no un <select>: las dos listas son cortas y fijas, y asi se ve de
   entrada cuantas citas hay en cada estado sin abrir nada. --- */

.citas-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.citas-filtro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border: 2px solid #e6e6f4;
    border-radius: 999px;
    background: white;
    color: #6b6b85;
    font-size: 13px;
    font-weight: 600;
    transition: all .15s ease;
}

.citas-filtro:hover,
.citas-filtro:focus {
    border-color: var(--purple-light);
    color: var(--purple);
    text-decoration: none;
}

.citas-filtro__conteo {
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f2fb;
    color: #8a8aa3;
    font-size: 11px;
    font-weight: 700;
}

.citas-filtro.is-activo {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
    box-shadow: 0 4px 10px rgba(96, 84, 255, .28);
}

.citas-filtro.is-activo .citas-filtro__conteo {
    background: rgba(255, 255, 255, .24);
    color: white;
}

/* Una pastilla sin nada que mostrar sigue estando (el dia existe aunque no tenga
   citas), pero se apaga para que no compita con las que si tienen. */
.citas-filtro.is-vacio { opacity: .55; }

/* --- Horarios agrupados por dia --------------------------------------------
   Una tarjeta por dia con sus bloques dentro. Los bloques se generan de golpe
   (un dia entero de quince en quince minutos), asi que se leen como una hoja de
   horario y no como cien registros sueltos. --- */

.citas-dias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.citas-dia {
    border: 1px solid #f0f0f8;
    border-radius: 16px;
    padding: 14px 16px 16px;
    background: #fcfcff;
}

.citas-dia__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f8;
}

.citas-dia__nombre {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--purple);
}

.citas-dia__conteo {
    padding: 1px 9px;
    border-radius: 999px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 11px;
    font-weight: 700;
}

.citas-dia__rango {
    margin-left: auto;
    color: var(--citas-tenue);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.citas-bloques {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* Cada bloque es una pastilla con su hora y su aspa de borrar: el icono suelto de
   papelera de la tabla vieja no cabia una vez por cada quince minutos. */
.citas-bloque {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    border: 1px solid #e6e6f4;
    border-radius: 999px;
    background: white;
    color: #4a4a63;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease;
}

.citas-bloque:hover { border-color: #cfcbf7; }

.citas-bloque form { display: inline; margin: 0; }

.citas-bloque__quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f4f4fa;
    color: #b3b3c8;
    font-size: 11px;
    cursor: pointer;
    transition: all .15s ease;
}

.citas-bloque__quitar:hover {
    background: #fdeceb;
    color: var(--citas-mal);
}

/* --- Listado de citas agendadas --------------------------------------------- */

.citas-lista {
    display: flex;
    flex-direction: column;
}

.citas-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 4px;
    border-top: 1px solid #f2f2f9;
}

.citas-item:first-child {
    border-top: none;
    padding-top: 4px;
}

/* Bloque de fecha tipo hoja de calendario, el mismo del calendario de actividades:
   es lo primero que se busca en una agenda. */
.citas-item__fecha {
    flex: 0 0 70px;
    text-align: center;
    background: #f6f5ff;
    border-radius: 14px;
    padding: 10px 6px;
}

.citas-item__fecha b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--purple);
}

.citas-item__fecha span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--purple-text);
}

.citas-item__fecha small {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    color: #a0a0b8;
}

/* Una cita sin horario asignado todavia no tiene fecha que enseñar: el hueco se
   marca en ambar, que es justo lo que esta pantalla viene a resolver. */
.citas-item__fecha.is-pendiente {
    background: #fff3e2;
}

.citas-item__fecha.is-pendiente b,
.citas-item__fecha.is-pendiente span {
    color: var(--citas-aviso);
}

.citas-item__fecha.is-pendiente b { font-size: 19px; }

.citas-item__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.citas-item__titulo {
    margin: 0 0 5px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #3f3f57;
}

.citas-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.citas-dato {
    font-size: 12.5px;
    color: var(--citas-tenue);
    font-variant-numeric: tabular-nums;
}

.citas-dato .fa {
    margin-right: 4px;
    color: #c3c3d8;
}

.citas-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #f4f4fa;
    color: #6b6b85;
    font-size: 11.5px;
    font-weight: 600;
}

.citas-etiqueta .fa { font-size: 10.5px; }

/* --- Estado de la cita -------------------------------------------------------
   Eran cinco badges de AdminLTE de cuatro colores (dos rojos distintos para
   rechazado y cancelado). Aqui el color dice una sola cosa: ambar lo que espera
   algo, verde lo que ya se atendio, rojo lo que se rechazo y gris lo anulado. */

.citas-estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.citas-estado--pendiente { background: #fff3e2; color: var(--citas-aviso); }
.citas-estado--aprobado { background: #eef0fb; color: var(--citas-agenda); }
.citas-estado--finalizada { background: #e7f7ef; color: var(--citas-ok); }
.citas-estado--rechazado { background: #fdeceb; color: var(--citas-mal); }
.citas-estado--cancelado { background: #f2f2f8; color: #8a8aa3; }

/* --- Observaciones -----------------------------------------------------------
   Eran dos columnas de texto largo apretadas contra el borde de la tabla. Aqui
   van debajo, citadas y con quien las escribio. --- */

.citas-notas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.citas-nota {
    flex: 1 1 260px;
    min-width: 0;
    padding: 9px 12px;
    border-left: 3px solid #e2e2f5;
    border-radius: 0 10px 10px 0;
    background: #fafaff;
}

.citas-nota--psicologo { border-left-color: var(--purple-light); }

.citas-nota__quien {
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--citas-tenue);
}

.citas-nota__texto {
    margin: 0;
    color: #55556e;
    font-size: 12.5px;
    line-height: 1.5;
    word-break: break-word;
}

/* --- Acciones de la fila --- */

.citas-item__acciones {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.citas-item__acciones form { display: inline; margin: 0; }

.citas-item__acciones .delete-bottom { cursor: pointer; }

/* La asignacion de horario es la accion propia de esta pantalla y no tenia color
   propio: iba con el verde de "agregar" heredado de otra tabla. */
.citas-asignar {
    font-size: 20px;
    padding: 5px;
    color: var(--purple);
    cursor: pointer;
}

.citas-asignar:hover,
.citas-asignar:focus {
    background-color: #6054ff26;
    border-radius: 5px;
    color: var(--purple-dark);
}

/* --- Paginacion y vacio --- */

.citas-paginacion {
    margin-top: 14px;
    text-align: center;
}

.citas-paginacion .pagination { margin: 0; }

.citas-vacio {
    padding: 40px 20px;
    text-align: center;
}

.citas-vacio .fa {
    font-size: 38px;
    color: #d9d6ff;
    margin-bottom: 12px;
}

.citas-vacio p {
    margin: 0 0 14px;
    color: #9a9ab0;
    font-size: 13px;
}

.citas-vacio p:last-child { margin-bottom: 0; }

.citas-vacio a { color: var(--purple); }

/* --- Formulario de alta, edicion y asignacion de horario --------------------
   Mismo lenguaje que el formulario del calendario y el de actividades por
   defecto (campos de 2px, esquinas de 12px, rotulo en versalitas moradas y el
   error pegado a su campo), con prefijo propio para no desincronizar aquellos
   modulos al tocar este. --- */

.citas-form__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.citas-form__fila > .citas-campo {
    flex: 1 1 240px;
    min-width: 0;
}

.citas-campo { margin-bottom: 18px; }

.citas-campo > label {
    display: block;
    margin-bottom: 6px;
    color: var(--purple-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.citas-form .form-control {
    border-width: 2px;
    border-color: #e2e2f5;
    border-radius: 12px;
    box-shadow: none;
    color: #3f3f5a;
    transition: border-color .15s ease;
}

.citas-form .form-control:focus {
    border-color: var(--purple);
    box-shadow: none;
}

.citas-form input.form-control,
.citas-form select.form-control { height: 42px; }

.citas-form textarea.form-control { padding-top: 9px; resize: vertical; }

.citas-campo__pista {
    display: block;
    margin-top: 5px;
    color: #a0a0b8;
    font-size: 11.5px;
}

/* Validacion pegada a su campo: el bloque rojo del layout y el toastr se apagan
   con la seccion 'errores_en_linea'. */

.citas-campo__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: var(--citas-mal);
    font-size: 12px;
    line-height: 1.35;
}

.citas-campo__error i { margin-top: 1px; }

.citas-campo.is-invalido > label { color: var(--citas-mal); }

.citas-form .citas-campo.is-invalido .form-control { border-color: #f0b4b1; background-color: #fffbfb; }
.citas-form .citas-campo.is-invalido .form-control:focus { border-color: var(--citas-mal); }
.citas-campo.is-invalido .citas-opciones { border-color: #f0b4b1; background-color: #fffbfb; }

/* --- Pastillas seleccionables (los dias de la semana del alta) --------------
   El <input> real se esconde y la pastilla es su <label>, asi el formulario
   sigue mandando dias[] tal cual, sin JavaScript de por medio. --- */

.citas-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
}

.citas-opcion {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.citas-opcion input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.citas-opcion span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 2px solid #e2e2f5;
    border-radius: 999px;
    background: white;
    color: var(--purple-text);
    font-size: 13px;
    font-weight: 600;
    transition: all .15s ease;
}

.citas-opcion span:before {
    content: '\f00c'; /* fa-check */
    font-family: FontAwesome;
    font-size: 10px;
    color: #d5d5e8;
}

.citas-opcion:hover span {
    border-color: var(--purple-light);
    color: var(--purple);
}

.citas-opcion input:checked + span {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
    box-shadow: 0 4px 10px rgba(96, 84, 255, .28);
}

.citas-opcion input:checked + span:before { color: white; }

/* El foco de teclado tiene que verse: el <input> real es invisible. */
.citas-opcion input:focus + span { border-color: var(--purple-dark); }

/* --- Vista previa de los bloques que se van a generar -----------------------
   El alta no crea un horario: crea un bloque cada N minutos entre las dos horas,
   por cada dia marcado. Sin esto se descubria despues de guardar. --- */

.citas-previa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f6f5ff;
    margin-bottom: 18px;
}

.citas-previa__texto {
    flex: 1 1 auto;
    color: #5a5a75;
    font-size: 13px;
    line-height: 1.5;
}

.citas-previa__valor {
    font-size: 17px;
    font-weight: 700;
    color: var(--purple);
    font-variant-numeric: tabular-nums;
}

.citas-previa.is-aviso { background: #fff3e2; }
.citas-previa.is-aviso .citas-previa__valor { color: var(--citas-aviso); }

/* --- Ficha de la solicitud (pantalla de asignar horario) ---------------------
   Era un `alert` gris con tres columnas de Bootstrap dentro. Ahora son pares
   etiqueta / valor, como en la ficha del alumno. --- */

.citas-solicitud {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 22px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #f8f8fd;
}

.citas-solicitud > div { min-width: 0; }

.citas-solicitud dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--citas-tenue);
}

.citas-solicitud dd {
    margin: 3px 0 0;
    font-size: 13.5px;
    color: #3f3f57;
    line-height: 1.45;
    word-break: break-word;
}

.citas-solicitud dd.is-vacio {
    color: #a0a0b8;
    font-style: italic;
}

/* --- Botonera --- */

.citas-form__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #ececf7;
}

.citas-form__acciones .btn {
    border-radius: 10px;
    padding: 8px 20px;
}

.citas-form__acciones .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.citas-form__acciones .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

/* --- Aviso en linea --- */

.citas-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f1f2fb;
    color: #5a5a75;
    font-size: 12.5px;
    line-height: 1.45;
}

.citas-aviso > i {
    margin-top: 2px;
    color: var(--purple);
    font-size: 15px;
}

.citas-aviso b { color: #3f3f5a; }

.citas-aviso.is-error { background: #fdeceb; color: #8f3733; }
.citas-aviso.is-error > i { color: var(--citas-mal); }
.citas-aviso.is-error b { color: #8f3733; }

.citas-aviso a { color: var(--purple); }

/* --- select2 con la pinta del modulo ---------------------------------------
   select2 esconde el <select> y pinta el suyo, asi que las reglas de
   `.citas-form .form-control` no le llegan: hay que repetirlas sobre su
   contenedor. --- */

.citas-form .select2-container { width: 100% !important; }

.citas-form .select2-container--default .select2-selection--single {
    height: 42px;
    border: 2px solid #e2e2f5;
    border-radius: 12px;
    background: white;
}

.citas-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    padding-right: 26px;
    color: #3f3f5a;
    font-size: 14px;
    line-height: 38px;
}

.citas-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 6px;
}

.citas-form .select2-container--default.select2-container--open .select2-selection--single,
.citas-form .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--purple);
}

/* Al abrirse, select2 cuadra las esquinas del lado por donde sale la lista; aqui se
   quiere lo contrario: dos cajas redondeadas con un respiro entre ellas. */
.citas-form .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.citas-form .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-radius: 12px;
}

/* La lista se pinta al final del <body>, fuera de la tarjeta: la clase se le pone
   a mano al abrirse (dropdownCssClass vive en select2.full.js y aqui va el core). */
.citas-select__lista {
    border: 2px solid var(--purple);
    border-radius: 12px;
    overflow: hidden;
}

.citas-select__lista .select2-results__option {
    font-size: 13.5px;
    color: #4a4a63;
}

.citas-select__lista .select2-results__option--highlighted[aria-selected] {
    background: var(--purple);
}

/* Un horario ya tomado se lista, pero deshabilitado: hace falta verlo para saber
   que ese hueco existe y que esta ocupado. */
.citas-select__lista .select2-results__option[aria-disabled=true] {
    color: #b3b3c8;
}

/* --- Impresion --- */

@media print {
    .citas-cabecera__acciones,
    .citas-filtros,
    .citas-item__acciones,
    .citas-bloque__quitar,
    .citas-paginacion { display: none !important; }

    .citas-item { break-inside: avoid; }

    .citas-item__fecha,
    .citas-estado,
    .citas-etiqueta,
    .citas-dia__conteo {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- Responsive --- */

@media (max-width: 767px) {
    .citas-cabecera__acciones { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
    .citas-cabecera__buscar { width: 100%; flex: 1 1 100%; }

    .citas-card { padding: 18px; border-radius: 16px; }

    .citas-dias { grid-template-columns: 1fr; }

    .citas-item { flex-wrap: wrap; gap: 12px; }
    .citas-item__fecha { flex: 0 0 58px; }
    .citas-item__cuerpo { flex: 1 1 60%; }
    .citas-item__acciones { flex: 1 1 100%; margin-left: 0; }

    .citas-form__acciones { flex-direction: column-reverse; }
    .citas-form__acciones .btn { width: 100%; }
}


/* ============================================================================
   CATALOGOS DEL COLEGIO: ASIGNATURAS Y MAESTROS
   (/subject  y  /teacher, con sus formularios y subpantallas)

   Las dos eran la misma tabla `table-bordered` con la franja celeste del
   DataTable y formularios de `input-group` con la etiqueta morada pegada al
   campo. Comparten tanto (cabecera, tarjeta, formulario, avisos, vacios) que el
   armazon va una sola vez con prefijo `.catalogo-*` y cada pantalla pone encima
   lo suyo: `.materias-*` para las asignaturas y `.maestros-*` para los maestros.

   El armazon repite el lenguaje que ya usan el calendario, la asistencia de
   padres y las citas —tarjetas blancas de 20px, morado corporativo, rotulos en
   versalitas, error pegado a su campo—; no reutiliza aquellos prefijos para
   poder tocar estas dos pantallas sin desincronizar los otros modulos.
   ============================================================================ */

.catalogo {
    --cat-borde: #e6e6f2;
    --cat-tenue: #8a8aa3;
    --cat-ok: #17a06a;
    --cat-aviso: #d98324;
    --cat-mal: #d9463f;
    --cat-info: #4a5bb8;
}

/* --- Cabecera --- */

.catalogo-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.catalogo-cabecera__texto {
    flex: 1 1 320px;
}

.catalogo-cabecera h3 {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -.3px;
}

.catalogo-cabecera__sub {
    margin: 0;
    color: var(--cat-tenue);
    font-size: 13px;
    line-height: 1.55;
    max-width: 640px;
}

/* El buscador y los botones van en la misma linea; el buscador lleva ancho fijo
   para que los botones no tengan que competir por el espacio sobrante. */
.catalogo-cabecera__acciones {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-left: auto;
}

.catalogo-cabecera__buscar {
    margin: 0;
    width: 280px;
    flex: 0 0 auto;
}

.catalogo-cabecera__acciones .btn {
    flex: 0 0 auto;
    border-radius: 15px;
    padding: 8px 18px;
    line-height: 1.45;
    white-space: nowrap;
}

.catalogo-cabecera__acciones .btn .fa {
    margin-right: 6px;
}

.catalogo-cabecera__acciones .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.catalogo-cabecera__acciones .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

/* --- Marcadores (KPI) --- */

.catalogo-marcadores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.catalogo-marcador {
    flex: 1 1 150px;
    background: white;
    border-left: 4px solid var(--cat-borde);
    border-radius: 12px;
    padding: 10px 14px;
}

.catalogo-marcador--info { border-left-color: var(--cat-info); }
.catalogo-marcador--ok { border-left-color: var(--cat-ok); }
.catalogo-marcador--aviso { border-left-color: var(--cat-aviso); }

.catalogo-marcador__label {
    display: block;
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cat-tenue);
    font-weight: 700;
}

.catalogo-marcador__valor {
    display: block;
    margin-top: 2px;
    font-size: 21px;
    font-weight: 700;
    color: #3f3f57;
    font-variant-numeric: tabular-nums;
}

.catalogo-marcador--info .catalogo-marcador__valor { color: var(--cat-info); }
.catalogo-marcador--ok .catalogo-marcador__valor { color: var(--cat-ok); }
.catalogo-marcador--aviso .catalogo-marcador__valor { color: var(--cat-aviso); }

/* --- Tarjeta --- */

.catalogo-card {
    background: white;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 16px;
}

.catalogo-card:last-child { margin-bottom: 0; }

.catalogo-card__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.catalogo-card__head h4 {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--purple-text);
}

.catalogo-card__pista,
.catalogo-card__filtro {
    font-size: 12.5px;
    color: var(--cat-tenue);
}

.catalogo-card__filtro { margin-left: auto; }
.catalogo-card__filtro a { margin-left: 8px; color: var(--purple); }

.catalogo-chip {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
}

/* --- Datos sueltos de una fila (correo, telefono, documento) --- */

.catalogo-dato {
    font-size: 12.5px;
    color: var(--cat-tenue);
    word-break: break-word;
}

.catalogo-dato .fa {
    margin-right: 5px;
    color: #c3c3d8;
}

/* --- Acciones de cada fila --- */

.catalogo-acciones {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.catalogo-acciones form { display: inline; margin: 0; }
.catalogo-acciones .delete-bottom { cursor: pointer; }

.catalogo-acciones .btn {
    border-radius: 999px;
    padding: 5px 15px;
    font-size: 12.5px;
    white-space: nowrap;
}

.catalogo-acciones .btn .fa { margin-right: 5px; }

/* --- Paginacion y vacio --- */

.catalogo-paginacion {
    margin-top: 14px;
    text-align: center;
}

.catalogo-paginacion .pagination { margin: 0; }

.catalogo-vacio {
    padding: 40px 20px;
    text-align: center;
}

.catalogo-vacio .fa {
    font-size: 38px;
    color: #d9d6ff;
    margin-bottom: 12px;
}

.catalogo-vacio p {
    margin: 0 0 14px;
    color: #9a9ab0;
    font-size: 13px;
}

.catalogo-vacio p:last-child { margin-bottom: 0; }
.catalogo-vacio a { color: var(--purple); }

/* --- Aviso en linea --- */

.catalogo-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f1f2fb;
    color: #5a5a75;
    font-size: 12.5px;
    line-height: 1.45;
}

.catalogo-aviso > i {
    margin-top: 2px;
    color: var(--purple);
    font-size: 15px;
}

.catalogo-aviso b { color: #3f3f5a; }

.catalogo-aviso.is-error { background: #fdeceb; color: #8f3733; }
.catalogo-aviso.is-error > i { color: var(--cat-mal); }
.catalogo-aviso.is-error b { color: #8f3733; }

.catalogo-aviso a { color: var(--purple); }

/* --- Pares etiqueta / valor (la ficha del maestro) --- */

.catalogo-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 22px;
    margin: 0;
}

.catalogo-datos > div { min-width: 0; }

.catalogo-datos dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cat-tenue);
}

.catalogo-datos dd {
    margin: 3px 0 0;
    font-size: 13.5px;
    color: #3f3f57;
    line-height: 1.45;
    word-break: break-word;
}

/* Un dato que no se capturo se apaga en vez de dejar el hueco en blanco: asi se
   ve que el campo existe y que esta vacio. */
.catalogo-datos dd.is-vacio {
    color: #a0a0b8;
    font-style: italic;
}

/* --- Formulario --------------------------------------------------------------
   Mismo idioma que el del calendario, el de actividades por defecto y el de las
   citas: campos de 2px, esquinas de 12px, rotulo en versalitas moradas y el
   error pegado a su campo. --- */

.catalogo-form__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.catalogo-form__fila > .catalogo-campo {
    flex: 1 1 240px;
    min-width: 0;
}

.catalogo-campo { margin-bottom: 18px; }

.catalogo-campo > label {
    display: block;
    margin-bottom: 6px;
    color: var(--purple-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Los campos obligatorios se marcan en el rotulo y no con un asterisco suelto
   detras del texto, que era lo que hacia el formulario viejo. */
.catalogo-campo > label .catalogo-campo__obligatorio {
    margin-left: 5px;
    color: var(--cat-mal);
    font-weight: 700;
}

.catalogo-form .form-control {
    border-width: 2px;
    border-color: #e2e2f5;
    border-radius: 12px;
    box-shadow: none;
    color: #3f3f5a;
    transition: border-color .15s ease;
}

.catalogo-form .form-control:focus {
    border-color: var(--purple);
    box-shadow: none;
}

.catalogo-form input.form-control,
.catalogo-form select.form-control { height: 42px; }

.catalogo-form textarea.form-control { padding-top: 9px; resize: vertical; }

.catalogo-campo__pista {
    display: block;
    margin-top: 5px;
    color: #a0a0b8;
    font-size: 11.5px;
}

/* Validacion pegada a su campo: el bloque rojo del layout y el toastr se apagan
   con la seccion 'errores_en_linea'. En el maestro los pinta ademas el
   JavaScript del modal, con la respuesta 422 del servidor. */

.catalogo-campo__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: var(--cat-mal);
    font-size: 12px;
    line-height: 1.35;
}

.catalogo-campo__error i { margin-top: 1px; }

.catalogo-campo.is-invalido > label { color: var(--cat-mal); }

.catalogo-form .catalogo-campo.is-invalido .form-control { border-color: #f0b4b1; background-color: #fffbfb; }
.catalogo-form .catalogo-campo.is-invalido .form-control:focus { border-color: var(--cat-mal); }

/* --- Seccion dentro del formulario --- */

.catalogo-seccion {
    margin: 4px 0 18px;
    padding-top: 18px;
    border-top: 1px solid #ececf7;
}

.catalogo-seccion__titulo {
    margin: 0 0 4px;
    color: var(--purple);
    font-size: 14px;
    font-weight: 600;
}

.catalogo-seccion__sub {
    margin: 0;
    color: #a0a0b8;
    font-size: 12px;
    line-height: 1.5;
    max-width: 640px;
}

/* --- Archivo: el <input type=file> crudo no combina con el resto --- */

.catalogo-archivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.catalogo-archivo__boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 18px;
    border: 2px dashed #d5d5e8;
    border-radius: 12px;
    color: var(--purple);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

.catalogo-archivo__boton:hover {
    border-color: var(--purple);
    background: #f6f5ff;
}

.catalogo-archivo__boton input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.catalogo-archivo__nombre {
    color: #a0a0b8;
    font-size: 12px;
}

.catalogo-archivo__preview {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid #f1f2fb;
    background: #fbfbff;
}

/* --- Botonera --- */

.catalogo-form__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #ececf7;
}

.catalogo-form__acciones .btn {
    border-radius: 10px;
    padding: 8px 20px;
}

.catalogo-form__acciones .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.catalogo-form__acciones .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

/* --- Ventanas modales ------------------------------------------------------
   Las de AdminLTE vienen con esquinas rectas, cabecera con linea dura y titulo
   en negro. Aqui se les da la misma pinta que a las tarjetas. --- */

.catalogo-modal .modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(63, 63, 87, .22);
    overflow: hidden;
}

.catalogo-modal .modal-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f0f0f8;
}

.catalogo-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--purple);
}

.catalogo-modal .modal-header .close {
    margin-top: 2px;
    color: #b3b3c8;
    opacity: 1;
    text-shadow: none;
    font-weight: 400;
}

.catalogo-modal .modal-header .close:hover { color: var(--cat-mal); }

.catalogo-modal .modal-body { padding: 20px 22px; }

.catalogo-modal .modal-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid #f0f0f8;
}

.catalogo-modal .modal-footer .btn {
    border-radius: 10px;
    padding: 8px 20px;
}

.catalogo-modal .modal-footer .btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: #8a8aa3;
}

.catalogo-modal .modal-footer .btn-default:hover {
    background: #e2e2f5;
    color: #5a5a75;
}

/* El cuerpo del modal de edicion es largo: se desplaza el cuerpo y no la pagina
   entera, para que la botonera de guardar quede siempre a la vista. */
.catalogo-modal--alto .modal-body {
    max-height: 62vh;
    overflow-y: auto;
}

/* --- Responsive del armazon --- */

@media (max-width: 767px) {
    .catalogo-cabecera__acciones { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
    .catalogo-cabecera__buscar { width: 100%; flex: 1 1 100%; }
    .catalogo-cabecera__acciones .btn { flex: 1 1 auto; }

    .catalogo-card { padding: 18px; border-radius: 16px; }

    .catalogo-form__acciones { flex-direction: column-reverse; }
    .catalogo-form__acciones .btn { width: 100%; }
}


/* ============================================================================
   ASIGNATURAS  (/subject)

   Eran cuatro columnas de tabla —una entera solo para el icono de 35px— y la
   descripcion completa apretada en la celda de al lado. Como lo que identifica
   a una asignatura es justamente su icono y su nombre, ahora cada una es una
   tarjeta con el icono en grande, y la descripcion debajo del nombre.
   ============================================================================ */

.materias-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.materias-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #f0f0f8;
    border-radius: 16px;
    background: #fcfcff;
    transition: border-color .15s ease;
}

.materias-item:hover { border-color: #ddd9ff; }

.materias-item__icono {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: cover;
    background: white;
    border: 1px solid #eceaff;
}

/* Una asignatura sin icono no deja un hueco: lleva la inicial de su nombre, para
   que todas las tarjetas se lean con la misma forma. */
.materias-item__inicial {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
}

.materias-item__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.materias-item__nombre {
    margin: 0 0 3px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #3f3f57;
    word-break: break-word;
}

.materias-item__desc {
    margin: 0;
    color: #8a8aa3;
    font-size: 12.5px;
    line-height: 1.5;
    word-break: break-word;
}

.materias-item__desc.is-vacio { font-style: italic; color: #b3b3c8; }

.materias-item__acciones {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.materias-item__acciones form { display: inline; margin: 0; }
.materias-item__acciones .delete-bottom { cursor: pointer; }

/* En pantallas chicas la tarjeta ocupa el ancho completo. */
@media (max-width: 767px) {
    .materias-lista { grid-template-columns: 1fr; }
}


/* ============================================================================
   MAESTROS  (/teacher, con la ficha y el alta)

   Era una tabla de cinco columnas sin paginacion —se pintaban todos los maestros
   de la nomina de golpe— y un buscador escondido detras de un modal, que ademas
   busca en TODO el sistema y no solo en la nomina del colegio: de la lista no
   habia forma de saber cual de los resultados ya estaba en la nomina y cual no.

   Ahora cada maestro es una fila con su inicial, sus datos de contacto en una
   linea y una etiqueta que dice si esta o no en la nomina; el buscador esta a la
   vista en la cabecera, y a los que no estan en la nomina se les puede agregar
   desde el propio resultado.
   ============================================================================ */

.maestros-lista {
    display: flex;
    flex-direction: column;
}

.maestros-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 4px;
    border-top: 1px solid #f2f2f9;
}

.maestros-item:first-child {
    border-top: none;
    padding-top: 4px;
}

/* Iniciales en vez de foto: el maestro no tiene fotografia en el sistema, y una
   fila sin nada a la izquierda se lee peor que con su inicial. */
.maestros-item__inicial {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f0eeff;
    color: var(--purple);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* El que no esta en la nomina del colegio se distingue desde la inicial. */
.maestros-item.is-fuera .maestros-item__inicial {
    background: #f2f2f8;
    color: #a0a0b8;
}

.maestros-item__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.maestros-item__nombre {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #3f3f57;
}

.maestros-item__titulo {
    margin-left: 8px;
    color: #a0a0b8;
    font-size: 12.5px;
    font-weight: 400;
}

.maestros-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

/* --- Ficha del maestro --- */

.maestros-ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.maestros-ficha__inicial {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #f0eeff;
    color: var(--purple);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.maestros-ficha__texto {
    flex: 1 1 260px;
    min-width: 0;
}

.maestros-ficha__nombre {
    margin: 0 0 5px;
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -.3px;
}

.maestros-ficha__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

/* Mientras el bloque de datos llega por AJAX se deja el hueco con un aviso, en
   vez del vacio en blanco que quedaba antes. */
.maestros-cargando {
    padding: 26px 20px;
    text-align: center;
    color: #b3b3c8;
    font-size: 13px;
}

.maestros-cargando .fa { margin-right: 7px; }

@media (max-width: 767px) {
    .maestros-item { flex-wrap: wrap; }
    .maestros-item__cuerpo { flex: 1 1 60%; }

    /* Las acciones bajan a su propia linea, alineadas con el texto de la fila y no
       con la inicial. La regla va sobre la fila del maestro y no sobre
       `.catalogo-acciones` a secas, que es del armazon compartido. */
    .maestros-item .catalogo-acciones { flex: 1 1 100%; margin-left: 58px; }
}


/* --- Pastillas seleccionables del armazon compartido -----------------------
   Radios y casillas con pinta de pastilla: el <input> real se esconde y la
   pastilla es su <label>, asi el formulario sigue mandando el mismo campo sin
   JavaScript de por medio. Es la misma pieza que usan el calendario y las citas,
   aqui bajo el prefijo comun porque la comparten dos modulos. --- */

.catalogo-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 2px solid #f1f2fb;
    border-radius: 16px;
}

.catalogo-campo.is-invalido .catalogo-opciones { border-color: #f0b4b1; background-color: #fffbfb; }

.catalogo-opcion {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.catalogo-opcion input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.catalogo-opcion span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 2px solid #e2e2f5;
    border-radius: 999px;
    background: white;
    color: var(--purple-text);
    font-size: 13px;
    font-weight: 600;
    transition: all .15s ease;
}

.catalogo-opcion span:before {
    content: '\f10c'; /* fa-circle-o */
    font-family: FontAwesome;
    font-size: 10px;
    color: #d5d5e8;
}

.catalogo-opcion:hover span {
    border-color: var(--purple-light);
    color: var(--purple);
}

.catalogo-opcion input:checked + span {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
    box-shadow: 0 4px 10px rgba(96, 84, 255, .28);
}

.catalogo-opcion input:checked + span:before {
    content: '\f058'; /* fa-check-circle */
    color: white;
}

/* El foco de teclado tiene que verse: el <input> real es invisible. */
.catalogo-opcion input:focus + span { border-color: var(--purple-dark); }

/* Un bloque que aparece y desaparece con otro campo (los turnos, la seccion
   personalizada): al ocultarse no debe dejar el hueco de su margen inferior. */
.catalogo-campo[hidden] { display: none !important; }


/* ============================================================================
   GRADOS Y SECCIONES  (/school/grades)

   Era una tabla de seis columnas con `paginate(300)` —o sea, todos los grados del
   colegio de golpe— y el buscador perdia lo buscado al pasar de pagina, porque el
   `appends()` estaba comentado. Y lo que se viene a hacer aqui es ubicar un aula
   concreta: se busca por año y por grado, no leyendo seis columnas.

   Ahora los grados van agrupados por año en tarjetas (el año en curso primero) y
   cada aula es una fila con su grado y seccion, su coordinador y su cupo.
   ============================================================================ */

.grados-anio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

/* El año en curso es el que se consulta: se marca, y los venideros se apagan un
   poco para que no compitan. */
.grados-anio__etiqueta {
    padding: 2px 11px;
    border-radius: 999px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.grados-anio__etiqueta.is-futuro {
    background: #f4f4fa;
    color: #8a8aa3;
}

.grados-lista {
    display: flex;
    flex-direction: column;
}

.grados-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 4px;
    border-top: 1px solid #f2f2f9;
}

.grados-item:first-child {
    border-top: none;
    padding-top: 4px;
}

/* Bloque del grado: la seccion debajo del grado, como se lee en una lista de
   aulas ("3° Bachillerato / Seccion A"). */
.grados-item__aula {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 17px;
}

.grados-item__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.grados-item__nombre {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #3f3f57;
    word-break: break-word;
}

.grados-item__seccion {
    margin-left: 8px;
    color: #a0a0b8;
    font-size: 12.5px;
    font-weight: 400;
}

.grados-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

/* Cupo del aula: es un numero que se consulta de un vistazo. */
.grados-cupo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #eef0fb;
    color: #4a5bb8;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.grados-cupo .fa { font-size: 10.5px; }

/* Un aula que llego a su cupo no admite a nadie mas: se marca en ambar. */
.grados-cupo.is-lleno {
    background: #fff3e2;
    color: var(--cat-aviso);
}


/* ============================================================================
   ALUMNOS  (/student, /by_me y las citas de admision de /student/appointment)

   Eran tres tablas distintas de la misma cosa, con la fila en rojo de Bootstrap
   (`class="danger"`) para el alumno dado de baja y los encargados como badges
   celestes apilados. Ahora las tres comparten la misma fila: inicial, nombre y
   los datos en una linea, y la baja se apaga en vez de pintarse de rojo, que es
   lo mismo que ya hace la ficha del alumno.
   ============================================================================ */

.alumnos-lista {
    display: flex;
    flex-direction: column;
}

.alumnos-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 4px;
    border-top: 1px solid #f2f2f9;
}

.alumnos-item:first-child {
    border-top: none;
    padding-top: 4px;
}

/* Iniciales: el alumno tiene fotografia, pero no en el listado (la sirve
   StudentSchoolPhoto una por una y serian veinte consultas por pagina). */
.alumnos-item__inicial {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f0eeff;
    color: var(--purple);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Una matricula dada de baja se apaga, no se pinta de rojo: el registro sigue
   estando y se puede reactivar. Es el mismo criterio de la ficha del alumno. */
.alumnos-item.is-baja { opacity: .6; }

.alumnos-item.is-baja .alumnos-item__inicial {
    background: #f2f2f8;
    color: #a0a0b8;
}

.alumnos-item__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.alumnos-item__nombre {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #3f3f57;
    word-break: break-word;
}

.alumnos-item__nombre a { color: inherit; }
.alumnos-item__nombre a:hover { color: var(--purple); text-decoration: none; }

.alumnos-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

/* El NIE es la llave con la que se busca al alumno: va en cifras tabulares y
   pegado al nombre, no en una columna aparte. */
.alumnos-nie {
    font-size: 12.5px;
    color: var(--cat-tenue);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.alumnos-nie .fa { margin-right: 5px; color: #c3c3d8; }

.alumnos-grado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #eef0fb;
    color: #4a5bb8;
    font-size: 11.5px;
    font-weight: 600;
}

.alumnos-grado .fa { font-size: 10.5px; }

.alumnos-grado.is-sin {
    background: #f4f4fa;
    color: #a0a0b8;
    font-style: italic;
}

/* Los encargados eran badges celestes apilados uno debajo de otro, que en una
   celda de tabla ocupaban tres lineas. Aqui van en linea y en un solo tono. */
.alumnos-encargado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #f4f4fa;
    color: #6b6b85;
    font-size: 11.5px;
    font-weight: 600;
}

.alumnos-encargado .fa { font-size: 10.5px; color: #c3c3d8; }

/* --- Cita de admision: bloque de fecha, el mismo del calendario y las citas --- */

.alumnos-item__fecha {
    flex: 0 0 66px;
    text-align: center;
    background: #f6f5ff;
    border-radius: 14px;
    padding: 9px 6px;
}

.alumnos-item__fecha b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--purple);
}

.alumnos-item__fecha span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--purple-text);
}

.alumnos-item__fecha small {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    color: #a0a0b8;
}

/* Una cita sin fecha marcada: el hueco se ve, no se deja en blanco. */
.alumnos-item__fecha.is-sin {
    background: #fff3e2;
}

.alumnos-item__fecha.is-sin b {
    font-size: 17px;
    color: var(--cat-aviso);
}

.alumnos-item__fecha.is-sin span { color: var(--cat-aviso); }

/* --- Responsive --- */

@media (max-width: 767px) {
    .grados-item,
    .alumnos-item { flex-wrap: wrap; }

    .grados-item__cuerpo,
    .alumnos-item__cuerpo { flex: 1 1 60%; }

    .grados-item .catalogo-acciones,
    .alumnos-item .catalogo-acciones { flex: 1 1 100%; margin-left: 58px; }
}


/* ============================================================================
   ALUMNOS POR DEPARTAMENTO  (/departamental/student, Escuela Politica)

   Era una tabla `table-bordered` de siete columnas con la franja celeste del
   DataTable, las aulas como badges verdes apilados y un solo buscador. Ahora usa
   la fila de /student (.alumnos-item), marcadores que filtran por estado y una
   barra de filtros (departamento, distrito, grado, estado, cargo y orden) con las
   vinetas de lo aplicado, las mismas de la gestion disciplinaria.
   ============================================================================ */

/* Los marcadores son enlaces: filtran el listado por ese estado. */
a.departamental-marcador {
    display: block;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

a.departamental-marcador:hover,
a.departamental-marcador:focus {
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(63, 63, 87, .08);
    transform: translateY(-1px);
}

.departamental-marcador.is-activo {
    box-shadow: inset 0 0 0 2px #e2defc;
    background: #fbfaff;
}

/* --- Barra de filtros ------------------------------------------------------
   Todos los campos con la misma pinta (el buscador celeste del sistema y la
   flecha nativa del <select> no casaban con el resto) y, desde 1200px, todos en
   una sola fila: el buscador se lleva el doble de ancho y los demas se reparten
   el resto. El campo que tiene un filtro puesto se marca en morado. */

.departamental-barra {
    background: white;
    border-radius: 20px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(63, 63, 87, .04);
}

.departamental-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
}

.departamental-filtros__campo {
    flex: 1 1 150px;
    min-width: 0;
}

.departamental-filtros__campo--buscador { flex: 2 1 240px; }

.departamental-filtros__campo > label {
    display: block;
    margin: 0 0 4px 2px;
    color: #9a9ab3;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Campo base: el <select> y el buscador */
.departamental-filtros .form-control {
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid #e4e4f1;
    border-radius: 11px;
    background-color: #fafaff;
    box-shadow: none;
    color: #4f4f6a;
    font-size: 13px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.departamental-filtros .form-control:hover { border-color: #d3d1f5; }

.departamental-filtros .form-control:focus {
    border-color: var(--purple-light);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(96, 84, 255, .12);
    outline: none;
}

.departamental-filtros .form-control::placeholder { color: #b0b0c6; }

/* <select> con flecha propia y texto recortado */
.departamental-select.form-control {
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9ab3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.departamental-select::-ms-expand { display: none; }

/* Filtro puesto */
.departamental-select.form-control.is-puesto,
.departamental-buscar.is-puesto .form-control {
    border-color: #cfcaff;
    background-color: #f3f1ff;
    color: var(--purple);
    font-weight: 600;
}

.departamental-select.form-control.is-puesto {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236054ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Buscador: lupa dentro del campo */
.departamental-buscar { position: relative; }

.departamental-buscar > .fa {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #b0b0c6;
    font-size: 13px;
    pointer-events: none;
}

.departamental-buscar .form-control { padding-left: 34px; }

.departamental-buscar.is-puesto > .fa,
.departamental-buscar:focus-within > .fa { color: var(--purple); }

/* Botones */
.departamental-filtros__acciones {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

.departamental-btn.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.departamental-btn--filtrar.btn {
    background: var(--purple);
    color: white;
}

.departamental-btn--filtrar.btn:hover,
.departamental-btn--filtrar.btn:focus {
    background: var(--purple-dark);
    color: white;
}

.departamental-btn--limpiar.btn {
    background: #f1f2fb;
    color: #8a8aa3;
}

.departamental-btn--limpiar.btn:hover,
.departamental-btn--limpiar.btn:focus {
    background: #fdeceb;
    color: #d9463f;
}

/* select2 (grado): la misma pinta que los demas <select> */
.departamental-filtros .select2-container { width: 100% !important; }

.departamental-filtros .select2-container--default .select2-selection--single {
    height: 38px;
    padding: 0; /* AdminLTE le pone 6px 12px y el texto quedaba corrido */
    border: 1.5px solid #e4e4f1;
    border-radius: 11px;
    background: #fafaff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.departamental-filtros .select2-container--default .select2-selection--single:hover { border-color: #d3d1f5; }

.departamental-filtros .select2-container--default .select2-selection--single .select2-selection__rendered {
    margin-top: 0; /* AdminLTE lo sube con un margen negativo */
    padding-left: 12px;
    padding-right: 30px;
    color: #4f4f6a;
    font-size: 13px;
    line-height: 35px;
}

.departamental-filtros .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
    right: 8px;
}

.departamental-filtros .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #9a9ab3 transparent transparent;
}

.departamental-filtros .select2-container--default.select2-container--open .select2-selection--single,
.departamental-filtros .select2-container--default.select2-container--focus .select2-selection--single,
.departamental-filtros .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.departamental-filtros .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-color: var(--purple-light);
    border-radius: 11px;
    background: white;
    box-shadow: 0 0 0 3px rgba(96, 84, 255, .12);
}

.departamental-filtros__campo--grado.is-puesto .select2-container--default .select2-selection--single {
    border-color: #cfcaff;
    background: #f3f1ff;
}

.departamental-filtros__campo--grado.is-puesto .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--purple);
    font-weight: 600;
}

/* La lista del grado se pinta al final del <body>: la clase se le pone al abrir */
.select2-dropdown.departamental-select2-lista {
    min-width: 340px;
    margin-top: 4px;
    border: 1.5px solid #e4e4f1 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(63, 63, 87, .14);
}

.departamental-select2-lista .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e4e4f1;
    border-radius: 9px;
    padding: 5px 10px;
    outline: none;
}

.departamental-select2-lista .select2-results__option {
    font-size: 13px;
    padding: 7px 12px;
}

.departamental-select2-lista .select2-results__option--highlighted[aria-selected] {
    background: var(--purple);
}

/* Viñetas de lo aplicado */
.departamental-aplicados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f8;
}

.departamental-aplicados__titulo {
    margin-right: 2px;
    color: #9a9ab3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* PC: una sola fila */
@media (min-width: 1200px) {
    .departamental-filtros { flex-wrap: nowrap; }
    .departamental-filtros__campo { flex: 1 1 0; }
    .departamental-filtros__campo--buscador { flex: 2 1 0; }
    .departamental-filtros__campo--grado { flex: 1.4 1 0; }
}

/* PC chico: los botones solo con icono para que quepa la fila */
@media (min-width: 1200px) and (max-width: 1439px) {
    .departamental-btn.btn { width: 38px; padding: 0; }
    .departamental-btn.btn span { display: none; }
}

/* Movil: de a dos por fila y el buscador entero */
@media (max-width: 767px) {
    .departamental-barra { padding: 14px; border-radius: 16px; }
    .departamental-filtros__campo { flex: 1 1 calc(50% - 5px); }
    .departamental-filtros__campo--buscador { flex: 1 1 100%; }
    .departamental-filtros__acciones { flex: 1 1 100%; }
    .departamental-btn.btn { flex: 1 1 auto; }
}

/* --- Formulario del alumno (models/student/form): contrasena ---
   El boton de generar va a la derecha del titulo de la seccion, en morado, para
   que se vea; debajo del campo sigue la alerta roja de siempre. */

.alumno-clave__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.alumno-clave__generar.btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(96, 84, 255, .25);
}

.alumno-clave__generar.btn .fa { margin-right: 6px; }

.alumno-clave__campo.form-control {
    font-family: Menlo, Consolas, monospace;
    letter-spacing: .04em;
}

.alumno-clave__alerta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -4px 0 18px;
    padding: 13px 16px;
    border: 1px solid #f6cfcc;
    border-left: 4px solid #d9463f;
    border-radius: 12px;
    background: #fdf1f0;
    color: #8f3733;
    font-size: 13.5px;
    line-height: 1.45;
}

.alumno-clave__alerta-icono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fbdcd9;
    color: #d9463f;
    font-size: 15px;
}

.alumno-clave__alerta strong {
    display: block;
    color: #b8322c;
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .alumno-clave__generar.btn { width: 100%; }
}

.catalogo-seccion__titulo .fa { margin-right: 4px; }

/* --- Tabla: una columna por dato, sobre .ficha-tabla ---
   Primero se probo con la fila de /student (todo en una columna), pero aqui se
   consultan y comparan correos, telefonos y cargos: en columnas se leen mejor. */

.ficha-tabla.departamental-tabla thead th,
.ficha-tabla.departamental-tabla td {
    text-align: left;
    vertical-align: middle;
}

.ficha-tabla.departamental-tabla thead th { padding: 10px 8px; }
.ficha-tabla.departamental-tabla td { padding: 10px 8px; }

.ficha-tabla.departamental-tabla th.alumno-acciones__col,
.ficha-tabla.departamental-tabla td.alumno-acciones { text-align: right; }

.departamental-tabla__dui,
.departamental-tabla__telefono {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #6b6b85;
}

.departamental-tabla__alumno {
    display: flex;
    align-items: center;
    gap: 10px;
}

.departamental-tabla__alumno a {
    color: #3f3f57;
    font-weight: 600;
    line-height: 1.3;
}

.departamental-tabla__alumno a:hover { color: var(--purple); text-decoration: none; }

.departamental-tabla__cargo {
    min-width: 140px;
    font-size: 12.5px;
    color: #5a5a75;
}

.departamental-tabla__correo {
    font-size: 12.5px;
    color: #6b6b85;
    overflow-wrap: anywhere;
    min-width: 150px;
}

.departamental-tabla__grados { min-width: 200px; }

.departamental-tabla__grados .alumnos-grado {
    margin: 2px 4px 2px 0;
    line-height: 1.35;
}

.departamental-tabla__vacio { color: #c3c3d8; }

/* Matricula de baja: la fila se apaga, igual que en la ficha */
.departamental-tabla tr.is-baja td { opacity: .6; }
.departamental-tabla tr.is-baja td.alumno-acciones { opacity: 1; }

.departamental-tabla .alumno-acciones .btn { vertical-align: middle; }
.departamental-tabla .alumno-acciones .alumno-menu { margin-left: 4px; }

/* Pantallas de hasta 1439px: Editar solo con el lapiz, para que las acciones no se corten */
@media (max-width: 1439px) {
    .departamental-tabla .departamental-editar.btn { padding: 5px 11px; }
    .departamental-tabla .departamental-editar__texto { display: none; }
}

.departamental-editar.btn-default {
    background: #f1f2fb;
    border-color: #f1f2fb;
    color: var(--purple);
}

.departamental-editar.btn-default:hover {
    background: #e2defc;
    border-color: #e2defc;
    color: var(--purple);
}

/* --- Total de una operacion dentro de un modal (el pago del alumno) --------
   Era un `<h4 class="danger">Total: $0.00</h4>` suelto, con una clase que en
   Bootstrap 3 no pinta nada. --- */

.catalogo-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f6f5ff;
}

.catalogo-total__label {
    color: #5a5a75;
    font-size: 12.5px;
    font-weight: 600;
}

.catalogo-total__valor {
    color: var(--purple);
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ============================================================================
   SUBPANTALLAS DEL GRADO  (/school/grade/{id} y /school/grade-data/{id})

   Los alumnos del aula eran la misma tabla de seis columnas del listado general
   —con la fila roja de Bootstrap para el que ya no cursa el grado— y los datos
   del aula, un `<div class="well">` con cinco `<div class="row">` de etiqueta y
   valor, mas un modal de edicion cuyos avisos de validacion no cabian dentro:
   la seccion vacia era un flash que devolvia a la pantalla perdiendo lo demas.

   Ahora los alumnos usan la misma fila de /student (.alumnos-item) y los datos
   del aula la misma tarjeta de datos del resto del sistema; editar cambia la
   tarjeta por el formulario en la propia pantalla.
   ============================================================================ */

/* --- Horario del grado: la rejilla de siempre --------------------------------
   Es el mismo bloque `.horario-*` del panel de maestros (`escuelapp_teachers`),
   para que el horario se lea igual en los dos paneles. Era una lista plana
   "asignatura / maestro / dia / hora": para saber que toca el martes a las 10
   habia que recorrerla entera. Ahora los dias van arriba, las franjas horarias a
   la izquierda y cada asignatura lleva su color, que se repite en la leyenda.

   Solo se pintan los dias que tienen clase, asi que un colegio de lunes a
   viernes no arrastra dos columnas vacias.

   Lo que aqui se anade sobre la del maestro es el boton de quitar dentro de cada
   clase: en admin el horario se edita. --- */

.horario-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.horario {
    width: 100%;
    min-width: 620px;
    border-collapse: separate;
    border-spacing: 7px;
    table-layout: fixed;
}

/* --- Cabecera de dias --- */

.horario thead th {
    padding: 8px 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--purple-text);
    background: #f4f4ff;
    border-radius: 10px;
    border: 0;
}

.horario thead th.horario__esquina {
    background: transparent;
    color: #b6b6c9;
}

/* La columna de horas es fija y angosta: la rejilla se lee de izquierda a
   derecha y las horas solo tienen que anclar la fila. */
.horario__esquina,
.horario__hora {
    width: 84px;
}

.horario tbody th.horario__hora {
    padding: 10px 6px;
    text-align: center;
    font-weight: 600;
    background: #fafaff;
    border-radius: 10px;
    border: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.horario tbody th.horario__hora b {
    display: block;
    font-size: 13.5px;
    color: #5a5a75;
}

.horario tbody th.horario__hora span {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: #a5a5bb;
}

/* --- Celdas --- */

/* Solo la alineacion: el relleno, el borde y el fondo son cosa de .horario__celda.
   Un reset con `padding: 0` aqui le ganaria en especificidad (`.horario td` pesa mas
   que `.horario__celda`) y dejaria el texto pegado al borde y sin la barra de color. */
.horario td {
    vertical-align: top;
}

/* El color va en la propia celda y no en un <div> adentro: asi la caja llena
   siempre el alto de su fila (una materia de dos lineas no deja a sus vecinas
   flotando a media celda) sin pelear con porcentajes dentro de una tabla. */
.horario__celda {
    position: relative;
    padding: 12px 13px;
    border-radius: 10px;
    border-left: 4px solid transparent;
    background: #f6f6fb;
    line-height: 1.35;
}

.horario__celda.is-libre {
    background: transparent;
    border: 1px dashed #eeeef6;
    color: #dcdcea;
    text-align: center;
}

.horario__celda b,
.horario-clase b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #3f3f57;
}

.horario__celda > span,
.horario-clase span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #8a8aa3;
}

/* Dos asignaturas en la misma franja y el mismo dia: la celda queda neutra y
   cada clase se pinta por dentro. */
.horario__celda.is-varias {
    padding: 6px;
    background: #fbfbfe;
}

.horario-clase {
    position: relative;
    padding: 9px 10px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    background: #f6f6fb;
}

.horario-clase + .horario-clase {
    margin-top: 5px;
}

/* Quitar una hora clase: el boton vive en su celda y aparece al pasar por
   encima, para que la rejilla se lea sin veinte iconos de basura compitiendo con
   el nombre de la materia. En tactil, donde no hay hover, va siempre visible. */
.horario__quitar {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, .75);
    color: #a0a0b8;
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}

.horario__celda:hover .horario__quitar,
.horario-clase:hover .horario__quitar,
.horario__quitar:focus {
    opacity: 1;
}

.horario__quitar:hover {
    background: white;
    color: var(--cat-mal);
}

.horario__quitar[disabled] { opacity: .35; }

@media (hover: none) {
    .horario__quitar { opacity: 1; }
}

/* El nombre de la materia no se mete debajo del boton. */
.horario__celda > b,
.horario-clase > b { padding-right: 20px; }

/* --- Leyenda --- */

.horario-leyenda {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px 18px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f8;
}

.horario-leyenda__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.horario-leyenda__item b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #3f3f57;
}

.horario-leyenda__item span {
    display: block;
    font-size: 11.5px;
    color: #9a9ab0;
}

.horario-punto {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 3px;
    background: #d8d8e6;
}

/* Un color por asignatura. Son ocho y se reciclan: con mas materias que colores
   la leyenda sigue diciendo cual es cual. */
.horario__celda.is-c0,
.horario-clase.is-c0 { background: #eef0ff; border-left-color: #6054ff; }
.horario__celda.is-c1,
.horario-clase.is-c1 { background: #e9f8f1; border-left-color: #17a06a; }
.horario__celda.is-c2,
.horario-clase.is-c2 { background: #fff2e6; border-left-color: #e08420; }
.horario__celda.is-c3,
.horario-clase.is-c3 { background: #fdeef3; border-left-color: #d63a58; }
.horario__celda.is-c4,
.horario-clase.is-c4 { background: #e9f4fd; border-left-color: #2a86c8; }
.horario__celda.is-c5,
.horario-clase.is-c5 { background: #f5ecfb; border-left-color: #9050c8; }
.horario__celda.is-c6,
.horario-clase.is-c6 { background: #fdf6e3; border-left-color: #c9a227; }
.horario__celda.is-c7,
.horario-clase.is-c7 { background: #e8f6f7; border-left-color: #19919c; }

.horario-punto.is-c0 { background: #6054ff; }
.horario-punto.is-c1 { background: #17a06a; }
.horario-punto.is-c2 { background: #e08420; }
.horario-punto.is-c3 { background: #d63a58; }
.horario-punto.is-c4 { background: #2a86c8; }
.horario-punto.is-c5 { background: #9050c8; }
.horario-punto.is-c6 { background: #c9a227; }
.horario-punto.is-c7 { background: #19919c; }

@media (max-width: 767px) {
    .horario { border-spacing: 4px; }
    .horario-leyenda { grid-template-columns: 1fr; }
}


/* --- Opciones que no son excluyentes (los periodos de evaluacion) ------------
   La misma pastilla que los radios, con el cuadrito en lugar del circulo. --- */

.catalogo-opciones--multiple .catalogo-opcion span:before {
    content: '\f096'; /* fa-square-o */
}

.catalogo-opciones--multiple .catalogo-opcion input:checked + span:before {
    content: '\f14a'; /* fa-check-square-o */
}

/* --- Piezas de catalogo dentro de un modal ---------------------------------
   Las tarjetas ya traen su propio margen; dentro del modal el cuerpo es el que
   separa, y las secciones no necesitan la linea de arriba en la primera. --- */

.modal-body.catalogo-form > .catalogo-seccion:first-child { margin-top: 0; }

.modal-body.catalogo-form .grados-lista .grados-item:first-child,
.modal-body.catalogo-form .alumnos-lista .alumnos-item:first-child {
    padding-top: 4px;
}



/* ============================================================================
   GRADOS DISTRITALES  (/grades_distritales/grades y /grades_distritales/{id},
   Escuela Politica)

   Eran dos tablas `table-bordered` con la franja celeste del DataTable y un solo
   buscador. Siguen siendo tablas (cada dato en su columna), pero con el estilo
   nuevo: tarjetas .catalogo-card, marcadores que filtran y la barra de filtros
   de /departamental/student (.departamental-*). Aqui solo va lo propio.
   ============================================================================ */

.distritales-grupo__icono {
    margin-right: 4px;
    color: var(--purple);
}

/* Maestros del aula, en la cabecera de la pantalla de alumnos */
.catalogo-cabecera__texto .distritales-maestros { margin-top: 10px; }

/* --- Tabla ---------------------------------------------------------------- */

.distritales-tabla-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
}

.distritales-tabla {
    width: 100%;
    border-collapse: collapse;
}

.distritales-tabla thead th {
    padding: 10px 12px;
    border-bottom: 2px solid var(--ficha-borde);
    color: var(--ficha-tenue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.distritales-tabla tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid #f2f2f9;
    color: #4a4a63;
    font-size: 13px;
    vertical-align: middle;
}

.distritales-tabla tbody tr:last-child td { border-bottom: none; }

.distritales-tabla tbody tr:hover td { background: #fbfbff; }

.distritales-tabla th.text-center,
.distritales-tabla td.text-center { text-align: center; }

/* Matricula de baja: se apagan los datos, no el boton de reactivar */
.distritales-tabla tbody tr.is-baja td:not(.distritales-col-acciones) { opacity: .55; }

/* Columnas */
.distritales-col-grado { min-width: 220px; }
.distritales-col-alumno { min-width: 240px; }
.distritales-col-maestros { min-width: 180px; }
.distritales-col-email { word-break: break-all; min-width: 180px; }
.distritales-col-num { width: 1%; color: #b0b0c6 !important; font-size: 12px !important; }

.distritales-tabla .distritales-col-acciones {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.distritales-mono { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Nombre del grado con su icono */
.distritales-celda-nombre {
    display: flex;
    align-items: center;
    gap: 11px;
}

.distritales-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 14px;
}

.distritales-avatar--departamental { background: #e8f6fb; color: #2b93b6; }

.distritales-enlace,
.distritales-enlace:focus {
    color: #3f3f57;
    font-weight: 600;
    text-decoration: none;
}

.distritales-enlace:hover {
    color: var(--purple);
    text-decoration: none;
}

.distritales-sub {
    display: block;
    color: #a0a0b8;
    font-size: 12px;
}

/* Tipo de aula */
.distritales-tipo {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f0eeff;
    color: var(--purple);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.distritales-tipo--departamental { background: #e8f6fb; color: #2b93b6; }
.distritales-tipo--otro { background: #f2f2f8; color: #8a8aa3; }

/* Maestros: uno por linea */
.distritales-maestro {
    display: block;
    line-height: 1.5;
}

.distritales-maestro::before {
    content: "\f19d";
    font-family: FontAwesome;
    margin-right: 6px;
    color: #b0b0c6;
    font-size: 11px;
}

/* Cifras */
.distritales-cifra {
    display: inline-block;
    min-width: 34px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef0fb;
    color: #4a5bb8;
    font-size: 12.5px;
    font-weight: 700;
}

.distritales-cifra.is-cero { background: #fff3e2; color: var(--ficha-alerta); }

.distritales-vacio { color: #c8c8d8; }

.distritales-falta { color: #d0a060; font-style: italic; white-space: nowrap; }

/* --- Botones -------------------------------------------------------------- */

.distritales-ver.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.distritales-accion.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.distritales-accion--baja.btn { background: #f1f2fb; color: #8a8aa3; }

.distritales-accion--baja.btn:hover,
.distritales-accion--baja.btn:focus { background: #fdeceb; color: #d9463f; }

.distritales-accion--alta.btn { background: #e7f7ef; color: #1f8b52; }

.distritales-accion--alta.btn:hover,
.distritales-accion--alta.btn:focus { background: #1f8b52; color: white; }