#modalError {
    z-index: 9999 !important;
    position: fixed !important;
    top: 20% !important;
    left: 70% !important;
    transform: translate(-70%, -50%) !important;
    background: #f44336 !important; /* Fondo rojo */
    color: white !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    width: 50%;
}

#modalMsg {
    z-index: 9999 !important;
    position: fixed !important;
    top: 20% !important;
    left: 60% !important;
    transform: translate(-70%, -50%) !important;
    background: #f44336 !important; /* Fondo rojo */
    color: white !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    width: 50%;
}

#modalAviso {
    z-index: 9999 !important;
    position: fixed !important;
    top: 20% !important;
    left: 60% !important;
    transform: translate(-70%, -50%) !important;
    background: #ff7c09 !important; /* Fondo rojo */
    color: white !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    width: 40%;
}

#modalInfo {
    z-index: 9999 !important;
    position: fixed !important;
    top: 20% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #2196F3 !important; /* Azul */
    color: white !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    width: 50%;
}

#modalConfirmacion {
    z-index: 9999 !important;
    position: fixed !important;
    top: 20% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #E9E9E9 !important; /* Azul */
    color: white !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    width: 50%;
}

#modalInfo .modal-title {
    font-size: 24px;
    font-weight: bold;
    color: white; /* Color blanco para el título */
    background-color: #2196F3; /* Rojo oscuro para resaltar */
    padding: 10px;
    margin: -20px -20px 20px -20px; /* Para que se expanda por completo */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#modalAviso .modal-title {
    font-size: 24px;
    font-weight: bold;
    color: white; /* Color blanco para el título */
    background-color: #ff7c09; /* Rojo oscuro para resaltar */
    padding: 10px;
    margin: -20px -20px 20px -20px; /* Para que se expanda por completo */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#modalInfo .modal-content {
    text-align: center; /* Centra todo el contenido del modal */
    padding: 20px;
}

#modalConfirmacion .modal-content {
    font-size: 20px;
    text-align: center; /* Centra todo el contenido del modal */
    color: black;
    padding: 20px;
}

#modalInfo .modal-footer {
    text-align: right;
    background: #2196F3 !important;
    border-top: none;
}

#modalAviso .modal-footer {
    text-align: right;
    background: #ff7c09 !important;
    border-top: none;
}

#modalConfirmacion .modal-footer {
    text-align: right;
    background: #E9E9E9 !important;
    border-top: none;
}

#modalConfirmacion .modal-footer button {
    background-color: #FFFFFF;
    color: #000000;
    border: 2px solid #000000;
}



.modal-footer {
    text-align: right;
    /*background: #f44336 !important;*/
    border-top: none;
}

.modal-close {
    background-color: #ffffff !important;  /* Fondo blanco */
    color: #000000 !important;  /* Texto negro */
    font-weight: bold;
    padding: 10px 20px;
    border: 2px solid #000000;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background-color: #000000 !important;  /* Fondo negro al pasar el mouse */
    color: #ffffff !important;  /* Texto blanco */
}

.modal-content {
    text-align: center; /* Centra todo el contenido del modal */
    padding: 20px;
}

.modal-title {
    font-size: 24px;
    font-weight: bold;
    color: white !important; /* Color blanco para el título */
    background-color: #f44336; /* Rojo oscuro para resaltar */
    padding: 10px;
    margin: -20px -20px 20px -20px; /* Para que se expanda por completo */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.modal {
    position: fixed;
    top: 20%; /* Centrar verticalmente */
    left: 50%; /* Centrar horizontalmente */
    transform: translate(-50%); /* Ajuste fino para centrar */
    width: 50%;
    max-width: 600px;
    min-width: 300px;
    background-color: #f44336;
    color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#modalNuevoAlumno{
  background: #f5f5f5 !important;
}
#modalNuevoAlumno .modal-footer{
  background: #f5f5f5 !important;
}

#modalNuevoAlumno .modal-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
}

#modalNuevoAlumno .modal-footer .btn-flat{
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  line-height:36px;
}



/* Ajuste para pantallas grandes (PC) */
@media screen and (min-width: 1024px) { 
    #modalError, #modalMsg, #modalInfo, #modalConfirmacion {
        width: 40% !important; /* Reduce el ancho para mejor proporción en PC */
    }
}

/* Ajuste para pantallas pequeñas */
@media screen and (max-width: 600px) {
    #modalError, #modalMsg, #modalInfo{
        width: 80% !important; /* Ocupa más ancho en móviles */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    #modalConfirmacion{
        width: 80% !important; /* Ocupa más ancho en móviles */
        left: 50% !important;
        transform: translate(-50%, -30%) !important;
    }
}

.table-responsive {
    overflow-x: auto;
    white-space: nowrap;
}

#modalConfirmacion .btn-separado {
    margin-right: 20px; /* Ajusta este valor según el espacio deseado */
}

#modalConfirmacion .btn-separado-rojo {
    margin-right: 20px; /* Ajusta este valor según el espacio deseado */
    color: red;
}

#modalConfirmacion .modal-footer button:last-child {
    margin-right: 0; /* Evita espacio extra después del último botón */
}

.label-grande{
    font-size: 1.3em !important;
    font-weight: bold;
    color: #5E2E98 !important;
}

.label-grande-select{
    font-size: 1.3em !important;
    font-weight: bold;
    padding-left: 50px;
}

.dropdown-content li span::before {
    font-family: 'Material Icons';
    content: attr(data-icon);
    margin-right: 10px;
    vertical-align: middle;
}

.formulario-centrado {
    width: 50%; /* Ajusta el ancho al 50% */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}

@media (max-width: 768px) {
    .formulario-centrado {
        width: 100%; /* Ancho completo en dispositivos pequeños */
        margin: 0; /* Sin márgenes para ajustarse completamente */
    }
}

.formulario-centrado-70 {
    width: 70%; /* Ajusta el ancho al 50% */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}

@media (max-width: 768px) {
    .formulario-centrado-70 {
        width: 100%; /* Ancho completo en dispositivos pequeños */
        margin: 0; /* Sin márgenes para ajustarse completamente */
    }
}

