/* ==========================================================================
   Variables y Configuración Global
   ========================================================================== */

/* Colores del sistema: usar en cualquier módulo (calendario, incidencias, tutorías, etc.)
   Objetivo: no repetir colores en cada módulo; cambiar aquí y se actualiza en toda la app. */
:root {
  /* Primario / marca */
  --casvi-primary: #00547C;
  --casvi-primary-claro: #009FE2;
  /* Incidencias: estado */
  --casvi-incidencia-aceptada: #28a745;
  --casvi-incidencia-pendiente: #fd7e14;
  /* Estados genéricos (éxito, aviso, error, info) */
  --casvi-success: #28a745;
  --casvi-warning: #ffc107;
  --casvi-danger: #dc3545;
  --casvi-info: #17a2b8;
  --casvi-info-hover: #138496;
  /* Panel / fondos neutros (evitar repetir #F8F9FA, #e9ecef en cada módulo) */
  --casvi-bg-panel: #F8F9FA;
  --casvi-border-panel: #e9ecef;
  --casvi-texto: #212529;
  /* Shell unificado sidebar + contenido */
  --casvi-shell-bg: #ffffff;
  --casvi-content-bg: #E7F5FF;
  --casvi-shell-radius: 0.75rem;
  --casvi-shell-margin: 0.75rem;
  --casvi-shell-shadow: 0 4px 24px rgba(0, 84, 124, 0.08);
}

/* FullCalendar compartido agenda + escritorio: clase .fc-agenda-app en #calendar_alumno y en #calendar del escritorio.
   Otros #calendar (tutorías, visitas…) no llevan la clase; así no forzamos texto blanco donde no toque. */
.fc-agenda-app .fc-event,
.fc-agenda-app .fc-event .fc-event-main,
.fc-agenda-app .fc-event .fc-event-title {
  color: #fff !important;
}

* {
  font-family: "Open sans", serif;
  font-weight: 400;
  font-style: normal;
}
/*::-webkit-scrollbar {
  display: none;
}*/

body {
  scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#modalAgregarTutoria,
#modalInformeTutorias,
#modalModificarTutoria {
  z-index: 1055;
}



/* ==========================================================================
   Tipografía
   ========================================================================== */
h1 {
  font-size: 28px !important;
  font-family: Open sans !important;
  font-weight: 700 !important;
}

h2 {
  font-size: 28px !important;
  font-family: Open sans !important;
  font-weight: 400 !important;
  color: #00547C !important;
}

h3 {
  font-size: 14px !important;
  font-family: Open sans !important;
  text-decoration: underline !important;
}

h4 {
  font-size: 14px !important;
  font-family: Open sans !important;
}

h5 {
  font-size: 10px !important;
  font-family: Open sans !important;
}

.texto {
  font-family: "Open sans", serif;
}

/* ==========================================================================
   Colores y Clases de Utilidad
   ========================================================================== */
/* Panel genérico (escritorio, pendientes, tutorías, etc.): no repetir estilos inline en cada módulo */
.casvi-panel {
  background-color: var(--casvi-bg-panel) !important;
  border-color: var(--casvi-border-panel) !important;
  color: var(--casvi-texto) !important;
}
.casvi-border-primary { border-color: var(--casvi-primary) !important; }

.text-strong-primary {
  color: #00547C !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Utilidades (compatibilidad Bootstrap)
   ========================================================================== */
/* En Material Dashboard no vienen todas las clases .opacity-*.
   Añadimos utilidades estándar para poder usarlas en cualquier vista. */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

.fondo {
  background: #00547C !important;
}

.bg-degradado {
  background: linear-gradient(rgba(0, 84, 124, 1), rgba(0, 159, 226, 1)) !important;
}

.bg-fondo {
  background: #E7F5FF !important;
}

.bg-tarjetas {
  background: #CCECF9 !important;
}

.bg-placeholder {
  background: #74A5BD !important;
}

.btn-close-orientacion {
  color: #00547C !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: -0.5rem 0.5rem -0.5rem auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.btn-close-orientacion:focus,
.btn-close-orientacion:hover {
  color: #003d5c !important;
  text-decoration: none !important;
}

.btn-close-orientacion i {
  font-size: 1.35rem;
  line-height: 1;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

/* ==========================================================================
   Páginas Específicas
   ========================================================================== */
.fondo-index {
  background-image: url(../img/Fondo\ Intranet.png);
  background-size: contain;
  background-position: center center;
}

.caja-index {
  background: linear-gradient(108.49deg, #00547C 0%, #00A8E2 99.63%);
  border-radius: 15px;
}

.ficha-alumno-resumen {
  row-gap: 1.5rem;
}

.ficha-alumno-foto {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.fondo-register {
  background-image: url(../img/Fondo\ Intranet.png);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}

.ojo_ocultar {
  background-image: url(../img/invisible-1.png);
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 1rem 1rem;
}

#usuario-error {
  color: #FFF !important;
}

.controlpresencia {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 18px;
  font-family: Open sans;
  font-weight: 700;
  background-color: #ffffff;
  border-radius: 14px;
  color: #00547C;
  padding: 0 0.50rem;
  min-height: 2.25rem;
}

.topbar-right-cluster {
  gap: 1.25rem;
}

.controlpresencia-icon {
  flex: 0 0 auto;
  color: #015bbd;
  font-size: 1.65rem;
  line-height: 1;
  font-variation-settings: 'wght' 400;
}

.controlpresencia-texto {
  flex: 0 1 auto;
  color: #00547C;
  white-space: nowrap;
}

.btn-fichaje-presencia {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0.35rem 0.85rem;
  color: #015bbd !important;
  background-color: #ffffff !important;
  border: 1px solid #015bbd !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: Open sans, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.btn-fichaje-presencia:hover:not(:disabled),
.btn-fichaje-presencia:focus:not(:disabled) {
  color: #015bbd !important;
  background-color: #f0f6ff !important;
  border-color: #015bbd !important;
  box-shadow: none !important;
}

.btn-fichaje-presencia:disabled {
  opacity: 0.65;
}

.btn-fichaje-presencia .btn-fichaje-presencia-icon {
  color: #015bbd !important;
  font-size: 1.15rem;
  line-height: 1;
}

.btn-fichaje-presencia .btn-fichaje-presencia-label {
  color: #015bbd !important;
}

.topbar-logo {
  margin-left: 3rem;
}

#topbar-notificaciones {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

#topbar-notificaciones .notification-item {
  position: relative;
}

#topbar-notificaciones .badge-notif {
  position: absolute;
  top: -2px;
  right: -4px;
  font-size: 0.65rem;
  min-width: 1rem;
  text-align: center;
}

.topbar-logout-sep {
  border-left: 1px solid rgba(255,255,255,0.4);
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  align-self: center;
}

.topbar-logout-sep .btn {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

.topbar-logout-sep .material-symbols-rounded {
  line-height: 1;
  vertical-align: middle;
}

@media (max-width: 920px) {
  .controlpresencia-texto {
    display: none;
  }

  .controlpresencia-icon {
    margin-right: 0.15rem;
  }

  .controlpresencia .btn-fichaje-presencia {
    margin-left: 0 !important;
  }
}

@media (max-width: 576px) {
  .topbar-user-actions {
    flex-wrap: nowrap;
    align-items: center;
  }

  #topbar-notificaciones {
    gap: 0.35rem !important;
  }

  #topbar-notificaciones .notification-item {
    flex-shrink: 0;
  }

  .topbar-logout-sep {
    margin-left: 0.35rem;
    padding-left: 0.5rem;
  }
}

@media (max-width: 468px) {
  .topbar-logo {
    margin-left: 1.5rem !important;
  }
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn-fondo {
  color: #fff !important;
  background-color: #00547C !important;
  border-color: #00547C !important;
  box-shadow: 0 2px 2px 0 rgba(30, 99, 233, 0.1), 0 3px 1px -2px rgba(30, 99, 233, 0.18), 0 1px 5px 0 rgba(30, 99, 233, 0.15);
}

.btn-fondo-outline {
  color: #00547C !important;
  background-color: #ffffff !important;
  border: 2px #00547C !important;
  box-shadow: 0 0 0 1px #075980,0 4px 8px 0 rgba(30, 99, 233, 0.1), 0 3px 4px -2px rgba(30, 99, 233, 0.18), 0 1px 5px 0 rgba(30, 99, 233, 0.15);
}

.btn-fondo:hover {
  box-shadow: 0 5px 0 rgba(30, 99, 233, 0.1), 0 3px 18px 0 rgba(30, 99, 233, 0.18), 0 7px 8px -4px rgba(30, 99, 233, 0.15);
}

.btn-fondo-outline:hover {
  box-shadow:  0 0 0 1px #075980,0 5px 0 rgba(30, 99, 233, 0.1), 0 5px 18px 0 rgba(30, 99, 233, 0.18), 0 7px 8px -4px rgba(30, 99, 233, 0.15);
}

.sidebar-centros {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-villaviciosa-logo, .sidebar-boadilla-logo, .sidebar-trescantos-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
  border: 2px solid transparent;
  cursor: pointer;
}

.sidebar-villaviciosa-logo {
  border-color: #00A8E2;
}

.sidebar-boadilla-logo {
  border-color: #E6007E;
}

.sidebar-trescantos-logo {
  border-color: #D62828;
}

/* Separar tablas del borde izquierdo (sobrescribe DataTables 5) */
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
  padding-left: 0.75rem !important;
}

.fc .fc-button-primary {
  color: #FFFFFF;
  background-color: #00547C !important;
  border-color: #FFFFFF !important;
  border-radius: 50px !important;
}

/* ==========================================================================
   Formularios y Inputs
   ========================================================================== */
input.input {
  border-color: #d2d6da !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 #d2d6da, inset -1px 0 #d2d6da, inset 0 -1px #d2d6da;
}

/* Informes comedor: igualar altura botones con inputs/selects */
#formCerrarComedorTop .btn,
#formBusquedaComedor .btn {
  height: 40px;
  min-height: 40px;
  margin-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.input:focus {
  border-color: #3788d8 !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 #3788d8, inset -1px 0 #3788d8, inset 0 -1px #3788d8;
}

.input-focused {
  border-color: #3788d8 !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 #3788d8, inset -1px 0 #3788d8, inset 0 -1px #3788d8;
}

/* Clase específica para elementos del formulario con estilo de focus */
.form-focus {
  border-color: #3788d8 !important;
  border-top-color: #3788d8 !important;
  box-shadow: inset 1px 0 #3788d8, inset -1px 0 #3788d8, inset 0 -1px #3788d8;
}

.form-focus ~ .form-label {
  color: #3788d8 !important;
}

/* ==========================================================================
   Checkboxes Personalizados
   ========================================================================== */
.containerCheck {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
}

.containerCheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkMark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 21px;
  width: 21px;
  background-color: #eee;
}

.containerCheck:hover input ~ .checkMark {
  background-color: #ccc;
}

.checkMark:after {
  content: "";
  position: absolute;
  display: none;
}

.containerCheck input:checked ~ .checkMark:after {
  display: block;
}

.containerCheck .checkMark:after {
  left: 8px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#checkCasvi input:checked ~ .checkMark {
  background-color: rgba(0, 84, 124, 1);
}

/* Utilidad reutilizable para centrar checkboxes custom en celdas/headers */
.checkbox-centered-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-centered-wrap .containerCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding-left: 0 !important;
  margin: 0 auto !important;
}

.checkbox-centered-wrap .containerCheck .checkMark {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}

/* Variante para checkboxes de cabecera (TH) */
.containerCheck.checkbox-th-green input:checked ~ .checkMark {
  background-color: #28a745 !important;
}

.containerCheck.checkbox-th-green input:disabled:checked ~ .checkMark {
  background-color: #28a745 !important;
  border-color: #28a745;
}

/* Estado disabled para checkbox custom */
.containerCheck input:disabled ~ .checkMark {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  opacity: 0.9;
  cursor: not-allowed;
}

.containerCheck input:disabled:checked ~ .checkMark {
  background-color: #90a4ae !important;
  border-color: #90a4ae;
}

.containerCheck:hover input:disabled ~ .checkMark {
  background-color: #e9ecef;
}

/* Modal aplicar permisos: layout del selector y filas */
#modalAplicarPermisosUsuarios .selector-todos-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

#modalAplicarPermisosUsuarios .selector-todos-wrap .selector-todos-label {
  margin: 0;
  line-height: 1.25;
}

#modalAplicarPermisosUsuarios #tablaListado tbody td {
  vertical-align: middle !important;
}

/* Pedido libros listado: reduce el padding lateral en la columna Nombre. */
#tablaListado.tabla-pedidos-libros th:nth-child(4),
#tablaListado.tabla-pedidos-libros td:nth-child(4) {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

/* Informe pedidos curso: limita la columna titulo sin partir palabras. */
#tablaListado.tabla-informe-pedidos-curso th:first-child,
#tablaListado.tabla-informe-pedidos-curso td:first-child {
  max-width: 270px;
  min-width: 170px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

/* Libros del curso: limita titulo y observaciones. */
#tablaListado.tabla-libros-del-curso th:first-child,
#tablaListado.tabla-libros-del-curso td:first-child,
#tablaListado.tabla-libros-del-curso th:last-child,
#tablaListado.tabla-libros-del-curso td:last-child {
  max-width: 270px;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* Libros que faltan: limita columnas con texto largo en detalle y resumen. */
