/* ================================================================
   MILOW BOWL TERNAS · SISTEMA DE ESTADÍSTICAS
   TEMA: AZUL MARINO & ORO · DISEÑO MODERNO Y VIBRANTE
   VERSIÓN MEJORADA · ENCUENTROS Y MODALES OPTIMIZADOS
   ================================================================ */

/* ---------- VARIABLES GLOBALES ---------- */
:root {
    /* Colores primarios */
    --bowl-navy: #0a1a2b;
    --bowl-navy-light: #1a2a3f;
    --bowl-navy-dark: #050d17;
    --bowl-gold: #f6c445;
    --bowl-gold-light: #f8d76e;
    --bowl-gold-dark: #d9a832;
    --bowl-gold-gradient: linear-gradient(135deg, #f6c445, #f8d76e, #d9a832);

    /* Colores de acento */
    --bowl-red: #e74c3c;
    --bowl-green: #27ae60;
    --bowl-purple: #8e44ad;
    --bowl-cyan: #00b4d8;
    --bowl-orange: #f39c12;

    /* Blancos y grises */
    --white: #ffffff;
    --gray-50: #f8faff;
    --gray-100: #f0f4fa;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Texto */
    --text-primary: #0a1a2b;
    --text-secondary: #334155;
    --text-muted: #64748b;

    /* Fondos */
    --bg-body: #f0f2f6;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f8faff;

    /* Bordes */
    --border-color: #e2e8f0;
    --border-focus: #f6c445;

    /* Sombras */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.18);
    --shadow-gold: 0 4px 14px rgba(246, 196, 69, 0.35);
    --shadow-soft: 0 8px 32px rgba(10, 26, 43, 0.06);

    /* Radios */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Tipografía */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-base: 15px;
    --line-height-base: 1.6;

    /* Transiciones */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Espaciado */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;

    /* Altura navbar */
    --navbar-height: 68px;
}

/* ---------- RESET Y BASE ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: var(--line-height-base);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: radial-gradient(circle at 10% 20%, rgba(246, 196, 69, 0.03) 0%, transparent 50%),
                      radial-gradient(circle at 90% 80%, rgba(10, 26, 43, 0.02) 0%, transparent 50%);
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--bowl-gold), var(--bowl-gold-dark));
    border-radius: var(--radius-full);
    border: 2px solid var(--gray-100);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--bowl-gold-dark);
}

/* ---------- UTILIDADES ---------- */
.hidden {
    display: none !important;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-muted {
    color: var(--text-muted);
}
.text-gold {
    color: var(--bowl-gold);
}
.text-navy {
    color: var(--bowl-navy);
}
.text-white {
    color: white;
}
.text-sm {
    font-size: 0.85rem;
}
.text-lg {
    font-size: 1.15rem;
}
.text-xl {
    font-size: 1.4rem;
}
.text-2xl {
    font-size: 1.8rem;
}
.font-bold {
    font-weight: 700;
}
.font-extrabold {
    font-weight: 800;
}
.font-black {
    font-weight: 900;
}
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.items-center {
    align-items: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-center {
    justify-content: center;
}
.gap-1 {
    gap: var(--spacing-1);
}
.gap-2 {
    gap: var(--spacing-2);
}
.gap-3 {
    gap: var(--spacing-3);
}
.gap-4 {
    gap: var(--spacing-4);
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1;
}
.w-full {
    width: 100%;
}
.max-w-screen {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
.mt-1 {
    margin-top: var(--spacing-1);
}
.mt-2 {
    margin-top: var(--spacing-2);
}
.mt-3 {
    margin-top: var(--spacing-3);
}
.mt-4 {
    margin-top: var(--spacing-4);
}
.mb-1 {
    margin-bottom: var(--spacing-1);
}
.mb-2 {
    margin-bottom: var(--spacing-2);
}
.mb-3 {
    margin-bottom: var(--spacing-3);
}
.mb-4 {
    margin-bottom: var(--spacing-4);
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.shadow-gold {
    box-shadow: var(--shadow-gold);
}
.bg-gold {
    background: var(--bowl-gold);
}
.bg-navy {
    background: var(--bowl-navy);
}
.rounded-full {
    border-radius: var(--radius-full);
}
.overflow-hidden {
    overflow: hidden;
}

/* ---------- ANIMACIONES GLOBALES ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0.6;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes pulseGold {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(246, 196, 69, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(246, 196, 69, 0);
    }
}
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}
@keyframes glowPulse {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------- LOGIN ---------- */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-5);
    background: radial-gradient(ellipse at 30% 20%, var(--bowl-navy), var(--bowl-navy-dark));
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
}
.login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f6c445' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.login-box {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 45px 35px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    text-align: center;
    border-top: 6px solid var(--bowl-gold);
    animation: fadeInUp 0.6s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
}
.login-box::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(246, 196, 69, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.login-box::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    animation: shimmer 3s infinite linear;
    background-size: 200% 100%;
}

.league-logo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--bowl-gold);
    box-shadow: 0 0 0 0 rgba(246, 196, 69, 0.4), var(--shadow-gold);
    margin-bottom: var(--spacing-5);
    background: white;
    transition: transform var(--transition-bounce), box-shadow var(--transition-slow);
    animation: pulseGold 2.5s infinite;
}
.league-logo:hover {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 0 0 10px rgba(246, 196, 69, 0.1), var(--shadow-gold);
}

.login-box h2 {
    color: var(--bowl-navy);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.login-box h2 span {
    color: var(--bowl-gold-dark);
    font-size: 1.2rem;
    display: block;
    margin-top: 2px;
    font-weight: 700;
    letter-spacing: 1px;
}

.login-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-5);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
}

.login-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-weight: 800;
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-gold);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: transform var(--transition-bounce), box-shadow var(--transition);
    animation: float 3s ease-in-out infinite;
}
.login-tag:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 30px rgba(246, 196, 69, 0.5);
}

/* ---------- BOTONES ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    min-height: 50px;
    width: 100%;
    color: white;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background var(--transition);
}
.btn:hover::after {
    background: rgba(255, 255, 255, 0.1);
}
.btn:active::after {
    background: rgba(255, 255, 255, 0.2);
}
.btn i {
    font-size: 1.1rem;
    transition: transform var(--transition);
}
.btn:hover i {
    transform: scale(1.1) rotate(-4deg);
}

.btn-primary {
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
    box-shadow: 0 4px 16px rgba(10, 26, 43, 0.25);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(10, 26, 43, 0.35);
}

.btn-secondary {
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    box-shadow: 0 4px 16px rgba(246, 196, 69, 0.3);
}
.btn-secondary:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 30px rgba(246, 196, 69, 0.4);
}

.btn-light {
    background: var(--white);
    color: var(--bowl-navy);
    border: 2px solid var(--bowl-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.btn-light:hover {
    background: var(--bowl-gold);
    border-color: var(--bowl-gold-dark);
    transform: translateY(-3px);
    box-shadow: var(--shadow-gold);
}

.btn-success {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: white;
    box-shadow: 0 4px 16px rgba(39, 174, 96, 0.25);
}
.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(39, 174, 96, 0.35);
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.25);
}
.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(231, 76, 60, 0.35);
}

.btn-warning {
    background: linear-gradient(135deg, #f39c12, #d68910);
    color: white;
    box-shadow: 0 4px 16px rgba(243, 156, 18, 0.25);
}
.btn-warning:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(243, 156, 18, 0.35);
}

.btn-info {
    background: linear-gradient(135deg, #3498db, #2176ae);
    color: white;
    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.25);
}
.btn-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.35);
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.8rem;
    min-height: 36px;
    width: auto;
    border-radius: var(--radius-sm);
}
.btn-small i {
    font-size: 0.9rem;
}

.btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-toggle {
    background: transparent;
    border: 2px dashed var(--bowl-gold);
    color: var(--bowl-navy);
    padding: 14px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    margin: var(--spacing-4) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    background: rgba(246, 196, 69, 0.03);
}
.admin-toggle:hover {
    background: rgba(246, 196, 69, 0.12);
    border-style: solid;
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* ---------- INPUTS Y FORMULARIOS ---------- */
.input-group {
    margin-bottom: var(--spacing-4);
    text-align: left;
}
.input-group label {
    display: block;
    margin-bottom: var(--spacing-1);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px rgba(246, 196, 69, 0.15);
    outline: none;
}
.input-group textarea {
    resize: vertical;
    min-height: 80px;
}
.input-group select {
    appearance: auto;
}

/* ---------- TABLAS ---------- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-3) 0;
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-soft);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 600px;
}

thead th {
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
    padding: 16px 12px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    position: sticky;
    top: 0;
    white-space: nowrap;
    border-bottom: 3px solid var(--bowl-gold);
}
thead th i {
    color: var(--bowl-gold);
    margin-right: 4px;
}

tbody td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
    transition: background var(--transition);
}
tbody tr {
    transition: transform var(--transition), box-shadow var(--transition);
}
tbody tr:nth-child(even) {
    background: var(--gray-50);
}
tbody tr:hover {
    background: var(--gray-100);
    transform: scale(1.002);
    box-shadow: inset 0 0 0 1px var(--bowl-gold);
}
tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- TARJETAS ---------- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition), box-shadow var(--transition-slow);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.card-header {
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
    padding: 18px 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border-bottom: 3px solid var(--bowl-gold);
    font-size: 1rem;
    letter-spacing: 0.3px;
}
.card-header i {
    color: var(--bowl-gold);
    font-size: 1.2rem;
}
.card-body {
    padding: var(--spacing-5);
}

/* ---------- ESTADÍSTICAS RÁPIDAS (DASHBOARD) ---------- */
.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.stat-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 20px 16px;
    box-shadow: var(--shadow-soft);
    border-top: 4px solid var(--bowl-gold);
    transition: all var(--transition-bounce);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(246, 196, 69, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.stat-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-md);
}
.stat-card .stat-value {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--bowl-navy);
    line-height: 1.1;
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-card .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
    font-weight: 700;
    margin-top: 4px;
}

/* ---------- STANDINGS (POSICIONES) ---------- */
.standings-table-detailed th {
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
    padding: 14px 8px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.standings-table-detailed td {
    padding: 12px 8px;
    font-weight: 500;
}
.standings-table-detailed td:first-child {
    font-weight: 900;
    font-size: 1rem;
    width: 40px;
}
.standings-table-detailed td:nth-child(2) {
    text-align: left;
    font-weight: 700;
}

.standing-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-weight: 900;
    font-size: 0.85rem;
    background: var(--bowl-gold);
    color: var(--bowl-navy);
    box-shadow: var(--shadow-gold);
    transition: transform var(--transition);
}
.standing-rank-badge:hover {
    transform: scale(1.1);
}

/* ================================================================
   ENCUENTROS – MEJORAS ESTRUCTURALES Y DE ESTILO
   ================================================================ */

/* Contenedor de la lista de encuentros */
#matchesList {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Tarjeta de partido mejorada */
.match-card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-soft);
    border-left: 6px solid var(--bowl-gold);
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.match-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bowl-gold), var(--bowl-gold-light), var(--bowl-gold));
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}
.match-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Cabecera del partido */
.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--border-color);
}
.match-header .badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}
.match-header .match-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

/* Equipos y marcador */
.match-teams-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}
.team-display {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: var(--spacing-4) var(--spacing-2);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    transition: all var(--transition);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.team-display:hover {
    background: var(--gray-100);
    border-color: var(--bowl-gold);
}
.team-display .team-name {
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: var(--spacing-1);
    line-height: 1.3;
}
.team-display .team-score {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.2;
    transition: color var(--transition);
}
.team-display .team-points {
    font-size: 0.85rem;
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
    justify-content: center;
    flex-wrap: wrap;
}
.team-display .team-points .pts-g {
    background: var(--bowl-green);
    color: white;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
}
.team-display .team-points .pts-p {
    background: var(--bowl-red);
    color: white;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
}

.match-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--bowl-gold);
    padding: 0 var(--spacing-3);
}

/* Detalle de líneas (grid responsivo) */
.lines-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin: var(--spacing-2) 0;
}
.line-card {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: var(--spacing-3);
    text-align: center;
    border: 2px solid transparent;
    transition: all var(--transition);
    position: relative;
}
.line-card.winner {
    border-color: var(--bowl-gold);
    background: rgba(246, 196, 69, 0.06);
    box-shadow: 0 2px 12px rgba(246, 196, 69, 0.1);
}
.line-card.winner::after {
    content: '🏆';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1.2rem;
}
.line-number {
    font-weight: 700;
    color: var(--bowl-navy);
    margin-bottom: var(--spacing-2);
    font-size: 0.9rem;
}
.line-scores {
    display: flex;
    justify-content: space-around;
    font-size: 1.6rem;
    font-weight: 800;
}
.line-result {
    margin-top: var(--spacing-2);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    background: var(--gray-200);
}

/* Resumen de serie y puntos */
.series-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-2);
}
.series-total .total-label {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.points-distribution {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}
.point-badge {
    background: var(--gray-200);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}
.point-badge.won {
    background: var(--bowl-gold);
    color: var(--bowl-navy);
}

/* Partido pendiente (no completado) */
.match-pending {
    text-align: center;
    padding: var(--spacing-5);
    background: #f8f9fa;
    border-radius: var(--radius-md);
}
.match-pending .pending-icon {
    font-size: 2.5rem;
    color: var(--bowl-gold);
    margin-bottom: var(--spacing-2);
}
.match-pending .pending-text {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--spacing-1);
}
.match-pending .pending-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Acciones en partidos (admin) */
.match-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    justify-content: center;
    margin-top: var(--spacing-3);
}
.match-actions .btn {
    width: auto;
}

/* ================================================================
   MODALES MEJORADOS – JUGADORES Y ENCUENTROS
   ================================================================ */

/* Modal de detalles del jugador */
#playerDetailsModal .modal {
    max-width: 800px;
}
#playerDetailsModal .modal-body {
    padding: 0;
}
#playerDetailsModal .modal-body .tab-panel {
    padding: var(--spacing-5);
}

/* Pestañas internas del modal de jugador */
#playerDetailsModal .modal-body .internal-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-100);
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#playerDetailsModal .modal-body .internal-tabs .internal-tab {
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.85rem;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
#playerDetailsModal .modal-body .internal-tabs .internal-tab.active {
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    box-shadow: var(--shadow-gold);
}
#playerDetailsModal .modal-body .internal-tabs .internal-tab:hover {
    background: rgba(246, 196, 69, 0.15);
}

/* Resumen de estadísticas del jugador */
.player-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}
.player-stats-summary .stat-item {
    background: var(--gray-50);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all var(--transition);
}
.player-stats-summary .stat-item:hover {
    background: var(--gray-100);
    transform: translateY(-2px);
}
.player-stats-summary .stat-item .stat-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--bowl-navy);
    line-height: 1.2;
}
.player-stats-summary .stat-item .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.player-stats-summary .stat-item.highlight {
    background: rgba(246, 196, 69, 0.08);
    border-color: var(--bowl-gold);
}
.player-stats-summary .stat-item.highlight .stat-value {
    color: var(--bowl-gold-dark);
}

/* Mejor juego y mejor serie en el modal */
.player-best-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}
.player-best-box .best-card {
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    text-align: center;
    color: white;
}
.player-best-box .best-card.gold {
    background: linear-gradient(135deg, var(--bowl-gold), var(--bowl-gold-dark));
}
.player-best-box .best-card.blue {
    background: linear-gradient(135deg, #3498db, #2176ae);
}
.player-best-box .best-card .best-label {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.9;
}
.player-best-box .best-card .best-value {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.2;
}

/* Últimas jornadas (partidos del jugador) */
.last-matches {
    margin-top: var(--spacing-4);
}
.last-matches .section-title {
    font-weight: 700;
    color: var(--bowl-navy);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-2);
}
.last-matches .match-item {
    background: var(--gray-50);
    padding: var(--spacing-3);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--bowl-gold);
    margin-bottom: var(--spacing-2);
    transition: all var(--transition);
}
.last-matches .match-item:hover {
    background: var(--gray-100);
}
.last-matches .match-item .match-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: var(--spacing-1);
}
.last-matches .match-item .match-info .week-badge {
    background: var(--bowl-navy);
    color: white;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}
.last-matches .match-item .scores {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    justify-content: center;
    flex-wrap: wrap;
}
.last-matches .match-item .scores .score {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
}
.score-high {
    background: var(--bowl-green);
}
.score-mid {
    background: var(--bowl-orange);
}
.score-low {
    background: var(--bowl-red);
}

/* ================================================================
   MODAL DE CAPTURA DE RESULTADOS (ENCUENTROS)
   ================================================================ */
#matchScoreModal .modal {
    max-width: 900px;
}
#matchScoreModal .modal-body {
    padding: var(--spacing-4);
}
#matchScoreModal .modal-body .score-line-container {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-soft);
}
#matchScoreModal .modal-body .line-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-100);
    padding: var(--spacing-1);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-4);
}
#matchScoreModal .modal-body .line-tabs .line-tab-btn {
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 700;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    flex: 1;
    text-align: center;
}
#matchScoreModal .modal-body .line-tabs .line-tab-btn.active {
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    box-shadow: var(--shadow-gold);
}
#matchScoreModal .modal-body .line-tabs .line-tab-btn:hover {
    background: rgba(246, 196, 69, 0.15);
}

/* Tarjetas de equipo en el modal de captura */
#matchScoreModal .modal-body .team-score-card {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}
#matchScoreModal .modal-body .team-score-card .team-header {
    padding: var(--spacing-3);
    color: white;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid rgba(255,255,255,0.2);
}
#matchScoreModal .modal-body .team-score-card .team-body {
    padding: var(--spacing-3);
}
#matchScoreModal .modal-body .team-score-card .team-body select {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: white;
}
#matchScoreModal .modal-body .team-score-card .team-body select:focus {
    border-color: var(--bowl-gold);
    box-shadow: 0 0 0 3px rgba(246,196,69,0.15);
}
#matchScoreModal .modal-body .team-score-card .team-body .score-input {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--border-color);
}
#matchScoreModal .modal-body .team-score-card .team-body .score-input .player-name {
    font-weight: 600;
    flex: 1;
    font-size: 0.9rem;
}
#matchScoreModal .modal-body .team-score-card .team-body .score-input input[type="number"] {
    width: 80px;
    padding: 8px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
}
#matchScoreModal .modal-body .team-score-card .team-body .score-input input[type="number"]:focus {
    border-color: var(--bowl-gold);
    box-shadow: 0 0 0 3px rgba(246,196,69,0.15);
}

/* Total de línea */
#line-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
}
#line-totals .line-total-box {
    background: var(--gray-50);
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 700;
}
#line-totals .line-total-box .total-number {
    font-size: 2.2rem;
    font-weight: 900;
}

/* Previsualización del encuentro */
.match-preview {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    color: white;
    margin-top: var(--spacing-4);
}
.match-preview .preview-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-3);
    align-items: center;
    text-align: center;
}
.match-preview .preview-teams .team-preview .preview-score {
    font-size: 2.8rem;
    font-weight: 900;
}
.match-preview .preview-teams .vs-badge {
    background: rgba(255,255,255,0.15);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    font-weight: 700;
}
.match-preview .preview-points {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid rgba(255,255,255,0.2);
    text-align: center;
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    font-size: 0.95rem;
}

/* ================================================================
   MODAL DE DETALLES DEL ENCUENTRO (LECTURA) – MEJORADO
   ================================================================ */
#matchDetailsModal .modal-body {
    padding: var(--spacing-4);
}
#matchDetailsModal .modal-body .detail-card {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
}
#matchDetailsModal .modal-body .detail-card .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-color);
}
#matchDetailsModal .modal-body .detail-card .detail-row:last-child {
    border-bottom: none;
}
#matchDetailsModal .modal-body .detail-card .detail-label {
    font-weight: 600;
    color: var(--text-secondary);
}
#matchDetailsModal .modal-body .detail-card .detail-value {
    font-weight: 700;
    color: var(--bowl-navy);
}
#matchDetailsModal .modal-body .detail-card .detail-value.winner {
    color: var(--bowl-gold-dark);
}

/* Estilos mejorados para el modal de detalles del encuentro en móviles */
@media (max-width: 768px) {
    #matchDetailsModal .modal-body .detail-card .detail-row {
        flex-wrap: wrap;
        gap: 2px;
    }
    #matchDetailsModal .modal-body .detail-card .detail-label {
        flex: 1 1 100%;
        font-size: 0.8rem;
    }
    #matchDetailsModal .modal-body .detail-card .detail-value {
        flex: 1 1 100%;
        text-align: right;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    #matchDetailsModal .modal-body .detail-card {
        padding: var(--spacing-3);
    }
    #matchDetailsModal .modal-body .detail-card .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    #matchDetailsModal .modal-body .detail-card .detail-value {
        text-align: left;
        width: 100%;
    }
}

/* ================================================================
   MEJORAS EN PESTAÑA DE ENCUENTROS – SELECTOR Y BOTONES
   ================================================================ */
#tabMatches .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    align-items: center;
}
#tabMatches .filter-bar select {
    flex: 1;
    min-width: 150px;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    background: white;
    font-weight: 600;
    color: var(--text-primary);
}
#tabMatches .filter-bar select:focus {
    border-color: var(--bowl-gold);
    box-shadow: 0 0 0 3px rgba(246,196,69,0.15);
}
#tabMatches .filter-bar .btn {
    width: auto;
}

/* ================================================================
   BADGES Y ETIQUETAS MEJORADOS
   ================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--gray-200);
    color: var(--text-secondary);
    transition: all var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.badge-success {
    background: rgba(39, 174, 96, 0.15);
    color: #1e8449;
}
.badge-danger {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}
.badge-warning {
    background: rgba(243, 156, 18, 0.15);
    color: #d68910;
}
.badge-info {
    background: rgba(52, 152, 219, 0.15);
    color: #2176ae;
}
.badge-primary {
    background: rgba(10, 26, 43, 0.08);
    color: var(--bowl-navy);
}
.badge-gold {
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    box-shadow: var(--shadow-gold);
}
.badge-secondary {
    background: var(--gray-300);
    color: var(--text-secondary);
}

/* ================================================================
   MODALES – ESTRUCTURA GENERAL MEJORADA
   ================================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--spacing-5);
    animation: overlayIn 0.25s ease;
}
@keyframes overlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal {
    background: white;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
    animation: modalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.modal-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 3px solid var(--bowl-gold);
    position: sticky;
    top: 0;
    z-index: 1;
}
.modal-title {
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.modal-close {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-bounce);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg) scale(1.05);
}
.modal-body {
    padding: var(--spacing-6);
}
.modal-footer {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--gray-50);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.modal-footer .btn {
    width: auto;
    margin: 0;
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    padding: 0 var(--spacing-5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    border-bottom: 3px solid var(--bowl-gold);
    backdrop-filter: blur(4px);
}
.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    text-decoration: none;
}
.nav-logo-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--bowl-gold);
    background: white;
    object-fit: cover;
    transition: transform var(--transition-bounce), box-shadow var(--transition);
    box-shadow: 0 0 0 0 rgba(246, 196, 69, 0.2);
}
.nav-logo-img:hover {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 0 0 6px rgba(246, 196, 69, 0.2);
}
.nav-logo-text h1 {
    color: white;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.3px;
}
.nav-logo-text span {
    color: var(--bowl-gold-light);
    font-size: 0.7rem;
    display: block;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.user-info-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    background: rgba(255, 255, 255, 0.08);
    padding: 5px 14px 5px 18px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
}
.user-badge {
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    padding: 5px 16px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    box-shadow: var(--shadow-gold);
}
#logoutBtn {
    background: rgba(231, 76, 60, 0.9);
    color: white;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-bounce);
}
#logoutBtn:hover {
    transform: scale(1.12) rotate(-8deg);
    background: #c0392b;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.4);
}

/* ---------- TABS ---------- */
.tabs-container {
    max-width: 1400px;
    margin: var(--spacing-6) auto;
    padding: 0 var(--spacing-4);
}
.tabs-header {
    display: flex;
    gap: var(--spacing-2);
    overflow-x: auto;
    padding: var(--spacing-2);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    margin-bottom: var(--spacing-6);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs-header::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    flex-shrink: 0;
    padding: 12px 24px;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-bounce);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    white-space: nowrap;
    position: relative;
}
.tab-btn i {
    font-size: 1rem;
    transition: transform var(--transition);
}
.tab-btn:hover {
    background: rgba(10, 26, 43, 0.05);
    color: var(--bowl-navy);
}
.tab-btn:hover i {
    transform: scale(1.15) rotate(-4deg);
}
.tab-btn.active {
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
    box-shadow: 0 4px 20px rgba(10, 26, 43, 0.25);
}
.tab-btn.active i {
    color: var(--bowl-gold);
}
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 30%;
    right: 30%;
    height: 3px;
    background: var(--bowl-gold);
    border-radius: var(--radius-full);
    animation: fadeIn 0.3s ease;
}

.tab-content {
    display: none;
    animation: fadeIn 0.35s ease;
}
.tab-content.active {
    display: block;
}

/* ---------- FOOTER MEJORADO ---------- */
.footer {
    text-align: center;
    padding: var(--spacing-4) var(--spacing-4);
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    border-top: 3px solid var(--bowl-gold);
    margin-top: var(--spacing-6);
    border-radius: 0;
    color: white;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    animation: shimmer 3s infinite linear;
    background-size: 200% 100%;
}
.footer p {
    margin: 2px 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    line-height: 1.4;
}
.footer p:first-child {
    font-weight: 600;
    color: white;
    font-size: 0.85rem;
}
.footer-brand-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    padding: 6px 18px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 0.8rem;
    margin-top: 2px;
    box-shadow: var(--shadow-gold);
    transition: all var(--transition-bounce);
    animation: float 3s ease-in-out infinite;
}
.footer-brand-tag:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 30px rgba(246, 196, 69, 0.5);
}
.footer .connection-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    margin-top: 2px;
    letter-spacing: 0.5px;
}
.footer .connection-status i {
    color: var(--bowl-gold);
    animation: glowPulse 2s infinite;
}

/* ================================================================
   RESPONSIVE – MÓVILES PEQUEÑOS (hasta 480px y 360px)
   ================================================================ */
