/* ============================================
🎾 COURT SIGHT TENNIS - SIMULADOR CSS
🎨 TEMA: PRO CIRCUIT DARK (Tenis Premium Nocturno)
📦 VERSIÓN: 1.0 - Pestañas + Módulos En Desarrollo
============================================ */

/* ============================================
🔹 BASE & HEADER
============================================ */
.page-simulador {
    background: var(--bg-primary);
}

.main-simulador {
    padding: 1.5rem 1rem 2rem;
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    min-height: calc(100vh - 140px);
}

@media (min-width: 1024px) {
    .main-simulador {
        padding: 2rem 2.5rem;
        margin-left: 260px;
    }
}

.header-simulador {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
🔹 SECCIÓN HEADER
============================================ */
.section-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem 0;
}

.section-title i { color: var(--accent); font-size: 1.3rem; }

.section-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 500px;
    line-height: 1.5;
}

/* ============================================
🔹 PESTAÑAS (TABS)
============================================ */
.sim-tabs-wrapper {
    margin-bottom: 1.5rem;
}

.sim-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    width: fit-content;
    box-shadow: var(--shadow-sm);
}

.sim-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.sim-tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}

.sim-tab.active {
    background: var(--accent-dim);
    color: var(--text-primary);
    box-shadow: 0 0 12px var(--accent-glow);
}

.sim-tab.active i { color: var(--accent); }

.tab-status {
    font-size: 0.65rem;
    background: var(--bg-primary);
    color: var(--text-muted);
    padding: 0.15rem 0.4rem;
    border-radius: 9999px;
    font-weight: 500;
    border: 1px solid var(--border);
}

.sim-tab.active .tab-status {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    font-weight: 700;
}

/* ============================================
🔹 PANELES Y TARJETAS EN DESARROLLO
============================================ */
.sim-panels {
    position: relative;
    min-height: 400px;
}

.sim-panel {
    display: none;
    animation: fadeSlide 0.35s ease-out;
}

.sim-panel.active {
    display: block;
}

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

.dev-module-card {
    background: linear-gradient(145deg, var(--bg-card), var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.dev-card-glow {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
    opacity: 0.4;
    pointer-events: none;
    animation: glowPulse 6s ease-in-out infinite;
}

.custom-glow {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    left: auto;
    right: -10%;
    top: auto;
    bottom: -20%;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

.dev-card-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.dev-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dev-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border: 1px solid var(--border);
}

.live-icon { background: rgba(184, 212, 50, 0.1); color: var(--accent); }
.custom-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.dev-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.live-badge { background: rgba(184, 212, 50, 0.15); color: var(--accent); border: 1px solid var(--accent); }
.custom-badge { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid #3b82f6; }

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.5s infinite;
}

.dev-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.dev-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.dev-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: grid;
    gap: 0.6rem;
}

.dev-features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.dev-features i {
    color: var(--accent);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.dev-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: not-allowed;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.dev-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dev-note i { color: var(--accent); }

/* ============================================
🔹 RESPONSIVE
============================================ */
@media (max-width: 768px) {
    .main-simulador { padding: 1rem 0.75rem 1.5rem; }
    
    .section-title { font-size: 1.3rem; }
    .section-subtitle { font-size: 0.85rem; }
    
    .sim-tabs { width: 100%; flex-direction: column; }
    .sim-tab { width: 100%; justify-content: space-between; }
    
    .dev-module-card { padding: 1.5rem; }
    .dev-title { font-size: 1.2rem; }
    .dev-desc { font-size: 0.9rem; }
    .dev-actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .dev-header { flex-direction: column; align-items: flex-start; }
    .dev-features li { font-size: 0.85rem; }
}

/* ============================================
🔹 UTILIDADES & ACCESIBILIDAD
============================================ */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible */
.sim-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================
🔧 FIX: HEADER COMPACTO UNIFICADO (Igual que Pronósticos)
============================================ */
.header-simulador {
    min-height: 64px !important;
    padding: 0.6rem 1rem !important;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Logo y texto proporcionales */
.header-simulador .logo-img { width: 32px; height: 32px; }
.header-simulador .logo-text { font-size: 1rem; }
.header-simulador .logo-pro { font-size: 0.5rem; padding: 1px 4px; }

/* 🔹 Sidebar y Overlay alineados exactamente debajo del header */
.sidebar { top: 64px !important; height: calc(100vh - 64px) !important; }
.sidebar-overlay { top: 64px !important; height: calc(100vh - 64px) !important; }

/* Responsive: Tablet */
@media (max-width: 768px) {
    .header-simulador { min-height: 60px !important; padding: 0.5rem 0.75rem !important; }
    .sidebar { top: 60px !important; height: calc(100vh - 60px) !important; }
    .sidebar-overlay { top: 60px !important; height: calc(100vh - 60px) !important; }
}

/* Responsive: Móvil pequeño */
@media (max-width: 480px) {
    .header-simulador { min-height: 56px !important; }
    .sidebar { top: 56px !important; height: calc(100vh - 56px) !important; }
    .sidebar-overlay { top: 56px !important; height: calc(100vh - 56px) !important; }
}
/* ============================================
🔹 SELECTOR DE CIRCUITO (ATP / CHALLENGER)
============================================ */
.circuit-selector {
    margin-bottom: 1.5rem;
}

.circuit-selector label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.circuit-selector label i {
    color: var(--accent);
}

.circuit-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.circuit-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.circuit-option:hover {
    border-color: var(--gold-light);
    background: var(--gold-dim);
}

.circuit-option.active {
    border-color: var(--gold);
    background: var(--gold-dim);
    color: var(--text-primary);
    box-shadow: 0 0 12px var(--shadow-gold);
}

.circuit-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--bg-primary);
    padding: 2px;
}

/* ============================================
🔹 FORMULARIO DE SIMULACIÓN
============================================ */
.simulate-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.players-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.player-section {
    position: relative;
    z-index: 10;
    background: var(--bg-primary);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.player-section label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.player-section label i {
    color: var(--accent);
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    z-index: 5;
}

.search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 0.25rem;
    box-shadow: var(--shadow-lg);
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: var(--accent-dim);
}

.sugg-flag {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--border);
    object-fit: cover;
}

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