#tablaListado.tabla-libros-faltan-resumen th:first-child,
#tablaListado.tabla-libros-faltan-resumen td:first-child,
#tablaListado.tabla-libros-faltan-resumen th:nth-child(2),
#tablaListado.tabla-libros-faltan-resumen td:nth-child(2),
#tablaListado.tabla-libros-faltan-resumen th:last-child,
#tablaListado.tabla-libros-faltan-resumen td:last-child,
#tablaListado.tabla-libros-faltan-detalle th:first-child,
#tablaListado.tabla-libros-faltan-detalle td:first-child,
#tablaListado.tabla-libros-faltan-detalle th:nth-child(2),
#tablaListado.tabla-libros-faltan-detalle td:nth-child(2),
#tablaListado.tabla-libros-faltan-detalle th:last-child,
#tablaListado.tabla-libros-faltan-detalle td:last-child {
  max-width: 250px;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* Hoja de control: limita titulo y compacta columnas numéricas. */
#tablaListado.tabla-hoja-control th:nth-child(3),
#tablaListado.tabla-hoja-control td:nth-child(3) {
  max-width: 300px;
  word-wrap: normal;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
  hyphens: none;
  line-height: 1.3;
}

#tablaListado.tabla-hoja-control th:nth-child(4),
#tablaListado.tabla-hoja-control td:nth-child(4),
#tablaListado.tabla-hoja-control th:nth-child(5),
#tablaListado.tabla-hoja-control td:nth-child(5),
#tablaListado.tabla-hoja-control th:nth-child(6),
#tablaListado.tabla-hoja-control td:nth-child(6),
#tablaListado.tabla-hoja-control th:nth-child(7),
#tablaListado.tabla-hoja-control td:nth-child(7),
#tablaListado.tabla-hoja-control th:nth-child(8),
#tablaListado.tabla-hoja-control td:nth-child(8),
#tablaListado.tabla-hoja-control th:nth-child(9),
#tablaListado.tabla-hoja-control td:nth-child(9) {
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

/* Cheques descuento alumnos: compacta el control de importe dentro de la tabla. */
#tablaListado.tabla-alumno-cheque .input-group {
  width: 110px !important;
  margin: 0 auto;
}

#tablaListado.tabla-alumno-cheque .input-group .input-group-text {
  padding: 0.25rem 0.4rem !important;
  border-left: 0 !important;
  background-color: #f8f9fa;
  font-size: 0.875rem;
  line-height: 1.5;
}

#tablaListado.tabla-alumno-cheque .input-group .form-control-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

#tablaListado.tabla-alumno-cheque .input-group .form-control-sm,
#tablaListado.tabla-alumno-cheque .input-group .input-group-text {
  height: 31px;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   Deshabilitar Checkboxes
   ========================================================================== */
   
  .no-click {
    pointer-events: none;
  }

/* ==========================================================================
   Navegación y Sidebar
   ========================================================================== */
.navbar-vertical.navbar-expand-xs {
  position: absolute !important;
}

.menu {
  width: 90% !important; 
  margin-left: 0 !important;
  font-size: 13px !important;
}

/* Nombre largo (sidebar): el tema pone .navbar-vertical .navbar-nav .nav-link { white-space: nowrap } */
#sidenav-main .area-padre-hijo-toggle {
  white-space: normal;
  min-width: 0;
  align-items: center;
  height: auto;
  line-height: 1.35;
}

#sidenav-main .area-padre-hijo-nombre {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: left;
}

#sidenav-main .menu-item-icon {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  margin: 0;
}

#sidenav-main .nav-link.menu.d-flex.align-items-center {
  padding-left: 0.45rem;
  gap: 0.3rem;
}

#sidenav-main .nav-link.menu.d-flex.align-items-center .nav-link-text {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Títulos de sección: banda azul, texto blanco en mayúsculas */
#sidenav-main .navbar-nav > hr.horizontal:not(.sidebar-profile-separator) {
  display: none;
}

#sidenav-main .navbar-nav > hr.sidebar-profile-separator {
  display: block;
  width: 90% !important;
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
  margin-left: 0;
  margin-right: 0.75rem;
  opacity: 1 !important;
  border: 0;
  background-image: linear-gradient(90deg, #0099E2 4.12%, #00547C 101.65%) !important;
}

#sidenav-main .menu-section-item {
  margin: 0.35rem 0 0.1rem;
  width: 100%;
}

#sidenav-main .menu-section-header {
  display: block;
  width: 92%;
  margin: 0;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(90deg, #0099E2 0%, #27c1ee 100%);
  color: #fff !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  border-radius: 0px 5px 5px 0px;
  pointer-events: none;
  cursor: default;
}

/* Collapse padre: negrita al activo/abierto */
#sidenav-main a.nav-link.menu.activo[data-bs-toggle="collapse"] .nav-link-text,
#sidenav-main a.nav-link.menu.activo[data-bs-toggle="collapse"] .texto-activo,
#sidenav-main a.nav-link.menu.area-padre-hijo-toggle.activo .nav-link-text,
#sidenav-main a.nav-link.menu.area-padre-hijo-toggle.activo .texto-activo,
#sidenav-main a.nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .nav-link-text,
#sidenav-main a.nav-link.area-padre-hijo-toggle[aria-expanded="true"] .nav-link-text {
  color: #212529 !important;
  font-weight: 700 !important;
}

#sidenav-main .area-padre-hijo-item .collapse .area-padre-subsection-header,
#sidenav-main .area-padre-hijo-item .collapsing .area-padre-subsection-header {
  display: block;
  font-size: 0.72rem;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #334155 !important;
  background: #e8eef4;
  border-radius: 0.25rem;
  padding: 0.4rem 0.55rem;
  margin: 0.2rem 0.3rem 0.3rem 0.3rem;
  pointer-events: none;
  cursor: default;
  line-height: 1.2;
  transition: none !important;
}

#sidenav-main .area-padre-hijo-item .collapse .area-padre-subsection-header--divider,
#sidenav-main .area-padre-hijo-item .collapsing .area-padre-subsection-header--divider {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid #dbe3ec;
  border-radius: 0 0.25rem 0.25rem 0;
}

/*
 * Menú lateral: contenedor de hijos (ul bajo .collapse).
 */
#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapse .nav,
#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapsing .nav {
  transition: none;
  margin-left: 0.5rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  background-color: transparent;
  border-left: none;
  border-radius: 0;
}
#sidenav-main.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after {
  transition: none;
}

/* Submenús: menos separación, punto indicador, activo en azul */
#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item > a.nav-link.menu-subitem,
#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item > a.nav-link.menu-subitem {
  display: flex;
  align-items: center;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-left: 1rem !important;
  min-height: unset;
  transition: none;
}

#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item > a.nav-link.menu-subitem::before,
#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item > a.nav-link.menu-subitem::before {
  content: '';
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
  margin-right: 0.45rem;
}

#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item > a.nav-link.menu-subitem.activo::before,
#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item > a.nav-link.menu-subitem.activo::before {
  background: #0099E2;
}

/* Submenús de sección (p. ej. Datos académicos del alumno): mismo aspecto que bajo collapse */
#sidenav-main.navbar-vertical .navbar-nav > .nav-item > a.nav-link.menu.menu-subitem {
  display: flex;
  align-items: center;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-left: 1rem !important;
  min-height: unset;
  transition: none;
}

#sidenav-main.navbar-vertical .navbar-nav > .nav-item > a.nav-link.menu.menu-subitem::before {
  content: '';
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
  margin-right: 0.45rem;
}

#sidenav-main.navbar-vertical .navbar-nav > .nav-item > a.nav-link.menu.menu-subitem.activo::before {
  background: #0099E2;
}

/* Ítems bajo cada collapse sin clase menu-subitem (compatibilidad) */
#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item > .nav-link:not(.menu-subitem),
#sidenav-main.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item > .nav-link:not(.menu-subitem) {
  padding-left: 7px;
  transition: none;
}

/* Ítems activos del menú lateral: texto e icono en azul */
#sidenav-main .collapse .nav .nav-item > a.nav-link.menu-subitem.activo .nav-link-text,
#sidenav-main .collapse .nav .nav-item > a.nav-link.menu-subitem.activo .texto-activo,
#sidenav-main .collapsing .nav .nav-item > a.nav-link.menu-subitem.activo .nav-link-text,
#sidenav-main .collapsing .nav .nav-item > a.nav-link.menu-subitem.activo .texto-activo,
#sidenav-main .navbar-nav > .nav-item > a.nav-link.menu.menu-subitem.activo .nav-link-text,
#sidenav-main .navbar-nav > .nav-item > a.nav-link.menu.menu-subitem.activo .texto-activo,
#sidenav-main .navbar-nav > .nav-item > a.nav-link.menu.activo:not([data-bs-toggle="collapse"]) .nav-link-text,
#sidenav-main .navbar-nav > .nav-item > a.nav-link.menu.activo:not([data-bs-toggle="collapse"]) .texto-activo,
#sidenav-main .navbar-nav > .nav-item > a.nav-link.menu.activo:not([data-bs-toggle="collapse"]) .menu-item-icon {
  color: #0099E2 !important;
  font-weight: 700 !important;
}

/* Compatibilidad: hijos de collapse sin menu-subitem */
#sidenav-main .collapse .nav .nav-item > a.nav-link.activo:not([data-bs-toggle="collapse"]):not(.menu-subitem) .nav-link-text,
#sidenav-main .collapse .nav .nav-item > a.nav-link.activo:not([data-bs-toggle="collapse"]):not(.menu-subitem) .texto-activo,
#sidenav-main .collapsing .nav .nav-item > a.nav-link.activo:not([data-bs-toggle="collapse"]):not(.menu-subitem) .nav-link-text,
#sidenav-main .collapsing .nav .nav-item > a.nav-link.activo:not([data-bs-toggle="collapse"]):not(.menu-subitem) .texto-activo,
#sidenav-main .collapse .nav .nav-item > span.nav-link.activo,
#sidenav-main .collapsing .nav .nav-item > span.nav-link.activo {
  color: #0099E2 !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   Sidebar tipos documento
   ========================================================================== */
   
   select.tipos-documento-select {
    background-image: none !important;
  }

/* ==========================================================================
   Topbar y Menú Superior (card + pestañas rectangulares)
   ========================================================================== */
.topbar {
  background: radial-gradient(100% 33113.79% at 0% 50%, #009FE2 0%, #00547C 100%);
}

.topbar-menu-nav {
  background: transparent !important;
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.topbar-menu-nav .topbar-card-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Mismo ancho que tablas/cards dentro de .contenido (container-fluid + padding) */
.main-content > .topbar-menu-nav {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + var(--topbar-content-inset, 1.5rem));
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + var(--topbar-content-inset, 1.5rem));
  box-sizing: border-box;
}

body.layout-unified .main-content > .topbar-menu-nav {
  padding-left: var(--topbar-content-inset, 1.5rem);
  padding-right: var(--topbar-content-inset, 1.5rem);
}