.formulario-centrado-100 {
    width: 100%; /* Ajusta el ancho al 50% */
    margin: 0 auto; /* Centra el formulario horizontalmente */
}

@media (max-width: 768px) {
    .formulario-centrado-100 {
        width: 100%; /* Ancho completo en dispositivos pequeños */
        margin: 0; /* Sin márgenes para ajustarse completamente */
    }
}

.espaciado-20 {
    margin-top: 20px; /* Aumenta o disminuye el valor para ajustar */
    border-top: 1px solid #9e9e9e !important; /* Borde superior */
    border-left: 1px solid #9e9e9e !important; /* Borde izquierdo */
    border-right: 1px solid #9e9e9e !important; /* Borde derecho */
    border-bottom: 2px solid #2196F3 !important; /* Borde inferior */
    border-radius: 4px !important; /* Opcional, para bordes redondeados */
}

.input-field select + label {
    top: -10px; /* Ajusta este valor según sea necesario */
}

#modalConfirmacion input[type="checkbox"] {
    margin-right: 10px;
}

#modalConfirmacion span {
    font-size: 14px;
    color: #333;
}

.menu-separator {
    border-top: 1px solid #ccc;  /* Borde superior para separar las secciones */
    margin: 10px 0;
}

.table-container {
    width: 100%; /* Aseguramos que el contenedor de la tabla ocupe todo el ancho disponible */
    overflow-x: auto; /* Si hay desbordamiento horizontal, se agrega una barra de desplazamiento */
}

/* Estilo para que el encabezado de la tabla se quede fijo al desplazarse */
#demo-foo-row-toggler thead {
    position: sticky;
    top: 0; /* Se quedará en la parte superior cuando te desplaces hacia abajo */
    background-color: #fff; /* Asegúrate de que el fondo sea blanco o del color que prefieras */
    z-index: 1; /* Asegura que el encabezado esté por encima de las filas al desplazarte */
}

/* En vista de PC (pantallas grandes), el campo de búsqueda está alineado a la izquierda */
div.dataTables_filter {
    display: inline-block;          /* Mantenerlo como inline-block para que ocupe solo el espacio necesario */
    float: left !important;         /* Aseguramos que esté alineado a la izquierda */
    width: auto;                    /* Deja que el campo de búsqueda ocupe solo el espacio necesario */
    margin-left: 0 !important;      /* Eliminar márgenes innecesarios */
    text-align: left !important;    /* Alineación a la izquierda */
}

/* En vista de PC, el campo de búsqueda ocupará solo el espacio necesario */
div.dataTables_filter input {
    width: auto;                    /* El campo de búsqueda tiene un ancho automático */
    padding-left: 10px;              /* Espaciado interno en el input */
}

/* En vista responsiva (pantallas pequeñas), el campo de búsqueda ocupará todo el ancho */
@media (max-width: 768px) {
    div.dataTables_filter {
        display: block;              /* Cambia a block para que ocupe todo el ancho */
        width: 100%;                 /* Ocupa el 100% del ancho disponible */
        float: none !important;      /* Elimina el float */
        text-align: left !important; /* Mantiene la alineación a la izquierda */
        margin-left: 0 !important;   /* Sin margen izquierdo */
    }

    /* El input de búsqueda ocupará el 100% del ancho */
    div.dataTables_filter input {
        width: 100% !important;      /* El input de búsqueda ocupará todo el ancho disponible */
    }
}

/* Ocultar las flechas de ordenamiento (ascendente y descendente) */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background: none !important;  /* Quitar el fondo que contiene las flechas */
    background-image: none !important;  /* Elimina las imágenes de las flechas */
    color: inherit !important;  /* Mantener el color del texto de las cabeceras */
}

/* Opcional: Si deseas quitar el cursor de 'ordenar' (flecha) al pasar sobre las cabeceras */
table.dataTable thead th {
    cursor: pointer !important;  /* Deja el cursor como un puntero, indicando que la columna es ordenable */
}

/* Si deseas evitar que se vea cualquier otra indicación de que la columna está ordenable */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    color: inherit !important;  /* Mantener el color del texto del encabezado */
    font-weight: normal !important;  /* Si no quieres que se vea el cambio en el peso de la fuente */
}

.color_rojo {
  color:red;
}

.color_verde {
  color:green;
}

.dataTables_scrollBody {
    overflow-y: auto !important;
}

.input-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9e9e9e;
  font-size: 0.9rem;
  pointer-events: none;
}

.responsive-img {
  max-width: 100%;
  height: auto;
}

.foto {
  width: 200px;
  height: 200px;
  object-fit: cover; /* o "contain", dependiendo del efecto que desees */
  display: block;
  margin: 0 auto;
  border-radius: 4px; /* opcional: bordes redondeados */
}

@media (max-width: 600px) {
  .formulario-centrado {
    width: 100%;
  }
}

.input-field input.input-fecha-corta {
    width: 150px !important; 
}

.select-dropdown.dropdown-content {
  max-height: 300px !important; /* Ajusta según necesites */
  overflow-y: auto !important;
}

.odometro {
  width: 300px;
  height: 200px;
  margin: auto;
}
.zona {
  stroke-width: 20;
}
.needle {
  stroke-width: 4;
  stroke-linecap: round;
}

table.dataTable th.center-align,
table.dataTable td.center-align {
  text-align: center !important;
}

