#spinner-wrapper {
  width: 100%;
  height: 100%;
  background-color: rgba(117, 170, 219, 0.5);
  position: absolute;
  z-index: 20000;
  opacity: 0.3;
}

#spinner-wrapper span {
  top: 33%;
      left: 48%;
      position: absolute;
      color: black;
      font-weight: 800;
}

/* --- CÓDIGO ACTUALIZADO PARA AJUSTAR EL TAMAÑO DE LAS TARJETAS DE ESTUDIANTE --- */

.fx-card-avatar {
  max-width: 120px;  /* Define un ancho máximo para el círculo */
  max-height: 120px; /* Define un alto máximo para el círculo */
  margin-left: auto;
  margin-right: auto;
  /* La siguiente línea ya la tenías, la conservamos por si es necesaria */
  height: auto!important; 
}

.fx-card-avatar img {
  width: 100%;       /* La imagen ocupa el 100% del círculo */
  height: 100%;      /* La imagen ocupa el 100% del círculo */
  object-fit: cover; /* Asegura que la imagen cubra el círculo sin deformarse */
}

.content.login-page {
  position: relative;
  overflow: scroll;
}

.login-box {
  margin-top: 3%!important;
  min-height: 75%;
}

.login-page .login-box-body {
  background-color: transparent!important;
  box-shadow: 0 0 0 0!important;
}

.login-page .form-element .form-control {
  /* color: #7460ee; */
  color: white;
}
.login-page .form-element .form-control::placeholder {
  /* color: #7460ee; */
  color: white;
  opacity: 0.7;
}

.flag-icon {
  font-size: 22px!important;
}

a .languageMenuItem.selected {
  background-color: black;
  opacity: 0.3;
}

.signInBtn {
  border-radius: 20px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid;
    margin: 1em 0;
    padding: 0;
    width: 100%; /* Reemplazo más compatible */
    opacity: 0.3;
}

#modalModulesAssistanceDialog .modal-dialog {
  height: 600px!important;
}

.modal-header {
  background-color: white!important;
  color: black; /* Error corregido: se quitó el # */
  border-color: #1e88e5 !important;
  border-bottom: 1px solid;
}

.modal-header button {
  color: white;

}

.ratingOption label {
  min-width: 60px!important;
  margin-bottom: 20px;
  border-right: 2px;
  border-right-width: 2px;
  border-right-color: #ADD8E6;
  border-right-style: inset;
  min-height: 40px;
}

.ratingOption {
  margin-left: 10px;
}

.btn-social-icon>a {
  color: white!important;
}

.user-social i {
  color: white!important;
  width: 15px;
}

/* .studentsPermissionsList {
  list-style: none;
}

.studentsPermissionsList li {
  margin-bottom: 10px;
} */

.sidebar-mini.sidebar-collapse .main-sidebar .user-profile>.user-description {
    display: none!important;
}

table {
  font-size: 13px!important;
}

.skin-blue-light .login .main-header {
  position:fixed;
  width: 100%;
}

.skin-blue-light .login .content {
  /* top: 30px; */
  height: auto;
  position:fixed;
}

.skin-blue-light .login .login-footer {
  bottom:0;
}
.login .main-header .navbar {
  margin-left: 0px!important;
}

video.fullscreen {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
}

.skin-blue-light .content.login-page {
  background: url(/images/abrazos-ronda-biodanza.jpg) center center no-repeat #d2d6de;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
  opacity: 0.8;
}

.skin-blue-light .content.login-page .login-box .description {
  color: white;
  font-weight: 200!important;
  margin-bottom: 80px;
}

.content.login-page .firma-rolando-logo {
  margin-top: 50px;
}

.content.login-page .login-logo {
  color: white;
}

