/* Estilos personalizados */

body {
    padding-bottom: 60px; /* Espacio para posible footer fijo */
    background-color: #f8f9fa; /* Un fondo ligeramente gris para toda la página */
}

#loading-spinner {
    /* Centrado si es necesario, ya tiene text-center en HTML */
}

/* Estilo para botones de acción en tablas */
.action-btn {
    margin-right: 5px;
    margin-bottom: 5px; /* Espacio en pantallas pequeñas */
}

/* Ocultar elementos por defecto si es necesario */
/* .d-none ya existe en bootstrap */

/* Estilo para indicar estado visualmente (opcional) */
.status-activo {
    color: green;
    font-weight: bold;
}
.status-inactivo {
    color: red;
    font-weight: bold;
}

/* Asegurar que el spinner dentro del modal sea visible */
#edit-user-spinner {
   /* Estilos si son necesarios */
}

#user-list-spinner {
   /* Estilos si son necesarios */
}

/* css/style.css */

/* Estilos para la sección Plantel */
#form-plantel-configuracion .card-header h5 {
    font-weight: 500; /* Un poco menos grueso que el h2 principal */
}

#form-plantel-configuracion .form-label {
    font-weight: 500; /* Etiquetas un poco más destacadas */
    font-size: 0.95rem;
}

#plantel-sedes-table-container {
    min-height: 150px; /* Para que no colapse si está vacía inicialmente */
}

/* Mejorar apariencia de los selects deshabilitados */
select:disabled {
    background-color: #e9ecef !important; /* Color de fondo de Bootstrap para inputs disabled */
    opacity: 0.7 !important;
}

/* Estilo para mensajes de feedback dentro de las tarjetas */
.card-body .alert {
    margin-top: 1rem;
}


/* ================================================= */
/* === NUEVOS ESTILOS PARA MÓDULO DE ESTUDIANTES === */
/* ================================================= */

/* --- Estilos para vista_estudiante_buscador.html --- */
#buscador-estudiante-input {
    border-radius: 0.375rem 0 0 0.375rem; /* Redondear solo lado izquierdo */
}
#btn-accion-buscar-estudiante {
    border-radius: 0 0.375rem 0.375rem 0; /* Redondear solo lado derecho */
}

#sugerencias-busqueda-estudiante .list-group-item {
    border-top: none; /* Evitar doble borde con el input */
    font-size: 0.9rem;
}
#sugerencias-busqueda-estudiante .list-group-item strong {
    color: var(--bs-primary);
}

/* --- Estilos para vista_estudiante_detalle.html --- */

/* Encabezado Principal del Detalle */
#contenedor-detalle-estudiante-principal > .card > .card-header {
     background-color: #0056b3; 
     border-bottom: 3px solid #004085; 
}
#encabezado-nombre-estudiante-detalle {
    font-weight: 500;
}

/* Vistazo Rápido */
.vistazo-rapido-seccion .card-body { /* Si envuelves el vistazo rápido en una card */
    background-color: #f8f9fa; /* Fondo ligeramente diferente para esta sección */
}
.vistazo-rapido-seccion strong {
    color: #495057; /* Gris oscuro para los labels */
}
#foto-estudiante-vistazo-rapido {
    border: 3px solid #dee2e6; /* Borde más sutil */
    padding: 3px;
    background-color: #fff;
}
.vistazo-rapido-seccion .badge {
    font-size: 0.9em;
    padding: 0.4em 0.7em;
}
.vistazo-rapido-seccion h5 { /* Título "Acciones Rápidas" */
    font-weight: 500;
    color: #343a40;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

/* Pestañas (Tabs) */
#pestanas-detalle-estudiante .nav-link {
    color: #495057;
    font-weight: 500;
    border-bottom-width: 3px; /* Hacer el borde inferior más grueso */
    border-color: transparent transparent #dee2e6; /* Borde inferior por defecto */
}
#pestanas-detalle-estudiante .nav-link.active {
    color: var(--bs-primary);
    border-color: var(--bs-primary) var(--bs-primary) #fff; /* Borde activo */
    background-color: #fff; /* Fondo blanco para la pestaña activa */
}
#pestanas-detalle-estudiante .nav-link:hover {
    border-color: #e9ecef #e9ecef var(--bs-primary); /* Borde al hacer hover */
    color: var(--bs-primary);
}

