:root {
    --mf-negro: #020403;
    --mf-negro-2: #070b08;
    --mf-negro-3: #101713;
    --mf-verde: #28e07f;
    --mf-verde-fuerte: #0fa457;
    --mf-blanco: #ffffff;
    --mf-blanco-suave: #dbe6df;
    --mf-linea: rgba(255, 255, 255, 0.14);
    --mf-panel: rgba(255, 255, 255, 0.055);

    /* Compatibilidad con variables ya usadas en las páginas. */
    --verde: var(--mf-verde);
    --verde-fuerte: var(--mf-verde-fuerte);
    --azul-claro: var(--mf-negro-3);
    --azul-medio: var(--mf-negro-2);
    --azul-oscuro: var(--mf-negro);
    --texto-suave: var(--mf-blanco-suave);
    --fondo-profundo: var(--mf-negro);
    --fondo-medio: var(--mf-negro-2);
    --fondo-claro: var(--mf-negro-3);
    --fondo-1: var(--mf-negro);
    --fondo-2: var(--mf-negro-2);
    --fondo-3: var(--mf-negro-3);
    --acento: var(--mf-verde);
    --acento-suave: #99efbd;
}

html {
    background: var(--mf-negro);
}

body {
    color: var(--mf-blanco) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background:
        radial-gradient(
            circle at 50% -8%,
            rgba(40, 224, 127, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 84% 16%,
            rgba(40, 224, 127, 0.045),
            transparent 22%
        ),
        linear-gradient(
            155deg,
            #0f1511 0%,
            #060907 45%,
            #010202 100%
        ) !important;
}

/*
 * Cabecera global. Se usan !important porque estilos.css tiene una regla
 * genérica para todos los <header> que antes pintaba un rectángulo verde.
 */
body .mf-cabecera-global {
    width: min(1240px, calc(100% - 40px)) !important;
    min-height: 58px !important;
    margin: 0 auto !important;
    padding: 12px 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 20 !important;
    background: transparent !important;
    color: var(--mf-blanco) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .mf-cabecera-global .mf-logo {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: clamp(27px, 2.6vw, 35px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
    color: var(--mf-blanco) !important;
    transition: transform 0.18s ease, filter 0.18s ease !important;
}

body .mf-cabecera-global .mf-logo span {
    color: var(--mf-verde) !important;
}

body .mf-cabecera-global .mf-logo:hover,
body .mf-cabecera-global .mf-logo:focus-visible {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 11px rgba(40, 224, 127, 0.34));
    outline: none;
}

/* Ruta Ligas > Clubes > Categorías > Plantel. */
body .mf-ruta {
    width: min(1240px, calc(100% - 40px)) !important;
    margin: 10px auto 24px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    position: relative !important;
    z-index: 19 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: clamp(13px, 1.05vw, 15px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
}

body .mf-ruta a {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.76) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-weight: 800 !important;
    transition: color 0.18s ease, text-shadow 0.18s ease !important;
}

body .mf-ruta a:hover,
body .mf-ruta a:focus-visible,
body .mf-ruta a.activo {
    color: var(--mf-verde) !important;
    text-shadow: 0 0 12px rgba(40, 224, 127, 0.28);
    outline: none;
}

body .mf-ruta .separador {
    color: rgba(255, 255, 255, 0.38) !important;
}

/* Ya no usamos el viejo botón Inicio/Volver en estas pantallas. */
.barra-superior > .volver,
.pagina-club > .volver,
.pagina-album > .barra-superior .volver,
.pagina-jugador > .barra-superior .volver {
    display: none !important;
}

/* Tipografía de las pantallas de club/categorías. */
body .pagina-club .datos-club h1 {
    color: #ffffff !important;
    font-size: clamp(38px, 5vw, 62px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
}

body .pagina-club .datos-club p {
    color: var(--mf-blanco-suave) !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
}

body .pagina-club .titulo-categorias,
body .pagina-album .titulo-seccion h2 {
    color: #ffffff !important;
    font-size: clamp(25px, 2.5vw, 34px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}

body .pagina-club .categoria h2 {
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 850 !important;
}

body .pagina-club .categoria p {
    color: var(--mf-blanco-suave) !important;
    font-size: 14px !important;
}

/* Álbum: mantener encabezado y textos legibles sin heredar el header verde. */
body .pagina-album > header.cabecera-album {
    color: #ffffff !important;
}

body .pagina-album .cabecera-album h1 {
    font-size: clamp(40px, 5.2vw, 64px) !important;
    font-weight: 900 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
}

body .pagina-album .cabecera-album p {
    color: var(--mf-blanco-suave) !important;
    font-size: 18px !important;
}

/* Ficha del jugador: conservar el diseño aprobado y nunca volver al header verde. */
body .pagina-jugador > header.cabecera-jugador {
    background: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .pagina-jugador .nombre-jugador {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(46px, 7vw, 82px) !important;
}

body .pagina-jugador .subtitulo-jugador {
    font-size: clamp(17px, 2vw, 21px) !important;
}

/* Negro, verde y blanco como identidad dominante. */
body .buscador input,
body .buscador-clubes,
body form input,
body form select,
body form textarea {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.52);
}

body .buscador input::placeholder,
body .buscador-clubes::placeholder,
body form input::placeholder,
body form textarea::placeholder {
    color: rgba(255, 255, 255, 0.56);
}

body .boton-principal,
body .buscador button,
body form button {
    color: #041008 !important;
    background: var(--mf-verde) !important;
    border-color: var(--mf-verde) !important;
}

body .boton-principal:hover,
body .buscador button:hover,
body form button:hover {
    background: #45eb91 !important;
}

body .boton-secundario {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.075) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

body .emblema,
body .escudo,
body .escudo-principal {
    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.14),
            rgba(0, 0, 0, 0.68) 67%
        ) !important;
}

body .liga.activa .emblema,
body .club.activo .escudo {
    border-color: var(--mf-verde) !important;
    box-shadow:
        0 0 0 1px rgba(40, 224, 127, 0.20),
        0 0 34px rgba(40, 224, 127, 0.19),
        0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

body .contexto-liga,
body .mensaje,
body .sin-categorias,
body .error,
body .descripcion,
body .dato,
body .tarjeta-club {
    color: #ffffff;
    background: rgba(4, 7, 5, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body .tarjeta-club p,
body .datos-club p,
body .cabecera-album p,
body .subtitulo-jugador,
body .contexto-liga {
    color: var(--mf-blanco-suave) !important;
}

body .pagina-club .cabecera-club {
    background: rgba(4, 7, 5, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

body .pagina-club .categoria {
    background: rgba(6, 10, 7, 0.90) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
}

body .pagina-club .categoria:hover,
body .pagina-club .categoria:focus {
    background: rgba(40, 224, 127, 0.105) !important;
    border-color: rgba(40, 224, 127, 0.48) !important;
}

body .panel-datos .dato,
body .descripcion,
body .video-item,
body .panel-video {
    background: rgba(5, 8, 6, 0.86) !important;
}

.marca-enlace {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
}

.marca-enlace:hover,
.marca-enlace:focus-visible {
    outline: none;
    filter: drop-shadow(0 0 16px rgba(40, 224, 127, 0.26));
}

@media (max-width: 700px) {
    body .mf-cabecera-global {
        width: min(100% - 28px, 1240px) !important;
        min-height: 50px !important;
    }

    body .mf-cabecera-global .mf-logo {
        font-size: 27px !important;
    }

    body .mf-ruta {
        width: min(100% - 24px, 1240px) !important;
        gap: 7px !important;
        font-size: 12px !important;
    }
}