.content.login-page .logo-lg {
  background-color: white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

.content.login-page .biodanza-logo {
  width: 190px;
}

.skin-blue-light .login-footer {
  height: auto;
  width: 100%;
  /* position: relative; */
  /* background-color: #1e88e5; */
  color: white!important;
  padding: 30px;
}

.fx-card-content h3 {
  font-size: 18px;
}

.notes {
  width: 100%!important;
}

#page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #FFF none repeat scroll 0% 0%;
z-index: 99999;
}
#page-loader .preloader-interior {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    animation: spin 2s linear infinite;
}
#page-loader .preloader-interior:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    animation: spin 2s linear infinite;
}

#page-loader .preloader-interior:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    animation: spin 2s linear infinite;

}

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

#pictureCropperModalDialog {
  width: 600px!important;
  height: 300px!important;
  max-height: 300px!important;
  max-width: 600px!important;
}

.modal-footer .pull-right > btn {
  right: 10px!important;
}

iframe.wysihtml5-sandbox {
  width: 100%!important;
}

.modal-footer button {
  float: right;
  margin-left: 10px;
}

.containerImgCircle {
  width: 120px;
  height: 120px;
}

img.img-profile-assistance {
  width: 32px;
}

.searchStudent .input-group .input-group-addon {
  border: 0!important;
  padding-top: 10px!important;
}

.attachment a {
  color: #1e88e5!important;
}

.panel-group .panel-title:before {
  content: "\2303"!important;
  transform: rotate(180deg);
}

.panel-group .panel-title:after {
  content: "\2303"!important;
  transform: rotate(180deg);
}

.removeStudent {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Oculta los elementos que solo deben aparecer al imprimir */
.print-only {
    display: none;
}

/* FORZAR ESTILOS DE CROPPIE SOBRE BOOTSTRAP */

.cr-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #ffffff !important;
  height: 5px !important;
  margin-top: 15px !important;
}

.cr-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  background: #3498db !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

.cr-slider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  background: #3498db !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

/* ========================================================== */
/* ESTILOS PARA MODERNIZAR EL MODAL DE MONOGRAFÍA */
/* ========================================================== */

/* Estilo general del contenido del modal */
#modalMonographyDialog .modal-content {
    border-radius: 8px; /* Bordes más suaves */
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Encabezado del modal */
#modalMonographyDialog .modal-header {
    background-color: #f8f9fa; /* Un gris muy claro para el fondo */
    border-bottom: 1px solid #dee2e6; /* Línea separadora sutil */
    color: #212529; /* Texto oscuro */
    border-radius: 8px 8px 0 0;
}

#modalMonographyDialog .modal-header h3 {
    font-size: 1.25rem; /* Tamaño de letra moderno */
    font-weight: 500;
    margin: 0;
}

/* Cuerpo del modal */
#modalMonographyDialog .modal-body {
    padding: 2rem; /* Más espaciado interno */
}

/* Pie de página del modal */
#modalMonographyDialog .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
}

/* Estilo para los botones dentro de este modal */
#modalMonographyDialog .btn {
    border-radius: 5px; /* Bordes redondeados para botones */
    padding: 10px 20px;
    font-weight: 500;
    border: none;
    transition: all 0.2s ease-in-out;
}

#modalMonographyDialog .btn-success {
    background-color: #28a745; /* Verde de Bootstrap */
    color: white;
}

#modalMonographyDialog .btn-success:hover {
    background-color: #218838;
}

#modalMonographyDialog .btn-default {
    background-color: #6c757d; /* Gris de Bootstrap */
    color: white;
}

#modalMonographyDialog .btn-default:hover {
    background-color: #5a6268;
}

/* --- Estilo para campos de formulario inválidos --- */
.is-invalid {
    border-color: #dc3545 !important; /* Un rojo estándar para errores */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Un suave resplandor rojo */
}

/* --- Cambiar color del botón de subida de monografía --- */
#uploadMonographyFile {
    background-color: #1e88e5; /* Azul más intenso y corporativo */
    border-color: #1e88e5;
}

/* --- Espaciado uniforme para botones del modal de monografía --- */
#modalMonographyDialog .modal-footer {
    display: flex;
    justify-content: flex-end; /* Alinea los botones a la derecha */
}