a.active {
  color: #FFFFFF !important;
  padding: 2px 8px; /* Ajuste de tamaño */
  border-radius: 30px; /* Bordes redondeados */
  /*margin-top: 5px;*/ /* Espacio superior */
  position: relative; /* Asegura que no se superponga */
  z-index: 10; /* Prioriza sobre otros elementos */
  background-color: #1EDBD4 !important; /* Mantén el color al hacer hover */
  color: #FFFFFF !important;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}

.custom-card {
    padding: 8px;
    box-sizing: border-box;
    width: 14.2857%; /* 100% / 7 for PC */
}

/* Tablet (4 cards) */
@media (max-width: 992px) {
    .custom-card {
        width: 25%; /* 4 per row */
    }
}

/* Mobile (2 cards) */
@media (max-width: 600px) {
    .custom-card {
        width: 50%; /* 2 per row */
    }
}

/* Extra small (1 card) */
@media (max-width: 400px) {
    .custom-card {
        width: 100%;
    }
}

.left-align{
    padding-left: 15px !important;
}

.custom-icon {
  color: #5E2E98;
}

.input-field>label{
    color: #5E2E98 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #5E2E98 !important; 
}

.dropdown-content li>a,.dropdown-content li>span {
    color: #5E2E98 !important;
}

.modal-title-black{
    color: #000000 !important;
    background-color: transparent !important;
}

.btn, .btn-large, .btn-small{
    background-color: #5E2E98 !important;
}

.tabs .tab a{
    color: #5E2E98 !important;
    font-weight:  bold !important;
}

html, body {
  overflow: visible;
  position: relative;
}

#resultados {
  max-height: none;
  display: block;
}

.oculto-temporal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.oculto-temporal.visible {
  visibility: visible;
  opacity: 1;
}

.error-box h3 {
  color: red !important;
}

.materialboxed.active {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  object-fit: contain !important;
  z-index: 1000 !important;
}

.unidad {
  font-weight: bold;
  color: #555;
  font-size: 0.9em;
}

.card .card-content {
    padding: 10px !important;
    border-radius: 0 0 2px 2px !important; 
}

.card {
  border-radius: 12px !important;
}

.card-panel {
  border-radius: 12px !important;
}

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px !important;
}

/* Contenedor general */
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
}

/* Botones a la derecha */
.dataTables_wrapper .dt-buttons {
    float: right !important;
}

/* Buscador a la izquierda */
.dataTables_wrapper .dataTables_filter {
    float: left !important;
    width: auto !important;
}

/* Contenedor general */
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
}

/* Botones a la derecha */
.dataTables_wrapper .dt-buttons {
    float: right !important;
}

/* Buscador a la izquierda */
.dataTables_wrapper .dataTables_filter {
    float: left !important;
    width: auto !important;
}

/* Ajustar el input del buscador */
.dataTables_wrapper .dataTables_filter input {
    width: 200px !important; /* Ajusta según tu gusto */
}

/* INPUT */
.filled-in {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* LABEL */
.filled-in + label {
    position: relative !important;
    padding-left: 25px !important;
    cursor: pointer !important;
    display: inline-block !important;
    height: 18px !important;
    line-height: 18px !important;
    pointer-events: auto !important;
}

/* CUADRO DEL CHECKBOX */
.filled-in + label:after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #26a69a !important;
    border-radius: 2px !important;
    background-color: transparent !important;
    z-index: 1 !important;
    pointer-events: none !important; /* CRÍTICO */
}

/* CUANDO ESTÁ MARCADO */
.filled-in:checked + label:after {
    background-color: #26a69a !important;
    border-color: #26a69a !important;
}

/* Estado inicial: colapsado (solo íconos visibles) */
.sidenav.sidenav-fixed {
  transform: translateX(-105%) !important; /* oculta el ancho completo */
  width: 60px !important;                  /* deja visibles solo los íconos */
  overflow: hidden !important;
}

/* Al hacer hover, se expande sobre el contenido */
.left-sidebar:hover .sidenav.sidenav-fixed {
  transform: translateX(0) !important;
  width: 240px !important; /* ancho normal del menú */
}

.brand-logo .text .light-logo {
    font-size: 18px;
    font-weight: bold;
    color: #FFF; /* ajusta color */
    vertical-align: middle;
    margin-left: 10px; /* espacio respecto al icono */
}


/********* STEPS *************************/

#example-basic .steps > ul{
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 10px;
}

#example-basic .steps > ul > li{
  width: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
}

/* Quita la barra de botones (Anterior/Siguiente/Finalizar) */
#example-basic .actions{
  display: none !important;
}

/* Quita el número de cada step */
#example-basic .steps .number{
  display: none !important;
}

#example-basic .steps a{
  padding-left: 14px !important; /* ajusta a tu gusto */
}

.wizard > .content > .body
{
    padding: 1% !important;
}

/* En la columna "Inscritos": input + unidad en la misma línea */
#example-basic table td:nth-child(3) input[type="text"]{
  display: inline-block !important;
  width: 80px;                 /* respeta tu ancho */
  margin: 0 8px 0 0 !important;/* evita saltos por márgenes */
  vertical-align: middle;
}

#example-basic table td:nth-child(3) .unidad{
  display: inline-block !important;
  white-space: nowrap;         /* que no parta "gramos netos" */
  vertical-align: middle;
}

/* Centra la 4a columna SIN romper table layout */
#tabla-buscar tbody td:nth-child(4){
  text-align: center !important;     /* centra horizontal */
  vertical-align: middle !important;  /* centra vertical */
}

/* evita márgenes raros de inputs dentro */
#tabla-buscar tbody td:nth-child(4) input[type="text"]{
  margin: 0 !important;
}

/* Todos los steps (no actuales) con cuadro difuminado */
#example-basic .steps > ul > li:not(.current) > a{
  background: #a9cce3 !important;  /* difuminado */
  color: #fff !important;
  border-radius: 6px !important;
  opacity: 1 !important;
}

/* Step actual (activo) */
#example-basic .steps > ul > li.current > a{
  background: #2f5bff !important;  /* activo */
  color: #fff !important;
  border-radius: 6px !important;
}

/* Hover */
#example-basic .steps > ul > li > a:hover{
  opacity: .95;
}

/*************************/

/************ Menú horizontal ******/
/* ✅ Desktop: menú horizontal multinivel */
.menu-desktop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
}

.menu-desktop > li {
  position: relative;
}

.menu-desktop > li > a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 64px;              /* altura típica navbar */
  line-height: 64px;
  white-space: nowrap;
}

