:root {
    --azul-liga: #0b4ea2;
    --azul-liga-oscuro: #083b7a;
    --azul-liga-suave: #eaf2ff;
    --blanco: #ffffff;
    --gris-fondo: #f5f7fb;
    --gris-texto: #6c757d;
    --borde-suave: #e5e9f2;
    --radio: 18px;
    --sombra-suave: 0 10px 30px rgba(11, 78, 162, 0.08);
}

body {
    background: var(--gris-fondo);
    color: #1f2937;
}

.navbar-liga {
    background: var(--azul-liga);
    box-shadow: 0 4px 18px rgba(11, 78, 162, 0.18);
}

.navbar-liga .navbar-brand,
.navbar-liga .nav-link {
    color: var(--blanco);
}

.navbar-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.hero-liga {
    background: linear-gradient(135deg, var(--azul-liga), var(--azul-liga-oscuro));
    color: var(--blanco);
    border-radius: 28px;
    padding: 48px 24px;
    box-shadow: var(--sombra-suave);
}

.logo-hero {
    width: 92px;
    height: 92px;
    object-fit: contain;
    background: var(--blanco);
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.titulo-liga {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -1px;
}

.subtitulo-liga {
    font-size: 1.15rem;
    opacity: 0.92;
}

.frase-lobo {
    color: #dceaff;
    font-weight: 500;
}

.card-liga {
    border: 0;
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
}

.card-liga .card-body {
    padding: 24px;
}

.btn-liga {
    background: var(--azul-liga);
    border-color: var(--azul-liga);
    color: var(--blanco);
    border-radius: 999px;
    font-weight: 700;
    padding: 10px 20px;
}

.btn-liga:hover {
    background: var(--azul-liga-oscuro);
    border-color: var(--azul-liga-oscuro);
    color: var(--blanco);
}

.btn-liga-blanco {
    background: var(--blanco);
    color: var(--azul-liga);
    border-radius: 999px;
    font-weight: 700;
    padding: 10px 20px;
}

.btn-liga-blanco:hover {
    background: var(--azul-liga-suave);
    color: var(--azul-liga-oscuro);
}

.badge-liga {
    background: var(--azul-liga);
    color: var(--blanco);
    border-radius: 999px;
    padding: 7px 11px;
}

.seccion-titulo {
    color: var(--azul-liga);
    font-weight: 800;
}

.movimiento-sube {
    color: #198754;
    font-weight: 700;
}

.movimiento-baja {
    color: #dc3545;
    font-weight: 700;
}

.movimiento-igual {
    color: var(--gris-texto);
    font-weight: 700;
}

.footer-liga {
    background: var(--blanco);
    border-top: 1px solid var(--borde-suave);
}