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

        .banner_sidebar a {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

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

    /* Añadido para quitar espacio blanco en el banner de RDLF*/
    .col-banner {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .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 CONSULTA INSCRIPCIONES EN BODY */
    .th-sin-derivar {
        -webkit-touch-callout: none;  /* Desactiva menú contextual en iOS */
        -webkit-user-select: none;    /* Evita que se seleccione en iOS */
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none;         /* Evita que sea clickeable */
    }


    /* 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;
    }

    /* CARRERAS LIGAS */
    .carreraLigaCard {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: block;
        text-decoration: none;
        color: inherit;
        background-color: black;
        color:white;
    }

    .carreraLigaCard:hover {
        transform: scale(1.05);
        background-color: #881414 !important;
    }


    /* 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-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;
        }
    }

    /* TABLA RESULTADOS-LIGA */

    

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

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

    #resultadosLiga-table th,
    #resultadosLiga-table td {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        vertical-align: middle !important;
        text-align: center;
    }

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

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

    #resultadosEquipos-table th,
    #resultadosEquipos-table td {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        vertical-align: middle !important;
        text-align: center;
    }

    /* Se usa en la tabla modal de clasifications Ligas, para marcar de rojo las que no contarían para la suma de puntos */
    .fila-roja td{
        color: #fd0000 !important;
    }

    .marcoPodio {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 12px;
        font-size: 14px;
        gap: 5px;
    }

    .gold {
        background-color: #ffd700; /* Oro */
        color: black;
    }
    
    .silver {
        background-color: #c0c0c0; /* Plata */
        color: black;
    }
    
    .bronze {
        background-color: #cd7f32; /* Bronce */
        color: black;
    }

    /* Evita redirecciones de google maps en móvil */
    #participacionesTable td {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    

    /* Esto hace que en móviles el buscador de datatables se vea mejor */
    @media (max-width: 768px) {
        .dataTables_filter input {
            border: 1px solid #ccc !important;
            background-color: #fff !important;
            padding: 5px !important;
            border-radius: 5px !important;
        }
    }


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

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

        #resultadosEquipos-table th,
        #resultadosEquipos-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;
        }
    }

    /* Usado para inscripciones en lista de espera*/
    .solo-lectura {
        background-color: #e9ecef !important;
        border-color: #ced4da;
        color: #6c757d;
        cursor: not-allowed;
    }

    /*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 */

    .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);
    }

    .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);
    }



    @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;
        }
    }