@media (max-width: 575.98px) {
  body.layout-unified .main-content > .topbar-menu-nav {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Topbar incluida dentro de .contenido (p. ej. alumnos.php) */
.contenido .topbar-menu-nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

.contenido .row > .topbar-menu-nav {
  margin-left: 0;
  margin-right: 0;
}

/* Layout vertical: título, topbar y contenido al mismo ancho */
.contenido-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.contenido-ancho-topbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.contenido-ancho-topbar > .card {
  width: 100%;
  max-width: 100%;
}

/* Neutraliza gutters Bootstrap en bloques que deben alinearse con la topbar */
.contenido-ancho-topbar.row,
.contenido .topbar-menu-nav + .row {
  --bs-gutter-x: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.contenido-ancho-topbar > [class*="col"],
.contenido .topbar-menu-nav + .row > [class*="col"] {
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Topbar fuera de .contenido: tablas en .row/.col del contenido principal */
.main-content > .topbar-menu-nav + .container-fluid .contenido > .row > .row {
  --bs-gutter-x: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.main-content > .topbar-menu-nav + .container-fluid .contenido > .row > .row > [class*="col"] {
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

body.layout-unified .navbar-main.topbar-menu-nav {
  background-color: transparent !important;
  box-shadow: none !important;
}

.topbar-card {
  background-color: #fff;
  border: 1px solid var(--casvi-border-panel);
  border-radius: var(--casvi-shell-radius);
  box-shadow: var(--casvi-shell-shadow);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.topbar-card .card-body {
  padding: 0.75rem 1rem;
  min-width: 0;
}

.topbar-card .menu-scroll-container,
.topbar-card .topbar-menu-scroll {
  gap: 0.25rem;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
  min-height: 3rem;
}

.topbar-card .menu-topbar,
.topbar-card .menu-topbar-activo {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  flex: 0 0 auto;
  height: auto;
  min-height: 100%;
}

.menu-topbar,
.menu-topbar-activo {
  background: transparent;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  min-width: 150px;
  text-align: center;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.menu-topbar .nav-link,
.menu-topbar-activo .nav-link {
  border-radius: 0;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
}

.topbar-card .menu-topbar .nav-link,
.topbar-card .menu-topbar-activo .nav-link {
  min-height: 3rem;
}

.topbar-item-icon {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--casvi-texto);
  opacity: 0.75;
}

.menu-topbar-activo .topbar-item-icon,
.topbar-item-icon-activo {
  color: var(--casvi-primary);
  opacity: 1;
}

.menu-topbar:hover,
.menu-topbar:focus-within {
  background: rgba(0, 84, 124, 0.05);
  border-bottom-color: rgba(0, 84, 124, 0.35);
}

.texto-topbar {
  font-size: 13px;
  font-weight: 600;
  color: var(--casvi-texto);
}

.menu-topbar-activo {
  background: transparent;
  border-bottom-color: var(--casvi-primary);
}

.menu-topbar-activo .texto-topbar {
  color: var(--casvi-primary);
}

/*
  Topbar — fila de hijos (clase .topbar-hijos-fila en topbar-renderer-prueba.php)
  Sobrescribe solo este contenedor: el .menu-scroll-container base usa
  nowrap + scroll X; aquí multilínea y wrap, sin truncar nombres largos.
*/
.topbar-hijos-fila {
  white-space: normal;
  flex-wrap: wrap;
  overflow-x: visible;
  -webkit-overflow-scrolling: auto;
  row-gap: 0.25rem;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--casvi-border-panel);
}

.topbar-hijos-fila .menu-topbar,
.topbar-hijos-fila .menu-topbar-activo {
  flex: 1 1 11rem;
  min-width: 0;
  max-width: min(20rem, 100%);
  align-self: flex-start;
  overflow: visible;
}

.topbar-hijos-fila .nav-link {
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  min-height: 2.4rem;
  line-height: 1.3;
  height: auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.topbar-hijos-fila .texto-topbar {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   Contenido Principal
   ========================================================================== */
.contenido {
  background-color: var(--casvi-content-bg);
  border-radius: 0.5rem;
  min-height: 791px;
  height: auto;
}

/* ==========================================================================
   Layout unificado: sidebar + contenido como un solo bloque
   Activar con class layout-unified en <body> (prueba en escritorio.php).
   Para extender al resto de páginas: añadir layout-unified al body y app-shell al #wrapper.
   ========================================================================== */
body.layout-unified.bg-gray-100 {
  background-color: #eef1f4;
}

body.layout-unified #wrapper.app-shell {
  display: flex;
  align-items: stretch;
  position: relative;
  /* margin: 0 var(--casvi-shell-margin) var(--casvi-shell-margin); */
  margin: 0;
  background: var(--casvi-shell-bg);
  /* border-radius: var(--casvi-shell-radius); */
  border-radius: 0;
  box-shadow: var(--casvi-shell-shadow);
  overflow: hidden;
  min-height: calc(100vh - 4.25rem);
}

body.layout-unified .main-content > .container-fluid.my-2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.layout-unified .navbar-main {
  margin-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 1200px) {
  body.layout-unified .g-sidenav-show:not(.rtl) .sidenav {
    transform: none !important;
  }

  body.layout-unified #sidenav-main.sidenav {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 14rem;
    width: 14rem !important;
    max-width: 14rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--casvi-border-panel);
    box-shadow: none !important;
    height: auto !important;
    align-self: stretch;
    overflow-y: auto;
  }

  body.layout-unified #sidenav-main .navbar-collapse {
    height: auto !important;
    max-height: none !important;
  }

  body.layout-unified .sidenav.fixed-start + .main-content {
    margin-left: 0 !important;
  }

  body.layout-unified .main-content {
    flex: 1 1 auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0;
    border-radius: 0 !important;
    background-color: var(--casvi-content-bg);
  }

  body.layout-unified .contenido {
    background-color: transparent;
    border-radius: 0;
    min-height: calc(100vh - 4.25rem - 2rem);
  }

  body.layout-unified .navbar-main {
    background-color: var(--casvi-content-bg);
  }
}

@media (max-width: 1199.98px) {
  body.layout-unified.bg-gray-100 {
    background-color: var(--casvi-content-bg);
  }

  body.layout-unified #wrapper.app-shell {
    display: block;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    min-height: calc(100vh - 4.25rem);
  }

  body.layout-unified .main-content,
  body.layout-unified .main-content.border-radius-lg {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--casvi-content-bg);
    border-radius: 0 !important;
    min-height: calc(100vh - 4.25rem);
  }

  body.layout-unified .main-content > .container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body.layout-unified .contenido {
    background-color: transparent;
    border-radius: 0;
    min-height: calc(100vh - 4.25rem);
    width: 100%;
    margin-left: 0 !important;
  }

  body.layout-unified .navbar-main {
    background-color: var(--casvi-content-bg);
  }

  body.layout-unified #sidenav-main.sidenav {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* ==========================================================================
   Tablas y DataTables
   ========================================================================== */
table.dataTable td {
  font-size: 1em;
  font-weight: 600 !important;
}

#tablaListado th.ic-col-alergias-alumnos,
#tablaListado td.ic-col-alergias-alumnos {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 18rem !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
  line-height: 1.25;
}

#tablaListado th.ic-col-alergias-mesas,
#tablaListado td.ic-col-alergias-mesas {
  min-width: 14rem !important;
  max-width: 28rem !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
  line-height: 1.25;
}

#tablaListado tbody tr.ic-alumno-falta td {
  background-color: #ffcccc !important;
  color: #cc0000 !important;
}

/* Informe Mesas/Alumnos: Comedor, Mesa, Nº sillas, Alumno, Alergias */
#tablaListado tbody tr.ic-alumno-falta td:nth-child(4) {
  font-weight: 700 !important;
}

/* Informe rutas — Control de rutas: día con falta de ruta (marca F) */
#tablaListado tbody td.ir-celda-falta-ruta {
  background-color: #ffcccc !important;
  color: #cc0000 !important;
  font-weight: 700 !important;
}

/* Informe rutas — Control de rutas: falta programada (marca S) */
#tablaListado tbody td.ir-celda-falta-programada-ruta {
  background-color: #fff3cd !important;
  color: #856404 !important;
  font-weight: 700 !important;
}

#tablaListado tbody tr.ic-alumno-cambio td {
  background-color: #d8f3dc !important;
  color: #1e4620 !important;
}

#tablaListado tbody tr.ic-alumno-cambio td:nth-child(4) {
  font-weight: 700 !important;
}

#tablaListado tbody tr.ic-alumno-alergia td {
  background-color: #fff3cd !important;
}

#tablaListado tbody tr.ic-alumno-alergia td:nth-child(4) {
  color: #856404 !important;
}

#tablaListado tbody tr.ic-alumno-alergia td:nth-child(5) {
  color: #7a4b00 !important;
  font-weight: 700 !important;
}

#tablaListado th.col-uat-titulo,
#tablaListado td.uat-col-titulo {
  width: 18rem;
  min-width: 18rem;
  max-width: 18rem;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* ==========================================================================
   Dropzone
   ========================================================================== */
.dz-remove {
  color: #FF666F !important;
  z-index: 999;
  position: absolute;
  display: block;
  top: 0%;
  left: 90%;
  margin-left: 5px;
  margin-top: -15px;
}

.dz-error-mark, .dz-success-mark {
  top: 33% !important;
}

.pointer-trash::before {
  cursor: pointer !important;
}

/* ==========================================================================
   Iconos y Elementos Circulares
   ========================================================================== */
.icon-circle {
  background: #00547C !important;
  color: white;
  border-radius: 50%;
  width: 50px !important;
  height: 50px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px !important;
  flex-shrink: 0;
}

/* ==========================================================================
   Media Queries y Diseño Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .contenido {
    min-height: 600px;
  }
  
  h1 { font-size: 24px !important; }
  h2 { font-size: 24px !important; }
}

@media (max-width: 992px) {
  .navbar-vertical.navbar-expand-xs {
    position: fixed !important;
    z-index: 1030;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  .navbar-vertical.navbar-expand-xs.show {
    transform: translateX(0);
  }
  
  .menu { width: 100% !important; }
  .contenido {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  .topbar { padding: 0.5rem 1rem; }
  .menu-topbar { min-width: 120px; }

  .ficha-alumno-datos {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .contenido { padding: 1rem; }
  .caja-index { padding: 1rem; }
  .fondo-index, .fondo-register { background-size: cover; }
  table.dataTable td { font-size: 0.9em; }
  .btn-fondo {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  /* Varios .btn-fondo en una celda (p. ej. acciones en DataTables): no forzar ancho completo */
  table.dataTable tbody td .btn-fondo {
    width: auto;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0.25rem;
  }
  
  .input-group > .form-control,
  .input-group > .form-select,
  .input-group > .form-floating {
    position: relative;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
  }
  
  .icon-circle {
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
  }
}

@media (max-width: 576px) {
  h1, h2 { font-size: 20px !important; }
  h3, h4 { font-size: 12px !important; }
  .contenido { padding: 0.5rem; }
  .menu-topbar { min-width: 100px; }
  .texto-topbar { font-size: 12px; }
  .containerCheck {
    padding-left: 25px;
  }
  .checkMark {
    height: 18px;
    width: 18px;
  }
  .icon-circle {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
}

/* ==========================================================================
   Utilidades Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .d-none-mobile { display: none !important; }
  .w-100-mobile { width: 100% !important; }
  .text-center-mobile { text-align: left !important; }
  .mt-mobile-2 { margin-top: 0.5rem !important; }
  .mb-mobile-2 { margin-bottom: 0.5rem !important; }
}

/* ==========================================================================
   Mejoras de Tablas Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .dataTables_wrapper {
    overflow-x: auto;
  }
  
  table.dataTable {
    min-width: 650px;
  }
}

/* ==========================================================================
   Mejoras de Formularios Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 1rem;
  }
  
  .input-group {
    flex-direction: column;
  }
  
  .input-group > * {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .input-group > :last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Mejoras de Cards Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
  
  .card-text {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Mejoras de Modales Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  .modal-content {
    padding: 1rem;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 0.5rem 0;
  }
}

input[type="date"] {
  width: 180px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

input[type="date"]:hover {
  border-color: #007bff;
}

input[type="date"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,.5);
  outline: none;
}

input[type="time"] {
  width: 180px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

input[type="time"]:hover {
  border-color: #007bff;
}

input[type="time"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,.5);
  outline: none;
}

input[type="file"].form-control {
  position: relative;
  overflow: hidden;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  background-color: white;
  color: #a0b8c4; /* texto suave */
  font-style: italic;
  cursor: pointer;
}

/* Estilo del botón "Buscar archivos" (parte del control nativo del navegador) */
input[type="file"]::file-selector-button {
  background-color: #00547c;
  color: white;
  border: none;
  padding: 0.3rem 1.2rem;
  margin-left: auto;
  margin-right: 1rem; 
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  font-style: normal;
}

/* Quitar borde azul de foco */
input[type="file"].form-control:focus {
  box-shadow: none;
  border-color: #aaa;
}

.select-presente {
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
  color: #155724 !important;
  text-align: center !important;
  text-align-last: center !important;
}

.select-retraso {
  background-color: #fff3cd !important;
  border-color: #ffeeba !important;
  color: #856404 !important;
  text-align: center !important;
  text-align-last: center !important;
}

.select-pendiente-lista {
  background-color: #b7e8ed8c !important;
  border-color: #f05728 !important;
  color: #ffffff !important;
  text-align: center !important;
  text-align-last: center !important;
}

.select-falta {
  background-color: #f8d7da !important;
  border-color: #f5c6cb !important;
  color: #721c24 !important;
  text-align: center !important;
  text-align-last: center !important;
}

select.asistencia-select option.select-presente {
  background-color: #d4edda;
  color: #155724;
}

select.asistencia-select option.select-retraso {
  background-color: #fff3cd;
  color: #856404;
}

select.asistencia-select option.select-pendiente-lista {
  background-color: #b7e8ed8c;
  color: #ffffff;
}

select.asistencia-select option.select-falta {
  background-color: #f8d7da;
  color: #721c24;
}

/* Estilo para cuando el select está deshabilitado */
select:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
} 

.editor-frame {
  background: #FFFFFF;
  border-radius: 5.6678px;
}

.editor-label {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  line-height: 20px;
  display: flex;
  align-items: center;
  color: rgba(0, 84, 124, 0.5);
}

.toolbar {
  background: #00547C;
  border-radius: 5.6678px 5.6678px 0 0;
  display: flex;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
}

.editor {
  min-height: 150px; 
  background: #ffffff;
  padding: 10px;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  border-bottom-left-radius: 5.6678px;
  border-bottom-right-radius: 5.6678px;
  overflow-y: auto;
}

/* Estilos para el sistema de acordeones de habilidades PEP (necesitan estar dentro de un div.card) */
.card .accordion {
    /* Variables personalizadas para el acordeón */
    --bs-accordion-border-color: #e9ecef !important;          /* Color del borde */
    --bs-accordion-border-width: 1px !important;              /* Ancho del borde */
    --bs-accordion-border-radius: 0.5rem !important;          /* Radio del borde exterior */
    --bs-accordion-inner-border-radius: calc(0.5rem - 1px) !important; /* Radio del borde interior */
    --bs-accordion-btn-padding-x: 1.25rem !important;         /* Padding horizontal del botón */
    --bs-accordion-btn-padding-y: 0.75rem !important;         /* Padding vertical del botón */
    --bs-accordion-btn-color: #344767 !important;             /* Color del texto del botón */
    --bs-accordion-btn-bg: #fff !important;                   /* Color de fondo del botón */
    /* Icono de flecha para el estado colapsado */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23344767'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    --bs-accordion-btn-icon-width: 1.25rem !important;        /* Ancho del icono */
    --bs-accordion-btn-icon-transform: rotate(-180deg) !important; /* Rotación del icono */
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out !important; /* Transición del icono */
    /* Icono de flecha para el estado expandido */
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    --bs-accordion-btn-focus-border-color: #86b7fe !important; /* Color del borde al enfocar */
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; /* Sombra al enfocar */
    --bs-accordion-body-padding-x: 1.25rem !important;        /* Padding horizontal del contenido */
    --bs-accordion-body-padding-y: 1rem !important;           /* Padding vertical del contenido */
    --bs-accordion-active-color: #0c63e4 !important;          /* Color del texto cuando está activo */
    --bs-accordion-active-bg: #e7f1ff !important;             /* Color de fondo cuando está activo */
}

/* Estilos del botón del acordeón */
.card .accordion .accordion-button {
    font-weight: 500 !important;                              /* Peso de la fuente */
    transition: all 0.3s ease !important;                     /* Transición suave para todos los cambios */
}