@media (max-width: 768px) {
    :root {
        --navbar-height: 60px;
        --font-size-base: 14px;
    }
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
    .lines-container {
        grid-template-columns: 1fr 1fr;
    }
    .players-grid {
        grid-template-columns: 1fr;
    }
    .leaders-grid {
        grid-template-columns: 1fr;
    }
    .tabs-header {
        gap: var(--spacing-1);
        padding: var(--spacing-1);
    }
    .tab-btn {
        padding: 10px 14px;
        font-size: 0.8rem;
    }
    .tab-btn span {
        display: none;
    }
    .tab-btn i {
        font-size: 1.2rem;
    }
    .match-teams-container {
        flex-direction: column;
    }
    .team-display {
        width: 100%;
    }
    .nav-logo-text h1 {
        font-size: 0.85rem;
    }
    .user-badge span {
        display: none;
    }
    .modal {
        max-width: 95%;
        margin: auto;
    }
    .login-box {
        padding: 30px 20px;
    }
    .league-logo {
        width: 110px;
        height: 110px;
    }
    .btn {
        font-size: 0.9rem;
        padding: 12px 16px;
        min-height: 46px;
    }
    .card-header {
        font-size: 0.9rem;
        padding: 14px 16px;
    }
    .card-body {
        padding: var(--spacing-4);
    }
    .footer {
        padding: var(--spacing-3) var(--spacing-3);
        gap: 2px;
    }
    .footer p {
        font-size: 0.75rem;
    }
    .footer p:first-child {
        font-size: 0.8rem;
    }
    .footer-brand-tag {
        font-size: 0.75rem;
        padding: 4px 14px;
    }
    .footer .connection-status {
        font-size: 0.6rem;
    }
    .lines-container {
        grid-template-columns: 1fr;
    }
    #matchScoreModal .modal-body .team-score-card .team-body .score-input {
        flex-wrap: wrap;
    }
    #matchScoreModal .modal-body .team-score-card .team-body .score-input input[type="number"] {
        width: 100%;
        margin-top: 4px;
    }
    #matchScoreModal .modal-body .line-tabs .line-tab-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
    .player-stats-summary {
        grid-template-columns: 1fr 1fr;
    }
    .player-best-box {
        grid-template-columns: 1fr;
    }
    .match-preview .preview-teams {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }
    .match-preview .preview-teams .vs-badge {
        order: -1;
    }
    #tabMatches .filter-bar {
        flex-direction: column;
    }
    #tabMatches .filter-bar select {
        width: 100%;
    }
    #tabMatches .filter-bar .btn {
        width: 100%;
    }
    #matchDetailsModal .modal-body .detail-card .detail-row {
        flex-wrap: wrap;
        gap: 2px;
    }
    #matchDetailsModal .modal-body .detail-card .detail-label {
        flex: 1 1 100%;
        font-size: 0.8rem;
    }
    #matchDetailsModal .modal-body .detail-card .detail-value {
        flex: 1 1 100%;
        text-align: right;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 13px;
    }
    .quick-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
    }
    .stat-card .stat-value {
        font-size: 2rem;
    }
    .stat-card {
        padding: 12px 10px;
    }
    .card-body {
        padding: var(--spacing-3);
    }
    .match-card {
        padding: var(--spacing-3);
    }
    .lines-container {
        gap: var(--spacing-2);
    }
    .line-card {
        padding: var(--spacing-3);
    }
    .team-display .team-score {
        font-size: 2.2rem;
    }
    .login-box h2 {
        font-size: 1.6rem;
    }
    .login-box h2 span {
        font-size: 1rem;
    }
    .modal-header {
        padding: 14px 16px;
    }
    .modal-body {
        padding: var(--spacing-4);
    }
    .modal-footer {
        padding: var(--spacing-3) var(--spacing-4);
    }
    .footer {
        padding: var(--spacing-2) var(--spacing-2);
        gap: 1px;
    }
    .footer p {
        font-size: 0.7rem;
    }
    .footer p:first-child {
        font-size: 0.75rem;
    }
    .footer-brand-tag {
        font-size: 0.7rem;
        padding: 3px 10px;
    }
    .footer .connection-status {
        font-size: 0.55rem;
    }
    .nav-logo-img {
        width: 36px;
        height: 36px;
    }
    .nav-logo-text h1 {
        font-size: 0.75rem;
    }
    .nav-logo-text span {
        font-size: 0.6rem;
    }
    .user-info-container {
        padding: 4px 10px 4px 12px;
        gap: var(--spacing-2);
    }
    .user-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
    #logoutBtn {
        width: 32px;
        height: 32px;
    }
    .tab-btn {
        padding: 8px 10px;
        font-size: 0.7rem;
    }
    .tab-btn i {
        font-size: 1rem;
    }
    .tabs-header {
        gap: 4px;
        padding: 4px;
    }
    .table-responsive {
        border-radius: var(--radius-sm);
    }
    table {
        font-size: 0.75rem;
        min-width: 480px;
    }
    thead th {
        padding: 10px 6px;
        font-size: 0.6rem;
    }
    tbody td {
        padding: 8px 6px;
    }
    .standing-rank-badge {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }
    .modal {
        max-width: 98%;
        border-radius: var(--radius-lg);
    }
    .modal-title {
        font-size: 0.95rem;
    }
    .btn-small {
        padding: 6px 12px;
        font-size: 0.7rem;
        min-height: 30px;
    }
    .player-stats-summary {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
    }
    .player-stats-summary .stat-item .stat-value {
        font-size: 1.5rem;
    }
    #matchScoreModal .modal-body .line-tabs .line-tab-btn {
        font-size: 0.7rem;
        padding: 6px 8px;
    }
    #matchScoreModal .modal-body .team-score-card .team-body .score-input .player-name {
        font-size: 0.8rem;
    }
    #matchDetailsModal .modal-body .detail-card {
        padding: var(--spacing-3);
    }
    #matchDetailsModal .modal-body .detail-card .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    #matchDetailsModal .modal-body .detail-card .detail-value {
        text-align: left;
        width: 100%;
    }
    /* Ajuste de tarjeta de partido en móvil */
    .match-card .match-teams-container {
        flex-direction: column;
        gap: var(--spacing-3);
    }
    .match-card .team-display {
        width: 100%;
        min-width: unset;
        padding: var(--spacing-3) var(--spacing-2);
    }
    .match-card .team-display .team-score {
        font-size: 2rem;
    }
    .match-card .team-display .team-name {
        font-size: 1rem;
    }
    .match-card .match-vs {
        padding: 0;
        font-size: 1.2rem;
    }
    .match-card .lines-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }
    .match-card .line-card {
        padding: var(--spacing-2);
    }
    .match-card .line-scores {
        font-size: 1.2rem;
    }
    .match-card .series-total {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
        text-align: center;
    }
    .match-card .series-total .total-label {
        font-size: 1rem;
        justify-content: center;
    }
    .match-card .points-distribution {
        justify-content: center;
    }
    .match-card .point-badge {
        font-size: 0.75rem;
        padding: 2px 10px;
    }
}

/* Ajustes extra para pantallas muy pequeñas (360px) */
@media (max-width: 380px) {
    :root {
        --font-size-base: 12px;
    }
    .match-card .team-display .team-score {
        font-size: 1.8rem;
    }
    .match-card .team-display .team-name {
        font-size: 0.9rem;
    }
    .match-card .line-scores {
        font-size: 1rem;
    }
    .match-card .line-number {
        font-size: 0.8rem;
    }
    .match-card .line-result {
        font-size: 0.75rem;
    }
    .match-card .badge {
        font-size: 0.6rem;
        padding: 2px 10px;
    }
    #matchDetailsModal .modal-body .detail-card .detail-label {
        font-size: 0.75rem;
    }
    #matchDetailsModal .modal-body .detail-card .detail-value {
        font-size: 0.8rem;
    }
    .player-stats-summary .stat-item .stat-value {
        font-size: 1.2rem;
    }
    .player-stats-summary .stat-item .stat-label {
        font-size: 0.6rem;
    }
    .player-best-box .best-card .best-value {
        font-size: 2rem;
    }
}

/* ================================================================
   MEJORAS ADICIONALES – PESTAÑA POSICIONES (BOTONES VISIBLES)
   ================================================================ */
#standingsViewMode {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: 2px solid var(--bowl-gold);
    background: white;
    font-weight: 700;
    color: var(--bowl-navy);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
#standingsViewMode:hover {
    border-color: var(--bowl-gold-dark);
    box-shadow: var(--shadow-gold);
}

#tabStandings .line-tab-btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 700;
    background: var(--gray-100);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-bounce);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#tabStandings .line-tab-btn.active {
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    box-shadow: var(--shadow-gold);
}
#tabStandings .line-tab-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ================================================================
   MEJORAS EN DASHBOARD – CAMPEONES Y LÍDERES
   ================================================================ */
#dashboardStandings .champion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 10px 0;
}
#dashboardStandings .champion-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--shadow-soft);
    border-left: 6px solid var(--bowl-gold);
    cursor: pointer;
    transition: all var(--transition-bounce);
}
#dashboardStandings .champion-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
#dashboardStandings .champion-card .champion-name {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--bowl-navy);
}
#dashboardStandings .champion-card .champion-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bowl-gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#dashboardStandings .champion-card .champion-average {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.leader-card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-soft);
    border-left: 6px solid var(--bowl-gold);
    transition: all var(--transition-bounce);
    position: relative;
    overflow: hidden;
}
.leader-card::before {
    content: '⭐';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.4rem;
    opacity: 0.15;
}
.leader-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-md);
}
.leader-card .leader-name {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 2px;
}
.leader-card .leader-score {
    font-size: 2.2rem;
    font-weight: 900;
    background: var(--bowl-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.leader-card .leader-team {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ================================================================
   JUGADORES – TARJETAS MEJORADAS
   ================================================================ */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

.player-card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-soft);
    border-left: 5px solid var(--bowl-gold);
    cursor: pointer;
    transition: all var(--transition-bounce);
    position: relative;
    overflow: hidden;
}
.player-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bowl-gold), transparent);
    transition: transform var(--transition);
    transform: scaleX(0);
    transform-origin: left;
}
.player-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-md);
}
.player-card:hover::after {
    transform: scaleX(1);
}

.player-card .player-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--bowl-navy);
}
.player-card .player-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}
.player-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--border-color);
}
.player-stats-grid .stat-item {
    text-align: center;
}
.player-stats-grid .stat-item .stat-number {
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--bowl-navy);
}
.player-stats-grid .stat-item .stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* ================================================================
   MODAL DE DETALLES DEL ENCUENTRO – VERSIÓN MEJORADA (RESPONSIVE)
   ================================================================ */
#matchDetailsModal .modal {
    max-width: 750px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#matchDetailsModal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4);
    -webkit-overflow-scrolling: touch;
}

#matchDetailsModal .modal-body .detail-card {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    border: 1px solid var(--border-color);
}

#matchDetailsModal .modal-body .detail-card .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

#matchDetailsModal .modal-body .detail-card .detail-row:last-child {
    border-bottom: none;
}

#matchDetailsModal .modal-body .detail-card .detail-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

#matchDetailsModal .modal-body .detail-card .detail-value {
    font-weight: 700;
    color: var(--bowl-navy);
    font-size: 0.85rem;
    text-align: right;
    flex: 1;
    min-width: 60px;
}

#matchDetailsModal .modal-body .detail-card .detail-value.winner {
    color: var(--bowl-gold-dark);
}

/* Tabla de desglose de puntos - responsive */
#matchDetailsModal .modal-body .points-breakdown {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-2) 0;
    border-radius: var(--radius-sm);
}

#matchDetailsModal .modal-body .points-breakdown table {
    min-width: 280px;
    font-size: 0.8rem;
    width: 100%;
    border-collapse: collapse;
}

#matchDetailsModal .modal-body .points-breakdown table th {
    background: var(--bowl-navy);
    color: white;
    padding: 10px 8px;
    font-size: 0.7rem;
    text-transform: uppercase;
    text-align: center;
}

#matchDetailsModal .modal-body .points-breakdown table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

#matchDetailsModal .modal-body .points-breakdown table tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    background: rgba(246, 196, 69, 0.08);
}

/* Detalle por línea en el modal de encuentro */
#matchDetailsModal .modal-body .line-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    margin: var(--spacing-2) 0;
}

#matchDetailsModal .modal-body .line-detail-card {
    background: white;
    border-radius: var(--radius-sm);
    padding: var(--spacing-3);
    border: 1px solid var(--border-color);
    transition: all var(--transition);
}

#matchDetailsModal .modal-body .line-detail-card:hover {
    border-color: var(--bowl-gold);
}

#matchDetailsModal .modal-body .line-detail-card .line-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-2);
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
    font-size: 0.9rem;
}

#matchDetailsModal .modal-body .line-detail-card .line-players {
    padding-top: var(--spacing-2);
}

#matchDetailsModal .modal-body .line-detail-card .line-players .player-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.8rem;
    border-bottom: 1px dashed var(--gray-200);
}

#matchDetailsModal .modal-body .line-detail-card .line-players .player-row:last-child {
    border-bottom: none;
}

#matchDetailsModal .modal-body .line-detail-card .line-players .player-row .p-name {
    font-weight: 600;
}

#matchDetailsModal .modal-body .line-detail-card .line-players .player-row .p-score {
    font-weight: 700;
}

/* ================================================================
   MODAL DE DETALLES DEL JUGADOR – VERSIÓN MEJORADA
   ================================================================ */
#playerDetailsModal .modal {
    max-width: 720px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#playerDetailsModal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

/* Cabecera del jugador dentro del modal */
#playerDetailsModal .player-header {
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4);
    color: white;
    text-align: center;
    border-bottom: 4px solid var(--bowl-gold);
}

#playerDetailsModal .player-header .player-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0 auto var(--spacing-3);
    border: 4px solid white;
    box-shadow: var(--shadow-gold);
}

#playerDetailsModal .player-header .player-name {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.5px;
}

#playerDetailsModal .player-header .player-meta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin-top: var(--spacing-2);
    font-size: 0.85rem;
    opacity: 0.9;
}

#playerDetailsModal .player-header .player-meta .meta-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Grid de estadísticas del jugador */
#playerDetailsModal .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--gray-50);
}

#playerDetailsModal .stats-grid .stat-item {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all var(--transition);
}

#playerDetailsModal .stats-grid .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

#playerDetailsModal .stats-grid .stat-item .stat-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--bowl-navy);
    line-height: 1.2;
}

#playerDetailsModal .stats-grid .stat-item .stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-weight: 600;
}

#playerDetailsModal .stats-grid .stat-item.highlight {
    border-color: var(--bowl-gold);
    background: rgba(246, 196, 69, 0.05);
}

#playerDetailsModal .stats-grid .stat-item.highlight .stat-number {
    color: var(--bowl-gold-dark);
}

/* Mejor juego y mejor serie */
#playerDetailsModal .best-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    padding: 0 var(--spacing-5) var(--spacing-4);
}

#playerDetailsModal .best-box .best-card {
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    text-align: center;
    color: white;
    transition: transform var(--transition);
}

#playerDetailsModal .best-box .best-card:hover {
    transform: scale(1.02);
}

#playerDetailsModal .best-box .best-card.gold {
    background: linear-gradient(135deg, var(--bowl-gold), var(--bowl-gold-dark));
    color: var(--bowl-navy);
}

#playerDetailsModal .best-box .best-card.blue {
    background: linear-gradient(135deg, #3498db, #2176ae);
}

#playerDetailsModal .best-box .best-card .best-label {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#playerDetailsModal .best-box .best-card .best-value {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.2;
    margin-top: 4px;
}

/* Últimas jornadas */
#playerDetailsModal .last-matches-section {
    padding: 0 var(--spacing-5) var(--spacing-5);
}

#playerDetailsModal .last-matches-section .section-title {
    font-weight: 700;
    color: var(--bowl-navy);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-2);
    font-size: 1rem;
}

#playerDetailsModal .last-matches-section .match-item {
    background: var(--gray-50);
    padding: var(--spacing-3);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--bowl-gold);
    margin-bottom: var(--spacing-2);
    transition: all var(--transition);
}

#playerDetailsModal .last-matches-section .match-item:hover {
    background: var(--gray-100);
}

#playerDetailsModal .last-matches-section .match-item .match-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

#playerDetailsModal .last-matches-section .match-item .match-info .week-badge {
    background: var(--bowl-navy);
    color: white;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
}

#playerDetailsModal .last-matches-section .match-item .match-teams {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 4px 0;
}

#playerDetailsModal .last-matches-section .match-item .scores {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    justify-content: center;
    flex-wrap: wrap;
}

#playerDetailsModal .last-matches-section .match-item .scores .score {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
}

.score-high {
    background: var(--bowl-green);
}
.score-mid {
    background: var(--bowl-orange);
}
.score-low {
    background: var(--bowl-red);
}

/* ================================================================
   RESPONSIVE PARA MODALES (MÓVILES)
   ================================================================ */
@media (max-width: 768px) {
    #matchDetailsModal .modal-body .line-detail-grid {
        grid-template-columns: 1fr;
    }

    #matchDetailsModal .modal-body .detail-card .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    #matchDetailsModal .modal-body .detail-card .detail-value {
        text-align: left;
        width: 100%;
    }

    #playerDetailsModal .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
        padding: var(--spacing-3);
    }

    #playerDetailsModal .stats-grid .stat-item .stat-number {
        font-size: 1.6rem;
    }

    #playerDetailsModal .best-box {
        grid-template-columns: 1fr;
        padding: 0 var(--spacing-3) var(--spacing-3);
    }

    #playerDetailsModal .best-box .best-card .best-value {
        font-size: 2.2rem;
    }

    #playerDetailsModal .last-matches-section {
        padding: 0 var(--spacing-3) var(--spacing-3);
    }

    #playerDetailsModal .player-header .player-name {
        font-size: 1.3rem;
    }

    #playerDetailsModal .player-header .player-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    #matchDetailsModal .modal-body {
        padding: var(--spacing-2);
    }

    #matchDetailsModal .modal-body .detail-card {
        padding: var(--spacing-3);
    }

    #matchDetailsModal .modal-body .points-breakdown table {
        font-size: 0.7rem;
    }

    #matchDetailsModal .modal-body .points-breakdown table th,
    #matchDetailsModal .modal-body .points-breakdown table td {
        padding: 6px 4px;
    }

    #playerDetailsModal .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
        padding: var(--spacing-2);
    }

    #playerDetailsModal .stats-grid .stat-item {
        padding: var(--spacing-2);
    }

    #playerDetailsModal .stats-grid .stat-item .stat-number {
        font-size: 1.4rem;
    }

    #playerDetailsModal .stats-grid .stat-item .stat-label {
        font-size: 0.6rem;
    }

    #playerDetailsModal .player-header {
        padding: var(--spacing-3);
    }

    #playerDetailsModal .player-header .player-name {
        font-size: 1.1rem;
    }

    #playerDetailsModal .player-header .player-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }

    #playerDetailsModal .player-header .player-meta .meta-badge {
        font-size: 0.7rem;
        padding: 3px 10px;
    }

    #playerDetailsModal .last-matches-section .match-item .scores .score {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}

@media (max-width: 380px) {
    #matchDetailsModal .modal-body .detail-card .detail-label {
        font-size: 0.75rem;
    }
    #matchDetailsModal .modal-body .detail-card .detail-value {
        font-size: 0.8rem;
    }
    #playerDetailsModal .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    #playerDetailsModal .stats-grid .stat-item .stat-number {
        font-size: 1.2rem;
    }
}

/* ================================================================
   MEJORA PARA ENCUENTROS EN MÓVILES
   ================================================================ */
#tabMatches .tab-section {
    padding: var(--spacing-4);
}

#tabMatches .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

#tabMatches .filter-bar select {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    background: white;
    font-weight: 600;
    font-size: 0.9rem;
}

#tabMatches .filter-bar .btn {
    width: auto;
    padding: 12px 20px;
}

#matchesList {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Tarjeta de partido en móvil */
@media (max-width: 480px) {
    #tabMatches .filter-bar {
        flex-direction: column;
    }
    #tabMatches .filter-bar select {
        width: 100%;
        min-width: unset;
    }
    #tabMatches .filter-bar .btn {
        width: 100%;
        justify-content: center;
    }
    .match-card .match-header .badge-group {
        gap: 4px;
    }
    .match-card .match-header .badge-group .badge {
        font-size: 0.6rem;
        padding: 2px 8px;
    }
    .match-card .match-header .match-date {
        font-size: 0.7rem;
    }
    .match-card .team-display .team-name {
        font-size: 0.9rem;
    }
    .match-card .team-display .team-score {
        font-size: 2rem;
    }
    .match-card .team-display .team-points .pts-g,
    .match-card .team-display .team-points .pts-p {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    .match-card .line-card {
        padding: var(--spacing-2);
    }
    .match-card .line-scores {
        font-size: 1rem;
    }
    .match-card .series-total .total-label {
        font-size: 0.9rem;
    }
    .match-card .point-badge {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
}

/* ================================================================
   MEJORAS VISUALES PARA LA PESTAÑA DE ENCUENTROS (ESTILO TARJETA DESTACADA)
   ================================================================ */

/* Contenedor de la lista */
#matchesList {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Tarjeta de partido mejorada con sombra y borde */
.match-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-soft);
    border-left: 6px solid var(--bowl-gold);
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.match-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bowl-gold), var(--bowl-gold-light), var(--bowl-gold));
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

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

/* Cabecera del partido con badges mejorados */
.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--border-color);
}

.match-header .badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.match-header .match-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

/* Equipos y marcador */
.match-teams-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.team-display {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: var(--spacing-4) var(--spacing-2);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    transition: all var(--transition);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.team-display:hover {
    background: var(--gray-100);
    border-color: var(--bowl-gold);
}

.team-display .team-name {
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: var(--spacing-1);
    line-height: 1.3;
}

.team-display .team-score {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.2;
    transition: color var(--transition);
}

.team-display .team-points {
    font-size: 0.85rem;
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
    justify-content: center;
    flex-wrap: wrap;
}

.team-display .team-points .pts-g {
    background: var(--bowl-green);
    color: white;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
}

.team-display .team-points .pts-p {
    background: var(--bowl-red);
    color: white;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
}

.match-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--bowl-gold);
    padding: 0 var(--spacing-3);
}

/* Detalle de líneas (grid responsivo) */
.lines-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin: var(--spacing-2) 0;
}

.line-card {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: var(--spacing-3);
    text-align: center;
    border: 2px solid transparent;
    transition: all var(--transition);
    position: relative;
}

.line-card.winner {
    border-color: var(--bowl-gold);
    background: rgba(246, 196, 69, 0.06);
    box-shadow: 0 2px 12px rgba(246, 196, 69, 0.1);
}

.line-card.winner::after {
    content: '🏆';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1.2rem;
}

.line-number {
    font-weight: 700;
    color: var(--bowl-navy);
    margin-bottom: var(--spacing-2);
    font-size: 0.9rem;
}

.line-scores {
    display: flex;
    justify-content: space-around;
    font-size: 1.6rem;
    font-weight: 800;
}

.line-result {
    margin-top: var(--spacing-2);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    background: var(--gray-200);
}

/* Resumen de serie y puntos */
.series-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-2);
}

.series-total .total-label {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.points-distribution {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.point-badge {
    background: var(--gray-200);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.point-badge.won {
    background: var(--bowl-gold);
    color: var(--bowl-navy);
}

/* Partido pendiente (no completado) */
.match-pending {
    text-align: center;
    padding: var(--spacing-5);
    background: #f8f9fa;
    border-radius: var(--radius-md);
}

.match-pending .pending-icon {
    font-size: 2.5rem;
    color: var(--bowl-gold);
    margin-bottom: var(--spacing-2);
}

.match-pending .pending-text {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--spacing-1);
}

.match-pending .pending-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Acciones en partidos (admin) */
.match-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    justify-content: center;
    margin-top: var(--spacing-3);
}

.match-actions .btn {
    width: auto;
}

/* Selector de semana estilizado */
#weekSelector {
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    background: white;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
}

#weekSelector:focus {
    border-color: var(--bowl-gold);
    box-shadow: 0 0 0 3px rgba(246, 196, 69, 0.15);
    outline: none;
}

/* ================================================================
   RESPONSIVE PARA ENCUENTROS EN MÓVILES
   ================================================================ */
@media (max-width: 480px) {
    #tabMatches .filter-bar {
        flex-direction: column;
    }
    #tabMatches .filter-bar select {
        width: 100%;
        min-width: unset;
    }
    #tabMatches .filter-bar .btn {
        width: 100%;
        justify-content: center;
    }

    .match-card {
        padding: var(--spacing-3);
    }

    .match-card .match-header .badge-group {
        gap: 4px;
    }
    .match-card .match-header .badge-group .badge {
        font-size: 0.6rem;
        padding: 2px 8px;
    }
    .match-card .match-header .match-date {
        font-size: 0.7rem;
    }

    .match-card .match-teams-container {
        flex-direction: column;
        gap: var(--spacing-3);
    }
    .match-card .team-display {
        width: 100%;
        min-width: unset;
        padding: var(--spacing-3) var(--spacing-2);
    }
    .match-card .team-display .team-score {
        font-size: 2rem;
    }
    .match-card .team-display .team-name {
        font-size: 1rem;
    }
    .match-card .team-display .team-points .pts-g,
    .match-card .team-display .team-points .pts-p {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    .match-card .match-vs {
        padding: 0;
        font-size: 1.2rem;
    }

    .match-card .lines-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }
    .match-card .line-card {
        padding: var(--spacing-2);
    }
    .match-card .line-scores {
        font-size: 1.2rem;
    }
    .match-card .series-total {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
        text-align: center;
    }
    .match-card .series-total .total-label {
        font-size: 1rem;
        justify-content: center;
    }
    .match-card .points-distribution {
        justify-content: center;
    }
    .match-card .point-badge {
        font-size: 0.75rem;
        padding: 2px 10px;
    }
}

/* ================================================================
   RESPONSIVE – MÓVILES Y TABLETS
   ================================================================ */

