/* FORM CURSO ESPECIALIDADE - Listas que ocupan el 100% */
    .curso-contenido {
        width: 100%; /* Asegura que el contenedor del card ocupe todo el ancho */
    }

    .dual-listbox {
        display: flex;
        justify-content: center;
        width: 100%; /* Ocupa todo el ancho disponible */
    }

    .dual-listbox__container {
        display: flex;
        width: 100%; /* Ocupa el ancho total */
        gap: 10px; /* Espacio entre columnas */
    }

    .dual-listbox__container > div {
        flex: 1; /* Distribuye el espacio uniformemente */
    }

    .dual-listbox__available,
    .dual-listbox__selected {
        width: 100%; /* Ocupa todo el ancho disponible */
        max-height: 300px; /* Ajusta la altura si es necesario */
        overflow-y: auto; /* Permite scroll si hay muchos elementos */
        padding: 10px;
        border: 1px solid #ccc;
        
    }

    .dual-listbox__buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px; /* Espacio entre botones */
    }

    /* TABLA DE ALUMNOS DE SOLICITUDES */
    #tabla-alumnos {
        border-collapse: separate; /* Cambiar de collapse a separate */
        border-spacing: 0; /* Eliminar espacios entre bordes */
        width: 100%;
    }
    
    #tabla-alumnos th, #tabla-alumnos td {
        border: none; /* Eliminar todos los bordes */
        padding: 8px;
        text-align: center;
    }
    
    #tabla-alumnos thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6; /* Borde solo debajo del encabezado */
    }
    
    #tabla-alumnos tbody tr {
        border-bottom: 1px solid #dee2e6; /* Borde inferior entre filas */
    }
    
    #tabla-alumnos tbody tr:last-child {
        border-bottom: 2px solid #000; /* Borde más fuerte en la última fila */
    }
    
    .eliminar-alumno {
        border: none; /* Quitar bordes del botón */
        color: white;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
    }

    /* TABLA DE HORARIOS NO LECTIVOS */
    #tabla-horarios {
        border-collapse: separate; /* Igual que alumnos */
        border-spacing: 0;
        width: 100%;
    }

    #tabla-horarios th,
    #tabla-horarios td {
        border: none;
        padding: 8px;
        text-align: center; /* 👈 centrado de columnas */
    }

    #tabla-horarios thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6; /* Borde bajo el encabezado */
    }

    #tabla-horarios tbody tr {
        border-bottom: 1px solid #dee2e6; /* Línea entre filas */
    }

    #tabla-horarios tbody tr:last-child {
        border-bottom: 2px solid #000; /* Borde más fuerte al final */
    }

    .eliminar-horario {
        border: none;
        color: white;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
    }
    

    /* CALENDAR */

    #calendar {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
        color: black;
      }

      .fc-daygrid-day-number {
        color: inherit !important;
        text-decoration: none !important;
        pointer-events: none !important;
    }
    
    .fc-col-header-cell{
        background: #000045;
    }

    .fc-col-header-cell a {
        text-decoration: none !important;
        pointer-events: none !important;
        color: white !important; /* 🔹 Cambia el color de los nombres de los días a negro */
        font-weight: bold; /* Opcional: hace el texto más resaltado */
    }

   
    /* Aplica el fondo azul en la vista de mes, semana y día */
    .fc-day-today {
        background-color: #e8f3ff !important; /* Azul clarito para hoy */
    }

    /* Aplica el fondo azul en la vista de semana y día */
    .fc-day-today .fc-daygrid-day-frame {
        background-color: #e8f3ff !important; /* Azul clarito para hoy */
    }

    /* Estilo para el día actual en la vista de semana */
    .fc-day-today .fc-timegrid-col-frame {
        background-color: #e8f3ff !important; /* Azul clarito para hoy */
    }

    /* Estilo para el día actual en la vista de día */
    .fc-day-today .fc-timegrid-day-frame {
        background-color: #e8f3ff !important; /* Azul clarito para hoy */
    }

    /* Asegura que el número del día se vea bien sobre el fondo azul */
    .fc-day-today .fc-daygrid-day-number,
    .fc-day-today .fc-timegrid-day-number {
        color: black !important; /* Número en color negro */
    }

    /* Asegura que los eventos no cubran el fondo azul */
    .fc-day-today .fc-daygrid-day-events,
    .fc-day-today .fc-timegrid-events {
        z-index: 5; /* Si hay eventos, asegura que no cubran el fondo */
    }

    #external-events .fc-event {
        margin: 10px 0;
        padding: 4px;
        background: #3788d8;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }

    .fc-event-title {
        cursor: pointer; /* Cambia el puntero sobre los eventos */
    }

    /* ESTILOS DE PLANESTUDIOS > EDITAR > CURRÍCULO */
    .tabla-matriz { width:100%; border-collapse:collapse; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#fff; }
    .tabla-matriz th, .tabla-matriz td { border:1px solid #ddd; padding:6px 8px; vertical-align:middle; background:#fff; }
    .tabla-matriz thead .group { background:#5B5E62; color:#fff; text-align:center; }
    .tabla-matriz th.nivel { text-align:center; width:60px; font-weight:600; }
    .tabla-matriz td.center { text-align:center; }
    .dot { display:inline-block; width:12px; height:12px; border-radius:2px; }

    /* ESTILOS DE ALUMNOS > MATRÍCULA */
    .checks-estado .form-check {
        display: flex;               /* input + label en línea */
        align-items: center;
        gap: .35rem;                 /* separa un poco del checkbox */
        margin-bottom: .25rem;       /* menos espacio vertical */
    }
    .checks-estado .form-check-label {
        display: inline-flex !important; /* pisa posibles 'block' del x-label */
        white-space: nowrap;             /* evita salto de línea */
        align-items: center;
    }

    /* ESTILO DE ALUMNOS > HORARIOS */
    /* 🔹 Compactamos las filas y mejoramos legibilidad */
    #tabla-horario {
        border-collapse: collapse;
        font-size: 0.75rem; /* texto más pequeño */
    }

    #tabla-horario th,
    #tabla-horario td {
        padding: 2px 3px; /* menos espacio interno */
        vertical-align: top;
        border: none !important;
    }

    #tabla-horario thead th {
        font-weight: 600;
        font-size: 0.7rem;
        white-space: nowrap;
        padding: 4px 3px;
    }

    #tabla-horario .text-muted {
        font-size: 0.65rem;
        white-space: nowrap;
        padding-right: 2px;
    }

    #tabla-horario td {
        position: relative;
    }

    /* 🔹 Celdas del horario más finas */
    .celda {
        position: relative;
        height: 40px; /* antes 80px */
        background: #f9fafb;
        border-radius: 4px;
        transition: background-color 0.2s;
    }

    /* efecto sutil al pasar el ratón */
    .celda:hover {
        background-color: #f1f3f5;
    }

    /* 🔹 Bloque de clase más legible pero compacto */
    .bloque-clase {
        position: absolute;
        left: 5%;
        width: 90%;
        background-color: #0d6efd;
        color: #fff;
        border-radius: 3px;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.1s ease-in-out, background-color 0.2s;
        padding: 0 2px;
    }

    .bloque-clase:hover {
        transform: scale(1.03);
        background-color: #0b5ed7;
    }

    /* 🔹 Primer tramo */
    .bloque-clase.primer {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    /* 🔹 Último tramo */
    .bloque-clase.final {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    /* 🔹 Tramos intermedios (continúan la clase) */
    .bloque-clase.continuacion {
        border-radius: 0;
        box-shadow: none;
        margin-top: -2px; /* solapa 1px con el anterior */
        pointer-events: auto;
    }

    /* Reaplica el redondeo solo abajo en el último tramo */
    .bloque-clase.continuacion.final {
    border-radius: 0 0 3px 3px;
    }

    /* 🔹 Texto */
    .bloque-clase span {
        padding: 0 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }




    /* =================== LINEADESALIDA =================== */
    
    /*BANNER SIDEBAR*/
    /* BANNER PARA MÓVILES */
    @media (max-width: 767.98px) {
        .banner_sidebar {
            background-image: url(/img/senda2.png);
            /* Opcional: diferente en móvil */
            background-repeat: repeat-x;
            background-size: 40%;
            width: 100%;
            padding-top: 9%;
        }
    }

    /* BANNER PARA ESCRITORIOS */
    @media (min-width: 768px) {
        .banner_sidebar {
            background-image: url(/img/senda.png);
            background-repeat: repeat-y;
            background-size: contain;
            height: auto;
            width: 100%;
        }
    }

    .ancho_enlace_sidebar {
        width: 100%;
        height: 100%;
    }

    .ancho_logo {
        width: 150px;
    }

    /* CARRITO */
    /* Estilo para la barra superior */
    .top-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #05ac02;
        /* Color de fondo */
        padding: 10px 20px;
        border-bottom: 1px solid #05ac02;
        width: 100%;
        position: fixed;
        z-index: 1000;
        margin-top: 4em;
    }

    /* Estilo para el carrito */
    .cart {
        position: relative;
        /* Establece un contenedor relativo */
        display: flex;
        align-items: center;
    }

    .cart-link {
        text-decoration: none;
        color: #ffffff;
        font-size: 1rem;
        display: flex;
        align-items: center;
    }

    .cart-icon {
        width: 24px;
        height: 24px;
        margin-right: 5px;
    }

    .cart-text {
        font-weight: bold;
    }

    /*CONTADOR*/
    .cuadroCarrito {
        background: rgb(255, 255, 255);
        width: 45px;
        height: 45px;
        border-radius: 5px;

    }

    .numeroCarrito {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: large;
    }

    .letrasCarrito {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: xx-small;
    }

    /* Estilo para el contador del carrito */
    .cart-count {
        position: absolute;
        top: -5px;
        /* Ajusta la posición vertical */
        right: -10px;
        /* Ajusta la posición horizontal */
        background-color: #D61D1D;
        color: white;
        border-radius: 20%;
        padding: 1px 5px;
        font-size: 0.7rem;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        /* Evita que el texto se rompa */
    }

    /* FOOTER - abajo*/
    /*Clase que se aplica al bodyNoColumnas para que en tamaños pequeños el card no se superponga con el footer*/

    @media (min-width: 768px) {

        /* Tamaño md o mayor */
        .altura_bodyNC_md {
            height: 110vh;
        }

    }

    /* BREADCRUMB Pasos inscripción */

    .breadcrumb-custom .breadcrumb-item {
        position: relative;
        flex-grow: 1;
        padding: .5rem 2rem;
    }

    .breadcrumb-custom .breadcrumb-item::before {
        display: none;
    }

    .paso1.active::after {
        position: absolute;
        top: 50%;
        right: -25px;
        z-index: 1;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        content: "";
        background-color: var(--bs-tertiary-bg);
        border-top-right-radius: .5rem;
        box-shadow: 1px -1px var(--bs-border-color);
        transform: scale(.707) rotate(45deg);
        background-color: #881414;
    }

    .paso2.active::after {
        position: absolute;
        top: 50%;
        right: -25px;
        z-index: 1;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        content: "";
        background-color: var(--bs-tertiary-bg);
        border-top-right-radius: .5rem;
        box-shadow: 1px -1px var(--bs-border-color);
        transform: scale(.707) rotate(45deg);
        background-color: #881414;
    }

    .breadcrumb-custom .breadcrumb-item:first-child {
        padding-left: 1.5rem;
    }

    .breadcrumb-custom .breadcrumb-item:last-child {
        padding-right: 1.5rem;
    }

    .breadcrumb-custom .breadcrumb-item:last-child::after {
        display: none;
    }

    .breadcrumb-item.active {
        background-color: #881414;
        color: #ffffff;

    }

    /* VISTA CARRERA */
    /* Estilos para el texto de la descripción */
    .descripcion-carrera {
        position: relative;
        max-height: 3em;
        /* Asegúrate de que esto sea suficiente para 2 líneas */
        overflow: hidden;
        display: -webkit-box;
        /* Para soporte de múltiples líneas en WebKit */
        -webkit-box-orient: vertical;
        line-clamp: 2;
        /* Muestra solo 2 líneas */
    }

    /* Mostrar el texto completo cuando se expande */
    .descripcion-carrera.expanded {
        max-height: none;
        display: block;
        white-space: normal;
    }

    /* Estilos para el texto de la descripción extra */
    .descripcion-info-extra {
        position: relative;
        max-height: 3em;
        /* Asegúrate de que esto sea suficiente para 2 líneas */
        overflow: hidden;
        display: -webkit-box;
        /* Para soporte de múltiples líneas en WebKit */
        -webkit-box-orient: vertical;
        line-clamp: 2;
        /* Muestra solo 2 líneas */
    }

    /* Mostrar el texto completo cuando se expande */
    .descripcion-info-extra.expanded {
        max-height: none;
        display: block;
        white-space: normal;
    }

    /* Contenedor para centrar el botón */
    .text-center-btn {
        display: flex;
        justify-content: center;
        /* Centra horizontalmente */
        margin-top: 10px;
        /* Espacio opcional arriba del botón */
    }

    /* Estilos para el botón */
    .toggle-btn {
        border: none;
        border-radius: 5px;
        /* Bordes redondeados opcional */
        padding: 5px 10px;
        /* Espaciado interno del botón */
        cursor: pointer;
        font-size: 14px;
        /* Tamaño de la fuente */
        color: #333;
        /* Color del texto */
    }

    /* Estilos para el texto del botón según estado */
    .toggle-btn.show-more {
        background: #eee;
    }

    .toggle-btn.show-less {
        background: #eee;
    }

    /* Contador */
    .cuadro {
        background: rgb(255, 255, 255);
        width: 45px;
        height: 45px;
        border-radius: 5px;

    }

    .numero {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: large;
    }

    .letras {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: x-small;
    }

    /* Vista con video de las inscripciones */
    .video-container {
        position: relative;
        flex: 1;
        /* Asegura que el contenedor del video tome el espacio restante en el contenedor flex */
        width: 100%;
        /* Ocupa todo el ancho disponible */
        height: auto;
        /* Ajusta la altura automáticamente */
        border-radius: .375rem;
        /* Redondea los bordes del contenedor */
        overflow: hidden;
        /* Asegura que el video no sobresalga del contenedor */
    }

    .video-background {
        width: 100%;
        /* Ocupa todo el ancho del contenedor */
        height: 100%;
        /* Ocupa toda la altura del contenedor */
        object-fit: cover;
        /* Cubre el contenedor sin distorsionar el video */
        border-radius: .375rem;
        /* Redondea los bordes del video */
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        /* Fondo oscuro con opacidad del 50% */
        border-radius: .375rem;
        /* Redondea los bordes del overlay */
        z-index: 1;
        /* Asegura que el overlay esté encima del video */
    }

    .btn-usuarios {
        position: absolute;
        z-index: 2;
        /* Asegura que el botón esté encima del overlay */
    }

    /* FIN PÁGINA DETALLE DE CARRERA*/


    /*BOTÓN SLIDER ACEPTO/NOACEPTO*/

    .switch {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 17px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked+.slider {
        background-color: #881414;
    }

    input:focus+.slider {
        box-shadow: 0 0 1px #881414;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 17px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    /*PÁGINA PRINCIPAL*/
    /*Imagen fondo cards*/
    .background_card {
        background-size: 400px 400px;
        background-repeat: no-repeat;

    }

    /* BOTON LIGAS EN BODY */
    .custom-padding {
        padding-top: 30px;
    }

    @media (min-width: 768px) {

        /* Punto de interrupción para md */
        .custom-padding {
            padding-top: 60px;
        }
    }

    .liga-hover {
        background-color: #881414;
        color: white;
        transition: transform 0.3s ease, background-color 0.3s ease;
        cursor: pointer;
    }

    .liga-hover:hover {
        background-color: #a51b1b;
    }

    /* NOTICIAS*/

    .hoverNoticias:hover .row {
        background-color: #eee;
    }

    .enlace_post a {
        color: #881414;
        text-decoration: none;
    }

    /* PAGINACIÓN NOTICIAS */

    .estiloPaginacion .pagination .page-item.active .page-link {
        background-color: #881414;
        /* Cambia el fondo del item activo */
        border-color: #881414;
        /* Cambia el borde del item activo */
        color: #fff;
        /* Cambia el color del texto */
    }

    .estiloPaginacion .pagination .page-link {
        color: #881414;
        /* Color del texto de los enlaces */
    }

    .estiloPaginacion .pagination .page-link:hover {
        background-color: #e6e6e6;
        /* Color de fondo en hover */
        border-color: #ddd;
        /* Color del borde en hover */
    }

    .estiloPaginacion .pagination .page-item.active .page-link:hover {
        background-color: #6d0f0f;
        /* Color de fondo en hover cuando está activo */
        border-color: #6d0f0f;
        /* Color del borde en hover cuando está activo */
    }

    /* FORM CONTACTO*/
    .bg-blue {
        background-color: #0009b5 !important;
        color: white;
    }

    .blue {
        color: #0009b5;
        text-decoration: none;
    }

    .text-white{
        color: white;
    }

    .bg-red {
        background-color: #881414 !important;
        color: white;
    }

    .red {
        color: #881414;
        text-decoration: none;
    }

    a.red:hover {
        color: #D61D1D;
    }

    /* TABLA CLASIFICACIONES */


    #clasificacion-table thead tr {
        border-bottom: 2px solid #e0e0e0;
        /* Borde más grueso para la cabecera */
    }

    #clasificacion-table tbody tr {
        border-bottom: 1px solid #e0e0e0;
        /* Borde gris claro debajo de cada fila */
    }

    #clasificacion-table th,
    #clasificacion-table td {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        /* Espaciado interno */
        text-align: center;
    }

    /* Tamaño de fuente reducido para pantallas más pequeñas */
    @media (max-width: 768px) {

        /* md equivale a 768px */
        #clasificacion-table th,
        #clasificacion-table td {
            font-size: 0.8rem;
            /* Tamaño reducido */
            text-align: center;
        }
    }