/* Estilo para el texto dentro del botón (nombre de la habilidad) */
.card .accordion .accordion-button span {
    font-size: 1.2rem !important;                            /* Tamaño de fuente más pequeño para el nombre */
}

/* Estilos cuando el acordeón está expandido */
.card .accordion .accordion-button:not(.collapsed) {
    background-color: var(--bs-accordion-active-bg) !important; /* Color de fondo activo */
    color: var(--bs-accordion-active-color) !important;        /* Color del texto activo */
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color) !important; /* Sombra interior */
}

/* Efecto hover en el botón */
.card .accordion .accordion-button:hover {
    background-color: #f8f9fa !important;                      /* Color de fondo al pasar el mouse */
}

/* Estilos del contenido del acordeón */
.card .accordion .accordion-body {
    background-color: #fff !important;                         /* Fondo blanco */
    padding: 1.25rem !important;                              /* Espaciado interno */
    font-size: 0.9rem !important;                             /* Tamaño de fuente del contenido */
}

/* Estilos para los checkboxes del acordeón */
.card .accordion .form-check {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

.card .accordion .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.25rem;
    margin-left: -1.5rem;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #dee2e6;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.card .accordion .form-check-input:checked {
    background-color: #00547C;
    border-color: #00547C;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.card .accordion .form-check-label {
    color: #344767;
    font-weight: 400;
    font-size: 0.9rem;
    margin-bottom: 0;
    cursor: pointer;
}

/* ==========================================================================
   Estilos para la tabla de notas PEP
   ========================================================================== */

/* Estructura básica de la tabla */
.tabla-notas-pep {
    width: auto;
    min-width: 100%;
}

/* Estilos para el encabezado y cuerpo de la tabla */
.tabla-notas-pep thead {
    border: 2px solid var(--color-oscuro);
}

.tabla-notas-pep tbody {
    border: 2px solid var(--color-oscuro);
}

/* Estilos generales para las celdas de encabezado */
.tabla-notas-pep th {
    border: 2px solid var(--color-oscuro);
}

/* Estilos para las celdas de habilidades secundarias */
.tabla-notas-pep th.habilidad-secundaria {
    background-color: var(--color-primario) !important;
    color: white;
}

/* Estilos para las celdas de habilidades terciarias */
.tabla-notas-pep th.habilidad-terciaria {
    background-color: var(--color-claro) !important;
    color: var(--color-oscuro) !important;
}

/* Estilos para las celdas de asignaturas */
.tabla-notas-pep th.asignatura {
    background-color: white !important;
    color: var(--color-oscuro) !important;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    white-space: nowrap;
    padding: 4px;
    line-height: 1;
    vertical-align: middle;
}

/* Estilos generales para las celdas de datos */
.tabla-notas-pep td {
    padding: 8px;
    line-height: 1;
    vertical-align: middle;
    border-left: 1px solid var(--color-oscuro);
    border-right: 1px solid var(--color-oscuro);
}

/* Estilos para la última columna de cada grupo */
.tabla-notas-pep td.ultima-columna {
    border-right: 3px solid var(--color-oscuro);
}

/* Estilos para los campos de entrada de notas */
.tabla-notas-pep .input-nota {
    width: 60px;
    margin: 0 auto;
}

/* Estilos para filas alternas (efecto zebra) */
.tabla-notas-pep .fila-alumno:nth-child(even) {
    background-color: var(--color-claro);
}

.tabla-notas-pep .fila-alumno:nth-child(odd) {
    background-color: white;
}

/* Estilos para la columna de nombres de alumnos */
.tabla-notas-pep .columna-alumno {
    line-height: 1;
    vertical-align: middle;
}

/* Contenedor con scroll horizontal */
.contenedor-tabla-notas {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

/* Contenedor interno para mantener el ancho mínimo */
.contenedor-tabla-notas > div {
    display: inline-block;
    min-width: 100%;
}

/* Estilos para los botones de habilidades */
.btn-habilidad-primaria {
    margin-right: 5px;
    margin-bottom: 5px;
}

/* ==========================================================================
   Tarjetas de Proyecto Personal
   ========================================================================== */
.card-proyecto {
    height: 200px;
}

.card-proyecto .card-body {
    display: flex;
    flex-direction: column;
}

.card-proyecto .card-title {
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-proyecto .card-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Resaltar color día FullCalendar
   ========================================================================== */
.fc-daygrid-day.fc-day-selected {
  background: #cce5ff !important;
  /* Puedes ajustar el color a tu gusto */
}

.fc-daygrid-day-events .text-primary {
  white-space: pre-line;      /* Respeta saltos de línea */
  word-break: break-word;     /* Rompe palabras largas */
  display: block;
}

/* Fondo gris claro para los días pasados */
.fc-daygrid-day.fc-day-past {
  background-color: #f2f2f2 !important;
  color: #b0b0b0 !important;
  opacity: 0.7;
}

/* ==========================================================================
   Estilos para la muestra del menú para carpetas
   ========================================================================== */

    /* Gestor documental: contenedor de iconos.
       - Si usamos Bootstrap (`.row`), NO forzamos grid.
       - Si no es `.row`, mantenemos el grid legacy (6 columnas). */
    .folders:not(.row) {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }

    .folder, .documentArchivo {
      padding: 15px;
      /* Evitar "saltos" al resaltar con borde: dejamos siempre un borde transparente */
      border: 1px solid transparent;
      box-sizing: border-box;
      border-radius: 6px;
      cursor: pointer;
      position: relative; /* para posicionar el botón ⋮ */
    }

    /* Botón de acciones (⋮) para móviles/tablets (y hover en desktop) */
    .gd-actions-btn {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 3;
      line-height: 1;
      opacity: 0;
      transition: opacity .15s ease-in-out;
    }
    .folder:hover .gd-actions-btn,
    .documentArchivo:hover .gd-actions-btn {
      opacity: 1;
    }
    @media (hover: none) {
      .gd-actions-btn {
        opacity: 1; /* en touch devices siempre visible */
        /* En móviles/tablets lo separamos un poco del borde para que no quede "pegado"
           y sea más fácil de pulsar */
        top: 10px;
        right: 10px;
        padding: 0.35rem 0.45rem !important;
      }
    }

    /* Gestor documental: nombre de carpeta/archivo en los iconos (máx 2 líneas, sin desbordar) */
    .folder p,
    .documentArchivo p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      line-height: 1.15;
      word-break: break-word;
      overflow-wrap: anywhere; /* rompe bien por guiones/underscores */
    }

    /* Fecha bajo el nombre en los tiles del gestor documental */
    .gd-doc-fecha {
      font-size: 0.78rem;
      line-height: 1.1;
      opacity: 0.85;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Resaltado del elemento con click derecho (carpeta/archivo) */
    .gd-context-selected {
      border-color: #93B7C9 !important;
    }
    
    .context-menu {
      position: absolute;
      display: none;
      background: white;
      border-radius: 6px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      z-index: 9999;   /* importante */
    }

    /* .folder {
      padding: 10px;
      background: #eee;
      margin: 5px;
      width: 150px;
      cursor: pointer;
      border-radius: 6px;
    }
    
    .context-menu {
      position: absolute;
      display: none;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      border-radius: 6px;
      z-index: 1000;
    } */
    
    .context-menu .item {
      padding: 10px 15px;
      cursor: pointer;
    }
    
    .context-menu .item:hover {
      background: #f0f0f0;
    }

/* ==========================================================================
   Gestor documental - Buscador global (dropdown resultados)
   ========================================================================== */
.buscador-gd-resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.buscador-gd-resultados .list-group-item {
  border: 1px solid rgba(0, 84, 124, 0.15);
}

.buscador-gd-resultados .list-group-item + .list-group-item {
  border-top: none;
}

/* ==========================================================================
   Estilos para la muestra de menus del comedor
   ========================================================================== */
ul.lista-documentos-comedor {
  width: 40%;
}
ul.lista-documentos-comedor li {
  gap: 10px;
  margin-bottom: 12px; /* Espacio entre documentos */
  border-bottom: 1px solid #f0f0f0; /* Opcional: línea separadora */
  padding-bottom: 6px; /* Opcional: espacio extra bajo cada documento */
}
ul.lista-documentos-comedor li:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

/* ==========================================================================
   Estilos para la muestra de menus del comedor
   ========================================================================== */

.alumno-avatar {
  width: 80px;
  height: 80px;
  background-color: #d9d9d9;
}

.alumno-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.btn-equal {
  min-width: 200px;
  flex: 0 0 auto;
  text-align: center;
}

/* ==========================================================================
   Estilos para eventos del calendario sin título (solo color y hora)
   ========================================================================== */
.fc-event-title {
  display: none !important; /* Ocultar títulos de eventos */
}

.fc-event {
  min-height: 20px !important; /* Altura mínima para mostrar el bloque de color */
  border-radius: 12px !important; /* Bordes más redondeados para el fondo azul */
  cursor: pointer !important; /* Cursor de mano para indicar que es clickeable */
}

.fc-event:hover {
  opacity: 0.8 !important; /* Efecto hover */
  transform: scale(1.02) !important; /* Ligero aumento de tamaño al pasar el mouse */
  transition: all 0.2s ease !important; /* Transición suave */
}

/* Asegurar que los eventos se muestren como bloques de color */
.fc-event-main {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Estilo para eventos sin título en vista de mes */
.fc-daygrid-event {
  min-height: 20px !important;
  border-radius: 12px !important; /* Bordes más redondeados */
}

/* Estilo para eventos sin título en vista de semana */
.fc-timegrid-event {
  min-height: 20px !important;
  border-radius: 12px !important; /* Bordes más redondeados */
}

/* Estilo adicional para eventos de bloque (rectangulares) */
.fc-daygrid-block-event {
  border-radius: 12px !important; /* Bordes más redondeados para eventos de bloque */
}

/* Estilo para eventos verticales */
.fc-v-event {
  border-radius: 12px !important; /* Bordes más redondeados para eventos verticales */
}

/* ==========================================================================
   Estilos para eventos en la card agendaCalendario
   ========================================================================== */
#agendaCalendario .alert {
  border-radius: 15px !important; /* Bordes muy redondeados para los eventos de la agenda */
  border: none !important; /* Quitar borde para que se vea más limpio */
  box-shadow: 0 2px 8px rgba(0, 84, 124, 0.15) !important; /* Sombra sutil */
  transition: all 0.3s ease !important; /* Transición suave */
}

#agendaCalendario .alert:hover {
  transform: translateY(-2px) !important; /* Efecto de elevación al pasar el mouse */
  box-shadow: 0 4px 12px rgba(0, 84, 124, 0.25) !important; /* Sombra más pronunciada en hover */
}

/* Estilo para el botón de detalles en la agenda */
#agendaCalendario .btn {
  border-radius: 8px !important; /* Bordes redondeados para el botón */
  font-weight: 600 !important; /* Texto más grueso */
  transition: all 0.2s ease !important; /* Transición suave */
}

#agendaCalendario .btn:hover {
  transform: scale(1.05) !important; /* Ligero aumento de tamaño en hover */
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3) !important; /* Sombra en hover */
}

/* Eliminar padding-left del checkbox Hijo de Profesor */
#campoHijoProfesor div.form-check {
  padding-left: 0 !important;
}

/* ==========================================================================
   Estilos para select con flecha indicadora
   ========================================================================== */
select.form-control,
select.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23344767'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
}

/* Flecha rotada cuando el select está abierto */
select.form-control.select-open,
select.form-select.select-open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233788d8'%3E%3Cpath d='M7.247 4.86l-4.796 5.481C1.885 10.987 2.345 12 3.204 12h9.592a1 1 0 0 0 .753-1.659L8.753 4.86a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E") !important;
}

/* Transición suave para la rotación visual */
select.form-control,
select.form-select {
  transition: background-image 0.2s ease-in-out !important;
}

@media (min-width: 768px) {
  #calendario_section .col-md-8,
  #calendario_section .col-md-4 {
    float: left;
  }
  #calendario_section .col-md-8 {
    width: 66.666667%;
  }
  #calendario_section .col-md-4 {
    width: 33.333333%;
  }
  #calendario_section::after {
    content: "";
    display: table;
    clear: both;
  }
}

@media (max-width: 767.98px) {
  #calendario_section .col-md-8,
  #calendario_section .col-md-4 {
    float: none;
    width: 100%;
  }
}

/* ===== ESTILOS COMPARTIDOS PARA VISITAS Y TUTORÍAS ===== */

/* Ocultar botones que no queremos mostrar en calendarios */
.fc-today-button {
    display: none !important;
}

.fc-dayGridMonth-button,
.fc-timeGridWeek-button,
.fc-timeGridDay-button {
    display: none !important;
}