/* Tablets y móviles grandes */
@media (max-width: 768px) {
    :root {
        --navbar-height: auto; /* Permitir que el navbar crezca si es necesario */
        --font-size-base: 14px;
    }

    /* ---------- NAVBAR ---------- */
    .navbar {
        height: auto;
        padding: 8px var(--spacing-3);
        flex-wrap: wrap;
    }

    .nav-container {
        flex-wrap: wrap;
        gap: var(--spacing-2);
        justify-content: center;
    }

    .nav-logo {
        gap: var(--spacing-2);
        flex: 0 1 auto;
    }

    .nav-logo-img {
        width: 38px;
        height: 38px;
    }

    .nav-logo-text h1 {
        font-size: 0.85rem;
        line-height: 1.1;
    }
    .nav-logo-text span {
        font-size: 0.6rem;
    }

    /* Selector de temporada - más visible */
    .season-selector-container {
        margin-left: 0 !important;
        flex: 1 1 100%;
        justify-content: center;
        order: 2; /* Coloca el selector después del logo y antes del usuario */
    }

    .season-selector-container select {
        width: 100%;
        max-width: 280px;
        padding: 6px 12px;
        font-size: 0.8rem;
        border-radius: 30px;
        background: white;
        color: var(--bowl-navy);
        font-weight: 600;
    }

    .user-info-container {
        padding: 4px 10px 4px 12px;
        gap: var(--spacing-2);
        flex: 0 1 auto;
        order: 3;
    }

    .user-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
    .user-badge span {
        display: inline-block; /* Mostrar siempre el texto del rol */
    }

    #logoutBtn {
        width: 34px;
        height: 34px;
    }

    /* ---------- PESTAÑAS ---------- */
    .tabs-header {
        gap: 4px;
        padding: 6px 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs-header::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: 0.7rem;
        white-space: nowrap;
        flex-shrink: 0;
        gap: 4px;
    }

    /* Mostrar el texto de la pestaña y reducir el icono */
    .tab-btn span {
        display: inline !important; /* Forzar visualización del texto */
        font-size: 0.65rem;
        font-weight: 600;
    }

    .tab-btn i {
        font-size: 0.9rem;
        margin-right: 2px;
    }

    /* En pantallas muy pequeñas, ocultar el icono y mostrar solo texto */
    @media (max-width: 480px) {
        .tab-btn i {
            display: none;
        }
        .tab-btn span {
            font-size: 0.7rem;
        }
        .tab-btn {
            padding: 6px 10px;
        }
    }

    /* Resto de ajustes para móviles (tarjetas, tablas, etc.) */
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .lines-container {
        grid-template-columns: 1fr 1fr;
    }

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

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

    .match-teams-container {
        flex-direction: column;
    }

    .team-display {
        width: 100%;
    }

    .modal {
        max-width: 95%;
        margin: auto;
    }

    .login-box {
        padding: 30px 20px;
    }

    .league-logo {
        width: 110px;
        height: 110px;
    }

    .btn {
        font-size: 0.9rem;
        padding: 12px 16px;
        min-height: 46px;
    }

    .card-header {
        font-size: 0.9rem;
        padding: 14px 16px;
    }
    .card-body {
        padding: var(--spacing-4);
    }

    .footer {
        padding: var(--spacing-3) var(--spacing-3);
        gap: 2px;
    }
    .footer p {
        font-size: 0.75rem;
    }
    .footer p:first-child {
        font-size: 0.8rem;
    }
    .footer-brand-tag {
        font-size: 0.75rem;
        padding: 4px 14px;
    }
    .footer .connection-status {
        font-size: 0.6rem;
    }

    .lines-container {
        grid-template-columns: 1fr;
    }

    #matchScoreModal .modal-body .team-score-card .team-body .score-input {
        flex-wrap: wrap;
    }

    #matchScoreModal .modal-body .team-score-card .team-body .score-input input[type="number"] {
        width: 100%;
        margin-top: 4px;
    }

    #matchScoreModal .modal-body .line-tabs .line-tab-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .player-stats-summary {
        grid-template-columns: 1fr 1fr;
    }

    .player-best-box {
        grid-template-columns: 1fr;
    }

    .match-preview .preview-teams {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .match-preview .preview-teams .vs-badge {
        order: -1;
    }

    #tabMatches .filter-bar {
        flex-direction: column;
    }

    #tabMatches .filter-bar select {
        width: 100%;
    }

    #tabMatches .filter-bar .btn {
        width: 100%;
    }

    #matchDetailsModal .modal-body .detail-card .detail-row {
        flex-wrap: wrap;
        gap: 2px;
    }

    #matchDetailsModal .modal-body .detail-card .detail-label {
        flex: 1 1 100%;
        font-size: 0.8rem;
    }

    #matchDetailsModal .modal-body .detail-card .detail-value {
        flex: 1 1 100%;
        text-align: right;
        font-size: 0.9rem;
    }

    /* Ajuste del selector de semana en la pestaña de encuentros */
    #tabMatches .filter-bar select#weekSelector {
        font-size: 0.8rem;
        padding: 10px 14px;
    }
}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
    :root {
        --font-size-base: 13px;
    }

    .quick-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
    }

    .stat-card .stat-value {
        font-size: 2rem;
    }

    .stat-card {
        padding: 12px 10px;
    }

    .card-body {
        padding: var(--spacing-3);
    }

    .match-card {
        padding: var(--spacing-3);
    }

    .lines-container {
        gap: var(--spacing-2);
    }

    .line-card {
        padding: var(--spacing-3);
    }

    .team-display .team-score {
        font-size: 2.2rem;
    }

    .login-box h2 {
        font-size: 1.6rem;
    }

    .login-box h2 span {
        font-size: 1rem;
    }

    .modal-header {
        padding: 14px 16px;
    }

    .modal-body {
        padding: var(--spacing-4);
    }

    .modal-footer {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .footer {
        padding: var(--spacing-2) var(--spacing-2);
        gap: 1px;
    }

    .footer p {
        font-size: 0.7rem;
    }

    .footer p:first-child {
        font-size: 0.75rem;
    }

    .footer-brand-tag {
        font-size: 0.7rem;
        padding: 3px 10px;
    }

    .footer .connection-status {
        font-size: 0.55rem;
    }

    .nav-logo-img {
        width: 32px;
        height: 32px;
    }

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

    .nav-logo-text span {
        font-size: 0.55rem;
    }

    .user-info-container {
        padding: 2px 8px 2px 10px;
        gap: var(--spacing-1);
    }

    .user-badge {
        font-size: 0.6rem;
        padding: 3px 8px;
    }

    #logoutBtn {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    /* Pestañas solo texto */
    .tab-btn i {
        display: none; /* Ocultar íconos en móviles muy pequeños */
    }
    .tab-btn span {
        font-size: 0.7rem;
        display: inline !important;
    }
    .tab-btn {
        padding: 6px 10px;
    }

    .table-responsive {
        border-radius: var(--radius-sm);
    }

    table {
        font-size: 0.75rem;
        min-width: 480px;
    }

    thead th {
        padding: 10px 6px;
        font-size: 0.6rem;
    }

    tbody td {
        padding: 8px 6px;
    }

    .standing-rank-badge {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .modal {
        max-width: 98%;
        border-radius: var(--radius-lg);
    }

    .modal-title {
        font-size: 0.95rem;
    }

    .btn-small {
        padding: 6px 12px;
        font-size: 0.7rem;
        min-height: 30px;
    }

    .player-stats-summary {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
    }

    .player-stats-summary .stat-item .stat-value {
        font-size: 1.5rem;
    }

    #matchScoreModal .modal-body .line-tabs .line-tab-btn {
        font-size: 0.7rem;
        padding: 6px 8px;
    }

    #matchScoreModal .modal-body .team-score-card .team-body .score-input .player-name {
        font-size: 0.8rem;
    }

    #matchDetailsModal .modal-body .detail-card {
        padding: var(--spacing-3);
    }

    #matchDetailsModal .modal-body .detail-card .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    #matchDetailsModal .modal-body .detail-card .detail-value {
        text-align: left;
        width: 100%;
    }

    .match-card .match-teams-container {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .match-card .team-display {
        width: 100%;
        min-width: unset;
        padding: var(--spacing-3) var(--spacing-2);
    }

    .match-card .team-display .team-score {
        font-size: 2rem;
    }

    .match-card .team-display .team-name {
        font-size: 1rem;
    }

    .match-card .match-vs {
        padding: 0;
        font-size: 1.2rem;
    }

    .match-card .lines-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .match-card .line-card {
        padding: var(--spacing-2);
    }

    .match-card .line-scores {
        font-size: 1.2rem;
    }

    .match-card .series-total {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
        text-align: center;
    }

    .match-card .series-total .total-label {
        font-size: 1rem;
        justify-content: center;
    }

    .match-card .points-distribution {
        justify-content: center;
    }

    .match-card .point-badge {
        font-size: 0.75rem;
        padding: 2px 10px;
    }

    /* Selector de temporada en móvil pequeño */
    .season-selector-container select {
        font-size: 0.7rem;
        padding: 4px 10px;
        max-width: 200px;
    }
}

/* Ajustes extra para pantallas muy pequeñas (360px) */
@media (max-width: 380px) {
    :root {
        --font-size-base: 12px;
    }

    .match-card .team-display .team-score {
        font-size: 1.8rem;
    }

    .match-card .team-display .team-name {
        font-size: 0.9rem;
    }

    .match-card .line-scores {
        font-size: 1rem;
    }

    .match-card .line-number {
        font-size: 0.8rem;
    }

    .match-card .line-result {
        font-size: 0.75rem;
    }

    .match-card .badge {
        font-size: 0.6rem;
        padding: 2px 10px;
    }

    #matchDetailsModal .modal-body .detail-card .detail-label {
        font-size: 0.75rem;
    }

    #matchDetailsModal .modal-body .detail-card .detail-value {
        font-size: 0.8rem;
    }

    .player-stats-summary .stat-item .stat-value {
        font-size: 1.2rem;
    }

    .player-stats-summary .stat-item .stat-label {
        font-size: 0.6rem;
    }

    .player-best-box .best-card .best-value {
        font-size: 2rem;
    }

    .season-selector-container select {
        font-size: 0.65rem;
        padding: 3px 8px;
        max-width: 160px;
    }

    .tab-btn span {
        font-size: 0.6rem;
    }
    .tab-btn {
        padding: 4px 8px;
    }
}

/* ================================================================
   TABLAS RESPONSIVAS – SCROLL HORIZONTAL EN MÓVILES
   ================================================================ */

/* Contenedor con scroll horizontal */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-3) 0;
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-soft);
    padding: 0;
}

/* La tabla dentro del contenedor */
.table-responsive table {
    width: 100%;
    min-width: 600px; /* Fuerza el scroll en pantallas pequeñas */
    border-collapse: collapse;
    font-size: 0.9rem;
}

/* Ajustes para móviles muy pequeños */
@media (max-width: 480px) {
    .table-responsive table {
        min-width: 480px; /* Mantiene el scroll */
        font-size: 0.75rem;
    }

    .table-responsive thead th,
    .table-responsive tbody td {
        padding: 8px 6px;
        white-space: nowrap; /* Evita que el texto se rompa */
    }
}

/* Ajuste extra para la tabla de ranking de jugadores */
#playerRankings .table-responsive {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Estilo para el scrollbar en la tabla (opcional) */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--bowl-gold);
    border-radius: 3px;
}

/* ================================================================
   MEJORAS PARA TARJETAS DE JUGADORES
   ================================================================ */

.player-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-soft);
    border-left: 6px solid var(--bowl-gold);
    cursor: pointer;
    transition: all var(--transition-bounce);
    position: relative;
    overflow: hidden;
}

.player-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bowl-gold), transparent);
    transition: transform var(--transition);
    transform: scaleX(0);
    transform-origin: left;
}

.player-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-md);
}

.player-card:hover::after {
    transform: scaleX(1);
}

.player-card .player-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--bowl-navy);
}

.player-card .player-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.player-card .player-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--border-color);
}

.player-card .player-stats-grid .stat-item {
    text-align: center;
}

.player-card .player-stats-grid .stat-item .stat-number {
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--bowl-navy);
}

.player-card .player-stats-grid .stat-item .stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.player-card .last-games {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}

.player-card .last-games .game-score {
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
}

/* Mejora visual para el filtro de equipos */
#teamFilter,
#categoryFilter,
#playerSearch {
    transition: border-color var(--transition), box-shadow var(--transition);
}

#teamFilter:focus,
#categoryFilter:focus,
#playerSearch:focus {
    border-color: var(--bowl-gold);
    box-shadow: 0 0 0 3px rgba(246, 196, 69, 0.15);
    outline: none;
}

/* Ajuste para móviles */
@media (max-width: 480px) {
    .players-grid {
        grid-template-columns: 1fr !important;
    }

    #playerSearch,
    #categoryFilter,
    #teamFilter {
        width: 100%;
        margin-left: 0 !important;
    }

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

/* ================================================================
   MEJORAS DASHBOARD: PRÓXIMOS ENCUENTROS Y MENSAJES
   ================================================================ */

/* Contenedor de próximos encuentros */
#nextAssignments .next-assignment-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-soft);
    border-left: 6px solid var(--bowl-gold);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#nextAssignments .next-assignment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

#nextAssignments .next-assignment-card .match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 6px;
}

#nextAssignments .next-assignment-card .match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#nextAssignments .next-assignment-card .team-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

#nextAssignments .next-assignment-card .team-badge .team-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

#nextAssignments .next-assignment-card .team-badge .team-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--bowl-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#nextAssignments .next-assignment-card .vs-badge {
    font-weight: 900;
    color: var(--bowl-gold);
    font-size: 1.1rem;
    padding: 0 4px;
}

#nextAssignments .next-assignment-card .match-footer {
    text-align: right;
    font-size: 0.7rem;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-color);
    padding-top: 6px;
    margin-top: 4px;
}

#nextAssignments .next-assignment-card .match-footer .date-badge {
    background: #e8f4fd;
    padding: 2px 12px;
    border-radius: 30px;
    font-weight: 600;
    display: inline-block;
}

/* Mensaje editable mejorado */
#editableMessageContainer .editable-message-box {
    margin: 16px 0 8px 0;
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    border-left: 6px solid var(--bowl-gold);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

#editableMessageContainer .editable-message-box .icon-circle {
    background: var(--bowl-gold-gradient);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-gold);
}

#editableMessageContainer .editable-message-box .icon-circle i {
    color: var(--bowl-navy);
    font-size: 1.5rem;
}

#editableMessageContainer .editable-message-box .message-text {
    flex: 1;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bowl-navy);
    line-height: 1.4;
}

#editableMessageContainer .editable-message-box .message-text.empty {
    font-style: italic;
    color: #999;
    font-weight: 400;
}

#editableMessageContainer .editable-message-box .message-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

#editableMessageContainer .editable-message-box .edit-btn {
    width: auto;
    padding: 8px 18px;
    border-radius: 30px;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    font-weight: 700;
    border: none;
    box-shadow: var(--shadow-gold);
    transition: all 0.2s;
    cursor: pointer;
}

#editableMessageContainer .editable-message-box .edit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(246, 196, 69, 0.5);
}

/* Ajustes responsive para estos bloques */
@media (max-width: 480px) {
    #nextAssignments .next-assignment-card {
        padding: 12px 14px;
    }
    #nextAssignments .next-assignment-card .team-name {
        font-size: 0.9rem;
    }
    #editableMessageContainer .editable-message-box {
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    #editableMessageContainer .editable-message-box .icon-circle {
        margin: 0 auto;
    }
    #editableMessageContainer .editable-message-box .edit-btn {
        align-self: center;
    }
}

/* ================================================================
   CAPTURA DE RESULTADOS PREMIUM + FANTASMAS
   ================================================================ */