/* MENÚ ORGANIZADOR */
    .menu-ajustado {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    @media (max-width: 768px) {

        .menu-ajustado {
            font-size: 12px;
            gap: 10px;
            flex-direction: column;
        }

        .menu-ajustado .nav-item {
            margin-bottom: 5px;
        }

        .menu-ajustado .nav-link {
            padding: 0;
        }

        /* Menú hamburguesa */
        .navbar-toggler {
            border-color: transparent;
        }

        .navbar-toggler-icon {
            background-color: #333;
        }
    }

    @media (min-width: 769px) {

        .menu-ajustado {
            flex-direction: row;
        }

        .menu-ajustado .nav-item {
            margin-bottom: 0;
        }
    }

    /*COMIENZA EL CSS PARA DISPOSITIVOS DE TAMAÑO MEDIO*/
    /* Medium devices (tablets, 768px and up)*/
    @media screen and (min-width: 768px) {

        .ancho_logo {
            width: 220px;
        }

    }

    /*COMIENZA EL CSS PARA DISPOSITIVOS DE TAMAÑO GRANDE*/
    /*Large devices (desktops, 992px and up)*/
    @media screen and (min-width: 992px) {

        /*HEADER*/

        .ancho_logo {
            width: 280px;
        }

    }


    /* PRUEBAS CSS LOGIN */

    .degradado {
        /* fallback for old browsers */
        background: #004cff;

        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to right, #0022ff, #0c00bb, #140076, #000045);

        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient(to right, #0022ff, #0c00bb, #140076, #000045);
    }
    
    .color-degradado {
        /* fallback for old browsers */
        background: #fccb90;

        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to right, #ee7724, #D61D1D, #881414, #500707);

        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient(to right, #ee7724, #D61D1D, #881414, #500707);
    }

    .degradadoViejo {
        /* fallback for old browsers */
        background: #fccb90;

        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to right, #ee7724, #D61D1D, #881414, #500707);

        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient(to right, #ee7724, #D61D1D, #881414, #500707);
    }



    @media (min-width: 769px) {
        .degradado {
            border-top-left-radius: .3rem;
            border-bottom-left-radius: .3rem;
        }
    }

    @media (max-width: 990px) {
        .degradado {
            border-top-right-radius: .3rem;
            border-top-left-radius: .3rem;
        }
    }