/* Primer nivel dropdown */
.menu-desktop .submenu {
  display: none;
  position: absolute;
  top: 64px;                 /* justo debajo del navbar */
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  z-index: 99999;
  padding: 6px 0;
}

.menu-desktop .submenu li {
  position: relative;
}

.menu-desktop .submenu a {
  display: block;
  padding: 10px 14px;
  color: #333;
  white-space: nowrap;
}

/* Mostrar dropdown al hover */
.menu-desktop > li:hover > .submenu {
  display: block;
}

/* ✅ Submenu a la derecha (2do nivel) */
.menu-desktop .submenu .submenu {
  top: 0;
  left: 100%;
}

/* Mostrar segundo nivel */
.menu-desktop .submenu li:hover > .submenu {
  display: block;
}

/* Hover */
.menu-desktop .submenu a:hover {
  background: rgba(0,0,0,.05);
}

/* ✅ PC: oculta sidebar vertical */
@media (min-width: 992px) {
  aside.left-sidebar {
    display: none !important;
  }

  /* Ajusta si tu layout deja un margen por el sidebar */
  .page-wrapper {
    margin-left: 0 !important;
  }
}

/* ✅ Móvil: NO mostrar menú desktop */
@media (max-width: 991px) {
  #menu-desktop {
    display: none !important;
  }
}

/* ===== Barra contenedora debajo del header ===== */
.desktop-menubar{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  z-index: 9998;
}

/* Si tu header es sticky/fijo, esto mantiene el menú pegado debajo */
@media (min-width: 992px){
  .desktop-menubar{
    position: sticky;
    top: 64px; /* Ajusta si tu header mide distinto */
  }
}

/* ===== Menú horizontal base ===== */
.menu-desktop{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 14px;
  list-style: none;
}

/* Cada item top-level */
.menu-item{
  position: relative;
}

/* Link con look “sidebar” */
.menu-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 52px;
  line-height: 52px;
  color: #2c2c2c;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2px;
}

/* Icono como el vertical */
.menu-link .custom-icon{
  font-size: 22px;
}

/* Hover estilo menú */
.menu-item:hover > .menu-link{
  background: rgba(0,0,0,.04);
}

/* “Activo” como el vertical, pero abajo (en horizontal) */
.menu-item.active > .menu-link{
  box-shadow: inset 0 -3px 0 #5e35b1; /* morado */
}

/* ===== Submenús dropdown ===== */
.submenu{
  display: none;
  position: absolute;
  left: 0;
  top: 52px;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  padding: 8px 0;
  z-index: 99999;
  list-style: none;
}

/* items dentro del dropdown */
.submenu li a{
  display: block;
  padding: 10px 14px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 13px;
}

/* hover dentro */
.submenu li a:hover{
  background: rgba(0,0,0,.05);
}

/* Mostrar dropdown al hover (PC) */
.menu-item:hover > .submenu{
  display: block;
}

/* ===== Sub-submenu (multinivel hacia la derecha) ===== */
.submenu .has-sub{
  position: relative;
}

.submenu .has-sub > .submenu{
  left: 100%;
  top: 0;
}

/* mostrar segundo nivel */
.submenu .has-sub:hover > .submenu{
  display: block;
}

/* ===== RESPONSIVE: en móvil NO mostrar barra desktop ===== */
@media (max-width: 991px){
  .desktop-menubar{ display:none !important; }
}

/* ===== PC: ocultar sidebar vertical ===== */
@media (min-width: 992px){
  aside.left-sidebar{ display:none !important; }
  .page-wrapper{
    margin-left: 0 !important; /* por si tu layout dejaba hueco del sidebar */
  }
}

/* Menú pegado debajo del header fijo */
@media (min-width: 992px){
  .desktop-menubar{
    position: sticky;
    top: 64px;        /* <- altura del header (ajústalo si tu topbar es otra) */
    z-index: 9999;
  }
}
/******************************************/

/* ===== MENÚ HORIZONTAL (PC) ===== */
.desktop-menubar{
  width: 100%;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  position: relative;
  z-index: 9999; /* para que no quede detrás */
}

/* UL principal horizontal */
.menu-desktop{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 14px;
  list-style: none;
}

/* items top */
.menu-desktop > li{
  position: relative;
}