/* Sticky header del modal */
.score-modal-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f);
    color: white;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 3px solid var(--bowl-gold);
    margin: -16px -16px 12px -16px;
    border-radius: 0;
}
.smh-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.12);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 4px;
}
.smh-teams { font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
.smh-vs { color: var(--bowl-gold); font-weight: 900; margin: 0 4px; }

/* Tips */
.score-tips {
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
    border-left: 4px solid var(--bowl-gold);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #6b5b3e;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.score-tips i { color: var(--bowl-gold-dark); font-size: 1.2rem; flex-shrink: 0; }
.score-tips kbd {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.75rem;
    font-family: monospace;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Verificación equipos */
.verify-teams-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.verify-team-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border-left: 5px solid var(--bowl-gold);
}
.vtc-header {
    color: white;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vtc-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.vtc-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    font-size: 0.8rem;
    font-weight: 600;
}
.vtc-check:hover { background: #f5f5f5; }
.vtc-check input { width: 18px; height: 18px; accent-color: var(--bowl-gold-dark); cursor: pointer; }

/* Panel de fantasmas */
.ghost-panel {
    background: linear-gradient(135deg, #f8f0ff, #f0e6ff);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px dashed #b39ddb;
}
.ghost-panel-title {
    font-weight: 800;
    color: #6a1b9a;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ghost-panel-hint {
    font-weight: 500;
    font-size: 0.72rem;
    color: #7e57c2;
    background: rgba(255,255,255,0.6);
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: auto;
}
.ghost-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ghost-side-panel {
    background: white;
    border-radius: 10px;
    padding: 10px;
    border-left: 4px solid #9b59b6;
    box-shadow: 0 2px 8px rgba(155,89,182,0.08);
}
.gsp-team-name {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ghost-slot { margin-bottom: 6px; }
.ghost-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    background: #faf5ff;
    transition: background 0.15s;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6a1b9a;
}
.ghost-toggle:hover { background: #f0e6ff; }
.ghost-toggle input { width: 16px; height: 16px; accent-color: #9b59b6; cursor: pointer; }
.ghost-selector { margin-top: 6px; }
.ghost-select {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #d1c4e9;
    border-radius: 6px;
    font-size: 0.78rem;
    background: white;
}
.ghost-select:focus { outline: none; border-color: #9b59b6; box-shadow: 0 0 0 3px rgba(155,89,182,0.15); }

/* Tabs de línea premium */
.line-tabs-premium {
    display: flex;
    gap: 8px;
    background: #f0f0f5;
    padding: 6px;
    border-radius: 50px;
    margin-bottom: 14px;
}
.ltp-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.ltp-btn .ltp-num {
    background: #ddd;
    color: #666;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
}
.ltp-btn.active {
    background: linear-gradient(135deg, #f6c445, #d9a832);
    color: #0a1a2b;
    box-shadow: 0 4px 14px rgba(246,196,69,0.4);
}
.ltp-btn.active .ltp-num {
    background: rgba(10,26,43,0.15);
    color: #0a1a2b;
}
.ltp-btn:hover:not(.active) { background: rgba(246,196,69,0.1); }

/* Grid de línea premium */
.line-grid-premium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.team-score-card-premium {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border-top: 4px solid var(--bowl-gold);
}
.tscp-header {
    color: white;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tscp-lane {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
}
.tscp-body { padding: 12px; }
.tscp-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
}
.tscp-select {
    width: 100%;
    padding: 6px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.8rem;
    background: white;
    margin-bottom: 10px;
}
.tscp-select:focus { outline: none; border-color: var(--bowl-gold); box-shadow: 0 0 0 3px rgba(246,196,69,0.15); }

/* Filas de score premium */
.scores-container-premium { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.score-row-premium {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafafa;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all 0.15s;
}
.score-row-premium:hover { background: #f5f5f5; border-color: #ddd; }
.score-row-premium.ghost-row {
    background: linear-gradient(135deg, #f8f0ff, #f3e5f5);
    border: 1.5px dashed #b39ddb;
}
.score-row-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ghost-avatar { background: linear-gradient(135deg, #9b59b6, #6a1b9a); }
.score-row-info { flex: 1; min-width: 0; }
.score-row-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #0a1a2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ghost-badge {
    background: #9b59b6;
    color: white;
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.score-row-tags { display: flex; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.tag-cat, .tag-hdcp, .tag-ghost-note {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}
.tag-cat { background: #e8f4fd; color: #2176ae; }
.tag-hdcp { background: #f3e5f5; color: #6a1b9a; }
.tag-ghost-note { background: #fff3e0; color: #e67e22; font-style: italic; }
.score-row-input-wrap { flex-shrink: 0; }
.score-input-premium {
    width: 78px;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 800;
    background: white;
    transition: all 0.15s;
    color: #0a1a2b;
}
.score-input-premium:focus {
    outline: none;
    border-color: var(--bowl-gold);
    box-shadow: 0 0 0 4px rgba(246,196,69,0.2);
    background: #fffdf5;
}
.score-input-premium.ghost-input { border-color: #b39ddb; }
.score-input-premium.ghost-input:focus {
    border-color: #9b59b6;
    box-shadow: 0 0 0 4px rgba(155,89,182,0.2);
    background: #faf5ff;
}
.score-row-remove {
    background: rgba(231,76,60,0.1);
    color: #e74c3c;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.score-row-remove:hover { background: #e74c3c; color: white; transform: scale(1.08); }
.score-row-remove.ghost-remove { background: rgba(155,89,182,0.1); color: #9b59b6; }
.score-row-remove.ghost-remove:hover { background: #9b59b6; color: white; }

.ghost-pending-row {
    background: #f0e6ff;
    color: #6a1b9a;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px dashed #b39ddb;
}
.empty-line-hint {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 0.85rem;
    background: #fafafa;
    border-radius: 10px;
    border: 2px dashed #e0e0e0;
}
.empty-line-hint i { display: block; font-size: 1.5rem; margin-bottom: 6px; color: #ccc; }

/* Total de línea */
.line-total-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8f9fa, #eef1f5);
    border-radius: 10px;
    border-top: 2px dashed #ddd;
    margin-top: 8px;
}
.ltp-text { font-weight: 700; color: #666; font-size: 0.85rem; }
.ltp-value {
    font-size: 1.9rem;
    font-weight: 900;
    transition: transform 0.15s;
}

/* Footer sticky con totales */
.score-modal-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f);
    color: white;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 12px;
    align-items: center;
    border-top: 3px solid var(--bowl-gold);
    margin: 16px -16px -16px -16px;
    border-radius: 0 0 14px 14px;
}
.smf-team { text-align: center; }
.smf-name { font-size: 0.7rem; font-weight: 700; opacity: 0.9; }
.smf-score { font-size: 1.8rem; font-weight: 900; color: white; line-height: 1; }
.smf-center { display: flex; align-items: center; justify-content: center; }
.smf-points { font-size: 0.75rem; }
.live-points-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.lp-item {
    background: rgba(255,255,255,0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.lp-item.lp-gold { background: var(--bowl-gold-gradient); color: #0a1a2b; }
.smf-actions { display: flex; gap: 6px; }
.smf-actions .btn { padding: 8px 12px; min-height: 40px; width: auto; }

/* Responsive */
@media (max-width: 768px) {
    .verify-teams-grid,
    .ghost-panel-grid,
    .line-grid-premium { grid-template-columns: 1fr; }
    .score-modal-sticky-footer { grid-template-columns: 1fr 1fr; }
    .smf-center { grid-column: span 2; order: 3; }
    .smf-actions { grid-column: span 2; justify-content: center; order: 4; }
    .score-input-premium { width: 68px; font-size: 1.05rem; padding: 8px; }
    .ltp-btn { font-size: 0.78rem; padding: 8px 6px; }
    .ltp-btn .ltp-label { display: none; }
}
@media (max-width: 480px) {
    .score-modal-sticky-header { flex-direction: column; align-items: flex-start; }
    .smh-teams { font-size: 0.8rem; }
    .score-row-premium { padding: 6px 8px; gap: 6px; }
    .score-row-avatar { width: 32px; height: 32px; font-size: 0.72rem; }
    .score-input-premium { width: 58px; font-size: 0.95rem; padding: 6px; }
    .score-row-remove { width: 28px; height: 28px; }
    .smf-score { font-size: 1.4rem; }
    .ltp-value { font-size: 1.5rem; }
}

/* Filas de fantasmas en el modal de detalles */
#matchDetailsModal .line-detail-card .line-players .ghost-detail-row {
    animation: fadeIn 0.2s ease;
    border-left: 3px solid #9b59b6 !important;
    background: linear-gradient(90deg, #f3e5f5, #faf5ff) !important;
}
#matchDetailsModal .line-detail-card .line-players .ghost-detail-row .p-name {
    color: #6a1b9a;
    font-weight: 700;
}
#matchDetailsModal .line-detail-card .line-players .ghost-detail-row .p-score {
    background: #9b59b6;
    color: white;
    padding: 1px 10px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.85rem;
}

/* ================================================================
   MODAL DETALLES DEL JUGADOR — DISEÑO PREMIUM
   ================================================================ */

.pdp-modal-body {
    padding: 0 !important;
    background: #f4f6fa !important;
    overflow-x: hidden !important;
}

#playerDetailsModal .modal {
    max-width: 780px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
}

.pdp-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

/* ============================================================
   1. HERO HEADER
   ============================================================ */
.pdp-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #0a1a2b 0%, #1a2a3f 100%);
    color: white;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(10, 26, 43, 0.2);
}

.pdp-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
}

.pdp-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.pdp-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* --- Avatar con badge de categoría --- */
.pdp-hero-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pdp-hero-avatar {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
    border: 4px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    letter-spacing: 1px;
    transition: transform var(--transition-bounce);
}
.pdp-hero-avatar:hover {
    transform: scale(1.05) rotate(-3deg);
}

.pdp-hero-cat-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    color: white;
    border: 3px solid #0a1a2b;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.pdp-cat-A { background: linear-gradient(135deg, #f6c445, #d9a832); color: #0a1a2b; }
.pdp-cat-B { background: linear-gradient(135deg, #3498db, #2176ae); }
.pdp-cat-C { background: linear-gradient(135deg, #27ae60, #1e8449); }

/* --- Info central --- */
.pdp-hero-info {
    flex: 1;
    min-width: 200px;
}

.pdp-hero-name {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin-bottom: 8px;
}

.pdp-hero-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.pdp-hero-team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.78rem;
    font-weight: 700;
}

.pdp-team-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--team-color, #3498db);
    box-shadow: 0 0 8px var(--team-color, #3498db);
}

.pdp-hero-pos {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(246, 196, 69, 0.15);
    color: #f8d76e;
    border: 1px solid rgba(246, 196, 69, 0.35);
    font-size: 0.78rem;
    font-weight: 800;
}

.pdp-hero-eligible {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(39, 174, 96, 0.18);
    color: #5dd489;
    border: 1px solid rgba(39, 174, 96, 0.4);
    font-size: 0.78rem;
    font-weight: 700;
}

.pdp-hero-not-eligible {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(243, 156, 18, 0.15);
    color: #f0b254;
    border: 1px solid rgba(243, 156, 18, 0.35);
    font-size: 0.78rem;
    font-weight: 700;
}

/* --- Progress bar de elegibilidad --- */
.pdp-hero-progress {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pdp-progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    overflow: hidden;
}
.pdp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f6c445, #d9a832);
    border-radius: 20px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(246, 196, 69, 0.6);
}
.pdp-progress-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-align: right;
}

/* --- Promedio a la derecha --- */
.pdp-hero-avg {
    text-align: center;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    min-width: 130px;
}

.pdp-hero-avg-value {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--avg-color, #f6c445);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
}

.pdp-hero-avg-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}

.pdp-hero-avg-hdcp {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
    font-weight: 600;
    padding-top: 5px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
}
.pdp-hero-avg-hdcp i {
    color: #f6c445;
    font-size: 0.6rem;
    margin-right: 2px;
}

/* ============================================================
   2. SECCIONES GENÉRICAS
   ============================================================ */
.pdp-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: 0 2px 12px rgba(10, 26, 43, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.pdp-section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--bowl-navy);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px dashed var(--gray-200);
    letter-spacing: 0.2px;
}
.pdp-section-heading i {
    color: var(--bowl-gold-dark);
    font-size: 1rem;
}
.pdp-section-count {
    margin-left: auto;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    font-size: 0.7rem;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 20px;
    box-shadow: var(--shadow-gold);
}

/* ============================================================
   3. STATS GRID
   ============================================================ */
.pdp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.pdp-stat-card {
    background: linear-gradient(180deg, #ffffff, #fafbfd);
    border-radius: var(--radius-md);
    padding: 14px 10px;
    text-align: center;
    border: 1px solid var(--gray-200);
    transition: all var(--transition-bounce);
    position: relative;
    overflow: hidden;
}
.pdp-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(10, 26, 43, 0.08);
    border-color: var(--bowl-gold);
}

.pdp-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.pdp-stat-games .pdp-stat-icon  { background: linear-gradient(135deg, #3498db, #2176ae); }
.pdp-stat-pins .pdp-stat-icon   { background: linear-gradient(135deg, #9b59b6, #6a1b9a); }
.pdp-stat-hdcp .pdp-stat-icon   { background: linear-gradient(135deg, #e67e22, #c86a1a); }
.pdp-stat-avg .pdp-stat-icon    { background: linear-gradient(135deg, #f6c445, #d9a832); color: #0a1a2b; }

.pdp-stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--bowl-navy);
    line-height: 1.1;
    letter-spacing: -0.4px;
}
.pdp-stat-avg .pdp-stat-value {
    color: var(--avg-color, var(--bowl-gold-dark));
    font-size: 1.7rem;
}

.pdp-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: 4px;
}

/* ============================================================
   4. BEST GAME / BEST SERIES
   ============================================================ */
.pdp-best-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pdp-best-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    color: white;
    overflow: hidden;
    transition: transform var(--transition-bounce);
}
.pdp-best-card:hover {
    transform: translateY(-3px) scale(1.01);
}

.pdp-best-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
}

.pdp-best-game {
    background: linear-gradient(135deg, #f6c445, #d9a832);
    color: #0a1a2b;
    box-shadow: 0 6px 22px rgba(246, 196, 69, 0.35);
}
.pdp-best-series {
    background: linear-gradient(135deg, #3498db, #2176ae);
    box-shadow: 0 6px 22px rgba(52, 152, 219, 0.3);
}

.pdp-best-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.pdp-best-game .pdp-best-icon  { color: #0a1a2b; background: rgba(10, 26, 43, 0.12); }
.pdp-best-series .pdp-best-icon { color: white; }

.pdp-best-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.pdp-best-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.pdp-best-value {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 2px 0;
}

.pdp-best-hint {
    font-size: 0.68rem;
    opacity: 0.75;
    font-weight: 600;
}

.pdp-best-ribbon {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #d9a832;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.pdp-best-series .pdp-best-ribbon {
    color: #2176ae;
}

/* ============================================================
   5. LISTA DE PARTIDOS
   ============================================================ */
.pdp-matches-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdp-match-row {
    background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.pdp-match-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--bowl-gold), var(--bowl-gold-dark));
    border-radius: 4px 0 0 4px;
}
.pdp-match-row:hover {
    transform: translateX(3px);
    border-color: var(--bowl-gold);
    box-shadow: 0 4px 14px rgba(246, 196, 69, 0.15);
}

/* --- Cabecera --- */
.pdp-match-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pdp-match-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.pdp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.pdp-badge-week {
    background: var(--bowl-navy);
    color: white;
}
.pdp-badge-side.home {
    background: rgba(52, 152, 219, 0.15);
    color: #2176ae;
}
.pdp-badge-side.away {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}
.pdp-badge-lane {
    background: rgba(246, 196, 69, 0.18);
    color: #a57917;
}

.pdp-match-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}
.pdp-match-date i {
    color: var(--bowl-gold-dark);
    margin-right: 3px;
}

/* --- Equipos VS --- */
.pdp-match-vs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.pdp-team-name {
    font-weight: 600;
    color: var(--text-secondary);
}
.pdp-team-name.strong {
    color: var(--bowl-navy);
    font-weight: 800;
}
.pdp-vs-sep {
    color: var(--bowl-gold-dark);
    font-weight: 900;
    font-size: 0.7rem;
    padding: 0 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* --- Chips de puntajes --- */
.pdp-match-scores {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pdp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 6px;
    border-radius: 30px;
    font-weight: 700;
    transition: transform var(--transition);
}
.pdp-chip:hover {
    transform: translateY(-2px);
}

.pdp-chip-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    font-size: 0.62rem;
    font-weight: 900;
}

.pdp-chip-score {
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: -0.2px;
}

/* Colores por tier */
.pdp-chip-premium {
    background: linear-gradient(135deg, #f6c445, #d9a832);
    color: #0a1a2b;
    box-shadow: 0 3px 10px rgba(246, 196, 69, 0.35);
}
.pdp-chip-high {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: white;
}
.pdp-chip-mid {
    background: linear-gradient(135deg, #3498db, #2176ae);
    color: white;
}
.pdp-chip-low {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
}
.pdp-chip-empty {
    background: var(--gray-100);
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 5px 10px;
}

/* --- Pie del partido --- */
.pdp-match-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px dashed var(--gray-200);
    flex-wrap: wrap;
    gap: 6px;
}

.pdp-match-avg {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}
.pdp-match-avg i {
    color: var(--bowl-gold-dark);
    margin-right: 3px;
}
.pdp-match-avg strong {
    color: var(--bowl-navy);
    font-weight: 900;
    font-size: 0.85rem;
}

.pdp-series-result {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.pdp-series-result.pdp-won {
    background: rgba(39, 174, 96, 0.15);
    color: #1e8449;
}
.pdp-series-result.pdp-lost {
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
}
.pdp-series-result.pdp-tie {
    background: var(--gray-100);
    color: var(--text-muted);
}

/* ============================================================
   6. EMPTY STATE
   ============================================================ */
.pdp-empty-state {
    text-align: center;
    padding: 30px 20px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fafbfd, #f0f4fa);
    border: 2px dashed var(--gray-200);
}
.pdp-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-muted);
}
.pdp-empty-title {
    font-weight: 800;
    color: var(--bowl-navy);
    font-size: 1rem;
    margin-bottom: 4px;
}
.pdp-empty-text {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .pdp-container {
        padding: 12px;
        gap: 12px;
    }

    .pdp-hero {
        padding: 16px;
    }

    .pdp-hero-content {
        gap: 12px;
    }

    .pdp-hero-avatar {
        width: 62px;
        height: 62px;
        font-size: 1.4rem;
    }
    .pdp-hero-cat-badge {
        width: 26px;
        height: 26px;
        font-size: 0.78rem;
    }

    .pdp-hero-name {
        font-size: 1.15rem;
    }

    .pdp-hero-avg {
        min-width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        text-align: left;
    }
    .pdp-hero-avg-value {
        font-size: 2rem;
    }
    .pdp-hero-avg-label,
    .pdp-hero-avg-hdcp {
        text-align: left;
    }

    .pdp-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pdp-stat-value { font-size: 1.3rem; }
    .pdp-stat-avg .pdp-stat-value { font-size: 1.4rem; }

    .pdp-best-grid {
        grid-template-columns: 1fr;
    }

    .pdp-best-value { font-size: 1.7rem; }

    .pdp-section {
        padding: 14px;
    }

    .pdp-section-heading { font-size: 0.85rem; }

    .pdp-chip-score { font-size: 0.78rem; }

    .pdp-match-vs { font-size: 0.8rem; }
}

@media (max-width: 400px) {
    .pdp-hero-avatar {
        width: 54px;
        height: 54px;
        font-size: 1.2rem;
    }
    .pdp-hero-name { font-size: 1.05rem; }
    .pdp-hero-avg-value { font-size: 1.7rem; }

    .pdp-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .pdp-stat-card { padding: 10px 6px; }
    .pdp-stat-value { font-size: 1.15rem; }
    .pdp-stat-avg .pdp-stat-value { font-size: 1.25rem; }
    .pdp-stat-icon { width: 30px; height: 30px; font-size: 0.85rem; }
    .pdp-stat-label { font-size: 0.58rem; }

    .pdp-match-row { padding: 10px 12px; }
    .pdp-badge { font-size: 0.6rem; padding: 2px 7px; }
    .pdp-chip { padding: 4px 8px 4px 5px; }
    .pdp-chip-score { font-size: 0.72rem; }
    .pdp-chip-line { width: 17px; height: 17px; font-size: 0.58rem; }
}

/* ================================================================
   PREMIUM LEADER CARDS V2 — DASHBOARD & PESTAÑA LÍDERES
   ================================================================ */

/* ---------- HERO HEADER (contexto semanal / temporada) ---------- */
.pld-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #fffdf5 0%, #fff8e7 100%);
    border: 1px solid rgba(246, 196, 69, 0.35);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(246, 196, 69, 0.1);
}

.pld-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(246, 196, 69, 0.15), transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(246, 196, 69, 0.08), transparent 50%);
    pointer-events: none;
}

.pld-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.pld-hero-warn {
    background: linear-gradient(135deg, #fff8e7 0%, #ffe9c4 100%);
    border-color: rgba(243, 156, 18, 0.4);
    box-shadow: 0 4px 18px rgba(243, 156, 18, 0.15);
}

.pld-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(246, 196, 69, 0.45);
    position: relative;
    z-index: 1;
    animation: pld-hero-pulse 3s ease-in-out infinite;
}

.pld-hero-warn .pld-hero-icon {
    background: linear-gradient(135deg, #f39c12, #d68910);
    color: white;
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.45);
}

@keyframes pld-hero-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.pld-hero-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.pld-hero-title {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: var(--bowl-navy);
    margin: 0 0 8px;
    line-height: 1.15;
}

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

.pld-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: white;
    border: 1px solid rgba(246, 196, 69, 0.4);
    color: var(--bowl-navy);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(246, 196, 69, 0.12);
    transition: transform var(--transition-bounce);
}

.pld-hero-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(246, 196, 69, 0.25);
}

.pld-hero-chip i {
    color: var(--bowl-gold-dark);
    font-size: 0.7rem;
}

.pld-hero-chip-gold {
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(246, 196, 69, 0.3);
}

.pld-hero-chip-gold i {
    color: var(--bowl-navy);
}

.pld-hero-chip-warn {
    background: linear-gradient(135deg, #f39c12, #d68910);
    color: white;
    border-color: transparent;
}

.pld-hero-chip-warn i {
    color: white;
}

/* ---------- CATEGORY SECTIONS ---------- */
.pld-category-section {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 6px 24px rgba(10, 26, 43, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.pld-category-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f);
    color: white;
    overflow: hidden;
}

.pld-category-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.pld-category-letter {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.4rem;
    color: white;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    transition: transform var(--transition-bounce);
}

.pld-category-header:hover .pld-category-letter {
    transform: scale(1.08) rotate(-4deg);
}

.pld-cat-A .pld-category-letter { background: linear-gradient(135deg, #f6c445, #d9a832); color: #0a1a2b; }
.pld-cat-B .pld-category-letter { background: linear-gradient(135deg, #3498db, #2176ae); }
.pld-cat-C .pld-category-letter { background: linear-gradient(135deg, #27ae60, #1e8449); }

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

.pld-category-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.2;
    margin: 0;
}

.pld-category-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-top: 3px;
    letter-spacing: 0.2px;
}

.pld-category-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(246, 196, 69, 0.35);
    flex-shrink: 0;
}

.pld-category-count i {
    font-size: 0.68rem;
}

.pld-category-body {
    padding: 20px;
}

/* ---------- TYPE SECTIONS ---------- */
.pld-type-section {
    margin-bottom: 24px;
}

.pld-type-section:last-child {
    margin-bottom: 0;
}

.pld-type-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px dashed var(--gray-200);
}

.pld-type-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(246, 196, 69, 0.2), rgba(246, 196, 69, 0.06));
    border: 1.5px solid rgba(246, 196, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bowl-gold-dark);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform var(--transition-bounce);
}

.pld-type-header:hover .pld-type-icon-wrap {
    transform: scale(1.08) rotate(-6deg);
    background: linear-gradient(135deg, rgba(246, 196, 69, 0.3), rgba(246, 196, 69, 0.12));
}

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

.pld-type-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--bowl-navy);
    letter-spacing: 0.2px;
    margin: 0;
    line-height: 1.2;
}

.pld-type-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
}

.pld-type-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--gray-100);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-shrink: 0;
    border: 1px solid var(--gray-200);
}

/* ---------- EMPTY STATE ---------- */
.pld-empty {
    text-align: center;
    padding: 36px 20px;
    background: linear-gradient(180deg, #fafbfd, #f0f4fa);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--gray-200);
}

.pld-empty i {
    font-size: 2.4rem;
    color: var(--bowl-gold);
    margin-bottom: 12px;
    display: block;
    animation: float 3s ease-in-out infinite;
}

.pld-empty p {
    color: var(--bowl-navy);
    font-weight: 800;
    margin: 0 0 4px;
    font-size: 1rem;
}

.pld-empty small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ---------- GRID ---------- */
.pld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

#dashboardLeaders {
    display: block !important;
}

#dashboardLeaders .pld-grid-dashboard {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

/* ---------- CARD BASE ---------- */
.pld-card {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-bounce);
    box-shadow: 0 4px 16px rgba(10, 26, 43, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.6);
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.pld-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bowl-gold), var(--bowl-gold-light), var(--bowl-gold));
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
    z-index: 2;
}

.pld-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(246, 196, 69, 0.06), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.pld-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(10, 26, 43, 0.16);
    border-color: var(--bowl-gold);
}

/* Borde superior por categoría */
.pld-card.pld-cat-A::before {
    background: linear-gradient(90deg, #f6c445, #f8d76e, #d9a832, #f8d76e, #f6c445);
    background-size: 200% 100%;
}
.pld-card.pld-cat-B::before {
    background: linear-gradient(90deg, #3498db, #5dade2, #2176ae, #5dade2, #3498db);
    background-size: 200% 100%;
}
.pld-card.pld-cat-C::before {
    background: linear-gradient(90deg, #27ae60, #58d68d, #1e8449, #58d68d, #27ae60);
    background-size: 200% 100%;
}

/* ---------- CARD DESTACADA (Rank 1) ---------- */
.pld-card.pld-featured {
    background: linear-gradient(180deg, #fffdf5 0%, #fff8e7 100%);
    border-color: var(--bowl-gold);
    box-shadow: 0 8px 28px rgba(246, 196, 69, 0.3), inset 0 0 0 1px rgba(246, 196, 69, 0.25);
}

.pld-card.pld-featured::before {
    height: 5px;
}

.pld-card.pld-featured .pld-avatar {
    width: 58px;
    height: 58px;
    font-size: 1.15rem;
    box-shadow: 0 4px 16px rgba(246, 196, 69, 0.4), 0 0 0 3px white;
}

.pld-card.pld-featured .pld-score-value {
    font-size: 2.4rem;
}

.pld-card.pld-featured .pld-name {
    font-size: 1rem;
}

.pld-card.pld-featured:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 44px rgba(246, 196, 69, 0.4), inset 0 0 0 1px rgba(246, 196, 69, 0.4);
}

/* ---------- RANK BADGES ---------- */
.pld-rank {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-bounce);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.pld-card:hover .pld-rank {
    transform: scale(1.12) rotate(6deg);
}

.pld-rank-1 {
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #7a5c00;
    animation: pld-gold-glow 2.2s infinite;
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
}

.pld-rank-2 {
    background: linear-gradient(135deg, #e8e8e8, #a8a8a8);
    color: #4a4a4a;
}

.pld-rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a05a1f);
    color: white;
}

.pld-rank-n {
    background: var(--bowl-navy);
    color: var(--bowl-gold);
    font-size: 0.85rem;
}

@keyframes pld-gold-glow {
    0%, 100% { box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4); }
    50%      { box-shadow: 0 4px 22px rgba(255, 215, 0, 0.8); }
}

/* ---------- CARD HEADER ---------- */
.pld-card-header {
    padding: 14px 14px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--gray-100);
    position: relative;
    z-index: 1;
}

.pld-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.pld-cat-A .pld-cat-badge {
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
    color: #a57917;
    border: 1px solid rgba(246, 196, 69, 0.5);
}
.pld-cat-B .pld-cat-badge {
    background: linear-gradient(135deg, #e8f4fd, #d6ebf9);
    color: #2176ae;
    border: 1px solid rgba(52, 152, 219, 0.5);
}
.pld-cat-C .pld-cat-badge {
    background: linear-gradient(135deg, #eaf7ef, #d9f0e2);
    color: #1e8449;
    border: 1px solid rgba(39, 174, 96, 0.5);
}

.pld-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--gray-100);
    white-space: nowrap;
}

.pld-type-badge i {
    color: var(--bowl-gold-dark);
    font-size: 0.68rem;
}

/* ---------- CARD BODY ---------- */
.pld-card-body {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.pld-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    border: 2px solid white;
    transition: transform var(--transition-bounce);
}

.pld-card:hover .pld-avatar {
    transform: scale(1.06) rotate(-4deg);
}

.pld-cat-A .pld-avatar {
    background: linear-gradient(135deg, #f6c445, #d9a832);
    color: #0a1a2b;
}
.pld-cat-B .pld-avatar {
    background: linear-gradient(135deg, #3498db, #2176ae);
}
.pld-cat-C .pld-avatar {
    background: linear-gradient(135deg, #27ae60, #1e8449);
}

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

.pld-name {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--bowl-navy);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    letter-spacing: -0.2px;
}

.pld-team {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 3px;
}

.pld-team i {
    color: var(--bowl-gold-dark);
    font-size: 0.62rem;
}

/* ---------- CARD FOOTER ---------- */
.pld-card-footer {
    padding: 10px 14px 14px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(180deg, transparent, rgba(246, 196, 69, 0.05));
    position: relative;
    z-index: 1;
}

.pld-score-block {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pld-score-value {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(135deg, var(--bowl-navy), #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pld-cat-A .pld-score-value {
    background: linear-gradient(135deg, #d9a832, #a57917);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pld-cat-B .pld-score-value {
    background: linear-gradient(135deg, #2176ae, #1a5a8a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pld-cat-C .pld-score-value {
    background: linear-gradient(135deg, #1e8449, #145c33);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pld-score-unit {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pld-games {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--gray-100);
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pld-games i {
    color: var(--bowl-gold-dark);
    font-size: 0.58rem;
}

/* ---------- DATE ---------- */
.pld-date {
    padding: 8px 14px 10px;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(180deg, rgba(246, 196, 69, 0.06), transparent);
    border-top: 1px dashed var(--gray-200);
    letter-spacing: 0.2px;
}

.pld-date i {
    color: var(--bowl-gold-dark);
    font-size: 0.65rem;
}

.pld-date span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- COMPACT (Dashboard) ---------- */
.pld-card.pld-compact {
    min-height: 180px;
}
.pld-card.pld-compact .pld-avatar {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
}
.pld-card.pld-compact .pld-score-value {
    font-size: 1.65rem;
}
.pld-card.pld-compact .pld-name {
    font-size: 0.86rem;
}

/* ---------- MORE BADGE ---------- */
.pld-more-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f8fafc, #f0f4fa);
    border: 2px dashed var(--gray-200);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all var(--transition);
    cursor: default;
}

.pld-more-badge:hover {
    border-color: var(--bowl-gold);
    color: var(--bowl-navy);
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    .pld-hero {
        padding: 14px 16px;
        gap: 14px;
    }
    .pld-hero-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    .pld-hero-title { font-size: 1.1rem; }
    .pld-hero-chip { font-size: 0.68rem; padding: 4px 10px; }

    .pld-category-header { padding: 14px 16px; gap: 10px; }
    .pld-category-letter { width: 40px; height: 40px; font-size: 1.15rem; }
    .pld-category-title { font-size: 0.95rem; }
    .pld-category-sub { font-size: 0.65rem; }
    .pld-category-count { font-size: 0.65rem; padding: 5px 11px; }
    .pld-category-body { padding: 14px; }

    .pld-type-icon-wrap { width: 34px; height: 34px; font-size: 0.85rem; border-radius: 10px; }
    .pld-type-title { font-size: 0.88rem; }
    .pld-type-sub { font-size: 0.62rem; }
    .pld-type-count { font-size: 0.6rem; padding: 3px 9px; }

    .pld-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
    }
    #dashboardLeaders .pld-grid-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }

    .pld-card { min-height: 175px; }
    .pld-avatar { width: 40px; height: 40px; font-size: 0.85rem; }
    .pld-card.pld-featured .pld-avatar { width: 48px; height: 48px; font-size: 0.95rem; }
    .pld-name { font-size: 0.82rem; }
    .pld-card.pld-featured .pld-name { font-size: 0.92rem; }
    .pld-score-value { font-size: 1.6rem; }
    .pld-card.pld-featured .pld-score-value { font-size: 2rem; }
    .pld-rank { width: 30px; height: 30px; font-size: 0.9rem; top: 10px; right: 10px; }
    .pld-rank-1 { width: 36px; height: 36px; font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .pld-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }
    .pld-hero-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
    .pld-hero-title { font-size: 1rem; }
    .pld-hero-meta { gap: 4px; }
    .pld-hero-chip { font-size: 0.62rem; padding: 3px 9px; }

    .pld-category-header { padding: 12px 14px; }
    .pld-category-letter { width: 36px; height: 36px; font-size: 1rem; }
    .pld-category-title { font-size: 0.88rem; }
    .pld-category-body { padding: 12px; }

    .pld-grid,
    #dashboardLeaders .pld-grid-dashboard {
        grid-template-columns: 1fr;
    }

    .pld-card { min-height: auto; }
    .pld-type-section { margin-bottom: 18px; }
}

/* Reduce motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .pld-hero-icon,
    .pld-rank-1,
    .pld-card::before {
        animation: none !important;
    }
}

/* ================================================================
   WEEK HEADER (pestaña Líderes · Semana)
   ================================================================ */
.pld-week-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(10, 26, 43, 0.1);
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
}
.pld-week-header i {
    color: var(--bowl-gold);
    font-size: 0.95rem;
}
.pld-week-header.pld-week-warning {
    background: linear-gradient(135deg, #f39c12, #d68910);
}
.pld-week-header.pld-week-warning i {
    color: white;
}

/* ================================================================
   CATEGORY SECTIONS (pestaña Líderes)
   ================================================================ */
.pld-category-section {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(10, 26, 43, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.pld-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
    position: relative;
    overflow: hidden;
}
.pld-category-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.pld-category-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    font-weight: 900;
    font-size: 1.15rem;
    box-shadow: var(--shadow-gold);
    flex-shrink: 0;
}

.pld-category-title {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

.pld-category-body {
    padding: 18px 20px 20px;
}

/* ================================================================
   TYPE SECTIONS
   ================================================================ */
.pld-type-section {
    margin-bottom: 20px;
}
.pld-type-section:last-child {
    margin-bottom: 0;
}

.pld-type-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--bowl-navy);
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(246, 196, 69, 0.14), rgba(246, 196, 69, 0.04));
    border: 1px solid rgba(246, 196, 69, 0.3);
}
.pld-type-title i {
    color: var(--bowl-gold-dark);
    font-size: 0.85rem;
}

/* More badge (para empatados adicionales) */
.pld-more-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f8fafc, #f0f4fa);
    border: 2px dashed var(--gray-200);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all var(--transition);
    cursor: default;
}
.pld-more-badge:hover {
    border-color: var(--bowl-gold);
    color: var(--bowl-navy);
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 640px) {
    .pld-grid,
    #dashboardLeaders .pld-grid-dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .pld-card {
        min-height: 165px;
    }
    .pld-card.pld-compact {
        min-height: 155px;
    }
    .pld-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }
    .pld-card.pld-compact .pld-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.78rem;
    }
    .pld-name,
    .pld-card.pld-compact .pld-name {
        font-size: 0.8rem;
    }
    .pld-score-value {
        font-size: 1.5rem;
    }
    .pld-card.pld-compact .pld-score-value {
        font-size: 1.35rem;
    }
    .pld-rank {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
        top: 8px;
        right: 8px;
    }
    .pld-category-header {
        padding: 12px 16px;
    }
    .pld-category-letter {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    .pld-category-title {
        font-size: 0.92rem;
    }
    .pld-category-body {
        padding: 14px 12px 16px;
    }
    .pld-type-title {
        font-size: 0.78rem;
        padding: 4px 10px;
    }
}

@media (max-width: 400px) {
    .pld-grid,
    #dashboardLeaders .pld-grid-dashboard {
        grid-template-columns: 1fr;
    }
    .pld-card {
        min-height: auto;
    }
    .pld-avatar {
        width: 44px;
        height: 44px;
        font-size: 0.95rem;
    }
    .pld-score-value {
        font-size: 1.7rem;
    }
    .pld-category-body {
        padding: 12px 10px 14px;
    }
    .pld-type-section {
        margin-bottom: 16px;
    }
}

/* ================================================================
   MODAL DETALLES DEL ENCUENTRO — DISEÑO PREMIUM
   ================================================================ */

.pmd-modal-body {
    padding: 0 !important;
    background: #f4f6fa !important;
    overflow-x: hidden !important;
}

#matchDetailsModal .modal {
    max-width: 820px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
}

.pmd-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

/* ============================================================
   1. HERO VS
   ============================================================ */
.pmd-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #0a1a2b 0%, #1a2a3f 100%);
    color: white;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(10, 26, 43, 0.2);
}

.pmd-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(52, 152, 219, 0.25), transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(231, 76, 60, 0.25), transparent 50%);
    pointer-events: none;
}

.pmd-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.pmd-hero-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.pmd-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
}
.pmd-hero-badge i {
    color: var(--bowl-gold);
    font-size: 0.7rem;
}

/* --- Teams VS --- */
.pmd-hero-teams {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.pmd-hero-team {
    text-align: center;
}

.pmd-hero-team-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 1.4rem;
    margin: 0 auto 8px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    transition: transform var(--transition-bounce);
}
.pmd-hero-team-avatar:hover {
    transform: scale(1.05) rotate(-3deg);
}

.pmd-hero-team-name {
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -0.3px;
    word-break: break-word;
    margin-bottom: 2px;
}

.pmd-hero-team-role {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
}

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

.pmd-vs-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    box-shadow: var(--shadow-gold);
    border: 3px solid rgba(255, 255, 255, 0.15);
    letter-spacing: 1px;
}

/* --- Banner ganador --- */
.pmd-hero-banner {
    position: relative;
    z-index: 1;
    padding: 8px 18px;
    border-radius: 30px;
    text-align: center;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    margin-top: 4px;
}
.pmd-banner-home {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.2), rgba(39, 174, 96, 0.08));
    border: 1px solid rgba(39, 174, 96, 0.4);
    color: #5dd489;
}
.pmd-banner-away {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.2), rgba(39, 174, 96, 0.08));
    border: 1px solid rgba(39, 174, 96, 0.4);
    color: #5dd489;
}
.pmd-banner-tie {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(243, 156, 18, 0.08));
    border: 1px solid rgba(243, 156, 18, 0.4);
    color: #f0b254;
}

/* ============================================================
   2. SCORE BOARD
   ============================================================ */
.pmd-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    box-shadow: 0 4px 20px rgba(10, 26, 43, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.6);
    position: relative;
    overflow: hidden;
}
.pmd-scoreboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bowl-gold), var(--bowl-gold-light), var(--bowl-gold));
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.pmd-score-team {
    text-align: center;
}

.pmd-score-team-name {
    font-weight: 800;
    font-size: 0.82rem;
    margin-bottom: 6px;
    line-height: 1.2;
    word-break: break-word;
}

.pmd-score-pins {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--bowl-navy);
    line-height: 1;
    letter-spacing: -1.5px;
    margin-bottom: 4px;
}

.pmd-score-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 8px;
}

.pmd-score-chips {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

.pmd-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.pmd-chip-g {
    background: rgba(39, 174, 96, 0.15);
    color: #1e8449;
    border: 1px solid rgba(39, 174, 96, 0.3);
}
.pmd-chip-p {
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.pmd-score-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.pmd-series-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.pmd-series-badge.pmd-won {
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
    color: #a57917;
    border: 1px solid rgba(246, 196, 69, 0.5);
    box-shadow: 0 4px 12px rgba(246, 196, 69, 0.25);
}
.pmd-series-badge.pmd-tie {
    background: var(--gray-100);
    color: var(--text-muted);
    border: 1px solid var(--gray-200);
}

/* ============================================================
   3. SECCIONES GENÉRICAS
   ============================================================ */
.pmd-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: 0 2px 12px rgba(10, 26, 43, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.pmd-section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--bowl-navy);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px dashed var(--gray-200);
    letter-spacing: 0.2px;
}
.pmd-section-heading i {
    color: var(--bowl-gold-dark);
    font-size: 1rem;
}
.pmd-section-count {
    margin-left: auto;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    font-size: 0.7rem;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 20px;
    box-shadow: var(--shadow-gold);
}

/* ============================================================
   4. DESGLOSE DE PUNTOS
   ============================================================ */
.pmd-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pmd-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
}
.pmd-breakdown-row:hover {
    border-color: var(--bowl-gold);
    transform: translateX(3px);
}

.pmd-bd-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.pmd-bd-label > i {
    display: none;
}
.pmd-bd-label > span {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--bowl-navy);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pmd-bd-label > span::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bowl-gold);
    flex-shrink: 0;
}
.pmd-bd-label small {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    padding-left: 14px;
}

.pmd-bd-values {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}

.pmd-bd-home,
.pmd-bd-away {
    min-width: 56px;
    text-align: center;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.3px;
    padding: 4px 8px;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--gray-200);
}

/* Fila total */
.pmd-bd-total {
    background: linear-gradient(135deg, rgba(246, 196, 69, 0.15), rgba(246, 196, 69, 0.05));
    border-color: rgba(246, 196, 69, 0.5);
    padding: 12px 14px;
}
.pmd-bd-total .pmd-bd-label > span {
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}
.pmd-bd-total .pmd-bd-label > span::before {
    background: var(--bowl-gold-gradient);
    box-shadow: var(--shadow-gold);
}
.pmd-bd-total .pmd-bd-home,
.pmd-bd-total .pmd-bd-away {
    font-size: 1.3rem;
    background: white;
    border: 2px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Fila perdidos */
.pmd-bd-lost {
    background: linear-gradient(180deg, #fef5f5, #fbeaea);
    border-color: rgba(231, 76, 60, 0.3);
}
.pmd-bd-lost .pmd-bd-label > span::before {
    background: #e74c3c;
}
.pmd-bd-lost .pmd-bd-home,
.pmd-bd-lost .pmd-bd-away {
    color: #c0392b;
    background: white;
    border-color: rgba(231, 76, 60, 0.3);
}

/* ============================================================
   5. DETALLE POR LÍNEAS
   ============================================================ */
.pmd-lines-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pmd-line-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    background: white;
    transition: all var(--transition);
}
.pmd-line-card:hover {
    box-shadow: 0 6px 20px rgba(10, 26, 43, 0.08);
    border-color: var(--bowl-gold);
}

.pmd-line-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8fafc, #eef2f7);
    border-bottom: 2px solid var(--gray-200);
    flex-wrap: wrap;
}
.pmd-line-home {
    border-left: 4px solid #3498db;
}
.pmd-line-away {
    border-left: 4px solid #e74c3c;
}
.pmd-line-tie {
    border-left: 4px solid #95a5a6;
}

