:root {
    /* Paleta de colores (Flat Dark & High Contrast) */
    --bg-dark-main: #1E293B;     /* Fondo general ultra oscuro */
    --bg-dark-card: #334155;     /* Fondo de tarjetas y bloques */
    --border-flat: #242933;      /* Bordes sutiles y planos */
    --text-muted: #8A94A6;       /* Gris para textos secundarios y fechas */
    --accent-green: #00FF88;     /* El verde vibrante para detalles/goles */
    --accent-live: #FF3838;      /* Rojo para estados en vivo o alertas */
    --accent-gold: #FFBF00;
    --accent-blue: #7CC6FE;
    --light-main: #F9FAFB;

    /* CSS HEX --> Coolors.co*/
    --cf3-charcoal-blue: #334155ff;
    --cf3-deep-blue: #1e293bff;
    --cf3-green: #00ff88ff;
    --cf3-cinnabar: #ff3838ff;
    --cf3-amber-gold: #ffbf00ff;

    /* CSS HSL */
    --cf3-hsl-charcoal-blue: hsla(215, 25%, 27%, 1);
    --cf3-hsl-deep-blue: hsla(217, 33%, 17%, 1);
    --cf3-hsl-green: hsla(152, 100%, 50%, 1);
    --cf3-hsl-cinnabar: hsla(0, 100%, 61%, 1);
    --cf3-hsl-amber-gold: hsla(45, 100%, 50%, 1);

    /* Tipografías del Sistema */
    --font-heading: 'Source Sans 3', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

/* ==========================================================================
   Reglas Base e Inyección Global
   ========================================================================== */

body {
    background-color: var(--bg-dark-main) !important;
    color: var(--light-main);
    font-family: var(--font-body);
    font-weight: 400; /* Roboto Regular por defecto para lectura */

    display: flex;
    flex-direction: column;
    min-height: 100vh;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Forzar Source Sans 3 en todos los encabezados */
h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading);
    font-weight: 700; /* Peso Bold por defecto para títulos */
    letter-spacing: -0.02em; /* Ajuste sutil de tracking para prensa */
}

/* ==========================================================================
   Clases Utilitarias de Control Tipográfico (Pesos)
   ========================================================================== */

/* Pesos para Roboto (Texto, datos, párrafos) */
.fw-roboto-regular { font-family: var(--font-body); font-weight: 400; }
.fw-roboto-medium { font-family: var(--font-body); font-weight: 500; }

/* Pesos para Source Sans 3 (Títulos, marcadores, énfasis) */
.fw-source-bold { font-family: var(--font-heading); font-weight: 700; }
.fw-source-black { font-family: var(--font-heading); font-weight: 900; } /* Máximo impacto */

/* ==========================================================================
   Clases Utilitarias para el Layout (Estructura CF3)
   ========================================================================== */

.navbar-cf3 {
    background-color: var(--bg-dark-card); 
    border-bottom: 3px solid var(--accent-green); 
}

.nav-link-cf3 {
    color: var(--light-main) !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link-cf3:hover, .nav-link-cf3:focus {
    color: var(--accent-green) !important; 
}

.dropdown-menu-cf3 {
    background-color: var(--bg-dark-card) !important;
    border: 1px solid var(--border-flat) !important;
    border-top: 3px solid var(--accent-green) !important; /* Detalle estético superior */
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    padding: 6px 0;
    margin-top: 12px !important;
}

.dropdown-item-cf3 {
    color: var(--light-main) !important;
    font-size: 0.88rem;
    font-weight: 400;
    padding: 8px 20px !important;
    transition: all 0.2s ease;
}

.dropdown-item-cf3:hover {
    background-color: var(--bg-dark-main) !important;
    color: var(--accent-green) !important;
    padding-left: 24px !important; /* Efecto sutil de desplazamiento slider */
}

/* Ajuste de color para la flecha de Bootstrap */
.dropdown-toggle::after {
    vertical-align: 0.15em;
    margin-left: 0.4em;
    opacity: 0.7;
}

.bg-flat-dark { 
    background-color: var(--bg-dark-main); 
    color: var(--light-main); 
}

.card-flat-dark { 
    background-color: var(--bg-dark-card); 
    border: 1px solid var(--border-flat); 
    border-radius: 4px; 
}

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

.border-flat-bottom { 
    border-bottom: 1px solid var(--border-flat); 
}

.badge-green { 
    background-color: var(--accent-green); 
    color: var(--bg-dark-main); 
    font-family: var(--font-heading);
    font-weight: 700; 
    font-size: 0.75rem; 
}

.badge-blue { 
    background-color: var(--accent-blue); 
    color: var(--bg-dark-main); 
    font-family: var(--font-heading);
    font-weight: 700; 
    font-size: 0.75rem; 
}

.badge-muted { 
    background-color: var(--text-muted); 
    color: var(--bg-dark-main); 
    font-family: var(--font-heading);
    font-weight: 700; 
    font-size: 0.75rem;
}

.cf3-badge {
	--cf3-badge-padding-x: 0.85em;
	--cf3-badge-padding-y: 0.35em;
	--cf3-badge-font-size: 0.75em;
	--cf3-badge-font-weight: 700;
	--cf3-badge-border-radius: 0.375rem;

	display: inline-block;
	padding: var(--cf3-badge-padding-y) var(--cf3-badge-padding-x);
	font-size: var(--cf3-badge-font-size);
	font-weight: var(--cf3-badge-font-weight);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: var(--cf3-badge-border-radius);
}