/* links top */
.menu-desktop > li > a{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  line-height: 52px;
  padding: 0 14px;
  color: #2c2c2c;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

/* hover top */
.menu-desktop > li:hover > a{
  background: rgba(0,0,0,.05);
}

/* ===== Submenú dropdown ===== */
.menu-desktop .submenu{
  display: none;
  position: absolute;
  left: 0;
  top: 52px;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  padding: 8px 0;
  list-style: none;
  z-index: 99999;
}

/* mostrar al hover */
.menu-desktop > li:hover > .submenu{
  display: block;
}

/* links dentro */
.menu-desktop .submenu li a{
  display: block;
  padding: 10px 14px;
  color: #333;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  white-space: nowrap;
}

.menu-desktop .submenu li a:hover{
  background: rgba(0,0,0,.06);
}

/* ===== Sub-submenu (multinivel a la derecha) ===== */
.menu-desktop .submenu .has-sub{
  position: relative;
}

.menu-desktop .submenu .has-sub > .submenu{
  left: 100%;
  top: 0;
}

.menu-desktop .submenu .has-sub:hover > .submenu{
  display: block;
}

/* SOLO escritorio */
@media (min-width: 993px) {

  /* 1) Menú horizontal fijo debajo del header */
  #menu-desktop.menu-desktop{
    position: fixed;
    top: 64px;            /* <-- altura del header (ajusta si tu header mide distinto) */
    left: 0;
    right: 0;
    z-index: 998;         /* header normalmente está más arriba */
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  /* 2) Deja espacio para que el contenido no quede tapado por el menú */
  .page-wrapper{
    padding-top: 55px;    /* <-- aprox. alto del menú (ajusta a tu gusto) */
  }
}

/* =========================
   MENÚ HORIZONTAL (DESKTOP)
   look & feel como el sidenav
   ========================= */
@media (min-width: 993px) {

  /* barra principal */
  #menu-desktop.menu-desktop{
    display: flex;
    gap: 6px;
    align-items: center;

    background: #1f2633;                 /* oscuro */
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);

    padding: 0 10px;
    height: 52px;                         /* alto del menú */
  }

  /* items de primer nivel */
  #menu-desktop.menu-desktop > li{
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* links principales */
  #menu-desktop.menu-desktop > li > a{
    color: #fff !important;
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 0 14px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
  }

  /* iconitos (Material Icons) */
  #menu-desktop.menu-desktop > li > a i.material-icons{
    color: #fff !important;
    font-size: 20px;
    line-height: 1;
    margin: 0 !important;                 /* quita margin-left de .left */
  }

  /* hover y activo */
  #menu-desktop.menu-desktop > li:hover > a{
    background: rgba(255,255,255,.10);
  }

  /* opcional: marca activo */
  #menu-desktop.menu-desktop a.active{
    background: rgba(156, 39, 176, .35);  /* morado tipo tu UI */
  }

  /* -------------------------
     SUBMENÚ (dropdown)
     ------------------------- */
  #menu-desktop .submenu{
    display: none;
    position: absolute;
    top: 52px;                            /* mismo alto del menú */
    left: 0;

    background: #1f2633;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    min-width: 260px;
    padding: 8px 0;
    z-index: 9999;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
  }

  /* mostrar al pasar mouse */
  #menu-desktop > li:hover > .submenu{
    display: block;
  }

  /* links del submenu */
  #menu-desktop .submenu li a{
    color: #fff !important;
    padding: 10px 14px;
    display: block;
    white-space: nowrap;
    font-weight: 500;
  }

  #menu-desktop .submenu li a:hover{
    background: rgba(255,255,255,.10);
  }

  /* sub-sub menú (multinivel) */
  #menu-desktop .submenu li.has-sub{
    position: relative;
  }

  #menu-desktop .submenu li.has-sub > .submenu{
    top: 0;
    left: 100%;
    margin-left: 6px;
  }

  /* flechita visual en items con submenú */
  #menu-desktop > li > a::after{
    content: "▾";
    font-size: 12px;
    margin-left: 6px;
    opacity: .85;
  }
  #menu-desktop > li:not(:has(.submenu)) > a::after{
    content: "";
  }
}

@media (min-width: 993px){
  #menu-desktop .submenu li a{
    display:flex;
    align-items:center;
    gap:10px;
  }
  #menu-desktop .submenu li a i.material-icons{
    font-size:18px;
    color:#fff !important;
  }
  /* 1) Que el submenu se pegue exactamente al item (sin hueco) */
  #menu-desktop.menu-desktop > li > .submenu{
    top: calc(100% - 1px);   /* en vez de top: 52px; */
  }

  /* 2) Puente invisible entre menú y submenu (evita que se “corte” el hover) */
  #menu-desktop.menu-desktop > li > .submenu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-10px;               /* sube el puente hacia el menú */
    height:10px;             /* tamaño del puente */
    background:transparent;
  }

  /* 3) Extra: si también se corta al entrar al sub-submenú (CONFIGURACIÓN) */
  #menu-desktop .submenu li.has-sub > .submenu{
    margin-left: 0;          /* quita el hueco lateral */
    left: 100%;
    top: 0;
  }

  /* puente lateral entre submenú y sub-submenú */
  #menu-desktop .submenu li.has-sub > .submenu::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-10px;              /* puente hacia la izquierda */
    width:10px;
    background:transparent;
  }
}

@media (min-width: 993px) {
  /* ✅ ABRIR SUB-SUBMENÚ (2do nivel) */
  #menu-desktop .submenu li.has-sub:hover > .submenu{
    display: block;
  }

  /* recomendable para que no “recorte” el sub-submenu */
  #menu-desktop .submenu{
    overflow: visible;
  }

  /* opcional: asegura que el item padre quede “encima” */
  #menu-desktop .submenu li.has-sub{
    position: relative;
  }
}

@media (min-width: 993px){

  /* ===== Mega dropdown (2 columnas) SOLO para PREFERENCIAS ===== */
  #menu-desktop.menu-desktop > li.mega-2col > .submenu{
    display: none;              /* se mantiene oculto por default */
    width: 560px;               /* ajusta a tu gusto */
    padding: 12px;
  }

  #menu-desktop.menu-desktop > li.mega-2col:hover > .submenu{
    display: grid;              /* aquí se vuelve 2 columnas */
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: start;
  }

  /* Cada item ocupa toda su fila dentro de su columna */
  #menu-desktop.menu-desktop > li.mega-2col > .submenu > li{
    width: 100%;
  }

  /* ===== CONFIGURACIÓN: mostrar “inline” dentro del mega dropdown ===== */
  /* quitamos el comportamiento de sub-submenu hacia la derecha SOLO aquí */
  #menu-desktop.menu-desktop > li.mega-2col .submenu li.has-sub > .submenu{
    position: static;        /* ya no vuela a la derecha */
    display: grid;           /* siempre visible dentro de su bloque */
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 6px 10px;
    margin: 6px 0 0 0;
    padding: 6px 0 0 0;

    border: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
  }

  /* El título "CONFIGURACIÓN ▸" se verá como encabezado */
  #menu-desktop.menu-desktop > li.mega-2col .submenu li.has-sub > a{
    font-weight: 700;
    opacity: .95;
    padding-bottom: 6px;
  }

  /* quita el “puente” lateral en este caso (porque ya no hay flyout) */
  #menu-desktop.menu-desktop > li.mega-2col .submenu li.has-sub > .submenu::before{
    display: none;
  }
}

