/* Estilos generales */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #001f3f;
    background-image:
        radial-gradient(at 15% 85%, rgba(0, 200, 255, 0.75) 0px, transparent 60%),
        radial-gradient(at 70% 20%, rgba(0, 100, 255, 0.75) 0px, transparent 60%),
        radial-gradient(at 30% 30%, rgba(0, 150, 255, 0.75) 0px, transparent 60%),
        radial-gradient(at 50% 70%, rgba(0, 175, 255, 0.75) 0px, transparent 60%),
        radial-gradient(at 85% 50%, rgba(51, 153, 255, 0.75) 0px, transparent 60%),
        radial-gradient(at 60% 40%, rgba(0, 80, 204, 0.75) 0px, transparent 60%),
        linear-gradient(45deg, rgba(0, 40, 70, 0.5), rgba(0, 30, 60, 0.5)),
        linear-gradient(-45deg, rgba(0, 50, 80, 0.5), rgba(0, 20, 50, 0.5));
    min-height: 100vh;
    color: #000000;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.tabla{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 50px;
}

h1{
    color: white;
}

/* Estilos para la tabla */
.table-container {
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    /* Habilita el scroll horizontal dentro del contenedor */
    /* Espaciado para que no se corte el contenido */
    position: relative;
    height: 600px; /* Ajusta la altura según tus necesidades */
    border-radius: 20px;
}

.table-container::-webkit-scrollbar {
    width: 15px; /* Ancho de la barra de desplazamiento */
}

.table-container::-webkit-scrollbar-track {
    background: #2f2f2f; /* Fondo del track */
    
}

.table-container::-webkit-scrollbar-thumb {
    background: #ffffff; /* Color del thumb */
    border-radius: 2px; /* Bordes redondeados */
}

table::-webkit-scrollbar-thumb:hover {
    background: #181818; /* Color del thumb al pasar el mouse */
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: rgb(233, 233, 233);
    
}

thead {
    background-color: #000000;
    color: #000000;
    position: -webkit-sticky; /* Para navegadores WebKit */
    position: sticky;
    top: 0; /* Fija el encabezado en la parte superior del contenedor */
    z-index: 1; /* Asegura que el encabezado esté por encima de las filas */
    
}

th,
td {
    
    padding: 8px;
    text-align: center;
    min-width: 120px; /* Establece un ancho mínimo para cada celda */
    
}

.tier4 td, .tier4 th{
    border: 1px solid #0051ff;
    background-color: #0051ff60;
}
.tier5 td, .tier5 th{
    border: 1px solid #ff0000;
    background-color: #ff000063;
}
.tier6 td, .tier6 th{
    border: 1px solid #ff7300;
    background-color: #ff73005e;
}
.tier7 td, .tier7 th{
    border: 1px solid #c4c116;
    background-color: #c4c1165d;
}
.tier8 td, .tier8 th{
    border: 1px solid #a3a7b1;
    background-color: #a3a7b15e;
}



tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #000000;
}





th {
    background-color: #ffffff;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}

.table-container {
    overflow-x: auto;
}

@media (max-width: 600px) {
    .table-container {
        overflow-x: scroll;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    th,
    td {
        width: 100%;
        box-sizing: border-box;
    }

    th,
    td {
        text-align: right;
    }

    th::before,
    td::before {
        float: left;
        font-weight: bold;
        content: attr(data-label);
    }
}


@media (max-width: 600px) {
    table thead {
        display: none;
    }

    table,
    table tbody,
    table tr,
    table td {
        display: block;
        width: 100%;
    }

    table tr {
        margin-bottom: 15px;
    }

    table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: bold;
        text-align: left;
    }
}