.sugg-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sugg-rank {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.selected-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.selected-flag {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--border);
    object-fit: cover;
}

.selected-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.selected-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-elo {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 700;
}

.player-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.btn-adjust,
.remove-player {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: all 0.2s ease;
}

.btn-adjust:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.remove-player:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.vs-divider {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--accent);
    padding: 1rem 0.5rem;
    text-align: center;
    white-space: nowrap;
    align-self: center;
}

.form-section {
    margin-bottom: 1.25rem;
}

.form-section label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.form-section label i {
    color: var(--accent);
}

.form-select,
.form-input {
    width: 100%;
    padding: 0.7rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.form-input-small {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

/* Cuotas */
.odds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.odds-house {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.odds-house-header {
    margin-bottom: 0.5rem;
}

.odds-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.odds-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.form-odds {
    width: 70px;
    padding: 0.4rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.form-odds:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.odds-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.odds-hint i {
    color: var(--accent);
}

.btn-simulate {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    color: var(--bg-primary);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: all 0.2s ease;
}

.btn-simulate:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-simulate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Loading & Simulating */
.loading-state,
.simulating-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: 1.5rem;
}

.spinner,
.spinner-large {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.spinner-large {
    font-size: 3.5rem;
}

.spinner i,
.spinner-large i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-state p,
.simulating-state p {
    color: var(--text-secondary);
}

.progress-container {
    margin-top: 1rem;
    width: 100%;
    max-width: 300px;
}

.progress-bar {
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Resultados */
.results-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.results-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s;
    animation: fadeInUp 0.4s ease-out;
}

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

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.results-title {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.btn-new-sim {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-new-sim:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

.matchup-player-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.matchup-player {
    text-align: center;
    padding: 0.5rem;
}

.matchup-flag {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border);
    margin: 0 auto 0.5rem;
}

.matchup-name {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.matchup-elo {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.matchup-prob {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prob-number {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
}

.prob-number.player-1-win {
    color: var(--success);
}

.prob-number.player-2-win {
    color: var(--danger);
}

.prob-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.player-odds-card {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-top: 0.5rem;
}

.player-odds-card .odds-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.player-odds-card .odds-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
}

.matchup-vs {
    font-weight: 800;
    font-size: 1rem;
    color: var(--accent);
    padding: 0.5rem;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.stat-icon {
    font-size: 1.2rem;
    color: var(--accent);
    margin-bottom: 0.4rem;
    display: block;
}

.stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.recommendation-box {
    padding: 1.25rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.recommendation-box h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.recommendation-text {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9rem;
}

.recommendation-text.challenger-over {
    color: var(--warning);
    font-weight: 700;
}

.recommendation-text.challenger-value {
    color: var(--success);
    font-weight: 700;
}

/* Historial */
.history-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.history-title {
    font-size: 0.95rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.history-item .players {
    font-weight: 600;
    color: var(--text-primary);
}

.history-item .meta {
    font-size: 0.7rem;
    opacity: 0.8;
}

.history-item .winner {
    font-weight: 700;
    color: var(--accent);
}

/* Error message */
.error-msg {
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--danger);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

/* ============================================
🔹 BOTTOM SHEET - PANEL DE AJUSTES
============================================ */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s, opacity 0.3s ease;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.25rem;
}

.bottom-sheet.hidden {
    display: none;
}

.bottom-sheet:not(.hidden) {
    display: block;
}

.bottom-sheet.active {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s, opacity 0.3s ease;
}

.sheet-header {
    padding: 0.75rem 0;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 0.75rem;
}

.sheet-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

#adjust-player-name {
    color: var(--accent);
}

.btn-close {
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover {
    color: var(--text-primary);
}

.sheet-content {
    padding: 0 0.25rem;
}

.adjust-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.adjust-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.adjust-section h4 {
    margin: 0 0 0.75rem 0;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.radio-group label:hover {
    background: var(--accent-dim);
}

.radio-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.radio-group input[type="radio"]:checked {
    border-color: var(--accent);
}

.radio-group input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent);
    border-radius: 50%;
}

.btn-primary {
    width: 100%;
    padding: 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    color: var(--bg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-glow);
}

/* ============================================
🔹 RESPONSIVE
============================================ */
@media (max-width: 1024px) {
    .players-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .vs-divider {
        padding: 0.4rem 0;
        transform: rotate(90deg);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .circuit-options {
        flex-direction: column;
    }
    
    .circuit-option {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .main-simulador {
        padding: 1rem 0.75rem 1.5rem;
    }
    
    .section-title {
        font-size: 1.2rem;
    }
    
    .section-subtitle {
        font-size: 0.8rem;
    }
    
    .simulate-container,
    .results-container {
        padding: 1rem;
        margin: 0 0.5rem;
    }
    
    .players-grid {
        gap: 0.75rem;
    }
    
    .player-section {
        padding: 0.8rem;
    }
    
    .vs-divider {
        transform: rotate(90deg);
        padding: 0.3rem 0;
        font-size: 1rem;
    }
    
    .search-input,
    .form-select,
    .form-input {
        padding: 0.6rem;
        font-size: 0.85rem;
    }
    
    .search-input {
        padding-left: 2.3rem;
    }
    
    .search-box i {
        left: 0.7rem;
    }
    
    .odds-grid {
        grid-template-columns: 1fr;
    }
    
    .suggestions-list {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 200px;
        z-index: 100 !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    }
    
    .selected-player {
        padding: 0.6rem;
        gap: 0.5rem;
    }
    
    .selected-flag {
        width: 28px;
        height: 28px;
    }
    
    .selected-name {
        font-size: 0.85rem;
    }
    
    .player-actions {
        gap: 0.25rem;
    }
    
    .btn-adjust,
    .remove-player {
        width: 26px;
        height: 26px;
        padding: 0.25rem;
    }
    
    .btn-simulate {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    .matchup-player-card {
        padding: 0.8rem;
    }
    
    .matchup-flag {
        width: 40px;
        height: 40px;
    }
    
    .matchup-name {
        font-size: 0.9rem;
    }
    
    .prob-number {
        font-size: 1.5rem;
    }
    
    .player-odds-card .odds-value {
        font-size: 1.2rem;
    }
    
    .stats-grid {
        gap: 0.5rem;
    }
    
    .stat-card {
        padding: 0.6rem 0.4rem;
    }
    
    .stat-label {
        font-size: 0.6rem;
    }
    
    .stat-value {
        font-size: 0.8rem;
    }
    
    .results-header {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    
    .btn-new-sim {
        width: 100%;
        justify-content: center;
    }
    
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
    
    .bottom-sheet {
        padding: 1rem;
    }
    
    .sheet-header h3 {
        font-size: 1rem;
    }
    
    .radio-group label {
        font-size: 0.8rem;
        padding: 0.5rem 0.7rem;
    }
}

@media (max-width: 480px) {
    .main-simulador {
        padding: 0.75rem 0.5rem 1rem;
    }
    
    .simulate-container,
    .results-container {
        padding: 0.75rem;
        margin: 0 0.25rem;
    }
    
    .section-title {
        font-size: 1.1rem;
    }
    
    .search-input,
    .form-select,
    .form-input {
        padding: 0.5rem 0.5rem 0.5rem 2rem;
        font-size: 0.8rem;
    }
    
    .suggestions-list {
        max-height: 180px;
    }
    
    .suggestion-item {
        padding: 0.5rem 0.75rem;
    }
    
    .sugg-flag {
        width: 24px;
        height: 24px;
    }
    
    .matchup-flag {
        width: 36px;
        height: 36px;
    }
    
    .prob-number {
        font-size: 1.3rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    
    .stat-card {
        padding: 0.5rem 0.3rem;
    }
    
    .stat-label {
        font-size: 0.55rem;
    }
    
    .stat-value {
        font-size: 0.75rem;
    }
    
    .circuit-logo {
        width: 24px;
        height: 24px;
    }
    
    .circuit-option {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ============================================
🔹 UTILIDADES & ACCESIBILIDAD
============================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none !important;
}

.mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.02em;
}

/* Scrollbar personalizado */
.suggestions-list::-webkit-scrollbar,
.bottom-sheet::-webkit-scrollbar {
    width: 6px;
}

.suggestions-list::-webkit-scrollbar-track,
.bottom-sheet::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 3px;
}

.suggestions-list::-webkit-scrollbar-thumb,
.bottom-sheet::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.suggestions-list::-webkit-scrollbar-thumb:hover,
.bottom-sheet::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Focus visible */
.search-input:focus-visible,
.form-select:focus-visible,
.form-odds:focus-visible,
.btn-simulate:focus-visible,
.btn-new-sim:focus-visible,
.circuit-option:focus-visible,
.radio-group input[type="radio"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ============================================
🔹 RECOMENDACIÓN PREMIUM CON RATIO
============================================ */
.recommendation-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: slideInUp 0.4s ease-out;
}

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

.recommendation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transition: background 0.3s ease;
}

/* Estados por tipo de recomendación */
.recommendation-card.validacion {
    border-color: var(--scenario-validacion);
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.15);
}
.recommendation-card.validacion::before {
    background: linear-gradient(90deg, var(--scenario-validacion), #34d399);
}
.recommendation-card.validacion .rec-icon {
    color: var(--scenario-validacion);
}

.recommendation-card.inversion {
    border-color: var(--scenario-inversion);
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.15);
}
.recommendation-card.inversion::before {
    background: linear-gradient(90deg, var(--scenario-inversion), #7dd3fc);
}
.recommendation-card.inversion .rec-icon {
    color: var(--scenario-inversion);
}

.recommendation-card.discrepancia {
    border-color: var(--scenario-discrepancia);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.15);
}
.recommendation-card.discrepancia::before {
    background: linear-gradient(90deg, var(--scenario-discrepancia), #fbbf24);
}
.recommendation-card.discrepancia .rec-icon {
    color: var(--scenario-discrepancia);
}

.recommendation-card.neutro {
    border-color: var(--scenario-neutro);
    opacity: 0.9;
}
.recommendation-card.neutro::before {
    background: linear-gradient(90deg, var(--scenario-neutro), #94a3b8);
}
.recommendation-card.neutro .rec-icon {
    color: var(--scenario-neutro);
}

/* Header de recomendación */
.rec-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.rec-icon {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}

.recommendation-card:hover .rec-icon {
    transform: scale(1.1);
}

.rec-label {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

.rec-ratio {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid var(--accent);
    cursor: help;
    transition: all 0.2s ease;
}

.rec-ratio:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

/* Cuerpo de recomendación */
.rec-body {
    margin-bottom: 0.75rem;
}

.rec-bet-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.rec-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.rec-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.rec-detail i {
    color: var(--accent);
    font-size: 0.75rem;
}

/* Footer de recomendación */
.rec-footer {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.rec-disclaimer {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rec-disclaimer i {
    color: var(--accent);
}

/* ============================================
🔹 BADGES DE ESTADO MEJORADOS
============================================ */
.badge-status[data-status="live"] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-live);
    border: 1px solid var(--status-live);
    animation: pulse-border 2s infinite;
    position: relative;
}

.badge-status[data-status="live"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: inherit;
    border: 2px solid var(--status-live);
    animation: ripple 2s infinite;
    pointer-events: none;
}

@keyframes ripple {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px transparent; }
}

/* ============================================
🔹 TOOLTIP PARA RATIO
============================================ */
.rec-ratio[title] {
    position: relative;
}

.rec-ratio[title]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    pointer-events: none;
    font-weight: 500;
}

.rec-ratio[title]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

/* ============================================
🔹 MICRO-INTERACCIONES EN TARJETAS
============================================ */
.match-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.match-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg), 0 0 32px rgba(184, 212, 50, 0.15);
}

.match-card:hover .player-name {
    color: var(--text-primary);
}

.match-card:hover .flag-sm {
    transform: scale(1.08);
    box-shadow: 0 0 12px var(--accent-glow);
}

/* ============================================
🔹 ANIMACIONES ADICIONALES
============================================ */
@keyframes glowPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.recommendation-card.validacion .rec-icon,
.recommendation-card.inversion .rec-icon,
.recommendation-card.discrepancia .rec-icon {
    animation: glowPulse 3s ease-in-out infinite;
}

/* ============================================
🔹 RESPONSIVE PARA RECOMENDACIÓN
============================================ */
@media (max-width: 768px) {
    .recommendation-card {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .rec-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .rec-ratio {
        margin-left: 0;
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 0.25rem;
    }
    
    .rec-bet-text {
        font-size: 1rem;
    }
    
    .rec-details {
        flex-direction: column;
        gap: 0.4rem;
    }
    
    .rec-detail {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .recommendation-card {
        padding: 0.85rem;
    }
    
    .rec-label {
        font-size: 0.8rem;
    }
    
    .rec-bet-text {
        font-size: 0.95rem;
    }
    
    .rec-detail {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}

/* ============================================
🔹 ACCESIBILIDAD & PREFERENCIAS
============================================ */
@media (prefers-reduced-motion: reduce) {
    .recommendation-card,
    .match-card,
    .rec-icon {
        animation: none !important;
        transition: none !important;
    }
    
    .badge-status[data-status="live"]::after {
        animation: none !important;
    }
}

@media (prefers-contrast: high) {
    .recommendation-card {
        border-width: 3px;
    }
    
    .rec-ratio {
        border-width: 2px;
    }
}

/* Focus visible para accesibilidad */
.rec-ratio:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* ============================================
🎯 RECOMENDACIÓN PREMIUM - DISEÑO TECNOLÓGICO
============================================ */

.recommendation-premium {
    background: linear-gradient(145deg, var(--bg-card), var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.recommendation-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--scenario-neutro), var(--scenario-validacion), var(--scenario-discrepancia), var(--scenario-inversion));
    opacity: 0.6;
}

/* Header de recomendación */
.rec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.rec-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-primary);
    border: 1px solid var(--border);
}

.rec-type-badge.inversion {
    background: rgba(56, 189, 248, 0.15);
    color: var(--scenario-inversion);
    border-color: var(--scenario-inversion);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.rec-type-badge.discrepancia {
    background: rgba(245, 158, 11, 0.15);
    color: var(--scenario-discrepancia);
    border-color: var(--scenario-discrepancia);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.rec-type-badge.validacion {
    background: rgba(16, 185, 129, 0.15);
    color: var(--scenario-validacion);
    border-color: var(--scenario-validacion);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.rec-type-badge.neutro {
    background: rgba(100, 116, 139, 0.15);
    color: var(--scenario-neutro);
    border-color: var(--scenario-neutro);
}

.rec-icon {
    font-size: 1rem;
}

.rec-ratio-display {
    text-align: right;
}

.ratio-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ratio-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* Barra visual de ratio */
.ratio-visualizer {
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.ratio-scale {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.scale-mark {
    position: relative;
    cursor: help;
}

.scale-mark::after {
    content: attr(data-value);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ratio-track {
    position: relative;
    height: 24px;
    background: var(--bg-primary);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.ratio-zones {
    display: flex;
    height: 100%;
}

.zone {
    height: 100%;
    transition: opacity 0.3s ease;
}

.zone.validacion {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1));
    border-right: 1px solid rgba(16, 185, 129, 0.3);
}

.zone.neutro {
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.2), rgba(100, 116, 139, 0.05));
    border-right: 1px solid rgba(100, 116, 139, 0.2);
}

.zone.discrepancia {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
    border-right: 1px solid rgba(245, 158, 11, 0.3);
}

.zone.inversion {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.4), rgba(56, 189, 248, 0.15));
}

.ratio-marker {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.marker-dot {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: 3px solid var(--bg-primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-glow);
    animation: pulse 2s infinite;
}

.marker-label {
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-family: var(--font-mono);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 12px var(--accent-glow); }
    50% { box-shadow: 0 0 24px var(--accent-glow), 0 0 36px var(--accent-glow); }
}

/* Contenido principal */
.rec-content {
    margin-bottom: 1.25rem;
}

.rec-main {
    margin-bottom: 1.25rem;
}

.rec-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rec-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--accent);
    border-radius: 2px;
}

.rec-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Detalles de la apuesta */
.rec-details {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

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

.detail-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.detail-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-value.bet-text {
    color: var(--accent);
    font-weight: 700;
}

#rec-line-row.hidden {
    display: none;
}

/* Explicación contextual */
.rec-explanation {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(184, 212, 50, 0.05);
    border: 1px solid rgba(184, 212, 50, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.explanation-icon {
    color: var(--accent);
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Footer */
.rec-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-copy-rec {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-rec:hover:not(:disabled) {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-copy-rec:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rec-disclaimer {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rec-disclaimer i {
    color: var(--accent);
}

/* ============================================
🔹 ESTADOS DINÁMICOS POR TIPO DE RECOMENDACIÓN
============================================ */

/* Inversión de mercado */
.recommendation-premium[data-type="inversion"] {
    border-left: 4px solid var(--scenario-inversion);
}

.recommendation-premium[data-type="inversion"] .rec-title::before {
    background: var(--scenario-inversion);
}

.recommendation-premium[data-type="inversion"] .marker-dot {
    background: var(--scenario-inversion);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

/* Discrepancia */
.recommendation-premium[data-type="discrepancia"] {
    border-left: 4px solid var(--scenario-discrepancia);
}

.recommendation-premium[data-type="discrepancia"] .rec-title::before {
    background: var(--scenario-discrepancia);
}

.recommendation-premium[data-type="discrepancia"] .marker-dot {
    background: var(--scenario-discrepancia);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

/* Validación */
.recommendation-premium[data-type="validacion"] {
    border-left: 4px solid var(--scenario-validacion);
}

.recommendation-premium[data-type="validacion"] .rec-title::before {
    background: var(--scenario-validacion);
}

.recommendation-premium[data-type="validacion"] .marker-dot {
    background: var(--scenario-validacion);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

/* Neutro */
.recommendation-premium[data-type="neutro"] {
    border-left: 4px solid var(--scenario-neutro);
}

.recommendation-premium[data-type="neutro"] .rec-title::before {
    background: var(--scenario-neutro);
}

.recommendation-premium[data-type="neutro"] .marker-dot {
    background: var(--scenario-neutro);
    box-shadow: 0 0 12px rgba(100, 116, 139, 0.6);
}

/* ============================================
🔹 ANIMACIONES Y MICRO-INTERACCIONES
============================================ */

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

.recommendation-premium {
    animation: fadeInUp 0.4s ease-out;
}

/* Efecto hover en la tarjeta */
.recommendation-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(184, 212, 50, 0.1);
}

/* Animación al actualizar recomendación */
.recommendation-premium.updating .rec-content {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================
🔹 RESPONSIVE
============================================ */

@media (max-width: 768px) {
    .rec-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .rec-ratio-display {
        text-align: left;
    }
    
    .ratio-scale {
        font-size: 0.65rem;
    }
    
    .ratio-track {
        height: 20px;
    }
    
    .marker-dot {
        width: 14px;
        height: 14px;
    }
    
    .rec-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .btn-copy-rec {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .recommendation-premium {
        padding: 1.25rem;
    }
    
    .rec-title {
        font-size: 1.1rem;
    }
    
    .ratio-value {
        font-size: 1.2rem;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .detail-value {
        text-align: left;
        max-width: 100%;
    }
}

/* ============================================
🔹 ACCESIBILIDAD
============================================ */

@media (prefers-reduced-motion: reduce) {
    .recommendation-premium,
    .ratio-marker,
    .marker-dot {
        animation: none !important;
        transition: none !important;
    }
}

.recommendation-premium:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================
🔹 SELECTORES DE JUGADORES - DISEÑO REFINADO
============================================ */

.player-section {
    background: linear-gradient(145deg, var(--bg-card), var(--bg-secondary));
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: relative;
    transition: all 0.3s ease;
}

.player-section:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(184, 212, 50, 0.1);
    transform: translateY(-2px);
}

.player-section label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.player-section label i {
    color: var(--accent);
    font-size: 1.1rem;
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    z-index: 5;
    font-size: 0.95rem;
}

.search-input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    background: var(--bg-secondary);
}

.search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Jugador seleccionado - estilo refinado */
.selected-player {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.selected-player:hover {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.selected-flag {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.selected-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.selected-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-elo {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 700;
    font-family: var(--font-mono);
}

/* ============================================
🔹 CUOTAS - CASA FIJA
============================================ */

.odds-fixed-house {
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 0.5rem;
}

.house-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
}

.house-name-fixed {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centra el texto dentro del badge */
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: #ffffff; /* Texto blanco para mejor contraste con el azul */
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); /* Degradado Azul Profesional */
    padding: 0.4rem 1.2rem; /* Un poco más ancho para centrado visual */
    border-radius: 8px; /* Bordes ligeramente más suaves */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
    min-width: 120px; /* Asegura un ancho mínimo equilibrado */
}

.odds-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.odds-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.odds-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 28px;
}

.form-odds {
    flex: 1;
    padding: 0.6rem;
    text-align: center;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-mono);
    transition: all 0.2s ease;
}

.form-odds:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
    background: var(--bg-secondary);
}

/* ============================================
🔹 RECOMENDACIÓN - DETALLES SIMPLIFICADOS
============================================ */

.rec-details-simple {
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.simple-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

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

.simple-detail-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.simple-detail-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
    max-width: 65%;
    line-height: 1.4;
}

.simple-detail-value.bet-text {
    color: var(--accent);
    font-weight: 800;
}

/* ============================================
🔹 RESULTADOS - TARJETAS DE JUGADORES REFINADAS
============================================ */

.matchup-player-card {
    background: linear-gradient(145deg, var(--bg-card), var(--bg-secondary));
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.matchup-player-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}

.matchup-player-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(184, 212, 50, 0.15);
    transform: translateY(-2px);
}

.matchup-player {
    text-align: center;
    padding: 0.5rem;
}

.matchup-flag {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--border);
    margin: 0 auto 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.3s ease;
}

.matchup-player-card:hover .matchup-flag {
    transform: scale(1.05);
    border-color: var(--accent);
}

.matchup-name {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.matchup-elo {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    font-family: var(--font-mono);
}

.matchup-prob {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
}

.prob-number {
    font-size: 2rem;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    letter-spacing: -0.02em;
}

.prob-number.player-1-win {
    color: var(--scenario-validacion);
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.prob-number.player-2-win {
    color: var(--scenario-inversion);
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

.prob-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.35rem;
}

.player-odds-card {
    text-align: center;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    margin-top: 0.75rem;
}

.player-odds-card .odds-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.player-odds-card .odds-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.02em;
}

/* ============================================
🔹 VS DIVIDER - ESTILO REFINADO
============================================ */

.vs-divider {
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--accent);
    padding: 1rem 0.5rem;
    text-align: center;
    white-space: nowrap;
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
}

.vs-divider::before,
.vs-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border));
}

.vs-divider::before {
    left: 0;
}

.vs-divider::after {
    right: 0;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* ============================================
🔹 STATS GRID - TARJETAS REFINADAS
============================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(145deg, var(--bg-card), var(--bg-primary));
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 212, 50, 0.1);
}

.stat-icon {
    font-size: 1.3rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
    display: block;
}

.stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.stat-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* ============================================
🔹 RESPONSIVE REFINADO
============================================ */

@media (max-width: 768px) {
    .player-section {
        padding: 1rem;
    }
    
    .odds-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    
    .stat-card {
        padding: 0.85rem 0.6rem;
    }
    
    .matchup-flag {
        width: 48px;
        height: 48px;
    }
    
    .prob-number {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .player-section {
        padding: 0.85rem;
    }
    
    .search-input {
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        font-size: 0.9rem;
    }
    
    .selected-flag {
        width: 32px;
        height: 32px;
    }
    
    .house-name-fixed {
        font-size: 0.85rem;
        padding: 0.35rem 0.7rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .matchup-flag {
        width: 44px;
        height: 44px;
    }
    
    .prob-number {
        font-size: 1.4rem;
    }
}
/* ============================================
🎯 TARJETAS DE JUGADORES - DISEÑO PREMIUM
============================================ */

.matchup-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    position: relative;
}

/* Tarjeta de jugador base */
.player-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease-out;
}

.player-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}

.player-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 32px rgba(184, 212, 50, 0.15), 0 0 48px rgba(184, 212, 50, 0.08);
    transform: translateY(-2px);
}

/* Tarjeta del favorito */
.player-card.is-favorite {
    border-color: var(--accent);
    background: linear-gradient(145deg, rgba(184, 212, 50, 0.08) 0%, var(--bg-secondary) 100%);
}

.player-card.is-favorite::before {
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover), var(--accent));
    opacity: 1;
    animation: shimmerBar 2s ease-in-out infinite;
}

@keyframes shimmerBar {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Header de tarjeta */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(180deg, var(--bg-card) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}

.player-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.player-flag-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--border);
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.player-card:hover .player-flag-lg {
    border-color: var(--accent);
    box-shadow: 0 4px 20px rgba(184, 212, 50, 0.2);
}

.player-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.player-name-lg {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.02em;
}

.player-elo-display {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 600;
}

.card-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-type-badge i {
    color: var(--accent);
}

/* Cuerpo de tarjeta */
.card-body {
    padding: 1.5rem;
    text-align: center;
}

.prob-display {
    margin-bottom: 1.25rem;
}

.prob-value-wrapper {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.prob-number {
    font-size: 2.5rem;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    letter-spacing: -0.02em;
}

.prob-number.prob-number-1 {
    color: var(--scenario-validacion);
    text-shadow: 0 0 24px rgba(16, 185, 129, 0.3);
}

.prob-number.prob-number-2 {
    color: var(--scenario-inversion);
    text-shadow: 0 0 24px rgba(56, 189, 248, 0.3);
}

.prob-symbol {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
}

.prob-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* Barra de probabilidad */
.prob-bar-container {
    margin-top: 1rem;
}

/* Barra de probabilidad - Fondo */
.prob-bar-bg {
    height: 12px; /* Un poco más gruesa para mejor visibilidad */
    background: var(--bg-primary);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); /* Profundidad */
}

/* Barra de probabilidad - Relleno */
.prob-bar-fill {
    height: 100%;
    width: 0%; /* IMPORTANTE: Empieza en 0 */
    border-radius: 6px;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); /* Animación suave */
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo en movimiento */
.prob-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(
        90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.2) 50%, 
        rgba(255,255,255,0) 100%
    );
    animation: shimmerBar 2s infinite linear;
}

/* Colores específicos para Jugador 1 y 2 */
.prob-bar-fill-1 {
    background: linear-gradient(90deg, #10b981, #34d399);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.prob-bar-fill-2 {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

@keyframes shimmerBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.prob-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Footer de tarjeta */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(0deg, var(--bg-primary) 0%, transparent 100%);
    border-top: 1px solid var(--border);
}

.odds-display {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.odds-label-sm {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.odds-value-lg {
    font-size: 1.4rem;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* Indicador de favorito */
.favorite-indicator {
    display: none; /* Se muestra solo si es favorito */
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--bg-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px var(--accent-glow);
    animation: pulse 2s ease-in-out infinite;
}

.favorite-indicator.is-favorite {
    display: inline-flex;
}

.favorite-indicator i {
    font-size: 0.9rem;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 12px var(--accent-glow); }
    50% { box-shadow: 0 4px 20px var(--accent-glow), 0 0 32px var(--accent-glow); }
}

/* ============================================
🔹 VS DIVIDER PREMIUM
============================================ */

.vs-divider-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    position: relative;
    z-index: 10;
}

.vs-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.4;
}

.vs-badge-premium {
    margin: 0 1rem;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px var(--accent-glow);
    border: 3px solid var(--bg-primary);
    animation: pulse 2s ease-in-out infinite;
}

.vs-text-premium {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--bg-primary);
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ============================================
🔹 STATS GRID PREMIUM
============================================ */

.stats-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card-premium {
    background: linear-gradient(145deg, var(--bg-card), var(--bg-primary));
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card-premium:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(184, 212, 50, 0.15);
}

.stat-icon-premium {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border: 1px solid var(--accent);
}

.stat-icon-premium i {
    font-size: 1.2rem;
    color: var(--accent);
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label-premium {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value-premium {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* ============================================
🔹 RESULTADOS CONTAINER
============================================ */

.results-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
    max-width: 800px;
    margin: 0 auto;
}

.results-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s 0s;
    animation: fadeInUp 0.6s ease-out;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
    gap: 1rem;
}

.results-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}

.results-title i {
    color: var(--accent);
}

.results-badge {
    padding: 0.3rem 0.7rem;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-new-sim {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    color: var(--text-primary);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-new-sim:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

/* ============================================
🔹 RESPONSIVE
============================================ */

@media (max-width: 768px) {
    .matchup-container {
        gap: 0.5rem;
    }
    
    .card-header {
        padding: 1.25rem;
    }
    
    .player-flag-lg {
        width: 48px;
        height: 48px;
    }
    
    .player-name-lg {
        font-size: 1rem;
    }
    
    .prob-number {
        font-size: 2rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    .card-footer {
        padding: 1rem 1.25rem;
    }
    
    .odds-value-lg {
        font-size: 1.2rem;
    }
    
    .vs-badge-premium {
        width: 40px;
        height: 40px;
    }
    
    .vs-text-premium {
        font-size: 1rem;
    }
    
    .stats-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-card-premium {
        padding: 1rem;
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .btn-new-sim {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .card-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .player-badge {
        width: 100%;
    }
    
    .card-type-badge {
        align-self: flex-start;
    }
    
    .prob-number {
        font-size: 1.8rem;
    }
    
    .prob-symbol {
        font-size: 1.2rem;
    }
    
    .card-footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .favorite-indicator {
        align-self: flex-start;
    }
    
    .vs-line {
        display: none;
    }
    
    .stats-grid-premium {
        grid-template-columns: 1fr 1fr;
    }
    
    .stat-icon-premium {
        width: 40px;
        height: 40px;
    }
    
    .stat-icon-premium i {
        font-size: 1rem;
    }
}

/* ============================================
🔹 ENCABEZADO DE PRONÓSTICO
============================================ */

.pronostico-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pronostico-header i {
    color: var(--accent);
    font-size: 1.1rem;
}

/* Ajuste opcional: mejorar la caja de detalles */
.rec-details-simple {
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.simple-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

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

.simple-detail-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.simple-detail-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
    max-width: 65%;
    line-height: 1.4;
}

.simple-detail-value.bet-text {
    color: var(--accent);
    font-weight: 800;
}