/* ===========================================
   SISTEMA ESTADÍSTICAS SOFTBOL - LIGA SNTE 53
   TEMA: SPORT PRO (MOBILE FIRST, UX/UI MEJORADO)
   =========================================== */

/* Variables de color (paleta SNTE) */
:root {
    --primary: #003366;              /* Azul corporativo */
    --primary-dark: #001a33;
    --primary-light: #004d99;
    --gold: #D4AF37;                /* Dorado */
    --gold-light: #f2d876;
    --gold-dark: #a6851b;
    --white: #ffffff;
    --bg-light: #f5f7fa;
    --bg-card: #ffffff;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border: #e2e8f0;
    --success: #38a169;
    --danger: #e53e3e;
    --warning: #dd6b20;
    --info: #3182ce;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 30px;
    --font: 'Poppins', system-ui, sans-serif;
    --transition: 0.2s ease-in-out;
}

/* Reset y base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px; /* Base móvil */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;      /* ⭐ altura real del viewport en móvil */
    -webkit-font-smoothing: antialiased;
}

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px;
    background: radial-gradient(circle at 30% 20%, #00264d, #001a33);
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    overflow-y: auto;                     /* ⭐ permite scroll */
    -webkit-overflow-scrolling: touch;    /* ⭐ inercia iOS */
}

.login-box {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 30px 25px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    text-align: center;
    border-top: 6px solid var(--gold);
    animation: fadeInUp 0.5s ease;
      margin: auto;    /* ⭐ NUEVO */
}

.league-logo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--gold);
    box-shadow: 0 4px 15px rgba(212,175,55,0.3);
    margin-bottom: 20px;
    background: white;
}

.login-box h2 {
    color: var(--primary);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.3;
}

.login-box h2 span {
    color: var(--gold-dark);
    font-size: 1.3rem;
    display: block;
    margin-top: 4px;
}

.login-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: 1px;
}

.login-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-light), var(--gold-dark));
    color: white;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}

.login-btn, .admin-toggle {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 12px;
    color: white;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#viewOnlyBtn {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    box-shadow: var(--shadow-md);
}

#viewOnlyBtn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.admin-toggle {
    width: 100%;
    padding: 15px;
    border: 2px dashed var(--gold);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0,51,102,0.05);
    color: var(--primary) !important;
}

.admin-toggle:hover {
    background: rgba(0,51,102,0.1);
    border-style: solid;
}

.admin-form {
    margin-top: 20px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.input-group {
    margin-bottom: 16px;
    text-align: left;
}

.input-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    transition: all var(--transition);
    background: var(--white);
    color: var(--text-primary);
    font-family: var(--font);
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(0,77,153,0.15);
    outline: none;
}

#loginBtn {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: var(--primary-dark);
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(212,175,55,0.4);
}

.hidden {
    display: none !important;
}

/* --- Barra de navegación --- */
.navbar {
    background: linear-gradient(to right, var(--primary), var(--primary-dark));
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-bottom: 2px solid var(--gold);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nav-logo-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: white;
}

.nav-logo-text h1 {
    color: white !important;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 800;
}

.nav-logo-text span {
    color: var(--gold-light) !important;
    font-size: 0.75rem;
}

.user-info-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-badge {
    background: rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    font-weight: 500;
}

#logoutBtn {
    background: var(--danger);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.2s;
}

#logoutBtn:hover {
    transform: scale(1.1);
}

/* --- Sistema de pestañas (tabs) --- */
.tabs-container {
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 16px;
}

.tabs-header {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 0 12px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
}

.tabs-header::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    flex-shrink: 0;
    padding: 12px 20px;
    border: none;
    background: #f0f4f8;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border: 2px solid transparent;
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    color: white;
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(0,51,102,0.4);
    transform: translateY(-1px);
}

.tab-btn i {
    font-size: 1rem;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Secciones de contenido --- */
.tab-section {
    background: white;
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.tab-title {
    color: var(--primary);
    font-size: 1.6rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 15px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.section-header h2 {
    font-size: 1.3rem;
    color: var(--primary-dark);
    margin-bottom: 0;
}

/* --- Tarjetas de estadísticas rápidas (Dashboard) --- */
.quick-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.stat-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 18px 14px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--primary);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--primary-dark);
    line-height: 1.1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Tablas (posiciones, estadísticas) --- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 10px 0;
    border-radius: var(--radius-sm);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Para scroll en móviles */
    font-size: 0.9rem;
}

thead th {
    background: var(--primary);
    color: white;
    padding: 12px 10px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}

tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

tbody tr:nth-child(even) {
    background: #f8fafc;
}

tbody tr:hover {
    background: rgba(0,51,102,0.05);
}

/* --- Listas de equipos y jugadores --- */
.teams-grid, .players-grid, .documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.team-card, .player-card, .document-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--primary);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.team-card:hover, .player-card:hover, .document-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.team-logo-sm, .player-number-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 1.2rem;
    border: 2px solid var(--gold);
}

.team-name, .player-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-dark);
}

.team-meta, .player-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.player-actions, .team-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

/* --- Botones generales --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition);
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-light); }

.btn-success { background: var(--success); }
.btn-danger { background: var(--danger); }
.btn-warning { background: var(--warning); color: #000; }
.btn-info { background: var(--info); }
.btn-secondary { background: var(--text-secondary); }

.btn-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
}

/* --- Modales y formularios --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    backdrop-filter: blur(3px);
}

.modal {
    background: white;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    font-weight: 700;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--gold);
}

.modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s;
}

.modal-close:hover {
    background: rgba(255,255,255,0.4);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    background: var(--bg-light);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Scorebook mejorado --- */
#scorebookContent table th {
    font-size: 0.7rem;
    padding: 6px 4px;
    background: var(--primary-dark);
}

#scorebookContent select {
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 0.75rem;
    background: white;
}

#scorebookContent input[type="number"] {
    width: 32px;
    padding: 2px;
    font-size: 0.7rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* --- Avisos y mensajes --- */
.status-message {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.status-success { background: #e6ffed; color: var(--success); border: 1px solid #c6f6d5; }
.status-error { background: #fff5f5; color: var(--danger); border: 1px solid #fed7d7; }
.status-warning { background: #fffaf0; color: var(--warning); border: 1px solid #feebc8; }
.status-info { background: #ebf8ff; color: var(--info); border: 1px solid #bee3f8; }

/* --- Líderes del dashboard --- */
.dashboard-leaders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 15px 0;
}

.leader-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--primary);
}

.leader-card h4 {
    font-size: 1rem;
    color: var(--primary-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leader-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.leader-row:last-child {
    border-bottom: none;
}

/* --- Temporada actual en Dashboard --- */
#dashboardSeasonContent {
    color: white;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

#dashboardSeasonContent .badge {
    background: var(--gold-dark);
    color: #000;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 700;
}

/* --- Footer --- */
.footer {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.8rem;
    background: white;
    border-top: 1px solid var(--border);
    margin-top: 30px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-weight: 600;
    color: var(--primary);
}

/* --- Ajustes específicos para móviles --- */
@media (max-width: 600px) {
    html {
        font-size: 13px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .quick-stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .tabs-header {
        padding: 8px 10px;
    }

    .tab-btn {
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .stat-value {
        font-size: 1.8rem;
    }

    .navbar .nav-logo-text h1 {
        font-size: 0.85rem;
    }

    .user-badge span {
        display: none;
    }

    .teams-grid, .players-grid {
        grid-template-columns: 1fr;
    }

    .modal {
        max-width: 95%;
        max-height: 90vh;
    }

    .modal-header, .modal-body, .modal-footer {
        padding: 12px;
    }
}

/* Mejora de focus visible */
:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* Scrollbar personalizado (web) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Animaciones suaves para la carga */
.loading-container i {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Botón claro para dashboard */
.btn-light {
    background: #ffffff;
    color: var(--primary) !important;
    border: 2px solid var(--primary);
    font-weight: 700;
}
.btn-light:hover {
    background: var(--primary);
    color: #ffffff !important;
}

.btn-outline-light {
    background: transparent;
    color: #ffffff !important;
    border: 2px solid #ffffff;
    font-weight: 600;
}
.btn-outline-light:hover {
    background: #ffffff;
    color: var(--primary) !important;
}

/* Dashboard season section con logo */
.dashboard-season-section {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}

/* ===========================================
   MEJORAS UX/UI – LÍDERES, PARTIDOS, MODALES
   =========================================== */

/* --- Líderes del Dashboard con logos --- */
.dashboard-leaders-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 15px 0;
}

.leader-card-enhanced {
    background: white;
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--primary);
}

.leader-card-enhanced h4 {
    font-size: 0.95rem;
    color: var(--primary-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.leader-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.leader-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.leader-item:hover {
    background: #f0f4ff;
}

.leader-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.leader-team-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e2e8f0;
}

.leader-team-logo img,
.leader-team-logo div {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.leader-info {
    flex: 1;
    min-width: 0;
}

.leader-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leader-team {
    font-size: 0.7rem;
    font-weight: 500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leader-value {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--primary);
    flex-shrink: 0;
}

/* --- Próximos partidos --- */
.upcoming-games-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upcoming-game-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary);
    transition: all 0.2s ease;
}

.upcoming-game-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.upcoming-game-date {
    font-weight: 600;
    color: var(--dark-blue);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.game-time-badge {
    background: var(--info);
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
}

.upcoming-game-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.upcoming-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.team-logo-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    font-weight: 800;
    font-size: 1.3rem;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.team-logo-circle.small {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    border: 2px solid white;
}

.team-logo-circle.medium {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
}

.team-logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.team-name-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.upcoming-vs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.upcoming-vs span {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--text-muted);
    background: #f0f0f0;
    padding: 4px 12px;
    border-radius: 20px;
}

.upcoming-game-location {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* --- Últimos resultados --- */
.recent-results-header {
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.95rem;
}

.recent-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recent-result-card {
    background: white;
    padding: 14px;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--success);
}

.result-teams-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.result-team {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 100px;
}

.result-team:last-child {
    justify-content: flex-end;
    text-align: right;
    flex-direction: row-reverse;
}

.result-team span {
    font-weight: 600;
    font-size: 0.9rem;
}

.winner-team {
    color: var(--success) !important;
    font-weight: 700 !important;
}

.result-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-primary);
}

.score-separator {
    color: var(--text-muted);
}

.result-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.winner-badge {
    color: white !important;
    padding: 2px 10px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 0.75rem;
}

.draw-badge {
    background: var(--warning);
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 0.75rem;
}

/* --- Modal de jugador --- */
.player-stats-modal {
    max-width: 650px;
}

.player-modal-logo {
    background: white;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.player-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin: 15px 0;
}

.player-stat-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.player-stat-box:hover {
    background: #edf2f7;
    transform: translateY(-2px);
}

.player-stat-box.highlight {
    background: #f0f4ff;
    border-color: var(--primary-light);
}

.player-stat-box .stat-number {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.2;
}

.player-stat-box small {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Mejoras en scorebook --- */
.scorebook-table select {
    font-family: var(--font);
    cursor: pointer;
}

.scorebook-table select:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 1px;
}

.scorebook-table input[type="number"] {
    font-family: var(--font);
}

/* Responsive para líderes */
@media (max-width: 600px) {
    .dashboard-leaders-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .result-teams-row {
        flex-direction: column;
        align-items: center;
    }
    
    .result-team, .result-team:last-child {
        flex-direction: row;
        justify-content: center;
    }
    
    .upcoming-game-teams {
        gap: 10px;
    }
    
    .team-logo-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ===========================================
   MEJORAS UX/UI – PARTIDOS, RESUMEN, SCOREBOOK
   =========================================== */

/* --- Tarjetas de partido mejoradas --- */
.game-card-enhanced {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}
.game-card-enhanced:hover {
    box-shadow: var(--shadow-md);
}
.game-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.game-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.game-location {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
}
.status-badge {
    color: white;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.game-score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 15px 0;
    background: #f8fafc;
    border-radius: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}
.team-logo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 70px;
}
.team-label {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-primary);
}
.score-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.score-number {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}
.score-divider {
    font-size: 1.8rem;
    color: var(--text-muted);
}
.vs-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.game-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* --- Modal de resumen de partido --- */
.game-summary-modal {
    max-width: 950px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}
.summary-body {
    padding: 20px 25px;
    background: #f8fafc;
}
.summary-scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    padding: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}
.summary-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.summary-team-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    color: white;
    font-weight: 800;
    font-size: 1.5rem;
}
.summary-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.summary-team-name {
    font-weight: 700;
    font-size: 1rem;
}
.summary-result {
    display: flex;
    align-items: center;
    gap: 12px;
}
.summary-runs {
    font-size: 3rem;
    font-weight: 900;
    color: var(--text-primary);
}
.summary-runs.winner {
    color: var(--success);
}
.summary-divider {
    font-size: 2.5rem;
    color: var(--text-muted);
}
.summary-venue {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 0.9rem;
}

/* Pestañas internas del modal */
.summary-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
    background: white;
    border-radius: 8px 8px 0 0;
    padding: 4px 6px 0;
}
.summary-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.summary-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.summary-tab:hover {
    color: var(--primary);
    background: #f0f4ff;
}
.summary-content {
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Scorebook en modo lectura (resumen) --- */
.sb-sheet {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.sb-team-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: white;
}
.sb-team-logo, .sb-team-logo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    object-fit: cover;
}
.sb-team-info h4 {
    margin: 0;
    font-size: 1.1rem;
}
.sb-team-info span {
    font-size: 0.8rem;
    opacity: 0.9;
}
.sb-runs-total {
    margin-left: auto;
    font-size: 2rem;
    font-weight: 900;
}
.sb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.sb-table th {
    background: #f1f5f9;
    padding: 8px 4px;
    text-align: center;
    font-weight: 700;
    color: var(--text-primary);
    position: sticky;
    top: 0;
}
.sb-table td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.sb-player-col {
    text-align: left !important;
    padding-left: 10px !important;
    font-weight: 600;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.sb-cell {
    font-weight: 700;
    font-size: 0.75rem;
}
.sb-cell.bg-hit { background: #d1fae5; }
.sb-cell.bg-hr { background: #fef3c7; }
.sb-cell.bg-bb { background: #dbeafe; }
.sb-cell.bg-k { background: #fee2e2; }
.runs-sup {
    color: #27AE60;
    font-weight: 700;
    font-size: 0.7em;
    vertical-align: super;
}
.runs-col { color: #27AE60; font-weight: 700; }
.sb-legend {
    padding: 10px 20px;
    background: #f8fafc;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #e2e8f0;
}
.legend-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

/* --- Tabla de posiciones en Dashboard (mismo estilo) --- */
#dashboardStandings table {
    min-width: 500px;
    font-size: 0.85rem;
}
#dashboardStandings thead th {
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    padding: 10px 6px;
}
#dashboardStandings tbody td {
    padding: 8px 6px;
    vertical-align: middle;
}

/* --- Ajustes responsive --- */
@media (max-width: 600px) {
    .summary-scoreboard {
        gap: 15px;
        padding: 15px;
    }
    .summary-team-logo {
        width: 48px;
        height: 48px;
    }
    .summary-runs {
        font-size: 2.2rem;
    }
    .sb-table {
        font-size: 0.7rem;
    }
    .game-score-display {
        gap: 8px;
    }
}

/* ===========================================
   RESPONSIVE PARA MODAL DE RESUMEN (MÓVILES PEQUEÑOS)
   =========================================== */

/* Ajustes base para el modal de resumen */
.game-summary-modal {
    max-width: 95vw !important;
    width: 95%;
    max-height: 90vh;
}

.summary-body {
    padding: 10px 12px !important;
}

/* Marcador en móviles pequeños */
@media (max-width: 480px) {
    .summary-scoreboard {
        gap: 10px !important;
        padding: 12px 8px !important;
    }
    
    .summary-team-logo {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    
    .summary-team-logo img {
        width: 36px !important;
        height: 36px !important;
    }
    
    .summary-team-name {
        font-size: 0.75rem !important;
        max-width: 70px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .summary-runs {
        font-size: 2rem !important;
    }
    
    .summary-divider {
        font-size: 1.5rem !important;
    }
    
    .summary-result {
        gap: 6px !important;
    }
    
    .summary-venue {
        font-size: 0.7rem !important;
        flex-wrap: wrap;
    }
    
    .winner-tag {
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
        margin-left: 4px !important;
    }
}

/* Pestañas internas responsivas */
@media (max-width: 480px) {
    .summary-tabs {
        gap: 2px !important;
        padding: 2px 3px 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .summary-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .summary-tab {
        padding: 8px 10px !important;
        font-size: 0.72rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .summary-tab .tab-label-text {
        display: inline;
    }
}

/* Ajuste aún más pequeño (320px) */
@media (max-width: 380px) {
    .summary-tab {
        padding: 6px 7px !important;
        font-size: 0.68rem !important;
    }
    
    .summary-tab i {
        font-size: 0.7rem !important;
    }
    
    .summary-scoreboard {
        gap: 4px !important;
        padding: 8px 4px !important;
    }
    
    .summary-team-logo {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }
    
    .summary-team-logo img {
        width: 28px !important;
        height: 28px !important;
    }
    
    .summary-team-name {
        font-size: 0.65rem !important;
        max-width: 55px;
    }
    
    .summary-runs {
        font-size: 1.5rem !important;
    }
}

/* Grid de análisis responsivo */
@media (max-width: 500px) {
    .analysis-keys-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tablas de estadísticas en resumen */
@media (max-width: 600px) {
    .game-summary-modal table {
        font-size: 0.7rem !important;
        min-width: 400px;
    }
    
    .game-summary-modal table th,
    .game-summary-modal table td {
        padding: 4px 3px !important;
    }
}

/* Estadísticas comparativas en resumen */
@media (max-width: 500px) {
    .summary-body [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* MVP cards responsivas */
@media (max-width: 400px) {
    .mvp-container {
        gap: 15px !important;
    }
    
    .mvp-card {
        min-width: 100px !important;
        font-size: 0.75rem !important;
    }
    
    .mvp-card span[style*="border-radius:50%"] {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }
}

/* HR hitters y perfect hitters en móvil */
@media (max-width: 400px) {
    .hr-hitters-container span,
    .perfect-hitters-container span {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }
}

/* Scorebook en móvil */
@media (max-width: 500px) {
    .sb-table {
        font-size: 0.65rem !important;
    }
    
    .sb-table th,
    .sb-table td {
        padding: 3px 2px !important;
    }
    
    .sb-player-col {
        min-width: 100px !important;
        font-size: 0.65rem !important;
        padding-left: 4px !important;
    }
    
    .sb-number {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.6rem !important;
    }
    
    .sb-runs-total {
        font-size: 1.3rem !important;
    }
    
    .sb-team-header {
        padding: 10px 12px !important;
    }
    
    .sb-team-logo,
    .sb-team-logo-placeholder {
        width: 28px !important;
        height: 28px !important;
    }
    
    .sb-team-info h4 {
        font-size: 0.85rem !important;
    }
    
    .sb-legend {
        font-size: 0.65rem !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }
}

/* Footer del modal responsivo */
@media (max-width: 400px) {
    .game-summary-modal .modal-footer {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    
    .footer-tag {
        font-size: 0.7rem !important;
    }
}

/* Ajuste de scroll para scorebook en pantallas pequeñas */
@media (max-width: 500px) {
    .sb-sheet .table-responsive {
        margin: 5px -8px !important;
    }
    
    #tab-home-scorebook,
    #tab-away-scorebook {
        padding: 0 4px !important;
    }
}

/* Mejoras para la lista de líderes en Dashboard */
@media (max-width: 400px) {
    .leader-item {
        gap: 6px !important;
        padding: 6px 3px !important;
    }
    
    .leader-name {
        font-size: 0.75rem !important;
    }
    
    .leader-value {
        font-size: 0.9rem !important;
    }
    
    .leader-team-logo {
        width: 24px !important;
        height: 24px !important;
    }
    
    .leader-rank {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.65rem !important;
    }
}

/* Estadísticas de bateo en resumen */
.stat-box {
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
}

.stat-box .stat-number {
    font-size: 1.2rem;
    font-weight: 800;
    display: block;
}

.stat-box small {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
}

/* Player highlight cards */
.player-highlight {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    margin-bottom: 10px;
}

/* Asegurar que el modal no tenga padding excesivo en móvil */
@media (max-width: 480px) {
    .game-summary-modal .modal-body {
        padding: 10px 8px !important;
    }
    
    .game-summary-modal .modal-header {
        padding: 12px 14px !important;
    }
}

/* Tarjetas de últimos partidos en estadísticas de equipo */
.recent-match-card {
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.recent-match-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.recent-match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}
.recent-match-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.recent-match-location {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 3px;
}
.recent-match-badge {
    padding: 2px 10px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 0.75rem;
}
.recent-match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.recent-team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}
.recent-team.opponent {
    justify-content: flex-end;
    text-align: right;
}
.recent-team .team-logo-circle {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    border: 2px solid white;
    flex-shrink: 0;
}
.recent-team .team-logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.recent-team .team-name {
    font-weight: 600;
    font-size: 0.85rem;
}
.recent-team .team-name.winner {
    font-weight: 700;
}
.home-away-badge {
    font-size: 0.65rem;
    background: #e2e8f0;
    padding: 1px 6px;
    border-radius: 10px;
    color: var(--text-secondary);
}
.recent-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
    font-size: 1.2rem;
}
.recent-score .score-number {
    min-width: 20px;
    text-align: center;
}
.score-divider-small {
    color: var(--text-muted);
    font-size: 1rem;
}
.recent-match-notes {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.7);
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

@media (max-width: 500px) {
    .recent-match-teams {
        flex-direction: column;
        align-items: center;
    }
    .recent-team, .recent-team.opponent {
        justify-content: center;
        text-align: center;
    }
    .recent-score {
        order: -1;
    }
}

/* ===========================================
   MEJORAS SCOREBOOK - TOTALES Y RESUMEN
   =========================================== */

/* Encabezado de equipo en scorebook */
.sb-team-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: white;
    border-radius: 10px 10px 0 0;
}

.sb-team-logo,
.sb-team-logo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    object-fit: cover;
    flex-shrink: 0;
}

.sb-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sb-team-info h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.sb-team-info span {
    font-size: 0.8rem;
    opacity: 0.9;
}

.sb-runs-total {
    margin-left: auto;
    font-size: 2rem;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Tabla de scorebook */
.sb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: white;
}

.sb-table thead th {
    background: #f1f5f9;
    padding: 8px 5px;
    text-align: center;
    font-weight: 700;
    color: var(--text-primary);
    position: sticky;
    top: 0;
    font-size: 0.72rem;
    white-space: nowrap;
}

.sb-table tbody td {
    padding: 6px 5px;
    text-align: center;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.sb-table tfoot td {
    padding: 8px 5px;
    text-align: center;
    font-weight: 900;
    background: #f1f5f9;
    border-top: 2px solid #d1d5db;
}

.sb-player-col {
    text-align: left !important;
    padding-left: 10px !important;
    font-weight: 600;
    min-width: 140px;
    white-space: nowrap;
}

.sb-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 4px;
}

/* Celdas de jugadas con colores */
.sb-cell {
    font-weight: 700;
    font-size: 0.75rem;
    min-width: 42px;
    border-radius: 3px;
}

.sb-cell.bg-hit {
    background: #d1fae5;
    color: #065f46;
}

.sb-cell.bg-hr {
    background: #fef3c7;
    color: #92400e;
}

.sb-cell.bg-bb {
    background: #dbeafe;
    color: #1e40af;
}

.sb-cell.bg-k {
    background: #fee2e2;
    color: #991b1b;
}

/* Superíndice de carreras */
.runs-sup {
    color: #27AE60;
    font-weight: 700;
    font-size: 0.7em;
    vertical-align: super;
}

/* Columna de carreras */
.runs-col {
    color: #27AE60;
    font-weight: 700;
}

/* Leyenda del scorebook */
.sb-legend {
    padding: 10px 20px;
    background: #f8fafc;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 10px 10px;
}

.legend-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Responsive para scorebook en móviles */
@media (max-width: 600px) {
    .sb-table {
        font-size: 0.68rem;
    }

    .sb-table thead th,
    .sb-table tbody td {
        padding: 4px 3px;
    }

    .sb-player-col {
        min-width: 100px;
        font-size: 0.68rem;
        padding-left: 4px !important;
    }

    .sb-number {
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }

    .sb-cell {
        font-size: 0.68rem;
        min-width: 32px;
    }

    .sb-runs-total {
        font-size: 1.3rem;
    }

    .sb-team-header {
        padding: 10px 12px;
    }

    .sb-team-logo,
    .sb-team-logo-placeholder {
        width: 28px;
        height: 28px;
    }

    .sb-team-info h4 {
        font-size: 0.85rem;
    }

    .sb-legend {
        font-size: 0.65rem;
        gap: 8px;
        padding: 8px 10px;
    }
}

/* ===========================================
   FOOTER CON BRANDING AZB DATA (ESTILO LOGIN)
   =========================================== */
.footer {
    text-align: center;
    padding: 25px 20px 20px;
    background: white;
    border-top: 1px solid var(--border);
    margin-top: 30px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.footer p {
    margin: 4px 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Tag destacado AZB DATA */
.footer-brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-light), var(--gold-dark));
    color: white;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 12px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    transition: transform 0.2s ease;
    letter-spacing: 0.5px;
}

.footer-brand-tag:hover {
    transform: scale(1.03);
}

.footer-brand-tag i {
    font-size: 1.1rem;
    color: #fff;
}

/* Ocultamos el connection-status antiguo si aún existiera */
#connectionStatus {
    display: none;
}

.badge-success { background: #27AE60; color: white; }
.badge-warning { background: #F39C12; color: white; }
.badge-info { background: #3498DB; color: white; }

/* ===========================================
   SCOREBOOK MEJORADO – CAPTURA EN VIVO
   =========================================== */

/* Panel superior de estado del inning */
.scorebook-live-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8fafc, #e8edf2);
    border-radius: 12px;
    margin-bottom: 18px;
    border: 2px solid #d1d5db;
}

.live-inning-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-dark);
}

.live-inning-badge {
    background: var(--primary);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    animation: inningPulse 2s infinite;
}

@keyframes inningPulse {
    0% { box-shadow: 0 0 0 0 rgba(0,51,102,0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0,51,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,51,102,0); }
}

.live-outs-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-secondary);
}

.out-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 2px solid #cbd5e1;
    transition: all 0.3s ease;
}

.out-dot.filled {
    background: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 0 8px rgba(229,62,62,0.4);
}

/* Panel de marcador en vivo */
.live-score-panel {
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 15px;
}

.live-score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.live-score-team-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.live-score-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--primary-dark);
    line-height: 1;
}

.live-score-vs {
    font-weight: 900;
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* Botón de reinicio rápido */
.btn-reset-inning {
    background: #fff5f5;
    color: var(--danger);
    border: 2px solid #fed7d7;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-reset-inning:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* Celda de scorebook mejorada con tooltip */
.sb-cell-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.sb-cell-input select {
    padding: 4px 2px;
    font-size: 0.7rem;
    border-radius: 5px;
    border: 2px solid #d1d5db;
    background: white;
    cursor: pointer;
    min-width: 52px;
    transition: all 0.15s ease;
}

.sb-cell-input select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(0,77,153,0.15);
    outline: none;
}

.sb-cell-input select.has-value {
    border-color: var(--success);
    background: #f0fdf4;
}

.sb-cell-input select.has-value.hr-code {
    border-color: #F39C12;
    background: #fefce8;
}

.sb-cell-input select.has-value.k-code {
    border-color: var(--danger);
    background: #fef2f2;
}

.sb-runs-mini {
    width: 28px;
    padding: 2px;
    font-size: 0.65rem;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fafafa;
    color: var(--text-primary);
}

.sb-runs-mini:focus {
    border-color: var(--info);
    box-shadow: 0 0 0 2px rgba(49,130,206,0.2);
}

.sb-runs-mini.has-run {
    background: #fefce8;
    border-color: #F39C12;
    color: #92400e;
    font-weight: 700;
}

/* Totales en vivo debajo de cada tabla */
.sb-live-totals {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    background: #f0f9ff;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 0.8rem;
    flex-wrap: wrap;
    border: 1px solid #bae6fd;
}

.sb-live-total-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sb-live-total-item .total-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.sb-live-total-item .total-value {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 1rem;
}

/* Barra de progreso de innings */
.inning-progress {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.inning-progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: all 0.2s ease;
}

.inning-progress-dot.active {
    background: var(--primary);
    box-shadow: 0 0 6px rgba(0,51,102,0.5);
}

.inning-progress-dot.completed {
    background: var(--success);
}

/* ===========================================
   SCOREBOOK – PANEL DE CARRERAS EN VIVO
   =========================================== */
.live-score-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    background: white;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.live-score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
}

.live-score-team-name {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-score-value {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    transition: all 0.2s ease;
}

.live-score-vs {
    font-weight: 900;
    color: #64748b;
    font-size: 1rem;
    background: #f1f5f9;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
}

/* Panel de control del scorebook */
.scorebook-live-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8fafc, #e8edf2);
    border-radius: 12px;
    margin-bottom: 18px;
    border: 2px solid #d1d5db;
}

.live-inning-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #003366;
}

.btn-reset-inning {
    background: #fff5f5;
    color: #e53e3e;
    border: 2px solid #fed7d7;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-reset-inning:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* Inputs del scorebook */
.sb-cell-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.sb-cell-input select {
    padding: 4px 2px;
    font-size: 0.7rem;
    border-radius: 5px;
    border: 2px solid #d1d5db;
    background: white;
    cursor: pointer;
    min-width: 52px;
    transition: all 0.15s ease;
    font-family: 'Poppins', sans-serif;
}

.sb-cell-input select:focus {
    border-color: #004d99;
    box-shadow: 0 0 0 3px rgba(0,77,153,0.15);
    outline: none;
}

.sb-runs-mini {
    width: 30px;
    padding: 2px;
    font-size: 0.65rem;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fafafa;
    color: #1a202c;
    font-family: 'Poppins', sans-serif;
    transition: all 0.15s ease;
}

.sb-runs-mini:focus {
    border-color: #3182ce;
    box-shadow: 0 0 0 2px rgba(49,130,206,0.2);
    outline: none;
}

.sb-runs-mini.has-run {
    background: #fefce8;
    border-color: #F39C12;
    color: #92400e;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 600px) {
    .live-score-value {
        font-size: 2rem;
    }
    .live-score-panel {
        gap: 12px;
        padding: 10px 12px;
    }
    .live-score-vs {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}

/* Panel de carreras en vivo */
.live-score-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    background: white;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.live-score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
}
.live-score-team-name {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.live-score-value {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    transition: all 0.2s ease;
}
.live-score-vs {
    font-weight: 900;
    color: #64748b;
    font-size: 1rem;
    background: #f1f5f9;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
}
.scorebook-live-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8fafc, #e8edf2);
    border-radius: 12px;
    margin-bottom: 18px;
    border: 2px solid #d1d5db;
}
.btn-reset-inning {
    background: #fff5f5;
    color: #e53e3e;
    border: 2px solid #fed7d7;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-cell-input select {
    font-family: 'Poppins', sans-serif;
    padding: 4px 2px;
    font-size: 0.7rem;
    border-radius: 5px;
    border: 2px solid #d1d5db;
    background: white;
    cursor: pointer;
    min-width: 52px;
}
.sb-runs-mini {
    width: 30px;
    padding: 2px;
    font-size: 0.65rem;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fafafa;
    font-family: 'Poppins', sans-serif;
}
.sb-runs-mini.has-run {
    background: #fefce8;
    border-color: #F39C12;
    color: #92400e;
    font-weight: 700;
}
.player-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.player-actions .btn {
    font-size: 0.75rem;
    padding: 4px 10px;
}

@media (max-width: 480px) {
    .player-actions .btn {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

/* Mejoras para tarjetas de jugadores y equipos */
.player-card, .team-card {
    transition: transform 0.15s, box-shadow 0.15s;
}
.player-card:hover, .team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Modal de jugadores del equipo */
.modal-overlay .modal .modal-header {
    border-bottom: 2px solid var(--gold);
}
.modal-body .player-list-item {
    transition: background 0.15s;
}
.modal-body .player-list-item:hover {
    background: #edf2f7 !important;
}

/* Ajustes para móviles */
@media (max-width: 600px) {
    .players-grid {
        grid-template-columns: 1fr !important;
    }
    .team-card {
        width: 100% !important;
    }
}

/* Mejoras en tablas de posiciones */
#dashboardStandings table {
    border-radius: 12px;
    overflow: hidden;
}
#dashboardStandings table thead th {
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
#dashboardStandings table tbody td {
    font-size: 0.85rem;
    padding: 8px 6px;
}
#dashboardStandings table tbody tr:last-child {
    border-bottom: none;
}