/* Añade un margen a la izquierda de cada botón para separarlos */
#modalMonographyDialog .modal-footer button {
    margin-left: 4px; /* Puedes ajustar este valor si quieres más o menos espacio */
}

/* --- Estilos personalizados para la tabla de monografía --- */

/* 1. Asegura que el fondo de la fila sea blanco por defecto */
#studentMonographyTable tbody tr {
    background-color: #ffffff;
}

/* 2. Cambia el color de fondo a celeste claro al pasar el mouse */
#studentMonographyTable tbody tr:hover {
    background-color: #dddbde; /* Un tono de celeste claro */
    cursor: pointer; /* Opcional: cambia el cursor para indicar que es clickeable */
}
/* --- Ajustes de alineación para la tabla de monografía --- */

/* 1. Centra verticalmente el texto dentro de la tabla */
#studentMonographyTable tbody td {
    vertical-align: middle;
}

/* --- Estilos para Scrollbar Personalizada (Siempre Visible) --- */

.custom-scrollbar {
  max-height: 450px;
  overflow-y: scroll; /* Cambiado a 'scroll' para que siempre sea visible */
  position: relative;
}

/* Para navegadores como Chrome, Edge, Safari */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #F8D7DA; 
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 10px;
}

/* Para Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #999; 
}

/* --- Estilos para un Modal Moderno (basado en Monografía) --- */
#modalSupervisionDialog .modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
#modalSupervisionDialog .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
    border-radius: 8px 8px 0 0;
}
#modalSupervisionDialog .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
}

/* --- Ocultar el Footer cuando un Modal está abierto --- */
body.modal-open .main-footer {
    display: none;
}

/* Nueva clase para controlar la altura de los widgets del dashboard */
.dashboard-widget-body {
  max-height: 240px; /* Ajusta este valor si es necesario */
}

/* Estilo para el selector de mes en el footer del KPI */
.small-box-footer .form-control {
    color: #333; /* Texto oscuro para que se pueda leer */
    border-radius: 5px;
    border: none;
    padding: 3px 10px;
    height: auto;
}

/* Estilos para los footers de los widgets del dashboard */
.box .box-footer {
    padding: 8px;
    text-align: center;
    border-radius: 0 0 3px 3px;
}

.box .box-footer a {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    opacity: 0.9;
    transition: opacity 0.2s ease-in-out;
}

.box .box-footer a:hover {
    color: #ffffff;
    opacity: 1;
}

/* ========================================================== */
/* ESTILOS VISUALES UNIFICADOS PARA PÁGINAS CON TARJETAS      */
/* ========================================================== */

:root {
  --page-background-image: url('/images/bgbio.jpg');
  --card-bg-color: #1e88e5;
  --card-text-color: #ffffff;
  --card-subtext-color: #bbdefb;
  --card-border-radius: 8px;
  --card-font-size-title: 14px;
}

/* ==========================================================
   1) Scope: páginas que usan fondo + tarjetas
   ========================================================== */
body:is(
  .page-students,
  .page-renewal,
  .page-staff,
  .page-contact,
  .page-terms,
  .page-privacy,
  .page-profile,
  .page-announcements,
  .page-groups,
  .page-curriculum,
  .page-monographies,
  .page-uploads,
  .page-team,
  .page-success,
  .page-supervisions
) #body-wrapper.wrapper {
  background: var(--page-background-image) center center / cover no-repeat fixed;
}

/* El content-wrapper y el contenido deben ser transparentes para que se vea el fondo */
body:is(
  .page-students,
  .page-renewal,
  .page-staff,
  .page-contact,
  .page-terms,
  .page-privacy,
  .page-profile,
  .page-announcements,
  .page-groups,
  .page-curriculum,
  .page-monographies,
  .page-uploads,
  .page-team,
  .page-success,
  .page-supervisions
) .content-wrapper {
  background: transparent !important;
}

body:is(
  .page-students,
  .page-renewal,
  .page-staff,
  .page-contact,
  .page-terms,
  .page-privacy,
  .page-profile,
  .page-announcements,
  .page-groups,
  .page-curriculum,
  .page-monographies,
  .page-uploads,
  .page-team,
  .page-success,
  .page-supervisions
) .content {
  background-color: transparent !important;
}