/* Contenido de las Pestañas (Cards internas) */
.tab-content > .tab-pane > .card {
    border-top: none; /* Quitar borde superior de la card si las pestañas están arriba */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px; /* Para que se alinee con el borde inferior de las pestañas */
}
.tab-content > .tab-pane > .card .card-header {
    background-color: #f8f9fa; /* Un fondo muy claro para los headers de las cards internas */
    border-bottom: 1px solid #e9ecef;
}
.tab-content > .tab-pane > .card .card-header h5 {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Formularios dentro de las pestañas */
#form-info-personal-estudiante .form-label {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.25rem;
}
#form-info-personal-estudiante h5 { /* Títulos de secciones dentro del form */
    font-size: 1rem;
    font-weight: 600;
    color: #0056b3; /* Azul oscuro para títulos de sección */
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dotted #ccc;
}

/* Estilos para tablas dentro de las pestañas (Documentos, Matrículas, etc.) */
.tab-content .table {
    margin-bottom: 0; /* Quitar margen inferior si es la última en la card */
}
.tab-content .table thead th {
    background-color: #e9ecef; /* Fondo claro para cabeceras de tabla */
    font-weight: 500;
    font-size: 0.9rem;
}
.tab-content .table td, .tab-content .table th {
    vertical-align: middle;
}

/* Mejoras para Modales del módulo estudiante */
.modal-header {
    background-color: var(--bs-light); 
     border-bottom: 1px solid #dee2e6; 
}
#modal-form-acudiente-est .modal-lg,
#modal-form-matricula-est .modal-lg,
#modal-form-observacion-est .modal-lg {
  max-width: 800px; /* O el ancho que prefieras para modales grandes */
}

/* Estilo específico para el list-group de Observaciones */
#contenedor-tabla-observaciones-estudiante .list-group-item {
    border-left-width: 4px;
    /* border-left-color: var(--bs-info); /* Color de acento */
}
#contenedor-tabla-observaciones-estudiante .list-group-item h6 .badge {
    font-size: 0.8em;
}
#contenedor-tabla-observaciones-estudiante .list-group-item p {
    font-size: 0.95rem;
}
#contenedor-tabla-observaciones-estudiante .list-group-item small {
    font-size: 0.85rem;
}
/* css/style.css */

/* ... (tus estilos existentes) ... */

/* ================================================= */
/* === ESTILOS MEJORADOS PARA EL MÓDULO PROFESOR === */
/* ================================================= */

/* --- Variables de Color (Opcional - Descomentar y ajustar si se usan) --- */
/*
:root {
    --profesor-primary-bg: #f0f6ff; /* Un azul muy claro para fondos de sección
    --profesor-card-header-bg: #e9ecef; /* Similar al Bootstrap light pero consistente
    --profesor-table-header-bg: #f8f9fa;
    --profesor-accent-color: #0d6efd; /* Bootstrap primary
    --profesor-text-muted-darker: #6c757d; /* Bootstrap text-muted
}
*/

/* --- Dashboard del Profesor --- */
#profesor-main-content-area .card-carga-academica .card-header,
#profesor-main-content-area .card .card-header { /* Aplicar a todos los card-header en el dashboard */
    background-color: #f8f9fa; /* var(--profesor-card-header-bg); si usas variables */
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem; /* Ajustar padding */
}

#profesor-main-content-area .card-carga-academica .card-header strong {
    color: var(--bs-primary); /* Color primario de Bootstrap para el nombre de la materia */
    font-size: 1.1rem;
}
#profesor-main-content-area .card-carga-academica .card-header small {
    font-size: 0.85rem;
    color: #6c757d; /* var(--profesor-text-muted-darker); */
}

#profesor-main-content-area .card-carga-academica .card-body {
    padding: 1rem;
    font-size: 0.9rem;
}
#profesor-main-content-area .card-carga-academica .card-body .row > div {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
#profesor-main-content-area .card-carga-academica .card-body h6.small {
    margin-bottom: 0.35rem; /* Menos espacio bajo "Progreso P.X" */
}
#profesor-main-content-area .card-carga-academica .card-body canvas {
    max-width: 100%; /* Asegurar responsividad del chart */
}

#profesor-main-content-area .card-carga-academica .card-footer {
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    padding: 0.75rem;
}
#profesor-main-content-area .btn-ingresar-notas-profesor {
    font-weight: 500;
    padding: 0.375rem 0.85rem; /* Un poco más de padding */
}
#profesor-main-content-area .btn-ingresar-notas-profesor[disabled] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
    opacity: 0.65;
}

/* Contador de Cierre de Calificaciones */
#contador-cierre-calificaciones {
    border-left-width: 4px;
    border-radius: 0.375rem;
}
#contador-cierre-calificaciones.alert-warning {
    border-left-color: var(--bs-warning);
}
#contador-cierre-calificaciones.alert-danger {
    border-left-color: var(--bs-danger);
}
#contador-cierre-calificaciones strong {
    font-size: 1.05em;
}