/* Estilos para todos los eventos del calendario */
.fc-event {
    font-weight: 600;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Estilos genéricos FullCalendar (disponible/pendiente/aceptada/cancelada): usan variables :root */
.fc-event.disponible {
    background-color: var(--casvi-info) !important;
    border-color: var(--casvi-info) !important;
    color: white !important;
}

.fc-event.pendiente {
    background-color: var(--casvi-warning) !important;
    border-color: var(--casvi-warning) !important;
    color: var(--casvi-texto) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.fc-event.aceptada {
    background-color: var(--casvi-success) !important;
    border-color: var(--casvi-success) !important;
    color: white !important;
}

.fc-event.cancelada {
    background-color: var(--casvi-danger) !important;
    border-color: var(--casvi-danger) !important;
    color: white !important;
}

/* Asegurar que el título sea visible (no forzar color: hereda del evento / FullCalendar) */
.fc-event .fc-event-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

/* Sin color: inherit aquí: en agenda.php FullCalendar aplica texto claro sobre fondo del evento */
.fc-event,
.fc-event:hover,
.fc-event:focus,
.fc-event:visited,
.fc-daygrid-event,
.fc-daygrid-event:hover,
.fc-daygrid-event:focus,
.fc-daygrid-event:visited,
.fc-event .fc-event-main,
.fc-event .fc-event-main-frame,
.fc-event .fc-event-title {
    text-decoration: none !important;
}

.fc-event a,
.fc-event a:hover,
.fc-event a:focus,
.fc-event a:visited,
.fc-daygrid-event a,
.fc-daygrid-event a:hover,
.fc-daygrid-event a:focus,
.fc-daygrid-event a:visited,
.fc-event .fc-event-main a,
.fc-event .fc-event-main-frame a,
.fc-event .fc-event-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.fc-event.disponible:hover {
    background-color: var(--casvi-info-hover) !important;
    border-color: var(--casvi-info-hover) !important;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.fc-event.disponible .fc-event-title {
    font-size: 11px;
    font-weight: 600;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
}

.fc-event.disponible .fc-event-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.fc-event.disponible .fc-event-main-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.fc-event.aceptada,
.fc-event.aceptada .fc-event-main,
.fc-event.aceptada .fc-event-main-frame,
.fc-event.aceptada .fc-event-title {
    color: #ffffff !important;
}

.fc-event.pendiente,
.fc-event.pendiente .fc-event-main,
.fc-event.pendiente .fc-event-main-frame,
.fc-event.pendiente .fc-event-title {
    color: #212529 !important;
}

.fc-event.cancelada,
.fc-event.cancelada .fc-event-main,
.fc-event.cancelada .fc-event-main-frame,
.fc-event.cancelada .fc-event-title,
.fc-event.disponible,
.fc-event.disponible .fc-event-main,
.fc-event.disponible .fc-event-main-frame,
.fc-event.disponible .fc-event-title {
    color: #ffffff !important;
}

/* Estilos para SweetAlert personalizado */
.swal-wide {
    width: 500px !important;
}

.swal-wide .swal2-html-container {
    text-align: left !important;
}

.swal-wide .swal2-html-container p {
    margin-bottom: 10px;
    font-size: 16px;
}

.swal-wide .swal2-html-container strong {
    color: #007bff;
    font-weight: 600;
}

/* Menú de Periodicidad - Animación */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ESTILOS PARA EL CALENDARIO DE RANGO DE FECHAS ===== */

/* Contenedor del calendario de rango */
.calendario-rango {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Estilos para las fechas seleccionadas - Celda completa */
.calendario-rango .fecha-inicio {
    background-color: #007bff !important;
    color: white !important;
    border-radius: 4px !important;
    font-weight: bold !important;
}

.calendario-rango .fecha-fin {
    background-color: #007bff !important;
    color: white !important;
    border-radius: 4px !important;
    font-weight: bold !important;
}

.calendario-rango .fecha-rango {
    background-color: rgba(0, 123, 255, 0.3) !important;
    color: #007bff !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
}

/* Aplicar el fondo a toda la celda del día */
.calendario-rango .fc-day.fecha-inicio {
    background-color: #007bff !important;
    color: white !important;
}

.calendario-rango .fc-day.fecha-inicio .fc-daygrid-day-number {
    color: white !important;
    font-weight: bold !important;
}

.calendario-rango .fc-day.fecha-fin {
    background-color: #007bff !important;
    color: white !important;
}

.calendario-rango .fc-day.fecha-fin .fc-daygrid-day-number {
    color: white !important;
    font-weight: bold !important;
}

.calendario-rango .fc-day.fecha-rango {
    background-color: rgba(0, 123, 255, 0.3) !important;
}

.calendario-rango .fc-day.fecha-rango .fc-daygrid-day-number {
    color: #007bff !important;
    font-weight: 500 !important;
}

/* Hover effect para fechas */
.calendario-rango .fc-day:hover {
    background-color: #f8f9fa !important;
    cursor: pointer;
}

/* Responsive para calendarios */
@media (max-width: 768px) {
    .calendario-rango {
        padding: 10px;
    }
}

/* ===== ESTILOS PARA BUSCADOR DE ALUMNOS ===== */

/* Lista de alumnos filtrada */
#listaAlumnos {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tutorias-lista-alumnos {
    max-height: 200px;
    overflow-y: auto;
    position: relative;
    z-index: 1000;
}

#listaAlumnos .list-group-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#listaAlumnos .list-group-item:hover {
    background-color: #e9ecef;
}

#listaAlumnos .list-group-item:active {
    background-color: #dee2e6;
}

/* Input del buscador con lupa interna */
#buscadorAlumno {
    border: 1px solid #ced4da;
    padding-left: 40px !important;
}

#buscadorAlumno:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Icono de lupa dentro del input */
#iconoLupa {
    font-size: 14px;
    color: #6c757d;
    pointer-events: none;
    transition: color 0.2s ease;
}

.tutorias-icono-lupa {
    left: 12px;
    z-index: 10;
}

#buscadorAlumno:focus + #iconoLupa {
    color: #007bff;
}

/* Alumno seleccionado */
#alumnoSeleccionado .alert {
    padding: 0.75rem 1rem;
}

/* ===== ESTILOS PARA SELECTOR DE FECHAS ===== */
.calendario-rango .fecha-inicio {
    background-color: #007bff !important;
    color: white !important;
    border-radius: 4px;
}

.calendario-rango .fecha-fin {
    background-color: #28a745 !important;
    color: white !important;
    border-radius: 4px;
}

.calendario-rango .fecha-rango {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
}

#alumnoSeleccionado .btn-outline-danger {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* ===== ESTILOS ESPECÍFICOS PARA CALENDARIOS DE VISITAS Y TUTORÍAS ===== */

/* Contenedor FullCalendar: mismos estilos para #calendar (visitas, tutorías, etc.) y #calendar_alumno (agenda) */
#calendar,
#calendar_alumno {
    width: 100%;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    min-height: 400px;
}

#calendar .fc-event,
#calendar_alumno .fc-event {
    margin: 1px 0;
    border-radius: 3px;
}

#calendar .fc-daygrid-event,
#calendar_alumno .fc-daygrid-event {
    margin: 1px 0;
}

#calendar .fc-event,
#calendar .fc-event a,
#calendar .fc-event a:hover,
#calendar .fc-event a:focus,
#calendar .fc-event a:visited,
#calendar .fc-daygrid-event,
#calendar .fc-daygrid-event a,
#calendar .fc-daygrid-event a:hover,
#calendar .fc-daygrid-event a:focus,
#calendar .fc-daygrid-event a:visited,
#calendar .fc-event .fc-event-main,
#calendar .fc-event .fc-event-main-frame,
#calendar .fc-event .fc-event-title {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    #calendar,
    #calendar_alumno {
        padding: 10px;
    }
}

/* Estilo para el selector de usuario */
#selectUsuario {
    border-radius: 6px;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#selectUsuario:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Formulario de añadir horas */
#formAnadirHoras {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

/* Tutorías gestión: layout responsive calendario + panel añadir horas */
.tutorias-gestion-grid {
    row-gap: 1rem;
}

.tutorias-panel-col {
    margin-top: 1rem;
}

.tutorias-input-wrap {
    width: 66.666667%;
}

@media (min-width: 992px) {
    .tutorias-panel-col {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .tutorias-input-wrap {
        width: 100%;
    }
}

/* Menú de Periodicidad - Integrado con el formulario */
#menuPeriodicidad {
    animation: slideDown 0.3s ease-out;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

/* Dropdown de días con checkboxes */
#dropdownDias {
    text-align: left;
    border: 1px solid #ced4da;
    background-color: white;
}

#dropdownDias:hover {
    border-color: #007bff;
}

#dropdownDias:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Estilo para el texto del botón dropdown */
#textoDiasSeleccionados {
    color: #495057 !important;
}

/* Estilo para el botón de selección de fechas */
#btnSelectorFechas {
    text-align: left;
    justify-content: flex-start;
    padding: 12px 16px;
    font-weight: 500;
    border: 2px solid #007bff;
    background-color: white;
    color: #007bff;
    transition: all 0.3s ease;
}

#btnSelectorFechas:hover {
    background-color: #007bff;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

#btnSelectorFechas:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Estilos para los campos de fecha en el modal */
#fechaInicioSeleccionada,
#fechaFinSeleccionada {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    font-weight: 500;
    padding-left: 12px;
}

/* Botón de confirmar fechas */
#btnConfirmarFechas {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border: none;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#btnConfirmarFechas:hover:not(:disabled) {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

/* Responsive para el modal */
@media (max-width: 768px) {
    #modalSelectorFechas .modal-dialog {
        margin: 10px;
    }
}

/* ==========================================================================
   Eliminar scroll lateral del sidebar
   ========================================================================== */
body {
    margin: 0;
}

.main-content .ps__rail-y,
.main-content .ps__rail-x {
    display: none !important;
}

/* Perfect Scrollbar en #sidenav-main: el rail X no aporta (scroll vertical) y a veces mostraba barra horizontal */
.sidenav .ps__rail-x,
#sidenav-main .ps__rail-x {
    display: none !important;
}

.navbar-vertical .navbar-collapse {
    overflow: hidden !important;
}

/* Eliminar scroll en todas las variantes del navbar-vertical */
.navbar-vertical.navbar-expand-xs .navbar-collapse,
.navbar-vertical.navbar-expand-sm .navbar-collapse,
.navbar-vertical.navbar-expand-md .navbar-collapse,
.navbar-vertical.navbar-expand-lg .navbar-collapse,
.navbar-vertical.navbar-expand-xl .navbar-collapse,
.navbar-vertical.navbar-expand-xxl .navbar-collapse {
    overflow: hidden !important;
}

/* Eliminar scroll en el main content */
main.main-content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overscroll-behavior: auto;
}
/*Prueba para eliminar scroll en el main content */


/* Estilos para el header de información de tutoría */
.info-tutoria-header {
    background-color: #e3f2fd;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item:nth-child(1) { /* Día */
    flex: 0 0 100px;
}

.info-item:nth-child(2) { /* Hora */
    flex: 0 0 120px;
}

.info-item:nth-child(3) { /* Profesor/Alumno/Hijo */
    flex: 1;
}

.info-item:nth-child(4) { /* Lugar/Curso */
    flex: 1;
}

.info-item:nth-child(5) { /* Grupo */
    flex: 1;
}

.info-label {
    font-weight: 700;
    color: #00547C;
    font-size: 14px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    background-color: #00547C;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    min-height: 20px;
    display: flex;
    align-items: center;
}

/* Responsive para pantallas más pequeñas */
@media (max-width: 992px) {
    .info-tutoria-header {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .info-item:nth-child(1) { /* Día */
        flex: 0 0 80px;
    }
    
    .info-item:nth-child(2) { /* Hora */
        flex: 0 0 100px;
    }
    
    .info-item:nth-child(3) { /* Profesor/Alumno/Hijo */
        flex: 1;
        min-width: 200px;
    }
    
    .info-item:nth-child(4) { /* Lugar/Curso */
        flex: 1;
        min-width: 200px;
    }

    .info-item:nth-child(5) { /* Grupo */
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 576px) {
    .info-tutoria-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .info-item {
        flex: 1 !important;
        min-width: auto !important;
    }
}

/* Estilos para inputs y textareas del modal de tutorías */
.modal-body input[type="text"]:not(.input-group-outline .form-control),
.modal-body input[type="email"]:not(.input-group-outline .form-control),
.modal-body input[type="tel"]:not(.input-group-outline .form-control),
.modal-body select:not(.input-group-outline .form-control),
.modal-body textarea:not(.input-group-outline .form-control) {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    color: #333333 !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.modal-body input[type="text"]:focus:not(.input-group-outline .form-control),
.modal-body input[type="email"]:focus:not(.input-group-outline .form-control),
.modal-body input[type="tel"]:focus:not(.input-group-outline .form-control),
.modal-body select:focus:not(.input-group-outline .form-control),
.modal-body textarea:focus:not(.input-group-outline .form-control) {
    border-color: #00547C !important;
    box-shadow: 0 0 0 2px rgba(0, 84, 124, 0.1) !important;
    outline: none !important;
}

.modal-body input[type="text"]::placeholder,
.modal-body input[type="email"]::placeholder,
.modal-body input[type="tel"]::placeholder,
.modal-body textarea::placeholder {
    color: #999999 !important;
    font-style: italic !important;
}

.modal-body textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

.modal-body select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2300547C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 12px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Estilos para los labels del modal */
.modal-body .form-label {
    font-weight: 700 !important;
    color: #00547C !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Estilos para switches */
.modal-body .form-switch {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.modal-body .form-switch .form-check-input {
    width: 48px !important;
    height: 24px !important;
    background-color: #ffffff !important;
    border: 2px solid #00547C !important;
    border-radius: 12px !important;
    background-image: none !important;
    position: relative !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
}

.modal-body .form-switch .form-check-input:checked {
    background-color: #ffffff !important;
    border-color: #00547C !important;
    background-image: none !important;
}

.modal-body .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(0, 84, 124, 0.1) !important;
    outline: none !important;
}

/* Crear la bola del switch con ::after en lugar de ::before */
.modal-body .form-switch .form-check-input::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 16px !important;
    height: 16px !important;
    background-color: #00547C !important;
    border-radius: 50% !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
}

.modal-body .form-switch .form-check-input:checked::after {
    transform: translateX(24px) !important;
}

/* Visibilidad "Notas visibles a Alumno": perilla blanca + animación alineada carril/::after */
#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input {
    cursor: pointer;
}

#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input:not(:checked) {
    background-color: #adb5bd !important;
    border-color: #9ca3af !important;
    background-image: none !important;
}

#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input:checked {
    background-color: #00547c !important;
    border-color: #00547c !important;
    background-image: none !important;
}