/* ==========================================================
   2) Tarjetas (solo dentro de esas páginas)
   ========================================================== */

/* Caja base sin fondo ni borde */
body:is(
  .page-students,
  .page-staff,
  .page-team,
  .page-groups,
  .page-announcements,
  .page-monographies,
  .page-curriculum,
  .page-uploads,
  .page-profile,
  .page-success,
  .page-renewal,
  .page-supervisions
) .box.box-default {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Card */
body:is(
  .page-students,
  .page-staff,
  .page-team,
  .page-groups,
  .page-announcements,
  .page-monographies,
  .page-curriculum,
  .page-uploads,
  .page-profile,
  .page-success,
  .page-renewal,
  .page-supervisions
) .fx-card-item {
  padding: 15px 10px 10px;
  background-color: var(--card-bg-color);
  border-radius: var(--card-border-radius);
  display: flex;
  flex-direction: column;
}

/* Contenedor del texto de la tarjeta */
body:is(
  .page-students,
  .page-staff,
  .page-team
) .fx-card-content {
  height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Nombre (h3) dentro del contenedor */
body:is(
  .page-students,
  .page-staff,
  .page-team
) .fx-card-content h3.box-title {
  min-height: auto;
  display: block;
  margin: 0;

  color: var(--card-text-color);
  font-size: var(--card-font-size-title);
  line-height: 1.3;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Rol en Staff (reemplaza tu &.page-staff ...) */
body.page-staff .fx-card-content small {
  color: var(--card-subtext-color);
  text-align: center;
  display: block;
  line-height: 1;
}

/* ==========================================================
   3) Inputs / buscadores (scoped)
   ========================================================== */
body:is(.page-students, .page-staff) .box-body .searchStudent,
body:is(.page-students, .page-staff) .box-body .searchStaff {
  width: auto;
  min-width: 250px;
}

body:is(.page-students, .page-staff) .input-group-addon {
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
}

/* ==========================================================
   4) Footer (solo en estas páginas)
   ========================================================== */
body:is(
  .page-students,
  .page-renewal,
  .page-staff,
  .page-contact,
  .page-terms,
  .page-privacy,
  .page-profile,
  .page-announcements,
  .page-groups,
  .page-curriculum,
  .page-monographies,
  .page-uploads,
  .page-team,
  .page-success
) .main-footer {
  border-top: none !important;
}

/* ==========================================================
   5) Responsive: barra de búsqueda
   ========================================================== */
@media (max-width: 768px) {
  body:is(.page-students, .page-staff) .box-body {
    flex-direction: column;
    align-items: stretch;
  }

  body:is(.page-students, .page-staff) .box-body .btn,
  body:is(.page-students, .page-staff) .box-body .searchStudent,
  body:is(.page-students, .page-staff) .box-body .searchStaff {
    width: 100%;
    margin-bottom: 15px;
  }

    /* En móviles, el fixed puede dar artefactos */
  body:is(
    .page-students,
    .page-renewal,
    .page-staff,
    .page-profile,
    .page-announcements,
    .page-groups,
    .page-curriculum,
    .page-monographies,
    .page-uploads,
    .page-team,
    .page-success
  ) #body-wrapper.wrapper{
    background-attachment: scroll;
  }

}

/*
=====================================================
== MODIFICACIÓN KPI - Esquinas Redondeadas (Sencillo)
=====================================================
*/

/* 1. Redondeamos todas las esquinas del contenedor principal */
.page-home .small-box {
    border-radius: 3px;
    border: 1px solid #ffffff;
}

/* 2. Nos aseguramos que el footer también tenga las esquinas inferiores redondeadas */
.page-home .small-box > .small-box-footer {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

/*
=====================================================
== MODIFICACIÓN KPI - Colores Translúcidos (40% opacidad)
=====================================================
*/
.page-home .small-box.bg-red {
    background-color: rgba(221, 75, 57, 0.7) !important;
}
.page-home .small-box.bg-blue {
    background-color: rgba(0, 115, 183, 0.7) !important;
}
.page-home .small-box.bg-green {
    background-color: rgba(0, 166, 90, 0.7) !important;
}
.page-home .small-box.bg-purple {
    background-color: rgba(96, 92, 168, 0.7) !important;
}
.page-home .small-box.bg-orange,
.page-home .small-box.bg-yellow {
    background-color: rgba(243, 156, 18, 0.7) !important;
}
.page-home .small-box.bg-gray {
    background-color: rgba(210, 214, 222, 0.7) !important;
}

/*
=====================================================
== MODIFICACIÓN WIDGET-LISTA - Estilo Translúcido
=====================================================
*/

/* 1. Contenedor principal: Borde blanco, esquinas y fondo transparente */
.page-home .box {
    border-radius: 3px;
    border: 2px solid #ffffff;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. Cabecera: Fondo blanco translúcido y esquinas superiores */
.page-home .box .box-header {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-top-left-radius: 3px; /* Redondeo */
    border-top-right-radius: 3px; /* Redondeo */
    border-bottom: none; /* Quitamos la línea separadora */
}

/* 3. Dropdown en cabecera: Un poco más opaco para legibilidad */
.page-home .box .box-header .form-control {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 4. Cuerpo: Fondo blanco translúcido */
.page-home .box .box-body {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* 5. Items de la lista: Fondo transparente para ver a través del 'body' */
.page-home .box .box-body .list-group-item {
    background-color: transparent;
    /* Línea separadora sutil y translúcida */
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* 6. Pie de página: Esquinas inferiores y color translúcido */
.page-home .box .box-footer {
    border-bottom-left-radius: 3px; /* Redondeo */
    border-bottom-right-radius: 3px; /* Redondeo */
}

.page-home .box .box-footer.bg-red {
    background-color: rgba(221, 75, 57, 0.7) !important;
}
.page-home .box .box-footer.bg-blue {
    background-color: rgba(0, 115, 183, 0.7) !important;
}
.page-home .box .box-footer.bg-green {
    background-color: rgba(0, 166, 90, 0.7) !important;
}
.page-home .box .box-footer.bg-purple {
    background-color: rgba(96, 92, 168, 0.7) !important;
}
.page-home .box .box-footer.bg-orange,
.page-home .box .box-footer.bg-yellow {
    background-color: rgba(243, 156, 18, 0.7) !important;
}
.page-home .small-box.bg-aqua {
    background-color: rgba(0, 192, 239, 0.7) !important;
}

/*
=====================================================
== FOOTER - Sincronizar color con el Header
=====================================================
*/

/* Aplicamos el color de fondo, ancho completo (no fijo) */
.main-footer {
    background-color: #1e88e5;
    color: #ffffff;
    border-top: none;
    margin-left: 0 !important; /* Asegura el ancho completo */
    position: relative; /* Para que acepte el z-index */
    z-index: 999;       /* Lo eleva por encima del sidebar */
}

/* Enlaces blancos y sin opacidad (no translúcidos) */
.main-footer .nav-link {
    color: #ffffff;
}

.main-footer .nav-link:hover {
    color: #ffffff;
}

/* ========================================================== */
/* CORRECCIONES DE ALINEACIÓN PÁGINA DE PERFIL (profile.php)  */
/* ========================================================== */

/* * 1. Arregla la botonera superior (Cambiar Imagen, Cambiar Contraseña)
 * Le indicamos al contenedor de los botones que alinee todo a la izquierda
 * (en lugar de 'space-between').
 */
.page-profile .content > .row.mt-5 .box-body {
  justify-content: flex-start;
}

/* * 2. Arregla la tarjeta de perfil (la caja gris)
 * Devolvemos esta caja a 'display: block' (en lugar de 'flex') 
 * para que las clases de Bootstrap 'text-center' y 'mx-auto' 
 * (que ya están en el PHP) puedan centrar la imagen y el texto.
 */

.page-profile .box-profile {
  display: block;
}

/* ========================================================== */
/* TEXTO EN NEGRO PARA terms.php                              */
/* ========================================================== */
body.page-terms .content-header h1,
body.page-terms .content,
body.page-terms .content h3,
body.page-terms .content p,
body.page-terms .content li,
body.page-terms .content strong {
  color: #333333 !important;
}

/* ========================================================== */
/* TEXTO EN NEGRO PARA contact.php                            */
/* ========================================================== */
body.page-contact .content-header h1,
body.page-contact .content,
body.page-contact .content h3,
body.page-contact .content p,
body.page-contact .content li,
body.page-contact .content strong {
  color: #333333 !important;
}

/* ========================================================== */
/* TEXTO EN NEGRO PARA privacy.php                            */
/* ========================================================== */
body.page-privacy .content-header h1,
body.page-privacy .content,
body.page-privacy .content h3,
body.page-privacy .content p,
body.page-privacy .content li,
body.page-privacy .content strong {
  color: #333333 !important;
}

/* ========================================================== */
/* LÍNEAS INTERNAS MÁS GRUESAS EN TABLA DE MONOGRAFÍAS (v2)   */
/* ========================================================== */

/*
 * Apuntamos a la tabla por su ID (#communityMonographyTable).
 * Seleccionamos todas las celdas (th y td) EXCEPTO la primera Y la última.
 * Luego, aumentamos el grosor de su borde IZQUIERDO.
 */
#communityMonographyTable th:not(:first-child):not(:last-child),
#communityMonographyTable td:not(:first-child):not(:last-child) {
  
  /* Engrosa solo las líneas verticales internas */
  border-left-width: 3px;

  /* Esto asegura que no afecte a las líneas horizontales */
  border-top-width: 2px;
  border-bottom-width: 2px;
}

/* ============================================= */
/* CSS PARA ALINEACIÓN EN ANNOUNCEMENTS.PHP (v2) */
/* ============================================= */

/*
 * 1. Anulamos el estilo flex del .box-body en las TARJETAS DE ANUNCIOS.
 * Esto evita que la tarjeta (el padre) empuje el pie de página
 * hacia la derecha en mensajes cortos.
 */
.dataContainer .box .box-body {
  display: block; /* Lo devolvemos a su estado normal */
}

/* * 2. Ahora aplicamos el estilo correcto al pie de página.
 * Hacemos que sea un contenedor flex 'horizontal' (row)
 * que puede 'saltar de línea' (wrap) si no cabe.
 */
.announcement-footer {
  display: flex;
  align-items: flex-end;  /* Alinea verticalmente los botones y la fecha */
  margin-top: 15px;
  flex-wrap: wrap;        /* PERMITE QUE SALTE DE LÍNEA */
}

/* 3. Bloque izquierdo (botones y adjuntos) */
.announcement-footer-left {
  flex-shrink: 0;     /* No se encoge */
  margin-right: 15px; /* Espacio a la derecha */
}

/* 4. Bloque derecho (metadata) */
.announcement-footer-right {
  flex-grow: 0;       /* <<< IMPORTANTE: Ya no crece */
  text-align: left;   /* <<< IMPORTANTE: Se alinea a la izquierda */
  white-space: nowrap; 
}

/* --- Ajustes (se mantienen igual) --- */
.announcement-footer ul.list-inline {
  margin-bottom: 0;
}
.announcement-footer .attachment {
   overflow-wrap: break-word;
}
.announcement-footer .attachment + .list-inline {
    margin-top: 5px;
}

/* ========================================================== */
/* CORRECCIÓN: AGRUPAR BOTONES EN studentdetails.php          */
/* ========================================================== */

/* * 1. Apuntamos al contenedor de botones en studentdetails.php.
 * La clase .page-students identifica la página.
 * .content > .row.mt-5 > .box > .box-body es el selector específico de la botonera.
 */
.page-students .content > .row.mt-5 .box-body {
  /* Deshabilitamos la distribución que causaba que se separaran */
  justify-content: flex-start; /* Agrupa los elementos al inicio */
  
  /* Aseguramos que se mantengan en una fila (horizontal) */
  flex-direction: row; 
  
  /* Esto asegura que las reglas de 'margin' del PHP (mx-1) funcionen */
  align-items: center; 
}

/* ========================================================== */
/* CORRECCIÓN: HACER EL FONDO BLANCO EN studentdetails.php    */
/* ========================================================== */

:is(.page-students, .page-profile) {
  
  /* 1. Hace que los contenedores principales (Información Personal, Notas, Detalles del Estudiante) sean BLANCOS */
  /* Los elementos .box y .box-default se usan para las tarjetas grandes en studentdetails.php */
  .box, .box-default {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    border: 1px solid #dee2e6;          /* Borde ligero para definición (opcional) */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra suave para que resalte (opcional) */
  }

  /* 2. Asegura que el contenido de las pestañas (Programa, Supervisiones, Monografía) también sea blanco */
  .tabcontent-border .tab-pane {
    background-color: #ffffff; /* Fondo de las pestañas blanco */
    padding: 15px;             /* Asegura espaciado interno */
    border: 1px solid #dee2e6; /* Borde para el contenedor de pestañas */
    border-top: none;          /* Elimina el borde superior duplicado */
  }
}

/* === Ajustes exclusivos para studentdetails.php === */
#studentDetailsPage .tab-content,
#studentDetailsPage .tab-pane,
#studentDetailsPage .tab-pane > .p-0,
#studentDetailsPage .tab-pane > .p-0 > .dataContainer,
#studentDetailsPage .tab-pane > .p-0 > .dataContainer table {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Sin bordes/márgenes internos */
#studentDetailsPage .tabcontent-border {
  border: none;
  padding: 0;
  margin: 0;
}

/* Tabla interna: ocupa todo el ancho disponible del box */
#studentDetailsPage .dataContainer table,
#studentDetailsPage table.table {
  width: 100%;
  table-layout: auto;
  border-left: none;
  border-right: none;
}

/* Borde superior para unir con el box padre */
#studentDetailsPage .box .tab-content {
  border-top: 1px solid #ddd;
}

/* ====== COMPORTAMIENTO ADAPTATIVO ====== */

/* 📱 Hasta 1599px: ancho completo (sin márgenes) */
@media (max-width: 1599px) {
  #studentDetailsPage .tab-pane,
  #studentDetailsPage .tab-pane > .p-0,
  #studentDetailsPage .tab-pane > .p-0 > .dataContainer {
    width: 100%;
    margin: 0 auto;
  }
}

/* 🖥️ Desde 1600px en adelante: centrado suave con margen simétrico */
@media (min-width: 1600px) {
  #studentDetailsPage .tab-pane,
  #studentDetailsPage .tab-pane > .p-0,
  #studentDetailsPage .tab-pane > .p-0 > .dataContainer {
    width: 96%;         /* deja aire proporcional a ambos lados */
    max-width: 1800px;  /* tope visual opcional */
    margin: 0 auto;     /* centra horizontalmente */
  }
}

/* === BOX DE PESTAÑAS SUPERIOR === */
#studentDetailsPage #tabsBox {
  margin-bottom: 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* === Pestañas modernas === */
#studentDetailsPage .modern-tabs {
  border-bottom: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#studentDetailsPage .modern-tabs .nav-link {
  background-color: #f5f7fa;
  border: 1px solid #d0d7de;
  color: #495057;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 22px;
  transition: all 0.2s ease-in-out;
}