/* --- Planillas de Calificación del Profesor (#profesor-planilla-wrapper) --- */
#profesor-planilla-wrapper > .card > .card-header {
    background-color: #e9f5ff; /* Un azul muy pálido para el encabezado principal */
    border-bottom: 2px solid #b8d6f0; /* Un borde azul más oscuro */
}
#profesor-planilla-wrapper > .card > .card-header h4 {
    color: #0056b3; /* Azul oscuro para el título */
}
#profesor-planilla-wrapper > .card > .card-header small.text-muted {
    color: #5a6f82 !important; /* Hacer el texto muted un poco más oscuro aquí */
}
#profesor-planilla-wrapper #display-periodo-planilla-profesor, /* Para el <p> o <select disabled> */
#profesor-planilla-wrapper input[type="text"][disabled][readonly].form-control-sm { /* Para el input disabled */
    font-weight: 500;
    color: var(--bs-primary);
    background-color: #fff !important; /* Forzar fondo blanco si es input disabled */
    border: 1px dashed #ced4da !important; /* Borde punteado para indicar no editable */
    opacity: 1 !important; /* Asegurar opacidad completa */
    cursor: default;
}
#profesor-planilla-wrapper select[disabled].form-select-sm {
    font-weight: 500;
    color: var(--bs-primary);
    border: 1px dashed #ced4da !important;
}


/* Contenedor del Tipo de Calificación */
#tipo-calificacion-display-container-profesor {
    padding: 0.5rem;
    border-radius: 0.25rem;
}
#tipo-calificacion-display-container-profesor strong {
    font-weight: 600;
}
#selector-tipo-calificacion-container-profesor {
    background-color: #f8f9fa; /* var(--profesor-primary-bg); */
    border: 1px solid #e0e6ef;
}
#selector-tipo-calificacion-container-profesor .form-label {
    color: #343a40;
}

/* Tablas de Planilla */
#planilla-especifica-container-profesor .table {
    font-size: 0.875rem; /* Ligeramente más pequeño para más densidad si es necesario */
    border: 1px solid #dee2e6;
}
#planilla-especifica-container-profesor .table thead th {
    background-color: #e9ecef; /* var(--profesor-table-header-bg); */
    color: #212529;
    font-weight: 600; /* Cabeceras más fuertes */
    vertical-align: middle;
    border-bottom-width: 2px; /* Borde inferior más grueso para cabeceras */
    border-color: #c8d0d5;
    white-space: nowrap; /* Evitar que los títulos de columna se partan mucho */
}
/* Estilos específicos para cabeceras de criterios (para que el fondo se aplique bien) */
#form-planilla-criterios-profesor .table-active.criterio-group-header-profesor {
    background-color: #d1e7ff !important; /* Azul claro de Bootstrap para énfasis */
    color: #004085;
    font-weight: 600;
}
#form-planilla-criterios-profesor .table-info.fw-normal { /* Promedio de criterio */
    background-color: #cff4fc !important; /* Cian claro */
    font-weight: 500 !important;
}


#planilla-especifica-container-profesor .table tbody tr:hover {
    background-color: #f8f9fa; /* Un hover sutil */
}
#planilla-especifica-container-profesor .table td {
    vertical-align: middle;
    padding: 0.4rem 0.5rem; /* Ajustar padding de celdas */
}
#planilla-especifica-container-profesor .table .form-control-sm {
    padding: 0.25rem 0.4rem; /* Ajustar padding de inputs */
    font-size: 0.875rem; /* Coincidir con el tamaño de fuente de la tabla */
    height: calc(1.5em + 0.5rem + 2px); /* Altura estándar de Bootstrap sm */
}
#planilla-especifica-container-profesor .table .form-select-sm {
    padding: 0.25rem 1.5rem 0.25rem 0.5rem; /* Ajustar padding de selects */
    font-size: 0.875rem;
    height: calc(1.5em + 0.5rem + 2px);
}

/* Celdas de acumulados y definitivas */
#planilla-especifica-container-profesor .table .table-warning, /* Acumulados */
#planilla-especifica-container-profesor .table .table-success, /* Final */
#planilla-especifica-container-profesor .table .table-info,   /* Nota Requerida o Promedio Criterio */
#planilla-especifica-container-profesor .table .table-primary /* Definitiva del periodo */
{
    font-weight: bold;
}
/* Celda de nota definitiva del periodo en planilla de criterios */
#planilla-especifica-container-profesor .def-periodo-val-profesor {
    background-color: #cfe2ff; /* Un azul más claro para la definitiva */
}


