@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

:root {
    --bg-main: #0a0a0a;      /* Negro casi puro */
    --bg-secondary: #161616; /* Gris muy oscuro para tarjetas */
    --bg-tertiary: #242424;  /* Para inputs y elementos resaltados */
    
    --primary: #FFD700;      /* Dorado Premium */
    --success-neon: #00ff9d; /* Verde Neón */
    
    --text-high: #ffffff;    /* Blanco puro para titulos */
    --text-medium: #e0e0e0;  /* Gris claro para texto normal */
    --text-muted: #888888;   /* Gris apagado */
}

body {
    background-color: var(--bg-main);
    color: var(--text-medium);
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    color: var(--text-high) !important;
}

/* --- OVERRIDES DE BOOTSTRAP PARA MODO OSCURO TOTAL --- */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.form-control, .form-select {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid #333 !important;
    color: var(--text-high) !important;
    font-weight: 500;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.2);
}
/* Placeholder color */
::placeholder { color: var(--text-muted) !important; opacity: 1; }

/* Tablas Oscuras */
.table { color: var(--text-medium); }
.table-dark {
    --bs-table-bg: var(--bg-secondary);
    --bs-table-striped-bg: var(--bg-tertiary);
    border-color: #333;
}

/* Dropdowns y Modales Oscuros */
.dropdown-menu { background-color: var(--bg-secondary); border-color: #333; }
.dropdown-item { color: var(--text-medium); }
.dropdown-item:hover { background-color: var(--bg-tertiary); color: var(--text-high); }
.modal-content { background-color: var(--bg-secondary); border: 1px solid #333; }
.modal-header, .modal-footer { border-color: #333; }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Aspa blanca en modales */

/* --- COMPONENTES PROPIOS --- */

/* Navbar */
.navbar-premium {
    background: rgba(22, 22, 22, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

/* Cards de Partidos */
.card-match {
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.card-match:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    border-color: rgba(255, 215, 0, 0.3);
}

/* Logos */
.team-logo-container {
    height: 80px; display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
.team-logo { max-width: 75px; max-height: 75px; object-fit: contain; }

/* --- MARCADORES PROTAGONISTAS (GIGANTES) --- */
.score-hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Input Gigante */
.score-input-hero {
    width: 80px;
    height: 70px;
    font-size: 3rem; /* Tamaño enorme */
    font-weight: 800;
    text-align: center;
    padding: 0;
    background-color: #000 !important; /* Fondo negro puro para resaltar */
    border: 2px solid #333 !important;
    color: var(--primary) !important; /* Números dorados */
    border-radius: 12px;
}
.score-input-hero:focus {
    border-color: var(--success-neon) !important; /* Verde al enfocar */
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3) !important;
}

/* Separador Gigante */
.score-separator-hero {
    font-size: 3rem;
    font-weight: 300;
    color: var(--text-muted);
}

/* Display Gigante (Modo Lectura) */
.score-display-hero {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-high);
}

/* Badges de Puntos */
.badge-points { font-size: 1rem; padding: 8px 15px; border-radius: 30px; }
.badge-exact { background: var(--success-neon); color: #000; font-weight: bold; box-shadow: 0 0 10px var(--success-neon); }
.badge-result { background: var(--primary); color: #000; font-weight: bold; }

/* Tabs y Navs */
.nav-pills .nav-link.active { background-color: var(--primary) !important; color: #000 !important; font-weight: 800; }
.nav-link { color: var(--text-muted); }
.list-group-item { border-color: rgba(255,255,255,0.05) !important; }

/* --- CORRECCIONES FINALES --- */

/* Input Premium Limpio (Solución al texto encimado) */
.form-label-premium {
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 10px;
    margin-bottom: 5px;
    display: block;
    letter-spacing: 0.5px;
}

.input-group-text {
    background-color: #2c2c2c; /* Coincide con el input */
    border: 1px solid #444;
    border-right: none;
    color: var(--text-muted);
}

.form-control:focus {
    background-color: #333;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.15); /* Brillo dorado suave */
}

/* Botón Staff Amarillo Fijo */
.btn-staff {
    background-color: var(--primary) !important;
    color: #000 !important;
    font-weight: 800 !important;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); /* Resplandor inicial */
    transition: all 0.3s ease;
}

.btn-staff:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5); /* Más brillo al pasar mouse */
    background-color: #e6c200 !important;
}

/* Fix Link Logo */
.navbar-brand { cursor: pointer; }