/* Mejoras en tarjetas de líderes */
.dashboard-leaders-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.leader-card-enhanced {
    border-radius: 16px;
    padding: 18px;
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.15s, box-shadow 0.15s;
}
.leader-card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
/* ===========================================
   ASEGURAR Z-INDEX DE MODALES (SIEMPRE ENCIMA)
   =========================================== */

/* Fondo del modal (overlay) siempre encima de todo */
.modal-overlay {
    z-index: 9999 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

/* El contenido del modal (caja blanca) también con prioridad */
.modal {
    z-index: 10000 !important;
    position: relative;
}

/* Para modales creados dinámicamente con ID como addPlayerStatsModal_* */
.modal-overlay[id^="addPlayerStatsModal_"],
.modal-overlay[id^="gameSummary_"],
.modal-overlay[id^="teamGamesModal_"] {
    z-index: 9999 !important;
}

/* Ajuste para el modal de scorebook (si lo usas) */
#scorebookModal.modal-overlay {
    z-index: 9999 !important;
}

/* Para garantizar que los botones dentro del modal no queden por debajo */
.modal button {
    position: relative;
    z-index: 1;
}

/* ===========================================
   ESTILOS PARA BRACKET DE PLAYOFFS
   =========================================== */
.playoff-series-card {
    transition: transform 0.15s, box-shadow 0.15s;
}
.playoff-series-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}
.playoff-series-card .btn-small {
    font-size: 0.75rem;
    padding: 4px 10px;
}
@media (max-width: 600px) {
    .playoff-series-card {
        padding: 14px !important;
    }
    .playoff-series-card .btn-small {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}

/* ===========================================
   ESTILOS MEJORADOS PARA PRÓXIMOS PARTIDOS
   =========================================== */

/* Tarjeta de serie de playoffs */
.upcoming-series-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.upcoming-series-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

/* Tarjeta de partido individual */
.upcoming-game-card {
    transition: background 0.15s ease, transform 0.15s ease;
}
.upcoming-game-card:hover {
    background: #f0f4ff !important;
    transform: scale(1.01);
}

/* Badge de estado en partido */
.upcoming-game-card .status-badge {
    font-size: 0.65rem;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Botones de acción en móvil */
@media (max-width: 600px) {
    .upcoming-game-card {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }
    .upcoming-game-card > div:first-child {
        flex-wrap: wrap;
    }
    .upcoming-game-card .btn-small {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    .upcoming-series-card {
        padding: 14px !important;
    }
    .upcoming-series-card .btn-small {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}

/* Mejora de la fecha y hora */
.upcoming-game-date {
    font-weight: 600;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.game-time-badge {
    background: var(--info);
    color: white;
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Mejora para el estado de la serie */
.upcoming-series-card .status-badge {
    font-size: 0.7rem;
    padding: 3px 14px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
}

/* ===========================================
   MODO OSCURO – TEMA DARK
   =========================================== */

/* Variables para tema oscuro (se aplican cuando el atributo data-theme="dark" está en el html o body) */
[data-theme="dark"] {
    --primary: #1a3a6b;               /* Azul más oscuro pero con brillo */
    --primary-dark: #0f2440;
    --primary-light: #2a5a9b;
    --gold: #d4af37;
    --gold-light: #f2d876;
    --gold-dark: #b8960e;
    --white: #1e1e2f;                 /* Fondo principal oscuro */
    --bg-light: #2a2a3e;              /* Fondo de secciones */
    --bg-card: #25253b;               /* Fondo de tarjetas */
    --text-primary: #e8e8f0;          /* Texto principal claro */
    --text-secondary: #b0b0c8;        /* Texto secundario */
    --text-muted: #8a8aa0;            /* Texto atenuado */
    --border: #3d3d5c;                /* Bordes */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.7);
    --bg-input: #2d2d45;
    --bg-hover: rgba(255,255,255,0.05);
}

/* Ajustes de fondo global */
[data-theme="dark"] body {
    background: #1a1a2e;
    color: var(--text-primary);
}

[data-theme="dark"] .login-container {
    background: radial-gradient(circle at 30% 20%, #1a1a2e, #0f0f1a);
}

[data-theme="dark"] .login-box {
    background: #25253b;
    border-top-color: var(--gold);
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

[data-theme="dark"] .login-box h2 {
    color: var(--gold-light);
}

[data-theme="dark"] .login-box h2 span {
    color: var(--gold);
}

[data-theme="dark"] .login-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .admin-toggle {
    background: rgba(212,175,55,0.1);
    color: var(--gold-light) !important;
    border-color: var(--gold);
}

[data-theme="dark"] .admin-toggle:hover {
    background: rgba(212,175,55,0.2);
}

[data-theme="dark"] .input-group input,
[data-theme="dark"] .input-group select,
[data-theme="dark"] .input-group textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .input-group input:focus,
[data-theme="dark"] .input-group select:focus,
[data-theme="dark"] .input-group textarea:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(42,90,155,0.3);
}

/* Navbar en modo oscuro */
[data-theme="dark"] .navbar {
    background: linear-gradient(to right, #0f2440, #1a1a2e);
    border-bottom-color: var(--gold);
}

[data-theme="dark"] .nav-logo-text h1 {
    color: white !important;
}

[data-theme="dark"] .nav-logo-text span {
    color: var(--gold-light) !important;
}

[data-theme="dark"] .user-badge {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: #ddd;
}

[data-theme="dark"] .tab-btn {
    background: #2a2a3e;
    color: var(--text-secondary);
    border-color: transparent;
}

[data-theme="dark"] .tab-btn.active {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    color: white;
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(0,51,102,0.6);
}

[data-theme="dark"] .tab-section {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .tab-title {
    color: var(--gold-light);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .section-header h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .stat-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border-top-color: var(--primary-light);
}

[data-theme="dark"] .stat-card-header {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-value {
    color: var(--gold-light);
}

/* Tablas */
[data-theme="dark"] table thead th {
    background: var(--primary-dark);
    color: white;
}

[data-theme="dark"] table tbody td {
    border-bottom-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.03);
}

[data-theme="dark"] table tbody tr:hover {
    background: rgba(255,255,255,0.06);
}

/* Tarjetas de equipos y jugadores */
[data-theme="dark"] .team-card,
[data-theme="dark"] .player-card,
[data-theme="dark"] .document-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border-left-color: var(--primary-light);
}

[data-theme="dark"] .team-card:hover,
[data-theme="dark"] .player-card:hover,
[data-theme="dark"] .document-card:hover {
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .team-name,
[data-theme="dark"] .player-name {
    color: var(--text-primary);
}

[data-theme="dark"] .team-meta,
[data-theme="dark"] .player-meta {
    color: var(--text-secondary);
}

/* Modales */
[data-theme="dark"] .modal {
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .modal-header {
    background: linear-gradient(135deg, var(--primary-dark), #1a1a2e);
    color: white;
    border-bottom-color: var(--gold);
}

[data-theme="dark"] .modal-footer {
    background: var(--bg-light);
    border-top-color: var(--border);
}

[data-theme="dark"] .modal-close {
    background: rgba(255,255,255,0.15);
}

[data-theme="dark"] .modal-close:hover {
    background: rgba(255,255,255,0.3);
}

/* Scorebook */
[data-theme="dark"] .scorebook-live-panel {
    background: #2a2a3e;
    border-color: var(--border);
}

[data-theme="dark"] .live-inning-indicator {
    color: var(--gold-light);
}

[data-theme="dark"] .live-score-panel {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .live-score-vs {
    background: #3d3d5c;
    color: var(--text-secondary);
}

[data-theme="dark"] .sb-table {
    background: var(--bg-card);
}

[data-theme="dark"] .sb-table thead th {
    background: var(--primary-dark);
    color: white;
}

[data-theme="dark"] .sb-table tbody td {
    border-bottom-color: var(--border);
}

[data-theme="dark"] .sb-table tfoot td {
    background: var(--bg-light);
    border-top-color: var(--border);
}

[data-theme="dark"] .sb-legend {
    background: var(--bg-light);
    border-top-color: var(--border);
    color: var(--text-secondary);
}

[data-theme="dark"] .sb-cell-input select {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .sb-cell-input select:focus {
    border-color: var(--primary-light);
}

[data-theme="dark"] .sb-runs-mini {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .sb-runs-mini.has-run {
    background: #3d3d1a;
    border-color: var(--gold);
    color: var(--gold-light);
}

/* Estado y mensajes */
[data-theme="dark"] .status-success {
    background: #1a3a2a;
    color: #6fcf97;
    border-color: #1a5a3a;
}
[data-theme="dark"] .status-error {
    background: #3a1a1a;
    color: #f28b82;
    border-color: #5a2a2a;
}
[data-theme="dark"] .status-warning {
    background: #3a2a1a;
    color: #f5b041;
    border-color: #5a3a1a;
}
[data-theme="dark"] .status-info {
    background: #1a2a3a;
    color: #6ab0f7;
    border-color: #1a3a5a;
}

/* Dashboard season */
[data-theme="dark"] #dashboardSeasonContent {
    background: linear-gradient(135deg, var(--primary-dark), #1a1a2e);
}

[data-theme="dark"] .dashboard-season-section {
    background: linear-gradient(135deg, var(--primary-dark), #1a1a2e);
}

/* Footer */
[data-theme="dark"] .footer {
    background: var(--bg-card);
    border-top-color: var(--border);
}

[data-theme="dark"] .footer p {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer-brand-tag {
    background: linear-gradient(135deg, var(--primary-dark), var(--gold-dark));
}

/* Próximos partidos y resultados */
[data-theme="dark"] .upcoming-game-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .upcoming-game-card:hover {
    background: #2a2a4a !important;
}

[data-theme="dark"] .game-card-enhanced {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .game-score-display {
    background: var(--bg-light);
}

[data-theme="dark"] .recent-result-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .recent-match-card {
    background: var(--bg-card) !important;
}

/* Líderes */
[data-theme="dark"] .leader-card-enhanced {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .leader-item:hover {
    background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .leader-name {
    color: var(--text-primary);
}

[data-theme="dark"] .leader-value {
    color: var(--gold-light);
}

/* Playoffs */
[data-theme="dark"] .playoff-series-card {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm);
}

/* Inputs de búsqueda y filtros */
[data-theme="dark"] #teamSearch,
[data-theme="dark"] #playerSearch,
[data-theme="dark"] #teamCategoryFilter,
[data-theme="dark"] #teamFilter,
[data-theme="dark"] #playerCategoryFilter,
[data-theme="dark"] #gameCategoryFilter,
[data-theme="dark"] #statsCategoryFilter,
[data-theme="dark"] #statsPhaseFilter,
[data-theme="dark"] #dashboardCategoryFilter,
[data-theme="dark"] #dashboardPhaseFilter {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] #teamSearch:focus,
[data-theme="dark"] #playerSearch:focus,
[data-theme="dark"] #teamCategoryFilter:focus,
[data-theme="dark"] #teamFilter:focus,
[data-theme="dark"] #playerCategoryFilter:focus,
[data-theme="dark"] #gameCategoryFilter:focus,
[data-theme="dark"] #statsCategoryFilter:focus,
[data-theme="dark"] #statsPhaseFilter:focus,
[data-theme="dark"] #dashboardCategoryFilter:focus,
[data-theme="dark"] #dashboardPhaseFilter:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(42,90,155,0.3);
}

/* Botón de toggle (estilo) */
.theme-toggle-btn {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 8px;
}

.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.1);
}

[data-theme="dark"] .theme-toggle-btn {
    background: rgba(255,255,255,0.05);
    border-color: var(--gold);
    color: var(--gold-light);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(212,175,55,0.2);
}

/* Ajuste para etiquetas dentro de tablas en modo oscuro */
[data-theme="dark"] .winner-team {
    color: #6fcf97 !important;
}

[data-theme="dark"] .vs-circle {
    background: var(--border);
    color: var(--text-secondary);
}

/* Scrollbar en modo oscuro */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #2a2a3e;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--primary-light);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ============================================
   SCOREBOOK DEFINITIVO – MODO OSCURO INCLUIDO
   ============================================ */

.scorebook-wrapper {
    background: #f8fafc;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-top: 10px;
}

/* Panel superior */
.scorebook-live-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #e8edf2;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    border: 2px solid #d1d5db;
}
.scorebook-live-panel .indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #003366;
}
.scorebook-live-panel .indicator i {
    color: #D4AF37;
    font-size: 1.2rem;
}

/* Encabezado de equipo */
.scorebook-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 10px 10px 0 0;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.scorebook-team-header .team-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
}
.scorebook-team-header .team-total-runs {
    font-size: 1.6rem;
    font-weight: 900;
    background: rgba(0,0,0,0.2);
    padding: 0 16px;
    border-radius: 30px;
}

/* Tabla */
.scorebook-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: white;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.scorebook-table thead th {
    background: #f1f5f9;
    padding: 6px 4px;
    text-align: center;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #1e293b;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.scorebook-table thead th:first-child {
    text-align: left;
    padding-left: 8px;
}
.scorebook-table tbody td {
    padding: 4px 3px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 0.78rem;
}
.scorebook-table tbody tr:nth-child(even) {
    background: #fafcff;
}
.scorebook-table tbody tr:hover {
    background: #f0f7ff;
}

/* Columna de jugador con inputs */
.scorebook-table .player-col {
    text-align: left;
    padding-left: 6px;
    min-width: 180px;
}
.scorebook-table .player-edit-input {
    width: 100%;
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.75rem;
    background: white;
    color: #1a202c;
    transition: border-color 0.15s;
}
.scorebook-table .player-edit-input:focus {
    border-color: #004d99;
    box-shadow: 0 0 0 2px rgba(0,77,153,0.15);
    outline: none;
}
.scorebook-table .player-edit-input.number-input {
    width: 45px;
    text-align: center;
}
.scorebook-table .player-edit-input.name-input {
    min-width: 80px;
    flex: 1;
}

/* Celdas de jugadas */
.sb-cell-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sb-cell-input select {
    padding: 2px 2px;
    font-size: 0.65rem;
    border-radius: 4px;
    border: 2px solid #d1d5db;
    background: white;
    cursor: pointer;
    min-width: 46px;
    transition: all 0.15s;
    font-family: inherit;
}
.sb-cell-input select:focus {
    border-color: #004d99;
    outline: none;
}
.sb-cell-input select.has-hit { border-color: #27AE60; background: #ecfdf5; }
.sb-cell-input select.has-hr  { border-color: #F39C12; background: #fffbeb; }
.sb-cell-input select.has-out { border-color: #E74C3C; background: #fef2f2; }

.sb-runs-mini {
    width: 26px;
    padding: 1px;
    font-size: 0.6rem;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #fafafa;
    color: #1a202c;
}
.sb-runs-mini.has-run {
    background: #fefce8;
    border-color: #F39C12;
    color: #92400e;
    font-weight: 700;
}

/* Estadísticas destacadas */
.stat-highlight {
    font-weight: 700;
}
.stat-highlight.avg { color: #C2185B; }
.stat-highlight.hr  { color: #D4AF37; }
.stat-highlight.rbi { color: #006B5A; }
.stat-highlight.runs { color: #27AE60; }

/* Totales */
.scorebook-totals td {
    background: #f1f5f9 !important;
    font-weight: 700;
    padding: 8px 4px !important;
    border-top: 2px solid #cbd5e1;
}
.scorebook-totals .total-label {
    text-align: left;
    padding-left: 12px;
    color: #0f172a;
}

/* Botón agregar jugador */
.add-player-btn {
    background: #004d99;
    color: white;
    border: none;
    padding: 6px 18px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.add-player-btn:hover {
    background: #003366;
}
.add-player-btn:active {
    transform: scale(0.96);
}

/* ============================================
   MODO OSCURO – TODOS LOS ELEMENTOS
   ============================================ */
[data-theme="dark"] .scorebook-wrapper {
    background: #1e1e2f;
}
[data-theme="dark"] .scorebook-live-panel {
    background: #2a2a3e;
    border-color: #4a4a6a;
}
[data-theme="dark"] .scorebook-live-panel .indicator {
    color: #fbbf24;
}
[data-theme="dark"] .scorebook-team-header {
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
[data-theme="dark"] .scorebook-team-header .team-badge,
[data-theme="dark"] .scorebook-team-header .team-total-runs {
    background: rgba(0,0,0,0.3);
}
[data-theme="dark"] .scorebook-table {
    background: #25253b;
    color: #e8e8f0;
}
[data-theme="dark"] .scorebook-table thead th {
    background: #0f2440;
    color: #e8e8f0;
    border-bottom-color: #4a4a6a;
}
[data-theme="dark"] .scorebook-table tbody td {
    border-bottom-color: #3d3d5c;
}
[data-theme="dark"] .scorebook-table tbody tr:nth-child(even) {
    background: #2a2a3e;
}
[data-theme="dark"] .scorebook-table tbody tr:hover {
    background: #3a3a5a;
}
[data-theme="dark"] .scorebook-table .player-col {
    color: #e8e8f0;
}
[data-theme="dark"] .scorebook-table .player-edit-input {
    background: #2d2d45;
    color: #e8e8f0;
    border-color: #4a4a6a;
}
[data-theme="dark"] .scorebook-table .player-edit-input:focus {
    border-color: #2a5a9b;
}
[data-theme="dark"] .scorebook-table .sb-cell-input select {
    background: #2d2d45;
    color: #e8e8f0;
    border-color: #4a4a6a;
}
[data-theme="dark"] .scorebook-table .sb-cell-input select.has-hit {
    border-color: #4ade80;
    background: #1a3a2a;
}
[data-theme="dark"] .scorebook-table .sb-cell-input select.has-hr {
    border-color: #fbbf24;
    background: #3d3d1a;
}
[data-theme="dark"] .scorebook-table .sb-cell-input select.has-out {
    border-color: #f87171;
    background: #3a1a1a;
}
[data-theme="dark"] .scorebook-table .sb-runs-mini {
    background: #2d2d45;
    color: #e8e8f0;
    border-color: #4a4a6a;
}
[data-theme="dark"] .scorebook-table .sb-runs-mini.has-run {
    background: #3d3d1a;
    border-color: #fbbf24;
    color: #fbbf24;
}
[data-theme="dark"] .scorebook-table .stat-highlight.avg {
    color: #f28b82 !important;
}
[data-theme="dark"] .scorebook-table .stat-highlight.hr {
    color: #fbbf24 !important;
}
[data-theme="dark"] .scorebook-table .stat-highlight.rbi {
    color: #4ade80 !important;
}
[data-theme="dark"] .scorebook-table .stat-highlight.runs {
    color: #4ade80 !important;
}
[data-theme="dark"] .scorebook-totals td {
    background: #1a1a2e !important;
    color: #e8e8f0 !important;
    border-top-color: #4a4a6a;
}
[data-theme="dark"] .scorebook-totals .total-label {
    color: #e8e8f0;
}
[data-theme="dark"] .add-player-btn {
    background: #2a5a9b;
}
[data-theme="dark"] .add-player-btn:hover {
    background: #1a3a6b;
}

/* ============================================================
   LIGA SNTE 53 — PREMIUM UI/UX 2026
   ============================================================ */

/* ===== 1. SELECTOR GLOBAL DE TEMPORADA ===== */
#globalSeasonSelector option {
    background: #003366;
    color: white;
}
@media (max-width: 768px) {
    #globalSeasonSelector {
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
        max-width: 150px !important;
    }
}

/* ============================================================
   2. CARDS PREMIUM DE JUGADORES
   ============================================================ */
.players-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.player-card-premium {
    position: relative;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.08);
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(226, 232, 240, 0.7);
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
}

.player-card-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(0, 71, 171, 0.04), transparent 60%);
    pointer-events: none;
}

.player-card-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 51, 102, 0.16);
    border-color: var(--gold);
}

.pcp-stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}

.pcp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.pcp-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    transition: transform 0.3s;
}
.pcp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-card-premium:hover .pcp-avatar {
    transform: scale(1.06) rotate(-4deg);
}

.pcp-header-info {
    flex: 1;
    min-width: 0;
}
.pcp-name {
    font-weight: 800;
    color: #0a1a2b;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcp-team {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pcp-number {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.9rem;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.pcp-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.pcp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.pcp-badge i { font-size: 0.62rem; color: var(--gold-dark); }
.pcp-cat-A { background: #fff3d6; color: #a57917; }
.pcp-cat-B { background: #d6ebf9; color: #2176ae; }
.pcp-cat-C { background: #d9f0e2; color: #1e8449; }

.pcp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 0;
    border-top: 1px dashed #e2e8f0;
    border-bottom: 1px dashed #e2e8f0;
    position: relative;
    z-index: 1;
}
.pcp-stat {
    text-align: center;
}
.pcp-stat-val {
    font-weight: 900;
    font-size: 1.1rem;
    color: #0a1a2b;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.pcp-stat-lbl {
    font-size: 0.6rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    margin-top: 2px;
}

.pcp-actions {
    display: flex;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.pcp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
}
.pcp-btn-view {
    flex: 1;
    background: linear-gradient(135deg, #0047AB, #003366);
}
.pcp-btn-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 71, 171, 0.4);
}
.pcp-btn-edit { background: #64748b; width: 36px; padding: 8px; }
.pcp-btn-del  { background: #e53e3e; width: 36px; padding: 8px; }
.pcp-btn-edit:hover, .pcp-btn-del:hover { transform: translateY(-2px); }

@media (max-width: 480px) {
    .players-grid { grid-template-columns: 1fr !important; }
    .pcp-stat-val { font-size: 1rem; }
}

/* ============================================================
   3. MODAL PREMIUM DE JUGADOR
   ============================================================ */
.player-modal-premium {
    max-width: 820px !important;
    width: 95vw;
    max-height: 94vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 22px !important;
    padding: 0 !important;
    background: #f4f6fa !important;
}

.pmp-hero {
    position: relative;
    padding: 24px 22px 20px;
    color: #fff;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
}
.pmp-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.25), transparent 50%);
    pointer-events: none;
}
.pmp-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.pmp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.2s;
}
.pmp-close:hover { background: rgba(255, 255, 255, 0.35); transform: rotate(90deg); }

.pmp-hero-top {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
.pmp-hero-number {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.5rem;
    color: #fff;
    border: 4px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.pmp-hero-info { flex: 1; min-width: 200px; }
.pmp-hero-name {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.pmp-hero-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pmp-hero-team, .pmp-hero-pos, .pmp-hero-phase, .pmp-hero-age {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.pmp-team-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}
.pmp-hero-phase { background: rgba(212, 175, 55, 0.3); border-color: rgba(212, 175, 55, 0.5); }

.pmp-hero-avg {
    margin-top: 18px;
    padding: 14px 20px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    text-align: center;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.pmp-hero-avg-value {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.4);
}
.pmp-hero-avg-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
    opacity: 0.85;
    margin-top: 6px;
}
.pmp-hero-avg-sub {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 2px;
    font-weight: 600;
}

.pmp-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f4f6fa;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
}

.pmp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}
.pmp-stat {
    background: #fff;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.22s;
    position: relative;
}
.pmp-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.08);
    border-color: var(--gold);
}
.pmp-stat-hl {
    background: linear-gradient(180deg, #fff, #fef9e7);
    border-color: rgba(212, 175, 55, 0.5);
}
.pmp-stat-icon {
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.pmp-stat-value {
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.pmp-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.8px;
    font-weight: 800;
    margin-top: 4px;
}

.pmp-section {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 51, 102, 0.04);
    border: 1px solid #e2e8f0;
}
.pmp-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #003366;
    font-size: 0.9rem;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px dashed #e2e8f0;
}
.pmp-section-title i { color: var(--gold-dark); }
.pmp-section-count {
    margin-left: auto;
    background: linear-gradient(135deg, #D4AF37, #b8960e);
    color: #001a33;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 20px;
}

.pmp-games-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pmp-game-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.pmp-game-row:hover {
    background: #fff;
    border-color: var(--gold);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.15);
}
.pmp-game-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.pmp-game-info { flex: 1; min-width: 0; }
.pmp-game-date {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.pmp-playoff-tag {
    background: #fef3c7;
    color: #a57917;
    font-size: 0.6rem;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 800;
}
.pmp-game-vs {
    margin-top: 4px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pmp-game-vs strong { color: #0a1a2b; font-weight: 800; }
.pmp-game-score {
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.3px;
}
.pmp-game-chips {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 180px;
}
.pmp-chip {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.65rem;
    color: #64748b;
    white-space: nowrap;
}
.pmp-chip b { color: #0a1a2b; font-weight: 900; }
.pmp-chip-hr { background: #fee; border-color: #fbb; }
.pmp-chip-hr b { color: #c0392b; }
.pmp-chip-rbi { background: #ecfdf5; border-color: #a7f3d0; }
.pmp-chip-rbi b { color: #006B5A; }
.pmp-chip-avg { background: #fef3c7; border-color: #fcd34d; }
.pmp-chip-avg b { color: #a57917; }

.pmp-empty {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 14px;
    border: 2px dashed #e2e8f0;
}
.pmp-empty i {
    font-size: 2.4rem;
    color: var(--gold);
    display: block;
    margin-bottom: 12px;
}
.pmp-empty p { font-weight: 800; color: #003366; margin: 0 0 4px; }
.pmp-empty small { color: #94a3b8; }

.pmp-notes {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: #fffbeb;
    border-left: 4px solid var(--gold);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #78350f;
    align-items: flex-start;
}
.pmp-notes i { color: var(--gold-dark); margin-top: 2px; }

.pmp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 22px 22px;
    flex-wrap: wrap;
}
.pmp-footer-brand {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}
.pmp-footer-brand i { color: var(--gold-dark); }
.pmp-footer-actions { display: flex; gap: 8px; }

@media (max-width: 600px) {
    .pmp-hero { padding: 18px 16px 16px; }
    .pmp-hero-number { width: 60px; height: 60px; font-size: 1.2rem; border-width: 3px; }
    .pmp-hero-name { font-size: 1.25rem; }
    .pmp-hero-avg-value { font-size: 2.4rem; }
    .pmp-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .pmp-stat-value { font-size: 1.1rem; }
    .pmp-game-chips { max-width: 100%; justify-content: flex-start; }
    .pmp-game-row { flex-wrap: wrap; }
}

/* ============================================================
   4. CARDS PREMIUM DE PARTIDOS
   ============================================================ */
.games-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
}

.game-card-premium {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.game-card-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0047AB, #D4AF37, #0047AB);
    background-size: 200% 100%;
    animation: gpShimmer 4s linear infinite;
}
@keyframes gpShimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.game-card-premium.gp-completed::before {
    background: linear-gradient(90deg, #27AE60, #6fcf97, #27AE60);
    background-size: 200% 100%;
}
.game-card-premium.gp-cancelled::before {
    background: linear-gradient(90deg, #e53e3e, #fca5a5, #e53e3e);
    background-size: 200% 100%;
}
.game-card-premium.gp-scheduled::before {
    background: linear-gradient(90deg, #f39c12, #fcd34d, #f39c12);
    background-size: 200% 100%;
}

.game-card-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 51, 102, 0.16);
    border-color: var(--gold);
}

.gp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gp-meta-left {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.gp-category {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.gp-playoff-tag {
    background: linear-gradient(135deg, #fcd34d, #d4af37);
    color: #001a33;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
}
.gp-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
}
.gp-status.gp-scheduled { background: linear-gradient(135deg, #f39c12, #d68910); }
.gp-status.gp-completed { background: linear-gradient(135deg, #27AE60, #1e8449); }
.gp-status.gp-cancelled { background: linear-gradient(135deg, #e53e3e, #c0392b); }

.gp-date-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}
.gp-date-row i { color: var(--gold-dark); margin-right: 3px; }

.gp-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px dashed #e2e8f0;
    border-bottom: 1px dashed #e2e8f0;
}

.gp-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 12px;
    transition: all 0.2s;
}
.gp-team.gp-winner {
    background: linear-gradient(180deg, #fef9e7, transparent);
}
.gp-team-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.1rem;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
}
.gp-team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.game-card-premium:hover .gp-team-avatar {
    transform: scale(1.08) rotate(-4deg);
}
.gp-team-name {
    font-weight: 800;
    font-size: 0.85rem;
    color: #0a1a2b;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.gp-team-role {
    font-size: 0.6rem;
    color: #94a3b8;
    letter-spacing: 1px;
    font-weight: 800;
}

.gp-center { display: flex; align-items: center; justify-content: center; }
.gp-score {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gp-score-num {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    color: #64748b;
}
.gp-score-won { color: #27AE60; text-shadow: 0 2px 12px rgba(39, 174, 96, 0.3); }
.gp-score-lost { color: #e53e3e; }
.gp-score-tie { color: #f39c12; }
.gp-score-sep {
    color: #cbd5e1;
    font-weight: 700;
    font-size: 1.2rem;
}
.gp-vs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0047AB, #003366);
    color: var(--gold);
    font-weight: 900;
    font-size: 0.85rem;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(0, 71, 171, 0.3);
    letter-spacing: 0.5px;
}

.gp-series-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    font-size: 0.75rem;
    color: #78350f;
    font-weight: 700;
    flex-wrap: wrap;
}
.gp-series-info i { color: var(--gold-dark); }
.gp-series-record {
    margin-left: auto;
    background: linear-gradient(135deg, #D4AF37, #b8960e);
    color: #001a33;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.75rem;
}

.gp-winner-banner {
    text-align: center;
    padding: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
    color: #065f46;
    font-size: 0.82rem;
    font-weight: 700;
}
.gp-winner-banner i { color: var(--gold-dark); }

.gp-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.gp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
}
.gp-action-view {
    flex: 1;
    background: linear-gradient(135deg, #0047AB, #003366);
}
.gp-action-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 71, 171, 0.4);
}
.gp-action-stats { background: #27AE60; }
.gp-action-sb    { background: #D4AF37; color: #001a33; }
.gp-action-edit  { background: #64748b; }
.gp-action-del   { background: #e53e3e; }
.gp-action-stats, .gp-action-sb, .gp-action-edit, .gp-action-del { width: 38px; padding: 8px; }
.gp-action-stats:hover, .gp-action-sb:hover,
.gp-action-edit:hover, .gp-action-del:hover { transform: translateY(-2px); }

@media (max-width: 640px) {
    .games-premium-grid { grid-template-columns: 1fr; }
    .gp-team-name { max-width: 90px; font-size: 0.78rem; }
    .gp-score-num { font-size: 1.6rem; }
    .gp-team-avatar { width: 44px; height: 44px; }
}

/* ============================================================
   5. MODAL PREMIUM DEL RESUMEN DEL PARTIDO
   ============================================================ */
.game-summary-modal-premium {
    max-width: 920px !important;
    width: 95vw;
    max-height: 94vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 22px !important;
    padding: 0 !important;
    background: #f4f6fa !important;
}

.gsm-hero {
    position: relative;
    padding: 22px 22px 20px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
}
.gsm-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(0, 71, 171, 0.4), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(212, 175, 55, 0.2), transparent 45%);
    pointer-events: none;
}
.gsm-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.gsm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.2s;
}
.gsm-close:hover { background: rgba(255, 255, 255, 0.35); transform: rotate(90deg); }

.gsm-hero-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.gsm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.gsm-badge i { color: var(--gold); font-size: 0.68rem; }
.gsm-badge-playoff {
    background: linear-gradient(135deg, #fcd34d, #d4af37);
    color: #001a33;
    border-color: transparent;
    font-weight: 900;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4);
}
.gsm-badge-playoff i { color: #001a33; }

.gsm-hero-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.gsm-hero-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    position: relative;
}
.gsm-team-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.5rem;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s;
}
.gsm-team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gsm-team-winner .gsm-team-avatar {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.gsm-team-name {
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    max-width: 140px;
    line-height: 1.15;
}
.gsm-team-role {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    opacity: 0.7;
    font-weight: 800;
}
.gsm-crown {
    position: absolute;
    top: -10px;
    font-size: 1.5rem;
    animation: gsmCrown 2s ease-in-out infinite;
    filter: drop-shadow(0 3px 8px rgba(212, 175, 55, 0.6));
}
@keyframes gsmCrown {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-4px) rotate(10deg); }
}

.gsm-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.gsm-final-score {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gsm-score {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    color: #fff;
    opacity: 0.7;
}
.gsm-score-winner {
    opacity: 1;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}
.gsm-score-sep {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}
.gsm-final-label {
    padding: 6px 18px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-light);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.gsm-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 22px 0;
    background: #fff;
    border-bottom: 2px solid #e2e8f0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gsm-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.85rem;
    color: #64748b;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
}
.gsm-tab:hover {
    color: #003366;
    background: #f8fafc;
}
.gsm-tab.gsm-tab-active {
    color: #003366;
    border-bottom-color: var(--gold);
    background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.06));
}
.gsm-tab i { color: var(--gold-dark); }

.gsm-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
    background: #f4f6fa;
    -webkit-overflow-scrolling: touch;
}
.gsm-tab-content { animation: gsmFadeIn 0.25s ease; }
@keyframes gsmFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Comparativa */
.gsm-compare {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}
.gsm-compare-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 14px 18px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    font-weight: 900;
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: -0.2px;
}
.gsm-compare-vs {
    color: var(--gold);
    font-size: 0.75rem;
    padding: 0 12px;
    letter-spacing: 1.5px;
    opacity: 0.8;
}
.gsm-compare-body {
    display: flex;
    flex-direction: column;
}
.gsm-compare-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.gsm-compare-row:last-child { border-bottom: none; }
.gsm-compare-row:hover { background: #f8fafc; }
.gsm-cmp-home, .gsm-cmp-away {
    font-weight: 800;
    font-size: 1.05rem;
    color: #64748b;
    text-align: center;
}
.gsm-cmp-winner {
    color: #003366;
    font-size: 1.25rem;
    font-weight: 900;
    position: relative;
}
.gsm-cmp-winner::after {
    content: '●';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 0.6rem;
}
.gsm-cmp-label {
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    font-weight: 800;
}
.gsm-cmp-label i { color: var(--gold-dark); margin-right: 4px; font-size: 0.65rem; }

/* MVP Card */
.gsm-mvp-card {
    position: relative;
    margin-bottom: 16px;
    padding: 22px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fcd34d, #d4af37, #b8960e);
    color: #001a33;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(212, 175, 55, 0.35);
    transition: transform 0.25s;
}
.gsm-mvp-card:hover { transform: translateY(-4px); }
.gsm-mvp-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.35), transparent 50%);
    pointer-events: none;
}
.gsm-mvp-crown {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 2rem;
    opacity: 0.35;
    transform: rotate(15deg);
}
.gsm-mvp-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    font-weight: 900;
    background: rgba(0, 26, 51, 0.15);
    display: inline-block;
    padding: 4px 16px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.gsm-mvp-number {
    font-size: 0.9rem;
    font-weight: 800;
    opacity: 0.75;
}
.gsm-mvp-name {
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.7px;
    margin: 4px 0 12px;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
    line-height: 1.1;
}
.gsm-mvp-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 26, 51, 0.15);
}
.gsm-mvp-stats span {
    font-size: 0.85rem;
    background: rgba(0, 26, 51, 0.1);
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 600;
}
.gsm-mvp-stats b { font-weight: 900; font-size: 1rem; }

/* Líderes */
.gsm-leaders {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}
.gsm-section-title {
    font-weight: 900;
    font-size: 0.95rem;
    color: #003366;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 2px dashed #e2e8f0;
}
.gsm-section-title i { color: var(--gold-dark); }
.gsm-leaders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.gsm-leader-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
}
.gsm-leader-head {
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gsm-leader-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.gsm-leader-row:hover { background: #fff; transform: translateX(3px); }
.gsm-leader-rank {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
    flex-shrink: 0;
}
.gsm-leader-row:nth-child(2) .gsm-leader-rank { background: linear-gradient(135deg, #ffd700, #daa520); color: #7a5c00; }
.gsm-leader-row:nth-child(3) .gsm-leader-rank { background: linear-gradient(135deg, #e8e8e8, #a8a8a8); color: #4a4a4a; }
.gsm-leader-row:nth-child(4) .gsm-leader-rank { background: linear-gradient(135deg, #cd7f32, #a05a1f); color: #fff; }

.gsm-leader-name {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0a1a2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gsm-leader-value {
    font-weight: 900;
    font-size: 0.95rem;
}

.gsm-narrative {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 14px;
    border-left: 4px solid var(--gold);
    align-items: flex-start;
}
.gsm-narrative i {
    color: var(--gold);
    font-size: 1.4rem;
    opacity: 0.5;
    margin-top: 2px;
    flex-shrink: 0;
}
.gsm-narrative p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #334155;
    font-weight: 500;
}

.gsm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 22px 22px;
    flex-wrap: wrap;
}
.gsm-footer-brand {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}
.gsm-footer-brand i { color: var(--gold-dark); }

@media (max-width: 640px) {
    .gsm-hero { padding: 18px 16px 16px; }
    .gsm-team-avatar { width: 52px; height: 52px; font-size: 1.15rem; }
    .gsm-team-name { font-size: 0.82rem; max-width: 100px; }
    .gsm-score { font-size: 2.1rem; }
    .gsm-tab { padding: 8px 14px; font-size: 0.78rem; }
    .gsm-tab span { display: none; }
    .gsm-body { padding: 14px 12px; }
    .gsm-compare-head { font-size: 0.78rem; padding: 10px 12px; }
    .gsm-compare-row { padding: 10px 12px; }
    .gsm-cmp-home, .gsm-cmp-away { font-size: 0.95rem; }
    .gsm-cmp-winner { font-size: 1.05rem; }
    .gsm-cmp-label { font-size: 0.62rem; }
    .gsm-mvp-name { font-size: 1.35rem; }
    .gsm-mvp-stats { gap: 8px; }
    .gsm-mvp-stats span { font-size: 0.72rem; padding: 3px 10px; }
    .gsm-leaders-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   6. DARK MODE — OVERRIDES
   ============================================================ */
[data-theme="dark"] .player-card-premium,
[data-theme="dark"] .game-card-premium {
    background: #25253b;
    border-color: #3d3d5c;
}
[data-theme="dark"] .pcp-name,
[data-theme="dark"] .gp-team-name,
[data-theme="dark"] .gsm-leader-name {
    color: #e8e8f0;
}
[data-theme="dark"] .pcp-badge,
[data-theme="dark"] .gp-category {
    background: #2d2d45;
    color: #b0b0c8;
}
[data-theme="dark"] .pcp-stat-val { color: #e8e8f0; }
[data-theme="dark"] .pcp-stats { border-color: #3d3d5c; }
[data-theme="dark"] .pmp-body,
[data-theme="dark"] .gsm-body { background: #1e1e2f; }
[data-theme="dark"] .pmp-stat,
[data-theme="dark"] .pmp-section,
[data-theme="dark"] .gsm-compare,
[data-theme="dark"] .gsm-leaders {
    background: #25253b;
    border-color: #3d3d5c;
}
[data-theme="dark"] .pmp-stat-value,
[data-theme="dark"] .gsm-compare-head,
[data-theme="dark"] .gsm-section-title { color: #e8e8f0; }
[data-theme="dark"] .pmp-game-row {
    background: #2a2a3e;
    border-color: #3d3d5c;
}
[data-theme="dark"] .pmp-chip {
    background: #1e1e2f;
    border-color: #3d3d5c;
    color: #b0b0c8;
}
[data-theme="dark"] .pmp-chip b { color: #e8e8f0; }
[data-theme="dark"] .gsm-compare-row:hover { background: #2a2a3e; }
[data-theme="dark"] .gsm-leader-card { background: #2a2a3e; border-color: #3d3d5c; }
[data-theme="dark"] .gsm-leader-row:hover { background: #25253b; }
[data-theme="dark"] .gsm-narrative { background: #2a2a3e; }
[data-theme="dark"] .gsm-narrative p { color: #b0b0c8; }
[data-theme="dark"] .gsm-footer,
[data-theme="dark"] .pmp-footer,
[data-theme="dark"] .gsm-tabs { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .gsm-tab { color: #b0b0c8; }
[data-theme="dark"] .gsm-tab.gsm-tab-active { color: #fff; }
[data-theme="dark"] .pmp-section-title { color: #e8e8f0; border-color: #3d3d5c; }
[data-theme="dark"] .gp-series-info { background: #3d3d1a; border-color: #b8960e; color: #fcd34d; }
[data-theme="dark"] .gp-winner-banner { background: #1a3a2a; border-color: #27ae60; color: #6fcf97; }
[data-theme="dark"] .gp-date-row { color: #b0b0c8; }
[data-theme="dark"] .gp-score-lost { color: #f28b82; }

/* ============================================================
   FIX — BOTÓN CERRAR A LA DERECHA (todos los modales premium)
   ============================================================ */

.pmp-close,
.gsm-close,
.player-modal-premium .pmp-close,
.game-summary-modal-premium .gsm-close,
.modal .pmp-close,
.modal .gsm-close,
.modal-overlay .pmp-close,
.modal-overlay .gsm-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 100 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Evita que la regla genérica .modal button lo rompa */
.player-modal-premium button.pmp-close,
.game-summary-modal-premium button.gsm-close {
    position: absolute !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

@media (max-width: 600px) {
    .pmp-close,
    .gsm-close {
        top: 10px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================================
   DASHBOARD PREMIUM
   ============================================================ */

/* --- Quick stats: tarjetas vibrantes --- */
.quick-stats-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.dsh-stat-card {
    position: relative;
    background: #fff;
    border-radius: 18px !important;
    padding: 22px 18px !important;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.08) !important;
    border: 1px solid rgba(226, 232, 240, 0.7) !important;
    border-top: none !important;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dsh-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    border-radius: 18px 18px 0 0;
}

.dsh-stat-card::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.06;
    pointer-events: none;
}

.dsh-stat-card[data-variant="teams"]::before   { background: linear-gradient(90deg, #003366, #0047AB, #003366); }
.dsh-stat-card[data-variant="players"]::before { background: linear-gradient(90deg, #27AE60, #58d68d, #27AE60); }
.dsh-stat-card[data-variant="games"]::before   { background: linear-gradient(90deg, #3498db, #5dade2, #3498db); }
.dsh-stat-card[data-variant="avg"]::before     { background: linear-gradient(90deg, #f39c12, #fcd34d, #f39c12); }

.dsh-stat-card[data-variant="teams"]::after   { background: #003366; }
.dsh-stat-card[data-variant="players"]::after { background: #27AE60; }
.dsh-stat-card[data-variant="games"]::after   { background: #3498db; }
.dsh-stat-card[data-variant="avg"]::after     { background: #f39c12; }

.dsh-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 51, 102, 0.16) !important;
    border-color: var(--gold) !important;
}

.dsh-stat-card .stat-card-header {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dsh-stat-card .stat-card-header i {
    font-size: 1.3rem;
    padding: 8px;
    border-radius: 10px;
    background: #f1f5f9;
}

.dsh-stat-card[data-variant="teams"] .stat-card-header i   { color: #003366; background: #e6eefb; }
.dsh-stat-card[data-variant="players"] .stat-card-header i { color: #27AE60; background: #e6fbef; }
.dsh-stat-card[data-variant="games"] .stat-card-header i   { color: #3498db; background: #e6f0fb; }
.dsh-stat-card[data-variant="avg"] .stat-card-header i     { color: #f39c12; background: #fef7e6; }

.dsh-stat-card .stat-card-header h3 {
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #64748b;
    font-weight: 800;
    margin: 0;
}

.dsh-stat-card .stat-value {
    position: relative;
    z-index: 1;
    font-size: 2.6rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, #003366, #0a1a2b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dsh-stat-card[data-variant="players"] .stat-value { background: linear-gradient(135deg, #1e8449, #27AE60); -webkit-background-clip: text; background-clip: text; }
.dsh-stat-card[data-variant="games"] .stat-value   { background: linear-gradient(135deg, #2176ae, #3498db); -webkit-background-clip: text; background-clip: text; }
.dsh-stat-card[data-variant="avg"] .stat-value     { background: linear-gradient(135deg, #d68910, #f39c12); -webkit-background-clip: text; background-clip: text; }

/* --- Season card premium --- */
.dsh-season-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.dsh-season-logo {
    flex-shrink: 0;
}
.dsh-season-logo img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    background: #fff;
    padding: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dsh-season-main {
    flex: 1;
    min-width: 250px;
}

.dsh-season-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.dsh-season-title h3 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}

.dsh-season-cat {
    background: var(--gold);
    color: #001a33;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.dsh-season-status {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    background: rgba(243, 156, 18, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(243, 156, 18, 0.4);
}

.dsh-season-status.is-active {
    background: rgba(39, 174, 96, 0.25);
    color: #6fcf97;
    border-color: rgba(39, 174, 96, 0.5);
    animation: pulseStatus 2s infinite;
}

@keyframes pulseStatus {
    0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(39, 174, 96, 0); }
}

.dsh-season-desc {
    opacity: 0.85;
    color: #e2e8f0;
    margin: 0 0 14px;
    font-size: 0.9rem;
}

.dsh-season-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.dsh-metric {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dsh-metric i {
    font-size: 1.1rem;
    color: var(--gold);
    flex-shrink: 0;
}

.dsh-metric b {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
}

.dsh-metric small {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    margin-top: 2px;
}

.dsh-season-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

/* --- Empty state premium --- */
.dsh-empty {
    text-align: center;
    padding: 30px 20px;
    color: #fff;
}
.dsh-empty img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    background: #fff;
    padding: 3px;
    margin-bottom: 15px;
}
.dsh-empty i {
    display: block;
    font-size: 2rem;
    color: var(--gold);
    margin: 10px 0;
}
.dsh-empty p { font-size: 1.1rem; margin: 8px 0 4px; }
.dsh-empty small { opacity: 0.8; display: block; margin-bottom: 15px; }

/* --- Standings premium --- */
.dsh-standings-block {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.06);
    border: 1px solid #e2e8f0;
}

.dsh-standings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    position: relative;
}

.dsh-standings-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.dsh-standings-cat {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.82rem;
    letter-spacing: 0.8px;
    color: #fff;
}
.dsh-cat-A { background: linear-gradient(135deg, #f6c445, #b8960e); color: #001a33; }
.dsh-cat-B { background: linear-gradient(135deg, #3498db, #2176ae); }
.dsh-cat-C { background: linear-gradient(135deg, #27AE60, #1e8449); }

.dsh-standings-count {
    font-size: 0.72rem;
    opacity: 0.8;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.dsh-standings-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dsh-standings-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: #fff;
}

.dsh-standings-table thead th {
    background: #f8fafc;
    color: #475569;
    padding: 10px 8px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 800;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}
.dsh-standings-table thead th:nth-child(2) { text-align: left; padding-left: 14px; }

.dsh-standings-row {
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 1px solid #f1f5f9;
}
.dsh-standings-row:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.06), transparent);
    transform: scale(1.002);
}
.dsh-standings-row.dsh-top-1 { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent); border-left: 4px solid #ffd700; }
.dsh-standings-row.dsh-top-2 { background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), transparent); border-left: 4px solid #c0c0c0; }
.dsh-standings-row.dsh-top-3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent); border-left: 4px solid #cd7f32; }

.dsh-standings-row td {
    padding: 10px 8px;
    text-align: center;
    color: #334155;
    font-weight: 500;
}

.dsh-standings-rank {
    font-weight: 900 !important;
    color: #003366 !important;
    font-size: 0.95rem;
}

.dsh-standings-team {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left !important;
    padding-left: 14px !important;
    min-width: 180px;
}

.dsh-team-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #fff;
    font-weight: 900;
    font-size: 0.72rem;
}
.dsh-team-dot img { width: 100%; height: 100%; object-fit: cover; }

.dsh-team-name {
    font-weight: 700;
    color: #0a1a2b;
    white-space: nowrap;
}

.dsh-standings-row .dsh-w { color: #27AE60; font-weight: 800; }
.dsh-standings-row .dsh-l { color: #e53e3e; font-weight: 800; }
.dsh-standings-row .dsh-t { color: #f39c12; font-weight: 800; }
.dsh-standings-row .dsh-diff { font-weight: 800; }
.dsh-standings-row .dsh-diff.positive { color: #27AE60; }
.dsh-standings-row .dsh-diff.negative { color: #e53e3e; }
.dsh-standings-row .dsh-diff.neutral  { color: #95a5a6; }

/* --- Leaders premium --- */
.dsh-leaders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.dsh-leader-block {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.06);
    border: 1px solid #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.dsh-leader-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 51, 102, 0.12);
}

.dsh-leader-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    position: relative;
}
.dsh-leader-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.dsh-leader-letter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.dsh-leader-cat-A .dsh-leader-letter { background: linear-gradient(135deg, #f6c445, #b8960e); color: #001a33; }
.dsh-leader-cat-B .dsh-leader-letter { background: linear-gradient(135deg, #3498db, #2176ae); }
.dsh-leader-cat-C .dsh-leader-letter { background: linear-gradient(135deg, #27AE60, #1e8449); }

.dsh-leader-titles { flex: 1; }
.dsh-leader-main {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.2px;
}
.dsh-leader-sub {
    font-size: 0.68rem;
    opacity: 0.75;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.dsh-leader-section {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.dsh-leader-section:last-child { border-bottom: none; }

.dsh-leader-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 900;
    color: #003366;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}
.dsh-leader-section-title i {
    color: var(--gold-dark);
    font-size: 0.75rem;
}

.dsh-leader-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dsh-leader-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s;
    background: #f8fafc;
}
.dsh-leader-item:hover {
    background: linear-gradient(90deg, #fef9e7, #fff);
    transform: translateX(4px);
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.15);
}

.dsh-leader-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
    flex-shrink: 0;
}
.dsh-leader-rank.is-1 { background: linear-gradient(135deg, #ffd700, #daa520); color: #7a5c00; box-shadow: 0 3px 10px rgba(255, 215, 0, 0.4); }
.dsh-leader-rank.is-2 { background: linear-gradient(135deg, #e8e8e8, #a8a8a8); color: #4a4a4a; }
.dsh-leader-rank.is-3 { background: linear-gradient(135deg, #cd7f32, #a05a1f); }

.dsh-leader-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.72rem;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dsh-leader-info { flex: 1; min-width: 0; }
.dsh-leader-name {
    font-weight: 700;
    color: #0a1a2b;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsh-leader-team {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.dsh-leader-value {
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.3px;
    padding: 2px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}
.dsh-leader-value.value-hr { color: #c0392b; background: #fee; }
.dsh-leader-value.value-h  { color: #003366; background: #e6eefb; }

.dsh-leader-empty {
    text-align: center;
    font-size: 0.78rem;
    color: #94a3b8;
    padding: 12px;
    font-style: italic;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .dsh-stat-card .stat-value { font-size: 2rem !important; }
    .dsh-season-title h3 { font-size: 1.25rem; }
    .dsh-season-logo img { width: 60px; height: 60px; }
    .dsh-season-actions { width: 100%; flex-direction: row; }
    .dsh-season-actions .btn { flex: 1; }
    .dsh-leaders-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EQUIPOS PREMIUM
   ============================================================ */
.teams-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
}

.team-card-premium {
    position: relative;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.7);
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    padding: 18px;
    gap: 14px;
}

.team-card-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 51, 102, 0.16);
    border-color: var(--gold);
}

.tcp-stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background-size: 200% 100%;
    animation: tcpShimmer 4s linear infinite;
}
@keyframes tcpShimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* Header */
.tcp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.tcp-logo {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.4rem;
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    transition: transform 0.3s;
}
.tcp-logo img { width: 100%; height: 100%; object-fit: cover; }
.team-card-premium:hover .tcp-logo {
    transform: scale(1.06) rotate(-4deg);
}

.tcp-info { flex: 1; min-width: 0; }
.tcp-name {
    font-weight: 900;
    font-size: 1.1rem;
    color: #0a1a2b;
    line-height: 1.15;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tcp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}
.tcp-meta i { color: var(--gold-dark); margin-right: 3px; }

.tcp-badges {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    flex-shrink: 0;
}

.tcp-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 900;
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
}
.tcp-rank-1 { background: linear-gradient(135deg, #ffd700, #daa520); color: #7a5c00; border-color: #ffd700; box-shadow: 0 4px 14px rgba(255, 215, 0, 0.4); }
.tcp-rank-2 { background: linear-gradient(135deg, #e8e8e8, #a8a8a8); color: #4a4a4a; border-color: #c0c0c0; }
.tcp-rank-3 { background: linear-gradient(135deg, #cd7f32, #a05a1f); color: #fff; border-color: #cd7f32; }

.tcp-cat-badge {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.tcp-cat-A { background: #fff3d6; color: #a57917; border: 1px solid rgba(246, 196, 69, 0.4); }
.tcp-cat-B { background: #d6ebf9; color: #2176ae; border: 1px solid rgba(52, 152, 219, 0.4); }
.tcp-cat-C { background: #d9f0e2; color: #1e8449; border: 1px solid rgba(39, 174, 96, 0.4); }

/* Record W-L-E */
.tcp-record {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 10px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.tcp-record-item { text-align: center; }
.tcp-record-val {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.8px;
    color: #003366;
}
.tcp-val-w { color: #27AE60; }
.tcp-val-l { color: #e53e3e; }
.tcp-val-e { color: #f39c12; }

.tcp-record-lbl {
    font-size: 0.58rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 800;
    margin-top: 4px;
}

/* Stats row */
.tcp-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.tcp-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: all 0.18s;
}
.tcp-stat:hover {
    background: #fff;
    border-color: #e2e8f0;
    transform: translateY(-2px);
}
.tcp-stat i { font-size: 0.95rem; flex-shrink: 0; }
.tcp-stat-val {
    font-size: 0.9rem;
    font-weight: 900;
    color: #0a1a2b;
    line-height: 1;
    letter-spacing: -0.3px;
}
.tcp-stat small {
    display: block;
    font-size: 0.55rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
    margin-top: 2px;
}

/* Top players */
.tcp-top-players {
    padding: 10px 12px;
    background: linear-gradient(135deg, #fef9e7, #fff);
    border-radius: 12px;
    border: 1px dashed rgba(212, 175, 55, 0.5);
}

.tcp-top-title {
    font-size: 0.7rem;
    font-weight: 900;
    color: #a57917;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tcp-top-title i { color: var(--gold-dark); }

.tcp-top-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tcp-top-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.tcp-top-item:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(3px);
}

.tcp-top-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.65rem;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.tcp-top-info { flex: 1; min-width: 0; }
.tcp-top-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0a1a2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tcp-top-stats {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 1px;
}

/* Players count */
.tcp-players-count {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 700;
    text-align: center;
    padding: 6px 0;
    border-top: 1px dashed #e2e8f0;
}
.tcp-players-count i { color: var(--gold-dark); margin-right: 4px; }

/* Actions */
.tcp-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.tcp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
    letter-spacing: 0.2px;
}

.tcp-btn-primary {
    flex: 1;
    background: linear-gradient(135deg, #003366, #001a33);
}
.tcp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.35);
}

.tcp-btn-secondary {
    flex: 1;
    background: linear-gradient(135deg, #D4AF37, #b8960e);
    color: #001a33;
}
.tcp-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

.tcp-btn-icon {
    width: 40px;
    padding: 10px;
    background: #64748b;
}
.tcp-btn-icon:hover {
    background: #475569;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 640px) {
    .teams-premium-grid { grid-template-columns: 1fr; }
    .tcp-stats-row { grid-template-columns: repeat(2, 1fr); }
    .tcp-record { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .tcp-record-val { font-size: 1.25rem; }
    .tcp-logo { width: 54px; height: 54px; font-size: 1.2rem; }
    .tcp-name { font-size: 1rem; }
    .tcp-actions { flex-wrap: wrap; }
    .tcp-btn-primary, .tcp-btn-secondary { min-width: 0; flex: 1 1 calc(50% - 4px); }
    .tcp-btn-icon { flex: 0 0 40px; }
}

/* ============================================================
   DARK MODE — Dashboard y Equipos premium
   ============================================================ */
[data-theme="dark"] .dsh-stat-card,
[data-theme="dark"] .dsh-standings-block,
[data-theme="dark"] .dsh-leader-block,
[data-theme="dark"] .team-card-premium {
    background: #25253b;
    border-color: #3d3d5c;
}

[data-theme="dark"] .dsh-stat-card .stat-value {
    background: linear-gradient(135deg, #fcd34d, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .dsh-stat-card .stat-card-header i {
    background: #2d2d45;
}

[data-theme="dark"] .dsh-standings-table,
[data-theme="dark"] .dsh-standings-table thead th {
    background: #25253b;
    color: #b0b0c8;
    border-color: #3d3d5c;
}
[data-theme="dark"] .dsh-standings-row td { color: #e8e8f0; }
[data-theme="dark"] .dsh-standings-row:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent);
}
[data-theme="dark"] .dsh-team-name { color: #e8e8f0; }

[data-theme="dark"] .dsh-leader-item {
    background: #2a2a3e;
}
[data-theme="dark"] .dsh-leader-item:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), #25253b);
}
[data-theme="dark"] .dsh-leader-name { color: #e8e8f0; }
[data-theme="dark"] .dsh-leader-section { border-color: #3d3d5c; }
[data-theme="dark"] .dsh-leader-section-title { color: #b0b0c8; }

[data-theme="dark"] .tcp-name { color: #e8e8f0; }
[data-theme="dark"] .tcp-record {
    background: linear-gradient(180deg, #2a2a3e, #25253b);
    border-color: #3d3d5c;
}
[data-theme="dark"] .tcp-record-val { color: #e8e8f0; }
[data-theme="dark"] .tcp-stat {
    background: #2a2a3e;
    border-color: #3d3d5c;
}
[data-theme="dark"] .tcp-stat:hover { background: #333351; }
[data-theme="dark"] .tcp-stat-val { color: #e8e8f0; }
[data-theme="dark"] .tcp-top-players {
    background: linear-gradient(135deg, #3d3d1a, #25253b);
    border-color: rgba(212, 175, 55, 0.4);
}
[data-theme="dark"] .tcp-top-item:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .tcp-top-name { color: #e8e8f0; }
[data-theme="dark"] .tcp-players-count {
    color: #b0b0c8;
    border-color: #3d3d5c;
}
[data-theme="dark"] .tcp-rank-badge {
    background: #2d2d45;
    color: #b0b0c8;
    border-color: #3d3d5c;
}
[data-theme="dark"] .dsh-empty { color: #e8e8f0; }

/* ============================================================
   PARTIDOS PREMIUM (GPX / GPC)
   ============================================================ */

.gpx-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Banner stats --- */
.gpx-banner {
    position: relative;
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 51, 102, 0.2);
}
.gpx-banner-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 30%, rgba(0, 71, 171, 0.4), transparent 45%),
        radial-gradient(circle at 90% 20%, rgba(212, 175, 55, 0.25), transparent 45%);
    pointer-events: none;
}
.gpx-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.gpx-banner-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
.gpx-banner-head h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gpx-banner-head h3 i { color: var(--gold); }
.gpx-banner-head small {
    font-size: 0.78rem;
    opacity: 0.8;
    display: block;
    margin-top: 3px;
    font-weight: 600;
}

.gpx-btn-new {
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #fcd34d, #d4af37);
    color: #001a33;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
    transition: all 0.2s;
}
.gpx-btn-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.5);
}

.gpx-banner-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
.gpx-bstat {
    padding: 12px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    backdrop-filter: blur(6px);
    transition: all 0.2s;
}
.gpx-bstat:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
.gpx-bstat i {
    font-size: 1rem;
    color: var(--gold);
    display: block;
    margin-bottom: 4px;
}
.gpx-bstat b {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.5px;
}
.gpx-bstat small {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.7;
    font-weight: 700;
    margin-top: 4px;
}
.gpx-bstat-success i { color: #6fcf97; }
.gpx-bstat-warning i { color: #fcd34d; }
.gpx-bstat-info i    { color: #6ab0f7; }

/* --- Tabs de filtro --- */
.gpx-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gpx-tabs::-webkit-scrollbar { display: none; }

.gpx-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.gpx-tab i { font-size: 0.85rem; }
.gpx-tab em {
    font-style: normal;
    background: #e2e8f0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 900;
    margin-left: 2px;
}
.gpx-tab:hover {
    background: #f1f5f9;
    color: #003366;
}
.gpx-tab.is-active {
    background: linear-gradient(135deg, #003366, #0047AB);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.3);
}
.gpx-tab.is-active em {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.gpx-tab.is-active i { color: var(--gold); }

/* --- Filtros --- */
.gpx-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.gpx-search {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.2s;
}
.gpx-search:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}
.gpx-search i { color: var(--gold-dark); }
.gpx-search input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
    background: transparent;
    color: #1a202c;
}
.gpx-select {
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1a202c;
    cursor: pointer;
}
.gpx-select:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

.gpx-btn-secondary {
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    background: #fff;
    border: 2px solid var(--gold);
    color: var(--gold-dark);
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
}
.gpx-btn-secondary:hover {
    background: var(--gold);
    color: #001a33;
}

/* --- Grupos por fecha --- */
.gpx-day-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gpx-day-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent);
    border-left: 4px solid var(--gold);
    border-radius: 0 12px 12px 0;
    font-weight: 800;
}
.gpx-day-header i { color: var(--gold-dark); font-size: 1rem; }
.gpx-day-header span {
    font-size: 0.92rem;
    color: #003366;
    text-transform: capitalize;
    letter-spacing: -0.2px;
}
.gpx-day-header em {
    font-style: normal;
    margin-left: auto;
    font-size: 0.72rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 800;
}

.gpx-day-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}

/* --- Empty state --- */
.gpx-empty {
    text-align: center;
    padding: 50px 20px;
    background: linear-gradient(180deg, #fafbfd, #f0f4fa);
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}
.gpx-empty i {
    font-size: 2.4rem;
    color: var(--gold);
    display: block;
    margin-bottom: 12px;
    animation: float 3s ease-in-out infinite;
}
.gpx-empty p {
    font-weight: 800;
    color: #003366;
    margin: 0 0 4px;
    font-size: 1rem;
}
.gpx-empty small { color: #94a3b8; font-size: 0.82rem; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ============================================================
   CARD INDIVIDUAL DE PARTIDO (GPC)
   ============================================================ */
.gpc-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.07);
    border: 1px solid #e2e8f0;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.gpc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 51, 102, 0.15);
    border-color: var(--gold);
}
.gpc-stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background-size: 200% 100%;
    animation: gpcShimmer 4s linear infinite;
}
@keyframes gpcShimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.gpc-scheduled .gpc-stripe { background: linear-gradient(90deg, #f39c12, #fcd34d, #f39c12); background-size: 200% 100%; }
.gpc-completed .gpc-stripe { background: linear-gradient(90deg, #27AE60, #6fcf97, #27AE60); background-size: 200% 100%; }
.gpc-cancelled .gpc-stripe { background: linear-gradient(90deg, #e53e3e, #fca5a5, #e53e3e); background-size: 200% 100%; }

.gpc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gpc-head-left { display: flex; gap: 6px; flex-wrap: wrap; }
.gpc-cat {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.gpc-playoff {
    background: linear-gradient(135deg, #fcd34d, #d4af37);
    color: #001a33;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
}
.gpc-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
}
.gpc-status-scheduled { background: linear-gradient(135deg, #f39c12, #d68910); }
.gpc-status-completed { background: linear-gradient(135deg, #27AE60, #1e8449); }
.gpc-status-cancelled { background: linear-gradient(135deg, #e53e3e, #c0392b); }

.gpc-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.73rem;
    color: #64748b;
    font-weight: 600;
}
.gpc-meta i { color: var(--gold-dark); margin-right: 3px; }

.gpc-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px dashed #e2e8f0;
    border-bottom: 1px dashed #e2e8f0;
}
.gpc-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 12px;
    transition: all 0.2s;
}
.gpc-team.is-winner {
    background: linear-gradient(180deg, #fef9e7, transparent);
}
.gpc-tlogo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.1rem;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
}
.gpc-tlogo img { width: 100%; height: 100%; object-fit: cover; }
.gpc-card:hover .gpc-tlogo {
    transform: scale(1.08) rotate(-4deg);
}
.gpc-tname {
    font-weight: 800;
    font-size: 0.85rem;
    color: #0a1a2b;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.gpc-trole {
    font-size: 0.58rem;
    color: #94a3b8;
    letter-spacing: 1px;
    font-weight: 800;
}

.gpc-center { display: flex; align-items: center; justify-content: center; }
.gpc-score {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
}
.gpc-score .is-w { color: #27AE60; text-shadow: 0 2px 12px rgba(39, 174, 96, 0.3); }
.gpc-score .is-l { color: #e53e3e; }
.gpc-score .is-t { color: #f39c12; }
.gpc-sep {
    color: #cbd5e1;
    font-weight: 700;
    font-size: 1.2rem;
}
.gpc-vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0047AB, #003366);
    color: var(--gold);
    font-weight: 900;
    font-size: 0.85rem;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(0, 71, 171, 0.3);
}

.gpc-series {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    font-size: 0.74rem;
    color: #78350f;
    font-weight: 700;
    flex-wrap: wrap;
}
.gpc-series i { color: var(--gold-dark); }
.gpc-series span {
    margin-left: auto;
    background: linear-gradient(135deg, #D4AF37, #b8960e);
    color: #001a33;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.72rem;
}

.gpc-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.gpc-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
}
.gpc-view {
    flex: 1;
    background: linear-gradient(135deg, #0047AB, #003366);
    min-width: 130px;
}
.gpc-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 71, 171, 0.4);
}
.gpc-icon {
    width: 38px;
    padding: 8px;
    min-width: 0;
    flex: 0 0 38px;
}
.gpc-stats { background: #27AE60; }
.gpc-sb    { background: #D4AF37; color: #001a33; }
.gpc-edit  { background: #64748b; }
.gpc-del   { background: #e53e3e; }
.gpc-icon:hover { transform: translateY(-2px); }

/* --- Responsive --- */
@media (max-width: 640px) {
    .gpx-banner { padding: 18px 14px; }
    .gpx-banner-head h3 { font-size: 1.1rem; }
    .gpx-banner-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .gpx-bstat { padding: 8px 6px; border-radius: 10px; }
    .gpx-bstat b { font-size: 1.25rem; }
    .gpx-bstat small { font-size: 0.55rem; }
    .gpx-bstat i { font-size: 0.85rem; margin-bottom: 2px; }
    .gpx-tab { padding: 9px 12px; font-size: 0.75rem; }
    .gpx-tab em { font-size: 0.62rem; padding: 1px 6px; }
    .gpx-day-cards { grid-template-columns: 1fr; }
    .gpx-day-header { padding: 8px 12px; }
    .gpx-day-header span { font-size: 0.82rem; }
    .gpx-select, .gpx-search { padding: 10px 12px; }
    .gpc-tname { font-size: 0.78rem; max-width: 90px; }
    .gpc-tlogo { width: 44px; height: 44px; font-size: 0.95rem; }
    .gpc-score { font-size: 1.6rem; }
    .gpc-card { padding: 12px; border-radius: 14px; }
    .gpc-icon { width: 34px; flex: 0 0 34px; padding: 7px; }
}

@media (max-width: 400px) {
    .gpx-banner-stats { grid-template-columns: repeat(2, 1fr); }
    .gpx-tab span { display: none; }
    .gpx-tab { padding: 9px 10px; }
    .gpc-teams { grid-template-columns: 1fr; gap: 8px; }
    .gpc-center { order: -1; }
}

/* --- Modo oscuro --- */
[data-theme="dark"] .gpx-tabs,
[data-theme="dark"] .gpx-search,
[data-theme="dark"] .gpx-select,
[data-theme="dark"] .gpx-btn-secondary {
    background: #25253b;
    border-color: #3d3d5c;
    color: #e8e8f0;
}
[data-theme="dark"] .gpx-search input { color: #e8e8f0; }
[data-theme="dark"] .gpx-search input::placeholder { color: #8a8aa0; }
[data-theme="dark"] .gpx-tab { color: #b0b0c8; }
[data-theme="dark"] .gpx-tab:hover { background: #2a2a3e; color: #fcd34d; }
[data-theme="dark"] .gpx-tab em { background: #3d3d5c; color: #b0b0c8; }
[data-theme="dark"] .gpx-day-header {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), transparent);
}
[data-theme="dark"] .gpx-day-header span { color: #e8e8f0; }
[data-theme="dark"] .gpx-day-header em { background: #2d2d45; color: #b0b0c8; }
[data-theme="dark"] .gpx-empty {
    background: linear-gradient(180deg, #25253b, #2a2a3e);
    border-color: #3d3d5c;
}
[data-theme="dark"] .gpx-empty p { color: #e8e8f0; }
[data-theme="dark"] .gpc-card {
    background: #25253b;
    border-color: #3d3d5c;
}
[data-theme="dark"] .gpc-tname { color: #e8e8f0; }
[data-theme="dark"] .gpc-cat { background: #2d2d45; color: #b0b0c8; }
[data-theme="dark"] .gpc-meta { color: #b0b0c8; }
[data-theme="dark"] .gpc-teams { border-color: #3d3d5c; }
[data-theme="dark"] .gpc-team.is-winner {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.15), transparent);
}
[data-theme="dark"] .gpc-series {
    background: #3d3d1a;
    border-color: #b8960e;
    color: #fcd34d;
}

/* ============================================================
   PESTAÑA ESTADÍSTICAS — PREMIUM
   ============================================================ */

.stats-tab-wrapper {
    padding: 20px !important;
    background: #f4f6fa !important;
    border-radius: 20px !important;
}

.stx-hidden-native {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    width: 0;
    opacity: 0;
}

/* ========== HERO ========== */
.stx-hero {
    position: relative;
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 12px 40px rgba(0, 51, 102, 0.25);
}
.stx-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 30%, rgba(0, 71, 171, 0.4), transparent 45%),
        radial-gradient(circle at 90% 20%, rgba(212, 175, 55, 0.25), transparent 45%);
    pointer-events: none;
}
.stx-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.stx-hero-top {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

.stx-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fcd34d, #d4af37);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #001a33;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
    flex-shrink: 0;
}

.stx-hero-info { flex: 1; min-width: 180px; }
.stx-hero-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    opacity: 0.7;
    margin-bottom: 4px;
}
.stx-hero-title {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.stx-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.stx-select-hero {
    padding: 10px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.2s;
    max-width: 240px;
}
.stx-select-hero:hover { background: rgba(255, 255, 255, 0.18); }
.stx-select-hero:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}
.stx-select-hero option {
    background: #003366;
    color: #fff;
}

.stx-btn-hero {
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #fcd34d, #d4af37);
    color: #001a33;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
    transition: all 0.2s;
}
.stx-btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.5);
}

/* Season info dentro del hero */
.stx-season-info {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.stx-season-info:empty { display: none; }

.stx-season-info .badge,
.stx-season-info .badge-success,
.stx-season-info .badge-warning {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}


.stx-season-info h3 {
    color: #fff !important;
    font-size: 1.1rem;
    margin: 0 0 4px;
    font-weight: 800;
}
.stx-season-info p { margin: 0; opacity: 0.85; font-size: 0.85rem; }
.stx-season-info span { font-size: 0.8rem; opacity: 0.9; }
.stx-season-info i { color: var(--gold); }

/* ========== FILTROS ========== */
.stx-filters {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 16px 18px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.stx-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 200px;
}

.stx-filter-group label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.stx-filter-group label i { color: var(--gold-dark); }

.stx-filter-select {
    padding: 11px 14px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1a202c;
    cursor: pointer;
    transition: all 0.2s;
}
.stx-filter-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
    outline: none;
    background: #fff;
}

/* Segmented control */
.stx-segmented {
    display: inline-flex;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.stx-seg-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: #64748b;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stx-seg-btn i { font-size: 0.75rem; }
.stx-seg-btn:hover { color: #003366; }
.stx-seg-btn.is-active {
    background: linear-gradient(135deg, #003366, #0047AB);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.3);
}
.stx-seg-btn.is-active i { color: var(--gold); }

.stx-filter-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.stx-btn-ghost {
    padding: 11px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #003366;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stx-btn-ghost:hover {
    border-color: #003366;
    background: #f1f5f9;
    transform: translateY(-2px);
}
.stx-btn-ghost.success { color: #1e8449; border-color: #a7f3d0; background: #ecfdf5; }
.stx-btn-ghost.success:hover { background: #d1fae5; border-color: #27AE60; }

/* ========== SECCIONES ========== */
.stx-section {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
}
.stx-section:last-child { margin-bottom: 0; }

.stx-section-inner {
    margin-top: 20px;
    margin-bottom: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.stx-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px dashed #e2e8f0;
}

.stx-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.stx-section-title > i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #003366, #0047AB);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.stx-section-main {
    font-size: 1.05rem;
    font-weight: 900;
    color: #003366;
    letter-spacing: -0.2px;
}
.stx-section-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 700;
    margin-top: 2px;
    text-transform: capitalize;
}

.stx-team-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
    flex: 1;
    max-width: 340px;
    min-width: 220px;
}
.stx-team-picker:focus-within {
    border-color: var(--gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}
.stx-team-picker > i { color: var(--gold-dark); font-size: 0.9rem; }
.stx-team-picker select {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1a202c;
    cursor: pointer;
    outline: none;
}

/* ========== STANDINGS BLOCK ========== */
.stx-standings-block {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 20px;
}
.stx-standings-block:last-child { margin-bottom: 0; }

.stx-standings-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    position: relative;
}
.stx-standings-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.stx-cat-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.stx-cat-A { background: linear-gradient(135deg, #f6c445, #b8960e); color: #001a33; }
.stx-cat-B { background: linear-gradient(135deg, #3498db, #2176ae); }
.stx-cat-C { background: linear-gradient(135deg, #27AE60, #1e8449); }

.stx-cat-label {
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.2px;
    flex: 1;
}
.stx-cat-count {
    font-size: 0.72rem;
    opacity: 0.75;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ========== TABLA ========== */
.stx-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

.stx-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: #fff;
}

.stx-table thead th {
    background: #f8fafc;
    color: #475569;
    padding: 12px 10px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 800;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.stx-table thead th:nth-child(2) { text-align: left; padding-left: 16px; }

.stx-row {
    cursor: pointer;
    transition: all 0.18s;
    border-bottom: 1px solid #f1f5f9;
}
.stx-row:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.06), transparent);
}
.stx-row:last-child { border-bottom: none; }

/* Top 3 destacados */
.stx-row.stx-top-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.12), transparent);
    border-left: 4px solid #ffd700;
}
.stx-row.stx-top-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), transparent);
    border-left: 4px solid #c0c0c0;
}
.stx-row.stx-top-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent);
    border-left: 4px solid #cd7f32;
}

.stx-row td {
    padding: 12px 10px;
    text-align: center;
    color: #334155;
    font-weight: 600;
}

/* Rank */
.stx-rank { width: 50px; text-align: center; }
.stx-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #475569;
    font-weight: 900;
    font-size: 0.82rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}
.stx-row:hover .stx-rank-badge { transform: scale(1.1); }

.stx-row.stx-top-1 .stx-rank-badge {
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #7a5c00;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
    animation: stxGoldGlow 2.5s infinite;
}
.stx-row.stx-top-2 .stx-rank-badge {
    background: linear-gradient(135deg, #e8e8e8, #a8a8a8);
    color: #4a4a4a;
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.5);
}
.stx-row.stx-top-3 .stx-rank-badge {
    background: linear-gradient(135deg, #cd7f32, #a05a1f);
    color: #fff;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.5);
}
@keyframes stxGoldGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 4px 22px rgba(255, 215, 0, 0.85); }
}

/* Team cell */
.stx-team-cell {
    text-align: left !important;
    padding-left: 16px !important;
    min-width: 180px;
}
.stx-team-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stx-team-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.82rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.stx-team-logo img { width: 100%; height: 100%; object-fit: cover; }
.stx-team-logo.small {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
}

.stx-team-info { min-width: 0; }
.stx-team-name {
    font-weight: 800;
    color: #0a1a2b;
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stx-team-cat {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 700;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Numeric cells */
.stx-num-cell {
    text-align: center;
    font-weight: 700;
    color: #0a1a2b;
    white-space: nowrap;
}
.stx-num-cell.stx-w { color: #27AE60; font-weight: 900; }
.stx-num-cell.stx-l { color: #E74C3C; font-weight: 900; }
.stx-num-cell.stx-t { color: #f39c12; font-weight: 900; }
.stx-num-cell.stx-diff { font-weight: 900; }
.stx-num-cell.stx-diff.pos { color: #27AE60; }
.stx-num-cell.stx-diff.neg { color: #E74C3C; }
.stx-num-cell.stx-diff.neu { color: #95a5a6; }
.stx-num-cell.stx-runs { color: #27AE60; font-weight: 800; }
.stx-num-cell.stx-hits { color: #003366; font-weight: 900; }
.stx-num-cell.stx-hr { color: #E74C3C; font-weight: 900; }
.stx-num-cell.stx-rbi { color: #006B5A; font-weight: 900; }
.stx-num-cell.stx-so { color: #c0392b; }
.stx-num-cell.stx-ops { color: #a57917; font-weight: 900; }

.stx-col-pct { width: 70px; }

/* Pills */
.stx-pct-pill, .stx-avg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.75rem;
    background: #f1f5f9;
    color: #475569;
    letter-spacing: -0.2px;
}
.stx-avg-pill.is-green { background: #ecfdf5; color: #1e8449; }
.stx-avg-pill.is-gold { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #a57917; box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3); }

/* ========== TEAM STATS — HERO ========== */
.stx-team-stats-container {
    min-height: 200px;
    animation: stxSlideIn 0.35s ease;
}
@keyframes stxSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stx-team-hero {
    position: relative;
    padding: 24px;
    border-radius: 18px;
    color: #fff;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.2);
}
.stx-team-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.15), transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.3), transparent 50%);
    pointer-events: none;
}
.stx-team-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.stx-team-hero-logo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 2rem;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.stx-team-hero-logo img { width: 100%; height: 100%; object-fit: cover; }

.stx-team-hero-info { flex: 1; min-width: 200px; }
.stx-team-hero-name {
    font-size: 1.7rem;
    font-weight: 900;
    margin: 0 0 10px;
    letter-spacing: -0.6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
}
.stx-team-hero-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.stx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.stx-hero-badge i { color: var(--gold); font-size: 0.7rem; }
.stx-hero-phase { background: rgba(212, 175, 55, 0.25); border-color: rgba(212, 175, 55, 0.5); }

.stx-team-hero-pos {
    text-align: center;
    padding: 12px 22px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    flex-shrink: 0;
}
.stx-team-pos-value {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    color: var(--gold);
    letter-spacing: -1px;
    text-shadow: 0 2px 12px rgba(212, 175, 55, 0.5);
}
.stx-team-pos-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
    opacity: 0.75;
    margin-top: 4px;
}

/* ========== TEAM STATS — MÉTRICAS ========== */
.stx-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stx-metric-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 51, 102, 0.04);
    transition: all 0.22s;
}
.stx-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 51, 102, 0.1);
    border-color: var(--gold);
}
.stx-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.stx-metric-body { min-width: 0; }
.stx-metric-value {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    color: #0a1a2b;
    letter-spacing: -0.7px;
}
.stx-metric-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    font-weight: 800;
    margin-top: 4px;
}

/* ========== GAMES GRID ========== */
.stx-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.stx-game-card {
    position: relative;
    padding: 14px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 51, 102, 0.04);
    cursor: pointer;
    transition: all 0.24s;
    overflow: hidden;
}
.stx-game-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 5px;
    height: 100%;
}
.stx-game-win::before { background: linear-gradient(180deg, #27AE60, #6fcf97); }
.stx-game-loss::before { background: linear-gradient(180deg, #E74C3C, #fca5a5); }
.stx-game-tie::before { background: linear-gradient(180deg, #f39c12, #fcd34d); }

.stx-game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 51, 102, 0.12);
    border-color: var(--gold);
}

.stx-game-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.stx-game-date {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.stx-game-date i { color: var(--gold-dark); }
.stx-game-po {
    background: #fef3c7;
    color: #a57917;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 900;
}
.stx-game-result {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.5px;
}
.stx-game-result-win { background: linear-gradient(135deg, #27AE60, #1e8449); }
.stx-game-result-loss { background: linear-gradient(135deg, #E74C3C, #c0392b); }
.stx-game-result-tie { background: linear-gradient(135deg, #f39c12, #d68910); }

.stx-game-vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}
.stx-game-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.stx-game-team.is-winner .stx-game-name {
    color: #27AE60;
    font-weight: 900;
}
.stx-game-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.9rem;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
.stx-game-logo img { width: 100%; height: 100%; object-fit: cover; }
.stx-game-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0a1a2b;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.stx-game-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}
.stx-game-score .is-w { color: #27AE60; }
.stx-game-score .is-l { color: #E74C3C; }
.stx-game-score .is-t { color: #f39c12; }
.stx-game-sep { color: #cbd5e1; font-weight: 700; font-size: 1rem; }

.stx-game-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #f1f5f9;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
}
.stx-game-role { display: inline-flex; align-items: center; gap: 4px; }
.stx-game-label {
    padding: 2px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 800;
}

/* ========== EMPTY STATES ========== */
.stx-empty, .stx-empty-picker, .stx-team-empty {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(180deg, #fafbfd, #f0f4fa);
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}
.stx-empty i, .stx-empty-picker i {
    font-size: 2.4rem;
    color: var(--gold);
    display: block;
    margin-bottom: 12px;
    animation: float 3s ease-in-out infinite;
}
.stx-empty p, .stx-empty-picker p {
    font-weight: 800;
    color: #003366;
    margin: 0 0 4px;
    font-size: 1rem;
}
.stx-empty small, .stx-empty-picker small { color: #94a3b8; font-size: 0.82rem; }

.stx-team-empty-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.6rem;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.stx-team-empty-logo img { width: 100%; height: 100%; object-fit: cover; }
.stx-team-empty h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    color: #003366;
    font-weight: 900;
}
.stx-team-empty p {
    margin: 0 0 4px;
    color: #64748b;
    font-weight: 700;
}
.stx-team-empty small { color: #94a3b8; }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    .stx-metrics-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .stx-hero { padding: 18px; }
    .stx-hero-title { font-size: 1.2rem; }
    .stx-hero-icon { width: 48px; height: 48px; font-size: 1.3rem; }
    .stx-hero-actions { width: 100%; }
    .stx-select-hero { flex: 1; max-width: none; }
    .stx-btn-hero span { display: none; }

    .stx-team-hero { padding: 18px; }
    .stx-team-hero-logo { width: 68px; height: 68px; font-size: 1.5rem; }
    .stx-team-hero-name { font-size: 1.3rem; }
    .stx-team-hero-pos { padding: 10px 16px; }
    .stx-team-pos-value { font-size: 1.5rem; }

    .stx-metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stx-metric-card { padding: 12px; gap: 10px; }
    .stx-metric-value { font-size: 1.2rem; }
    .stx-metric-icon { width: 34px; height: 34px; font-size: 0.9rem; }

    .stx-games-grid { grid-template-columns: 1fr; }

    .stx-filters { padding: 14px; }
    .stx-filter-group { min-width: 100%; }
    .stx-filter-actions { width: 100%; }
    .stx-filter-actions .stx-btn-ghost { flex: 1; justify-content: center; }

    .stx-section { padding: 16px; }
    .stx-team-picker { max-width: none; }
}

@media (max-width: 480px) {
    .stx-hero { border-radius: 16px; }
    .stx-hero-title { font-size: 1rem; }
    .stx-hero-label { font-size: 0.62rem; letter-spacing: 1.4px; }
    

    .stx-team-hero-content { flex-direction: column; align-items: center; text-align: center; }
    .stx-team-hero-meta { justify-content: center; }
    .stx-team-hero-pos { width: 100%; }

    .stx-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .stx-metric-value { font-size: 1.05rem; }

    .stx-seg-btn { padding: 7px 12px; font-size: 0.72rem; }
    .stx-seg-btn i { font-size: 0.68rem; }

    .stx-section-title > i { width: 34px; height: 34px; font-size: 0.9rem; }
    .stx-section-main { font-size: 0.92rem; }

    .stx-table { font-size: 0.75rem; min-width: 520px; }
    .stx-table thead th { padding: 9px 6px; font-size: 0.6rem; }
    .stx-row td { padding: 9px 6px; }
    .stx-rank-badge { width: 26px; height: 26px; font-size: 0.7rem; }
    .stx-team-logo { width: 28px; height: 28px; font-size: 0.7rem; }
    .stx-team-name { font-size: 0.8rem; }
    .stx-team-cat { font-size: 0.6rem; }
}

/* ========== DARK MODE ========== */
[data-theme="dark"] .stats-tab-wrapper { background: #1a1a2e !important; }
[data-theme="dark"] .stx-filters,
[data-theme="dark"] .stx-section,
[data-theme="dark"] .stx-metric-card,
[data-theme="dark"] .stx-game-card,
[data-theme="dark"] .stx-standings-block,
[data-theme="dark"] .stx-table {
    background: #25253b;
    border-color: #3d3d5c;
}
[data-theme="dark"] .stx-section-main { color: #e8e8f0; }
[data-theme="dark"] .stx-section-sub { color: #8a8aa0; }
[data-theme="dark"] .stx-section-head { border-color: #3d3d5c; }

[data-theme="dark"] .stx-filter-group label { color: #b0b0c8; }
[data-theme="dark"] .stx-filter-select {
    background: #2d2d45;
    color: #e8e8f0;
    border-color: #3d3d5c;
}
[data-theme="dark"] .stx-filter-select:focus { background: #2d2d45; }
[data-theme="dark"] .stx-segmented { background: #2d2d45; border-color: #3d3d5c; }
[data-theme="dark"] .stx-seg-btn { color: #b0b0c8; }
[data-theme="dark"] .stx-seg-btn:hover { color: #fcd34d; }
[data-theme="dark"] .stx-btn-ghost {
    background: #2d2d45;
    color: #e8e8f0;
    border-color: #3d3d5c;
}
[data-theme="dark"] .stx-btn-ghost:hover { background: #3d3d5c; border-color: #fcd34d; }
[data-theme="dark"] .stx-btn-ghost.success { background: #1a3a2a; color: #6fcf97; border-color: #27ae60; }

[data-theme="dark"] .stx-table thead th {
    background: #1e1e2f;
    color: #b0b0c8;
    border-color: #3d3d5c;
}
[data-theme="dark"] .stx-row { border-color: #3d3d5c; }
[data-theme="dark"] .stx-row:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), transparent);
}
[data-theme="dark"] .stx-row td { color: #e8e8f0; }
[data-theme="dark"] .stx-team-name { color: #e8e8f0; }
[data-theme="dark"] .stx-rank-badge {
    background: linear-gradient(135deg, #3d3d5c, #2d2d45);
    color: #b0b0c8;
    border-color: #25253b;
}

[data-theme="dark"] .stx-team-picker {
    background: #2d2d45;
    border-color: #3d3d5c;
}
[data-theme="dark"] .stx-team-picker > i { color: #fcd34d; }
[data-theme="dark"] .stx-team-picker select { color: #e8e8f0; }

[data-theme="dark"] .stx-metric-icon { opacity: 0.85; }
[data-theme="dark"] .stx-metric-value { color: #e8e8f0; }
[data-theme="dark"] .stx-metric-card:hover { border-color: #fcd34d; }

[data-theme="dark"] .stx-game-name { color: #e8e8f0; }
[data-theme="dark"] .stx-game-foot { border-color: #3d3d5c; color: #8a8aa0; }
[data-theme="dark"] .stx-game-label { background: #2d2d45; color: #b0b0c8; }

[data-theme="dark"] .stx-empty,
[data-theme="dark"] .stx-empty-picker,
[data-theme="dark"] .stx-team-empty {
    background: linear-gradient(180deg, #25253b, #2a2a3e);
    border-color: #3d3d5c;
}
[data-theme="dark"] .stx-empty p,
[data-theme="dark"] .stx-empty-picker p,
[data-theme="dark"] .stx-team-empty h3 { color: #e8e8f0; }
[data-theme="dark"] .stx-team-empty p { color: #b0b0c8; }

/* ============================================================
   GLOBAL iOS SAFARI + RESPONSIVE PREMIUM
   ============================================================ */

/* ---- 1. Prevenir overflow horizontal global ---- */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    /* NO overscroll-behavior aquí, rompe scroll en iOS */
    /* NO overflow-y aquí, deja el default (visible → auto) */
}

/* Asegurar que ningún hijo rompa el ancho */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Prevenir que contenedores flex/grid desborden por hijos con min-width */
.flex-1, .stx-team-info, .gsm-team-name, .pmp-hero-info, .stx-cat-label,
.tcp-info, .pcp-header-info, .gpc-team, .gpx-banner-head, .dsh-leader-info {
    min-width: 0;
}

/* ---- 2. Prevenir zoom automático en iOS al enfocar inputs ---- */
@media screen and (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select,
    textarea,
    .input-group input,
    .input-group select,
    .input-group textarea,
    .stx-filter-select,
    .stx-select-hero,
    .gpx-search input,
    .gpx-select,
    .stx-team-picker select,
    #gameSearch,
    #gameCategoryFilter,
    #seasonSelector,
    #statsCategoryFilter,
    #statsPhaseFilter,
    #teamStatsFilter,
    #docSeasonSelector,
    #teamSearch,
    #playerSearch,
    #teamFilter,
    #playerCategoryFilter,
    #dashboardCategoryFilter,
    #dashboardPhaseFilter {
        font-size: 16px !important;
    }
}

/* ---- 3. Safe area (notch / home indicator iOS) ---- */
.navbar {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
}

.app-container {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer {
    padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
}

.modal-overlay {
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.modal-footer {
    padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
}

/* ---- 4. Scroll suave con inercia iOS ---- */
.modal-body,
.gsm-body,
.pmp-body,
.stx-team-stats-container,
.players-list,
.documents-grid,
.table-responsive,
.stx-table-wrap {
    -webkit-overflow-scrolling: touch;
}

/* ---- 5. Tap delay fix ---- */
button, a, input, select, textarea, [onclick] {
    touch-action: manipulation;
}

/* ---- 6. Fonts y text rendering iOS ---- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- 7. Landscape iPhone (altura corta) ---- */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .login-container {
        align-items: flex-start;
        padding: 10px;
        min-height: auto;
    }
    .login-box {
        padding: 18px 22px;
        max-width: 480px;
        margin-top: 10px;
    }
    .league-logo { width: 70px; height: 70px; margin-bottom: 10px; }
    .login-box h2 { font-size: 1.3rem; }
    .modal-overlay { align-items: flex-start; padding: 8px; }
    .modal { max-height: calc(100vh - 16px); }
    .gsm-hero, .pmp-hero, .stx-hero, .stx-team-hero { padding: 12px 14px !important; }
    .gsm-team-avatar, .pmp-hero-number { width: 44px !important; height: 44px !important; font-size: 1rem !important; }
}

/* ---- 8. Ajustes iPhone mini / SE (375px) ---- */
@media (max-width: 380px) {
    html { font-size: 13px; }

    .navbar { padding: 8px 10px; }
    .nav-logo-img { width: 36px; height: 36px; }
    .nav-logo-text h1 { font-size: 0.78rem; line-height: 1.1; }
    .nav-logo-text span { font-size: 0.58rem; }
    .user-info-container { padding: 3px 8px 3px 10px; gap: 6px; }
    .user-badge { font-size: 0.65rem; padding: 3px 9px; }
    .user-badge span { font-size: 0.65rem; }
    #logoutBtn { width: 30px; height: 30px; font-size: 0.75rem; }
    .theme-toggle-btn { width: 32px; height: 32px; font-size: 0.9rem; margin-right: 4px; }

    .tabs-header { padding: 6px 8px; gap: 4px; }
    .tab-btn { padding: 8px 12px; font-size: 0.72rem; }
    .tab-btn i { font-size: 0.85rem; }
    .tab-btn .tab-text { font-size: 0.68rem; }

    .tab-section { padding: 12px; border-radius: 12px; }
    .tab-title { font-size: 1.1rem; padding-bottom: 10px; margin-bottom: 14px; }

    .section-header h2 { font-size: 0.95rem; }
    .section-header { gap: 8px; }

    .footer { padding: 16px 12px; }
    .footer p { font-size: 0.7rem; }
    .footer-brand-tag { font-size: 0.72rem; padding: 5px 12px; }

    .btn { font-size: 0.78rem; padding: 9px 14px; }
    .btn-small { font-size: 0.68rem; padding: 5px 10px; }

    .input-group input, .input-group select, .input-group textarea { padding: 10px 12px; }

    .login-box { padding: 22px 18px; max-width: 100%; }
    .league-logo { width: 100px; height: 100px; border-width: 3px; }
    .login-box h2 { font-size: 1.4rem; }
    .login-box h2 span { font-size: 0.9rem; }
    .login-subtitle { font-size: 0.75rem; letter-spacing: 1px; }
    .login-tag { padding: 8px 16px; font-size: 0.78rem; margin-bottom: 16px; }
    .login-btn, .admin-toggle { padding: 12px; font-size: 0.85rem; }
}

/* ---- 9. Ajustes iPhone SE 1ª gen / muy pequeño (320px) ---- */
@media (max-width: 340px) {
    html { font-size: 12px; }
    .nav-logo-text h1 { font-size: 0.7rem; }
    .nav-logo-text span { font-size: 0.5rem; }
    .tab-btn { padding: 6px 8px; font-size: 0.65rem; }
    .tab-btn i { display: none; }
    .tab-title { font-size: 1rem; }
    .league-logo { width: 80px; height: 80px; }
    .login-box h2 { font-size: 1.2rem; }
}

/* ---- 10. Modal responsive global premium ---- */
@media (max-width: 600px) {
    .modal-overlay { padding: 8px; }
    .modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: calc(100vh - 16px);
        border-radius: 16px !important;
    }
    .modal-header { padding: 12px 14px; border-radius: 16px 16px 0 0; font-size: 0.95rem; }
    .modal-body { padding: 14px 12px; }
    .modal-footer {
        padding: 12px;
        border-radius: 0 0 16px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .modal-footer .btn { flex: 1 1 auto; min-width: 120px; }
    .modal-close { width: 32px; height: 32px; font-size: 1rem; }
}

/* ---- 11. Tablas responsive con scroll suave ---- */
.table-responsive,
.stx-table-wrap,
.sb-sheet .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-responsive::-webkit-scrollbar,
.stx-table-wrap::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb,
.stx-table-wrap::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 10px;
}

/* ============================================================
   RESUMEN DEL PARTIDO (GSM) — FIX Y RESPONSIVE PREMIUM
   ============================================================ */

/* Modal base */
.game-summary-modal-premium {
    max-width: 920px !important;
    width: 100% !important;
    max-height: 94vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 20px !important;
    padding: 0 !important;
    background: #f4f6fa !important;
}

/* ============ HERO ============ */
.gsm-hero {
    position: relative;
    padding: 20px 22px 18px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.gsm-hero-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.gsm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.gsm-badge i { color: var(--gold); font-size: 0.6rem; }

.gsm-hero-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.gsm-hero-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    position: relative;
    min-width: 0;
}

.gsm-team-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.4rem;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}
.gsm-team-avatar img { width: 100%; height: 100%; object-fit: cover; }

.gsm-team-name {
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: -0.2px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    line-height: 1.15;
    max-width: 100%;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gsm-team-role {
    font-size: 0.55rem;
    letter-spacing: 1.2px;
    opacity: 0.7;
    font-weight: 800;
    text-transform: uppercase;
}

/* ============ SCORE CENTRAL ============ */
.gsm-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex-shrink: 0;
}

.gsm-final-score {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.gsm-score {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    color: #fff;
    opacity: 0.75;
    min-width: 22px;
    text-align: center;
}
.gsm-score-winner {
    opacity: 1;
    color: var(--gold);
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.6);
}

.gsm-score-sep {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.gsm-final-label {
    padding: 4px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-light);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ TABS ============ */
.gsm-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    background: #fff;
    border-bottom: 2px solid #e2e8f0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}
.gsm-tabs::-webkit-scrollbar { display: none; }

.gsm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.82rem;
    color: #64748b;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}
.gsm-tab i { color: var(--gold-dark); font-size: 0.85rem; }
.gsm-tab.gsm-tab-active {
    color: #003366;
    border-bottom-color: var(--gold);
}
.gsm-tab:hover { color: #003366; background: #f8fafc; }

/* ============ BODY ============ */
.gsm-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    background: #f4f6fa;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* ============ COMPARATIVA ============ */
.gsm-compare {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
}

.gsm-compare-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #003366, #001a33);
    color: #fff;
    font-weight: 900;
    font-size: 0.82rem;
    text-align: center;
}
.gsm-compare-head span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsm-compare-vs {
    color: var(--gold);
    font-size: 0.7rem;
    letter-spacing: 1.2px;
    opacity: 0.85;
    padding: 0 6px;
    text-transform: uppercase;
}

.gsm-compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.gsm-compare-row:last-child { border-bottom: none; }

.gsm-cmp-home, .gsm-cmp-away {
    font-weight: 800;
    font-size: 1rem;
    color: #64748b;
    text-align: center;
    min-width: 0;
}

.gsm-cmp-winner {
    color: #003366;
    font-size: 1.15rem;
    font-weight: 900;
    position: relative;
}

.gsm-cmp-label {
    text-align: center;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    font-weight: 800;
    line-height: 1.2;
}
.gsm-cmp-label i { color: var(--gold-dark); margin-right: 3px; font-size: 0.6rem; }

/* ============ MVP ============ */
.gsm-mvp-card {
    position: relative;
    margin-bottom: 14px;
    padding: 18px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fcd34d, #d4af37, #b8960e);
    color: #001a33;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
    transition: transform 0.25s;
}
.gsm-mvp-card:hover { transform: translateY(-3px); }

.gsm-mvp-crown {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.6rem;
    opacity: 0.3;
    transform: rotate(15deg);
}

.gsm-mvp-label {
    font-size: 0.6rem;
    letter-spacing: 1.6px;
    font-weight: 900;
    background: rgba(0, 26, 51, 0.15);
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.gsm-mvp-number {
    font-size: 0.8rem;
    font-weight: 800;
    opacity: 0.75;
}

.gsm-mvp-name {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin: 3px 0 10px;
    line-height: 1.15;
    word-break: break-word;
    overflow-wrap: break-word;
}

.gsm-mvp-stats {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 26, 51, 0.15);
}
.gsm-mvp-stats span {
    font-size: 0.72rem;
    background: rgba(0, 26, 51, 0.1);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.gsm-mvp-stats b { font-weight: 900; font-size: 0.85rem; }

/* ============ LÍDERES ============ */
.gsm-leaders {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
}

.gsm-section-title {
    font-weight: 900;
    font-size: 0.85rem;
    color: #003366;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px dashed #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gsm-section-title i { color: var(--gold-dark); font-size: 0.85rem; }

.gsm-leaders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.gsm-leader-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    min-width: 0;
}

.gsm-leader-head {
    font-weight: 900;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gsm-leader-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 0;
}
.gsm-leader-row:hover { background: #fff; }

.gsm-leader-rank {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 900;
    flex-shrink: 0;
}
.gsm-leader-row:nth-child(2) .gsm-leader-rank { background: linear-gradient(135deg, #ffd700, #daa520); color: #7a5c00; }
.gsm-leader-row:nth-child(3) .gsm-leader-rank { background: linear-gradient(135deg, #e8e8e8, #a8a8a8); color: #4a4a4a; }
.gsm-leader-row:nth-child(4) .gsm-leader-rank { background: linear-gradient(135deg, #cd7f32, #a05a1f); color: #fff; }

.gsm-leader-name {
    flex: 1;
    font-size: 0.74rem;
    font-weight: 700;
    color: #0a1a2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.gsm-leader-value {
    font-weight: 900;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* ============ NARRATIVA ============ */
.gsm-narrative {
    display: flex;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border-left: 4px solid var(--gold);
    align-items: flex-start;
    margin-bottom: 8px;
}
.gsm-narrative i {
    color: var(--gold);
    font-size: 1.2rem;
    opacity: 0.5;
    margin-top: 2px;
    flex-shrink: 0;
}
.gsm-narrative p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #334155;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: break-word;
}

/* ============ FOOTER ============ */
.gsm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.gsm-footer-brand {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
}
.gsm-footer-brand i { color: var(--gold-dark); }

.gsm-footer .btn { min-width: 100px; }

/* ============================================================
   GSM RESPONSIVE — TABLETS
   ============================================================ */
@media (max-width: 768px) {
    .gsm-hero { padding: 16px 18px 14px; }
    .gsm-team-avatar { width: 56px; height: 56px; font-size: 1.2rem; }
    .gsm-team-name { font-size: 0.85rem; }
    .gsm-score { font-size: 1.8rem; }
    .gsm-body { padding: 14px 12px; }
}

/* ============================================================
   GSM RESPONSIVE — MÓVILES (iPhone / Android)
   ============================================================ */
@media (max-width: 600px) {
    .game-summary-modal-premium {
        max-height: calc(100vh - 16px);
        border-radius: 16px !important;
    }

    .gsm-hero { padding: 14px 12px 12px; }

    .gsm-hero-badges {
        gap: 4px;
        margin-bottom: 10px;
    }
    .gsm-badge {
        font-size: 0.6rem;
        padding: 3px 8px;
    }

    .gsm-hero-teams {
        gap: 6px;
    }

    .gsm-team-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.05rem;
        border-width: 2px;
    }

    .gsm-team-name {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
        line-height: 1.15;
    }

    .gsm-team-role { font-size: 0.5rem; letter-spacing: 1px; }

    .gsm-final-score { padding: 4px 10px; gap: 6px; }
    .gsm-score { font-size: 1.55rem; letter-spacing: -1px; min-width: 18px; }
    .gsm-score-sep { font-size: 1rem; }

    .gsm-final-label {
        font-size: 0.58rem;
        padding: 3px 10px;
        letter-spacing: 0.2px;
    }

    .gsm-tabs { padding: 8px 10px 0; gap: 2px; }
    .gsm-tab {
        padding: 8px 12px;
        font-size: 0.72rem;
        gap: 5px;
    }
    .gsm-tab i { font-size: 0.78rem; }

    .gsm-body { padding: 12px 10px; }

    .gsm-compare-head { padding: 10px 10px; font-size: 0.72rem; gap: 5px; }
    .gsm-compare-row {
        padding: 8px 10px;
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    }
    .gsm-cmp-home, .gsm-cmp-away { font-size: 0.85rem; }
    .gsm-cmp-winner { font-size: 1rem; }
    .gsm-cmp-label { font-size: 0.58rem; letter-spacing: 0.5px; }
    .gsm-cmp-label i { font-size: 0.55rem; }

    .gsm-mvp-card { padding: 14px 12px; margin-bottom: 12px; }
    .gsm-mvp-name { font-size: 1.1rem; margin: 2px 0 8px; }
    .gsm-mvp-label { font-size: 0.55rem; letter-spacing: 1.2px; padding: 3px 10px; }
    .gsm-mvp-stats { gap: 5px; padding-top: 8px; }
    .gsm-mvp-stats span { font-size: 0.65rem; padding: 2px 8px; }
    .gsm-mvp-stats b { font-size: 0.78rem; }
    .gsm-mvp-crown { font-size: 1.2rem; top: 6px; right: 8px; }

    .gsm-leaders { padding: 12px; margin-bottom: 12px; }
    .gsm-section-title { font-size: 0.78rem; padding-bottom: 8px; margin-bottom: 10px; }
    .gsm-leaders-grid { grid-template-columns: 1fr; gap: 8px; }
    .gsm-leader-card { padding: 10px; }
    .gsm-leader-head { font-size: 0.65rem; padding-bottom: 6px; margin-bottom: 6px; }
    .gsm-leader-row { padding: 5px 6px; gap: 6px; }
    .gsm-leader-name { font-size: 0.7rem; }
    .gsm-leader-value { font-size: 0.85rem; }

    .gsm-narrative { padding: 12px; gap: 8px; }
    .gsm-narrative p { font-size: 0.78rem; line-height: 1.55; }
    .gsm-narrative i { font-size: 1rem; }

    .gsm-footer { padding: 10px 12px; gap: 8px; }
    .gsm-footer .btn { padding: 8px 14px; font-size: 0.75rem; }
    .gsm-footer-brand { font-size: 0.65rem; }
}

/* ============================================================
   GSM RESPONSIVE — iPhone mini / SE (375px) y 320px
   ============================================================ */
@media (max-width: 380px) {
    .gsm-hero { padding: 12px 10px 10px; }

    .gsm-hero-badges { margin-bottom: 8px; gap: 3px; }
    .gsm-badge {
        font-size: 0.55rem;
        padding: 2px 7px;
        gap: 3px;
    }
    .gsm-badge i { font-size: 0.55rem; }

    .gsm-team-avatar {
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
        border-width: 2px;
    }

    .gsm-team-name { font-size: 0.68rem; -webkit-line-clamp: 2; }
    .gsm-team-role { font-size: 0.45rem; letter-spacing: 0.8px; }

    .gsm-hero-teams { gap: 4px; }
    .gsm-final-score { padding: 3px 8px; gap: 4px; }
    .gsm-score { font-size: 1.3rem; min-width: 15px; letter-spacing: -0.8px; }
    .gsm-score-sep { font-size: 0.85rem; }
    .gsm-final-label { font-size: 0.5rem; padding: 2px 8px; }

    .gsm-tabs { padding: 6px 8px 0; }
    .gsm-tab { padding: 7px 10px; font-size: 0.65rem; gap: 4px; }
    .gsm-tab i { font-size: 0.72rem; }

    .gsm-body { padding: 10px 8px; }

    .gsm-compare-head { padding: 8px 8px; font-size: 0.65rem; }
    .gsm-compare-row { padding: 7px 8px; gap: 4px; }
    .gsm-cmp-home, .gsm-cmp-away { font-size: 0.78rem; }
    .gsm-cmp-winner { font-size: 0.9rem; }
    .gsm-cmp-label { font-size: 0.52rem; letter-spacing: 0.3px; }
    .gsm-cmp-label i { display: none; }

    .gsm-mvp-card { padding: 12px 10px; }
    .gsm-mvp-name { font-size: 0.95rem; }
    .gsm-mvp-number { font-size: 0.72rem; }
    .gsm-mvp-label { font-size: 0.5rem; letter-spacing: 1px; padding: 2px 8px; }
    .gsm-mvp-stats { gap: 4px; }
    .gsm-mvp-stats span { font-size: 0.58rem; padding: 2px 6px; }
    .gsm-mvp-stats b { font-size: 0.7rem; }

    .gsm-leaders { padding: 10px; }
    .gsm-section-title { font-size: 0.7rem; }
    .gsm-leader-name { font-size: 0.65rem; }
    .gsm-leader-value { font-size: 0.78rem; }
    .gsm-leader-rank { width: 18px; height: 18px; font-size: 0.58rem; }

    .gsm-narrative p { font-size: 0.72rem; }
    .gsm-footer .btn { padding: 6px 10px; font-size: 0.7rem; min-width: auto; }
}

/* ============================================================
   RESUMEN DEL PARTIDO — DARK MODE
   ============================================================ */
[data-theme="dark"] .game-summary-modal-premium { background: #1e1e2f !important; }
[data-theme="dark"] .gsm-body { background: #1e1e2f; }
[data-theme="dark"] .gsm-compare,
[data-theme="dark"] .gsm-leaders { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .gsm-compare-head { background: linear-gradient(135deg, #0f2440, #1a1a2e); }
[data-theme="dark"] .gsm-compare-row { border-color: #3d3d5c; }
[data-theme="dark"] .gsm-compare-row:hover { background: #2a2a3e; }
[data-theme="dark"] .gsm-cmp-home,
[data-theme="dark"] .gsm-cmp-away { color: #b0b0c8; }
[data-theme="dark"] .gsm-cmp-winner { color: #fcd34d; }
[data-theme="dark"] .gsm-cmp-label { color: #8a8aa0; }
[data-theme="dark"] .gsm-leader-card { background: #2a2a3e; border-color: #3d3d5c; }
[data-theme="dark"] .gsm-leader-head { border-color: #3d3d5c; }
[data-theme="dark"] .gsm-leader-row:hover { background: #25253b; }
[data-theme="dark"] .gsm-leader-name { color: #e8e8f0; }
[data-theme="dark"] .gsm-section-title { color: #e8e8f0; border-color: #3d3d5c; }
[data-theme="dark"] .gsm-narrative { background: #2a2a3e; }
[data-theme="dark"] .gsm-narrative p { color: #b0b0c8; }
[data-theme="dark"] .gsm-tabs,
[data-theme="dark"] .gsm-footer { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .gsm-tab { color: #b0b0c8; }
[data-theme="dark"] .gsm-tab.gsm-tab-active { color: #fcd34d; }

/* ============================================================
   MODAL DEL JUGADOR (PMP) — RESPONSIVE PREMIUM
   ============================================================ */

.player-modal-premium {
    max-width: 820px !important;
    width: 100% !important;
    max-height: 94vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 20px !important;
    padding: 0 !important;
    background: #f4f6fa !important;
}

@media (max-width: 600px) {
    .player-modal-premium {
        max-height: calc(100vh - 16px);
        border-radius: 16px !important;
    }
    .pmp-hero { padding: 16px 14px 14px; }
    .pmp-hero-top { gap: 12px; }
    .pmp-hero-number {
        width: 56px;
        height: 56px;
        font-size: 1.15rem;
        border-width: 3px;
    }
    .pmp-hero-name { font-size: 1.15rem; margin-bottom: 6px; }
    .pmp-hero-team, .pmp-hero-pos, .pmp-hero-phase, .pmp-hero-age {
        font-size: 0.68rem;
        padding: 3px 10px;
    }
    .pmp-hero-avg { padding: 12px 14px; margin-top: 14px; }
    .pmp-hero-avg-value { font-size: 2.2rem; }
    .pmp-hero-avg-label { font-size: 0.62rem; letter-spacing: 1.2px; }
    .pmp-hero-avg-sub { font-size: 0.62rem; }

    .pmp-body { padding: 14px 12px; gap: 12px; }
    .pmp-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .pmp-stat { padding: 10px 6px; border-radius: 10px; }
    .pmp-stat-value { font-size: 1.05rem; }
    .pmp-stat-label { font-size: 0.55rem; }
    .pmp-stat-icon { font-size: 0.8rem; margin-bottom: 2px; }

    .pmp-section { padding: 14px; }
    .pmp-section-title { font-size: 0.82rem; padding-bottom: 8px; margin-bottom: 10px; }
    .pmp-section-count { font-size: 0.62rem; padding: 2px 8px; }

    .pmp-game-row {
        padding: 10px 10px 10px 12px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .pmp-game-date { font-size: 0.68rem; }
    .pmp-game-vs { font-size: 0.78rem; gap: 6px; }
    .pmp-game-chips {
        max-width: 100%;
        justify-content: flex-start;
        gap: 3px;
    }
    .pmp-chip { font-size: 0.6rem; padding: 2px 6px; }

    .pmp-footer { padding: 12px 14px; gap: 8px; }
    .pmp-footer-actions { flex-direction: row; gap: 6px; width: 100%; }
    .pmp-footer-actions .btn { flex: 1; }

    .pmp-empty { padding: 30px 16px; }
    .pmp-empty i { font-size: 2rem; }
    .pmp-empty p { font-size: 0.9rem; }
}

@media (max-width: 380px) {
    .pmp-hero { padding: 12px 12px 10px; }
    .pmp-hero-number { width: 50px; height: 50px; font-size: 1rem; }
    .pmp-hero-name { font-size: 1.05rem; }
    .pmp-hero-team, .pmp-hero-pos, .pmp-hero-phase, .pmp-hero-age {
        font-size: 0.62rem;
        padding: 2px 8px;
    }
    .pmp-hero-avg-value { font-size: 1.9rem; }

    .pmp-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .pmp-stat { padding: 8px 4px; }
    .pmp-stat-value { font-size: 0.9rem; }
    .pmp-stat-label { font-size: 0.5rem; }

    .pmp-section-title { font-size: 0.75rem; }
    .pmp-game-date { font-size: 0.62rem; }
    .pmp-game-vs { font-size: 0.72rem; }
    .pmp-chip { font-size: 0.55rem; }
}

/* ============================================================
   SCOREBOOK — RESPONSIVE (scroll horizontal limpio)
   ============================================================ */
@media (max-width: 768px) {
    #scorebookContent .scorebook-wrapper {
        padding: 10px;
        border-radius: 12px;
    }
    .scorebook-live-panel {
        padding: 10px 12px;
        margin-bottom: 12px;
        border-radius: 10px;
    }
    .scorebook-team-header {
        padding: 10px 12px;
        font-size: 0.95rem;
        gap: 8px;
        flex-wrap: wrap;
    }
    .scorebook-team-header .team-total-runs { font-size: 1.3rem; padding: 0 12px; }
    .scorebook-team-header .team-badge { font-size: 0.68rem; padding: 2px 10px; }

    .scorebook-table {
        font-size: 0.72rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .scorebook-table thead th,
    .scorebook-table tbody td { padding: 5px 4px; }
    .scorebook-table .player-col { min-width: 140px; }
    .scorebook-table .player-edit-input { font-size: 0.72rem; padding: 3px 4px; }
    .sb-cell-input select { font-size: 0.62rem; padding: 2px; min-width: 42px; }
    .sb-runs-mini { width: 24px; font-size: 0.58rem; padding: 1px; }

    #scorebookModal .modal-body { padding: 12px; max-height: 65vh; }
}

@media (max-width: 480px) {
    #scorebookModal .modal-header { padding: 12px 14px; }
    #scorebookModal .modal-title { font-size: 1rem; }
    #scorebookModal .modal-footer { padding: 10px 12px; flex-direction: column; }
    #scorebookModal .modal-footer .btn { width: 100%; }

    .scorebook-table { font-size: 0.68rem; }
    .scorebook-table thead th { font-size: 0.6rem; padding: 4px 3px; }
    .scorebook-table .player-col { min-width: 120px; }
}

/* ============================================================
   DOCUMENTOS — Responsive
   ============================================================ */
@media (max-width: 600px) {
    .documents-grid { grid-template-columns: 1fr !important; }
    .document-card { padding: 14px; }
    .document-title { font-size: 0.95rem; }
    .document-description { font-size: 0.8rem; }
    .document-actions { flex-wrap: wrap; gap: 6px; }
    .document-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   FOOTER — Responsive
   ============================================================ */
@media (max-width: 480px) {
    .footer { padding: 16px 12px; }
    .footer-brand-tag { font-size: 0.7rem; padding: 5px 14px; }
}

/* ============================================================
   TOASTS — Responsive iOS
   ============================================================ */
@media (max-width: 600px) {
    /* El toast se posiciona de forma fija; ajustamos width */
    body > div[style*="position:fixed"][style*="top:20px"] {
        left: 12px !important;
        right: 12px !important;
        top: max(12px, env(safe-area-inset-top, 0px)) !important;
        max-width: none !important;
        font-size: 0.82rem;
        padding: 12px 14px !important;
    }
}

/* ============================================================
   FIX: SELECTS RESPONSIVE EN TODO EL SISTEMA
   ============================================================ */

/* Regla global: ningún select excede su contenedor */
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- MÓVILES ---------- */
@media (max-width: 640px) {

    /* === DASHBOARD: filtros Categoría / Fase === */
    #tabDashboard .tab-section > div[style*="flex-wrap:wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    #dashboardCategoryFilter,
    #dashboardPhaseFilter {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 12px !important;
    }

    /* === EQUIPOS / JUGADORES / PARTIDOS: filtros === */
    #tabTeams .section > div[style*="display:flex"],
    #tabPlayers .section > div[style*="display:flex"],
    #tabGames .section > div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #teamSearch, #teamCategoryFilter,
    #playerSearch, #teamFilter, #playerCategoryFilter,
    #gameCategoryFilter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        padding: 10px 12px !important;
    }

    /* === AVISOS GENERALES: selector de temporada === */
    #tabDocuments .section-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }
    #tabDocuments .section-header > div {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    #docSeasonSelector {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    #addDocumentBtn {
        width: 100%;
    }

    /* === STATS: hero + filtros === */
    .stx-hero-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .stx-select-hero,
    .stx-btn-hero {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    .stx-filter-group {
        min-width: 0 !important;
        width: 100%;
    }
    .stx-filter-select,
    .stx-team-picker {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .stx-filter-actions {
        width: 100%;
        flex-direction: column;
    }
    .stx-filter-actions .stx-btn-ghost {
        width: 100%;
        justify-content: center;
    }

    /* === PARTIDOS: barra de búsqueda y filtro === */
    .gpx-filters {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .gpx-search,
    .gpx-select,
    .gpx-btn-secondary {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* === GESTIONAR TEMPORADAS: modal === */
    #seasonModal .input-group select,
    #seasonModal .input-group input {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   FIX: SCOREBOOK CON SCROLL HORIZONTAL EN MÓVIL (dentro de openGameSummary)
   ============================================================ */

.scorebook-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-radius: 0 0 10px 10px;
}

/* La tabla debe tener un ancho mínimo para forzar el scroll */
.scorebook-table-scroll .scorebook-table {
    min-width: 700px;
}

/* Dentro del modal de resumen, permitir que se genere el scroll */
.gsm-body .scorebook-wrapper {
    overflow: visible;
}

@media (max-width: 640px) {
    .gsm-body {
        overflow-x: hidden;
        padding: 10px 8px;
    }
    .gsm-body .scorebook-wrapper {
        padding: 8px;
        border-radius: 10px;
    }
    .scorebook-table-scroll {
        /* Forzar que el scroll aparezca aunque el padre tenga overflow-x: hidden */
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .scorebook-table-scroll .scorebook-table {
        min-width: 640px;
        font-size: 0.7rem;
    }
    .gsm-body .scorebook-team-header {
        padding: 8px 10px;
        font-size: 0.85rem;
        flex-wrap: wrap;
        gap: 6px;
    }
    .gsm-body .scorebook-team-header .team-total-runs {
        font-size: 1.15rem;
        padding: 0 10px;
    }
    .gsm-body .scorebook-team-header .team-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
    }
}

/* ============================================================
   COLORES POR CATEGORÍA — LIGA SNTE 53 (5 CATEGORÍAS)
   MA = Magisterial A (Oro)   MB = Magisterial B (Naranja)
   IA = Invitados A (Azul)    IB = Invitados B (Púrpura)
   IC = Invitados C (Verde)
   ============================================================ */

/* Dashboard — standings badge */
.dsh-cat-MA { background: linear-gradient(135deg, #f6c445, #b8960e); color: #001a33; }
.dsh-cat-MB { background: linear-gradient(135deg, #e67e22, #d35400); color: #fff; }
.dsh-cat-IA { background: linear-gradient(135deg, #3498db, #2176ae); color: #fff; }
.dsh-cat-IB { background: linear-gradient(135deg, #9b59b6, #8e44ad); color: #fff; }
.dsh-cat-IC { background: linear-gradient(135deg, #27AE60, #1e8449); color: #fff; }

/* Dashboard — leaders letter */
.dsh-leader-cat-MA .dsh-leader-letter { background: linear-gradient(135deg, #f6c445, #b8960e); color: #001a33; }
.dsh-leader-cat-MB .dsh-leader-letter { background: linear-gradient(135deg, #e67e22, #d35400); }
.dsh-leader-cat-IA .dsh-leader-letter { background: linear-gradient(135deg, #3498db, #2176ae); }
.dsh-leader-cat-IB .dsh-leader-letter { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.dsh-leader-cat-IC .dsh-leader-letter { background: linear-gradient(135deg, #27AE60, #1e8449); }

/* Stats — cat badge (bloque tabla posiciones) */
.stx-cat-MA { background: linear-gradient(135deg, #f6c445, #b8960e); color: #001a33; }
.stx-cat-MB { background: linear-gradient(135deg, #e67e22, #d35400); color: #fff; }
.stx-cat-IA { background: linear-gradient(135deg, #3498db, #2176ae); color: #fff; }
.stx-cat-IB { background: linear-gradient(135deg, #9b59b6, #8e44ad); color: #fff; }
.stx-cat-IC { background: linear-gradient(135deg, #27AE60, #1e8449); color: #fff; }

/* Teams — cat badge */
.tcp-cat-MA { background: #fff3d6; color: #a57917; border: 1px solid rgba(246, 196, 69, 0.4); }
.tcp-cat-MB { background: #fce8d5; color: #a35416; border: 1px solid rgba(230, 126, 34, 0.4); }
.tcp-cat-IA { background: #d6ebf9; color: #2176ae; border: 1px solid rgba(52, 152, 219, 0.4); }
.tcp-cat-IB { background: #ebd6f9; color: #6f3595; border: 1px solid rgba(155, 89, 182, 0.4); }
.tcp-cat-IC { background: #d9f0e2; color: #1e8449; border: 1px solid rgba(39, 174, 96, 0.4); }

/* Players — cat badge */
.pcp-cat-MA { background: #fff3d6; color: #a57917; }
.pcp-cat-MB { background: #fce8d5; color: #a35416; }
.pcp-cat-IA { background: #d6ebf9; color: #2176ae; }
.pcp-cat-IB { background: #ebd6f9; color: #6f3595; }
.pcp-cat-IC { background: #d9f0e2; color: #1e8449; }

/* ============================================================
   PLAYER MODAL PREMIUM — LIGA SNTE 53 (v2.0 — sin cortes)
   ============================================================ */

.player-modal-premium {
    max-width: min(95vw, 820px) !important;
    width: min(95vw, 820px) !important;
    max-height: min(94vh, 900px) !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f4f6fa !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35) !important;
}

/* --- HERO --- */
.pmp-hero {
    position: relative;
    flex-shrink: 0;
    padding: 20px 22px 16px;
    color: #fff;
    overflow: hidden;
}
.pmp-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.pmp-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(212,175,55,0.25), transparent 50%);
}
.pmp-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    z-index: 3;
}

.pmp-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    border: none !important;
    color: #fff !important;
    font-size: 1rem !important;
    cursor: pointer;
    backdrop-filter: blur(6px);
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s;
    padding: 0 !important;
}
.pmp-close:hover { background: rgba(255,255,255,0.35) !important; transform: rotate(90deg); }

.pmp-hero-top {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
    padding-right: 42px;
}
.pmp-hero-number {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.3rem;
    color: #fff;
    border: 3px solid rgba(255,255,255,0.35);
    flex-shrink: 0;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.pmp-hero-info { flex: 1; min-width: 0; }

.pmp-hero-name {
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pmp-hero-meta { display: flex; gap: 6px; flex-wrap: wrap; }

.pmp-hero-team,
.pmp-hero-pos,
.pmp-hero-phase,
.pmp-hero-age,
.pmp-hero-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmp-team-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
.pmp-meta-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

.pmp-hero-avg {
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(0,0,0,0.28);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pmp-hero-avg-left { display: flex; align-items: baseline; gap: 10px; }
.pmp-hero-avg-value { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -2px; text-shadow: 0 3px 16px rgba(0,0,0,0.4); }
.pmp-hero-avg-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; opacity: 0.85; }
.pmp-hero-avg-right { text-align: right; }
.pmp-hero-phase-label { font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.pmp-hero-phase-label i { color: var(--gold); }
.pmp-hero-avg-sub { font-size: 0.68rem; opacity: 0.75; margin-top: 3px; font-weight: 600; }

/* --- BODY (SCROLL CORREGIDO) --- */
.pmp-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px;
    background: #f4f6fa;
    display: flex;
    flex-direction: column;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,51,102,0.2) transparent;
}
.pmp-body::-webkit-scrollbar { width: 6px; }
.pmp-body::-webkit-scrollbar-track { background: transparent; }
.pmp-body::-webkit-scrollbar-thumb { background: rgba(0,51,102,0.2); border-radius: 10px; }

.pmp-section-title-bar {
    font-size: 0.72rem;
    font-weight: 900;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}
.pmp-section-title-bar i { color: var(--gold-dark); }

/* --- STATS GRID --- */
.pmp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}
.pmp-stat {
    background: #fff;
    border-radius: 12px;
    padding: 11px 6px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.22s;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pmp-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,51,102,0.1);
    border-color: var(--gold);
}
.pmp-stat-hl {
    background: linear-gradient(180deg, #fff, #fef9e7);
    border-color: rgba(212,175,55,0.5);
}
.pmp-stat-icon { font-size: 0.85rem; }
.pmp-stat-value {
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.pmp-stat-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.6px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- SECTION --- */
.pmp-section {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(0,51,102,0.04);
    border: 1px solid #e2e8f0;
}
.pmp-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #003366;
    font-size: 0.85rem;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px dashed #e2e8f0;
}
.pmp-section-title i { color: var(--gold-dark); }
.pmp-section-count {
    margin-left: auto;
    background: linear-gradient(135deg, #D4AF37, #b8960e);
    color: #001a33;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 20px;
    min-width: 26px;
    text-align: center;
}

/* --- GAMES LIST --- */
.pmp-games-list { display: flex; flex-direction: column; gap: 8px; }
.pmp-game-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}
.pmp-game-row:hover {
    background: #fff;
    border-color: var(--gold);
    transform: translateX(3px);
    box-shadow: 0 4px 14px rgba(212,175,55,0.15);
}
.pmp-game-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.pmp-game-result-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-left: 4px;
}
.pmp-game-info { flex: 1; min-width: 140px; }
.pmp-game-date {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.pmp-game-date i { color: var(--gold-dark); }
.pmp-playoff-tag {
    background: #fef3c7;
    color: #a57917;
    font-size: 0.58rem;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pmp-game-vs {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: #0a1a2b;
}
.pmp-game-team-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.pmp-game-score {
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: -0.3px;
    padding: 1px 8px;
    border-radius: 6px;
    background: #f1f5f9;
}
.pmp-game-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pmp-chip {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.62rem;
    color: #64748b;
    white-space: nowrap;
    font-weight: 600;
}
.pmp-chip b { color: #0a1a2b; font-weight: 900; font-size: 0.7rem; }
.pmp-chip-hr { background: #fee; border-color: #fbb; }
.pmp-chip-hr b { color: #c0392b; }
.pmp-chip-rbi { background: #ecfdf5; border-color: #a7f3d0; }
.pmp-chip-rbi b { color: #006B5A; }

/* --- EMPTY --- */
.pmp-empty {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 14px;
    border: 2px dashed #e2e8f0;
}
.pmp-empty i { font-size: 2.4rem; color: var(--gold); display: block; margin-bottom: 12px; }
.pmp-empty p { font-weight: 800; color: #003366; margin: 0 0 4px; }
.pmp-empty small { color: #94a3b8; }

/* --- NOTES --- */
.pmp-notes {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: #fffbeb;
    border-left: 4px solid var(--gold);
    border-radius: 10px;
    font-size: 0.82rem;
    color: #78350f;
    align-items: flex-start;
}
.pmp-notes i { color: var(--gold-dark); margin-top: 2px; flex-shrink: 0; }

/* --- FOOTER --- */
.pmp-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
.pmp-footer-brand { font-size: 0.72rem; color: #94a3b8; font-weight: 600; }
.pmp-footer-brand i { color: var(--gold-dark); }
.pmp-footer-actions { display: flex; gap: 6px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
    .player-modal-premium {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: 16px !important;
    }
    .pmp-hero { padding: 16px 14px 14px; }
    .pmp-hero-top { padding-right: 36px; gap: 10px; }
    .pmp-hero-number { width: 52px; height: 52px; font-size: 1.05rem; border-width: 2px; }
    .pmp-hero-name { font-size: 1.15rem; margin-bottom: 6px; }
    .pmp-hero-team, .pmp-hero-pos, .pmp-hero-phase, .pmp-hero-age, .pmp-hero-cat {
        font-size: 0.65rem;
        padding: 3px 9px;
    }
    .pmp-meta-text { max-width: 90px; }
    .pmp-hero-avg { margin-top: 12px; padding: 10px 14px; gap: 10px; }
    .pmp-hero-avg-value { font-size: 2rem; }
    .pmp-hero-avg-label { font-size: 0.6rem; letter-spacing: 1.2px; }
    .pmp-hero-phase-label { font-size: 0.68rem; }
    .pmp-hero-avg-sub { font-size: 0.6rem; }
    .pmp-body { padding: 12px 10px; gap: 10px; }
    .pmp-stats-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
    .pmp-stat { padding: 8px 4px; border-radius: 10px; }
    .pmp-stat-icon { font-size: 0.75rem; }
    .pmp-stat-value { font-size: 1rem; }
    .pmp-stat-label { font-size: 0.5rem; letter-spacing: 0.4px; }
    .pmp-section { padding: 12px; }
    .pmp-section-title { font-size: 0.78rem; padding-bottom: 8px; margin-bottom: 8px; }
    .pmp-section-count { font-size: 0.6rem; padding: 2px 8px; }
    .pmp-game-row { padding: 8px 10px 8px 12px; gap: 8px; }
    .pmp-game-result-badge { width: 24px; height: 24px; font-size: 0.65rem; }
    .pmp-game-info { min-width: 100%; }
    .pmp-game-date { font-size: 0.65rem; }
    .pmp-game-vs { font-size: 0.72rem; }
    .pmp-game-score { font-size: 0.85rem; padding: 1px 6px; }
    .pmp-game-team-name { max-width: 85px; }
    .pmp-game-chips { width: 100%; justify-content: flex-start; margin-left: 32px; }
    .pmp-chip { font-size: 0.58rem; padding: 2px 6px; }
    .pmp-footer { padding: 10px 14px; gap: 8px; }
    .pmp-footer-actions { width: 100%; }
    .pmp-footer-actions .btn { flex: 1; }
    .pmp-footer-brand { font-size: 0.65rem; }
}

@media (max-width: 380px) {
    .pmp-hero { padding: 14px 12px 12px; }
    .pmp-hero-top { padding-right: 32px; gap: 8px; }
    .pmp-hero-number { width: 46px; height: 46px; font-size: 0.9rem; }
    .pmp-hero-name { font-size: 1.05rem; }
    .pmp-hero-team, .pmp-hero-pos, .pmp-hero-phase, .pmp-hero-age, .pmp-hero-cat {
        font-size: 0.6rem;
        padding: 2px 8px;
    }
    .pmp-hero-avg { padding: 8px 12px; }
    .pmp-hero-avg-value { font-size: 1.7rem; }
    .pmp-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .pmp-stat { padding: 7px 3px; }
    .pmp-stat-value { font-size: 0.92rem; }
}

/* ============ DARK MODE ============ */
[data-theme="dark"] .player-modal-premium { background: #1e1e2f !important; }
[data-theme="dark"] .pmp-body { background: #1e1e2f; }
[data-theme="dark"] .pmp-stat,
[data-theme="dark"] .pmp-section { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .pmp-stat-value { color: #e8e8f0; }
[data-theme="dark"] .pmp-section-title { color: #e8e8f0; border-color: #3d3d5c; }
[data-theme="dark"] .pmp-section-title-bar { color: #b0b0c8; }
[data-theme="dark"] .pmp-game-row { background: #2a2a3e; border-color: #3d3d5c; }
[data-theme="dark"] .pmp-game-row:hover { background: #333351; }
[data-theme="dark"] .pmp-game-vs { color: #e8e8f0; }
[data-theme="dark"] .pmp-game-score { background: #1e1e2f; }
[data-theme="dark"] .pmp-chip { background: #1e1e2f; border-color: #3d3d5c; color: #b0b0c8; }
[data-theme="dark"] .pmp-chip b { color: #e8e8f0; }
[data-theme="dark"] .pmp-chip-hr { background: #3a1a1a; border-color: #f87171; }
[data-theme="dark"] .pmp-chip-hr b { color: #f87171; }
[data-theme="dark"] .pmp-chip-rbi { background: #1a3a2a; border-color: #4ade80; }
[data-theme="dark"] .pmp-chip-rbi b { color: #4ade80; }
[data-theme="dark"] .pmp-footer { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .pmp-stat-hl { background: linear-gradient(180deg, #25253b, #3d3d1a); }
[data-theme="dark"] .pmp-empty { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .pmp-empty p { color: #e8e8f0; }
[data-theme="dark"] .pmp-notes { background: #3d3d1a; color: #fcd34d; }

/* ============================================================
   SEASON INFO (dentro del hero de Stats) — v2.0 responsive
   ============================================================ */

.stx-season-info {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.stx-season-info:empty { display: none; }

.stx-season-loading {
    text-align: center;
    padding: 18px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.stx-season-loading i { color: var(--gold); }

.stx-season-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #e8e8f0;
    min-width: 0;
    width: 100%;
}

.stx-season-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.stx-season-card-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: -0.3px;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.stx-season-card-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(243, 156, 18, 0.25);
    color: #fcd34d;
    border: 1px solid rgba(243, 156, 18, 0.4);
    flex-shrink: 0;
    white-space: nowrap;
}
.stx-season-card-status.is-active {
    background: rgba(39, 174, 96, 0.25);
    color: #6fcf97;
    border-color: rgba(39, 174, 96, 0.5);
}

.stx-season-card-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.stx-season-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stx-season-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
}
.stx-season-card-badge i { color: var(--gold); font-size: 0.7rem; }

.stx-season-card-dates {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}
.stx-season-card-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.stx-season-card-date i { color: var(--gold); font-size: 0.72rem; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .stx-season-info { margin-top: 14px; padding-top: 14px; }
    .stx-season-card { gap: 9px; }
    .stx-season-card-title { font-size: 1.05rem; }
    .stx-season-card-desc { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .stx-season-info {
        margin-top: 12px;
        padding-top: 12px;
    }
    .stx-season-card { gap: 8px; }
    .stx-season-card-head { gap: 8px; }
    .stx-season-card-title { font-size: 1rem; }
    .stx-season-card-status { font-size: 0.6rem; padding: 2px 10px; }
    .stx-season-card-desc { font-size: 0.78rem; line-height: 1.5; }
    .stx-season-card-badge { font-size: 0.65rem; padding: 3px 10px; }
    .stx-season-card-badge i { font-size: 0.65rem; }
    .stx-season-card-dates {
        flex-direction: column;
        gap: 6px;
        font-size: 0.7rem;
    }
}

@media (max-width: 360px) {
    .stx-season-card-title { font-size: 0.92rem; }
    .stx-season-card-desc { font-size: 0.74rem; }
    .stx-season-card-badge { font-size: 0.6rem; padding: 2px 9px; }
}

/* ============================================================
   SCOREBOOK PREMIUM (SBX) — LIGA SNTE 53
   ============================================================ */

/* --- Modal wrapper para que la tabla tenga scroll interno --- */
#scorebookModal .modal {
    display: flex !important;
    flex-direction: column !important;
    max-height: 94vh !important;
    width: min(96vw, 1100px) !important;
}
#scorebookModal .modal-body {
    padding: 0 !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
}
#scorebookContent {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Wrapper principal --- */
.sbx-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #f4f6fa;
    padding: 12px;
    gap: 10px;
    font-family: var(--font);
}

/* ============================================================
   MARCADOR EN VIVO (score header)
   ============================================================ */
.sbx-score-header {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: stretch;
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.08);
    border: 1px solid #e2e8f0;
}

.sbx-score-team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    opacity: 0.6;
    min-width: 0;
}
.sbx-score-team.is-active {
    opacity: 1;
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25);
}
.sbx-score-team:hover { opacity: 1; background: #f8fafc; }
.sbx-score-team.is-active:hover { background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04)); }

.sbx-score-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.sbx-score-logo img { width: 100%; height: 100%; object-fit: cover; }

.sbx-score-info { flex: 1; min-width: 0; }
.sbx-score-name {
    font-weight: 900;
    font-size: 0.82rem;
    color: #0a1a2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}
.sbx-score-role {
    font-size: 0.6rem;
    color: #94a3b8;
    font-weight: 800;
    letter-spacing: 0.8px;
    margin-top: 2px;
}
.sbx-score-role i { color: var(--gold-dark); margin-right: 2px; }

.sbx-score-runs {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.2px;
    flex-shrink: 0;
}

.sbx-score-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #94a3b8;
    font-size: 0.85rem;
    background: #f1f5f9;
    padding: 0 10px;
    border-radius: 8px;
    letter-spacing: 1px;
}

/* ============================================================
   BARRA DE ACCIÓN RÁPIDA
   ============================================================ */
.sbx-quick-bar {
    flex-shrink: 0;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.08);
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s;
}
.sbx-quick-bar.has-selection {
    border-color: var(--gold);
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.2);
}

.sbx-quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.sbx-quick-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    min-width: 0;
}
.sbx-quick-bar.has-selection .sbx-quick-status { color: #003366; }
.sbx-quick-status i { color: var(--gold-dark); }
.sbx-quick-status b { color: #003366; }

.sbx-quick-reset {
    padding: 6px 12px;
    background: #fee;
    color: #c0392b;
    border: 1px solid #fcc;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.sbx-quick-reset:hover { background: #fdd; transform: translateY(-1px); }

.sbx-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 6px;
}

.sbx-qb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 7px 4px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    min-width: 0;
}
.sbx-qb b { font-size: 0.82rem; font-weight: 900; color: #003366; line-height: 1; }
.sbx-qb small { font-size: 0.55rem; color: #94a3b8; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.sbx-qb:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.sbx-qb:active { transform: translateY(0); }

.sbx-qb-hit   { background: #ecfdf5; border-color: #a7f3d0; }
.sbx-qb-hit b { color: #1e8449; }
.sbx-qb-hr    { background: #fef3c7; border-color: #fcd34d; }
.sbx-qb-hr b  { color: #a57917; }
.sbx-qb-bb    { background: #dbeafe; border-color: #93c5fd; }
.sbx-qb-bb b  { color: #1e40af; }
.sbx-qb-out   { background: #fee2e2; border-color: #fca5a5; }
.sbx-qb-out b { color: #c0392b; }
.sbx-qb-other { background: #f3e8ff; border-color: #d8b4fe; }
.sbx-qb-other b { color: #6b21a8; }
.sbx-qb-clear { background: #f1f5f9; border-color: #cbd5e1; }
.sbx-qb-clear b { color: #64748b; }

/* ============================================================
   SECCIÓN TABLA DEL EQUIPO
   ============================================================ */
.sbx-team-section {
    flex: 1;
    min-height: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.08);
    border: 1px solid #e2e8f0;
}

.sbx-team-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    color: #fff;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.sbx-team-head-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.sbx-team-head-info i { color: var(--gold); }
.sbx-team-head-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.sbx-team-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.sbx-team-badge i { color: var(--gold); }
.sbx-team-badge b { font-weight: 900; }
.sbx-team-badge-runs { background: rgba(0,0,0,0.2); }

/* ============================================================
   TABLA
   ============================================================ */
.sbx-table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.sbx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.78rem;
    min-width: 780px;
}

.sbx-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 4px;
    border-bottom: 2px solid #e2e8f0;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 5;
    white-space: nowrap;
}
.sbx-th-player {
    text-align: left !important;
    padding-left: 12px !important;
    min-width: 190px;
    position: sticky !important;
    left: 0;
    z-index: 6 !important;
    background: #f8fafc !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}
.sbx-th-inning { min-width: 56px; }
.sbx-th-stat   { min-width: 44px; }
.sbx-th-del    { width: 36px; }

.sbx-table tbody td {
    padding: 4px 3px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    vertical-align: middle;
}
.sbx-table tbody tr:hover { background: #f8fbfd; }
.sbx-table tbody tr:nth-child(even) { background: #fbfcfe; }
.sbx-table tbody tr:nth-child(even):hover { background: #f4f9ff; }

/* --- Celda de jugador (sticky) --- */
.sbx-td-player {
    position: sticky !important;
    left: 0;
    z-index: 4 !important;
    background: #fff !important;
    padding: 6px 10px 6px 6px !important;
    text-align: left !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    border-right: 1px solid #e2e8f0;
    min-width: 190px;
}
.sbx-table tbody tr:nth-child(even) .sbx-td-player { background: #fbfcfe !important; }
.sbx-table tbody tr:hover .sbx-td-player { background: #f8fbfd !important; }

.sbx-player-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sbx-player-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.72rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.sbx-player-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.sbx-input {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 5px;
    padding: 2px 4px;
    font-family: inherit;
    font-size: 0.78rem;
    color: #0a1a2b;
    width: 100%;
    transition: all 0.15s;
    font-weight: 600;
}
.sbx-input:focus {
    border-color: var(--gold);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(212,175,55,0.2);
}
.sbx-input-num {
    width: 44px;
    text-align: center;
    font-weight: 900;
    font-size: 0.7rem;
    color: #64748b;
}
.sbx-input-name {
    font-weight: 700;
    font-size: 0.78rem;
    min-width: 0;
}

/* --- Celda de inning (celda jugable) --- */
.sbx-td {
    cursor: pointer;
    transition: background 0.15s;
    padding: 3px 2px !important;
}
.sbx-td:hover { background: #f0f9ff !important; }

.sbx-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 3px 2px;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all 0.15s;
    min-height: 42px;
    justify-content: center;
}

.sbx-td.sbx-cell-selected .sbx-cell,
.sbx-td.sbx-cell-selected {
    outline: 3px solid var(--gold);
    outline-offset: -1px;
    background: #fffbeb !important;
    border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

.sbx-select {
    width: 100%;
    max-width: 56px;
    padding: 2px 1px;
    border-radius: 5px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    color: #1a202c;
    cursor: pointer;
    text-align: center;
    text-align-last: center;
    transition: all 0.15s;
}
.sbx-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.25); }

.sbx-rbi-input {
    width: 32px;
    padding: 1px 2px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background: #fafafa;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    color: #64748b;
    transition: all 0.15s;
}
.sbx-rbi-input:focus { outline: none; border-color: var(--gold); background: #fff; }
.sbx-rbi-input.has-run {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #78350f;
    font-weight: 900;
}

/* Estados de la celda */
.sbx-cell-hit    { background: #ecfdf5; border-color: #a7f3d0; }
.sbx-cell-hr     { background: #fef3c7; border-color: #fcd34d; }
.sbx-cell-bb     { background: #dbeafe; border-color: #93c5fd; }
.sbx-cell-out    { background: #fee2e2; border-color: #fca5a5; }
.sbx-cell-other  { background: #f3e8ff; border-color: #d8b4fe; }

.sbx-cell-hit   .sbx-select { border-color: #6ee7b7; color: #065f46; background: #fff; }
.sbx-cell-hr    .sbx-select { border-color: #fcd34d; color: #78350f; background: #fffbeb; }
.sbx-cell-bb    .sbx-select { border-color: #93c5fd; color: #1e40af; background: #eff6ff; }
.sbx-cell-out   .sbx-select { border-color: #fca5a5; color: #991b1b; background: #fef2f2; }
.sbx-cell-other .sbx-select { border-color: #d8b4fe; color: #6b21a8; background: #faf5ff; }

/* --- Columnas de estadísticas --- */
.sbx-td-stat {
    font-weight: 800;
    color: #0a1a2b;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.sbx-stat-h  { color: #003366; }
.sbx-stat-rbi { color: #006B5A; }
.sbx-stat-bb { color: #64748b; }
.sbx-stat-so { color: #c0392b; }
.sbx-stat-avg {
    color: #003366;
    background: #f0f7ff;
    font-weight: 900;
    border-radius: 6px;
}
.sbx-r-input {
    width: 36px;
    padding: 2px;
    text-align: center;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    color: #78350f;
}
.sbx-r-input:focus { outline: none; border-color: var(--gold-dark); }

.sbx-td-del { width: 36px; }
.sbx-del-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fee;
    color: #c0392b;
    border: 1px solid #fcc;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    transition: all 0.15s;
}
.sbx-del-btn:hover { background: #fdd; transform: scale(1.1); }

/* --- Fila agregar jugador --- */
.sbx-add-row td { padding: 8px !important; background: #f8fafc; }
.sbx-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #003366, #0047AB);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}
.sbx-add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,51,102,0.3); }

.sbx-empty-cell {
    text-align: center;
    padding: 30px 15px !important;
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
}
.sbx-empty-cell i { color: var(--gold); margin-right: 8px; }

/* --- Fila de totales --- */
.sbx-totals-row td {
    background: #f1f5f9 !important;
    border-top: 2px solid #cbd5e1 !important;
    padding: 8px 4px !important;
    font-weight: 900;
}
.sbx-total-label {
    text-align: left !important;
    padding-left: 12px !important;
    font-size: 0.72rem;
    color: #003366;
    letter-spacing: 0.5px;
    position: sticky !important;
    left: 0;
    z-index: 4;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}
.sbx-total { font-size: 0.85rem; color: #003366; }
.sbx-total-r { color: #27AE60; }
.sbx-total-avg { color: #003366; background: #e0eaff !important; }

/* ============================================================
   LEYENDA
   ============================================================ */
.sbx-legend {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 12px;
    background: #fff;
    border-radius: 10px;
    font-size: 0.7rem;
    color: #64748b;
    border: 1px solid #e2e8f0;
    font-weight: 600;
}
.sbx-lg { display: inline-flex; align-items: center; gap: 5px; }
.sbx-lg-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sbx-lg-hit { background: #a7f3d0; border: 1px solid #6ee7b7; }
.sbx-lg-hr  { background: #fcd34d; border: 1px solid #f59e0b; }
.sbx-lg-bb  { background: #93c5fd; border: 1px solid #60a5fa; }
.sbx-lg-out { background: #fca5a5; border: 1px solid #f87171; }
.sbx-lg-tip { color: #94a3b8; margin-left: auto; font-style: italic; }
.sbx-lg-tip i { color: var(--gold-dark); margin-right: 3px; }

/* ============================================================
   RESPONSIVE — MÓVILES
   ============================================================ */
@media (max-width: 720px) {
    .sbx-wrapper { padding: 8px; gap: 8px; }

    .sbx-score-header { padding: 8px; gap: 6px; }
    .sbx-score-logo { width: 36px; height: 36px; font-size: 0.85rem; }
    .sbx-score-name { font-size: 0.72rem; }
    .sbx-score-role { font-size: 0.52rem; }
    .sbx-score-runs { font-size: 1.4rem; }
    .sbx-score-vs { font-size: 0.7rem; padding: 0 6px; }

    .sbx-quick-bar { padding: 8px 10px; }
    .sbx-quick-head { margin-bottom: 6px; }
    .sbx-quick-status { font-size: 0.7rem; }
    .sbx-quick-reset { font-size: 0.65rem; padding: 4px 9px; }
    .sbx-quick-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
    .sbx-qb { padding: 6px 2px; border-radius: 7px; }
    .sbx-qb b { font-size: 0.72rem; }
    .sbx-qb small { font-size: 0.48rem; }

    .sbx-team-head { padding: 8px 10px; gap: 6px; }
    .sbx-team-head-info { font-size: 0.82rem; }
    .sbx-team-badge { font-size: 0.6rem; padding: 2px 8px; }

    .sbx-table { min-width: 680px; font-size: 0.72rem; }
    .sbx-th-player { min-width: 155px; font-size: 0.6rem; padding-left: 8px !important; }
    .sbx-td-player { min-width: 155px; padding: 4px 6px 4px 4px !important; }
    .sbx-player-num { width: 26px; height: 26px; font-size: 0.62rem; }
    .sbx-input { font-size: 0.7rem; padding: 1px 3px; }
    .sbx-input-num { width: 34px; font-size: 0.6rem; }
    .sbx-input-name { font-size: 0.7rem; }
    .sbx-th-inning { min-width: 46px; font-size: 0.55rem; padding: 6px 2px; }
    .sbx-th-stat { min-width: 36px; font-size: 0.55rem; padding: 6px 2px; }
    .sbx-cell { padding: 2px 1px; min-height: 38px; }
    .sbx-select { font-size: 0.6rem; max-width: 46px; }
    .sbx-rbi-input { width: 28px; font-size: 0.55rem; }
    .sbx-td-stat { font-size: 0.72rem; padding: 4px 2px !important; }
    .sbx-r-input { width: 30px; font-size: 0.7rem; }
    .sbx-del-btn { width: 22px; height: 22px; font-size: 0.6rem; }
    .sbx-total-label { font-size: 0.6rem; padding-left: 8px !important; }

    .sbx-legend { padding: 5px 8px; gap: 8px; font-size: 0.62rem; }
    .sbx-lg-tip { font-size: 0.6rem; margin-left: 0; }
}

@media (max-width: 400px) {
    .sbx-score-logo { width: 30px; height: 30px; font-size: 0.72rem; }
    .sbx-score-runs { font-size: 1.15rem; }
    .sbx-score-name { font-size: 0.65rem; }
    .sbx-qb b { font-size: 0.65rem; }
    .sbx-qb small { display: none; }
    .sbx-qb { padding: 5px 2px; }
    .sbx-quick-grid { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
    .sbx-table { min-width: 620px; }
    .sbx-th-player { min-width: 130px; }
    .sbx-td-player { min-width: 130px; }
}

/* ============================================================
   MODO OSCURO
   ============================================================ */
[data-theme="dark"] .sbx-wrapper { background: #1e1e2f; }
[data-theme="dark"] .sbx-score-header,
[data-theme="dark"] .sbx-quick-bar,
[data-theme="dark"] .sbx-team-section,
[data-theme="dark"] .sbx-legend {
    background: #25253b;
    border-color: #3d3d5c;
}
[data-theme="dark"] .sbx-score-name { color: #e8e8f0; }
[data-theme="dark"] .sbx-score-team:hover { background: #2a2a3e; }
[data-theme="dark"] .sbx-score-team.is-active {
    background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.03));
}
[data-theme="dark"] .sbx-score-vs { background: #3d3d5c; color: #b0b0c8; }
[data-theme="dark"] .sbx-quick-status { color: #b0b0c8; }
[data-theme="dark"] .sbx-quick-status b { color: #fcd34d; }
[data-theme="dark"] .sbx-qb {
    background: #2a2a3e;
    border-color: #3d3d5c;
}
[data-theme="dark"] .sbx-qb b { color: #e8e8f0; }
[data-theme="dark"] .sbx-qb small { color: #8a8aa0; }
[data-theme="dark"] .sbx-qb-hit   { background: #1a3a2a; border-color: #27ae60; }
[data-theme="dark"] .sbx-qb-hr    { background: #3d3d1a; border-color: #d4af37; }
[data-theme="dark"] .sbx-qb-bb    { background: #1a2a3a; border-color: #3182ce; }
[data-theme="dark"] .sbx-qb-out   { background: #3a1a1a; border-color: #e53e3e; }
[data-theme="dark"] .sbx-qb-other { background: #2d1a3a; border-color: #9b59b6; }

[data-theme="dark"] .sbx-table { background: #25253b; }
[data-theme="dark"] .sbx-table thead th {
    background: #1e1e2f;
    color: #b0b0c8;
    border-color: #3d3d5c;
}
[data-theme="dark"] .sbx-th-player { background: #1e1e2f !important; }
[data-theme="dark"] .sbx-td-player { background: #25253b !important; }
[data-theme="dark"] .sbx-table tbody tr:nth-child(even) { background: #2a2a3e; }
[data-theme="dark"] .sbx-table tbody tr:nth-child(even) .sbx-td-player { background: #2a2a3e !important; }
[data-theme="dark"] .sbx-table tbody tr:hover { background: #333351; }
[data-theme="dark"] .sbx-table tbody tr:hover .sbx-td-player { background: #333351 !important; }
[data-theme="dark"] .sbx-input { color: #e8e8f0; }
[data-theme="dark"] .sbx-input:focus { background: #2d2d45; }
[data-theme="dark"] .sbx-select,
[data-theme="dark"] .sbx-rbi-input {
    background: #2d2d45;
    color: #e8e8f0;
    border-color: #3d3d5c;
}
[data-theme="dark"] .sbx-rbi-input.has-run { background: #3d3d1a; color: #fcd34d; }
[data-theme="dark"] .sbx-cell-hit   { background: #1a3a2a; border-color: #27ae60; }
[data-theme="dark"] .sbx-cell-hr    { background: #3d3d1a; border-color: #d4af37; }
[data-theme="dark"] .sbx-cell-bb    { background: #1a2a3a; border-color: #3182ce; }
[data-theme="dark"] .sbx-cell-out   { background: #3a1a1a; border-color: #e53e3e; }
[data-theme="dark"] .sbx-cell-other { background: #2d1a3a; border-color: #9b59b6; }

[data-theme="dark"] .sbx-td-stat { color: #e8e8f0; }
[data-theme="dark"] .sbx-stat-avg { background: #1e2a44; color: #fcd34d; }
[data-theme="dark"] .sbx-r-input { background: #3d3d1a; color: #fcd34d; border-color: #d4af37; }
[data-theme="dark"] .sbx-totals-row td { background: #1e1e2f !important; border-top-color: #3d3d5c !important; }
[data-theme="dark"] .sbx-total-label { color: #fcd34d; }
[data-theme="dark"] .sbx-total { color: #e8e8f0; }
[data-theme="dark"] .sbx-total-r { color: #6fcf97; }
[data-theme="dark"] .sbx-total-avg { background: #1e2a44 !important; color: #fcd34d; }
[data-theme="dark"] .sbx-add-row td { background: #2a2a3e; }
[data-theme="dark"] .sbx-empty-cell { color: #8a8aa0; }
[data-theme="dark"] .sbx-legend { color: #b0b0c8; }
[data-theme="dark"] .sbx-td.sbx-cell-selected { background: #3d3d1a !important; }
[data-theme="dark"] .sbx-del-btn { background: #3a1a1a; color: #f28b82; border-color: #5a2a2a; }

/* ============================================================
   SCOREBOOK v3 — MODE TABS + CAPTURA RÁPIDA
   ============================================================ */

/* --- Selector de modo --- */
.sbx-mode-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    background: #fff;
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.06);
    border: 1px solid #e2e8f0;
}
.sbx-mode-tab {
    flex: 1;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.2s;
    font-family: inherit;
}
.sbx-mode-tab i { font-size: 0.85rem; }
.sbx-mode-tab:hover { color: #003366; background: #f8fafc; }
.sbx-mode-tab.is-active {
    background: linear-gradient(135deg, #003366, #0047AB);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.25);
}
.sbx-mode-tab.is-active i { color: var(--gold); }

/* --- Wrapper de tabla rápida --- */
.sbc-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.08);
    border: 1px solid #e2e8f0;
}

.sbc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
    min-width: 720px;
}

.sbc-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 3px;
    text-align: center;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 5;
    white-space: nowrap;
}

.sbc-th-player {
    text-align: left !important;
    padding-left: 10px !important;
    min-width: 160px;
    position: sticky !important;
    left: 0;
    z-index: 6 !important;
    background: #f8fafc !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.sbc-th-del { width: 34px; }

.sbc-table tbody td {
    padding: 4px 2px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    vertical-align: middle;
}
.sbc-table tbody tr:nth-child(even) { background: #fbfcfe; }
.sbc-table tbody tr:hover { background: #f4f9ff; }

/* --- Celda de jugador (sticky) --- */
.sbc-td-player {
    position: sticky !important;
    left: 0;
    z-index: 4 !important;
    background: #fff !important;
    padding: 6px 8px 6px 6px !important;
    text-align: left !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    border-right: 1px solid #e2e8f0;
    min-width: 160px;
}
.sbc-table tbody tr:nth-child(even) .sbc-td-player { background: #fbfcfe !important; }
.sbc-table tbody tr:hover .sbc-td-player { background: #f4f9ff !important; }

.sbc-player-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.sbc-player-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.68rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
.sbc-player-input {
    flex: 1;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 5px;
    padding: 3px 5px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0a1a2b;
    transition: all 0.15s;
}
.sbc-player-input:focus {
    border-color: var(--gold);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* --- Celdas de estadísticas --- */
.sbc-td-stat {
    padding: 3px 2px !important;
    text-align: center;
    min-width: 44px;
}

.sbc-stat-box {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: #f8fafc;
    border-radius: 7px;
    padding: 2px;
    border: 1px solid #e2e8f0;
}

.sbc-stat-minus,
.sbc-stat-plus {
    width: 20px;
    height: 26px;
    border: none;
    border-radius: 5px;
    font-weight: 900;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
    touch-action: manipulation;
    font-family: inherit;
}
.sbc-stat-minus {
    background: #fee;
    color: #c0392b;
    border: 1px solid #fcc;
}
.sbc-stat-minus:hover { background: #fdd; }
.sbc-stat-minus:active { transform: scale(0.9); }
.sbc-stat-plus {
    background: #ecfdf5;
    color: #1e8449;
    border: 1px solid #a7f3d0;
}
.sbc-stat-plus:hover { background: #d1fae5; }
.sbc-stat-plus:active { transform: scale(0.9); }

.sbc-stat-value {
    min-width: 24px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    color: #0a1a2b;
    padding: 0 2px;
    font-variant-numeric: tabular-nums;
}

.sbc-td-del { width: 34px; }
.sbc-del-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fee;
    color: #c0392b;
    border: 1px solid #fcc;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.15s;
}
.sbc-del-btn:hover { background: #fdd; transform: scale(1.1); }

/* --- Fila de totales --- */
.sbc-totals-row td {
    background: #f1f5f9 !important;
    border-top: 2px solid #cbd5e1 !important;
    padding: 8px 2px !important;
    font-weight: 900;
    color: #003366;
    font-size: 0.85rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.sbc-total-label {
    text-align: left !important;
    padding-left: 10px !important;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    position: sticky !important;
    left: 0;
    z-index: 4;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.sbc-empty {
    text-align: center;
    padding: 30px 15px !important;
    color: #94a3b8;
    font-style: italic;
    font-size: 0.85rem;
}
.sbc-empty i { color: var(--gold); margin-right: 6px; }

/* --- Acciones --- */
.sbc-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sbc-add-btn,
.sbc-lineup-btn {
    flex: 1;
    min-width: 140px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: inherit;
}
.sbc-add-btn {
    background: linear-gradient(135deg, #003366, #0047AB);
    color: #fff;
}
.sbc-add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 51, 102, 0.3); }
.sbc-lineup-btn {
    background: #fff;
    color: #003366;
    border: 2px solid var(--gold);
}
.sbc-lineup-btn:hover { background: var(--gold); color: #001a33; }

/* ============================================================
   LINEUP SELECTOR MODAL
   ============================================================ */
.lup-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px;
    background: #f8fafc;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}
.lup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
}
.lup-item:hover { border-color: var(--gold); }
.lup-item:has(input:checked) {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), #fff);
    border-color: var(--gold);
}
.lup-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #003366;
    cursor: pointer;
    flex-shrink: 0;
}
.lup-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.lup-name {
    flex: 1;
    font-weight: 700;
    font-size: 0.85rem;
    color: #0a1a2b;
}
.lup-pos {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 700;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 20px;
}

/* ============================================================
   RESPONSIVE — MÓVILES
   ============================================================ */
@media (max-width: 720px) {
    .sbx-mode-tab { font-size: 0.72rem; padding: 8px 10px; gap: 5px; }
    .sbx-mode-tab i { font-size: 0.78rem; }

    .sbc-table { min-width: 640px; font-size: 0.72rem; }
    .sbc-th-player { min-width: 130px; padding-left: 6px !important; font-size: 0.58rem; }
    .sbc-td-player { min-width: 130px; padding: 4px 6px 4px 4px !important; }
    .sbc-player-num { width: 24px; height: 24px; font-size: 0.6rem; }
    .sbc-player-input { font-size: 0.7rem; padding: 2px 4px; }

    .sbc-td-stat { min-width: 40px; }
    .sbc-stat-box { padding: 1px; }
    .sbc-stat-minus, .sbc-stat-plus { width: 16px; height: 22px; font-size: 0.75rem; }
    .sbc-stat-value { min-width: 20px; height: 22px; font-size: 0.75rem; }

    .sbc-del-btn { width: 22px; height: 22px; font-size: 0.6rem; }
    .sbc-totals-row td { padding: 6px 2px !important; font-size: 0.75rem; }
    .sbc-total-label { font-size: 0.6rem; padding-left: 6px !important; }

    .sbc-add-btn, .sbc-lineup-btn { font-size: 0.74rem; padding: 8px 12px; min-width: 0; }
}

@media (max-width: 400px) {
    .sbx-mode-tab span { display: inline; font-size: 0.68rem; }
    .sbx-mode-tab i { display: none; }
    .sbc-table { min-width: 600px; }
    .sbc-stat-minus, .sbc-stat-plus { width: 14px; height: 20px; font-size: 0.7rem; }
    .sbc-stat-value { min-width: 18px; height: 20px; font-size: 0.7rem; }
    .sbc-th-player, .sbc-td-player { min-width: 115px; }
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] .sbx-mode-tabs { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .sbx-mode-tab { color: #b0b0c8; }
[data-theme="dark"] .sbx-mode-tab:hover { color: #fcd34d; background: #2a2a3e; }

[data-theme="dark"] .sbc-table-wrap { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .sbc-table thead th {
    background: #1e1e2f;
    color: #b0b0c8;
    border-color: #3d3d5c;
}
[data-theme="dark"] .sbc-th-player { background: #1e1e2f !important; }
[data-theme="dark"] .sbc-td-player { background: #25253b !important; }
[data-theme="dark"] .sbc-table tbody tr:nth-child(even) { background: #2a2a3e; }
[data-theme="dark"] .sbc-table tbody tr:nth-child(even) .sbc-td-player { background: #2a2a3e !important; }
[data-theme="dark"] .sbc-table tbody tr:hover { background: #333351; }
[data-theme="dark"] .sbc-table tbody tr:hover .sbc-td-player { background: #333351 !important; }
[data-theme="dark"] .sbc-player-input { color: #e8e8f0; }
[data-theme="dark"] .sbc-player-input:focus { background: #2d2d45; }

[data-theme="dark"] .sbc-stat-box { background: #1e1e2f; border-color: #3d3d5c; }
[data-theme="dark"] .sbc-stat-value { color: #e8e8f0; }
[data-theme="dark"] .sbc-stat-minus { background: #3a1a1a; color: #f28b82; border-color: #5a2a2a; }
[data-theme="dark"] .sbc-stat-plus  { background: #1a3a2a; color: #6fcf97; border-color: #27ae60; }

[data-theme="dark"] .sbc-totals-row td { background: #1e1e2f !important; border-top-color: #3d3d5c !important; color: #fcd34d; }
[data-theme="dark"] .sbc-total-label { color: #fcd34d; }
[data-theme="dark"] .sbc-del-btn { background: #3a1a1a; color: #f28b82; border-color: #5a2a2a; }
[data-theme="dark"] .sbc-empty { color: #8a8aa0; }

[data-theme="dark"] .lup-list { background: #2a2a3e; }
[data-theme="dark"] .lup-item { background: #25253b; }
[data-theme="dark"] .lup-item:has(input:checked) {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), #25253b);
}
[data-theme="dark"] .lup-name { color: #e8e8f0; }
[data-theme="dark"] .lup-pos { background: #3d3d5c; color: #b0b0c8; }

/* ============================================================
   ELEGIBILIDAD PARA PLAYOFFS
   ============================================================ */

/* --- Badge genérico reutilizable --- */
.elig-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}
.elig-badge.elig-yes { background: #ecfdf5; color: #1e8449; border: 1px solid #a7f3d0; }
.elig-badge.elig-no  { background: #fee; color: #c0392b; border: 1px solid #fcc; }

/* --- Banner de regla (arriba de la sección) --- */
.elig-rule-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fef3c7, #fff7e6);
    border-left: 4px solid var(--gold);
    font-size: 0.85rem;
    color: #78350f;
    line-height: 1.5;
}
.elig-rule-banner i { color: var(--gold-dark); font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; }
.elig-rule-banner b { font-weight: 900; }

/* --- Bloque por categoría --- */
.elig-cat-block { margin-bottom: 20px; }
.elig-cat-block:last-child { margin-bottom: 0; }
.elig-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.04), transparent);
    border-left: 4px solid #003366;
    border-radius: 0 10px 10px 0;
    flex-wrap: wrap;
}
.elig-cat-label { font-weight: 900; color: #003366; font-size: 0.92rem; }
.elig-cat-count {
    margin-left: auto;
    font-size: 0.7rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 800;
}

/* --- Card del equipo --- */
.elig-team-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 51, 102, 0.04);
}
.elig-team-card:last-child { margin-bottom: 0; }

.elig-team-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
    flex-wrap: wrap;
}
.elig-team-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.9rem;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
.elig-team-logo img { width: 100%; height: 100%; object-fit: cover; }
.elig-team-info { flex: 1; min-width: 0; }
.elig-team-name {
    font-weight: 900;
    color: #0a1a2b;
    font-size: 0.92rem;
    line-height: 1.2;
}
.elig-team-meta { margin-top: 3px; }
.elig-summary {
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.elig-summary-ok { color: #1e8449; }
.elig-summary-warn { color: #c0392b; }

/* --- Lista de jugadores --- */
.elig-players-list { display: flex; flex-direction: column; gap: 4px; }

.elig-player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.elig-player-row:hover {
    background: #fff;
    border-color: #e2e8f0;
    transform: translateX(3px);
}
.elig-player-row.is-ineligible { background: #fff5f5; }
.elig-player-row.is-ineligible:hover { background: #fee; border-color: #fcc; }

.elig-player-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.68rem;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.elig-player-info { flex: 1; min-width: 0; }
.elig-player-name {
    font-weight: 800;
    color: #0a1a2b;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.elig-player-pos {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 700;
    margin-top: 1px;
}
.elig-player-games {
    display: flex;
    align-items: baseline;
    gap: 1px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.elig-games-num {
    font-weight: 900;
    font-size: 1rem;
    color: #003366;
}
.elig-player-row.is-ineligible .elig-games-num { color: #c0392b; }
.elig-games-total { font-size: 0.7rem; color: #94a3b8; font-weight: 700; }

.elig-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 900;
    white-space: nowrap;
    flex-shrink: 0;
}
.elig-tag-yes { background: #ecfdf5; color: #1e8449; border: 1px solid #a7f3d0; }
.elig-tag-no  { background: #fee; color: #c0392b; border: 1px solid #fcc; }

.elig-empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
    font-style: italic;
}
.elig-empty i { margin-right: 6px; }

/* --- Pills en tabla de bateo por equipo --- */
.stx-elig-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.85rem;
}
.stx-elig-pill-yes { background: #ecfdf5; color: #1e8449; }
.stx-elig-pill-no  { background: #fee; color: #c0392b; }

/* --- Badge en Modal del Jugador --- */
.pmp-eligibility {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(6px);
}
.pmp-eligibility i { font-size: 1.5rem; flex-shrink: 0; }
.pmp-elig-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmp-elig-text strong { font-size: 0.85rem; font-weight: 900; letter-spacing: -0.2px; }
.pmp-elig-text small { font-size: 0.7rem; opacity: 0.85; font-weight: 600; }

.pmp-elig-yes {
    background: rgba(39, 174, 96, 0.2);
    border: 1px solid rgba(39, 174, 96, 0.5);
    color: #6fcf97;
}
.pmp-elig-no {
    background: rgba(229, 62, 62, 0.2);
    border: 1px solid rgba(229, 62, 62, 0.5);
    color: #fca5a5;
}

/* --- Scorebook: fila no elegible --- */
.sbc-tr-ineligible .sbc-td-player { background: #fff5f5 !important; }
.sbc-tr-ineligible .sbc-player-input { color: #c0392b; }
.sbc-elig-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fee;
    color: #c0392b;
    font-size: 0.6rem;
    flex-shrink: 0;
}

/* --- Banner de advertencia en scorebook playoff --- */
.sbx-playoff-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fee2e2, #fef2f2);
    border-left: 4px solid #e53e3e;
    color: #991b1b;
    font-size: 0.78rem;
    line-height: 1.4;
    flex-shrink: 0;
}
.sbx-playoff-warning i { color: #e53e3e; font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; }
.sbx-playoff-warning strong { font-weight: 900; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .elig-rule-banner { padding: 10px 12px; font-size: 0.78rem; gap: 8px; }
    .elig-rule-banner i { font-size: 1rem; }

    .elig-team-card { padding: 10px; }
    .elig-team-logo { width: 34px; height: 34px; font-size: 0.78rem; }
    .elig-team-name { font-size: 0.85rem; }

    .elig-player-row { padding: 6px 8px; gap: 8px; }
    .elig-player-num { width: 24px; height: 24px; font-size: 0.6rem; }
    .elig-player-name { font-size: 0.76rem; }
    .elig-player-pos { font-size: 0.58rem; }
    .elig-games-num { font-size: 0.88rem; }
    .elig-tag { font-size: 0.58rem; padding: 2px 7px; }

    .pmp-eligibility { padding: 10px 12px; gap: 10px; margin-top: 10px; }
    .pmp-eligibility i { font-size: 1.2rem; }
    .pmp-elig-text strong { font-size: 0.78rem; }
    .pmp-elig-text small { font-size: 0.65rem; }

    .sbx-playoff-warning { padding: 8px 10px; font-size: 0.72rem; gap: 8px; }
    .sbx-playoff-warning i { font-size: 0.95rem; }
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] .elig-rule-banner {
    background: linear-gradient(135deg, #3d3d1a, #2a2a3e);
    color: #fcd34d;
    border-left-color: #d4af37;
}
[data-theme="dark"] .elig-cat-head {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent);
    border-left-color: #fcd34d;
}
[data-theme="dark"] .elig-cat-label { color: #e8e8f0; }
[data-theme="dark"] .elig-cat-count { background: #3d3d5c; color: #b0b0c8; }

[data-theme="dark"] .elig-team-card { background: #25253b; border-color: #3d3d5c; }
[data-theme="dark"] .elig-team-head { border-color: #3d3d5c; }
[data-theme="dark"] .elig-team-name { color: #e8e8f0; }

[data-theme="dark"] .elig-player-row { background: #2a2a3e; }
[data-theme="dark"] .elig-player-row:hover { background: #333351; border-color: #fcd34d; }
[data-theme="dark"] .elig-player-row.is-ineligible { background: #3a1a1a; }
[data-theme="dark"] .elig-player-row.is-ineligible:hover { background: #4a2a2a; }

[data-theme="dark"] .elig-player-name { color: #e8e8f0; }
[data-theme="dark"] .elig-games-num { color: #fcd34d; }
[data-theme="dark"] .elig-player-row.is-ineligible .elig-games-num { color: #f28b82; }

[data-theme="dark"] .elig-tag-yes { background: #1a3a2a; color: #6fcf97; border-color: #27ae60; }
[data-theme="dark"] .elig-tag-no  { background: #3a1a1a; color: #f28b82; border-color: #5a2a2a; }
[data-theme="dark"] .elig-badge.elig-yes { background: #1a3a2a; color: #6fcf97; border-color: #27ae60; }
[data-theme="dark"] .elig-badge.elig-no  { background: #3a1a1a; color: #f28b82; border-color: #5a2a2a; }

[data-theme="dark"] .stx-elig-pill-yes { background: #1a3a2a; color: #6fcf97; }
[data-theme="dark"] .stx-elig-pill-no  { background: #3a1a1a; color: #f28b82; }

[data-theme="dark"] .pmp-elig-yes { background: rgba(39, 174, 96, 0.25); color: #6fcf97; border-color: rgba(39, 174, 96, 0.6); }
[data-theme="dark"] .pmp-elig-no  { background: rgba(229, 62, 62, 0.25); color: #f28b82; border-color: rgba(229, 62, 62, 0.6); }

[data-theme="dark"] .sbc-tr-ineligible .sbc-td-player { background: #3a1a1a !important; }
[data-theme="dark"] .sbc-tr-ineligible .sbc-player-input { color: #f28b82; }
[data-theme="dark"] .sbc-elig-warn { background: #5a2a2a; color: #f28b82; }

[data-theme="dark"] .sbx-playoff-warning {
    background: linear-gradient(135deg, #3a1a1a, #4a2a2a);
    color: #fca5a5;
    border-left-color: #e53e3e;
}
[data-theme="dark"] .sbx-playoff-warning i { color: #f28b82; }

/* ============================================================
   ⚡ LIGA SNTE 53 — PREMIUM OVERRIDES v3.0
   Contraste Dark/Light + iPhone Mini + Refinamiento UI
   Pegar al final de styles-vet.css (aditivo, no rompe nada)
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES — Dark mode refinado (override, gana por cascada)
   ------------------------------------------------------------ */
[data-theme="dark"] {
    --primary: #1a3a6b;
    --primary-dark: #0f2440;
    --primary-light: #2a5a9b;
    --gold: #e5c158;
    --gold-light: #f5d78e;
    --gold-dark: #b8960e;

    --white: #1e1e2f;
    --bg-light: #2a2a3e;
    --bg-card: #25253b;
    --bg-input: #2d2d45;
    --bg-hover: rgba(255, 255, 255, 0.05);

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0a1a2b;

    --border: #3d3d5c;
    --border-strong: #52527a;
    --success: #4ade80;
    --success-bg: #143a2a;
    --success-text: #6fcf97;
    --danger: #f87171;
    --danger-bg: #3a1a1a;
    --danger-text: #fca5a5;
    --warning: #fbbf24;
    --warning-bg: #3d3d1a;
    --warning-text: #fcd34d;
    --info: #60a5fa;
    --info-bg: #1a2a3a;
    --info-text: #93c5fd;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.7);
    --focus-ring: 0 0 0 3px rgba(229, 193, 88, 0.45);

    color-scheme: dark;
}

/* Variables semánticas de estado en LIGHT (para badges/chips) */
:root {
    --success-bg: #ecfdf5;
    --success-text: #1e8449;
    --danger-bg: #fee2e2;
    --danger-text: #c0392b;
    --warning-bg: #fff7ed;
    --warning-text: #92400e;
    --info-bg: #eff6ff;
    --info-text: #1e40af;
    --border-strong: #cbd5e1;
    --text-inverse: #ffffff;
    --focus-ring: 0 0 0 3px rgba(212, 175, 55, 0.35);
    color-scheme: light;
}

/* ------------------------------------------------------------
   2. FIX MODALES DINÁMICOS — Contraste dark en cualquier modal
   (Excluye los premium que ya tienen su propia paleta)
   ------------------------------------------------------------ */
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) {
    background: #25253b !important;
    color: #e8e8f0 !important;
}
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) .modal-body {
    background: #1e1e2f !important;
    color: #e8e8f0 !important;
}
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) .modal-footer {
    background: #2a2a3e !important;
    border-top-color: #3d3d5c !important;
    color: #e8e8f0 !important;
}
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) .modal-title {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) p,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) span,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) label,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) strong,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) h1,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) h2,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) h3,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) h4,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) h5,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) h6 {
    color: #e8e8f0;
}

/* Cajas con background blanco inline → surface oscura en dark */
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background:white"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background: white"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background:#fff"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background: #fff"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background:#f8"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background: #f8"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background:#faf"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background: #faf"] {
    background: #2a2a3e !important;
    color: #e8e8f0 !important;
    border-color: #3d3d5c !important;
}

/* Colores de texto claros inline (#333, #555, #666, #888, #64748b, #718096) */
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color:#333"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color: #333"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color:#555"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color: #555"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color:#666"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color: #666"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color:#888"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color: #888"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color:#64748b"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color: #64748b"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color:#718096"],
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="color: #718096"] {
    color: #b0b0c8 !important;
}

/* Inputs / selects / textareas dentro de modales dinámicos en dark */
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) select,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) textarea {
    background: #2d2d45 !important;
    color: #f1f5f9 !important;
    border-color: #4a4a6a !important;
}
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) input::placeholder,
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) textarea::placeholder {
    color: #8a8aa0 !important;
}
[data-theme="dark"] .modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) select option {
    background: #2d2d45;
    color: #f1f5f9;
}

/* Fix inverso: fondos oscuros inline en light mode */
.modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background:#2d"],
.modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background:#1a"],
.modal-overlay .modal:not(.player-modal-premium):not(.game-summary-modal-premium) [style*="background:#25"] {
    background: #f8fafc !important;
    color: #1a202c !important;
}

/* ------------------------------------------------------------
   3. SELECTS NATIVOS — Consistencia + dark + autofill
   ------------------------------------------------------------ */
select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
[data-theme="dark"] select {
    background-color: #2d2d45;
    color: #f1f5f9;
    border-color: #4a4a6a;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
[data-theme="dark"] select option { background: #2d2d45; color: #f1f5f9; }
[data-theme="dark"] select option:checked { background: #003366; color: #ffffff; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #2d2d45 inset !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

/* ------------------------------------------------------------
   4. BOTONES Y BADGES — Refinamiento premium
   ------------------------------------------------------------ */
.btn {
    font-family: var(--font);
    letter-spacing: 0.2px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--primary); color: #ffffff; }
.btn-primary:hover   { background: var(--primary-light); box-shadow: 0 6px 14px rgba(0,51,102,0.25); }
.btn-info      { background: var(--info);    color: #ffffff; }
.btn-info:hover      { background: #2563eb; }
.btn-success   { background: var(--success); color: #ffffff; }
.btn-success:hover   { background: #2f855a; }
.btn-danger    { background: var(--danger);  color: #ffffff; }
.btn-danger:hover    { background: #c53030; }
.btn-warning   { background: var(--warning); color: #ffffff; }
.btn-warning:hover   { background: #c05621; }
.btn-secondary { background: var(--text-secondary); color: #ffffff; }
.btn-secondary:hover { background: var(--text-primary); }

[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #2a5a9b, #1a3a6b); }
[data-theme="dark"] .btn-primary:hover { background: linear-gradient(135deg, #3a6aab, #2a5a9b); }

.badge, .chip, .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 800; white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-info    { background: var(--info-bg);    color: var(--info-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }

/* Status messages con mejor contraste */
.status-message { border-radius: 12px; font-weight: 600; }
.status-success { background: var(--success-bg); color: var(--success-text); border: 1px solid rgba(39,174,96,0.3); }
.status-error   { background: var(--danger-bg);  color: var(--danger-text);  border: 1px solid rgba(229,62,62,0.3); }
.status-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid rgba(221,107,32,0.3); }
.status-info    { background: var(--info-bg);    color: var(--info-text);    border: 1px solid rgba(49,130,206,0.3); }

[data-theme="dark"] .status-success { background: #143a2a; color: #6fcf97; border-color: #27ae60; }
[data-theme="dark"] .status-error   { background: #3a1a1a; color: #fca5a5; border-color: #e53e3e; }
[data-theme="dark"] .status-warning { background: #3d3d1a; color: #fcd34d; border-color: #d4af37; }
[data-theme="dark"] .status-info    { background: #1a2a3a; color: #93c5fd; border-color: #3182ce; }

/* ------------------------------------------------------------
   5. TABS Y NAVBAR — Contraste correcto en ambos modos
   ------------------------------------------------------------ */
.tabs-header {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 10px 14px;
    gap: 8px;
    border-radius: 14px;
}
.tab-btn {
    background: var(--bg-light);
    color: var(--text-secondary);
    font-weight: 700;
    border-radius: var(--radius-full);
    padding: 10px 18px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}
.tab-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.tab-btn.active {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    color: #ffffff;
    border: 2px solid var(--gold);
    box-shadow: 0 6px 16px rgba(0,51,102,0.3);
}
[data-theme="dark"] .tab-btn { background: #2a2a3e; color: #b0b0c8; border-color: transparent; }
[data-theme="dark"] .tab-btn:hover { background: #333351; color: #f1f5f9; }
[data-theme="dark"] .tab-btn.active {
    background: linear-gradient(135deg, #2a5a9b, #0f2440);
    color: #ffffff;
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(212,175,55,0.35);
}

.user-badge {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    color: #ffffff;
    font-weight: 600;
    backdrop-filter: blur(6px);
}
[data-theme="dark"] .user-badge {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
    color: #e8e8f0;
}

/* Theme toggle — legible en ambos modos */
.theme-toggle-btn {
    background: rgba(255,255,255,0.15) !important;
    border: 2px solid rgba(255,255,255,0.35) !important;
    color: #ffffff !important;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer;
    transition: all 0.2s; flex-shrink: 0;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,0.28) !important; transform: scale(1.08); }
.theme-toggle-btn i { color: #ffffff !important; }
[data-theme="dark"] .theme-toggle-btn { background: rgba(212,175,55,0.15) !important; border-color: var(--gold) !important; }
[data-theme="dark"] .theme-toggle-btn:hover { background: rgba(212,175,55,0.28) !important; }
[data-theme="dark"] .theme-toggle-btn i { color: var(--gold-light) !important; }

#logoutBtn { background: rgba(229,62,62,0.9); transition: all 0.2s; }
#logoutBtn:hover { background: var(--danger); transform: scale(1.05); }

/* ------------------------------------------------------------
   6. TABLAS — Contraste dark/light + scroll premium
   ------------------------------------------------------------ */
.table-responsive,
.stx-table-wrap,
.sbx-table-scroll,
.sbc-table-wrap,
.dsh-standings-table-wrap,
.scorebook-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
}
.table-responsive::-webkit-scrollbar,
.stx-table-wrap::-webkit-scrollbar,
.sbx-table-scroll::-webkit-scrollbar,
.sbc-table-wrap::-webkit-scrollbar,
.dsh-standings-table-wrap::-webkit-scrollbar,
.scorebook-table-scroll::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb,
.stx-table-wrap::-webkit-scrollbar-thumb,
.sbx-table-scroll::-webkit-scrollbar-thumb,
.sbc-table-wrap::-webkit-scrollbar-thumb,
.dsh-standings-table-wrap::-webkit-scrollbar-thumb,
.scorebook-table-scroll::-webkit-scrollbar-thumb {
    background: var(--gold); border-radius: 10px;
}

[data-theme="dark"] table thead th {
    background: #0f2440 !important;
    color: #f1f5f9 !important;
    border-bottom-color: #3d3d5c !important;
}
[data-theme="dark"] table tbody td { color: #e8e8f0 !important; border-color: #3d3d5c !important; }
[data-theme="dark"] table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] table tbody tr:hover { background: rgba(255,255,255,0.07) !important; }

[data-theme="dark"] .dsh-standings-table thead th {
    background: #0f2440 !important; color: #cbd5e1 !important; border-color: #3d3d5c !important;
}
[data-theme="dark"] .dsh-standings-row:nth-child(even) { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .dsh-standings-row:hover { background: rgba(212,175,55,0.10) !important; }
[data-theme="dark"] .dsh-team-name { color: #f1f5f9 !important; }

[data-theme="dark"] .dsh-leader-item { background: #2a2a3e; }
[data-theme="dark"] .dsh-leader-item:hover {
    background: linear-gradient(90deg, rgba(212,175,55,0.15), #2a2a3e);
}
[data-theme="dark"] .dsh-leader-name { color: #f1f5f9; }
[data-theme="dark"] .dsh-leader-team { color: #94a3b8; }
[data-theme="dark"] .dsh-leader-value.value-h  { background: rgba(212,175,55,0.15); color: #fcd34d; }
[data-theme="dark"] .dsh-leader-value.value-hr { background: rgba(229,62,62,0.15);  color: #fca5a5; }

/* ------------------------------------------------------------
   7. SCROLLBAR Y FOCUS GLOBAL
   ------------------------------------------------------------ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #d4af37, #b8960e);
    border: 1px solid rgba(0,0,0,0.3);
}

*:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
button:focus-visible,
.btn:focus-visible,
.tab-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (hover: none) and (pointer: coarse) {
    button, .btn, [onclick], a { min-height: 32px; }
    .sbx-qb, .sbc-stat-plus, .sbc-stat-minus { min-height: 36px; min-width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   8. TOASTS — Premium + responsive iPhone
   ------------------------------------------------------------ */
body > div[style*="position:fixed"][style*="top:20px"] {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1.4 !important;
}

/* ------------------------------------------------------------
   9. IPHONE MINI (390px) — Refinamiento global responsive
   ------------------------------------------------------------ */
@media (max-width: 390px) {
    html { font-size: 13px; }

    .navbar { padding: 8px 10px; }
    .nav-logo-img { width: 36px; height: 36px; }
    .nav-logo-text h1 { font-size: 0.78rem; line-height: 1.15; }
    .nav-logo-text span { font-size: 0.56rem; }
    .user-info-container { gap: 6px; flex-wrap: wrap; }
    .user-badge { font-size: 0.65rem; padding: 4px 9px; }
    #logoutBtn { width: 30px; height: 30px; font-size: 0.75rem; }
    .theme-toggle-btn { width: 32px; height: 32px; font-size: 0.9rem; }

    .tabs-container { padding: 0 10px; margin: 12px auto; }
    .tabs-header { padding: 6px 8px; gap: 4px; }
    .tab-btn { padding: 8px 12px; font-size: 0.72rem; gap: 4px; }
    .tab-btn i { font-size: 0.8rem; }
    .tab-btn .tab-text { font-size: 0.68rem; }

    .tab-section { padding: 12px; border-radius: 12px; margin-bottom: 14px; }
    .tab-title { font-size: 1.1rem; padding-bottom: 10px; margin-bottom: 14px; }
    .section-header h2 { font-size: 0.95rem; }
    .section-header { gap: 8px; margin-bottom: 10px; }

    .btn { font-size: 0.78rem; padding: 9px 14px; }
    .btn-small { font-size: 0.68rem; padding: 5px 10px; }

    .modal-overlay { padding: 8px; }
    .modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: calc(100vh - 16px);
        border-radius: 16px !important;
    }
    .modal-header { padding: 12px 14px; border-radius: 16px 16px 0 0; font-size: 0.92rem; }
    .modal-body { padding: 14px 12px; }
    .modal-footer {
        padding: 12px;
        border-radius: 0 0 16px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .modal-footer .btn { flex: 1 1 auto; min-width: 110px; }
    .modal-close { width: 32px; height: 32px; font-size: 1rem; }

    .stat-value,
    .dsh-stat-card .stat-value { font-size: 1.8rem !important; }
    .stat-card { padding: 14px 12px; }
    .quick-stats-container { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

    .form-grid { grid-template-columns: 1fr !important; }
    .input-group input,
    .input-group select,
    .input-group textarea {
        padding: 10px 12px;
        font-size: 16px !important;
    }

    .footer { padding: 16px 12px; }
    .footer p { font-size: 0.7rem; }
    .footer-brand-tag { font-size: 0.72rem; padding: 5px 14px; }

    .stx-hero { padding: 14px; border-radius: 14px; }
    .stx-hero-title { font-size: 1rem; }
    .stx-hero-label { font-size: 0.6rem; letter-spacing: 1.2px; }
    .stx-hero-icon { width: 42px; height: 42px; font-size: 1.15rem; }
    .stx-hero-actions { width: 100%; }
    .stx-select-hero { flex: 1; max-width: none; width: 100%; }
    .stx-btn-hero { width: 100%; }
    .stx-filters { padding: 12px; gap: 10px; }
    .stx-filter-group { min-width: 100%; }
    .stx-filter-select { font-size: 16px !important; padding: 10px 12px; }

    .stx-table { min-width: 520px; font-size: 0.75rem; }
    .stx-table thead th { padding: 8px 5px; font-size: 0.58rem; }
    .stx-row td { padding: 8px 5px; }
    .stx-rank-badge { width: 24px; height: 24px; font-size: 0.68rem; }
    .stx-team-logo { width: 26px; height: 26px; font-size: 0.65rem; }
    .stx-team-name { font-size: 0.78rem; }

    .sbx-mode-tab { font-size: 0.68rem; padding: 8px; gap: 4px; }
    .sbx-mode-tab i { font-size: 0.72rem; }
    .sbx-score-header { padding: 6px; gap: 4px; }
    .sbx-score-logo { width: 32px; height: 32px; font-size: 0.75rem; }
    .sbx-score-name { font-size: 0.65rem; }
    .sbx-score-role { font-size: 0.5rem; }
    .sbx-score-runs { font-size: 1.2rem; }
    .sbx-score-vs { font-size: 0.65rem; padding: 0 5px; }
    .sbx-quick-bar { padding: 8px; }
    .sbx-quick-head { margin-bottom: 6px; }
    .sbx-quick-status { font-size: 0.66rem; }
    .sbx-quick-reset { font-size: 0.6rem; padding: 4px 8px; }
    .sbx-quick-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
    .sbx-qb { padding: 5px 2px; border-radius: 7px; }
    .sbx-qb b { font-size: 0.68rem; }
    .sbx-qb small { display: none; }

    .sbc-table { min-width: 580px; }
    .sbc-th-player { min-width: 110px; padding-left: 4px !important; }
    .sbc-td-player { min-width: 110px; padding: 4px 4px 4px 2px !important; }
    .sbc-player-num { width: 22px; height: 22px; font-size: 0.58rem; }
    .sbc-player-input { font-size: 0.68rem; padding: 2px 3px; }
    .sbc-td-stat { min-width: 34px; }
    .sbc-stat-box { padding: 1px; }
    .sbc-stat-minus,
    .sbc-stat-plus { width: 14px; height: 20px; font-size: 0.72rem; }
    .sbc-stat-value { min-width: 18px; height: 20px; font-size: 0.68rem; }
    .sbc-del-btn { width: 20px; height: 20px; font-size: 0.55rem; }
    .sbc-total-label { font-size: 0.58rem; padding-left: 4px !important; }
    .sbc-totals-row td { font-size: 0.72rem; padding: 5px 2px !important; }

    .elig-player-row { padding: 6px 8px; gap: 8px; }
    .elig-player-num { width: 22px; height: 22px; font-size: 0.58rem; }
    .elig-player-name { font-size: 0.74rem; }
    .elig-games-num { font-size: 0.82rem; }
    .elig-tag { font-size: 0.56rem; padding: 2px 6px; }

    .pmp-hero { padding: 14px 12px 12px; }
    .pmp-hero-number { width: 50px; height: 50px; font-size: 1rem; }
    .pmp-hero-name { font-size: 1.1rem; }
    .pmp-hero-avg-value { font-size: 2rem; }
    .pmp-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .pmp-stat { padding: 8px 4px; }
    .pmp-stat-value { font-size: 0.95rem; }
    .pmp-stat-label { font-size: 0.5rem; }

    .gsm-hero { padding: 12px 10px 10px; }
    .gsm-team-avatar { width: 46px; height: 46px; font-size: 1rem; }
    .gsm-team-name { font-size: 0.72rem; }
    .gsm-score { font-size: 1.5rem; }
    .gsm-tab { padding: 7px 10px; font-size: 0.7rem; }
    .gsm-body { padding: 10px 8px; }
}

/* ------------------------------------------------------------
   10. IPHONE SE / 320px — Refinamientos extremos
   ------------------------------------------------------------ */
@media (max-width: 340px) {
    html { font-size: 12px; }

    .nav-logo-text h1 { font-size: 0.7rem; }
    .nav-logo-text span { font-size: 0.5rem; }
    .nav-logo-img { width: 32px; height: 32px; }
    .user-badge { display: none; }

    .tab-btn { padding: 6px 8px; font-size: 0.64rem; }
    .tab-btn i { display: none; }

    .tab-section { padding: 10px; }
    .tab-title { font-size: 0.95rem; }

    .stat-value,
    .dsh-stat-card .stat-value { font-size: 1.5rem !important; }
    .quick-stats-container { grid-template-columns: 1fr 1fr !important; gap: 8px; }

    .sbx-qb { padding: 4px 1px; }
    .sbx-qb b { font-size: 0.62rem; }

    .sbc-table { min-width: 540px; }
    .sbc-th-player { min-width: 100px; }
    .sbc-td-player { min-width: 100px; }
    .sbc-stat-minus,
    .sbc-stat-plus { width: 12px; height: 18px; font-size: 0.65rem; }
    .sbc-stat-value { min-width: 16px; height: 18px; font-size: 0.62rem; }

    .btn { font-size: 0.72rem; padding: 8px 12px; }
    .modal-header { font-size: 0.85rem; }

    .pmp-hero { padding: 12px 10px 10px; }
    .pmp-hero-number { width: 44px; height: 44px; font-size: 0.9rem; }
    .pmp-hero-name { font-size: 1rem; }
    .pmp-hero-avg-value { font-size: 1.7rem; }
    .pmp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------
   11. TOASTS — Responsive iPhone (reposición)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    body > div[style*="position:fixed"][style*="top:20px"] {
        left: 12px !important;
        right: 12px !important;
        top: max(12px, env(safe-area-inset-top, 0px)) !important;
        max-width: none !important;
        font-size: 0.85rem !important;
        padding: 12px 14px !important;
    }
}

/* ============================================================
   ELEGIBILIDAD COMPACTA (colapsable)
   ============================================================ */

/* Wrapper <details> */
.elig-collapse {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px;
}

.elig-collapse-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    transition: background 0.2s;
    user-select: none;
}
.elig-collapse-summary::-webkit-details-marker { display: none; }
.elig-collapse-summary:hover { background: linear-gradient(135deg, #eff6ff, #e0ecff); }

.elig-collapse[open] .elig-collapse-summary {
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f0f7ff, #e6eefb);
}

.elig-collapse-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.elig-collapse-title > i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #003366, #0047AB);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}
.elig-collapse-main {
    font-size: 0.95rem;
    font-weight: 900;
    color: #003366;
    letter-spacing: -0.2px;
    line-height: 1.2;
}
.elig-collapse-sub {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
    margin-top: 2px;
}
.elig-collapse-sub b { color: var(--gold-dark); }

.elig-collapse-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.25s;
    flex-shrink: 0;
}
.elig-collapse[open] .elig-collapse-toggle {
    transform: rotate(180deg);
    background: #003366;
    color: #fff;
    border-color: #003366;
}

.elig-collapse-body {
    padding: 16px 18px;
}

.elig-collapse-loading {
    text-align: center;
    padding: 24px 12px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
}
.elig-collapse-loading i { color: var(--gold-dark); margin-right: 6px; }

/* Empty state minimalista (no parece modal) */
.elig-compact-empty {
    text-align: center;
    padding: 20px 12px;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 600;
    font-style: italic;
}
.elig-compact-empty i { color: var(--gold-dark); margin-right: 6px; }

/* ============ Vista compacta por categoría ============ */
.elig-compact-cat {
    margin-bottom: 16px;
}
.elig-compact-cat:last-child { margin-bottom: 0; }

.elig-compact-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.elig-compact-cat-label {
    font-weight: 900;
    color: #003366;
    font-size: 0.85rem;
}

.elig-compact-team {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.elig-compact-team:last-child { margin-bottom: 0; }

.elig-compact-team-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
    flex-wrap: wrap;
}
.elig-compact-logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.72rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.elig-compact-logo img { width: 100%; height: 100%; object-fit: cover; }

.elig-compact-team-name {
    font-weight: 800;
    color: #0a1a2b;
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elig-compact-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}
.elig-compact-badge.is-ok { background: #ecfdf5; color: #1e8449; }
.elig-compact-badge.is-warn { background: #fee; color: #c0392b; }

/* Lista compacta de jugadores (grid 2 columnas en desktop) */
.elig-compact-players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px;
}

.elig-compact-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    min-width: 0;
}
.elig-compact-player:hover {
    background: #f0f9ff;
    border-color: #e2e8f0;
    transform: translateX(2px);
}
.elig-compact-player.is-no { background: #fff5f5; }
.elig-compact-player.is-no:hover { background: #fee; border-color: #fcc; }

.elig-compact-pnum {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 0.6rem;
    flex-shrink: 0;
}
.elig-compact-pname {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: #0a1a2b;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.elig-compact-games {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.elig-compact-games b {
    font-weight: 900;
    font-size: 0.78rem;
    color: #003366;
}
.elig-compact-games small {
    font-size: 0.6rem;
    color: #94a3b8;
    font-weight: 700;
}
.elig-compact-player.is-no .elig-compact-games b { color: #c0392b; }

.elig-compact-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    flex-shrink: 0;
}
.elig-compact-icon.is-yes { background: #ecfdf5; color: #1e8449; }
.elig-compact-icon.is-no  { background: #fee; color: #c0392b; }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
    .elig-collapse-summary { padding: 12px 14px; gap: 10px; }
    .elig-collapse-title > i { width: 32px; height: 32px; font-size: 0.85rem; }
    .elig-collapse-main { font-size: 0.86rem; }
    .elig-collapse-sub { font-size: 0.65rem; }
    .elig-collapse-body { padding: 12px 14px; }

    .elig-compact-team { padding: 8px 10px; }
    .elig-compact-logo { width: 26px; height: 26px; font-size: 0.65rem; }
    .elig-compact-team-name { font-size: 0.78rem; }
    .elig-compact-badge { font-size: 0.58rem; padding: 2px 8px; }

    .elig-compact-players { grid-template-columns: 1fr; }
    .elig-compact-player { padding: 4px 6px; gap: 6px; }
    .elig-compact-pnum { width: 20px; height: 20px; font-size: 0.55rem; }
    .elig-compact-pname { font-size: 0.72rem; }
    .elig-compact-games b { font-size: 0.72rem; }
}

@media (max-width: 380px) {
    .elig-collapse-title > i { width: 28px; height: 28px; font-size: 0.78rem; }
    .elig-collapse-main { font-size: 0.8rem; }
    .elig-collapse-sub { font-size: 0.6rem; }
    .elig-collapse-toggle { width: 28px; height: 28px; font-size: 0.72rem; }
}

/* ============ DARK MODE ============ */
[data-theme="dark"] .elig-collapse-summary {
    background: linear-gradient(135deg, #25253b, #2a2a3e);
}
[data-theme="dark"] .elig-collapse-summary:hover {
    background: linear-gradient(135deg, #2d2d45, #333351);
}
[data-theme="dark"] .elig-collapse[open] .elig-collapse-summary {
    background: linear-gradient(135deg, #1e2a44, #25253b);
    border-bottom-color: #3d3d5c;
}
[data-theme="dark"] .elig-collapse-main { color: #e8e8f0; }
[data-theme="dark"] .elig-collapse-sub { color: #b0b0c8; }
[data-theme="dark"] .elig-collapse-sub b { color: var(--gold-light); }
[data-theme="dark"] .elig-collapse-toggle {
    background: #2d2d45;
    border-color: #3d3d5c;
    color: #b0b0c8;
}
[data-theme="dark"] .elig-collapse[open] .elig-collapse-toggle {
    background: #2a5a9b;
    color: #fff;
    border-color: #2a5a9b;
}

[data-theme="dark"] .elig-compact-empty { color: #8a8aa0; }
[data-theme="dark"] .elig-compact-cat-label { color: #e8e8f0; }
[data-theme="dark"] .elig-compact-cat-head { border-bottom-color: #3d3d5c; }

[data-theme="dark"] .elig-compact-team {
    background: #2a2a3e;
    border-color: #3d3d5c;
}
[data-theme="dark"] .elig-compact-team-head { border-bottom-color: #3d3d5c; }
[data-theme="dark"] .elig-compact-team-name { color: #e8e8f0; }
[data-theme="dark"] .elig-compact-badge.is-ok { background: #1a3a2a; color: #6fcf97; }
[data-theme="dark"] .elig-compact-badge.is-warn { background: #3a1a1a; color: #f28b82; }

[data-theme="dark"] .elig-compact-player { background: #25253b; }
[data-theme="dark"] .elig-compact-player:hover {
    background: #333351;
    border-color: #fcd34d;
}
[data-theme="dark"] .elig-compact-player.is-no { background: #3a1a1a; }
[data-theme="dark"] .elig-compact-player.is-no:hover { background: #4a2a2a; }
[data-theme="dark"] .elig-compact-pname { color: #e8e8f0; }
[data-theme="dark"] .elig-compact-games b { color: #fcd34d; }
[data-theme="dark"] .elig-compact-player.is-no .elig-compact-games b { color: #f28b82; }
[data-theme="dark"] .elig-compact-icon.is-yes { background: #1a3a2a; color: #6fcf97; }
[data-theme="dark"] .elig-compact-icon.is-no  { background: #3a1a1a; color: #f28b82; }

/* ============================================================
   DASHBOARD SEASON CARD — Mobile Premium UX/UI
   ============================================================ */

/* --- Mejoras globales (aplican a todos los tamaños) --- */
.dsh-season-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Glow decorativo superior-derecho (dorado) */
.dsh-season-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.28), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
/* Glow decorativo inferior-izquierdo (azul) */
.dsh-season-card::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -60px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(0, 100, 200, 0.22), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.dsh-season-main,
.dsh-season-logo,
.dsh-season-actions {
    position: relative;
    z-index: 1;
}

/* Logo con halo dorado */
.dsh-season-logo img {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.4),
        0 0 0 4px rgba(212, 175, 55, 0.18),
        0 0 22px rgba(212, 175, 55, 0.35);
}

/* Status pill refinado */
.dsh-season-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: rgba(243, 156, 18, 0.22);
    color: #fcd34d;
    border: 1px solid rgba(243, 156, 18, 0.45);
}
.dsh-season-status.is-active {
    background: rgba(39, 174, 96, 0.25);
    color: #6fcf97;
    border-color: rgba(39, 174, 96, 0.55);
    animation: pulseStatus 2s infinite;
}

/* ============================================================
   MOBILE PREMIUM (≤640px) — Layout vertical tipo hero
   ============================================================ */
@media (max-width: 640px) {

    /* Eliminar fondo/padding redundante del contenedor */
    #dashboardSeasonContent {
        padding: 0 !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        color: inherit;
    }

    /* Ajustar el wrapper exterior (evita triple gradiente) */
    .dashboard-season-section {
        padding: 16px 12px !important;
        border-radius: 18px !important;
        background: linear-gradient(160deg, #003366 0%, #001a33 100%) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    }

    /* ===== CARD ===== */
    .dsh-season-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 20px 16px !important;
        border-radius: 16px !important;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
        border: 1px solid rgba(212, 175, 55, 0.28) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow:
            0 8px 28px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* ===== LOGO centrado ===== */
    .dsh-season-logo {
        align-self: center !important;
        margin-bottom: 2px;
        display: flex;
        justify-content: center;
    }
    .dsh-season-logo img {
        width: 72px !important;
        height: 72px !important;
        border-width: 3px !important;
        padding: 3px !important;
    }

    /* ===== TÍTULO + BADGES (columna) ===== */
    .dsh-season-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
        text-align: center;
    }
    .dsh-season-title h3 {
        font-size: 1.15rem !important;
        font-weight: 900 !important;
        width: 100%;
        text-align: center;
        letter-spacing: -0.3px !important;
        line-height: 1.25 !important;
        color: #fff !important;
    }

    .dsh-season-cat {
        background: linear-gradient(135deg, #fcd34d, #d4af37) !important;
        color: #001a33 !important;
        padding: 3px 12px !important;
        border-radius: 20px !important;
        font-size: 0.62rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.4px !important;
        box-shadow: 0 3px 10px rgba(212, 175, 55, 0.35);
    }

    .dsh-season-status {
        font-size: 0.6rem !important;
        padding: 3px 12px !important;
    }

    /* ===== DESCRIPCIÓN ===== */
    .dsh-season-desc {
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin: 0 0 14px !important;
        opacity: 0.88 !important;
        padding: 0 4px;
        color: #e2e8f0 !important;
    }
    .dsh-season-desc:empty { display: none; }

    /* ===== MÉTRICAS 2x2 ===== */
    .dsh-season-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .dsh-metric {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 12px 8px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        text-align: center !important;
        min-width: 0 !important;
        transition: all 0.18s ease;
    }
    .dsh-metric:active {
        transform: scale(0.97);
        background: rgba(255, 255, 255, 0.14) !important;
    }

    .dsh-metric i {
        font-size: 1.1rem !important;
        color: var(--gold) !important;
        margin: 0 !important;
        line-height: 1;
    }

    .dsh-metric > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100%;
        min-width: 0;
    }

    .dsh-metric b {
        font-size: 0.85rem !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        color: #fff !important;
    }

    .dsh-metric small {
        font-size: 0.55rem !important;
        letter-spacing: 0.6px !important;
        color: rgba(255, 255, 255, 0.62) !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        line-height: 1.2;
    }

    /* ===== BOTONES 50/50 ===== */
    .dsh-season-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 2px;
    }
    .dsh-season-actions .btn {
        flex: 1 !important;
        padding: 11px 10px !important;
        font-size: 0.78rem !important;
        border-radius: 12px !important;
        justify-content: center !important;
        font-weight: 800 !important;
        min-width: 0;
    }
}

/* ============================================================
   iPHONE SE / 320px — Ajuste fino
   ============================================================ */
@media (max-width: 360px) {
    .dashboard-season-section {
        padding: 14px 10px !important;
    }
    .dsh-season-card {
        padding: 16px 14px !important;
        gap: 12px !important;
    }
    .dsh-season-logo img {
        width: 62px !important;
        height: 62px !important;
    }
    .dsh-season-title h3 {
        font-size: 1rem !important;
    }
    .dsh-season-desc {
        font-size: 0.72rem !important;
        line-height: 1.45 !important;
    }
    .dsh-season-metrics {
        gap: 6px !important;
    }
    .dsh-metric {
        padding: 10px 6px !important;
    }
    .dsh-metric b {
        font-size: 0.78rem !important;
    }
    .dsh-metric small {
        font-size: 0.5rem !important;
        letter-spacing: 0.4px !important;
    }
    .dsh-metric i {
        font-size: 0.95rem !important;
    }
    .dsh-season-actions .btn {
        font-size: 0.7rem !important;
        padding: 10px 8px !important;
    }
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] .dashboard-season-section {
    background: linear-gradient(160deg, #0f2440 0%, #0a0f1a 100%) !important;
}
[data-theme="dark"] .dsh-season-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) !important;
    border-color: rgba(212, 175, 55, 0.35) !important;
}
[data-theme="dark"] .dsh-metric {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .dsh-metric:active {
    background: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .dsh-season-desc {
    color: #cbd5e1 !important;
}

/* ============================================================
   PLAYER MODAL — FIX iPHONE MINI / SMALL PHONES (≤430px)
   ============================================================ */
@media (max-width: 430px) {

    /* ===== 1. TAMAÑO — Usa --vh (real, no 100vh estático) ===== */
    .player-modal-premium {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(
            var(--vh, 1vh) * 100
            - max(env(safe-area-inset-top, 12px), 12px)
            - max(env(safe-area-inset-bottom, 12px), 12px)
            - 16px
        ) !important;
        height: auto !important;
        border-radius: 16px !important;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
    }

    /* ===== 2. HERO COMPACTO ===== */
    .pmp-hero {
        padding: 12px 12px 10px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .pmp-hero-top {
        padding-right: 30px !important;
        gap: 8px !important;
    }

    .pmp-hero-number {
        width: 44px !important;
        height: 44px !important;
        font-size: 0.88rem !important;
        border-width: 2px !important;
    }

    .pmp-hero-name {
        font-size: 1.02rem !important;
        margin-bottom: 4px !important;
        line-height: 1.15 !important;
    }

    .pmp-hero-meta {
        gap: 4px !important;
    }

    .pmp-hero-team,
    .pmp-hero-pos,
    .pmp-hero-phase,
    .pmp-hero-age,
    .pmp-hero-cat {
        padding: 2px 8px !important;
        font-size: 0.65rem !important;
        gap: 3px !important;
    }

    .pmp-meta-text { max-width: 70px !important; }

    /* ===== 3. AVG BOX COMPACTO ===== */
    .pmp-hero-avg {
        margin-top: 10px !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    .pmp-hero-avg-left {
        gap: 6px !important;
        align-items: baseline !important;
    }

    .pmp-hero-avg-value {
        font-size: 1.75rem !important;
        letter-spacing: -1px !important;
    }

    .pmp-hero-avg-label {
        font-size: 0.55rem !important;
        letter-spacing: 1px !important;
    }

    .pmp-hero-phase-label {
        font-size: 0.62rem !important;
        gap: 4px !important;
    }

    .pmp-hero-avg-sub {
        font-size: 0.55rem !important;
        margin-top: 1px !important;
    }

    /* ===== 4. ELEGIBILIDAD COMPACTA ===== */
    .pmp-eligibility {
        margin-top: 8px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    .pmp-eligibility i { font-size: 1rem !important; }

    .pmp-elig-text strong {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
    }

    .pmp-elig-text small {
        font-size: 0.6rem !important;
        line-height: 1.35 !important;
    }

    /* ===== 5. CLOSE BUTTON ===== */
    .pmp-close {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
        top: 10px !important;
        right: 10px !important;
    }

    /* ===== 6. BODY (scrollable) ===== */
    .pmp-body {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .pmp-section-title-bar {
        font-size: 0.62rem !important;
        letter-spacing: 0.6px !important;
        gap: 4px !important;
    }

    /* ===== 7. STATS GRID — 3 columnas legibles ===== */
    .pmp-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .pmp-stat {
        padding: 8px 5px !important;
        border-radius: 10px !important;
        gap: 2px !important;
    }

    .pmp-stat-icon {
        font-size: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    .pmp-stat-value {
        font-size: 0.98rem !important;
        letter-spacing: -0.3px !important;
    }

    .pmp-stat-label {
        font-size: 0.6rem !important;
        letter-spacing: 0.2px !important;
        font-weight: 800 !important;
    }

    /* ===== 8. GAMES LIST ===== */
    .pmp-section {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .pmp-section-title {
        font-size: 0.72rem !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .pmp-section-count {
        font-size: 0.58rem !important;
        padding: 2px 8px !important;
        min-width: 22px !important;
    }

    .pmp-games-list { gap: 6px !important; }

    .pmp-game-row {
        padding: 8px 10px 8px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        border-radius: 10px !important;
    }

    .pmp-game-bar { width: 3px !important; }

    .pmp-game-result-badge {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.62rem !important;
        border-radius: 6px !important;
        margin-left: 2px !important;
        align-self: flex-start !important;
    }

    .pmp-game-info {
        flex: 1 1 calc(100% - 34px) !important;
        min-width: 0 !important;
    }

    .pmp-game-date {
        font-size: 0.62rem !important;
        margin-bottom: 3px !important;
        gap: 4px !important;
    }

    .pmp-playoff-tag {
        font-size: 0.52rem !important;
        padding: 1px 5px !important;
    }

    .pmp-game-vs {
        font-size: 0.72rem !important;
        gap: 5px !important;
    }

    .pmp-game-team-name { max-width: 85px !important; }

    .pmp-game-score {
        font-size: 0.82rem !important;
        padding: 1px 6px !important;
    }

    .pmp-game-chips {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
        justify-content: flex-start !important;
        max-width: 100% !important;
        gap: 3px !important;
    }

    .pmp-chip {
        font-size: 0.56rem !important;
        padding: 2px 6px !important;
    }

    .pmp-chip b { font-size: 0.64rem !important; }

    /* ===== 9. EMPTY STATE ===== */
    .pmp-empty {
        padding: 24px 14px !important;
        border-radius: 12px !important;
    }

    .pmp-empty i {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }

    .pmp-empty p {
        font-size: 0.85rem !important;
        margin-bottom: 4px !important;
    }

    .pmp-empty small { font-size: 0.72rem !important; }

    /* ===== 10. NOTES ===== */
    .pmp-notes {
        padding: 10px 12px !important;
        font-size: 0.72rem !important;
        border-radius: 8px !important;
        gap: 8px !important;
    }

    /* ===== 11. FOOTER — siempre visible, fila única ===== */
    .pmp-footer {
        padding: 10px 12px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }

    .pmp-footer-brand {
        font-size: 0.62rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .pmp-footer-actions {
        display: flex !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .pmp-footer-actions .btn {
        padding: 8px 12px !important;
        font-size: 0.72rem !important;
        border-radius: 8px !important;
        min-width: auto !important;
        white-space: nowrap !important;
    }
}

/* ============================================================
   EXTRA SMALL (≤340px) — iPhone SE 1ra gen / 320px
   ============================================================ */
@media (max-width: 340px) {
    .pmp-hero { padding: 10px 10px 8px !important; }

    .pmp-hero-number {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.8rem !important;
    }

    .pmp-hero-name { font-size: 0.95rem !important; }

    .pmp-hero-team,
    .pmp-hero-pos,
    .pmp-hero-phase,
    .pmp-hero-age,
    .pmp-hero-cat {
        padding: 2px 6px !important;
        font-size: 0.6rem !important;
    }

    .pmp-hero-avg { padding: 6px 10px !important; }
    .pmp-hero-avg-value { font-size: 1.5rem !important; }

    .pmp-eligibility { padding: 7px 9px !important; }

    .pmp-stats-grid { gap: 5px !important; }
    .pmp-stat { padding: 7px 3px !important; }
    .pmp-stat-value { font-size: 0.88rem !important; }
    .pmp-stat-label { font-size: 0.55rem !important; }

    .pmp-game-row { padding: 7px 8px 7px 10px !important; }
    .pmp-game-vs { font-size: 0.68rem !important; }
    .pmp-game-team-name { max-width: 70px !important; }

    .pmp-footer { padding: 8px 10px !important; }
    .pmp-footer-actions .btn {
        padding: 7px 10px !important;
        font-size: 0.68rem !important;
    }
}

/* ============================================================
   BOTÓN ELIMINAR EQUIPO — Premium
   ============================================================ */
.tcp-btn-edit {
    background: #64748b;
}
.tcp-btn-edit:hover {
    background: #475569;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(100, 116, 139, 0.35);
}

.tcp-btn-danger {
    background: linear-gradient(135deg, #e53e3e, #c53030);
    color: #fff;
}
.tcp-btn-danger:hover {
    background: linear-gradient(135deg, #f56565, #e53e3e);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 62, 62, 0.45);
}
.tcp-btn-danger:active {
    transform: translateY(0);
}
.tcp-btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Dark mode */
[data-theme="dark"] .tcp-btn-danger {
    background: linear-gradient(135deg, #c53030, #9b2c2c);
}
[data-theme="dark"] .tcp-btn-danger:hover {
    background: linear-gradient(135deg, #e53e3e, #c53030);
    box-shadow: 0 8px 20px rgba(229, 62, 62, 0.55);
}

/* En móvil: 2 botones grandes + 2 iconos a la derecha */
@media (max-width: 640px) {
    .tcp-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tcp-btn-primary,
    .tcp-btn-secondary {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
        font-size: 0.74rem !important;
        padding: 9px 8px !important;
    }
    .tcp-btn-icon {
        flex: 0 0 38px !important;
        width: 38px !important;
        padding: 9px !important;
    }
}

@media (max-width: 360px) {
    .tcp-btn-primary,
    .tcp-btn-secondary {
        font-size: 0.7rem !important;
        padding: 8px 6px !important;
    }
    .tcp-btn-icon {
        flex: 0 0 34px !important;
        width: 34px !important;
        padding: 8px !important;
    }
}

/* ============================================================
   FORFEIT / WALKOVER — Estilos de estado
   ============================================================ */

/* Cards */
.gpc-forfeit .gpc-stripe {
    background: linear-gradient(90deg, #9333ea, #c084fc, #9333ea);
    background-size: 200% 100%;
    animation: gpcShimmer 4s linear infinite;
}
.gpc-walkover .gpc-stripe {
    background: linear-gradient(90deg, #64748b, #94a3b8, #64748b);
    background-size: 200% 100%;
    animation: gpcShimmer 4s linear infinite;
}

.gpc-status-forfeit {
    background: linear-gradient(135deg, #9333ea, #7e22ce);
    color: #fff;
}
.gpc-status-walkover {
    background: linear-gradient(135deg, #475569, #334155);
    color: #fff;
}

.gpc-special {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #001a33;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.gpc-team.is-walkover .gpc-tlogo {
    opacity: 0.55;
    border-style: dashed !important;
    border-color: #cbd5e1;
}
.gpc-team.is-walkover .gpc-tname {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.72rem;
}

.gpc-forfeit-info {
    padding: 8px 12px;
    background: linear-gradient(135deg, #fef3c7, #fff7e6);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #78350f;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}
.gpc-forfeit-info i {
    color: #d97706;
    flex-shrink: 0;
}
.gpc-forfeit-info strong { font-weight: 800; }

/* Tab en la lista de partidos */
.gpx-tab[onclick*="forfeit"] em {
    background: #fef3c7;
    color: #a57917;
}
.gpx-tab[onclick*="forfeit"].is-active em {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.gpx-tab[onclick*="forfeit"].is-active {
    background: linear-gradient(135deg, #9333ea, #7e22ce);
}

/* Dark mode */
[data-theme="dark"] .gpc-forfeit-info {
    background: linear-gradient(135deg, #3d3d1a, #2a2a3e);
    color: #fcd34d;
    border-left-color: #d4af37;
}
[data-theme="dark"] .gpc-forfeit-info i { color: #fcd34d; }
[data-theme="dark"] .gpc-team.is-walkover .gpc-tname { color: #8a8aa0; }
[data-theme="dark"] .gpc-team.is-walkover .gpc-tlogo { border-color: #4a4a6a; }

/* Badge W.O. en resumen */
[data-theme="dark"] .gsm-badge-playoff {
    background: linear-gradient(135deg, #9333ea, #7e22ce);
    color: #fff;
}

/* Status messages de color morado/gris */
.gpc-status-forfeit,
.gpc-status-walkover { letter-spacing: 0.5px; }

/* ============================================================
   FORFEIT / WALKOVER — Badges adicionales
   ============================================================ */

/* Badge del banner de partidos */
.gpx-bstat-forfeit i { color: #c084fc; }
.gpx-bstat-forfeit b { color: #fcd34d; }

/* Badge en tarjeta de equipo (forfeit wins) */
.tcp-forfeit-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #001a33;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
.tcp-forfeit-badge i { font-size: 0.55rem; }

[data-theme="dark"] .tcp-forfeit-badge {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
}