/* --- Modales del Profesor --- */
/* Encabezado general para modales del profesor (si quieres uno específico) */
.modal .modal-header { /* Aplicar a todos los modales si no tienen ya un estilo específico */
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.modal .modal-header .modal-title {
    color: #343a40;
    font-weight: 500;
}

/* Modal Configuración de Criterios (#modalConfigCriteriosProfesor) */
#modalConfigCriteriosProfesor .modal-body {
    background-color: #fff;
}
#modalConfigCriteriosProfesor .criterio-item-modal-profesor {
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
    margin-bottom: 0.75rem !important; /* Forzar margen */
}
#modalConfigCriteriosProfesor .criterio-item-modal-profesor:last-child {
    margin-bottom: 0 !important;
}
#modalConfigCriteriosProfesor #total-porcentaje-criterios-modal-profesor {
    font-size: 1.1em;
    padding: 0.5rem;
    border-radius: 0.25rem;
}
#modalConfigCriteriosProfesor #total-porcentaje-criterios-modal-profesor.text-success {
    background-color: #d1e7dd; /* Verde claro de Bootstrap */
    color: #0f5132 !important;
}
#modalConfigCriteriosProfesor #total-porcentaje-criterios-modal-profesor.text-danger {
    background-color: #f8d7da; /* Rojo claro de Bootstrap */
    color: #842029 !important;
}

/* Modal Selección de Logros (#modalSeleccionLogrosProfesor) */
#modalSeleccionLogrosProfesor #form-crear-editar-logro-profesor {
    background-color: #f8f9fa; /* Un fondo ligeramente diferente para el formulario */
    border: 1px solid #dee2e6;
    padding: 1rem;
    border-radius: 0.375rem;
}
#modalSeleccionLogrosProfesor #lista-logros-sugeridos-container-profesor .list-group-item {
    padding: 0.6rem 0.75rem; /* Ajustar padding de items de logro */
    border-color: #e9ecef;
}
#modalSeleccionLogrosProfesor #lista-logros-sugeridos-container-profesor .list-group-item:hover {
    background-color: #f0f6ff; /* Un hover azulado muy claro */
}
#modalSeleccionLogrosProfesor .logro-texto-item-profesor .badge {
    font-size: 0.75em;
    vertical-align: middle;
}

/* Modales de Guía */
.modal[id^="modalGuia"] .modal-header { /* Aplica a todos los modales cuyo ID empieza con "modalGuia" */
    background-color: #e9ecef; /* Un gris un poco más oscuro para los modales de guía */
}
.modal[id^="modalGuia"] .modal-title i {
    font-size: 1.2em; /* Ícono un poco más grande */
}
.modal[id^="modalGuia"] .modal-body h6 {
    font-weight: 600;
    color: var(--bs-primary); /* Azul para los subtítulos */
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.modal[id^="modalGuia"] .modal-body ul {
    padding-left: 1.5rem; /* Mejor indentación para listas */
}
.modal[id^="modalGuia"] .modal-body li {
    margin-bottom: 0.35rem;
}
/* Para el acordeón en el modal de selección de método */
#modalGuiaSeleccionMetodoProfesor .accordion-button {
    font-weight: 500;
}
#modalGuiaSeleccionMetodoProfesor .accordion-button:not(.collapsed) {
    color: #0c63e4; /* Color del texto del botón de acordeón activo */
    background-color: #e7f1ff; /* Fondo del botón de acordeón activo */
}
#modalGuiaSeleccionMetodoProfesor .accordion-body {
    font-size: 0.95rem;
}


/* Ajustes generales para feedback en modales */
.modal .alert {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}
#navbar-brand-link img {
    max-height: 35px; /* Ajusta la altura máxima del logo */
    /* object-fit: contain; */ /* Para asegurar que el logo no se distorsione, opcional */
    border-radius: 3px; /* Un ligero redondeo si el logo no es circular */
}

#navbar-plantel-name {
    font-weight: 500; /* Un poco más de peso al nombre */
    font-size: 1.1rem; /* Ligeramente más grande */
    margin-left: 0.25rem; /* Pequeño espacio si se muestran ambos, logo y nombre */
}



/* ======================================================= */
/* === ESTILOS RESPONSIVE FINALES PARA EL MÓDULO DE CHAT === */
/* ======================================================= */

