/* ===== DASHBOARD MODERNO - TARJETAS MEJORADAS ===== */

.dashboard-card {
    display: block;
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.dashboard-card:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-gradient-start), var(--card-gradient-end));
}

.dashboard-card .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.dashboard-card .card-icon i {
    font-size: 24px;
    color: white;
}

.dashboard-card .card-content {
    position: relative;
    z-index: 1;
}

.dashboard-card .card-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-card .card-value {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.dashboard-card .card-label {
    font-size: 12px;
    color: #999;
    display: block;
}

/* Tarjetas pequeñas de tiempo */
.dashboard-card .card-icon-small {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
}

.dashboard-card .card-icon-small i {
    font-size: 24px;
    color: white;
}

.dashboard-card .card-label-small {
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.dashboard-card .card-value-large {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === COLORES POR TIPO DE TARJETA === */

/* Avisos - Amarillo/Naranja */
.card-warns {
    --card-gradient-start: #FF9F43;
    --card-gradient-end: #FF6348;
}

/* Kicks - Azul */
.card-kicks {
    --card-gradient-start: #fca311;
    --card-gradient-end: #e8940a;
}

/* CKs - Púrpura */
.card-cks {
    --card-gradient-start: #14213d;
    --card-gradient-end: #1c2f52;
}

/* PKTs - Fucsia/Rosa */
.card-pkts {
    --card-gradient-start: #fca311;
    --card-gradient-end: #e8940a;
}

/* Servicios - Verde Esmeralda */
.card-services {
    --card-gradient-start: #1DD1A1;
    --card-gradient-end: #10AC84;
}

/* Bans - Rojo */
.card-bans {
    --card-gradient-start: #EE5A6F;
    --card-gradient-end: #E84060;
}

/* Jugadores Conectados - Cyan */
.card-players {
    --card-gradient-start: #fca311;
    --card-gradient-end: #e8940a;
}

/* Tiempo Total - Naranja Vivo */
.card-playtime {
    --card-gradient-start: #FFA726;
    --card-gradient-end: #FF6F00;
}

/* Tiempo Minutos - Verde Lima */
.card-time-minutes {
    --card-gradient-start: #A8E063;
    --card-gradient-end: #56AB2F;
}

/* Tiempo Horas - Azul Cielo */
.card-time-hours {
    --card-gradient-start: #56CCF2;
    --card-gradient-end: #2F80ED;
}

/* Tiempo Días - Índigo */
.card-time-days {
    --card-gradient-start: #fca311;
    --card-gradient-end: #e8940a;
}

/* Tiempo Años - Rosa Dorado */
.card-time-years {
    --card-gradient-start: #F093FB;
    --card-gradient-end: #F5576C;
}

/* ===== SERVIDOR - ESTADÍSTICAS ===== */

/* Servidor - Jugadores Online (Cyan) */
.card-server-players {
    --card-gradient-start: #fca311;
    --card-gradient-end: #e8940a;
}

/* Servidor - Estado Online (Verde) */
.card-server-status {
    --card-gradient-start: #1DD1A1;
    --card-gradient-end: #10AC84;
}

/* Servidor - Ping (Naranja/Amarillo) */
.card-server-ping {
    --card-gradient-start: #FFA726;
    --card-gradient-end: #FF6F00;
}

/* Servidor - Conexión/Uptime (Púrpura) */
.card-server-uptime {
    --card-gradient-start: #fca311;
    --card-gradient-end: #e8940a;
}

/* ===== SERVIDOR - ACCIONES ===== */
.server-actions-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
    margin-bottom: 24px;
    position: relative;
}

.server-actions-card > .header {
    padding: 20px 28px 16px;
    margin: 0;
    background: transparent !important;
    border-bottom: 1px solid #e5e5e5;
}

.server-actions-card > .content {
    padding: 20px 28px 28px !important;
    background: transparent !important;
}

.server-actions-card .header .title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #14213d;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
}

.server-actions-card .header .title i {
    font-size: 26px;
    color: #fca311;
}

.server-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.btn-modern {
    position: relative;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-modern:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-modern:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Efecto ripple deshabilitado para botones modernos */

/* Variantes de botones modernos */
.btn-modern.btn-primary {
    background: linear-gradient(135deg, #1c2f52, #14213d);
    color: white;
}

.btn-modern.btn-success {
    background: linear-gradient(135deg, #1DD1A1, #10AC84);
    color: white;
}

.btn-modern.btn-warning {
    background: linear-gradient(135deg, #FFA726, #FF6F00);
    color: white;
}

.btn-modern.btn-danger {
    background: linear-gradient(135deg, #EE5A6F, #E84060);
    color: white;
}

.btn-modern.btn-info {
    background: linear-gradient(135deg, #1c2f52, #14213d);
    color: white;
}

/* ===== TABLA DE JUGADORES MODERNA ===== */
.players-table-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
    margin-bottom: 28px;
}

.players-table-card > .header {
    padding: 22px 28px 18px;
    margin: 0;
    background: transparent !important;
    border-bottom: 1px solid #e5e5e5;
}

.players-table-card > .content {
    padding: 20px 28px 28px !important;
    background: transparent !important;
}

.players-table-card .header .title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #14213d;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 6px;
    line-height: 1.3;
}

.players-table-card .header .title i {
    font-size: 26px;
    color: #fca311;
}

.players-count-badge {
    margin-left: auto;
    float: none;
    background: rgba(252, 163, 17, 0.08);
    color: #fca311;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(252, 163, 17, 0.35);
    box-shadow: none;
}

.players-table-card .header .category {
    color: #6b7280;
    font-size: 0.925rem;
    margin: 0;
    line-height: 1.45;
    max-width: 56ch;
}

.table-modern {
    margin-top: 15px;
}

.table-modern thead th {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: #495057;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 10px;
}

.table-modern thead th i {
    margin-right: 5px;
    font-size: 14px;
    opacity: 0.7;
}

.table-modern tbody tr.player-row {
    cursor: pointer;
    transition: all 0.3s ease;
}

.table-modern tbody tr.player-row:hover {
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.04), rgba(20, 33, 61, 0.04));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.table-modern tbody td {
    vertical-align: middle;
    padding: 12px 10px;
}

/* Badges dentro de la tabla */
.player-id {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    color: #495057;
}

.player-name {
    font-weight: 500;
    color: #333;
}

.ping-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
}

.ping-badge.ping-good {
    background: linear-gradient(135deg, #1DD1A1, #10AC84);
    color: white;
}

.ping-badge.ping-medium {
    background: linear-gradient(135deg, #FFA726, #FF6F00);
    color: white;
}

.ping-badge.ping-bad {
    background: linear-gradient(135deg, #EE5A6F, #E84060);
    color: white;
}

.playtime-badge {
    background: linear-gradient(135deg, #1c2f52, #14213d);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
}

.trust-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
}

.trust-badge.trust-high {
    background: linear-gradient(135deg, #1DD1A1, #10AC84);
    color: white;
}

.trust-badge.trust-medium {
    background: linear-gradient(135deg, #FFA726, #FF6F00);
    color: white;
}

.trust-badge.trust-low {
    background: linear-gradient(135deg, #EE5A6F, #E84060);
    color: white;
}

.no-players {
    text-align: center;
    padding: 40px !important;
    color: #6b7280;
    font-style: italic;
}

.no-players i {
    font-size: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Responsive para tabla */
@media (max-width: 991px) {
    .server-actions-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }
    
    .btn-modern {
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .players-count-badge {
        float: none;
        display: inline-block;
        margin-left: 10px;
    }
    
    .server-actions-grid {
        grid-template-columns: 1fr;
    }
    
    .table-modern thead th {
        font-size: 11px;
        padding: 8px 5px;
    }
    
    .table-modern tbody td {
        padding: 10px 5px;
        font-size: 12px;
    }
    
    .ping-badge,
    .playtime-badge,
    .trust-badge {
        padding: 3px 8px;
        font-size: 11px;
    }
}

/* === MODO OSCURO === */
body.dark-theme .dashboard-card {
    background: #14213d;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.dark-theme .dashboard-card:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

body.dark-theme .dashboard-card .card-title {
    color: #e5e5e5;
}

body.dark-theme .dashboard-card .card-label,
body.dark-theme .dashboard-card .card-label-small {
    color: rgba(229, 229, 229, 0.72);
}

/* Ajustes adicionales para tarjetas en modo oscuro */
body.dark-theme .dashboard-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Modo oscuro - Servidor y tabla */
html.dark-theme .server-actions-card,
html.dark-theme .players-table-card,
body.dark-theme .server-actions-card,
body.dark-theme .players-table-card {
    background: #14213d !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(229, 229, 229, 0.12) !important;
}

html.dark-theme .server-actions-card > .header,
html.dark-theme .server-actions-card > .content,
html.dark-theme .players-table-card > .header,
html.dark-theme .players-table-card > .content,
body.dark-theme .server-actions-card > .header,
body.dark-theme .server-actions-card > .content,
body.dark-theme .players-table-card > .header,
body.dark-theme .players-table-card > .content {
    background: transparent !important;
}

html.dark-theme .server-actions-card > .header,
html.dark-theme .players-table-card > .header,
body.dark-theme .server-actions-card > .header,
body.dark-theme .players-table-card > .header {
    border-bottom-color: rgba(229, 229, 229, 0.12);
}

html.dark-theme .server-actions-card .header .title,
html.dark-theme .players-table-card .header .title,
body.dark-theme .server-actions-card .header .title,
body.dark-theme .players-table-card .header .title {
    color: #ffffff;
}

html.dark-theme .players-table-card .header .title i,
body.dark-theme .players-table-card .header .title i {
    color: #fca311;
}

html.dark-theme .players-count-badge,
body.dark-theme .players-count-badge {
    background: #fca311;
    color: #000000;
    box-shadow: 0 4px 12px rgba(252, 163, 17, 0.14);
}

html.dark-theme .players-table-card .header .category,
body.dark-theme .players-table-card .header .category {
    color: rgba(229, 229, 229, 0.72);
}

html.dark-theme .table-modern thead th,
body.dark-theme .table-modern thead th {
    background: linear-gradient(135deg, #0a101c, #14213d);
    color: #e5e5e5;
    border-bottom-color: rgba(252, 163, 17, 0.10);
}

html.dark-theme .table-modern tbody tr.player-row:hover,
body.dark-theme .table-modern tbody tr.player-row:hover {
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.05), rgba(20, 33, 61, 0.35));
}

html.dark-theme .player-name,
body.dark-theme .player-name {
    color: #ffffff;
}

html.dark-theme .player-id,
body.dark-theme .player-id {
    background: linear-gradient(135deg, #0a101c, #1c2f52);
    color: #e5e5e5;
}

html.dark-theme .no-players,
body.dark-theme .no-players {
    color: rgba(229, 229, 229, 0.72);
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    .dashboard-card {
        margin-bottom: 15px;
        padding: 20px;
    }
    
    .dashboard-card .card-icon {
        width: 56px;
        height: 56px;
    }
    
    .dashboard-card .card-icon i {
        font-size: 28px;
    }
    
    .dashboard-card .card-value {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .dashboard-card {
        margin-bottom: 12px;
        padding: 18px;
    }
    
    .dashboard-card .card-value {
        font-size: 28px;
    }
    
    .dashboard-card .card-value-large {
        font-size: 24px;
    }
    
    /* Forzar columnas a una sola columna en móvil */
    .row > [class*="col-"] {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
}

/* === ANIMACIONES === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-card {
    animation: fadeInUp 0.5s ease-out;
}

/* Delay en las animaciones para efecto cascada */
.row > div:nth-child(1) .dashboard-card { animation-delay: 0.1s; }
.row > div:nth-child(2) .dashboard-card { animation-delay: 0.2s; }
.row > div:nth-child(3) .dashboard-card { animation-delay: 0.3s; }
.row > div:nth-child(4) .dashboard-card { animation-delay: 0.4s; }

/* === EFECTO RIPPLE DESHABILITADO === */
.dashboard-card {
    overflow: hidden;
    position: relative;
}

/* === MEJORA PARA ENLACES === */
a.dashboard-card:hover,
a.dashboard-card:focus {
    color: inherit;
    text-decoration: none;
}

/* ===== PÁGINAS DE DATOS - TABLAS GENERALES ===== */
.data-table-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
    margin-bottom: 28px;
    animation: fadeInUp 0.5s ease-out;
}

/* Cabecera y cuerpo como una sola pieza (evita el look “pegado”) */
.data-table-card > .header {
    padding: 22px 28px 18px;
    margin: 0;
    background: transparent !important;
    border-bottom: 1px solid #e5e5e5;
}

.data-table-card > .content {
    padding: 20px 28px 28px !important;
    background: transparent !important;
}

.data-table-card .header .title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #14213d;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 6px;
    line-height: 1.3;
}

.data-table-card .header .title > i:first-child {
    font-size: 26px;
    color: #fca311;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.data-table-card .header .category {
    color: #6b7280;
    font-size: 0.925rem;
    margin: 0;
    line-height: 1.45;
    max-width: 62ch;
}

.data-table-card .header .title .page-server-badge,
.players-table-card .header .title .page-server-badge,
.data-table-card .header .title span[style*="float:right"] {
    margin-left: auto;
    float: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #14213d !important;
    background: rgba(252, 163, 17, 0.06);
    border: 1px solid rgba(252, 163, 17, 0.16);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.data-table-card .table,
.players-table-card .table {
    margin-bottom: 0;
}

.data-table-card .dataTables_wrapper,
.players-table-card .dataTables_wrapper {
    margin-top: 4px;
}

.data-table-card .dataTables_wrapper .dataTables_length,
.data-table-card .dataTables_wrapper .dataTables_filter,
.players-table-card .dataTables_wrapper .dataTables_length,
.players-table-card .dataTables_wrapper .dataTables_filter {
    margin-bottom: 14px;
}

.data-table-card .dataTables_wrapper .dataTables_info,
.data-table-card .dataTables_wrapper .dataTables_paginate,
.players-table-card .dataTables_wrapper .dataTables_info,
.players-table-card .dataTables_wrapper .dataTables_paginate {
    margin-top: 16px;
    padding-top: 4px;
}

/* Modo oscuro: misma superficie, sin franjas header/body */
html.dark-theme .data-table-card,
body.dark-theme .data-table-card,
html.dark-theme .card.data-table-card,
.dark-theme .card.data-table-card {
    background: #14213d !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(229, 229, 229, 0.12) !important;
}

html.dark-theme .data-table-card > .header,
html.dark-theme .data-table-card > .content,
body.dark-theme .data-table-card > .header,
body.dark-theme .data-table-card > .content,
.dark-theme .data-table-card > .header,
.dark-theme .data-table-card > .content {
    background: transparent !important;
}

html.dark-theme .data-table-card > .header,
body.dark-theme .data-table-card > .header,
.dark-theme .data-table-card > .header {
    border-bottom: 1px solid rgba(229, 229, 229, 0.12) !important;
}

html.dark-theme .data-table-card .header .title,
body.dark-theme .data-table-card .header .title {
    color: #ffffff;
}

html.dark-theme .data-table-card .header .title > i:first-child,
body.dark-theme .data-table-card .header .title > i:first-child {
    color: #fca311;
    -webkit-text-fill-color: #fca311;
}

html.dark-theme .data-table-card .header .category,
body.dark-theme .data-table-card .header .category {
    color: rgba(229, 229, 229, 0.72);
}

html.dark-theme .data-table-card .header .title .page-server-badge,
html.dark-theme .players-table-card .header .title .page-server-badge,
html.dark-theme .data-table-card .header .title span[style*="float:right"],
body.dark-theme .data-table-card .header .title .page-server-badge,
body.dark-theme .players-table-card .header .title .page-server-badge,
body.dark-theme .data-table-card .header .title span[style*="float:right"] {
    color: #000000 !important;
    background: #fca311;
    border-color: #fca311;
}

@media (max-width: 768px) {
    .data-table-card > .header,
    .players-table-card > .header {
        padding: 18px 18px 14px;
    }

    .data-table-card > .content,
    .players-table-card > .content {
        padding: 16px 18px 20px !important;
    }

    .data-table-card .header .title,
    .players-table-card .header .title {
        font-size: 1.1rem;
    }

    .data-table-card .header .title .page-server-badge,
    .players-table-card .header .title .page-server-badge,
    .players-count-badge {
        width: 100%;
        margin-left: 0;
        text-align: center;
        justify-content: center;
    }
}

/* ===== PERFIL DE USUARIO ===== */
.user-profile-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.user-profile-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.user-profile-card .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.user-profile-card .avatar:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

.user-profile-card .title {
    margin-top: 15px;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
    font-size: 22px;
}

.user-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    margin: 8px 0;
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.03), rgba(232, 148, 10, 0.05));
    border-radius: 10px;
    transition: all 0.3s ease;
}

.user-info-item:hover {
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.05), rgba(232, 148, 10, 0.1));
}

.user-info-item i {
    font-size: 20px;
    color: #fca311;
    min-width: 24px;
}

.user-info-item .info-label {
    font-weight: 600;
    color: #555;
    min-width: 120px;
}

.user-info-item .info-value {
    color: #333;
    font-weight: 500;
}

.btn-steam {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}

/* Modo oscuro para perfil de usuario */
body.dark-theme .user-profile-card {
    background: #14213d;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .user-profile-card .title {
    color: #e5e5e5;
}

body.dark-theme .user-info-item {
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.07), rgba(232, 148, 10, 0.15));
}

body.dark-theme .user-info-item:hover {
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.10), rgba(232, 148, 10, 0.25));
}

body.dark-theme .user-info-item .info-label {
    color: #e5e5e5;
}

body.dark-theme .user-info-item .info-value {
    color: #e9ecef;
}

/* ===== PERFIL DE USUARIO MEJORADO ===== */
.user-profile-card-enhanced {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.user-profile-card-enhanced:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
}

/* Header con Avatar */
.profile-header {
    background: linear-gradient(135deg, #1c2f52 0%, #14213d 100%);
    padding: 30px 20px 25px;
    text-align: center;
    position: relative;
}

.avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.avatar-enhanced {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.avatar-enhanced:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

.avatar-ring {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
}

.profile-name {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin: 10px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Badge de Confianza Grande */
.trust-badge-large {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 32px;
    border-radius: 50px;
    margin-top: 15px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    background: white;
    min-width: 180px;
    justify-content: center;
}

.trust-badge-large i {
    font-size: 24px;
    margin-bottom: 0;
}

.trust-badge-large div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.trust-badge-large span {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.trust-badge-large small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    opacity: 0.8;
}

.trust-badge-large.trust-high {
    color: #10AC84;
}

.trust-badge-large.trust-medium {
    color: #FF6F00;
}

.trust-badge-large.trust-low {
    color: #E84060;
}

/* Estadísticas */
.profile-stats {
    padding: 20px;
    background: #f8f9fa;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin-bottom: 12px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.stat-item:hover {
    box-shadow: 0 4px 16px rgba(252, 163, 17, 0.07);
}

.stat-item:last-child {
    margin-bottom: 0;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1c2f52, #14213d);
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 24px;
    color: white;
}

.stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 600;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.stat-time {
    font-size: 13px;
    color: #fca311;
    font-weight: 500;
}

/* Identificadores */
.profile-identifiers {
    padding: 20px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.section-title i {
    font-size: 18px;
    color: #fca311;
}

.identifier-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.02), rgba(232, 148, 10, 0.03));
    border-left: 3px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.identifier-item:hover {
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.04), rgba(232, 148, 10, 0.08));
    border-left-color: #fca311;
}

.identifier-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.identifier-icon i {
    font-size: 20px;
    color: white;
}

.steam-icon {
    background: linear-gradient(135deg, #171A21, #2A475E);
}

.discord-icon {
    background: linear-gradient(135deg, #5865F2, #7289DA);
}

.license-icon {
    background: linear-gradient(135deg, #1c2f52, #14213d);
}

.identifier-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.identifier-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 600;
}

.identifier-value {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    word-break: break-all;
}

.license-text {
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

/* Botones de Acción */
.profile-actions {
    padding: 15px 20px 20px;
}

.btn-block {
    width: 100%;
}

/* Modo Oscuro - Perfil Mejorado */
body.dark-theme .user-profile-card-enhanced {
    background: #14213d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .profile-stats {
    background: #1e2c42;
}

body.dark-theme .stat-item {
    background: #14213d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-theme .stat-item:hover {
    box-shadow: 0 4px 16px rgba(252, 163, 17, 0.10);
}

body.dark-theme .stat-label {
    color: rgba(229, 229, 229, 0.72);
}

body.dark-theme .stat-value {
    color: #e9ecef;
}

body.dark-theme .stat-time {
    color: #7d9fea;
}

body.dark-theme .profile-identifiers {
    background: #14213d;
}

body.dark-theme .section-title {
    color: #e5e5e5;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .identifier-item {
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.04), rgba(232, 148, 10, 0.08));
}

body.dark-theme .identifier-item:hover {
    background: linear-gradient(90deg, rgba(252, 163, 17, 0.07), rgba(232, 148, 10, 0.15));
}

body.dark-theme .identifier-label {
    color: rgba(229, 229, 229, 0.72);
}

body.dark-theme .identifier-value {
    color: #e9ecef;
}

body.dark-theme .profile-actions {
    background: #14213d;
}

/* Responsive */
@media (max-width: 991px) {
    .avatar-enhanced {
        width: 100px;
        height: 100px;
    }
    
    .profile-name {
        font-size: 20px;
    }
    
    .trust-badge-large span {
        font-size: 20px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    .stat-icon i {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .profile-header {
        padding: 25px 15px 20px;
    }
    
    .avatar-enhanced {
        width: 90px;
        height: 90px;
    }
    
    .profile-name {
        font-size: 18px;
    }
    
    .trust-badge-large {
        padding: 10px 20px;
    }
    
    .stat-item {
        padding: 12px;
    }
    
    .identifier-item {
        padding: 10px;
    }
}

/* ===== PESTAÑAS MODERNAS ===== */
.nav-tabs {
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 20px;
}

.nav-tabs > li > a {
    border-radius: 8px 8px 0 0;
    color: #555;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-tabs > li > a:hover {
    background: linear-gradient(135deg, rgba(252, 163, 17, 0.05), rgba(232, 148, 10, 0.1));
    border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, #1c2f52, #14213d);
    color: white;
    border: none;
    font-weight: 600;
}

body.dark-theme .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .nav-tabs > li > a {
    color: #e5e5e5;
}

body.dark-theme .nav-tabs > li > a:hover {
    background: linear-gradient(135deg, rgba(252, 163, 17, 0.09), rgba(232, 148, 10, 0.2));
}

/* ===== MEJORAS DE FORMULARIOS ===== */
.tab-content {
    padding: 20px;
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-group label {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.form-control {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #fca311;
    box-shadow: 0 0 0 3px rgba(252, 163, 17, 0.05);
}

body.dark-theme .tab-content {
    background: #14213d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-theme .form-group label {
    color: #e5e5e5;
}

body.dark-theme .form-control {
    background: #1e2c42;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e9ecef;
}

body.dark-theme .form-control:focus {
    border-color: #fca311;
    background: #243447;
}

/* ===== MEJORAS RESPONSIVE ===== */
@media (max-width: 991px) {
    .user-profile-card .avatar {
        width: 100px;
        height: 100px;
    }
    
    .user-info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .user-info-item .info-label {
        min-width: auto;
    }
}

@media (max-width: 767px) {
    .data-table-card {
        padding: 15px;
    }
    
    .user-profile-card {
        margin-top: 20px !important;
    }
    
    .nav-tabs > li {
        width: 50%;
        text-align: center;
    }
    
    .nav-tabs > li > a {
        font-size: 12px;
        padding: 8px 5px;
    }
}

/* ===== PERFIL DE USUARIO COMPACTO ===== */
.user-profile-compact {
    background: linear-gradient(135deg, #1c2f52 0%, #14213d 100%);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(252, 163, 17, 0.12);
}

.user-profile-compact .profile-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 250px;
}

.user-profile-compact .avatar-mini {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    overflow: hidden;
    flex-shrink: 0;
}

.user-profile-compact .avatar-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-compact .profile-info {
    flex: 1;
}

.user-profile-compact .player-name {
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.user-profile-compact .player-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-profile-compact .id-badge {
    background: rgba(255,255,255,0.15);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(5px);
}

.user-profile-compact .id-badge i {
    font-size: 12px;
}

.user-profile-compact .profile-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 2;
    justify-content: center;
}

.user-profile-compact .stat-box {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    padding: 10px 15px;
    border-radius: 12px;
    text-align: center;
    min-width: 80px;
    transition: all 0.2s ease;
}

.user-profile-compact .stat-box:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.user-profile-compact .stat-box i {
    font-size: 18px;
    color: white;
    display: block;
    margin-bottom: 5px;
}

.user-profile-compact .stat-box .value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.user-profile-compact .stat-box .label {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colores específicos para cada stat */
.user-profile-compact .stat-box.trust.trust-high { background: rgba(76, 175, 80, 0.3); }
.user-profile-compact .stat-box.trust.trust-medium { background: rgba(255, 193, 7, 0.3); }
.user-profile-compact .stat-box.trust.trust-low { background: rgba(244, 67, 54, 0.3); }
.user-profile-compact .stat-box.warns { background: rgba(255, 152, 0, 0.25); }
.user-profile-compact .stat-box.bans { background: rgba(244, 67, 54, 0.25); }

.user-profile-compact .profile-actions-mini {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.user-profile-compact .profile-actions-mini .btn {
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 8px;
    border: none;
}

.user-profile-compact .profile-actions-mini .btn-primary {
    background: rgba(255,255,255,0.2);
    color: white;
}

.user-profile-compact .profile-actions-mini .btn-primary:hover {
    background: rgba(255,255,255,0.35);
}

.user-profile-compact .profile-actions-mini .btn-default {
    background: rgba(0,0,0,0.2);
    color: white;
}

.user-profile-compact .profile-actions-mini .btn-default:hover {
    background: rgba(0,0,0,0.35);
}

/* Responsive para perfil compacto */
@media (max-width: 991px) {
    .user-profile-compact {
        flex-direction: column;
        align-items: stretch;
    }
    
    .user-profile-compact .profile-left {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
    
    .user-profile-compact .player-ids {
        justify-content: center;
    }
    
    .user-profile-compact .profile-stats-row {
        justify-content: center;
    }
    
    .user-profile-compact .profile-actions-mini {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .user-profile-compact .stat-box {
        min-width: 70px;
        padding: 8px 10px;
    }
    
    .user-profile-compact .stat-box .value {
        font-size: 14px;
    }
    
    .user-profile-compact .player-name {
        font-size: 1.2rem;
    }
}

/* Tema oscuro para perfil compacto */
[data-theme="dark"] .user-profile-compact {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}


/* ===== PERFIL MODERNO DE USUARIO ===== */
.modern-profile-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

.modern-profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #fca311, #14213d);
}

.modern-profile-card .profile-main {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.modern-profile-card .profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.modern-profile-card .profile-avatar-wrap img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.modern-profile-card .profile-avatar-wrap.has-discord-vip img {
    box-shadow: 0 0 0 3px rgba(252, 163, 17, 0.85), 0 4px 12px rgba(0,0,0,0.15);
}

.modern-profile-card .profile-avatar-wrap.has-discord-vip.dvip-tier-p img {
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.9), 0 4px 12px rgba(0,0,0,0.15);
}

.modern-profile-card .profile-avatar-wrap.has-discord-vip.dvip-tier-pp img {
    box-shadow: 0 0 0 3px rgba(20, 33, 61, 0.95), 0 4px 12px rgba(0,0,0,0.15);
}

.modern-profile-card .profile-vip-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fca311, #f39c12);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(252, 163, 17, 0.45);
    white-space: nowrap;
}

.modern-profile-card .profile-vip-badge.dvip-tier-p {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: #fff;
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.45);
}

.modern-profile-card .profile-vip-badge.dvip-tier-pp {
    background: linear-gradient(135deg, #14213d, #1c2f52);
    color: #fff;
    box-shadow: 0 2px 8px rgba(20, 33, 61, 0.45);
}

.modern-profile-card .profile-vip-inline {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(252, 163, 17, 0.15);
    color: #fca311;
    border: 1px solid rgba(252, 163, 17, 0.45);
}

.modern-profile-card .profile-vip-inline.dvip-tier-p {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    border-color: rgba(230, 126, 34, 0.45);
}

.modern-profile-card .profile-vip-inline.dvip-tier-pp {
    background: rgba(20, 33, 61, 0.15);
    color: #bb8fce;
    border-color: rgba(20, 33, 61, 0.45);
}

.modern-profile-card .trust-indicator {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: linear-gradient(135deg, #1c2f52, #14213d);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(252, 163, 17, 0.16);
}

.modern-profile-card .trust-indicator.trust-high {
    background: linear-gradient(135deg, #1DD1A1, #10AC84);
    box-shadow: 0 2px 8px rgba(29, 209, 161, 0.4);
}

.modern-profile-card .trust-indicator.trust-medium {
    background: linear-gradient(135deg, #FFA726, #FF6F00);
    box-shadow: 0 2px 8px rgba(255, 167, 38, 0.4);
}

.modern-profile-card .trust-indicator.trust-low {
    background: linear-gradient(135deg, #EE5A6F, #E84060);
    box-shadow: 0 2px 8px rgba(238, 90, 111, 0.4);
}

/* Header Section - Avatar + Nombre */
.modern-profile-card .profile-header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}

.modern-profile-card .profile-avatar-wrap {
    position: relative;
}

.modern-profile-card .profile-avatar-wrap img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border: 3px solid white;
}

.modern-profile-card .profile-name-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.modern-profile-card .profile-username {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-profile-card .steam-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #1b2838, #2a475e);
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(27, 40, 56, 0.3);
}

.modern-profile-card .steam-profile-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 40, 56, 0.4);
    color: white;
    text-decoration: none;
}

.modern-profile-card .steam-profile-link i {
    font-size: 14px;
}

/* Identificadores Section */
.modern-profile-card .profile-identifiers {
    padding: 16px 20px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.modern-profile-card .identifier-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.modern-profile-card .identifier-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 180px;
}

.modern-profile-card .identifier-label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modern-profile-card .identifier-value {
    font-size: 13px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    color: #333;
    cursor: pointer;
    padding: 6px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.modern-profile-card .identifier-value:hover {
    border-color: #fca311;
    background: #f8f9ff;
}

.modern-profile-card .identifier-value .copy-icon {
    font-size: 14px;
    color: #999;
    transition: color 0.2s;
}

.modern-profile-card .identifier-value:hover .copy-icon {
    color: #fca311;
}

/* Stats Grid */
.modern-profile-card .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.modern-profile-card .stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-right: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.modern-profile-card .stat-card:last-child {
    border-right: none;
}

.modern-profile-card .stat-card:hover {
    background: #fafafa;
}

.modern-profile-card .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modern-profile-card .stat-icon i {
    font-size: 18px;
    color: white;
}

.modern-profile-card .stat-data {
    min-width: 0;
}

.modern-profile-card .stat-value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-profile-card .stat-name {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Colores de stats */
.modern-profile-card .stat-warns .stat-icon { background: linear-gradient(135deg, #FF9F43, #FF6348); }
.modern-profile-card .stat-kicks .stat-icon { background: linear-gradient(135deg, #1c2f52, #14213d); }
.modern-profile-card .stat-bans .stat-icon { background: linear-gradient(135deg, #EE5A6F, #E84060); }
.modern-profile-card .stat-playtime .stat-icon { background: linear-gradient(135deg, #FFA726, #FF6F00); }
.modern-profile-card .stat-first .stat-icon { background: linear-gradient(135deg, #1DD1A1, #10AC84); }
.modern-profile-card .stat-last .stat-icon { background: linear-gradient(135deg, #1c2f52, #14213d); }

/* ===== TEMA OSCURO - PERFIL MODERNO ===== */
[data-theme="dark"] .modern-profile-card {
    background: #1e1e1e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .modern-profile-card .profile-header-section {
    border-bottom-color: #333;
}

[data-theme="dark"] .modern-profile-card .profile-username {
    color: #f5f5f5;
}

[data-theme="dark"] .modern-profile-card .profile-avatar-wrap img {
    border-color: #333;
}

[data-theme="dark"] .modern-profile-card .steam-profile-link {
    background: linear-gradient(135deg, #2a475e, #1b2838);
    color: white;
}

[data-theme="dark"] .modern-profile-card .steam-profile-link:hover {
    color: white;
}

[data-theme="dark"] .modern-profile-card .profile-identifiers {
    background: #252525;
    border-bottom-color: #333;
}

[data-theme="dark"] .modern-profile-card .identifier-label {
    color: #777;
}

[data-theme="dark"] .modern-profile-card .identifier-value {
    background: #1e1e1e;
    border-color: #444;
    color: #ddd;
}

[data-theme="dark"] .modern-profile-card .identifier-value:hover {
    border-color: #fca311;
    background: #2a2a3a;
}

[data-theme="dark"] .modern-profile-card .identifier-value .copy-icon {
    color: #666;
}

[data-theme="dark"] .modern-profile-card .identifier-value:hover .copy-icon {
    color: #8b9eff;
}

[data-theme="dark"] .modern-profile-card .stat-card {
    border-right-color: #333;
}

[data-theme="dark"] .modern-profile-card .stat-card:hover {
    background: #252525;
}

[data-theme="dark"] .modern-profile-card .stat-value {
    color: #f5f5f5;
}

[data-theme="dark"] .modern-profile-card .stat-name {
    color: #777;
}

/* Responsive perfil moderno */
@media (max-width: 1200px) {
    .modern-profile-card .profile-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .modern-profile-card .stat-card:nth-child(3) {
        border-right: none;
    }
    
    .modern-profile-card .stat-card:nth-child(4),
    .modern-profile-card .stat-card:nth-child(5),
    .modern-profile-card .stat-card:nth-child(6) {
        border-top: 1px solid #f0f0f0;
    }
    
    [data-theme="dark"] .modern-profile-card .stat-card:nth-child(4),
    [data-theme="dark"] .modern-profile-card .stat-card:nth-child(5),
    [data-theme="dark"] .modern-profile-card .stat-card:nth-child(6) {
        border-top-color: #333;
    }
}

@media (max-width: 768px) {
    .modern-profile-card .profile-header-section {
        flex-wrap: wrap;
    }
    
    .modern-profile-card .identifier-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .modern-profile-card .identifier-item {
        min-width: auto;
    }
    
    .modern-profile-card .profile-name-section {
        flex: 1 1 calc(100% - 90px);
    }
    
    .modern-profile-card .profile-quick-actions {
        width: 100%;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;
        justify-content: flex-start;
    }
    
    [data-theme="dark"] .modern-profile-card .profile-quick-actions {
        border-top-color: #333;
    }
    
    .modern-profile-card .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modern-profile-card .stat-card:nth-child(odd) {
        border-right: 1px solid #f0f0f0;
    }
    
    .modern-profile-card .stat-card:nth-child(even) {
        border-right: none;
    }
    
    .modern-profile-card .stat-card:nth-child(n+3) {
        border-top: 1px solid #f0f0f0;
    }
    
    [data-theme="dark"] .modern-profile-card .stat-card:nth-child(odd) {
        border-right-color: #333;
    }
    
    [data-theme="dark"] .modern-profile-card .stat-card:nth-child(n+3) {
        border-top-color: #333;
    }
}

@media (max-width: 480px) {
    .modern-profile-card .profile-main {
        padding: 16px;
    }
    
    .modern-profile-card .profile-username {
        font-size: 1.2rem;
    }
    
    .modern-profile-card .profile-avatar-wrap img {
        width: 56px;
        height: 56px;
    }
    
    .modern-profile-card .stat-card {
        padding: 12px;
    }
    
    
    .modern-profile-card .stat-icon {
        width: 32px;
        height: 32px;
    }
    
    .modern-profile-card .stat-icon i {
        font-size: 16px;
    }
}


/* ===== HISTORIAL GENERAL - TIMELINE MODERNO ===== */
.history-section {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-top: 20px;
}

.history-section::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #fca311, #14213d);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 12px;
}

.history-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-header h3 i {
    font-size: 1.2rem;
    color: #fca311;
}

.history-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: #fca311;
    color: #fca311;
}

.filter-btn.active {
    background: linear-gradient(135deg, #1c2f52, #14213d);
    border-color: transparent;
    color: white;
}

.history-timeline {
    padding: 12px 15px;
    max-height: 500px;
    overflow-y: auto;
}

.history-empty {
    text-align: center;
    padding: 25px 15px;
    color: #999;
}

.history-empty i {
    font-size: 36px;
    color: #ddd;
    margin-bottom: 8px;
    display: block;
}

.history-empty p {
    margin: 0;
    font-size: 13px;
}

.history-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fafafa;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.history-item:hover {
    background: #f5f5f5;
}

.history-item:last-child {
    margin-bottom: 0;
}

/* Colores por tipo */
.history-item.type-warn { border-left-color: #FF9F43; }
.history-item.type-kick { border-left-color: #fca311; }
.history-item.type-ck { border-left-color: #14213d; }
.history-item.type-pkt { border-left-color: #fca311; }
.history-item.type-servi { border-left-color: #1DD1A1; }
.history-item.type-ban { border-left-color: #EE5A6F; }
.history-item.type-commend { border-left-color: #4CAF50; }

.history-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.history-icon i {
    font-size: 16px;
    color: white;
}

.type-warn .history-icon { background: linear-gradient(135deg, #FF9F43, #FF6348); }
.type-kick .history-icon { background: linear-gradient(135deg, #1c2f52, #14213d); }
.type-ck .history-icon { background: linear-gradient(135deg, #14213d, #1c2f52); }
.type-pkt .history-icon { background: linear-gradient(135deg, #fca311, #e8940a); }
.type-servi .history-icon { background: linear-gradient(135deg, #1DD1A1, #10AC84); }
.type-ban .history-icon { background: linear-gradient(135deg, #EE5A6F, #E84060); }
.type-commend .history-icon { background: linear-gradient(135deg, #4CAF50, #388E3C); }

.history-content {
    flex: 1;
    min-width: 0;
}

.history-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.history-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-warn { background: rgba(255, 159, 67, 0.15); color: #e67e22; }
.badge-kick { background: rgba(95, 157, 247, 0.15); color: #3498db; }
.badge-ck { background: rgba(20, 33, 61, 0.15); color: #14213d; }
.badge-pkt { background: rgba(252, 163, 17, 0.15); color: #14213d; }
.badge-servi { background: rgba(29, 209, 161, 0.15); color: #10ac84; }
.badge-ban { background: rgba(238, 90, 111, 0.15); color: #e84060; }
.badge-commend { background: rgba(76, 175, 80, 0.15); color: #388E3C; }

.history-time {
    font-size: 12px;
    color: #999;
}

.history-reason {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    word-break: break-word;
}

.history-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.history-staff {
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
}

.history-staff i {
    font-size: 14px;
}

.history-until {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.history-until.ban-permanent {
    color: #e84060;
    font-weight: 600;
}

.history-delete-form {
    margin-left: auto;
}

.history-delete-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(238, 90, 111, 0.1);
    border-radius: 6px;
    color: #e84060;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.history-delete-btn:hover {
    background: #e84060;
    color: white;
}

.history-delete-btn i {
    font-size: 16px;
}

/* Scrollbar personalizado */
.history-timeline::-webkit-scrollbar {
    width: 6px;
}

.history-timeline::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.history-timeline::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.history-timeline::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ===== TEMA OSCURO - HISTORIAL ===== */
[data-theme="dark"] .history-section {
    background: #1e1e1e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .history-header {
    border-bottom-color: #333;
}

[data-theme="dark"] .history-header h3 {
    color: #f5f5f5;
}

[data-theme="dark"] .filter-btn {
    background: #252525;
    border-color: #444;
    color: #999;
}

[data-theme="dark"] .filter-btn:hover {
    border-color: #fca311;
    color: #8b9eff;
}

[data-theme="dark"] .filter-btn.active {
    background: linear-gradient(135deg, #1c2f52, #14213d);
    color: white;
}

[data-theme="dark"] .history-item {
    background: #252525;
}

[data-theme="dark"] .history-item:hover {
    background: #2a2a2a;
}

[data-theme="dark"] .history-reason {
    color: #ddd;
}

[data-theme="dark"] .history-time,
[data-theme="dark"] .history-staff,
[data-theme="dark"] .history-until {
    color: #ccc;
}

[data-theme="dark"] .history-empty {
    color: #666;
}

[data-theme="dark"] .history-empty i {
    color: #444;
}

[data-theme="dark"] .history-timeline::-webkit-scrollbar-track {
    background: #333;
}

[data-theme="dark"] .history-timeline::-webkit-scrollbar-thumb {
    background: #555;
}

[data-theme="dark"] .history-delete-btn {
    background: rgba(238, 90, 111, 0.2);
}

/* Responsive historial */
@media (max-width: 768px) {
    .history-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .history-filters {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    
    .history-item {
        padding: 12px;
    }
    
    .history-icon {
        width: 36px;
        height: 36px;
    }
    
    .history-icon i {
        font-size: 18px;
    }
    
    .history-meta {
        gap: 10px;
    }
}

/* Secciones individuales con colores propios */
.section-ck::before {
    background: linear-gradient(90deg, #14213d, #1c2f52) !important;
}

.section-ck .history-header h3 i {
    color: #14213d;
}

.section-pkt::before {
    background: linear-gradient(90deg, #fca311, #e8940a) !important;
}

.section-pkt .history-header h3 i {
    color: #fca311;
}

.section-commend::before {
    background: linear-gradient(90deg, #4CAF50, #388E3C) !important;
}

.section-commend .history-header h3 i {
    color: #4CAF50;
}

/* Colores para secciones individuales */
.section-ban::before {
    background: linear-gradient(90deg, #EE5A6F, #E84060) !important;
}

.section-ban .history-header h3 i {
    color: #EE5A6F;
}

.section-kick::before {
    background: linear-gradient(90deg, #fca311, #14213d) !important;
}

.section-kick .history-header h3 i {
    color: #fca311;
}

.section-warn::before {
    background: linear-gradient(90deg, #FF9F43, #FF6348) !important;
}

.section-warn .history-header h3 i {
    color: #FF9F43;
}

.section-servi::before {
    background: linear-gradient(90deg, #1DD1A1, #10AC84) !important;
}

.section-servi .history-header h3 i {
    color: #1DD1A1;
}

/* ===== VERSIONES COMPACTAS ===== */
.history-section.compact {
    margin-top: 15px;
}

.history-header.compact {
    padding: 12px 15px;
}

.history-header.compact h3 {
    font-size: 1rem;
}

.history-header.compact h3 i {
    font-size: 1.1rem;
}

.history-count {
    background: rgba(0,0,0,0.1);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

[data-theme="dark"] .history-count {
    background: rgba(255,255,255,0.1);
    color: #aaa;
}

.history-timeline.compact {
    padding: 10px 15px;
    max-height: none;
    overflow-y: visible;
}

.history-empty.compact {
    padding: 20px 10px;
}

.history-empty.compact i {
    font-size: 32px;
}

.history-empty.compact p {
    font-size: 12px;
}

.history-item.compact {
    padding: 10px;
    margin-bottom: 8px;
    gap: 10px;
}

.history-icon.compact {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.history-icon.compact i {
    font-size: 16px;
}

.history-badge {
    font-size: 10px;
    padding: 2px 8px;
}

.history-reason.compact {
    font-size: 13px;
    margin-bottom: 5px;
    line-height: 1.3;
}

.history-meta.compact {
    gap: 10px;
    font-size: 11px;
}

.history-meta.compact .history-staff,
.history-meta.compact .history-until,
.history-meta.compact .history-actions {
    font-size: 11px;
}

.history-delete-btn.compact {
    width: 24px;
    height: 24px;
}

.history-delete-btn.compact i {
    font-size: 14px;
}

.history-actions {
    font-size: 11px;
    color: #1DD1A1;
    display: flex;
    align-items: center;
    gap: 4px;
}

[data-theme="dark"] .history-actions {
    color: #1DD1A1;
}