#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 84, 124, 0.25) !important;
    border-color: #00547c !important;
}

#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#modalNotasVisiblesAlumno .form-switch .form-check-input.na-vis-switch {
    width: 48px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#modalNotasVisiblesAlumno .form-switch .form-check-input.na-vis-switch::after {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

#modalNotasVisiblesAlumno .form-switch .form-check-input.na-vis-switch:not(:checked)::after {
    transform: translateX(0) !important;
}

#modalNotasVisiblesAlumno .form-switch .form-check-input.na-vis-switch:checked::after {
    transform: translateX(24px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* Notas asignatura: columnas de media diferenciadas sin perder contraste con las notas */
#tablaListado .na-columna-media {
    --bs-table-bg: #fbfcf7;
    --bs-table-striped-bg: #f4f7ed;
    --bs-table-hover-bg: #eef4e4;
    --bs-table-border-color: #d8e2c5;
    box-shadow: inset 3px 0 0 #d4e4b7;
}

#tablaListado .na-columna-media .form-control {
    background-color: transparent;
}

#tablaListado tbody .form-control.text-success,
#tablaListado tbody .form-control.text-danger {
    font-weight: 700;
}

/* Celdas de prueba de recuperación (alumnos con fila asignada): fondo amarillo claro */
#tablaListado td.na-celda-recuperacion {
    background-color: #fff9db !important;
}

#tablaListado td.na-celda-recuperacion .nota-input,
#tablaListado td.na-celda-recuperacion .form-control {
    background-color: #fff9db !important;
}

.modal-body .form-switch .form-check-label {
    color: #333333 !important;
    font-size: 14px !important;
    margin-left: 0 !important;
    font-weight: 500 !important;
}

/* Tutorías: hacer evidente el estado activo del switch */
.modal-body .tutoria-switch-estado .form-check-input {
    box-shadow: inset 0 0 0 1px rgba(0, 84, 124, 0.08) !important;
}

.modal-body .tutoria-switch-estado .form-check-input:checked {
    background-color: #00547C !important;
    border-color: #00547C !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 10px rgba(0, 84, 124, 0.18) !important;
}

.modal-body .tutoria-switch-estado .form-check-input:checked::after {
    background-color: #ffffff !important;
}

.modal-body .tutoria-switch-estado .form-check-input:checked {
    color: #00547C !important;
    font-weight: 700 !important;
}

/* Fondo destacado para switches activos en tutorías */
.modal-body .form-switch.tutoria-switch-estado {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 84, 124, 0.18) !important;
    background-color: rgba(0, 84, 124, 0.04) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.modal-body .form-switch.tutoria-switch-estado.switch-activo {
    background-color: rgba(0, 84, 124, 0.14) !important;
    border-color: #00547C !important;
    box-shadow: 0 0 0 1px rgba(0, 84, 124, 0.15) inset !important;
}

.modal-body .form-switch.tutoria-switch-estado.switch-activo .form-check-label {
    color: #00547C !important;
    font-weight: 700 !important;
}

/* Estilos para el título del modal */
.modal-title-custom {
    font-weight: 700 !important;
    color: #00547C !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Estilos para el contenedor del formulario de modificar tutoría */
#formModificarTutoria {
    background-color: #E7F5FF !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

/* Estilos específicos para textareas del modal de agregar tutoría */
#modalAgregarTutoria textarea,
#modalAgregarTutoria .input-group-outline textarea,
#modalAgregarTutoria .input-group-outline .form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    color: #333333 !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    min-height: 80px !important;
    resize: vertical !important;
}

#modalAgregarTutoria textarea:focus,
#modalAgregarTutoria .input-group-outline textarea:focus,
#modalAgregarTutoria .input-group-outline .form-control:focus {
    border-color: #00547C !important;
    box-shadow: 0 0 0 2px rgba(0, 84, 124, 0.1) !important;
    outline: none !important;
}

#modalAgregarTutoria textarea::placeholder,
#modalAgregarTutoria .input-group-outline textarea::placeholder,
#modalAgregarTutoria .input-group-outline .form-control::placeholder {
    color: #999999 !important;
    font-style: italic !important;
}

/* Estilos para cada sección del formulario */
#formModificarTutoria .mb-3 {
    background-color: transparent !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ajustar el header de información para que tenga fondo blanco */
#formModificarTutoria .info-tutoria-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e9ecef !important;
    margin-bottom: 20px !important;
}

/* Estilos para inputs de fecha y hora dentro del header */
#formModificarTutoria .info-tutoria-header .info-value input[type="date"],
#formModificarTutoria .info-tutoria-header .info-value input[type="time"] {
    background: transparent !important;
    border: none !important;
    color: white !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* Estilos para el calendario y reloj de los inputs */
#formModificarTutoria .info-tutoria-header .info-value input[type="date"]::-webkit-calendar-picker-indicator,
#formModificarTutoria .info-tutoria-header .info-value input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    cursor: pointer !important;
}

/* Mantener iconos blancos en el modal de nueva tutoría */
#formAgregarTutoria .info-tutoria-header .info-value input[type="date"],
#formAgregarTutoria .info-tutoria-header .info-value input[type="time"] {
    color: white !important;
}

#formAgregarTutoria .info-tutoria-header .info-value input[type="date"]::-webkit-calendar-picker-indicator,
#formAgregarTutoria .info-tutoria-header .info-value input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    cursor: pointer !important;
}

/* Estilos cuando se hace focus en los inputs */
#formModificarTutoria .info-tutoria-header .info-value input[type="date"]:focus,
#formModificarTutoria .info-tutoria-header .info-value input[type="time"]:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Ajustar el espaciado del primer elemento después del header */
#formModificarTutoria .info-tutoria-header + .mb-3 {
    margin-top: 0 !important;
}

/* Fondo del modal-body para el modal de modificación */
#modalModificarTutoria .modal-body {
    background-color: #E7F5FF !important;
    padding: 20px !important;
}

/* Asegurar que el header tenga fondo blanco */
#modalModificarTutoria .info-tutoria-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e9ecef !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

/* Fondo del modal-body para el modal de asignar tutoría */
#modalAsignarTutoria .modal-body {
    background-color: #E7F5FF !important;
    padding: 20px !important;
}

/* Asegurar que los inputs y campos tengan fondo blanco en el modal de asignar tutoría */
#modalAsignarTutoria .form-control,
#modalAsignarTutoria .form-select,
#modalAsignarTutoria .input-group-outline,
#modalAsignarTutoria .list-group,
#modalAsignarTutoria .list-group-item {
    background-color: #ffffff !important;
}

/* Asegurar que el contenedor del alumno seleccionado tenga fondo blanco */
#modalAsignarTutoria #alumnoSeleccionado .rounded {
    background-color: #ffffff !important;
}

/* Estilo para el header del modal de asignar tutoría */
#modalAsignarTutoria .modal-header .modal-title {
    color: #00547C !important;
    font-weight: 600 !important;
    font-size: 1.0rem !important;
}

/* Estilo para la información de la tutoría (fecha, hora, lugar) */
#modalAsignarTutoria #asignarResumen {
    background-color: #00547C !important;
    color: #ffffff !important;
    padding: 15px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}



/* Estilos para mensaje de carga en tutoriasControl */
#tablaListado.tabla-tutorias-control tbody tr td.text-left {
    background-color: #00547C !important;
    color: white !important;
    font-weight: 500 !important;
    padding: 20px !important;
}

/* Estilos para fechas clickeables en tutoriasControl */
.fecha-tutoria {
    cursor: pointer !important;
    text-decoration: underline !important;
    transition: all 0.2s ease;
    font-weight: 500;
}

.fecha-tutoria:hover {
    background-color: #f8f9fa;
    padding: 2px 4px;
    border-radius: 3px;
}

.tc-legend-item {
    cursor: default !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.tc-legend-item:hover {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.tc-legend-wrapper {
    row-gap: 0.75rem;
    column-gap: 1rem;
}

#tablaListado.tabla-tutorias-control .fecha-tutoria {
    display: inline-block;
}

#tablaListado.tabla-tutorias-control .fecha-tutoria:hover {
    background-color: #f8f9fa;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* HistorialTutorias: remarcar filas/celdas clicables en otras tutorías */
#modalOtrasTutorias .tabla-listado-otros tbody tr,
#modalOtrasTutorias .tabla-listado-otros tbody td {
    cursor: pointer !important;
}

/* HistorialTutorias: compactar columnas largas del informe */
#modalInformeTutorias .tabla-listado-informe .texto-multilinea-tabla {
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Listado tutorias hijos: comentario limpio y multilinea */
.tabla-listado-tutorias-hijos .comentario-tutoria-hijo {
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Quitar efecto hover para elementos de la leyenda */
.fecha-tutoria[style*="cursor: default"]:hover {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Tutorías Control: leyenda de estados equivalente al ASP */
.fecha-estado-direccion {
    color: #525252 !important;
}

.fecha-estado-direccion:hover {
    color: #3f3f3f !important;
}

.fecha-estado-sin-finalizar {
    color: #cc0000 !important;
}

.fecha-estado-sin-finalizar:hover {
    color: #a30000 !important;
}

.fecha-estado-no-tutor {
    color: #eda119 !important;
}

.fecha-estado-no-tutor:hover {
    color: #c88410 !important;
}

.fecha-estado-con-alumno {
    color: #268cd6 !important;
}

.fecha-estado-con-alumno:hover {
    color: #1f73b0 !important;
}

.fecha-estado-con-padres {
    color: #009933 !important;
}

.fecha-estado-con-padres:hover {
    color: #007a29 !important;
}

.fecha-estado-con-otros {
    color: #6600cc !important;
}

.fecha-estado-con-otros:hover {
    color: #5200a3 !important;
}

/* Estilos para el modal de modificar tutoria en tutoriasControl */
#modalModificarTutoria .modal-body {
    background-color: #E7F5FF !important;
}

#modalModificarTutoria textarea.form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

#modalModificarTutoria textarea.form-control:focus {
    background-color: #ffffff !important;
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

#modalModificarTutoria .form-select {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

#modalModificarTutoria .form-select:focus {
    background-color: #ffffff !important;
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

#modalModificarTutoria .tutoria-switch-estado .form-check-input:checked {
    background-color: #00547C !important;
    border-color: #00547C !important;
}

#modalModificarTutoria .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem #F7F5FF !important;
}

#modalModificarTutoria .form-label {
    color: #212529 !important;
    font-weight: 500 !important;
}

#modalModificarTutoria textarea[readonly] {
    background-color: #f8f9fa !important;
    color: #495057 !important;
}

/* Alinear el checkbox a la izquierda en la misma vertical que otros elementos */
#modalAsignarTutoria .form-check {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#modalAsignarTutoria .form-check-input {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* Tutorías Programadas - filtros */
.tp-filter .form-control {
    border: 1px solid #00547C !important;
}
#tpBtnLimpiarFechas.btn {
    background-color: #00547C !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Estilos para Modal de Informe de Tutorías
   ========================================================================== */

/* Tabla de tutorías en el informe */
.tablaTutoriasInforme {
    font-size: 13px !important;
}

.tablaTutoriasInforme thead th {
    background-color: #00547C !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 12px 8px !important;
}

.tablaTutoriasInforme tbody td {
    vertical-align: middle !important;
    padding: 10px 8px !important;
}

/* Textos truncados con tooltip */
.tablaTutoriasInforme tbody td {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Responsive para el modal de informe */
@media (max-width: 1200px) {
    .tablaTutoriasInforme {
        font-size: 11px !important;
    }
    
    .tablaTutoriasInforme thead th,
    .tablaTutoriasInforme tbody td {
        padding: 8px 4px !important;
    }
}

/* Estilos para impresión del informe */
@media print {
    .modal-header,
    .modal-footer,
    .btn {
        display: none !important;
    }
    
    .tablaTutoriasInforme {
        font-size: 10px !important;
    }
    
    .modal-dialog {
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .modal-content {
        border: none !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   Estilos personalizados para SweetAlert
   ========================================================================== */

/* Sobrescribir el estilo del botón de confirmación de SweetAlert */
.swal2-styled.swal2-confirm {
    background-color: #00547C !important;
    background-image: none !important;
    border-color: #00547C !important;
    box-shadow: none !important;
    outline: none !important;
}

.swal2-styled.swal2-confirm:hover {
    background-color: #003d5c !important;
    background-image: none !important;
    border-color: #003d5c !important;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: none !important;
    outline: none !important;
}

.swal2-styled.swal2-confirm:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Estilo del botón de cancelar de SweetAlert */
.swal2-styled.swal2-cancel {
    background-color: #6c757d !important;
    background-image: none !important;
    border-color: #6c757d !important;
    box-shadow: none !important;
    outline: none !important;
}

.swal2-styled.swal2-cancel:hover {
    background-color: #5a6268 !important;
    background-image: none !important;
    border-color: #545b62 !important;
}

.swal2-styled.swal2-cancel:focus {
    box-shadow: none !important;
    outline: none !important;
}

.swal2-styled.swal2-cancel:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* ==========================================================================
   Estilos personalizados para Select2
   ========================================================================== */

/* Integración de Select2 con Material Design input-group-outline */
.input-group-outline.is-filled .select2-container--bootstrap-5 .select2-selection {
    border-color: #00547C !important;
}

.input-group-outline .select2-container--bootstrap-5 .select2-selection {
    border: 1px solid #d2d6da;
    border-radius: 0.375rem;
    min-height: 40px;
    padding: 0.375rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input-group-outline .select2-container--bootstrap-5 .select2-selection:focus,
.input-group-outline .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.input-group-outline .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #00547C !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 84, 124, 0.25);
}

/* Dropdown de Select2 */
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #d2d6da;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Búsqueda dentro del dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border: 1px solid #d2d6da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: #00547C;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 84, 124, 0.25);
}

/* Opciones en el dropdown */
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #00547C !important;
    color: white !important;
}

/* ==========================================================================
   Select2 - Feedback visual tras aplicar filtros
   ========================================================================== */
.gd-select2-resaltado.select2-container--bootstrap-5 .select2-selection {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.3rem rgba(40, 167, 69, 0.25) !important;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

/* Placeholder de Select2 */
.select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #6c757d;
}

/* Texto seleccionado */
.select2-container--bootstrap-5 .select2-selection__rendered {
    color: #495057;
    line-height: 1.5;
}

/* Botón de limpiar (X) */
.select2-container--bootstrap-5 .select2-selection__clear {
    color: #6c757d;
    font-size: 1.2em;
}

.select2-container--bootstrap-5 .select2-selection__clear:hover {
    color: #00547C;
}

/* Ajuste para que Select2 ocupe todo el ancho del contenedor */
.input-group-outline .select2-container {
    width: 100% !important;
}
/* Estilos personalizados para checkboxes - Color corporativo #00547C */
.form-check .form-check-input:checked[type=checkbox] {
  background-color: #00547C;
  border-color: #00547C;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check .form-check-input:focus {
  border-color: #00547C;
  box-shadow: 0 0 0 0.25rem rgba(0, 84, 124, 0.25);
}

/* ==========================================================================
   Extraescolares - Notas (extraescolarNotas.php)
   ========================================================================== */

#tablaListado thead th.th-objetivo-vertical {
  padding: 8px 6px !important;
  vertical-align: middle !important;
}

#tablaListado thead th.th-objetivo-vertical .obj-vertical {
  display: block;
  width: 100%;
  /* Horizontal + wrap */
  padding: 0;
  writing-mode: horizontal-tb;
  transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.15;
}