.pmd-line-num {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--bowl-navy);
    padding: 3px 10px;
    background: white;
    border-radius: 20px;
    border: 1px solid var(--gray-200);
}

.pmd-line-scores {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.3px;
}
.pmd-line-sep {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.9rem;
}

.pmd-line-winner {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.pmd-win-home {
    background: rgba(52, 152, 219, 0.15);
    color: #2176ae;
    border: 1px solid rgba(52, 152, 219, 0.3);
}
.pmd-win-away {
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
.pmd-win-tie {
    background: var(--gray-100);
    color: var(--text-muted);
    border: 1px solid var(--gray-200);
}

.pmd-line-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.pmd-line-side {
    padding: 0;
    border-right: 1px solid var(--gray-200);
}
.pmd-line-side:last-child {
    border-right: none;
}

.pmd-side-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    color: white;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.2px;
}
.pmd-side-header i {
    margin-right: 4px;
    font-size: 0.72rem;
    opacity: 0.9;
}
.pmd-side-total {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 900;
}

.pmd-side-players {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 60px;
}

/* --- Player rows --- */
.pmd-player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
}
.pmd-player-row:hover {
    border-color: var(--bowl-gold);
    transform: translateX(2px);
}

.pmd-player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.7rem;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.3px;
}
.pmd-avatar-ghost {
    background: linear-gradient(135deg, #9b59b6, #6a1b9a);
}

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

.pmd-player-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--bowl-navy);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pmd-player-sub {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 1px;
}
.pmd-sub-cat,
.pmd-sub-hdcp,
.pmd-sub-raw {
    white-space: nowrap;
}
.pmd-sub-cat {
    color: #2176ae;
}
.pmd-sub-hdcp {
    color: #6a1b9a;
}
.pmd-sub-raw {
    color: var(--text-muted);
    opacity: 0.8;
}

.pmd-player-score {
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: -0.3px;
    padding: 4px 10px;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--gray-200);
    min-width: 50px;
    text-align: center;
    flex-shrink: 0;
}
.pmd-score-ghost {
    color: #6a1b9a;
    background: linear-gradient(135deg, #faf5ff, #f3e5f5);
    border-color: #d1c4e9;
}

/* --- Ghost rows --- */
.pmd-ghost-row {
    background: linear-gradient(90deg, #f3e5f5, #faf5ff);
    border: 1.5px dashed #b39ddb;
    border-left: 4px solid #9b59b6;
}
.pmd-ghost-row:hover {
    border-color: #9b59b6;
}

.pmd-ghost-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    background: #9b59b6;
    color: white;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* --- No players --- */
.pmd-no-players {
    text-align: center;
    padding: 14px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    background: #f8f9fb;
    border-radius: 6px;
    border: 1px dashed var(--gray-200);
}

/* ============================================================
   6. ASISTENCIA Y UNIFORME
   ============================================================ */
.pmd-section-flags {
    padding: 14px 16px;
}

.pmd-flags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pmd-flag-card {
    border-left: 5px solid;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
    border-top: 1px solid var(--gray-200);
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.pmd-flag-team {
    font-weight: 800;
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pmd-flag-team i {
    font-size: 0.75rem;
    opacity: 0.85;
}

.pmd-flag-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pmd-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    align-self: flex-start;
}
.pmd-flag.ok {
    background: rgba(39, 174, 96, 0.12);
    color: #1e8449;
    border: 1px solid rgba(39, 174, 96, 0.25);
}
.pmd-flag.no {
    background: rgba(231, 76, 60, 0.1);
    color: #c0392b;
    border: 1px solid rgba(231, 76, 60, 0.25);
}
.pmd-flag i {
    font-size: 0.68rem;
}

/* ============================================================
   7. FOOTER INFO
   ============================================================ */
.pmd-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--bowl-navy), var(--bowl-navy-light));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(10, 26, 43, 0.15);
}
.pmd-footer i {
    color: var(--bowl-gold);
    font-size: 1rem;
}

/* ============================================================
   8. EMPTY STATE
   ============================================================ */
.pmd-empty {
    text-align: center;
    padding: 30px 20px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fafbfd, #f0f4fa);
    border: 2px dashed var(--gray-200);
}
.pmd-empty i {
    font-size: 2rem;
    color: var(--bowl-gold);
    margin-bottom: 10px;
    display: block;
    animation: float 3s ease-in-out infinite;
}
.pmd-empty p {
    color: var(--bowl-navy);
    font-weight: 800;
    margin: 0 0 4px;
    font-size: 0.95rem;
}
.pmd-empty small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .pmd-container {
        padding: 12px;
        gap: 12px;
    }

    .pmd-hero {
        padding: 14px;
    }
    .pmd-hero-team-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
    .pmd-hero-team-name {
        font-size: 0.85rem;
    }
    .pmd-vs-circle {
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
    }
    .pmd-hero-badge {
        font-size: 0.65rem;
        padding: 3px 9px;
    }
    .pmd-hero-banner {
        font-size: 0.78rem;
        padding: 6px 14px;
    }

    .pmd-scoreboard {
        padding: 16px 12px;
        gap: 8px;
    }
    .pmd-score-pins {
        font-size: 2rem;
    }
    .pmd-score-team-name {
        font-size: 0.72rem;
    }
    .pmd-score-label {
        font-size: 0.55rem;
        letter-spacing: 0.7px;
    }
    .pmd-series-badge {
        font-size: 0.62rem;
        padding: 4px 10px;
    }
    .pmd-chip {
        font-size: 0.6rem;
        padding: 2px 7px;
    }

    .pmd-section {
        padding: 14px;
    }
    .pmd-section-heading {
        font-size: 0.85rem;
    }

    .pmd-breakdown-row {
        padding: 8px 10px;
    }
    .pmd-bd-label > span {
        font-size: 0.78rem;
    }
    .pmd-bd-label small {
        font-size: 0.63rem;
    }
    .pmd-bd-home,
    .pmd-bd-away {
        min-width: 46px;
        font-size: 0.88rem;
        padding: 3px 6px;
    }
    .pmd-bd-total .pmd-bd-home,
    .pmd-bd-total .pmd-bd-away {
        font-size: 1.1rem;
    }

    .pmd-line-body {
        grid-template-columns: 1fr;
    }
    .pmd-line-side {
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }
    .pmd-line-side:last-child {
        border-bottom: none;
    }

    .pmd-line-header {
        padding: 8px 12px;
    }
    .pmd-line-scores {
        font-size: 1.05rem;
    }
    .pmd-line-num {
        font-size: 0.78rem;
    }
    .pmd-line-winner {
        font-size: 0.65rem;
        padding: 3px 9px;
    }

    .pmd-player-row {
        padding: 6px 8px;
        gap: 8px;
    }
    .pmd-player-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.62rem;
    }
    .pmd-player-name {
        font-size: 0.75rem;
    }
    .pmd-player-sub {
        font-size: 0.58rem;
    }
    .pmd-player-score {
        font-size: 1rem;
        min-width: 42px;
        padding: 3px 8px;
    }

    .pmd-flags {
        grid-template-columns: 1fr;
    }
    .pmd-flag-team {
        font-size: 0.78rem;
    }
    .pmd-flag {
        font-size: 0.68rem;
    }

    .pmd-footer {
        font-size: 0.68rem;
        padding: 10px 12px;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .pmd-hero-team-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
    .pmd-hero-team-name {
        font-size: 0.78rem;
    }
    .pmd-vs-circle {
        width: 36px;
        height: 36px;
        font-size: 0.78rem;
    }
    .pmd-score-pins {
        font-size: 1.7rem;
    }
    .pmd-score-team-name {
        font-size: 0.65rem;
    }
    .pmd-line-scores {
        font-size: 0.95rem;
    }
    .pmd-player-avatar {
        width: 24px;
        height: 24px;
        font-size: 0.55rem;
    }
    .pmd-player-name {
        font-size: 0.7rem;
    }
    .pmd-player-score {
        font-size: 0.9rem;
        min-width: 36px;
        padding: 2px 6px;
    }
    .pmd-bd-home,
    .pmd-bd-away {
        min-width: 40px;
        font-size: 0.8rem;
    }
    .pmd-bd-total .pmd-bd-home,
    .pmd-bd-total .pmd-bd-away {
        font-size: 1rem;
    }
}

/* ================================================================
   PESTAÑA POSICIONES — DISEÑO PREMIUM
   ================================================================ */

/* ============================================================
   1. TABLA DE EQUIPOS (Grupo A / B)
   ============================================================ */

#standingsA,
#standingsB {
    /* Reset */
}

/* Header con fondo navy mejorado */
#tabStandings .standings-table-detailed thead th {
    background: linear-gradient(135deg, #0a1a2b 0%, #1a2a3f 100%);
    color: white;
    padding: 14px 12px;
    font-size: 0.68rem;
    letter-spacing: 1px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 3px solid var(--bowl-gold);
    position: relative;
}
#tabStandings .standings-table-detailed thead th:first-child {
    border-radius: 12px 0 0 0;
}
#tabStandings .standings-table-detailed thead th:last-child {
    border-radius: 0 12px 0 0;
}

/* Fila de equipo premium */
.pst-row {
    transition: all var(--transition);
    cursor: default;
}
.pst-row:hover {
    background: linear-gradient(90deg, rgba(246,196,69,0.06), transparent) !important;
    transform: scale(1.005);
}

/* Rank cell */
.pst-rank-cell {
    width: 60px;
    text-align: center;
    padding: 12px 6px !important;
}

.pst-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: var(--text-muted);
    font-weight: 900;
    font-size: 0.85rem;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform var(--transition-bounce);
}
.pst-row:hover .pst-rank-badge {
    transform: scale(1.1);
}
.pst-rank-badge.pst-rank-1 {
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #7a5c00;
    font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(255,215,0,0.5);
    animation: pst-gold-glow 2.5s infinite;
}
.pst-rank-badge.pst-rank-2 {
    background: linear-gradient(135deg, #e8e8e8, #a8a8a8);
    color: #4a4a4a;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(192,192,192,0.5);
}
.pst-rank-badge.pst-rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a05a1f);
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(205,127,50,0.5);
}

@keyframes pst-gold-glow {
    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); }
}

/* Fila destacada para el top 3 */
.pst-row.pst-rank-1 {
    background: linear-gradient(90deg, rgba(255,215,0,0.12), rgba(255,215,0,0.02)) !important;
    border-left: 4px solid #ffd700;
}
.pst-row.pst-rank-2 {
    background: linear-gradient(90deg, rgba(192,192,192,0.1), transparent) !important;
    border-left: 4px solid #c0c0c0;
}
.pst-row.pst-rank-3 {
    background: linear-gradient(90deg, rgba(205,127,50,0.1), transparent) !important;
    border-left: 4px solid #cd7f32;
}

/* Team cell */
.pst-team-cell {
    padding: 12px 10px !important;
    text-align: left;
}
.pst-team-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pst-team-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid white;
}
.pst-team-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pst-team-name {
    font-weight: 800;
    color: var(--bowl-navy);
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pst-team-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.pst-team-meta i {
    color: var(--bowl-gold-dark);
    font-size: 0.6rem;
}

/* Points cell */
.pst-points-cell {
    text-align: center;
    padding: 12px 8px !important;
}
.pst-points-value {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(246,196,69,0.18), rgba(246,196,69,0.06));
    color: var(--bowl-gold-dark);
    border: 1px solid rgba(246,196,69,0.4);
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.3px;
}

.pst-points-lost-cell {
    text-align: center;
    padding: 12px 8px !important;
}
.pst-points-lost {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(231,76,60,0.08);
    color: #c0392b;
    border: 1px solid rgba(231,76,60,0.25);
    font-weight: 800;
    font-size: 0.9rem;
}

/* Pins cell */
.pst-pins-cell {
    text-align: right;
    padding: 12px 16px !important;
}
.pst-pins-value {
    font-weight: 900;
    font-size: 1rem;
    color: var(--bowl-navy);
    letter-spacing: -0.3px;
}
.pst-pins-unit {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
    font-weight: 700;
}

.pst-simple-cell {
    text-align: center;
    padding: 12px 8px !important;
    font-weight: 700;
    color: var(--bowl-navy);
    font-size: 0.9rem;
}

.pst-empty-cell {
    text-align: center;
    padding: 30px 12px !important;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* Responsive */
@media (max-width: 640px) {
    .pst-rank-badge {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    .pst-rank-badge.pst-rank-1,
    .pst-rank-badge.pst-rank-2,
    .pst-rank-badge.pst-rank-3 {
        font-size: 0.95rem;
    }
    .pst-team-name { font-size: 0.82rem; }
    .pst-team-meta { font-size: 0.58rem; }
    .pst-points-value { font-size: 0.85rem; padding: 3px 9px; }
    .pst-points-lost { font-size: 0.78rem; padding: 3px 9px; }
    .pst-pins-value { font-size: 0.85rem; }
    .pst-team-dot { width: 11px; height: 11px; }
}

/* ============================================================
   2. RANKING DE JUGADORES (Jugadores por Categoría)
   ============================================================ */

#playerRankings {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

/* Sección por categoría */
.prk-section {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(10,26,43,0.06);
    border: 1px solid rgba(226,232,240,0.6);
}

/* Header de categoría */
.prk-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f);
    color: white;
    position: relative;
    overflow: hidden;
}
.prk-section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.prk-cat-letter {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.3rem;
    color: white;
    border: 3px solid rgba(255,255,255,0.2);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.prk-section-title {
    flex: 1;
    min-width: 0;
}
.prk-section-main {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.2px;
}
.prk-section-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
    font-weight: 600;
}

.prk-section-count {
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: var(--shadow-gold);
    flex-shrink: 0;
}
.prk-section-count i {
    font-size: 0.7rem;
}

/* Tabla premium */
.prk-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.prk-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.prk-table thead th {
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    color: var(--text-secondary);
    padding: 12px 10px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    text-align: center;
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

.prk-th-rank { width: 56px; }
.prk-th-player { text-align: left !important; min-width: 200px; }
.prk-th-team { text-align: left !important; min-width: 140px; }
.prk-th-num { width: 90px; }
.prk-th-avg { width: 100px; }

/* Fila de jugador */
.prk-row {
    cursor: pointer;
    transition: all var(--transition);
    border-bottom: 1px solid var(--gray-100);
}
.prk-row:last-child {
    border-bottom: none;
}
.prk-row:hover {
    background: linear-gradient(90deg, rgba(246,196,69,0.06), transparent);
    transform: translateX(2px);
}

.prk-row.prk-rank-1 {
    background: linear-gradient(90deg, rgba(255,215,0,0.1), rgba(255,215,0,0.01));
    border-left: 4px solid #ffd700;
}
.prk-row.prk-rank-2 {
    background: linear-gradient(90deg, rgba(192,192,192,0.08), transparent);
    border-left: 4px solid #c0c0c0;
}
.prk-row.prk-rank-3 {
    background: linear-gradient(90deg, rgba(205,127,50,0.08), transparent);
    border-left: 4px solid #cd7f32;
}

/* Celdas */
.prk-rank-cell {
    text-align: center;
    padding: 12px 6px !important;
    width: 56px;
}
.prk-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: var(--text-muted);
    font-weight: 900;
    font-size: 0.85rem;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform var(--transition-bounce);
}
.prk-row:hover .prk-rank-badge {
    transform: scale(1.12) rotate(4deg);
}
.prk-rank-badge.prk-rank-1 {
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #7a5c00;
    box-shadow: 0 4px 14px rgba(255,215,0,0.5);
    animation: pst-gold-glow 2.5s infinite;
}
.prk-rank-badge.prk-rank-2 {
    background: linear-gradient(135deg, #e8e8e8, #a8a8a8);
    color: #4a4a4a;
    box-shadow: 0 4px 12px rgba(192,192,192,0.5);
}
.prk-rank-badge.prk-rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a05a1f);
    color: white;
    box-shadow: 0 4px 12px rgba(205,127,50,0.5);
}

/* Player cell */
.prk-player-cell {
    padding: 10px !important;
    text-align: left;
}
.prk-player-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.prk-player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform var(--transition-bounce);
}
.prk-row:hover .prk-player-avatar {
    transform: scale(1.06) rotate(-4deg);
}

.prk-player-info {
    min-width: 0;
    flex: 1;
}
.prk-player-name {
    font-weight: 800;
    color: var(--bowl-navy);
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}
.prk-player-meta {
    display: flex;
    gap: 5px;
    margin-top: 3px;
    flex-wrap: wrap;
}
.prk-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.prk-cat-mini-A {
    background: rgba(246,196,69,0.15);
    color: #a57917;
    border: 1px solid rgba(246,196,69,0.35);
}
.prk-cat-mini-B {
    background: rgba(52,152,219,0.15);
    color: #2176ae;
    border: 1px solid rgba(52,152,219,0.35);
}
.prk-cat-mini-C {
    background: rgba(39,174,96,0.15);
    color: #1e8449;
    border: 1px solid rgba(39,174,96,0.35);
}
.prk-eligible {
    background: rgba(39,174,96,0.12);
    color: #1e8449;
}
.prk-not-eligible {
    background: rgba(243,156,18,0.12);
    color: #d68910;
}

/* Team cell */
.prk-team-cell {
    padding: 10px !important;
    text-align: left;
}
.prk-team-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 6px currentColor;
}
.prk-team-name {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.82rem;
    vertical-align: middle;
}

/* Numeric cells */
.prk-num-cell {
    text-align: center;
    padding: 10px 8px !important;
}
.prk-num-value {
    font-weight: 800;
    color: var(--bowl-navy);
    font-size: 0.88rem;
}

/* Avg cell */
.prk-avg-cell {
    text-align: center;
    padding: 10px 8px !important;
}
.prk-avg-value {
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: -0.5px;
    padding: 3px 12px;
    border-radius: 20px;
    background: rgba(246,196,69,0.08);
    border: 1px solid currentColor;
    display: inline-block;
}

/* Best badge */
.prk-best-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--gray-100);
    color: var(--bowl-navy);
    font-weight: 800;
    font-size: 0.78rem;
    border: 1px solid var(--gray-200);
}
.prk-best-badge i {
    color: var(--bowl-gold-dark);
    font-size: 0.68rem;
}

/* Responsive */
@media (max-width: 640px) {
    .prk-section-header {
        padding: 14px 16px;
        gap: 10px;
    }
    .prk-cat-letter {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
    .prk-section-main { font-size: 0.92rem; }
    .prk-section-sub { font-size: 0.65rem; }
    .prk-section-count { font-size: 0.7rem; padding: 3px 10px; }

    .prk-table {
        min-width: 560px;
        font-size: 0.78rem;
    }
    .prk-table thead th {
        padding: 9px 6px;
        font-size: 0.58rem;
    }
    .prk-rank-badge {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    .prk-player-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.72rem;
    }
    .prk-player-name { font-size: 0.8rem; }
    .prk-avg-value { font-size: 0.9rem; padding: 2px 9px; }
    .prk-best-badge { font-size: 0.7rem; padding: 2px 8px; }
}

@media (max-width: 400px) {
    .prk-player-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.65rem;
    }
    .prk-player-name { font-size: 0.75rem; }
    .prk-team-name { font-size: 0.72rem; }
    .prk-num-value { font-size: 0.78rem; }
    .prk-avg-value { font-size: 0.85rem; }
    .prk-meta-badge { font-size: 0.55rem; padding: 1px 6px; }
}

/* ================================================================
   DASHBOARD PREMIUM — BANNERS, CAMPEONES Y EQUIPOS
   ================================================================ */

/* --- Hero banner reutilizable --- */
.dsh-hero-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f);
    color: white;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    margin: 20px 0 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(10,26,43,0.15);
}
.dsh-hero-banner:first-child {
    margin-top: 0;
}
.dsh-hero-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}
.dsh-hero-banner i {
    color: var(--bowl-gold);
    font-size: 1.3rem;
}
.dsh-hero-teams {
    background: linear-gradient(135deg, #1a2a3a, #2c3e50);
}

/* --- Secciones de campeones --- */
.dsh-champion-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 4px 20px rgba(10,26,43,0.06);
    border: 1px solid rgba(226,232,240,0.6);
}

.dsh-champion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-left: 5px solid var(--bowl-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: linear-gradient(90deg, #f8fafc, #eef2f7);
    margin-bottom: 14px;
}

.dsh-champion-cat {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    flex-shrink: 0;
    border: 2px solid white;
}

.dsh-champion-title { flex: 1; min-width: 0; }
.dsh-champion-main {
    font-weight: 800;
    color: var(--bowl-navy);
    font-size: 1rem;
    letter-spacing: -0.2px;
}
.dsh-champion-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
}

.dsh-champion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

/* --- Card de campeón --- */
.dsh-champion-card {
    position: relative;
    padding: 16px 12px;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-bounce);
    border: 2px solid;
    overflow: hidden;
}
.dsh-champion-card:hover {
    transform: translateY(-4px) scale(1.02);
}

.dsh-champ-1 {
    background: linear-gradient(180deg, #fff8e7, #fff3d6);
    border-color: #FFD700;
    box-shadow: 0 4px 14px rgba(255,215,0,0.25);
}
.dsh-champ-2 {
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    border-color: #C0C0C0;
    box-shadow: 0 4px 14px rgba(192,192,192,0.2);
}
.dsh-champ-3 {
    background: linear-gradient(180deg, #fef6ee, #fbe9d8);
    border-color: #CD7F32;
    box-shadow: 0 4px 14px rgba(205,127,50,0.2);
}
.dsh-champ-topgame {
    background: linear-gradient(180deg, #e8f4fd, #d6ebf9);
    border-color: #3498db;
    box-shadow: 0 4px 14px rgba(52,152,219,0.2);
}

.dsh-champion-icon {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 6px;
}
.dsh-champion-label {
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--bowl-navy);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.dsh-champ-1 .dsh-champion-label { color: #a57917; }
.dsh-champ-2 .dsh-champion-label { color: #6b6b6b; }
.dsh-champ-3 .dsh-champion-label { color: #a05a1f; }
.dsh-champ-topgame .dsh-champion-label { color: #2176ae; }

.dsh-champion-name {
    font-weight: 800;
    color: var(--bowl-navy);
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsh-champion-avg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(10,26,43,0.06);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.dsh-champion-avg i {
    color: var(--bowl-gold-dark);
    font-size: 0.65rem;
}
.dsh-champion-team {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsh-champion-score {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--bowl-gold-dark);
    letter-spacing: -1px;
    line-height: 1;
    margin: 4px 0;
}
.dsh-champion-card .dsh-champion-sub {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Clasificación final por equipos --- */
.dsh-teams-final {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(10,26,43,0.06);
    border: 1px solid rgba(226,232,240,0.6);
}

.dsh-team-final-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
    transition: all var(--transition);
}
.dsh-team-final-row:last-child {
    border-bottom: none;
}
.dsh-team-final-row:hover {
    transform: translateX(3px);
    background: linear-gradient(90deg, rgba(246,196,69,0.06), transparent) !important;
}

.dsh-team-final-rank {
    min-width: 120px;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}

.dsh-team-final-info {
    flex: 1;
    min-width: 0;
}
.dsh-team-final-name {
    font-weight: 800;
    color: var(--bowl-navy);
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsh-team-final-players {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 600;
}
.dsh-team-final-players i {
    color: var(--bowl-gold-dark);
    margin-right: 4px;
}

.dsh-team-trophy {
    font-size: 2rem;
    filter: drop-shadow(0 4px 8px rgba(255,215,0,0.4));
}

/* --- Mensaje final --- */
.dsh-final-message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc, #eef2f7);
    border-radius: var(--radius-lg);
    border-left: 5px solid var(--bowl-gold);
    box-shadow: 0 4px 16px rgba(10,26,43,0.05);
}
.dsh-final-message i {
    color: var(--bowl-gold-dark);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.dsh-final-message span {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 500;
}

/* ================================================================
   ENCUENTROS PREMIUM
   ================================================================ */

#matchesList { display: block !important; }

/* --- Empty state --- */
.mtc-empty {
    text-align: center;
    padding: 50px 24px;
    background: linear-gradient(180deg, #fafbfd, #f0f4fa);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--gray-200);
}
.mtc-empty i {
    font-size: 3rem;
    color: var(--bowl-gold);
    display: block;
    margin-bottom: 14px;
    animation: float 3s ease-in-out infinite;
}
.mtc-empty p {
    font-weight: 800;
    color: var(--bowl-navy);
    margin: 0 0 4px;
    font-size: 1.1rem;
}
.mtc-empty small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* --- Banner semana --- */
.mtc-week-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f);
    color: white;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(10,26,43,0.15);
    position: relative;
    overflow: hidden;
}
.mtc-week-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

.mtc-week-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.mtc-week-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    box-shadow: var(--shadow-gold);
}
.mtc-week-badge i {
    font-size: 0.85rem;
}
.mtc-week-date {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    text-transform: capitalize;
}

.mtc-week-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mtc-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    border: 1px solid;
}
.mtc-stat-total {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: white;
}
.mtc-stat-done {
    background: rgba(39,174,96,0.2);
    border-color: rgba(39,174,96,0.4);
    color: #5dd489;
}
.mtc-stat-pending {
    background: rgba(243,156,18,0.2);
    border-color: rgba(243,156,18,0.4);
    color: #f0b254;
}

/* --- Grid de cards --- */
.mtc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
}

/* --- Card de partido --- */
.mtc-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(10,26,43,0.06);
    border: 1px solid rgba(226,232,240,0.6);
    transition: all var(--transition-bounce);
    display: flex;
    flex-direction: column;
    position: relative;
}
.mtc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(10,26,43,0.14);
    border-color: var(--bowl-gold);
}

/* Borde superior por estado */
.mtc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bowl-gold), var(--bowl-gold-light), var(--bowl-gold));
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
    z-index: 2;
}
.mtc-card-done::before {
    background: linear-gradient(90deg, #27ae60, #58d68d, #27ae60);
    background-size: 200% 100%;
}
.mtc-card-pending::before {
    background: linear-gradient(90deg, #f39c12, #f0b254, #f39c12);
    background-size: 200% 100%;
}

/* --- Head --- */
.mtc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--gray-100);
    background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
}
.mtc-head-left,
.mtc-head-right {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.mtc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border: 1px solid;
}
.mtc-badge i { font-size: 0.65rem; }

.mtc-badge-week {
    background: rgba(10,26,43,0.08);
    color: var(--bowl-navy);
    border-color: rgba(10,26,43,0.15);
}
.mtc-badge-lane {
    background: rgba(246,196,69,0.15);
    color: #a57917;
    border-color: rgba(246,196,69,0.35);
}
.mtc-badge-time {
    background: rgba(52,152,219,0.12);
    color: #2176ae;
    border-color: rgba(52,152,219,0.3);
}
.mtc-badge-final {
    background: linear-gradient(135deg, #f39c12, #d68910);
    color: white;
    border-color: transparent;
    animation: pulseGold 2s infinite;
}
.mtc-badge-done {
    background: rgba(39,174,96,0.15);
    color: #1e8449;
    border-color: rgba(39,174,96,0.35);
}
.mtc-badge-pending {
    background: rgba(243,156,18,0.15);
    color: #d68910;
    border-color: rgba(243,156,18,0.35);
}

/* --- Teams --- */
.mtc-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 18px 14px;
}