@media (min-width: 993px){

  /* ====== MEGA MENÚ (2 columnas) SOLO para PREFERENCIAS ====== */
  #menu-desktop > li.mega-preferencias > .submenu{
    /* cuando NO está hover, sigue oculto */
    display: none;

    /* convierte el dropdown en 2 columnas */
    width: 620px;                 /* ajusta a gusto */
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;

    /* importante: no absoluto de sub-submenus aquí */
    position: absolute;
  }

  /* al hover, mostramos como GRID (no block) */
  #menu-desktop > li.mega-preferencias:hover > .submenu{
    display: grid;
  }

  /* Opcional: el item CONFIGURACIÓN se queda en columna 2 */
  #menu-desktop > li.mega-preferencias > .submenu > li.has-sub{
    grid-column: 2;
  }

  /* ====== SUB-SUBMENÚ de CONFIGURACIÓN: oculto hasta hover ====== */
  #menu-desktop > li.mega-preferencias > .submenu > li.has-sub > .submenu{
    /* CLAVE: ocultarlo (esto corrige que se vea siempre) */
    display: none;

    /* que NO sea un dropdown flotante, sino parte de la columna */
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 10px 0 0 0 !important;

    /* quitamos “caja” de submenu para que se vea integrado */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  /* al pasar mouse en CONFIGURACIÓN, mostrar sus opciones EN 2 columnas */
  #menu-desktop > li.mega-preferencias > .submenu > li.has-sub:hover > .submenu{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
  }

  /* Links del sub-submenú con look & feel y “celdas” */
  #menu-desktop > li.mega-preferencias > .submenu > li.has-sub > .submenu li a{
    padding: 10px 14px !important;
    border-radius: 10px;
  }

  #menu-desktop > li.mega-preferencias > .submenu > li.has-sub > .submenu li a:hover{
    background: rgba(255,255,255,.10);
  }
}
@media (min-width: 993px){

  /* El mega-menú debe permitir que el sub-submenú salga hacia la derecha */
  #menu-desktop.menu-desktop > li > .submenu{
    overflow: visible;
  }

  /* ✅ CONFIGURACIÓN: su submenú NO debe empujar el layout del mega-menú */
  #menu-desktop .submenu li.has-sub{
    position: relative; /* referencia para el submenu hijo absolute */
  }

  /* Oculto por defecto + fuera del flujo (cuadro independiente) */
  #menu-desktop .submenu li.has-sub > .submenu{
    display: none !important;
    position: absolute !important;
    left: 100% !important;   /* adyacente a la derecha */
    top: 0 !important;
    margin-left: 0 !important; /* sin separación */
    min-width: 260px;

    /* mismo look & feel */
    background: #1f2633;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 8px 0;
    z-index: 10000;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
  }

  /* Mostrar sólo al pasar mouse por CONFIGURACIÓN */
  #menu-desktop .submenu li.has-sub:hover > .submenu{
    display: block !important;
  }

  /* (Opcional) puente invisible lateral para que no se corte el hover
     si te llega a pasar al moverte al sub-submenú */
  #menu-desktop .submenu li.has-sub > .submenu::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-10px;
    width:10px;
    background:transparent;
  }
}
@media (min-width: 993px){

  /* ====== 1) MEGA MENÚ (solo primer nivel) a 2 columnas ====== */
  #menu-desktop.menu-desktop > li > ul.submenu{
    /* importante: que permita que el sub-submenú salga */
    overflow: visible;

    /* si tu mega-menú lo muestras con hover, aquí NO lo cambies.
       Solo definimos el layout cuando ya está visible */
  }

  /* cuando se muestra el mega-menú, lo ponemos a 2 columnas (GRID) */
  #menu-desktop.menu-desktop > li:hover > ul.submenu{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    column-gap: 22px;
    row-gap: 6px;
    align-content: start;
  }

  /* cada item del mega-menú ocupa su celda */
  #menu-desktop.menu-desktop > li > ul.submenu > li{
    position: relative;
  }

  /* ====== 2) SUB-SUBMENÚ (CONFIGURACIÓN) SIEMPRE fuera a la derecha ====== */

  /* el LI que contiene CONFIGURACIÓN será el “ancla” */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub{
    position: relative;
  }

  /* el UL hijo (submenu de configuración) NO debe ser grid item visible dentro */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub > ul.submenu{
    display: none !important;          /* oculto por defecto */
    position: absolute !important;     /* fuera del flujo */
    left: 100% !important;             /* a la derecha del mega-menú */
    top: 0 !important;
    margin-left: 0 !important;

    /* look & feel */
    background: #1f2633;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 260px;
    z-index: 10000;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);

    /* IMPORTANTÍSIMO: este panel NO debe ser grid */
    display: none !important;
  }

  /* mostrar SOLO cuando pasas el mouse por "CONFIGURACIÓN" */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub:hover > ul.submenu{
    display: block !important;
  }

  /* puente invisible lateral para que no se corte el hover */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub > ul.submenu::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-10px;
    width:10px;
    background:transparent;
  }

  /* opcional: que el link de CONFIGURACIÓN se vea como item con flecha */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub > a::after{
    content: "▸";
    margin-left: auto;
    opacity: .85;
  }
}
@media (min-width: 993px){

  /* ===== FORZAR ESTILO del SUB-SUBMENÚ (CONFIGURACIÓN) ===== */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub > ul.submenu{
    background: #1f2633 !important;
    background-color: #1f2633 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.35) !important;

    /* limpia estilos típicos que a veces mete Materialize */
    margin: 0 !important;
    list-style: none !important;
  }

  /* que ningún LI meta fondo blanco */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub > ul.submenu > li{
    background: transparent !important;
  }

  /* links en blanco dentro del sub-submenú */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub > ul.submenu > li > a{
    color: #fff !important;
  }

  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub > ul.submenu > li > a:hover{
    background: rgba(255,255,255,.10) !important;
  }
}
/*********************************/
/* =========================
   DESKTOP: sin hamburguesa
   y header siempre “completo”
   ========================= */