#tablaListado td.td-nota {
  padding: 0 !important;
  min-width: 64px;
}

#tablaListado td.td-nota select {
  border-radius: 0 !important;
  width: 100%;
}

/* ==========================================================================
   Estilos para Modal de Solicitudes de Orientación
   ========================================================================== */
#formSolicitud .form-control,
#formSolicitud input[type="date"] {
  border: 1px solid #00547C !important;
}

#formSolicitud .form-control:focus,
#formSolicitud input[type="date"]:focus {
  border-color: #00547C !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 84, 124, 0.25) !important;
}

#formSolicitud .form-control:hover,
#formSolicitud input[type="date"]:hover {
  border-color: #00547C !important;
}

/* ==========================================================================
   Quill Editor - Toolbar botones personalizados (nuevoMensaje, ContenidosEstaticosid)
   ========================================================================== */
/* Iconos SVG nativos de Quill: color del proyecto */
.ql-toolbar .ql-stroke {
  stroke: #00547C;
}
.ql-toolbar .ql-fill {
  fill: #00547C;
}
.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke {
  stroke: #00A8E2;
}
.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill {
  fill: #00A8E2;
}
/* Picker/dropdown del toolbar mismo tono */
.ql-toolbar .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #00A8E2;
}
.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: #00A8E2;
}

.ql-toolbar button.ql-divider,
.ql-toolbar button.ql-table,
.ql-toolbar button.ql-emoji,
.ql-toolbar button.ql-undo,
.ql-toolbar button.ql-redo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ql-toolbar button.ql-divider svg,
.ql-toolbar button.ql-table svg,
.ql-toolbar button.ql-emoji svg,
.ql-toolbar button.ql-undo svg,
.ql-toolbar button.ql-redo svg {
  display: none !important;
}
.ql-toolbar button.ql-divider,
.ql-toolbar button.ql-table,
.ql-toolbar button.ql-emoji,
.ql-toolbar button.ql-undo,
.ql-toolbar button.ql-redo {
  min-width: 28px;
  min-height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.ql-toolbar button.ql-divider:empty:before,
.ql-toolbar button.ql-divider:not(:has(i)):before {
  content: "\f068";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
  color: #00547C;
}
.ql-toolbar button.ql-table:empty:before,
.ql-toolbar button.ql-table:not(:has(i)):before {
  content: "\f0ce";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
  color: #00547C;
}
.ql-toolbar button.ql-emoji:empty:before,
.ql-toolbar button.ql-emoji:not(:has(i)):before {
  content: "\f118";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
  color: #00547C;
}
.ql-toolbar button.ql-undo:empty:before,
.ql-toolbar button.ql-undo:not(:has(i)):before {
  content: "\f0e2";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
  color: #00547C;
}
.ql-toolbar button.ql-redo:empty:before,
.ql-toolbar button.ql-redo:not(:has(i)):before {
  content: "\f01e";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
  color: #00547C;
}
/* Iconos FA inyectados por JS (divider, table, emoji, undo, redo) */
.ql-toolbar button.ql-divider i,
.ql-toolbar button.ql-table i,
.ql-toolbar button.ql-emoji i,
.ql-toolbar button.ql-undo i,
.ql-toolbar button.ql-redo i {
  color: #00547C;
}
.ql-toolbar button.ql-divider:hover i,
.ql-toolbar button.ql-table:hover i,
.ql-toolbar button.ql-emoji:hover i,
.ql-toolbar button.ql-undo:hover i,
.ql-toolbar button.ql-redo:hover i {
  color: #00A8E2;
}

/* Contenido del editor: permitir cursiva y negrita (la regla global * { font-style: normal } las anula) */
.ql-editor em,
.ql-editor i,
.ql-editor .ql-italic {
  font-style: italic !important;
}
.ql-editor strong,
.ql-editor b,
.ql-editor .ql-bold {
  font-weight: 700 !important;
}
/* Negrita y cursiva a la vez (mismo elemento con ambas clases o anidados) */
.ql-editor .ql-bold.ql-italic,
.ql-editor strong em,
.ql-editor em strong,
.ql-editor b i,
.ql-editor i b {
  font-style: italic !important;
  font-weight: 700 !important;
}
.ql-editor u,
.ql-editor .ql-underline {
  text-decoration: underline !important;
}
.ql-editor s,
.ql-editor strike,
.ql-editor .ql-strike {
  text-decoration: line-through !important;
}

/* Tablas insertadas en Quill (blot table) */
.ql-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}
.ql-editor table td,
.ql-editor table th {
  border: 1px solid #ddd;
  padding: 8px;
}

/* ==========================================================================
   Diploma - Páginas (estilos movidos desde vistas, sin clases nuevas)
   ========================================================================== */

#wrapper {
  position: relative;
}

/* dpBandasComponentes.php + dpBandasCalificacion.php */
#bandasCalificacion_form .d-flex.justify-content-around > div {
  margin: 0 2px;
}

#bandasCalificacion_form .d-flex.justify-content-around input[type="text"] {
  width: 120px;
  min-width: 35px;
  max-width: 140px;
  padding: 4px 2px;
  font-size: 15px;
}

#bandasCalificacion_form .d-flex.justify-content-around p {
  font-size: 13px;
  margin-bottom: 2px;
}

/* dpNotasAsignatura.php */
h2#titulo {
  font-size: 27px !important;
  font-family: Open sans !important;
  font-weight: 700 !important;
}

.contenido .row.mt-3 + .row {
  padding-top: 1rem;
}

#formAnadirPrueba {
  display: none;
}

#paginationControls + #tablaListado th,
#paginationControls + #tablaListado td {
  padding: 4px !important;
  line-height: 1 !important;
}

#paginationControls + #tablaListado {
  width: 100% !important;
  table-layout: fixed;
}

#paginationControls + #tablaListado thead th {
  font-size: 12px !important;
}

#paginationControls + #tablaListado th.text-center,
#paginationControls + #tablaListado td.text-center,
#paginationControls + #tablaListado th.small,
#paginationControls + #tablaListado td.p-0 {
  font-size: 11px !important;
  text-align: left !important;
  vertical-align: middle !important;
}

#paginationControls + #tablaListado tbody td.text-start {
  font-size: 11px !important;
  line-height: 1 !important;
}

#paginationControls + #tablaListado input.nota-input,
#paginationControls + #tablaListado span.form-control-plaintext {
  font-size: 11px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: block;
  margin: 0;
  text-align: center !important;
  line-height: 1 !important;
}

#paginationControls + #tablaListado input.nota-input.form-control-sm {
  padding: 0.1rem 0.25rem !important;
  height: 24px !important;
}

#tablaListado .nota-input-wrapper {
  position: relative;
}

#tablaListado .nota-input-warning {
  display: none;
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  color: #dc3545;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}

#tablaListado .nota-input-wrapper--invalid .nota-input-warning {
  display: block;
}

#tablaListado .nota-input--invalid {
  border: 2px solid #dc3545 !important;
  background-color: #fff5f5 !important;
  color: #b02a37 !important;
  padding-right: 1.75rem !important;
}

#tablaListado td.nota-input-cell--invalid {
  background-color: #f8d7da;
}

#tablaListado .columna-prueba {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#tablaListado .columna-prueba > div {
  margin-bottom: 6px;
  line-height: 1.25;
}

#tablaListado .columna-prueba .acciones i {
  margin-left: 6px;
  font-size: 0.9rem;
}

#tablaListado .columna-prueba .dp-subcol-labels span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

#paginationControls + #tablaListado thead th.columna-prueba-th {
  vertical-align: top;
}

#paginationControls + #tablaListado input.nota-informativa-input {
  font-size: 11px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.1rem 0.25rem !important;
  height: 24px !important;
  text-align: center !important;
}

#paginationControls + #tablaListado input.porcentaje-input {
  color: #fff !important;
  caret-color: #fff !important;
}

#paginationControls + #tablaListado input.porcentaje-input::placeholder {
  color: rgba(255, 255, 255, 0.85) !important;
}

#paginationControls + #tablaListado .porcentaje-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#paginationControls + #tablaListado .porcentaje-wrap .porcentaje-sufijo {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Nuevo Mensaje - SweetAlert responsive */
@media (max-width: 576px) {
  .nm-swal-preview-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .nm-swal-preview-popup {
    width: 92vw !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* Tutorías — Informe del alumno (TutoriasInforme.php) */
.tut-informe-titulo {
  color: #8b1538;
  font-weight: 700;
  text-align: right;
}

#listaInformeTutorias.tut-informe-lista {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.06);
  padding: 0.25rem 1.25rem;
}

.tut-informe-item {
  padding: 1.35rem 0;
  border-bottom: 2px dashed #adb5bd;
  margin-bottom: 0;
}

.tut-informe-item:last-child {
  border-bottom: none;
  padding-bottom: 1.35rem;
}

.tut-informe-item:first-child {
  padding-top: 1.1rem;
}

.tut-informe-item + .tut-informe-item {
  margin-top: 0.15rem;
}

.tut-informe-cabecera {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 0.75rem 1rem;
  align-items: start;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #e9ecef;
  color: #6c757d;
  font-size: 0.95rem;
}

.tut-informe-fecha {
  font-weight: 700;
  color: #495057;
}

.tut-informe-tipo {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.tut-informe-campo {
  margin-bottom: 0.4rem;
  color: #6c757d;
  line-height: 1.55;
}

.tut-informe-campo strong {
  font-weight: 600;
  color: #5c636a;
}

.tut-informe-realizada {
  margin-top: 0.35rem;
}

@media (max-width: 768px) {
  .tut-informe-cabecera {
    grid-template-columns: 1fr;
  }

  .tut-informe-tipo,
  .tut-informe-titulo {
    text-align: left;
  }
}

@media print {
  .g-sidenav-show .sidenav,
  .g-sidenav-show .navbar-main,
  .g-sidenav-show .navbar-top,
  .tut-informe-no-print {
    display: none !important;
  }

  .tut-informe-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Informes de asistencia
   ========================================================================== */

/* Común */
.ia-page-heading {
  font-size: 27px;
  font-family: Open sans;
  font-weight: 700;
}

.ia-select-grupo {
  min-width: 280px;
}

.ia-th-col-accion {
  width: 1%;
  white-space: nowrap;
}

.ia-th-col-strecha {
  width: 1%;
}

#tabla-control-lista,
#tabla-fa-detalle,
#tabla-faltas-centro-dia,
#tabla-faltas-validar,
#tabla-asist-grupo-dia,
#tabla-salidas-programadas,
#tabla-uniforme-sin-justif {
  width: 100%;
}

/* Página índice (informesAsistencia.php) */
.ia-informes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.35rem;
  padding: 0.25rem 0 1.5rem;
}

.ia-report-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.85rem;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.06);
  background: #fff;
}

.ia-report-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.65rem 1.75rem rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.08);
}

.ia-report-card:focus-within {
  outline: 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

.ia-report-card__accent {
  height: 4px;
  width: 100%;
  opacity: 0.92;
}

.ia-report-card__body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.35rem 1.35rem 1.15rem;
}

.ia-report-card__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  font-size: 1.12rem;
}

.ia-report-card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
  color: #344767;
}

.ia-report-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 0.55rem 1.35rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.8rem;
  color: #8392ab;
}

.ia-report-card__footer i {
  font-size: 0.7rem;
  opacity: 0.85;
}

a.ia-report-card--link {
  cursor: pointer;
}

/* Control de asistencia realizado (informesAsistenciaControlLista.php) */
.ia-cl-celda {
  white-space: nowrap;
  text-align: center;
  min-width: 2.25rem;
}

#tabla-control-lista td.text-start {
  text-align: left !important;
}

/* Faltas alumno detalle (informesAsistenciaFaltasAlumnoDetalle.php) */
.ia-fa-det-celda-h {
  white-space: nowrap;
  text-align: center;
  min-width: 2.5rem;
}