/* --- Estilos Base (Móvil Primero) --- */
.chat-container {
    /* En móvil, la altura es automática para permitir el scroll de toda la página */
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow: hidden; /* Evita desbordamientos extraños */
}

/* En móvil, la columna de usuarios y de chat se apilan */
.chat-sidebar {
    /* Damos una altura máxima a la lista de usuarios para que no ocupe toda la pantalla */
    max-height: 250px; 
    overflow-y: auto;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6; /* Separador entre usuarios y chat en móvil */
}

#chat-messages-window {
    /* En móvil, la caja de mensajes necesita una altura fija para ser visible */
    height: 45vh; /* 45% de la altura de la ventana del navegador */
    overflow-y: auto;
    padding: 1rem;
    background-color: #e9ecef;
    display: flex;
    flex-direction: column;
}


/* --- Estilos para Escritorio (Pantallas más grandes de 768px) --- */
@media (min-width: 768px) {
    .chat-container {
        /* En escritorio, volvemos al layout de altura fija y dos columnas */
        height: calc(100vh - 120px); 
        max-height: 800px;
    }

    .chat-container .row {
        height: 100%;
    }
    
    .chat-sidebar {
        height: 100%; /* Ocupa toda la altura del contenedor */
        max-height: none; /* Quitamos la altura máxima del móvil */
        border-bottom: none; /* Quitamos el borde inferior */
        border-right: 1px solid #dee2e6; /* Ponemos el borde lateral */
        display: flex;
        flex-direction: column;
    }

    .chat-main {
        height: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    #chat-messages-window {
        /* En escritorio, la altura es flexible para ocupar el espacio sobrante */
        flex-grow: 1; 
        height: auto; /* Anulamos la altura fija del móvil */
    }
}


/* --- Estilos Comunes (Burbujas, texto, etc. - Sin cambios) --- */
.message-bubble {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.chat-message {
    display: flex;
    margin-bottom: 1rem;
    max-width: 85%; /* Un poco más de ancho en móvil puede ser útil */
}

@media (min-width: 768px) {
    .chat-message {
        max-width: 75%;
    }
}

.chat-message.message-other { align-self: flex-start; }
.message-other .message-bubble {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-top-left-radius: 0.25rem;
}

.chat-message.message-self { align-self: flex-end; margin-left: auto; }
.message-self .message-bubble {
    background-color: #0d6efd;
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.message-sender {
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    color: #0d6efd;
}

.message-self .message-sender { display: none; }
.message-content { font-size: 0.95rem; }
.message-timestamp {
    font-size: 0.7rem;
    text-align: right;
    margin-top: 0.3rem;
    opacity: 0.8;
}
.message-other .message-timestamp { color: #6c757d; }
.chat-input-area { background-color: #f8f9fa; flex-shrink: 0; }
.chat-attachment a {
    color: inherit;
    text-decoration: none;
    border: 1px solid;
    border-color: rgba(255,255,255,0.5);
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}
.message-other .chat-attachment a {
    border-color: #adb5bd;
    color: #212529;
}
.chat-attachment a:hover { background-color: rgba(0,0,0,0.1); }
a.menu-item[data-content-type="chat"] {
    position: relative; /* Necesario para posicionar el badge */
    display: flex;
    align-items: center;
}

.notification-badge {
    /* Pequeños ajustes para que se vea bien junto al texto del menú */
    font-size: 0.6em;
    padding: 0.25em 0.5em;
}

.chat-list-header {
    font-weight: 600;
    color: #6c757d; /* Color gris de Bootstrap */
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #f8f9fa; /* Un fondo muy ligero */
    border-bottom: 1px solid #dee2e6;
}

.chat-user-list-container .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.chat-user-list-container .list-group-item.active {
    background-color: #e9ecef;
    color: #212529;
    border-color: #dee2e6;
}
.signature-pad-wrapper {
    position: relative;
    width: 100%;
    height: 150px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #f8f9fa;
    border: 1px dashed #ccc;
    cursor: crosshair; /* ¡Esta línea es clave para la UX! */
}

.signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.message-actions {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.chat-message:hover .message-actions {
    opacity: 1;
}
.action-icon {
    cursor: pointer;
    margin-left: 8px;
    font-size: 0.9em;
    color: #6c757d;
}
.action-icon:hover {
    color: #343a40;
}
.avatar-group-icon {
    width: 32px;
    height: 32px;
    background-color: #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #495057;
}
.manage-room-btn {
    cursor: pointer;
    color: #6c757d;
    padding: 5px;
}
.manage-room-btn:hover {
    color: #343a40;
}