#studentDetailsPage .modern-tabs .nav-link:hover {
  background-color: #e9f3ff;
  color: #0b5ed7;
  border-color: #0b5ed7;
}

#studentDetailsPage .modern-tabs .nav-link.active {
  background-color: #0b5ed7;
  color: #fff;
  border-color: #0b5ed7;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* === Box del contenido === */
#studentDetailsPage .box .tab-content {
  border-top: none;
  padding-top: 0;
}

/* Restaurar color original de Bootstrap para btn-success */
.btn-success {
  background-color: #198754 !important;  /* verde original Bootstrap 5 */
  border-color: #198754 !important;
  color: #fff !important;
}

.btn-success:hover {
  background-color: #157347 !important;
  border-color: #146c43 !important;
}

/* ========================================================== */
/* MEJORA DE LEGIBILIDAD EN MONOGRAPHIES.PHP (v4)             */
/* ========================================================== */
.page-monographies .content {
  /* 1. Translúcido a 85% */
  background-color: rgba(255, 255, 255, 0.85) !important; 
  
  /* 2. Padding interno */
  padding: 20px;

  /* 3. Bordes redondeados y sombra */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  
  /* 4. CORRECCIÓN: Márgenes en los lados/superior, PERO 0 abajo */
  margin: 20px 20px 0 20px; 
}