/* Faltas en el centro (informesAsistenciaFaltasCentro.php) */
.ia-fc-celda-h {
  white-space: nowrap;
  text-align: center;
  min-width: 2.5rem;
}

#tabla-faltas-centro-dia td.text-start {
  text-align: left !important;
}

/* Justificaciones pendientes (informesAsistenciaFaltasValidar.php) */
.ia-val-celda-h {
  white-space: nowrap;
  text-align: center;
  min-width: 2.5rem;
}

#tabla-faltas-validar thead th.ia-val-celda-h,
#tabla-faltas-validar tbody td.ia-val-celda-h {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#tabla-faltas-validar thead th.ia-val-celda-h {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#tabla-faltas-validar tbody tr td:nth-child(12) {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#tabla-faltas-validar thead th[data-lang="ia_val_colUnif"] {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#tabla-faltas-validar td.text-start {
  text-align: left !important;
}

#tabla-faltas-validar .ia-val-nombre-alumno {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 12rem;
  max-width: 20rem;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

/* Asistencia grupo por día (informesAsistenciaGrupoDia.php) */
.ia-gd-celda {
  white-space: nowrap;
  text-align: center;
  min-width: 2.75rem;
  font-size: 0.85rem;
}

#tabla-asist-grupo-dia td.text-start {
  text-align: left !important;
}

.ia-gd-lista-item {
  text-align: center;
  min-width: 2.5rem;
}

.ia-gd-lista-item small {
  display: block;
  line-height: 1.1;
}

/* Salidas programadas (informesAsistenciaSalidasProgramadas.php) */
#tabla-salidas-programadas td.text-start {
  text-align: left !important;
}

/* Uniforme sin justificar (informesAsistenciaUniformeSinJustif.php) */
#tabla-uniforme-sin-justif td.text-start {
  text-align: left !important;
}

/* Sin justificar (informesAsistenciaSinJustif.php, faltasAsistenciaSinJustifProfesor.php) */
.ia-sj-celda-h { white-space: nowrap; text-align: center; min-width: 2.5rem; }
/* Quitar padding lateral en horas (1-8) y uniforme */
.tabla-faltas-sin-justif thead th.ia-sj-celda-h,
.tabla-faltas-sin-justif tbody td.ia-sj-celda-h {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* En thead el proyecto fuerza padding vertical grande (datatables-custom.css).
    Lo igualamos aquí para que 1-8/Unif. no queden “subidos”. */
.tabla-faltas-sin-justif thead th.ia-sj-celda-h {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.tabla-faltas-sin-justif tbody tr td:nth-child(13),
.tabla-faltas-sin-justif[data-ia-sj-centro="1"] tbody tr td:nth-child(14) {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.tabla-faltas-sin-justif thead th[data-lang="ia_val_colUnif"] {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.tabla-faltas-sin-justif td.text-start { text-align: left !important; }
.tabla-faltas-sin-justif .ia-sj-nombre-alumno {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-width: 12rem;
    max-width: 20rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

/* ==========================================================================
   Estilos para la página Mesas del comedor
   ========================================================================== */

.mesas-dt-toolbar .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  text-align: left !important;
}

.mesas-dt-toolbar .dataTables_filter input {
  margin-left: 0 !important;
}

.mesas-dt-form .mi-contenido-mesa {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.mesas-dt-form .form-mesas-nueva .input-group-outline {
  margin-bottom: 0 !important;
}

.mesas-dt-form .mesas-btn-col .btn {
  min-height: calc(1.3em + 1.25rem + 2px);
}

/* ==========================================================================
   Estilos para ContenidosEstaticosid (toolbar Quill personalizado)
   ========================================================================== */

.ql-toolbar button.ql-divider,
.ql-toolbar button.ql-table,
.ql-toolbar button.ql-emoji,
.ql-toolbar button.ql-undo,
.ql-toolbar button.ql-redo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ql-toolbar button.ql-divider svg,
.ql-toolbar button.ql-table svg,
.ql-toolbar button.ql-emoji svg,
.ql-toolbar button.ql-undo svg,
.ql-toolbar button.ql-redo svg {
  display: none !important;
}

.ql-toolbar button.ql-divider,
.ql-toolbar button.ql-table,
.ql-toolbar button.ql-emoji,
.ql-toolbar button.ql-undo,
.ql-toolbar button.ql-redo {
  min-width: 28px;
  min-height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.ql-toolbar button.ql-divider:empty:before,
.ql-toolbar button.ql-divider:not(:has(i)):before {
  content: "\f068";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
}

.ql-toolbar button.ql-table:empty:before,
.ql-toolbar button.ql-table:not(:has(i)):before {
  content: "\f0ce";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
}

.ql-toolbar button.ql-emoji:empty:before,
.ql-toolbar button.ql-emoji:not(:has(i)):before {
  content: "\f118";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
}

.ql-toolbar button.ql-undo:empty:before,
.ql-toolbar button.ql-undo:not(:has(i)):before {
  content: "\f0e2";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
}

.ql-toolbar button.ql-redo:empty:before,
.ql-toolbar button.ql-redo:not(:has(i)):before {
  content: "\f01e";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
}

/* ==========================================================================
   Estilos para la página crearEventoGrupo
   ========================================================================== */

.crear-evento-grupal-page .form-control:disabled {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: #6c757d;
  cursor: not-allowed;
}

.crear-evento-grupal-page .form-control:disabled + .form-label {
  color: #6c757d;
}

.crear-evento-grupal-page .alumnos-preseleccionados {
  background-color: #e8f5e8;
  border-left: 4px solid #28a745;
}

.crear-evento-grupal-page .alumnos-preseleccionados .card-header {
  background-color: #d4edda;
  border-bottom: 1px solid #c3e6cb;
}

/* ==========================================================================
   Estilos para la página notasAsignaturaPAI
   ========================================================================== */

/* Total PAI / Final PAI: celdas verde claro */
.table-pai-curso {
  background-color: #d4edda !important;
}

.nota-input[readonly] {
  background-color: transparent !important;
  cursor: default;
}

/* Modal visibilidad alumnos: carril gris/azul (mismo criterio que notas nacionales) */
#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input {
  cursor: pointer;
}

#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input:not(:checked) {
  background-color: #adb5bd !important;
  border-color: #9ca3af !important;
  background-image: none !important;
}

#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input:checked {
  background-color: #00547c !important;
  border-color: #00547c !important;
  background-image: none !important;
}

#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 84, 124, 0.25) !important;
  border-color: #00547c !important;
}

#modalNotasVisiblesAlumno .form-switch .na-vis-switch.form-check-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Paradas ruta hijo (vista padres) */
#prh-subtituloAlumno {
  font-size: 1.05rem;
}

#prh-card-habitual .table th,
#prh-card-excepciones .table th {
  white-space: nowrap;
}

/* ==========================================================================
   Comedores (comedores.php)
   ========================================================================== */
.comedores-dt-toolbar .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  text-align: left !important;
}

.comedores-dt-toolbar .dataTables_filter input {
  margin-left: 0 !important;
}

/* ==========================================================================
   Gestión partes fichaje (gestionPartesFichaje.php)
   ========================================================================== */
.bg-parte-programado,
.fc-event.bg-parte-programado {
  background-color: #c9a0dc !important;
  color: #1a1a1a;
}

/* ==========================================================================
   Informes comedor (informesComedor.php)
   ========================================================================== */
.page-informes-comedor #tablaListado th.ic-col-alumno-comedor,
.page-informes-comedor #tablaListado td.ic-col-alumno-comedor {
  min-width: 4rem;
  max-width: 8rem;
  text-align: left !important;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

.page-informes-comedor #tablaListado th.ic-col-grupo-comedor,
.page-informes-comedor #tablaListado td.ic-col-grupo-comedor {
  min-width: 2rem;
  max-width: 4rem;
  text-align: left !important;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

.page-informes-comedor #tablaListado th.ic-col-alumnos-mesas-comedor,
.page-informes-comedor #tablaListado td.ic-col-alumnos-mesas-comedor,
.page-informes-comedor #tablaListado th.ic-col-comedor-alumnos,
.page-informes-comedor #tablaListado td.ic-col-comedor-alumnos {
  min-width: 4rem;
  max-width: 6rem;
  text-align: left !important;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

/* ==========================================================================
   Informes comedor alumnos (informesComedorAlumnos.php)
   ========================================================================== */
.page-informes-comedor-alumnos #tablaListado th.ic-col-alumno-comedor,
.page-informes-comedor-alumnos #tablaListado td.ic-col-alumno-comedor,
.page-informes-comedor-alumnos #tablaListado th.ic-col-grupo-comedor,
.page-informes-comedor-alumnos #tablaListado td.ic-col-grupo-comedor {
  min-width: 6rem;
  max-width: 14rem;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

/* ==========================================================================
   Informes rutas (informesRutas.php)
   ========================================================================== */
#tablaListado td.ir-celda-titulo-ruta {
  background-color: #e8f2fc !important;
  color: #0c4178 !important;
  border-color: #b6d4fe !important;
}

#tablaListado .ir-listado-marca-f {
  color: #cc0000;
}

#tablaListado .ir-listado-marca-s {
  color: #856404;
}

#tablaListado .ir-listado-marca-excep {
  color: #0c4178;
  font-size: 0.85rem;
}

#tablaListado .ir-celda-excepcion-ruta {
  color: #0c4178;
  font-weight: 600;
  font-size: 0.85rem;
}

#tablaListado th.ir-col-ruta-faltas,
#tablaListado td.ir-col-ruta-faltas {
  min-width: 6rem;
  max-width: 11rem;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

#tablaListado th.ir-col-parada-faltas,
#tablaListado td.ir-col-parada-faltas {
  min-width: 6rem;
  max-width: 12rem;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

#tablaListado th.ir-col-poblacion-faltas,
#tablaListado td.ir-col-poblacion-faltas {
  min-width: 6rem;
  max-width: 14rem;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

#tablaListado th.ir-col-nombre-faltas,
#tablaListado td.ir-col-nombre-faltas {
  min-width: 6rem;
  max-width: 10rem;
  text-align: left !important;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

#tablaListado th.ir-col-grupo-faltas,
#tablaListado td.ir-col-grupo-faltas {
  min-width: 4rem;
  max-width: 7rem;
  text-align: left !important;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: top;
}

/* ==========================================================================
   Solicitudes orientación (solicitudesListado.php)
   ========================================================================== */
#tablaSolicitudes th:nth-child(4),
#tablaSolicitudes td:nth-child(4) {
  width: 240px;
  max-width: 280px;
}

#tablaSolicitudes td:nth-child(4) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tablaSolicitudes th:nth-child(7),
#tablaSolicitudes td:nth-child(7) {
  padding-right: 0.4rem !important;
}

#tablaSolicitudes tbody td:not(:first-child) {
  cursor: pointer;
}

/* ==========================================================================
   Pedido libros detalle (pedidoId.php)
   ========================================================================== */
#tablaLineasPedido {
  font-size: 0.9rem;
}

#tablaLineasPedido th,
#tablaLineasPedido td {
  padding: 8px 6px;
  vertical-align: middle;
}

#tablaLineasPedido .campo-editable {
  width: 70px !important;
  min-width: 70px;
  max-width: 70px;
}

#tablaLineasPedido td:nth-child(3) {
  max-width: 250px;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
}

@media (max-width: 1200px) {
  #tablaLineasPedido {
    font-size: 0.85rem;
  }

  #tablaLineasPedido th,
  #tablaLineasPedido td {
    padding: 6px 4px;
  }

  #tablaLineasPedido td:nth-child(3) {
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  #tablaLineasPedido td:nth-child(3) {
    max-width: 150px;
  }
}

/* ==========================================================================
   Excepciones (excepciones.php)
   ========================================================================== */
.page-excepciones #tablaListado td,
.page-excepciones #tablaListado th {
  word-break: break-word;
  white-space: normal;
}

.page-excepciones .excepciones-filtro-fecha {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  max-width: 420px;
}

.page-excepciones .excepciones-filtro-fecha .form-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 240px;
}

.page-excepciones .excepciones-filtro-fecha #btnBuscar {
  flex: 0 0 auto;
  min-width: 7.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  white-space: nowrap;
}

/* ==========================================================================
   Excepciones alumno (excepcionesAlumnoVer.php)
   ========================================================================== */
.page-excepciones-alumno #tablaListado td,
.page-excepciones-alumno #tablaListado th {
  word-break: break-word;
  white-space: normal;
}

.page-excepciones-alumno #tablaListado.excepciones-solo-lectura th:nth-child(5),
.page-excepciones-alumno #tablaListado.excepciones-solo-lectura td:nth-child(5) {
  display: none;
}

/* ==========================================================================
   Asistencia grupo — modo asignatura (asistenciaGrupo.php)
   ========================================================================== */
.asistencia-grupo--compacto #tablaListado tbody td.asg-col-compact {
  font-size: 0.85rem;
  line-height: 1.15;
}

.asistencia-grupo--compacto #tablaListado {
  font-size: 0.85rem;
}

.asistencia-grupo--compacto #tablaListado th,
.asistencia-grupo--compacto #tablaListado td {
  padding: 0.4rem 0.45rem !important;
  vertical-align: middle;
}

.asistencia-grupo--compacto #tablaListado select.asistencia-select {
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem;
  min-height: 1.7rem;
  height: 1.7rem;
  line-height: 1.2;
}

.asistencia-grupo--compacto #tablaListado tbody tr.static-row td {
  padding-top: 0.2rem !important;
  padding-bottom: 0.3rem !important;
}

.asistencia-grupo--compacto .table-responsive {
  overflow-x: auto;
}