.mtc-team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
    min-width: 0;
}
.mtc-team-winner {
    background: linear-gradient(180deg, rgba(246,196,69,0.12), rgba(246,196,69,0.03));
    border-color: var(--bowl-gold);
    box-shadow: 0 4px 12px rgba(246,196,69,0.2);
}
.mtc-team-away {
    flex-direction: row-reverse;
    text-align: right;
}
.mtc-team-away .mtc-team-info {
    align-items: flex-end;
}

.mtc-team-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 0.9rem;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    border: 2px solid white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    transition: transform var(--transition-bounce);
}
.mtc-card:hover .mtc-team-avatar {
    transform: scale(1.06) rotate(-4deg);
}

.mtc-team-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.mtc-team-name {
    font-weight: 900;
    font-size: 0.92rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}
.mtc-team-role {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    color: var(--text-muted);
}
.mtc-team-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
    justify-content: flex-start;
}
.mtc-team-away .mtc-team-score {
    justify-content: flex-end;
}
.mtc-pins {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}
.mtc-pins-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.mtc-team-points {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.mtc-team-away .mtc-team-points {
    justify-content: flex-end;
}
.mtc-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.mtc-chip-g {
    background: rgba(39,174,96,0.15);
    color: #1e8449;
}
.mtc-chip-p {
    background: rgba(231,76,60,0.12);
    color: #c0392b;
}

/* VS */
.mtc-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mtc-vs-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    box-shadow: var(--shadow-gold);
    border: 3px solid white;
    letter-spacing: 0.5px;
    transition: transform var(--transition-bounce);
}
.mtc-card:hover .mtc-vs-circle {
    transform: scale(1.1) rotate(-6deg);
}

/* --- Winner banner --- */
.mtc-winner-banner {
    margin: 0 14px 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.mtc-winner-banner i {
    font-size: 0.9rem;
}
.mtc-winner-banner strong {
    font-weight: 900;
}
.mtc-winner-tie {
    background: var(--gray-100);
    color: var(--text-muted);
    border-color: var(--gray-200);
}

/* --- Líneas --- */
.mtc-lines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 14px 14px;
    padding: 10px;
    background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.mtc-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 10px;
    background: white;
    border: 2px solid var(--gray-200);
    transition: all var(--transition);
}
.mtc-line-won {
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transform: scale(1.02);
}
.mtc-line-num {
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}
.mtc-line-scores {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.mtc-line-sep {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}
.mtc-line-icon {
    font-size: 0.85rem;
    line-height: 1;
}

/* --- Foot --- */
.mtc-foot {
    margin-top: auto;
    padding: 12px 14px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, transparent, rgba(246,196,69,0.03));
}
.mtc-foot-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mtc-foot-date i {
    color: var(--bowl-gold-dark);
    font-size: 0.7rem;
}

.mtc-btn-details {
    padding: 6px 14px !important;
    min-height: 32px !important;
    font-size: 0.72rem !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f) !important;
    box-shadow: 0 3px 10px rgba(10,26,43,0.15) !important;
    transition: all var(--transition-bounce) !important;
}
.mtc-btn-details:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 16px rgba(10,26,43,0.25) !important;
}

.mtc-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mtc-actions .btn {
    width: auto;
    padding: 6px 12px;
    min-height: 32px;
    font-size: 0.72rem;
    border-radius: 20px;
}

/* ================================================================
   RESPONSIVE — Dashboard y Encuentros
   ================================================================ */
@media (max-width: 768px) {
    .mtc-grid {
        grid-template-columns: 1fr;
    }
    .mtc-week-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .mtc-week-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .mtc-week-stats {
        justify-content: flex-start;
    }
    .dsh-champion-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dsh-team-final-rank {
        min-width: 90px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .mtc-teams {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 12px;
    }
    .mtc-team-away {
        flex-direction: row;
        text-align: left;
    }
    .mtc-team-away .mtc-team-info { align-items: flex-start; }
    .mtc-team-away .mtc-team-score { justify-content: flex-start; }
    .mtc-team-away .mtc-team-points { justify-content: flex-start; }
    .mtc-vs-circle {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }
    .mtc-team-avatar {
        width: 38px;
        height: 38px;
        font-size: 0.78rem;
    }
    .mtc-team-name { font-size: 0.82rem; }
    .mtc-pins { font-size: 1.3rem; }

    .mtc-lines {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        padding: 8px 6px;
    }
    .mtc-line { padding: 6px 2px; }
    .mtc-line-scores { font-size: 0.78rem; }

    .dsh-champion-grid {
        grid-template-columns: 1fr;
    }
    .dsh-champion-icon { font-size: 1.8rem; }
    .dsh-champion-name { font-size: 0.92rem; }
    .dsh-team-final-row {
        flex-wrap: wrap;
        padding: 12px 14px;
    }
    .dsh-team-final-rank {
        min-width: 100%;
        font-size: 0.72rem;
        margin-bottom: 4px;
    }
    .dsh-team-trophy { font-size: 1.5rem; }
}

@media (max-width: 400px) {
    .mtc-badge {
        font-size: 0.6rem;
        padding: 3px 8px;
    }
    .mtc-week-badge { font-size: 0.78rem; padding: 6px 12px; }
    .mtc-week-date { font-size: 0.78rem; }
    .mtc-stat-chip { font-size: 0.65rem; padding: 4px 9px; }
    .mtc-winner-banner { font-size: 0.72rem; padding: 8px 12px; }
    .mtc-line-num { font-size: 0.52rem; }
    .mtc-line-scores { font-size: 0.72rem; }
}

/* ================================================================
   PRÓXIMAS ASIGNACIONES (Dashboard) — Diseño Premium
   ================================================================ */

/* --- Empty state --- */
.nxa-empty {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(180deg, #fafbfd, #f0f4fa);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--gray-200);
}
.nxa-empty i {
    font-size: 2.4rem;
    color: var(--bowl-gold);
    display: block;
    margin-bottom: 12px;
    animation: float 3s ease-in-out infinite;
}
.nxa-empty p {
    font-weight: 800;
    color: var(--bowl-navy);
    margin: 0 0 4px;
    font-size: 1rem;
}
.nxa-empty small {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.nxa-empty.nxa-end i {
    color: var(--bowl-navy);
    animation: none;
}

/* --- Header semana --- */
.nxa-week-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f);
    color: white;
    box-shadow: 0 6px 18px rgba(10, 26, 43, 0.15);
    position: relative;
    overflow: hidden;
}
.nxa-week-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}
.nxa-week-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 30px;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    font-weight: 900;
    font-size: 0.85rem;
    box-shadow: var(--shadow-gold);
    flex-shrink: 0;
}
.nxa-week-badge i { font-size: 0.8rem; }
.nxa-week-date {
    flex: 1;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    text-transform: capitalize;
    min-width: 0;
}
.nxa-week-count {
    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.2);
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* --- Lista --- */
.nxa-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Card de encuentro --- */
.nxa-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: 0 2px 10px rgba(10, 26, 43, 0.05);
    border-left: 5px solid var(--bowl-gold);
    border-top: 1px solid rgba(226, 232, 240, 0.6);
    border-right: 1px solid rgba(226, 232, 240, 0.6);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nxa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(10, 26, 43, 0.1);
    border-left-color: var(--bowl-gold-dark);
}

.nxa-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.nxa-badge-lane,
.nxa-badge-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.nxa-badge-lane {
    background: linear-gradient(135deg, rgba(246,196,69,0.2), rgba(246,196,69,0.08));
    color: #a57917;
    border: 1px solid rgba(246,196,69,0.4);
}
.nxa-badge-lane i { font-size: 0.65rem; }
.nxa-badge-time {
    background: rgba(52,152,219,0.1);
    color: #2176ae;
    border: 1px solid rgba(52,152,219,0.25);
}
.nxa-badge-time i { font-size: 0.65rem; }

.nxa-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}
.nxa-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.nxa-team-away {
    flex-direction: row-reverse;
    text-align: right;
}
.nxa-team-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.72rem;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform var(--transition-bounce);
}
.nxa-card:hover .nxa-team-avatar {
    transform: scale(1.08) rotate(-4deg);
}
.nxa-team-name {
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.nxa-vs {
    font-weight: 900;
    color: var(--bowl-gold);
    font-size: 0.8rem;
    padding: 0 4px;
    flex-shrink: 0;
}

.nxa-footer {
    text-align: center;
    margin-top: 12px;
}
.nxa-footer .btn {
    width: auto;
    padding: 8px 24px;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .nxa-week-header {
        padding: 10px 12px;
        gap: 8px;
    }
    .nxa-week-badge { font-size: 0.75rem; padding: 5px 12px; }
    .nxa-week-date { font-size: 0.72rem; flex: 1 1 100%; }
    .nxa-week-count { font-size: 0.65rem; padding: 3px 9px; }
    .nxa-card { padding: 10px 12px; }
    .nxa-team-avatar { width: 28px; height: 28px; font-size: 0.65rem; }
    .nxa-team-name { font-size: 0.78rem; }
    .nxa-badge-lane,
    .nxa-badge-time { font-size: 0.62rem; padding: 2px 8px; }
}


/* ================================================================
   FIXES PARA iOS / iPHONE MINI / SAFARI
   ================================================================ */

/* ---- 1. Viewport height fix (iOS Safari 100vh issue) ---- */
html, body {
    min-height: 100vh;
    min-height: 100dvh; /* Modern browsers */
    min-height: -webkit-fill-available; /* iOS Safari */
}

/* ---- 2. Safe area insets (iPhone notch / home indicator) ---- */
.navbar {
    padding-top: max(var(--spacing-5), env(safe-area-inset-top, 0px));
    padding-left: max(var(--spacing-5), env(safe-area-inset-left, 0px));
    padding-right: max(var(--spacing-5), env(safe-area-inset-right, 0px));
}

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

.tabs-container {
    padding-left: max(var(--spacing-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--spacing-4), env(safe-area-inset-right, 0px));
}

.footer {
    padding-bottom: max(var(--spacing-4), env(safe-area-inset-bottom, 0px));
}

/* Modales: dejar margen para notch/barra inferior */
.modal-overlay {
    padding-top: max(var(--spacing-5), env(safe-area-inset-top, 0px));
    padding-bottom: max(var(--spacing-5), env(safe-area-inset-bottom, 0px));
}

/* Sticky footers dentro de modales: sumar safe-area */
.score-modal-sticky-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* ---- 3. Prevenir zoom automático en iOS (inputs con font-size >= 16px) ---- */
@media screen and (max-width: 768px) {
    input,
    select,
    textarea,
    .input-group input,
    .input-group select,
    .input-group textarea,
    .pmp-team-search,
    .pmp-team-select,
    .pmp-stepper input,
    .score-input-premium,
    .tscp-select,
    .ghost-select,
    .form-select,
    #playerSearch,
    #categoryFilter,
    #teamFilter,
    #weekSelector,
    #standingsViewMode,
    #seasonSelector,
    #adminWeekSelector,
    #weekDateSelect,
    #weekDateInput {
        font-size: 16px !important;
        /* Evita que iOS haga zoom al enfocar */
    }

    /* Excepción: monospace o muy específicos */
    .score-tips kbd {
        font-size: 0.75rem !important;
    }
}

/* ---- 4. Smooth scrolling iOS ---- */
.tab-content,
.modal-body,
.score-modal-sticky-footer,
#matchesList,
#dashboardStandings,
#playerRankings,
.pdp-container,
.pmd-container,
.pld-grid,
.mtc-grid,
.nxa-list {
    -webkit-overflow-scrolling: touch;
}

/* ---- 5. Fix tap highlight azul en iOS ---- */
* {
    -webkit-tap-highlight-color: rgba(246, 196, 69, 0.15);
}

button, a, .nxa-card, .mtc-card, .pld-card, .player-card, .pdp-match-row, .pst-row, .prk-row {
    -webkit-tap-highlight-color: rgba(246, 196, 69, 0.2);
    cursor: pointer;
}

/* ---- 6. Fix 300ms tap delay en iOS (opcional) ---- */
button, a, input, select, textarea {
    touch-action: manipulation;
}

/* ---- 7. iPhone mini (375x812) y SE (375x667) ajustes finos ---- */
@media screen and (max-width: 390px) {

    /* --- Login --- */
    .login-box {
        padding: 26px 18px;
        max-width: 100%;
    }
    .league-logo {
        width: 100px;
        height: 100px;
        border-width: 4px;
    }
    .login-box h2 { font-size: 1.5rem; }
    .login-box h2 span { font-size: 0.95rem; }
    .login-subtitle { font-size: 0.78rem; letter-spacing: 1.2px; }
    .login-tag { font-size: 0.78rem; padding: 10px 20px; }

    /* --- Navbar --- */
    .navbar { padding: 8px 10px; }
    .nav-logo-img { width: 34px; height: 34px; }
    .nav-logo-text h1 { font-size: 0.78rem; line-height: 1.1; }
    .nav-logo-text span { font-size: 0.55rem; }
    .user-info-container {
        padding: 3px 8px 3px 10px;
        gap: 6px;
        border-radius: 20px;
    }
    .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; }

    /* Selector de temporada */
    .season-selector-container select {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        max-width: 100% !important;
    }

    /* --- Tabs --- */
    .tabs-header { padding: 5px 3px; gap: 3px; }
    .tab-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
        gap: 4px;
    }
    .tab-btn i { font-size: 0.85rem; }

    /* --- Cards y secciones --- */
    .card { border-radius: 12px; }
    .card-header { padding: 12px 14px; font-size: 0.85rem; }
    .card-body { padding: 12px 14px; }

    /* --- Tablas: forzar scroll horizontal cómodo --- */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .table-responsive table {
        font-size: 0.75rem;
    }

    /* --- Match cards (encuentros) --- */
    .mtc-teams {
        grid-template-columns: 1fr auto 1fr;
        gap: 5px;
        padding: 12px 10px;
    }
    .mtc-team {
        padding: 8px 9px;
        gap: 7px;
        flex-direction: column;
        text-align: center;
    }
    .mtc-team-away {
        flex-direction: column;
        text-align: center;
    }
    .mtc-team-away .mtc-team-info { align-items: center; }
    .mtc-team-away .mtc-team-score { justify-content: center; }
    .mtc-team-away .mtc-team-points { justify-content: center; }
    .mtc-team-info { align-items: center; gap: 2px; }
    .mtc-team-avatar {
        width: 36px; height: 36px;
        font-size: 0.75rem;
    }
    .mtc-team-name { font-size: 0.75rem; text-align: center; }
    .mtc-team-role { font-size: 0.55rem; letter-spacing: 0.8px; }
    .mtc-pins { font-size: 1.25rem; }
    .mtc-vs-circle { width: 32px; height: 32px; font-size: 0.7rem; }
    .mtc-badge { font-size: 0.6rem; padding: 3px 8px; }

    .mtc-lines {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px;
    }
    .mtc-line {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 12px;
        gap: 8px;
    }
    .mtc-line-num { min-width: 32px; }
    .mtc-line-scores { font-size: 0.85rem; }
    .mtc-line-icon { font-size: 1rem; }

    /* --- Líderes --- */
    .pld-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pld-card { min-height: 150px; }
    .pld-avatar { width: 36px; height: 36px; font-size: 0.75rem; }
    .pld-name { font-size: 0.75rem; }
    .pld-score-value { font-size: 1.4rem; }
    .pld-rank { width: 26px; height: 26px; font-size: 0.8rem; }
    .pld-card-header { padding: 10px 10px 8px; }
    .pld-card-body { padding: 10px; gap: 8px; }
    .pld-card-footer { padding: 8px 10px 10px; }

    /* --- Jugadores --- */
    .player-card { padding: 12px; }
    .player-card > div:first-child > div:first-child {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
    }
    .players-grid { grid-template-columns: 1fr; }

    /* --- Modales --- */
    .modal {
        border-radius: 16px;
        max-height: 92vh;
    }
    .modal-header {
        padding: 12px 14px;
        border-radius: 16px 16px 0 0;
    }
    .modal-title { font-size: 0.95rem; }
    .modal-close { width: 34px; height: 34px; font-size: 1rem; }
    .modal-body { padding: 14px 12px; }
    .modal-footer {
        padding: 10px 12px;
        border-radius: 0 0 16px 16px;
    }
    .modal-footer .btn {
        flex: 1 1 100%;
        min-height: 44px;
        font-size: 0.85rem;
    }

    /* --- Modal jugador premium --- */
    .pdp-container { padding: 10px; gap: 10px; }
    .pdp-hero { padding: 14px 12px; }
    .pdp-hero-avatar {
        width: 52px; height: 52px;
        font-size: 1.15rem;
        border-width: 3px;
    }
    .pdp-hero-cat-badge {
        width: 24px; height: 24px;
        font-size: 0.7rem;
        border-width: 2px;
    }
    .pdp-hero-name { font-size: 1.05rem; }
    .pdp-hero-meta { gap: 5px; }
    .pdp-hero-team,
    .pdp-hero-pos,
    .pdp-hero-eligible,
    .pdp-hero-not-eligible {
        font-size: 0.68rem;
        padding: 3px 9px;
    }
    .pdp-hero-avg {
        min-width: 100%;
        padding: 8px 12px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }
    .pdp-hero-avg-value { font-size: 1.7rem; }
    .pdp-hero-avg-label,
    .pdp-hero-avg-hdcp {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        text-align: right;
    }

    .pdp-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .pdp-stat-card { padding: 10px 6px; }
    .pdp-stat-icon { width: 30px; height: 30px; font-size: 0.85rem; }
    .pdp-stat-value { font-size: 1.15rem; }
    .pdp-stat-avg .pdp-stat-value { font-size: 1.25rem; }
    .pdp-stat-label { font-size: 0.55rem; }

    .pdp-best-grid { grid-template-columns: 1fr; gap: 8px; }
    .pdp-best-card { padding: 12px 14px; gap: 10px; }
    .pdp-best-icon { width: 38px; height: 38px; font-size: 1.05rem; }
    .pdp-best-value { font-size: 1.5rem; }
    .pdp-best-label { font-size: 0.62rem; }

    .pdp-section { padding: 12px; }
    .pdp-section-heading { font-size: 0.8rem; padding-bottom: 8px; margin-bottom: 10px; }

    .pdp-match-row { padding: 10px 10px 10px 12px; }
    .pdp-badge { font-size: 0.58rem; padding: 2px 7px; }
    .pdp-chip { padding: 4px 9px 4px 5px; gap: 4px; }
    .pdp-chip-line { width: 16px; height: 16px; font-size: 0.55rem; }
    .pdp-chip-score { font-size: 0.72rem; }
    .pdp-match-vs { font-size: 0.75rem; gap: 5px; }
    .pdp-team-name { font-size: 0.75rem; }
    .pdp-match-avg { font-size: 0.65rem; }
    .pdp-series-result { font-size: 0.62rem; padding: 2px 8px; }

    /* --- Modal encuentro premium --- */
    .pmd-container { padding: 10px; gap: 10px; }
    .pmd-hero { padding: 12px; }
    .pmd-hero-team-avatar {
        width: 42px; height: 42px;
        font-size: 0.95rem;
        border-width: 2px;
    }
    .pmd-hero-team-name { font-size: 0.78rem; }
    .pmd-hero-team-role { font-size: 0.55rem; letter-spacing: 1px; }
    .pmd-vs-circle { width: 36px; height: 36px; font-size: 0.78rem; }
    .pmd-hero-badge { font-size: 0.6rem; padding: 3px 8px; }
    .pmd-hero-banner { font-size: 0.72rem; padding: 6px 12px; }

    .pmd-scoreboard { padding: 14px 10px; gap: 6px; }
    .pmd-score-pins { font-size: 1.7rem; }
    .pmd-score-team-name { font-size: 0.65rem; }
    .pmd-score-label { font-size: 0.5rem; letter-spacing: 0.5px; }
    .pmd-series-badge { font-size: 0.58rem; padding: 3px 9px; }
    .pmd-chip { font-size: 0.58rem; padding: 2px 7px; }

    .pmd-section { padding: 12px 10px; }
    .pmd-section-heading { font-size: 0.8rem; }
    .pmd-breakdown-row { padding: 8px 8px; gap: 8px; }
    .pmd-bd-label > span { font-size: 0.72rem; }
    .pmd-bd-label small { font-size: 0.58rem; }
    .pmd-bd-home,
    .pmd-bd-away {
        min-width: 42px;
        font-size: 0.82rem;
        padding: 3px 5px;
    }
    .pmd-bd-total .pmd-bd-home,
    .pmd-bd-total .pmd-bd-away { font-size: 1rem; }

    .pmd-line-header { padding: 8px 10px; }
    .pmd-line-num { font-size: 0.72rem; }
    .pmd-line-scores { font-size: 1rem; }
    .pmd-line-winner { font-size: 0.6rem; padding: 2px 8px; }
    .pmd-side-header { padding: 6px 10px; font-size: 0.72rem; }
    .pmd-side-total { font-size: 0.78rem; padding: 1px 8px; }
    .pmd-player-row { padding: 6px 8px; gap: 7px; }
    .pmd-player-avatar { width: 26px; height: 26px; font-size: 0.58rem; }
    .pmd-player-name { font-size: 0.72rem; }
    .pmd-player-sub { font-size: 0.55rem; gap: 4px; }
    .pmd-player-score { font-size: 0.95rem; min-width: 38px; padding: 3px 7px; }

    .pmd-flag-card { padding: 10px 12px; }
    .pmd-flag-team { font-size: 0.75rem; }
    .pmd-flag { font-size: 0.65rem; padding: 3px 9px; }
    .pmd-footer { font-size: 0.65rem; padding: 10px 12px; }

    /* --- Próximas asignaciones --- */
    .nxa-week-header { padding: 10px 12px; gap: 6px; }
    .nxa-week-badge { font-size: 0.72rem; padding: 5px 11px; }
    .nxa-week-date { font-size: 0.7rem; flex-basis: 100%; }
    .nxa-week-count { font-size: 0.62rem; padding: 3px 8px; }
    .nxa-card { padding: 10px 12px; gap: 8px; }
    .nxa-team-avatar { width: 28px; height: 28px; font-size: 0.65rem; }
    .nxa-team-name { font-size: 0.75rem; }
    .nxa-vs { font-size: 0.72rem; }
    .nxa-badge-lane,
    .nxa-badge-time { font-size: 0.6rem; padding: 2px 7px; }

    /* --- Posiciones premium --- */
    .pst-rank-badge { width: 26px; height: 26px; font-size: 0.7rem; }
    .pst-rank-badge.pst-rank-1,
    .pst-rank-badge.pst-rank-2,
    .pst-rank-badge.pst-rank-3 { font-size: 0.85rem; }
    .pst-team-name { font-size: 0.78rem; }
    .pst-team-meta { font-size: 0.55rem; }
    .pst-team-dot { width: 10px; height: 10px; }
    .pst-points-value { font-size: 0.78rem; padding: 2px 8px; }
    .pst-points-lost { font-size: 0.72rem; padding: 2px 8px; }
    .pst-pins-value { font-size: 0.8rem; }
    .pst-pins-unit { display: none; }

    .prk-player-avatar { width: 32px; height: 32px; font-size: 0.68rem; }
    .prk-player-name { font-size: 0.75rem; }
    .prk-rank-badge { width: 26px; height: 26px; font-size: 0.7rem; }
    .prk-avg-value { font-size: 0.85rem; padding: 2px 8px; }
    .prk-best-badge { font-size: 0.68rem; padding: 2px 7px; }
    .prk-section-header { padding: 12px 12px; gap: 8px; }
    .prk-cat-letter { width: 34px; height: 34px; font-size: 1rem; }
    .prk-section-main { font-size: 0.88rem; }
    .prk-section-sub { font-size: 0.6rem; }
    .prk-section-count { font-size: 0.65rem; padding: 3px 9px; }

    /* --- Dashboard campeones --- */
    .dsh-hero-banner {
        padding: 12px 14px;
        font-size: 0.85rem;
        gap: 8px;
    }
    .dsh-hero-banner i { font-size: 1.1rem; }
    .dsh-champion-header { padding: 8px 12px; gap: 10px; }
    .dsh-champion-cat { width: 32px; height: 32px; font-size: 1rem; }
    .dsh-champion-main { font-size: 0.88rem; }
    .dsh-champion-sub { font-size: 0.65rem; }
    .dsh-champion-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dsh-champion-card { padding: 12px 8px; }
    .dsh-champion-icon { font-size: 1.6rem; }
    .dsh-champion-name { font-size: 0.82rem; }
    .dsh-champion-label { font-size: 0.58rem; }
    .dsh-champion-score { font-size: 1.4rem; }
    .dsh-team-final-row { padding: 12px 14px; gap: 8px; }
    .dsh-team-final-name { font-size: 0.92rem; }
    .dsh-team-final-players { font-size: 0.7rem; }
    .dsh-final-message { padding: 12px 14px; font-size: 0.85rem; }

    /* --- Captura de resultados --- */
    .score-modal-sticky-header {
        padding: 8px 10px;
        gap: 6px;
    }
    .smh-badge { font-size: 0.65rem; padding: 3px 8px; }
    .smh-teams { font-size: 0.78rem; }

    .score-tips { padding: 8px 10px; font-size: 0.72rem; }
    .score-tips i { font-size: 1rem; }

    .verify-teams-grid { grid-template-columns: 1fr; gap: 8px; }
    .vtc-header { padding: 6px 10px; font-size: 0.78rem; }
    .vtc-body { padding: 6px 10px; }
    .vtc-check { font-size: 0.72rem; padding: 4px 6px; }
    .vtc-check input { width: 16px; height: 16px; }

    .ghost-panel { padding: 10px; }
    .ghost-panel-title { font-size: 0.8rem; }
    .ghost-panel-hint { font-size: 0.62rem; }
    .ghost-side-panel { padding: 8px; }
    .gsp-team-name { font-size: 0.75rem; }
    .ghost-toggle { font-size: 0.7rem; padding: 4px 6px; }
    .ghost-select { font-size: 0.72rem; padding: 5px 6px; }

    .line-tabs-premium { padding: 4px; gap: 4px; }
    .ltp-btn { padding: 7px 6px; font-size: 0.7rem; gap: 4px; }
    .ltp-btn .ltp-num { width: 20px; height: 20px; font-size: 0.65rem; }

    .line-grid-premium { grid-template-columns: 1fr; gap: 10px; }
    .tscp-header { padding: 8px 10px; font-size: 0.8rem; }
    .tscp-lane { font-size: 0.62rem; padding: 1px 8px; }
    .tscp-body { padding: 10px; }
    .tscp-label { font-size: 0.65rem; }
    .tscp-select { font-size: 16px !important; padding: 5px; }

    .score-row-premium { padding: 7px 8px; gap: 7px; }
    .score-row-avatar { width: 30px; height: 30px; font-size: 0.65rem; }
    .score-row-name { font-size: 0.75rem; }
    .score-row-tags { gap: 3px; }
    .tag-cat, .tag-hdcp, .tag-ghost-note { font-size: 0.58rem; padding: 1px 5px; }
    .score-input-premium {
        width: 62px;
        font-size: 16px !important;
        padding: 8px 4px;
    }
    .score-row-remove { width: 28px; height: 28px; }
    .score-row-remove i { font-size: 0.75rem; }

    .line-total-premium { padding: 8px 12px; }
    .ltp-text { font-size: 0.75rem; }
    .ltp-value { font-size: 1.4rem; }

    .score-modal-sticky-footer {
        padding: 10px 12px;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
    }
    .smf-name { font-size: 0.62rem; }
    .smf-score { font-size: 1.3rem; }
    .smf-center { grid-column: span 2; order: 3; }
    .smf-actions { grid-column: span 2; justify-content: center; order: 4; }
    .lp-item { font-size: 0.62rem; padding: 3px 8px; }

    /* --- Modal jugador premium (formulario) --- */
    .modal-player-premium {
        max-width: 98vw;
        max-height: 94vh;
    }
    .pmp-section { padding: 12px 12px; margin-bottom: 10px; }
    .pmp-section-title { font-size: 0.82rem; margin-bottom: 10px; padding-bottom: 8px; }
    .pmp-step { width: 22px; height: 22px; font-size: 0.7rem; }
    .pmp-avatar-circle { width: 64px; height: 64px; font-size: 1.4rem; }
    .pmp-pill { padding: 8px 4px; }
    .pmp-pill .pill-letter { font-size: 1.1rem; }
    .pmp-pill .pill-label { font-size: 0.55rem; }
    .pmp-stepper { grid-template-columns: 38px 1fr 38px; }
    .pmp-stepper-btn { min-height: 40px; font-size: 0.8rem; }
    .pmp-stepper input { font-size: 16px !important; }
    .pmp-preview-card { padding: 12px 14px; flex-direction: column; }
    .pmp-preview-avatar { width: 44px; height: 44px; font-size: 1rem; }
    .pmp-preview-name { font-size: 0.95rem; }
    .pmp-preview-stat-value { font-size: 1.2rem; }
}


