/*
 * Sports Predictor Portal - Custom Stylesheet
 * Design Theme: "Professional Dark Mode"
 * Version: 4.0
 */

/* --- 1. PALETA DE COLORES Y ESTILOS GLOBALES --- */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    /* Paleta Principal Oscura */
    --background-dark: #121212; /* Negro profundo pero no puro para el fondo */
    --surface-color: #1E1E1E;   /* Un gris muy oscuro para superficies como tarjetas y navbars */
    --primary-action: #2962ff;  /* Un azul vibrante para acciones principales */
    --text-light: #E0E0E0;      /* Blanco ligeramente grisáceo para reducir la fatiga visual */
    --text-muted: #888;         /* Gris claro para texto secundario */
    --border-dark: #333;        /* Un borde sutil para separar elementos */

    /* Paleta de Acentos por Deporte */
    --exotic-cyan: #00FFFF;
    --exotic-magenta: #FF00FF;
    --exotic-green: #00FF7F;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-dark) !important;
    color: var(--text-light);
}

main {
    flex: 1 0 auto;
}

/* --- 2. COMPONENTES PRINCIPALES (Navbar, Footer, Cards) --- */

.navbar-dark,
.footer {
    background-color: var(--surface-color) !important;
    border-color: var(--border-dark) !important;
}

.card {
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-dark);
    color: var(--text-light);
}

.card-header, .card-footer {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-dark) !important;
}

.card-footer {
    border-top: 1px solid var(--border-dark) !important;
    border-bottom: none !important;
}

/* --- 3. SOBREESCRITURA DE COMPONENTES DE BOOTSTRAP --- */

/* Botones */
.btn-primary { background-color: var(--primary-action); border-color: var(--primary-action); }
.btn-secondary { background-color: #444; border-color: #444; color: var(--text-light); }
.btn-info { background-color: var(--exotic-cyan); border-color: var(--exotic-cyan); color: #000; } /* Para ATP */

/* Formularios y Select2 */
.form-control, .form-select, .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--background-dark);
    border-color: var(--border-dark);
    color: var(--text-light);
}
.form-control:focus, .form-select:focus {
    background-color: var(--background-dark);
    border-color: var(--primary-action);
    box-shadow: 0 0 0 0.25rem rgba(41, 98, 255, 0.25);
    color: var(--text-light);
}
.select2-container--bootstrap-5 .select2-dropdown { background-color: var(--surface-color); border-color: var(--border-dark); }
.select2-container--bootstrap-5 .select2-search__field { color: var(--text-light); }
.select2-container--bootstrap-5 .select2-results__option { color: var(--text-light); }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--primary-action); color: var(--text-light); }

/* Tablas */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-color: var(--text-light);
    --bs-table-border-color: var(--border-dark);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}
.table-dark { --bs-table-bg: var(--surface-color); }

/* Alertas */
.alert { border-width: 2px; }
.alert-warning { background-color: rgba(255, 193, 7, 0.1); border-color: #ffc107; color: #ffc107; }
.alert-info { background-color: rgba(13, 202, 240, 0.1); border-color: #0dcaf0; color: #0dcaf0; }
.alert-success { background-color: rgba(25, 135, 84, 0.1); border-color: #198754; color: #198754; }
.alert-danger { background-color: rgba(220, 53, 69, 0.1); border-color: #dc3545; color: #dc3545; }

/* Badges y Listas */
.bg-light { background-color: var(--surface-color) !important; }
.list-group-item { background-color: transparent !important; border-color: var(--border-dark); color: var(--text-light); }
.text-dark { color: var(--text-light) !important; }
.text-muted { color: var(--text-muted) !important; }

/* --- 4. ESTILOS ESPECÍFICOS DE PÁGINAS --- */

/* Página de Resultados */
.result-header { display: flex; align-items: center; justify-content: space-around; text-align: center; padding: 1rem; }
.player-profile a, .player-profile h5, .team-profile h5 { color: var(--text-light) !important; text-decoration: none; }
.player-photo { border: 3px solid var(--border-dark); }
.vs-separator { color: var(--text-muted); }

/* Barras de Progreso (Resultados) */
.progress { background-color: rgba(255, 255, 255, 0.1); }
.progress-bar[style*="--exotic-cyan"] { color: #000 !important; } /* Texto negro para barras claras */
.progress-bar[style*="--exotic-magenta"] { color: #000 !important; }

/* Página de Inicio */
.hero-section { background: var(--surface-color); }
.icon-feature { text-shadow: 0 0 15px currentColor; }

/* Pestañas de LaLiga */
.predictor-tabs .nav-link { color: var(--text-muted); }
.predictor-tabs .nav-link.active::after { background: linear-gradient(135deg, var(--exotic-cyan), var(--exotic-magenta)); }
.calendar-link { color: var(--exotic-cyan); }