/* ========================================= */
/* ESTILOS PARA EL ACORDEÓN DE ANUNCIOS v2   */
/* ========================================= */

/* Fila base del anuncio */
.announcement-row {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0; /* Bordes rectos para parecer lista */
    margin-bottom: 0; /* Pegados unos a otros */
    transition: background-color 0.2s ease;
}

/* Efecto hover suave */
.announcement-row:hover {
    background-color: #fcfcfc;
}

/* Contenedor flexible de la cabecera: Separa el "Toggle" de los "Botones" */
.announcement-header-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent; /* Preparado para cuando se despliegue */
}

/* Área CLICABLE (Título, Fecha, Icono) */
.announcement-toggle-area {
    flex-grow: 1; /* Ocupa todo el espacio sobrante */
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Título a la izq, Fecha a la derecha */
}

/* Área de BOTONES (NO despliega el acordeón) */
.announcement-actions-area {
    flex-shrink: 0;
    padding: 0 15px 0 5px; /* Espacio para los botones */
    display: flex;
    align-items: center;
    gap: 5px;
    border-left: 1px solid #f0f0f0; /* Separador sutil de los botones */
}

/* Título y remitente */
.announcement-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 12px;
}

.announcement-title i {
    color: #3c8dbc;
}

/* Metadatos (Fecha y flechita) */
.announcement-meta-info {
    font-size: 13px;
    color: #888;
    margin-right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cuerpo del mensaje */
.announcement-body {
    background-color: #ffffff;
    color: #555;
    padding: 0; /* El padding lo damos dentro */
}
.announcement-body-content {
    padding: 20px 25px;
    border-top: 1px solid #f0f0f0;
}

/* --- LÓGICA DE RESPUESTAS (ANCHO COMPLETO) --- */
.is-reply {
    background-color: #f9f9f9; 
}

/* Indentación visual interna para el título de las respuestas (AZUL) */
.is-reply .announcement-title {
    padding-left: 30px; 
    border-left: 3px solid #3c8dbc; 
}

/* --- SEPARADOR DE HILOS --- */
.thread-separator {
    border-top: 2px solid #d2d6de; 
    margin-top: 20px;
    margin-bottom: 0px;
    display: block;
}

.thread-separator:first-child {
    margin-top: 0;
    border-top: none;
}

/* Icono de flecha que gira */
.toggle-icon {
    transition: transform 0.3s ease;
    font-size: 10px;
}
.announcement-header-container[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* ======================================================= */
/* ESTILOS PARA RESPUESTAS ANIDADAS (Re: Re: ...) -> ROSA  */
/* ======================================================= */

.is-nested-reply {
    background-color: #f9f9f9; /* Fondo rosado pálido */
}

.is-nested-reply .announcement-title {
    padding-left: 30px; 
    /* AQUÍ ESTÁ LA CORRECCIÓN: Definimos la línea completa (Grosor, Estilo y Color) */
    border-left: 3px solid #e83e8c !important; 
}

/* Cambiar color del icono (flecha) a ROSA */
.is-nested-reply .announcement-title i {
    color: #e83e8c !important; /* Flecha ROSA */
}