@media (min-width: 993px){

  /* 1) Oculta SOLO el toggle de escritorio (hamburguesa) */
  .topbar .nav-toggle{
    display: none !important;
  }

  /* 2) Asegura que el logo/nombre siempre se vean (no se “encogen”) */
  .topbar .brand-logo{
    position: relative !important;   /* evita hacks de posicionamiento */
    left: 0 !important;
    transform: none !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    max-width: none !important;
  }

  /* 3) Evita que el header cambie su layout aunque el sidebar “abra/cierre” */
  body.menu-open .topbar .brand-logo,
  body.sidebar-open .topbar .brand-logo{
    /* si tu JS agrega clases al body, con esto neutralizas el colapso */
    transform: none !important;
    width: auto !important;
  }

  /* (opcional) si tu tema mueve el header al abrir sidebar */
  body.menu-open .topbar,
  body.sidebar-open .topbar{
    padding-left: 0 !important;
  }
}
/* ==========================================
   DESKTOP (PC): header completo + sin hamburger
   ========================================== */
@media (min-width: 993px){

  /* Oculta SOLO el toggle de escritorio */
  .topbar .nav-toggle{
    display:none !important;
  }

  /* Header en modo flex para que NO se “pierdan” Conectados/Logout */
  .topbar nav .nav-wrapper{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  /* Logo/NOMBRE: que deje de ser absolute y no tape el resto */
  .topbar nav .brand-logo{
    position:static !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }

  /* Asegura que los UL se vean y se alineen */
  .topbar nav ul.left,
  .topbar nav ul.right{
    position:static !important;
    float:none !important;
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    height:auto !important;
  }

  /* “Conectados” se queda visible */
  .topbar nav ul.left{
    gap:14px;
    flex:1 1 auto;                /* ocupa el espacio central */
    justify-content:flex-start;
  }
  .topbar nav .drop-title{
    display:block !important;
  }

  /* Logout siempre a la derecha */
  .topbar nav ul.right{
    flex:0 0 auto;
    margin-left:auto !important;
  }

  /* Evita que clases del sidebar modifiquen el header en desktop */
  body.menu-open .topbar,
  body.sidebar-open .topbar{
    padding-left:0 !important;
  }
}
/* ==========================================
   FIX: El link del logo NO debe cubrir el header
   ========================================== */
@media (min-width: 993px){

  /* 1) El logo/link solo mide lo que contiene (no se estira) */
  .topbar nav .brand-logo{
    position: static !important;
    width: auto !important;
    max-width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    z-index: 1;
  }

  /* 2) El wrapper en flex (por si tu tema lo cambia) */
  .topbar nav .nav-wrapper{
    display:flex !important;
    align-items:center !important;
  }

  /* 3) Que “Conectados” y Logout queden arriba del logo (clickeables) */
  .topbar nav ul.left,
  .topbar nav ul.right{
    position: relative !important;
    z-index: 5 !important;
  }

  /* 4) (Opcional) si el cursor aún se ve como link en zonas vacías */
  .topbar nav, .topbar nav .nav-wrapper{
    cursor: default;
  }
  .topbar nav a{
    cursor: pointer;
  }
}
/* ==========================================
   DESKTOP: Logo + empresa SÍ clickeables
   (sin cubrir todo el header)
   ========================================== */
@media (min-width: 993px){

  /* Nav no “se siente” link */
  .topbar nav,
  .topbar nav .nav-wrapper{
    cursor: default !important;
  }

  /* ✅ El logo SÍ es link */
  .topbar nav a.brand-logo{
    position: static !important;
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;

    pointer-events: auto !important;   /* ✅ vuelve a ser clickeable */
    cursor: pointer !important;
    z-index: 2 !important;
  }

  .topbar nav a.brand-logo *{
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Layout normal del header */
  .topbar nav .nav-wrapper{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Asegura que ULs sigan clickeables */
  .topbar nav ul.left,
  .topbar nav ul.right{
    position: relative !important;
    z-index: 5 !important;
  }

  /* Logout como link (obvio) */
  .topbar nav ul.right a{
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

@media (min-width: 993px){
  /* +20px de ancho visual para logo + nombre */
  .topbar nav .brand-logo{
    padding-right: 20px !important;
  }
}
@media (min-width: 993px){

  /* Asegura que el 2do nivel (panel de CONFIGURACIÓN) deje salir al 3er nivel */
  #menu-desktop.menu-desktop > li > ul.submenu > li.has-sub > ul.submenu{
    overflow: visible !important;
  }

  /* ========== 3er NIVEL (dentro del panel de CONFIGURACIÓN) ========== */
  /* Los LI que tengan hijos dentro del 2do nivel */
  #menu-desktop.menu-desktop
    > li > ul.submenu
    > li.has-sub > ul.submenu
    > li.has-sub{
    position: relative;
  }

  /* El UL hijo (3er nivel) sale a la derecha */
  #menu-desktop.menu-desktop
    > li > ul.submenu
    > li.has-sub > ul.submenu
    > li.has-sub > ul.submenu{
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin-left: 0 !important;

    background: #1f2633;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 260px;
    z-index: 11000;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
  }

  /* Mostrar al hover */
  #menu-desktop.menu-desktop
    > li > ul.submenu
    > li.has-sub > ul.submenu
    > li.has-sub:hover > ul.submenu{
    display: block !important;
  }

  /* Puente invisible para que no se “corte” el hover */
  #menu-desktop.menu-desktop
    > li > ul.submenu
    > li.has-sub > ul.submenu
    > li.has-sub > ul.submenu::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-10px;
    width:10px;
    background:transparent;
  }

  /* Flechita para items que abren 3er nivel */
  #menu-desktop.menu-desktop
    > li > ul.submenu
    > li.has-sub > ul.submenu
    > li.has-sub > a::after{
    content: "▸";
    margin-left: auto;
    opacity: .85;
  }
}
/***************************************************/
/* =========================================================
   FIX: Título (.page-titles) queda tapado en modo PC
   (header + barra horizontal son fixed)
   ========================================================= */
@media (min-width: 993px){

  /* 1) Empuja el contenido hacia abajo para que NO quede bajo el header/menú */
  .page-wrapper{
    /* Ajusta si tu topbar es más alto/bajo.
       52px (topbar aprox) + 52px (menú horizontal) + 20px separación */
    padding-top: 0px !important;
  }

  /* 2) Asegura que el bloque del título esté “encima” y visible */
  .page-titles{
    position: relative !important;
    z-index: 20 !important;

    /*background: #fff !important;   /* evita que se vea tras algo */
    opacity: 1 !important;
    filter: none !important;

    padding: 10px 14px !important;
    border-radius: 10px;
  }

  .page-titles h4{
    color: #5E2E98 !important;
    opacity: 1 !important;
  }
}
/**********************************************/
/* =========================================================
   FIX: Línea blanca (seam) entre TOPBAR y MENÚ al hacer scroll
   ========================================================= */
@media (min-width: 993px){

  /* Ajusta si tu header/menú tienen otra altura */
  :root{
    --topbar-h: 64px;     /* header superior */
    --menubar-h: 52px;    /* barra de menú horizontal */
  }

  /* Asegura header sólido y sin borde/sombra que genere “línea” */
  header.topbar{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    z-index: 10050 !important;
  }
  header.topbar nav{
    height: 100% !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    background-clip: padding-box;
  }

  /* Menú horizontal: que arranque pegado al header (sin gap) */
  .desktop-menubar{
    position: fixed !important;
    top: calc(var(--topbar-h) - 1px) !important; /* <- SOLAPA 1px */
    left: 0; right: 0;
    height: var(--menubar-h);
    margin: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    z-index: 10040 !important;
    background: #1f2633; /* el color de tu barra */
  }

  /* “Tapa costura” por si algún navegador deja 1px blanco */
  .desktop-menubar::before{
    content:"";
    position:absolute;
    top:-1px; left:0; right:0;
    height:1px;
    background:#1f2633;
  }

  /* El contenido baja exactamente lo necesario (y no más) */
  .page-wrapper{
    padding-top: calc(var(--topbar-h) + var(--menubar-h) + 12px) !important;
  }
}
/**********************************************/
/* Asegura que los íconos del sidenav SIEMPRE se vean */
#slide-out .collapsible-header > i.material-icons,
#slide-out .collapsible-header > i.material-icons.custom-icon{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 28px !important;      /* ancho típico de icono */
  min-width: 28px !important;
  margin-right: 10px !important;
  float: none !important;
  position: static !important;
  line-height: inherit !important;
}

/* Por si SOLO falla CONFIGURACIÓN */
#submenu_9 > a > i.material-icons{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/*******************************************************/
/* =========================================================
   FIX móvil: evitar salto de línea entre ícono y texto
   (sidenav responsivo)
   ========================================================= */
@media (max-width: 992px){

  /* Links del menú lateral */
  #slide-out a,
  #slide-out .collapsible-header{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Iconos */
  #slide-out i.material-icons,
  #slide-out i.custom-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-right: 12px !important;  /* separación icono-texto */
    flex: 0 0 auto !important;
  }

  /* Texto */
  #slide-out .hide-menu,
  #slide-out .nav-text{
    display: inline-block !important;
    line-height: 1.2 !important;
    flex: 1 1 auto !important;
    min-width: 0; /* evita cosas raras con flex */
  }
}
/******************************************************************/
/* Mantén el menú por debajo de modales */
header.topbar,
.desktop-menubar{
  z-index: 2000 !important;
  position: relative; /* o fixed si así lo usas */
}

