/* =========================
       📊 TABLA JUGADORES
    ========================= */

    #tablaJugadores {
        table-layout: fixed;
        width: 100%;
    }

    #tablaJugadores th {
        text-align: right;
        cursor: pointer;
    }

    #tablaJugadores th:nth-child(1),
    #tablaJugadores td:nth-child(1) {
        width: 10%;
    }

    #tablaJugadores th:nth-child(2),
    #tablaJugadores td:nth-child(2) {
        width: 10%;
    }

    #tablaJugadores th:nth-child(3),
    #tablaJugadores td:nth-child(3) {
        width: 60%;
    }

    #tablaJugadores th:nth-child(4),
    #tablaJugadores td:nth-child(4) {
        width: 20%;
    }
    #tablaJugadores a,
    #tablaJugadores a:visited,
    #tablaJugadores a:hover,
    #tablaJugadores a:active {
        color: #1E9FF2;
        text-decoration: none;
    }

    #tablaJugadores tbody,
    #tablaJugadores thead {
        width: 100%;
        display: inline-table;
    }

    #tablaJugadores_filter {
        width: 100%;
    }

    /* hover */
    #tablaJugadores tbody tr:hover {
        background-color: #f5f7fa;
        cursor: pointer;
    }

    /* fila seleccionada */
    #tablaJugadores tbody tr.fila-activa {
        background-color: #e2edff80;
    }

    #tablaJugadores tbody tr {
        transition: background 0.2s ease;
    }

    /* =========================
       🔍 SEARCH
    ========================= */

    .bodyPrincipal .search-wrapper {
        display: none;
    }

    .search-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
        padding: 20px 0;
    }

    .search-wrapper input {
        width: 300px;
        max-width: 100%;
        padding: 10px 20px 10px 43px;
        border-radius: 30px;
        border: none;
        background: #f5f7fa;
        font-size: 14px;
    }

    .search-wrapper input:focus {
        border: none;
    }

    .search-wrapper i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #a6a6a6;
        font-size: 14px;
    }

    /* =========================
       📦 DATATABLE FIXES
    ========================= */

    table.dataTable,
    .dataTables_wrapper,
    .dataTables_scrollHeadInner,
    .dataTables_scrollBody table {
        width: 100% !important;
    }

    .dataTables_scrollBody {
        min-height: 300px !important;
        overflow: visible !important;
    }

    /* =========================
       🎨 ELEMENTOS
    ========================= */

    .breadcrumbs-top {
        margin: 0 0 10px 0;
    }

    td a {
        display: flex;
        align-items: center;
    }

    .avatar {
        width: 40px !important;
        height: 40px !important;
        margin: 4px 8px;
    }

    .avatar.top10 {
        width: 48px !important;
        height: 48px !important;
        margin: 0 16px 0 0;
    }

    .avatar.f {
        border: 2px #ff37e6 solid;
    }

    .posicion {
        min-width: 24px;
    }

    .ico-jugador {
        opacity: 0.2;
        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(3000%) hue-rotate(180deg) brightness(90%) contrast(100%);
        border: none !important;
    }

    .ico-jugador.f {
        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(3000%) hue-rotate(320deg) brightness(90%) contrast(100%);
    }

    .detalles {
        display: none;
    }

    /* =========================
       📱 MOBILE
    ========================= */

    @media (max-width: 767.98px) {

        .breadcrumbs-top {
            display: none !important;
        }

        .detalles {
            display: flex;
            margin: 4px 0;
        }

        .detalles .badge {
            font-size: 8px;
            font-weight: bold;
        }

        #cardRanking .card-body {
            padding: 0;
        }

        .search-wrapper input {
            width: 80%;
        }

        .search-wrapper label {
            width: 90%;
            padding: 0;
        }

        .search-wrapper {
            margin: 0;
        }

        .dataTable th {
            text-align: left;
        }

        #tablaJugadores small {
            display: flex !important;
        }
    }