/*BANNER SIDEBAR*/
    /* BANNER PARA MÓVILES */
    @media (max-width: 767.98px) {
        .banner_sidebar {
            background-image: url(/img/BannerAMGMovil.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/BannerAMGPC.png);
            background-repeat: repeat-y;
            background-size: contain;
            height: 100%;
            width: 100%;
            position: relative;
        }

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

    .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 — Dark theme (global)
       ========================================= */

    .pagination {
        gap: .25rem;
        flex-wrap: wrap;
    }

    /* Todos los botones */
    .pagination .page-link {
        background: rgba(20, 24, 33, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        border-radius: 8px !important;
        padding: .45rem .9rem;
        font-size: .8rem;
        font-weight: 600;
        line-height: 1.4;
        transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
        backdrop-filter: blur(6px);
    }

    /* Hover */
    .pagination .page-link:hover {
        background: rgba(136, 20, 20, 0.25) !important;
        border-color: rgba(136, 20, 20, 0.45) !important;
        color: #f97171 !important;
        box-shadow: none;
    }

    /* Página activa */
    .pagination .page-item.active .page-link,
    .pagination .page-item.active .page-link:hover {
        background: #881414 !important;
        border-color: #881414 !important;
        color: #fff !important;
        box-shadow: 0 4px 14px rgba(136, 20, 20, 0.45) !important;
    }

    /* Deshabilitado (primera/última flecha cuando no hay más páginas) */
    .pagination .page-item.disabled .page-link {
        background: rgba(20, 24, 33, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.04) !important;
        color: rgba(255, 255, 255, 0.2) !important;
        cursor: not-allowed;
    }

    /* Foco accesible */
    .pagination .page-link:focus {
        box-shadow: 0 0 0 3px rgba(136, 20, 20, 0.3) !important;
        outline: none;
    }


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

    /* Estilos modernos y legibles para la tabla del modal de participaciones */
    #participacionesTable thead th {
        background-color: #2b3035 !important;
        color: #ffffff !important;
        text-transform: uppercase;
        font-size: 0.75rem !important;
        letter-spacing: 0.08em;
        font-weight: 700 !important;
        border-bottom: 2px solid #323539 !important;
        border-top: none !important;
        padding: 8px 10px !important;
        vertical-align: middle !important;
    }

    #participacionesTable tbody td {
        padding: 8px 10px !important;
        vertical-align: middle !important;
        border-bottom: 1px solid #f1f3f5 !important;
        font-size: 0.85rem !important;
    }

    /* Evitar que Posición y Puntos se rompan o solapen */
    #participacionesTable td:nth-child(1),
    #participacionesTable td:nth-child(4),
    #participacionesTable th:nth-child(1),
    #participacionesTable th:nth-child(4) {
        white-space: nowrap !important;
    }

    /* Permitir que la Carrera y el Evento se envuelvan en varias líneas sin cortar palabras */
    #participacionesTable td:nth-child(2),
    #participacionesTable td:nth-child(3),
    #participacionesTable th:nth-child(2),
    #participacionesTable th:nth-child(3) {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Optimización específica para pantallas de móvil */
    @media (max-width: 576px) {
        #participacionesTable thead th,
        #participacionesTable tbody td {
            padding: 6px 4px !important;
            font-size: 0.75rem !important;
        }
    }

    /* Cabeceras en mayúsculas de la tabla principal de resultados, equipos y club más participativo */
    #resultadosLiga-table thead th,
    #resultadosEquipos-table thead th,
    #resultadosClubMasParticipativo-table thead th {
        text-transform: uppercase;
        font-size: 0.75rem !important;
        letter-spacing: 0.08em;
        font-weight: 700 !important;
    }

    /* Estilización genérica para cualquier tabla en la modal de participaciones */
    #participacionesModal table thead th {
        background-color: #2b3035 !important;
        color: #ffffff !important;
        text-transform: uppercase;
        font-size: 0.75rem !important;
        letter-spacing: 0.08em;
        font-weight: 700 !important;
        border-bottom: 2px solid #323539 !important;
        border-top: none !important;
        padding: 8px 10px !important;
        vertical-align: middle !important;
    }

    #participacionesModal table tbody td {
        padding: 8px 10px !important;
        vertical-align: middle !important;
        border-bottom: 1px solid #f1f3f5 !important;
        font-size: 0.85rem !important;
    }

    /* Para tablas de modal de 3 columnas (como la modal de equipos) */
    #participacionesModal table:not(#participacionesTable) td:nth-child(1),
    #participacionesModal table:not(#participacionesTable) td:nth-child(3),
    #participacionesModal table:not(#participacionesTable) th:nth-child(1),
    #participacionesModal table:not(#participacionesTable) th:nth-child(3) {
        white-space: nowrap !important;
    }

    #participacionesModal table:not(#participacionesTable) td:nth-child(2),
    #participacionesModal table:not(#participacionesTable) th:nth-child(2) {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Optimización móvil para cualquier tabla de la modal */
    @media (max-width: 576px) {
        #participacionesModal table thead th,
        #participacionesModal table tbody td {
            padding: 6px 4px !important;
            font-size: 0.75rem !important;
        }
    }

    /* ==========================================
       HORUS SPORT DESIGN SYSTEM & MODERN STYLES
       ========================================== */
    
    body {
        font-family: 'Inter', sans-serif !important;
        background-color: #0b0d10 !important;
        color: #f3f4f6 !important;
        font-size: 0.95rem;
    }

    h1, h2, h3, h4, h5, h6, 
    .navbar-brand, 
    .nav-link, 
    .btn, 
    .nav-underline .nav-link {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
    }

    /* Brand Colors & Custom Navbar */
    .bg-dark-custom {
        background-color: rgba(11, 13, 16, 0.9) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    }

    .nav-link-custom {
        color: #9ca3af !important;
        font-size: 0.9rem;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: all 0.25s ease;
        padding: 0.5rem 1rem !important;
    }

    .nav-link-custom:hover, 
    .nav-link-custom.active,
    .nav-link-custom:focus {
        color: #ffffff !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

    .btn-brand-red {
        background-color: #e00f1b !important;
        border: 1px solid #e00f1b !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.06em;
        border-radius: 4px;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }

    .btn-brand-red:hover {
        background-color: #ff2a2a !important;
        border-color: #ff2a2a !important;
        color: #ffffff !important;
        box-shadow: 0 0 20px rgba(224, 15, 27, 0.5);
        transform: translateY(-2px);
    }

    /* Redefine original red buttons */
    .btn-danger, .bg-red, .btn-red {
        background-color: #e00f1b !important;
        border-color: #e00f1b !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .btn-danger:hover, .bg-red:hover, .btn-red:hover {
        background-color: #ff2a2a !important;
        border-color: #ff2a2a !important;
        box-shadow: 0 0 20px rgba(224, 15, 27, 0.4);
    }

    /* Hero section */
    .hero-section {
        background: linear-gradient(135deg, rgba(224, 15, 27, 0.22) 0%, rgba(11, 13, 16, 0.85) 70%),
                    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        position: relative;
        overflow: hidden;
    }

    .hero-title {
        font-size: 2.8rem;
        font-weight: 800 !important;
        line-height: 1.15;
        background: linear-gradient(to right, #ffffff 40%, #f3f4f6 70%, #ff5252 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Underline Navigation Custom */
    .nav-underline .nav-link {
        color: #9ca3af !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.85rem;
        border-bottom: 2px solid transparent;
        transition: all 0.3s ease;
    }

    .nav-underline .nav-link.active {
        color: #e00f1b !important;
        border-bottom-color: #e00f1b !important;
    }

    .nav-underline .nav-link:hover {
        color: #ffffff !important;
    }

    /* Cards - Premium Glassmorphism Product Card */
    .card-cover {
        background-color: rgba(24, 28, 36, 0.65) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 12px !important;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        position: relative;
    }

    .card-cover:hover {
        transform: translateY(-8px);
        border-color: rgba(224, 15, 27, 0.35) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
    }

    .card-cover a {
        color: #ffffff !important;
    }

    /* General clean cards */
    .card {
        background-color: rgba(20, 24, 30, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #f3f4f6 !important;
        border-radius: 12px !important;
    }

    .card-body {
        padding: 1.75rem !important;
    }

    /* Tables design */
    .table {
        color: #e5e7eb !important;
        --bs-table-bg: transparent !important;
        --bs-table-border-color: rgba(255, 255, 255, 0.08) !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, 0.02) !important;
    }

    .table thead th {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        font-size: 0.8rem !important;
        letter-spacing: 0.06em;
        background-color: rgba(20, 24, 30, 0.95) !important;
        color: #ffffff !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
    }

    .table tbody td, .table tbody th {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 1rem 0.75rem !important;
    }

    /* Custom sidebar components */
    .liga-hover {
        background-color: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        color: #ffffff !important;
        transition: all 0.3s ease;
    }

    .liga-hover:hover {
        background-color: rgba(224, 15, 27, 0.1) !important;
        border-color: #e00f1b !important;
        transform: scale(1.02);
    }

    #sidebar h5 {
        color: #ffffff !important;
        font-size: 1.1rem;
        letter-spacing: 0.02em;
    }

    .list-group-item-action {
        background-color: transparent !important;
        color: #9ca3af !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.25s ease;
    }

    .list-group-item-action:hover {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
    }

    /* Footer adjustments */
    .footer-custom {
        background-color: #080a0c !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .nav-link-footer {
        font-size: 0.85rem;
        transition: color 0.2s ease;
    }

    .nav-link-footer:hover {
        color: #e00f1b !important;
    }

    /* Input text formatting */
    .form-control, .form-select {
        background-color: rgba(17, 22, 28, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    .form-control:focus, .form-select:focus {
        border-color: #e00f1b !important;
        box-shadow: 0 0 10px rgba(224, 15, 27, 0.2) !important;
    }