/* Sube tu modal personalizado mucho más arriba */
#modalInfo,
#modalMsg,
#modalAviso,
#modalConfirmacion,
#modalError{
  z-index: 20000 !important;
  position: fixed !important;
}
/*******************************************************************/
/* Modal Confirmación: respeta colores azul/rojo de Materialize */
#modalConfirmacion .modal-footer .btn.blue{
  background-color: #2196F3 !important; /* azul Materialize */
}

#modalConfirmacion .modal-footer .btn.red{
  background-color: #F44336 !important; /* rojo Materialize */
}

/* Cuando BORRAR está deshabilitado, que sí se vea deshabilitado */
#modalConfirmacion .modal-footer .btn[disabled]{
  background-color: #bdbdbd !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}
/**************************************************************/
/* =========================================================
   CENTRAR TODOS LOS MODALS (base + overrides por pantalla)
   ========================================================= */

.modal,
#modalError,
#modalMsg,
#modalAviso,
#modalInfo,
#modalConfirmacion{
  position: fixed !important;

  /* Posición */
  top: 20% !important;                 /* si quieres más centrado: 50% */
  left: 50% !important;
  right: auto !important;              /* por si algún estilo mete right */
  transform: translate(-50%, -50%) !important;

  /* Apilado (encima del menú horizontal y cualquier header) */
  z-index: 99999 !important;

  /* Tamaños seguros */
  max-width: 600px !important;
  width: 50% !important;               /* respeta tu idea general */
  min-width: 300px !important;
  box-sizing: border-box !important;
}

/* Ajuste vertical en PC (si lo quieres un poco más abajo/arriba) */
@media (min-width: 993px){
  .modal,
  #modalError,
  #modalMsg,
  #modalAviso,
  #modalInfo,
  #modalConfirmacion{
    top: 25% !important;               /* prueba 25%–35% */
  }
}
/****************************************************************/
/* Solo en PC (pantallas grandes) */
@media screen and (min-width: 1024px) {
  h4 {
    margin-top: 0px; /* se sobrescribe solo en escritorio */
  }
}
/**************************************************************/
/* 50% centrado */
.page-wrapper .wrap-50{
  width: 50%;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Tablet */
@media (max-width: 1200px){
  .page-wrapper .wrap-50{
    width: 70%;
    max-width: 70%;
  }
}

/* Móvil */
@media (max-width: 992px){
  .page-wrapper .wrap-50{
    width: 100%;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*************************************************************/
/* Modal Agregar Alumno - look gris suave */
#modalAgregarAlumno.modal{
  background: #f5f6f8 !important; /* gris suave */
  border-radius: 12px;
}

#modalAgregarAlumno .modal-content{
  background: transparent !important;
}

#modalAgregarAlumno .modal-footer{
  background: #f5f6f8 !important;
  border-top: 1px solid rgba(0,0,0,.08);
}
/***************************************************************/