/* ---- 8. iPhone 12/13/14 mini específico (375x812) ---- */
@media screen and (min-width: 360px) and (max-width: 375px) {
    /* Ajustes finos para mini */
    .tab-btn { padding: 6px 9px; }
    .tab-btn span { font-size: 0.65rem; }
    .tab-btn i { display: none; } /* Solo texto */
}


/* ---- 9. Pantallas ultra pequeñas (iPhone SE 1st gen 320px) ---- */
@media screen and (max-width: 340px) {
    :root {
        --font-size-base: 12px;
    }
    .login-box { padding: 20px 14px; }
    .league-logo { width: 80px; height: 80px; }
    .login-box h2 { font-size: 1.3rem; }
    .login-box h2 span { font-size: 0.85rem; }

    .nav-logo-img { width: 30px; height: 30px; }
    .nav-logo-text h1 { font-size: 0.7rem; }
    .nav-logo-text span { font-size: 0.5rem; }

    .tab-btn { padding: 5px 8px; font-size: 0.65rem; }
    .tab-btn span { font-size: 0.6rem; }

    .mtc-team-avatar { width: 32px; height: 32px; font-size: 0.7rem; }
    .mtc-team-name { font-size: 0.7rem; }
    .mtc-pins { font-size: 1.1rem; }
    .mtc-vs-circle { width: 28px; height: 28px; font-size: 0.65rem; }

    .pld-grid { grid-template-columns: 1fr; }
    .pdp-stats-grid { grid-template-columns: 1fr 1fr; }
    .dsh-champion-grid { grid-template-columns: 1fr; }

    .score-input-premium { width: 54px; font-size: 15px !important; padding: 6px 3px; }
    .score-row-avatar { width: 26px; height: 26px; font-size: 0.58rem; }
    .score-row-name { font-size: 0.7rem; }
}


/* ---- 10. Safari específico (no Chrome/Edge en iOS) ---- */
@supports (-webkit-touch-callout: none) {
    /* Safari iOS: fix scroll momentum */
    .modal-body,
    .tabs-container,
    body {
        -webkit-overflow-scrolling: touch;
    }

    /* Safari iOS: input radius bug (se ve deformado) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="color"],
    textarea,
    select {
        -webkit-appearance: none;
        appearance: none;
        border-radius: var(--radius-sm);
    }

    /* Safari iOS: botones con border-radius a veces muestran esquinas */
    button {
        -webkit-appearance: none;
    }

    /* Safari iOS: 100% height fallback */
    .modal-overlay {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}


/* ---- 11. Fix landscape iPhone (altura corta) ---- */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .login-container {
        align-items: flex-start;
        padding: 12px;
    }
    .login-box {
        padding: 16px 20px;
        max-width: 500px;
    }
    .league-logo { width: 70px; height: 70px; margin-bottom: 10px; }
    .login-box h2 { font-size: 1.4rem; }
    .login-tag { margin-bottom: 12px; padding: 8px 16px; font-size: 0.8rem; }

    .modal-overlay {
        align-items: flex-start;
        padding: 8px;
    }
    .modal {
        max-height: calc(100vh - 16px);
    }
}


/* ---- 12. Fix overscroll bounce iOS ---- */
html, body {
    overscroll-behavior-y: contain;
}

/* Modales: prevenir que el fondo haga scroll al hacer swipe dentro */
.modal-overlay {
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.modal-body {
    overscroll-behavior: contain;
}

/* ================================================================
   MEDALLAS DE LÍDER SEMANAL (viewPlayerDetails)
   ================================================================ */

/* --- Badge en el hero: "X veces Líder Semanal" --- */
.pdp-hero-leader-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.08));
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
    animation: pdp-lm-glow 2.5s ease-in-out infinite;
}

@keyframes pdp-lm-glow {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.25); }
    50%      { box-shadow: 0 0 22px rgba(255, 215, 0, 0.5); }
}

/* --- Contenedor de medallas en cada match row --- */
.pdp-leader-medals {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.02));
    border: 1px dashed rgba(255, 215, 0, 0.4);
}

/* --- Chip de medalla individual --- */
.pdp-leader-medal {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 6px;
    border-radius: 30px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 1px solid;
    transition: transform var(--transition-bounce);
    overflow: hidden;
}
.pdp-leader-medal:hover {
    transform: translateY(-2px) scale(1.03);
}

/* Estrella decorativa */
.pdp-lm-star {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 1.3rem;
    opacity: 0.15;
    transform: rotate(15deg);
    pointer-events: none;
}

/* Iconos */
.pdp-leader-medal i {
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Texto */
.pdp-lm-text {
    white-space: nowrap;
}

/* === VARIANTES POR TIPO === */

/* Mejor Juego — dorado */
.pdp-lm-game {
    background: linear-gradient(135deg, #fff8e7, #ffe9a8);
    color: #a57917;
    border-color: #ffd700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.35);
}
.pdp-lm-game i {
    color: #d9a832;
}

/* Mejor Serie — azul */
.pdp-lm-series {
    background: linear-gradient(135deg, #e8f4fd, #c6e3f7);
    color: #2176ae;
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
.pdp-lm-series i {
    color: #2176ae;
}

/* Mejor Promedio — verde */
.pdp-lm-avg {
    background: linear-gradient(135deg, #eaf7ef, #c9ecd9);
    color: #1e8449;
    border-color: #27ae60;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}
.pdp-lm-avg i {
    color: #1e8449;
}

/* --- Animación de entrada --- */
.pdp-leader-medals {
    animation: pdp-lm-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pdp-lm-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Fecha en líderes (semanal + temporada) --- */
.pld-date {
    padding: 8px 14px 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, rgba(246, 196, 69, 0.08), transparent);
    border-top: 1px dashed var(--gray-200);
    letter-spacing: 0.2px;
}
.pld-date i {
    color: var(--bowl-gold-dark);
    font-size: 0.68rem;
}
.pld-date span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Header de semana (pestaña Líderes) --- */
.pld-week-header em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.72rem;
    opacity: 0.85;
    padding-left: 6px;
    border-left: 1px solid rgba(255,255,255,0.3);
    margin-left: 4px;
}

/* ================================================================
   RESPONSIVE — Medallas en iPhone mini / móviles
   ================================================================ */
@media (max-width: 480px) {
    .pdp-hero-leader-badge {
        font-size: 0.68rem;
        padding: 3px 10px;
        gap: 4px;
    }

    .pdp-leader-medals {
        padding: 6px 8px;
        gap: 5px;
        margin-bottom: 8px;
    }

    .pdp-leader-medal {
        font-size: 0.6rem;
        padding: 3px 8px 3px 5px;
        gap: 4px;
    }
    .pdp-leader-medal i {
        font-size: 0.62rem;
    }
    .pdp-lm-star {
        font-size: 1rem;
        top: -4px;
        right: -4px;
    }

    .pld-date {
        font-size: 0.65rem;
        padding: 6px 12px 8px;
    }

    .pld-week-header em {
        font-size: 0.65rem;
    }
}

@media (max-width: 360px) {
    .pdp-leader-medal {
        font-size: 0.55rem;
        padding: 2px 7px 2px 4px;
    }
    .pdp-lm-text {
        /* Truncar texto largo en pantallas ultra pequeñas */
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: bottom;
    }
}

/* ================================================================
   DISTINTIVO DE JUEGO PERFECTO (300 SIN HANDICAP)
   ================================================================ */

/* --- Chip pequeño "300" para usar inline --- */
.pg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #0a1a2b;
    font-weight: 900;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: perfect-glow 2.2s ease-in-out infinite;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 6px;
}
.pg-badge-sm {
    font-size: 0.6rem;
    padding: 1px 6px;
}

@keyframes perfect-glow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.15);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 22px rgba(255, 215, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.2);
        transform: scale(1.04);
    }
}

/* ================================================================
   DISTINTIVO EN EL MODAL DE DETALLES DEL ENCUENTRO
   ================================================================ */

/* Fila de jugador con juego perfecto */
.pmd-player-row.pmd-player-perfect {
    background: linear-gradient(90deg, #fff8e0, #fffdf5, #fff8e0);
    border: 2px solid #ffd700;
    border-left: 5px solid #ff8c00;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
    position: relative;
    overflow: hidden;
    animation: pmd-perfect-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pmd-player-row.pmd-player-perfect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 60%
    );
    animation: pmd-perfect-shine 3s infinite;
    pointer-events: none;
}

@keyframes pmd-perfect-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateX(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}
@keyframes pmd-perfect-shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.pmd-player-avatar.pmd-avatar-perfect {
    font-size: 1rem !important;
    border: 3px solid #fff;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.7), 0 3px 10px rgba(0, 0, 0, 0.2);
    animation: perfect-glow 2s ease-in-out infinite;
}

.pmd-player-row.pmd-player-perfect .pmd-player-name {
    color: #8a5a00;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(255, 215, 0, 0.3);
}

.pmd-sub-perfect {
    color: #ff8c00 !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.6rem !important;
}

.pmd-player-score.pmd-score-perfect {
    color: #8a5a00;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-color: #b8860b;
    font-weight: 900;
    box-shadow: 0 3px 12px rgba(255, 215, 0, 0.5);
    font-size: 1.3rem;
    animation: perfect-glow 2s ease-in-out infinite;
}

/* ================================================================
   DISTINTIVO EN EL MODAL DEL JUGADOR (viewPlayerDetails)
   ================================================================ */

/* --- Badge en el hero: "X veces Juego Perfecto" --- */
.pdp-hero-perfect-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 140, 0, 0.15));
    color: #ffd700;
    border: 1.5px solid rgba(255, 215, 0, 0.6);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
    animation: perfect-glow 2.5s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pdp-hero-perfect-badge i {
    color: #ffd700;
}

/* --- Fila de partido con juego perfecto --- */
.pdp-match-row.pdp-match-row-perfect {
    background: linear-gradient(135deg, #fffbf0, #fff8e0);
    border: 2px solid #ffd700;
    border-left: 5px solid #ff8c00;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
    position: relative;
    overflow: hidden;
}
.pdp-match-row.pdp-match-row-perfect::before {
    background: linear-gradient(180deg, #ffd700, #ff8c00);
    width: 5px;
}

/* Ribbon "¡JUEGO PERFECTO!" dentro del match row */
.pdp-match-perfect-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 10px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #0a1a2b;
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
    animation: perfect-glow 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.pdp-match-perfect-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    animation: pdp-perfect-sweep 2.5s infinite;
}
@keyframes pdp-perfect-sweep {
    0%   { left: -100%; }
    100% { left: 200%; }
}
.pdp-match-perfect-ribbon i {
    font-size: 1rem;
}

/* --- Chip de score con juego perfecto (300) --- */
.pdp-chip.pdp-chip-perfect {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #0a1a2b;
    font-weight: 900;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.7), 0 3px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: perfect-glow 2s ease-in-out infinite;
    position: relative;
}
.pdp-chip.pdp-chip-perfect .pdp-chip-line {
    background: rgba(10, 26, 43, 0.15);
    color: #0a1a2b;
    font-weight: 900;
}
.pdp-chip.pdp-chip-perfect .pdp-chip-score {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}
.pdp-chip-perfect-star {
    font-size: 0.9rem;
    color: #8a5a00;
    margin-left: 2px;
    animation: pdp-star-spin 3s linear infinite;
}
@keyframes pdp-star-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ================================================================
   INDICADOR EN LAS LÍNEAS DEL DASHBOARD/ENCUENTROS
   ================================================================ */

.mtc-line.mtc-line-perfect {
    background: linear-gradient(135deg, #fff8e0, #fffdf5);
    border-width: 2.5px;
    border-style: solid;
    border-color: #ffd700 !important;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.4);
    position: relative;
    overflow: hidden;
    animation: perfect-glow 2.2s ease-in-out infinite;
}
.mtc-line.mtc-line-perfect .mtc-line-num {
    color: #8a5a00;
    font-weight: 900;
}
.mtc-line.mtc-line-perfect .mtc-line-scores {
    font-weight: 900;
    color: #8a5a00;
}

.mtc-line-perfect-ribbon {
    position: absolute;
    top: -10px;
    right: -8px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #0a1a2b;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 12px 12px 12px 0;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transform: rotate(3deg);
    z-index: 2;
}

/* ================================================================
   RESPONSIVE — iPhone mini y móviles
   ================================================================ */
@media (max-width: 480px) {
    .pg-badge {
        font-size: 0.6rem;
        padding: 1px 6px;
        gap: 3px;
    }

    .pdp-hero-perfect-badge {
        font-size: 0.68rem;
        padding: 3px 10px;
        gap: 4px;
    }

    .pdp-match-perfect-ribbon {
        font-size: 0.68rem;
        padding: 6px 10px;
        letter-spacing: 1px;
        gap: 6px;
    }
    .pdp-match-perfect-ribbon i {
        font-size: 0.85rem;
    }

    .pdp-player-row.pmd-player-perfect {
        border-left-width: 4px;
    }
    .pmd-player-avatar.pmd-avatar-perfect {
        font-size: 0.85rem !important;
    }
    .pmd-player-score.pmd-score-perfect {
        font-size: 1.1rem;
        padding: 3px 8px;
    }

    .mtc-line-perfect-ribbon {
        font-size: 0.5rem;
        padding: 1px 6px;
        top: -8px;
        right: -6px;
    }
}

@media (max-width: 360px) {
    .pg-badge {
        font-size: 0.55rem;
        padding: 1px 5px;
    }
    .pdp-hero-perfect-badge {
        font-size: 0.62rem;
        padding: 2px 8px;
    }
    .pdp-match-perfect-ribbon {
        font-size: 0.6rem;
        padding: 5px 8px;
    }
    .pmd-player-score.pmd-score-perfect {
        font-size: 0.95rem;
        padding: 2px 6px;
    }
}

/* Accesibilidad: reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .pg-badge,
    .pdp-hero-perfect-badge,
    .pdp-match-perfect-ribbon,
    .pdp-chip.pdp-chip-perfect,
    .mtc-line.mtc-line-perfect,
    .pmd-player-row.pmd-player-perfect::after {
        animation: none !important;
    }
}

/* ================================================================
   SELECTOR DE JUGADORES PREMIUM (CARD-BASED)
   ================================================================ */
.player-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    max-height: 240px;
    overflow-y: auto;
    padding: 10px;
    background: linear-gradient(180deg, #f8f9fb, #f1f4f9);
    border-radius: 12px;
    border: 1px solid #e0e6ed;
    scrollbar-width: thin;
}
.player-selector-grid::-webkit-scrollbar { width: 6px; }
.player-selector-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f6c445, #d9a832);
    border-radius: 3px;
}

.player-selector-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: white;
    border: 2px solid #e0e6ed;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    user-select: none;
}
.player-selector-card:hover {
    border-color: var(--bowl-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(246, 196, 69, 0.2);
}
.player-selector-card.psc-selected {
    border-color: var(--side-color, #3498db);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--side-color, #3498db) 12%, white),
        color-mix(in srgb, var(--side-color, #3498db) 3%, white));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.player-selector-card.psc-selected::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
    background: radial-gradient(circle at top right,
        color-mix(in srgb, var(--side-color, #3498db) 15%, transparent),
        transparent 60%);
}

.psc-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 0.72rem;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.3px;
    transition: transform 0.18s;
}
.player-selector-card:hover .psc-avatar {
    transform: scale(1.08) rotate(-4deg);
}

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

.psc-name {
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--bowl-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

.psc-meta {
    display: flex;
    gap: 5px;
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: 2px;
    flex-wrap: wrap;
}

.psc-cat {
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 0.58rem;
    letter-spacing: 0.2px;
}
.psc-cat-A { background: rgba(246, 196, 69, 0.2); color: #a57917; }
.psc-cat-B { background: rgba(52, 152, 219, 0.15); color: #2176ae; }
.psc-cat-C { background: rgba(39, 174, 96, 0.15); color: #1e8449; }

.psc-avg, .psc-hcp {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
}
.psc-hcp { color: #6a1b9a; }

.psc-check {
    color: #ccc;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: all 0.2s;
}
.player-selector-card.psc-selected .psc-check {
    color: var(--bowl-gold);
    filter: drop-shadow(0 2px 4px rgba(246, 196, 69, 0.5));
    animation: psc-check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes psc-check-pop {
    0%   { transform: scale(0.3); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.psg-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 16px;
    color: var(--text-muted);
}
.psg-empty i {
    font-size: 1.8rem;
    color: #ccc;
    margin-bottom: 8px;
    display: block;
}
.psg-empty p {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Hint del label */
.tscp-hint {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--gray-100);
    padding: 1px 8px;
    border-radius: 10px;
    text-transform: lowercase;
    letter-spacing: 0.2px;
    margin-left: 6px;
}

/* ================================================================
   SCORE ROW CON HANDICAP EDITABLE + TOTAL EN VIVO
   ================================================================ */
.score-row-premium {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center;
    gap: 8px;
    background: #fafafa;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all 0.15s;
}
.score-row-premium:hover {
    background: #f5f5f5;
    border-color: #ddd;
}

/* Handicap editable */
.score-row-hcp-wrap {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #f3e5f5, #ede7f6);
    border: 1.5px solid #d1c4e9;
    border-radius: 8px;
    overflow: hidden;
    height: 38px;
    transition: all 0.15s;
}
.score-row-hcp-wrap:focus-within {
    border-color: #9b59b6;
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.15);
}

.hcp-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    background: linear-gradient(135deg, #9b59b6, #6a1b9a);
    color: white;
    font-weight: 900;
    font-size: 0.55rem;
    letter-spacing: 0.3px;
    cursor: help;
    gap: 1px;
}
.hcp-label i { font-size: 0.55rem; opacity: 0.85; }
.hcp-label span { font-size: 0.5rem; opacity: 0.9; }

.hcp-input {
    width: 48px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    color: #6a1b9a;
    -moz-appearance: textfield;
}
.hcp-input::-webkit-outer-spin-button,
.hcp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hcp-input:focus {
    outline: none;
    background: #faf5ff;
}

/* Total en vivo */
.score-row-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fa, #eef1f5);
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    padding: 4px 8px;
    min-width: 58px;
    height: 38px;
    justify-content: center;
}

.srt-label {
    font-size: 0.52rem;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    line-height: 1;
}

.srt-value {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--bowl-navy);
    line-height: 1;
    margin-top: 1px;
    transition: transform 0.18s, color 0.18s;
    letter-spacing: -0.4px;
}

.srt-bump {
    transform: scale(1.2);
    color: var(--bowl-gold-dark);
}

/* Estado "cambiado" */
.score-row-premium.hcp-changed {
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
    border-color: var(--bowl-gold);
    box-shadow: 0 3px 12px rgba(246, 196, 69, 0.18);
}

.tag-hcp-changed {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f6c445, #d9a832);
    color: #0a1a2b;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    animation: hcp-changed-pulse 1.5s ease-in-out infinite;
}

@keyframes hcp-changed-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(246, 196, 69, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(246, 196, 69, 0); }
}

/* Hint inferior de línea vacía */
.empty-line-hint {
    text-align: center;
    padding: 22px 16px;
    color: var(--text-muted);
    font-size: 0.82rem;
    background: linear-gradient(180deg, #fafbfd, #f3f6fa);
    border-radius: 10px;
    border: 2px dashed #e0e6ed;
}
.empty-line-hint i {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: var(--bowl-gold);
    animation: float 2.5s ease-in-out infinite;
}
.empty-line-hint p {
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--bowl-navy);
    font-size: 0.85rem;
}
.empty-line-hint small {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ================================================================
   RESPONSIVE – iPhone mini y móviles
   ================================================================ */
@media (max-width: 640px) {
    .player-selector-grid {
        grid-template-columns: 1fr;
        max-height: 260px;
        padding: 8px;
    }
    .psc-avatar { width: 32px; height: 32px; font-size: 0.65rem; }
    .psc-name { font-size: 0.75rem; }
    .psc-meta { font-size: 0.58rem; }

    .score-row-premium {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "avatar info remove"
            "hcp    hcp  hcp"
            "score  score total";
        gap: 6px;
        padding: 10px;
    }
    .score-row-avatar { grid-area: avatar; }
    .score-row-info { grid-area: info; }
    .score-row-remove { grid-area: remove; }
    .score-row-hcp-wrap {
        grid-area: hcp;
        width: 100%;
        justify-content: center;
    }
    .score-row-input-wrap { grid-area: score; }
    .score-row-total { grid-area: total; min-width: 70px; }
    .score-input-premium { width: 100%; font-size: 16px !important; }

    .hcp-input { width: 60px; font-size: 16px !important; }
    .srt-value { font-size: 1.15rem; }
}

@media (max-width: 400px) {
    .hcp-input { width: 50px; font-size: 15px !important; }
    .srt-value { font-size: 1rem; }
    .srt-label { font-size: 0.48rem; }
    .tag-hcp-changed { font-size: 0.55rem; padding: 1px 5px; }
}

/* ================================================================
   FIX PREMIUM v3 · NOMBRES COMPLETOS + UX/UI MEJORADA
   Corrige truncamiento de nombres en:
   · Modal de captura de resultados (score rows)
   · Pestaña Encuentros (team names)
   · Dashboard Próximas Asignaciones
   · Selector de jugadores (cards)
   ================================================================ */

/* ----------------------------------------------------------
   1. CAPTURA DE RESULTADOS · SCORE ROW CON NOMBRE COMPLETO
   ---------------------------------------------------------- */
.score-row-premium {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto !important;
    align-items: center;
    gap: 10px;
    background: #fafafa;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all 0.15s;
    min-width: 0;
}

.score-row-premium:hover {
    background: #f5f5f5;
    border-color: #ddd;
}

/* El contenedor de info NUNCA debe encogerse a 0 */
.score-row-info {
    min-width: 0 !important;
    max-width: 100%;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ✨ EL NOMBRE YA NO SE CORTA — se ajusta y hace wrap */
.score-row-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: #0a1a2b;
    line-height: 1.3 !important;
    /* Anular truncamiento */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    /* Mostrar como bloque para permitir wrap natural */
    display: block !important;
    margin: 0;
    max-width: 100%;
}

/* Badge FANTASMA ahora inline con margen */
.score-row-name .ghost-badge {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Tags debajo del nombre, permitiendo wrap */
.score-row-tags {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0;
}

/* Avatar, HCP, input, total y botón: nunca se encogen */
.score-row-avatar,
.score-row-hcp-wrap,
.score-row-input-wrap,
.score-row-total,
.score-row-remove {
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   2. GRID DE LÍNEAS · MÁS ESPACIO PARA CADA TARJETA
   ---------------------------------------------------------- */
.line-grid-premium {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.team-score-card-premium {
    min-width: 0;
    overflow: hidden;
}

.tscp-body {
    min-width: 0;
    padding: 14px;
}

/* Espacio entre el nombre y el total cuando el nombre es largo */
.score-row-total {
    min-width: 62px;
}

/* ----------------------------------------------------------
   3. ENCUENTROS · NOMBRES DE EQUIPOS COMPLETOS
   ---------------------------------------------------------- */
.mtc-teams {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 10px;
    align-items: center;
    padding: 18px 14px;
}

.mtc-team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
    /* Clave: permitir que el contenido se ajuste */
    min-width: 0 !important;
    flex: 1;
}

.mtc-team-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0 !important;
    flex: 1;
    max-width: 100%;
    overflow: visible !important;
}

/* ✨ EL NOMBRE DEL EQUIPO YA NO SE CORTA */
.mtc-team-name {
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1.25 !important;
    letter-spacing: -0.2px;
    /* Anular truncamiento */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: block !important;
    margin: 0;
    max-width: 100%;
    /* Mantener color del equipo */
    color: inherit;
}

/* Avatar del equipo nunca se encoge */
.mtc-team-avatar {
    flex-shrink: 0;
}

/* Ajustar el VS para que quede bien centrado */
.mtc-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   4. DASHBOARD · PRÓXIMAS ASIGNACIONES (names full)
   ---------------------------------------------------------- */
.nxa-teams {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 8px;
    align-items: center;
}

.nxa-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0 !important;
    flex: 1;
}

.nxa-team-name {
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1;
    max-width: 100%;
    display: block;
}

.nxa-team-avatar {
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   5. SELECTOR DE JUGADORES · NOMBRE COMPLETO
   ---------------------------------------------------------- */
.player-selector-card {
    min-width: 0;
}

.psc-info {
    min-width: 0;
    flex: 1;
    overflow: visible;
}

.psc-name {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--bowl-navy);
    line-height: 1.25 !important;
    letter-spacing: -0.2px;
    /* Anular truncamiento */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: block !important;
    max-width: 100%;
}

.psc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.psc-avatar,
.psc-check {
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   6. BONUS: PRÓXIMAS ASIGNACIONES · tarjetas más legibles
   ---------------------------------------------------------- */
.nxa-card {
    transition: all var(--transition);
}

.nxa-card-head {
    flex-wrap: wrap;
    gap: 6px;
}

/* ----------------------------------------------------------
   7. RESPONSIVE · PUNTOS DE QUIEBRE CLAVE
   ---------------------------------------------------------- */

/* Tablets: stack de líneas */
@media (max-width: 1024px) {
    .line-grid-premium {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Móviles medianos: reorganizar score row en 2 filas */
@media (max-width: 640px) {
    .score-row-premium {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas:
            "avatar info remove"
            "hcp    hcp  hcp"
            "score  score total" !important;
        gap: 8px;
        padding: 12px 10px;
    }

    .score-row-avatar { grid-area: avatar; }
    .score-row-info {
        grid-area: info;
        gap: 3px;
    }
    .score-row-remove { grid-area: remove; }

    .score-row-hcp-wrap {
        grid-area: hcp;
        width: 100%;
        justify-content: center;
        height: 42px;
    }

    .score-row-input-wrap {
        grid-area: score;
        width: 100%;
    }
    .score-row-input-wrap .score-input-premium {
        width: 100%;
        font-size: 16px !important;
    }

    .score-row-total {
        grid-area: total;
        height: 42px;
        min-width: 80px;
    }

    .score-row-name {
        font-size: 0.85rem;
    }

    .hcp-input {
        width: 70px;
        font-size: 16px !important;
    }
}

/* Móviles pequeños: stack de equipos en partido */
@media (max-width: 480px) {
    .mtc-teams {
        grid-template-columns: 1fr !important;
        gap: 10px;
        padding: 16px 12px;
    }

    /* Forzar layout LTR en away también en mobile */
    .mtc-team-away {
        flex-direction: row !important;
        text-align: left !important;
    }
    .mtc-team-away .mtc-team-info {
        align-items: flex-start !important;
    }
    .mtc-team-away .mtc-team-score {
        justify-content: flex-start !important;
    }
    .mtc-team-away .mtc-team-points {
        justify-content: flex-start !important;
    }

    .mtc-team-name {
        font-size: 0.92rem;
    }

    /* VS centrado entre los dos equipos apilados */
    .mtc-vs {
        padding: 6px 0;
    }

    /* NXA también stack */
    .nxa-teams {
        grid-template-columns: 1fr !important;
    }
    .nxa-team-away {
        flex-direction: row !important;
        text-align: left !important;
    }
    .nxa-vs {
        padding: 4px 0;
    }
}

/* iPhone mini ultra pequeño */
@media (max-width: 400px) {
    .score-row-name {
        font-size: 0.82rem;
    }
    .mtc-team-name {
        font-size: 0.88rem;
    }
    .score-row-total {
        min-width: 70px;
    }
}

/* ----------------------------------------------------------
   8. PULIDO EXTRA · legibilidad y estados
   ---------------------------------------------------------- */

/* En modo editor de partido completado, resaltar sutilmente */
.score-row-premium:focus-within {
    background: #fffdf5;
    border-color: var(--bowl-gold);
    box-shadow: 0 0 0 3px rgba(246, 196, 69, 0.15);
}

/* El nombre del jugador con juego perfecto destaca */
.score-row-premium .pmd-player-perfect .score-row-name,
.score-row-premium.pmd-player-perfect .score-row-name {
    color: #8a5a00;
    font-weight: 900;
}

/* Mejor separación visual entre nombre largo y "cambiar hcp" */
.score-row-premium.hcp-changed .score-row-name {
    padding-right: 2px;
}

/* Permitir que team-name en cards de partido se expanda */
.mtc-card .mtc-team-info .mtc-team-name {
    min-height: 1.2em;
}

/* En modal de captura, ancho mínimo de la columna del nombre */
.tscp-body .scores-container-premium {
    min-width: 0;
}

/* Previene el scroll horizontal del modal con nombres largos */
#matchScoreModal .modal-body {
    overflow-x: hidden;
}

#matchScoreModal .score-line-container {
    overflow-x: hidden;
}

/* ================================================================
   FIX v4 · MODAL DE CAPTURA · NO SE EXPANDE POR NOMBRES LARGOS
   ================================================================ */

/* ---------- 1. NOMBRE DEL JUGADOR: MÁX 2 LÍNEAS CON ELLIPSIS ---------- */
.score-row-premium .score-row-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25 !important;
    max-height: calc(1.25em * 2);
    font-size: 0.88rem;
    /* Respeta el espacio del HCP/input */
    padding-right: 4px;
}

/* 2. El contenedor de info no crece más de lo necesario */
.score-row-premium .score-row-info {
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
}

/* 3. Tags no generan altura extra */
.score-row-premium .score-row-tags {
    margin-top: 2px;
    min-height: 0;
}

/* ---------- 4. MODAL: FLEXBOX PARA SCROLL CORRECTO ---------- */
#matchScoreModal .modal {
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#matchScoreModal .modal-header,
#matchScoreModal .modal-footer {
    flex-shrink: 0;
}

#matchScoreModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;               /* CRUCIAL: permite que flex shrink */
    max-height: none !important; /* anula el max-height: 70vh inline */
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------- 5. STICKY HEADER/FOOTER CON NUEVO LAYOUT ---------- */
#matchScoreModal .score-modal-sticky-header {
    border-radius: 12px 12px 0 0;
}

#matchScoreModal .score-modal-sticky-footer {
    border-radius: 0 0 12px 12px;
}

/* ---------- 6. COMPACTAR FILAS PARA QUE QUEPAN MÁS ---------- */
#matchScoreModal .score-row-premium {
    padding: 8px 10px;
    gap: 8px;
}

#matchScoreModal .score-row-tags {
    gap: 3px;
}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width: 640px) {
    .score-row-premium .score-row-name {
        font-size: 0.85rem;
        max-height: calc(1.2em * 2);
        line-height: 1.2 !important;
    }
    #matchScoreModal .score-row-premium {
        padding: 8px;
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .score-row-premium .score-row-name {
        font-size: 0.82rem;
        line-height: 1.2 !important;
        max-height: calc(1.2em * 2);
    }
}

/* ================================================================
   FIX DEFINITIVO · SCORE ROW EN 2 FILAS · NOMBRES SIEMPRE VISIBLES
   · Fila 1: Avatar + Nombre (ancho completo) + Botón X
   · Fila 2: HCP + Input puntos + Total
   ================================================================ */

/* 1. Modal más ancho en desktop para aprovechar el espacio */
@media (min-width: 1025px) {
    #matchScoreModal .modal {
        max-width: 1150px !important;
    }
}

/* 2. Líneas apiladas en 1 columna hasta 1024px (evita compresión) */
@media (max-width: 1024px) {
    #matchScoreModal .line-grid-premium {
        grid-template-columns: 1fr !important;
    }
}

/* 3. Score row: LAYOUT DE 2 FILAS */
#matchScoreModal .score-row-premium {
    display: grid !important;
    grid-template-columns: 42px 95px minmax(0, 1fr) 72px 34px !important;
    grid-template-areas:
        "avatar info  info  info  remove"
        "avatar hcp   input total remove" !important;
    gap: 6px 8px !important;
    padding: 10px 12px !important;
    align-items: center !important;
    min-width: 0 !important;
    background: #fafafa !important;
    border-radius: 10px !important;
    border: 1px solid #eee !important;
    transition: all 0.15s !important;
}

#matchScoreModal .score-row-premium:hover {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
}

/* 4. Avatar (columna izquierda, abarca 2 filas) */
#matchScoreModal .score-row-avatar {
    grid-area: avatar !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

/* 5. Info (nombre + tags) */
#matchScoreModal .score-row-info {
    grid-area: info !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* 6. Nombre: 2 líneas máximo, ocupa todo el ancho disponible */
#matchScoreModal .score-row-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #0a1a2b !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

#matchScoreModal .score-row-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
}

/* 7. HCP (fila 2) */
#matchScoreModal .score-row-hcp-wrap {
    grid-area: hcp !important;
    width: 100% !important;
    height: 38px !important;
    justify-content: center !important;
}

#matchScoreModal .hcp-input {
    width: 42px !important;
    font-size: 1rem !important;
    text-align: center !important;
}

#matchScoreModal .hcp-label {
    padding: 0 6px !important;
}

/* 8. Input de puntos (fila 2) */
#matchScoreModal .score-row-input-wrap {
    grid-area: input !important;
    width: 100% !important;
}

#matchScoreModal .score-input-premium {
    width: 100% !important;
    height: 38px !important;
    font-size: 1.15rem !important;
    padding: 6px 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 9. Total (fila 2) */
#matchScoreModal .score-row-total {
    grid-area: total !important;
    min-width: 72px !important;
    height: 38px !important;
    padding: 2px 6px !important;
}

/* 10. Botón eliminar (columna derecha, abarca 2 filas) */
#matchScoreModal .score-row-remove {
    grid-area: remove !important;
    width: 34px !important;
    height: 34px !important;
    justify-self: center !important;
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* ================================================================
   RESPONSIVE · Móvil compacto
   ================================================================ */
@media (max-width: 640px) {
    #matchScoreModal .score-row-premium {
        grid-template-columns: 36px 82px minmax(0, 1fr) 66px 30px !important;
        gap: 5px 6px !important;
        padding: 8px 10px !important;
    }
    #matchScoreModal .score-row-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.72rem !important;
    }
    #matchScoreModal .score-row-remove {
        width: 30px !important;
        height: 30px !important;
    }
    #matchScoreModal .score-row-name {
        font-size: 0.85rem !important;
    }
    #matchScoreModal .score-input-premium {
        height: 36px !important;
        font-size: 1.05rem !important;
    }
    #matchScoreModal .score-row-total,
    #matchScoreModal .score-row-hcp-wrap {
        height: 36px !important;
    }
    #matchScoreModal .hcp-input {
        width: 38px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 420px) {
    #matchScoreModal .score-row-premium {
        grid-template-columns: 32px 76px minmax(0, 1fr) 60px 28px !important;
    }
    #matchScoreModal .score-row-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    #matchScoreModal .score-row-remove {
        width: 28px !important;
        height: 28px !important;
    }
    #matchScoreModal .score-row-name {
        font-size: 0.8rem !important;
    }
    #matchScoreModal .score-input-premium {
        font-size: 1rem !important;
    }
    #matchScoreModal .hcp-input {
        width: 34px !important;
        font-size: 0.85rem !important;
    }
    #matchScoreModal .score-row-total {
        min-width: 60px !important;
    }
    #matchScoreModal .srt-value {
        font-size: 1rem !important;
    }
}

/* ================================================================
   FIX · Estado "EN OTRA LÍNEA" + CONTADOR EN TABS
   ================================================================ */

/* Tarjeta de jugador que está en OTRA línea (no en la actual) */
.player-selector-card.psc-in-other-line {
    border-style: dashed;
    border-width: 2px;
    border-color: #f39c12;
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
    opacity: 0.82;
}
.player-selector-card.psc-in-other-line:hover {
    opacity: 1;
    border-style: solid;
    border-color: var(--bowl-gold-dark);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 14px rgba(243, 156, 18, 0.35);
}

/* Badge "L1" / "L2" / "L3" */
.psc-other-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: linear-gradient(135deg, #f39c12, #d68910);
    color: white;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.45);
}

/* Contador de jugadores en los tabs de línea */
.ltp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f6c445, #d9a832);
    color: #0a1a2b;
    font-size: 0.65rem;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(246, 196, 69, 0.4);
}

/* Cuando el tab está activo, el contador cambia de color */
.ltp-btn.active .ltp-count {
    background: #0a1a2b;
    color: #f6c445;
}

/* ================================================================
   BADGES MÚLTIPLES · jugador en varias líneas
   ================================================================ */
.psc-other-lines-badges {
    display: inline-flex;
    gap: 3px;
    flex-wrap: nowrap;
    align-items: center;
}

.psc-other-lines-badges .psc-other-line-badge {
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    font-size: 0.58rem;
    border-radius: 10px;
}

/* ================================================================
   LEADER CARDS · REFINAMIENTO FINAL v5
   · Nombres de jugadores y equipos COMPLETOS (sin truncar)
   · Corona FontAwesome estilizada en el lugar #1
   · 1 columna en celulares (< 560px) para máxima legibilidad
   · Sobrescribe TODO lo anterior de .pld-*
   ================================================================ */

/* ---------- HERO HEADER (contexto semanal/temporada) ---------- */
.pld-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #fffdf5 0%, #fff8e7 100%);
    border: 1px solid rgba(246, 196, 69, 0.35);
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 4px 18px rgba(246, 196, 69, 0.1);
    flex-wrap: wrap;
}
.pld-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(246, 196, 69, 0.15), transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(246, 196, 69, 0.08), transparent 50%);
    pointer-events: none;
}
.pld-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}
.pld-hero-warn {
    background: linear-gradient(135deg, #fff8e7 0%, #ffe9c4 100%);
    border-color: rgba(243, 156, 18, 0.4);
}
.pld-hero-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(246, 196, 69, 0.45);
    position: relative; z-index: 1;
    animation: pld-hero-pulse 3s ease-in-out infinite;
}
@keyframes pld-hero-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
.pld-hero-info {
    flex: 1; min-width: 0;
    position: relative; z-index: 1;
}
.pld-hero-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--bowl-navy);
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.pld-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pld-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: white;
    border: 1px solid rgba(246, 196, 69, 0.4);
    color: var(--bowl-navy);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(246, 196, 69, 0.12);
}
.pld-hero-chip i { color: var(--bowl-gold-dark); font-size: 0.7rem; }
.pld-hero-chip-gold {
    background: var(--bowl-gold-gradient);
    border-color: transparent;
}
.pld-hero-chip-gold i { color: var(--bowl-navy); }
.pld-hero-chip-warn {
    background: linear-gradient(135deg, #f39c12, #d68910);
    color: white;
    border-color: transparent;
}
.pld-hero-chip-warn i { color: white; }

/* ---------- CATEGORY SECTIONS ---------- */
.pld-category-section {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 6px 24px rgba(10, 26, 43, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.6);
}
.pld-category-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #0a1a2b, #1a2a3f);
    color: white;
    overflow: hidden;
    flex-wrap: wrap;
}
.pld-category-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bowl-gold), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}
.pld-category-letter {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    font-size: 1.25rem;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    color: white;
}
.pld-cat-A .pld-category-letter { background: linear-gradient(135deg, #f6c445, #d9a832); color: #0a1a2b; }
.pld-cat-B .pld-category-letter { background: linear-gradient(135deg, #3498db, #2176ae); }
.pld-cat-C .pld-category-letter { background: linear-gradient(135deg, #27ae60, #1e8449); }
.pld-category-info { flex: 1; min-width: 0; }
.pld-category-title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}
.pld-category-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-top: 2px;
}
.pld-category-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--bowl-gold-gradient);
    color: var(--bowl-navy);
    font-size: 0.7rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(246, 196, 69, 0.35);
    flex-shrink: 0;
    white-space: nowrap;
}
.pld-category-count i { font-size: 0.66rem; }
.pld-category-body { padding: 18px; }

/* ---------- TYPE SECTIONS ---------- */
.pld-type-section { margin-bottom: 22px; }
.pld-type-section:last-child { margin-bottom: 0; }
.pld-type-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px dashed var(--gray-200);
    flex-wrap: wrap;
}
.pld-type-icon-wrap {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(246,196,69,0.2), rgba(246,196,69,0.06));
    border: 1.5px solid rgba(246, 196, 69, 0.35);
    display: flex; align-items: center; justify-content: center;
    color: var(--bowl-gold-dark);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.pld-type-info { flex: 1; min-width: 0; }
.pld-type-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--bowl-navy);
    margin: 0;
    line-height: 1.2;
}
.pld-type-sub {
    font-size: 0.66rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 1px;
}
.pld-type-count {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--gray-100);
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    flex-shrink: 0;
    border: 1px solid var(--gray-200);
    white-space: nowrap;
}

/* ---------- GRID (auto-adaptable) ---------- */
.pld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 14px;
}
#dashboardLeaders { display: block !important; }
#dashboardLeaders .pld-grid-dashboard {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: 12px;
}

/* ---------- CARD BASE ---------- */
.pld-card {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-bounce);
    box-shadow: 0 4px 16px rgba(10, 26, 43, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.6);
    display: flex;
    flex-direction: column;
    min-height: auto;           /* ← CAMBIO CLAVE: sin altura fija */
}
.pld-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bowl-gold), var(--bowl-gold-light), var(--bowl-gold));
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
    z-index: 2;
}
.pld-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(246, 196, 69, 0.06), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.pld-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(10, 26, 43, 0.16);
    border-color: var(--bowl-gold);
}
.pld-card.pld-cat-A::before {
    background: linear-gradient(90deg, #f6c445, #f8d76e, #d9a832, #f8d76e, #f6c445);
    background-size: 200% 100%;
}
.pld-card.pld-cat-B::before {
    background: linear-gradient(90deg, #3498db, #5dade2, #2176ae, #5dade2, #3498db);
    background-size: 200% 100%;
}
.pld-card.pld-cat-C::before {
    background: linear-gradient(90deg, #27ae60, #58d68d, #1e8449, #58d68d, #27ae60);
    background-size: 200% 100%;
}

/* ---------- CARD DESTACADA (Rank 1) ---------- */
.pld-card.pld-featured {
    background: linear-gradient(180deg, #fffdf5 0%, #fff8e7 100%);
    border-color: var(--bowl-gold);
    box-shadow:
        0 8px 28px rgba(246, 196, 69, 0.3),
        inset 0 0 0 1px rgba(246, 196, 69, 0.25);
}
.pld-card.pld-featured::before { height: 5px; }
.pld-card.pld-featured .pld-avatar {
    width: 56px; height: 56px;
    font-size: 1.1rem;
    box-shadow: 0 4px 16px rgba(246, 196, 69, 0.4), 0 0 0 3px white;
}
.pld-card.pld-featured .pld-score-value { font-size: 2.2rem; }
.pld-card.pld-featured .pld-name { font-size: 1rem; }
.pld-card.pld-featured:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 16px 44px rgba(246, 196, 69, 0.4),
        inset 0 0 0 1px rgba(246, 196, 69, 0.4);
}

/* ============================================================
   RANK BADGES · CORONA FONTAWESOME EN EL #1
   ============================================================ */
.pld-rank {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    z-index: 3;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-bounce);
}
.pld-card:hover .pld-rank {
    transform: scale(1.1) rotate(6deg);
}

/* ✨ CORONA #1 · icono FontAwesome con gradiente dorado y halo */
.pld-rank-1 {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #ffd700, #daa520, #b8860b);
    color: #ffffff;
    font-size: 1.3rem;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.5),
        0 6px 20px rgba(255, 215, 0, 0.6);
    animation: pld-crown-glow 2.4s ease-in-out infinite;
}
.pld-rank-1 i {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    transform: translateY(-1px);
}
@keyframes pld-crown-glow {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255, 215, 0, 0.5),
            0 6px 20px rgba(255, 215, 0, 0.6);
        transform: rotate(-3deg);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(255, 215, 0, 0.15),
            0 6px 28px rgba(255, 215, 0, 0.95);
        transform: rotate(3deg);
    }
}

.pld-rank-2 {
    background: linear-gradient(135deg, #e8e8e8, #a8a8a8);
    color: #4a4a4a;
    font-size: 1rem;
}
.pld-rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a05a1f);
    color: white;
    font-size: 1rem;
}
.pld-rank-n {
    background: var(--bowl-navy);
    color: var(--bowl-gold);
    font-size: 0.82rem;
}

/* ---------- CARD HEADER ---------- */
.pld-card-header {
    padding: 12px 14px 10px;
    padding-right: 56px;          /* ← espacio para la corona */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--gray-100);
    position: relative;
    z-index: 1;
}
.pld-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.pld-cat-A .pld-cat-badge {
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
    color: #a57917;
    border: 1px solid rgba(246, 196, 69, 0.5);
}
.pld-cat-B .pld-cat-badge {
    background: linear-gradient(135deg, #e8f4fd, #d6ebf9);
    color: #2176ae;
    border: 1px solid rgba(52, 152, 219, 0.5);
}
.pld-cat-C .pld-cat-badge {
    background: linear-gradient(135deg, #eaf7ef, #d9f0e2);
    color: #1e8449;
    border: 1px solid rgba(39, 174, 96, 0.5);
}
.pld-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--gray-100);
    white-space: nowrap;
}
.pld-type-badge i { color: var(--bowl-gold-dark); font-size: 0.65rem; }

/* ---------- CARD BODY ---------- */
.pld-card-body {
    padding: 14px;
    display: flex;
    align-items: flex-start;       /* ← alinear arriba para nombres largos */
    gap: 12px;
    flex: 1;
    position: relative;
    z-index: 1;
}
.pld-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.95rem;
    color: white;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    border: 2px solid white;
}
.pld-cat-A .pld-avatar {
    background: linear-gradient(135deg, #f6c445, #d9a832);
    color: #0a1a2b;
}
.pld-cat-B .pld-avatar {
    background: linear-gradient(135deg, #3498db, #2176ae);
}
.pld-cat-C .pld-avatar {
    background: linear-gradient(135deg, #27ae60, #1e8449);
}
.pld-info {
    flex: 1;
    min-width: 0;
}

/* ✨ NOMBRE DEL JUGADOR: sin truncar, wrap completo */
.pld-name {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--bowl-navy);
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

/* ✨ EQUIPO: sin truncar, wrap completo */
.pld-team {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.pld-team i {
    color: var(--bowl-gold-dark);
    font-size: 0.62rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.pld-team-name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ---------- CARD FOOTER ---------- */
.pld-card-footer {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, transparent, rgba(246, 196, 69, 0.05));
    position: relative;
    z-index: 1;
}
.pld-score-block {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.pld-score-value {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(135deg, var(--bowl-navy), #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pld-cat-A .pld-score-value {
    background: linear-gradient(135deg, #d9a832, #a57917);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pld-cat-B .pld-score-value {
    background: linear-gradient(135deg, #2176ae, #1a5a8a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pld-cat-C .pld-score-value {
    background: linear-gradient(135deg, #1e8449, #145c33);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pld-score-unit {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pld-games {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--gray-100);
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pld-games i { color: var(--bowl-gold-dark); font-size: 0.58rem; }

/* ---------- DATE ---------- */
.pld-date {
    padding: 8px 14px 10px;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(180deg, rgba(246, 196, 69, 0.06), transparent);
    border-top: 1px dashed var(--gray-200);
    letter-spacing: 0.2px;
}
.pld-date i { color: var(--bowl-gold-dark); font-size: 0.65rem; }
.pld-date span {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* ---------- COMPACT (Dashboard) ---------- */
.pld-card.pld-compact .pld-avatar {
    width: 40px; height: 40px; font-size: 0.85rem;
}
.pld-card.pld-compact .pld-score-value { font-size: 1.55rem; }
.pld-card.pld-compact .pld-name { font-size: 0.84rem; }

/* ---------- MORE BADGE ---------- */
.pld-more-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f8fafc, #f0f4fa);
    border: 2px dashed var(--gray-200);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: default;
}
.pld-more-badge:hover {
    border-color: var(--bowl-gold);
    color: var(--bowl-navy);
    background: linear-gradient(135deg, #fff8e7, #fff3d6);
}

/* ---------- EMPTY STATE ---------- */
.pld-empty {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(180deg, #fafbfd, #f0f4fa);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--gray-200);
}
.pld-empty i {
    font-size: 2rem;
    color: var(--bowl-gold);
    margin-bottom: 10px;
    display: block;
    animation: float 3s ease-in-out infinite;
}
.pld-empty p {
    color: var(--bowl-navy);
    font-weight: 800;
    margin: 0 0 4px;
    font-size: 0.95rem;
}
.pld-empty small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* ================================================================
   RESPONSIVE · Refinado para celulares
   ================================================================ */

/* Tablets y móviles grandes */
@media (max-width: 768px) {
    .pld-hero { padding: 14px 16px; gap: 12px; }
    .pld-hero-icon { width: 46px; height: 46px; font-size: 1.2rem; }
    .pld-hero-title { font-size: 1.05rem; }
    .pld-hero-chip { font-size: 0.68rem; padding: 4px 10px; }

    .pld-category-header { padding: 12px 14px; gap: 10px; }
    .pld-category-letter { width: 36px; height: 36px; font-size: 1rem; }
    .pld-category-title { font-size: 0.92rem; }
    .pld-category-sub { font-size: 0.65rem; }
    .pld-category-count { font-size: 0.65rem; padding: 4px 10px; }
    .pld-category-body { padding: 14px; }

    .pld-type-icon-wrap { width: 34px; height: 34px; font-size: 0.85rem; }
    .pld-type-title { font-size: 0.85rem; }
    .pld-type-sub { font-size: 0.62rem; }
    .pld-type-count { font-size: 0.6rem; padding: 3px 9px; }

    .pld-rank { width: 30px; height: 30px; font-size: 0.85rem; top: 10px; right: 10px; }
    .pld-rank-1 { width: 38px; height: 38px; font-size: 1.15rem; }

    .pld-avatar { width: 42px; height: 42px; font-size: 0.88rem; }
    .pld-card.pld-featured .pld-avatar { width: 48px; height: 48px; font-size: 0.95rem; }

    .pld-name { font-size: 0.86rem; }
    .pld-card.pld-featured .pld-name { font-size: 0.94rem; }
    .pld-team { font-size: 0.7rem; }

    .pld-score-value { font-size: 1.55rem; }
    .pld-card.pld-featured .pld-score-value { font-size: 1.9rem; }

    .pld-card-header { padding-right: 46px; }
}

/* Móviles pequeños: 1 columna para nombres completos */
@media (max-width: 560px) {
    .pld-grid,
    #dashboardLeaders .pld-grid-dashboard {
        grid-template-columns: 1fr !important;   /* ← 1 columna */
        gap: 12px;
    }

    .pld-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }
    .pld-hero-icon { width: 42px; height: 42px; font-size: 1.05rem; }
    .pld-hero-title { font-size: 0.95rem; }

    .pld-category-header { padding: 11px 12px; gap: 8px; }
    .pld-category-letter { width: 34px; height: 34px; font-size: 0.95rem; }
    .pld-category-title { font-size: 0.86rem; }
    .pld-category-count { font-size: 0.6rem; padding: 3px 9px; }
    .pld-category-body { padding: 12px; }

    .pld-type-header { gap: 8px; }
    .pld-type-icon-wrap { width: 32px; height: 32px; font-size: 0.8rem; }
    .pld-type-title { font-size: 0.82rem; }

    .pld-card { border-radius: 14px; }
    .pld-card-header { padding-right: 48px; padding-top: 10px; }
    .pld-name { font-size: 0.88rem; }
    .pld-team { font-size: 0.72rem; }
    .pld-rank-1 { width: 36px; height: 36px; font-size: 1.05rem; }
    .pld-type-section { margin-bottom: 18px; }
}

/* iPhone mini y pequeños */
@media (max-width: 400px) {
    .pld-hero-title { font-size: 0.88rem; }
    .pld-hero-chip { font-size: 0.62rem; padding: 3px 8px; }

    .pld-category-letter { width: 30px; height: 30px; font-size: 0.85rem; }
    .pld-category-title { font-size: 0.8rem; }
    .pld-category-sub { font-size: 0.6rem; }
    .pld-category-body { padding: 10px; }

    .pld-type-icon-wrap { width: 28px; height: 28px; font-size: 0.72rem; }
    .pld-type-title { font-size: 0.78rem; }
    .pld-type-sub { font-size: 0.58rem; }
    .pld-type-count { font-size: 0.55rem; padding: 2px 7px; }

    .pld-card-header { padding: 10px 12px 8px; padding-right: 44px; }
    .pld-cat-badge { font-size: 0.55rem; padding: 2px 7px; }
    .pld-type-badge { font-size: 0.55rem; padding: 2px 7px; }
    .pld-type-badge i { font-size: 0.6rem; }

    .pld-card-body { padding: 12px; gap: 10px; }
    .pld-avatar { width: 38px; height: 38px; font-size: 0.8rem; }
    .pld-card.pld-featured .pld-avatar { width: 44px; height: 44px; font-size: 0.88rem; }

    .pld-name { font-size: 0.82rem; }
    .pld-card.pld-featured .pld-name { font-size: 0.9rem; }
    .pld-team { font-size: 0.66rem; }

    .pld-score-value { font-size: 1.4rem; }
    .pld-card.pld-featured .pld-score-value { font-size: 1.7rem; }
    .pld-score-unit { font-size: 0.55rem; }

    .pld-card-footer { padding: 8px 12px 10px; }
    .pld-rank { width: 28px; height: 28px; font-size: 0.8rem; top: 8px; right: 8px; }
    .pld-rank-1 { width: 34px; height: 34px; font-size: 1rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .pld-hero-icon,
    .pld-rank-1,
    .pld-card::before {
        animation: none !important;
    }
}