/*
 * Marca de NexoGym — lima #b0e149, blanco y negro.
 *
 * Este fichero SUSTITUYE a wger/core/static/css/bootstrap-custom.css, que las
 * plantillas cargan DESPUÉS del bootstrap compilado. Es el punto de extensión
 * previsto para ajustar estilos sin tocar el tema base.
 *
 * No se puede recompilar el Sass de wger desde aquí (eso pasa al construir la
 * imagen). Lo que sí se puede, y alcanza para la paleta, es redefinir las
 * variables CSS: wger usa Bootstrap 5.3.8.
 *
 * ---------------------------------------------------------------------------
 * POR QUÉ EL LIMA NO VA DE COLOR DE FONDO CON TEXTO BLANCO
 * ---------------------------------------------------------------------------
 * #b0e149 es HSL(79°, 72%, 58%): muy luminoso. Contrastes medidos (WCAG 2.1):
 *
 *     lima + texto blanco .........  1.53:1   FALLA (mínimo 4.5)
 *     lima + texto casi negro ..... 11.36:1   AAA
 *     lima como TEXTO sobre blanco   1.53:1   FALLA
 *
 * O sea: el lima solo sirve como SUPERFICIE con texto oscuro encima, nunca
 * con blanco y nunca como texto sobre blanco. Y Bootstrap pone texto blanco
 * sobre el color "primary" por defecto, así que hay que corregirlo a mano.
 *
 * De ahí que el lima tenga DOS tokens, que es como se maneja un color de
 * marca claro en cualquier sistema de diseño serio:
 *
 *     --ng-lime ....... superficies (botones, badges, barras) + texto oscuro
 *     --ng-lime-ink ... el lima oscurecido, para TEXTO y enlaces sobre blanco
 *
 * Mezclarlos es el error fácil: un enlace en --ng-lime es ilegible.
 */

/* ======================================================================
 * 1. Tokens de la marca
 * ====================================================================== */

:root {
    /* --- El lima, en sus cuatro papeles -------------------------------- */
    --ng-lime:       #b0e149;   /* el de la marca. SUPERFICIE, texto oscuro  */
    --ng-lime-hover: #a1db24;   /* hover de esas superficies    10.50:1 AAA  */
    --ng-lime-ink:   #516e12;   /* lima para TEXTO sobre blanco  5.85:1 AA   */
    --ng-lime-soft:  #ecf8d3;   /* fondos suaves: avisos        15.69:1 AAA  */

    /* --- Negro y blanco ----------------------------------------------- */
    /* #1a1a1a y no #000: el negro puro sobre blanco produce halación y
     * cansa la vista. Este da 17.40:1 con blanco, de sobra para AAA, y
     * 11.36:1 con el lima. */
    --ng-ink:        #1a1a1a;
    --ng-ink-soft:   #3d3d42;   /* texto secundario                         */
    --ng-paper:      #ffffff;

    /* --- Semánticos ---------------------------------------------------- */
    /* "warning" se mueve del amarillo de wger (#cba328, H=45°) a un ámbar
     * más naranja. Motivo: el amarillo quedaba a solo 34° de tono del lima
     * y un aviso tiene que distinguirse del color de marca de un vistazo.
     * El ámbar lo deja a 47°. */
    --ng-warning:    #d97706;
    /* "success" se queda con el verde de wger. Está a solo 25° del lima,
     * pero 30 puntos más oscuro, y la luminosidad es el canal que mejor
     * aguanta (también en daltonismo). Si en uso real se confundieran, la
     * alternativa medida es el verde azulado #0f766e (96° de separación). */
    --ng-success:    #307916;
    --ng-danger:     #e63946;   /* el rojo de wger, sin cambios             */
}

/* ======================================================================
 * 2. Bootstrap 5.3
 * ====================================================================== */

:root {
    --bs-primary: var(--ng-lime);
    --bs-primary-rgb: 176, 225, 73;
    --bs-secondary: var(--ng-ink);
    --bs-secondary-rgb: 26, 26, 26;
    --bs-success: var(--ng-success);
    --bs-warning: var(--ng-warning);
    --bs-danger: var(--ng-danger);

    /* Los enlaces van en lima OSCURO: el de marca sobre blanco es ilegible. */
    --bs-link-color: var(--ng-lime-ink);
    --bs-link-color-rgb: 81, 110, 18;
    --bs-link-hover-color: var(--ng-ink);

    --bs-body-color: var(--ng-ink);
    --bs-emphasis-color: var(--ng-ink);
}

/* Bootstrap genera las clases de botón con valores ya resueltos, no con
 * var(), así que hay que redefinirlas. Lo importante es --bs-btn-color:
 * sin eso el texto sería blanco sobre lima, 1.53:1. */
.btn-primary {
    --bs-btn-color: var(--ng-ink);
    --bs-btn-bg: var(--ng-lime);
    --bs-btn-border-color: var(--ng-lime);
    --bs-btn-hover-color: var(--ng-ink);
    --bs-btn-hover-bg: var(--ng-lime-hover);
    --bs-btn-hover-border-color: var(--ng-lime-hover);
    --bs-btn-active-color: var(--ng-ink);
    --bs-btn-active-bg: var(--ng-lime-hover);
    --bs-btn-active-border-color: var(--ng-lime-hover);
    --bs-btn-disabled-color: var(--ng-ink);
    --bs-btn-disabled-bg: var(--ng-lime-soft);
    --bs-btn-disabled-border-color: var(--ng-lime-soft);
    --bs-btn-focus-shadow-rgb: 176, 225, 73;
}

/* Botón secundario: negro con texto blanco. */
.btn-secondary {
    --bs-btn-color: var(--ng-paper);
    --bs-btn-bg: var(--ng-ink);
    --bs-btn-border-color: var(--ng-ink);
    --bs-btn-hover-color: var(--ng-paper);
    --bs-btn-hover-bg: var(--ng-ink-soft);
    --bs-btn-hover-border-color: var(--ng-ink-soft);
    --bs-btn-active-bg: var(--ng-ink-soft);
}

/* Variante contorneada: el relleno lima no sirve para texto, así que el
 * borde va en lima de marca y el texto en lima oscuro. */
.btn-outline-primary {
    --bs-btn-color: var(--ng-lime-ink);
    --bs-btn-border-color: var(--ng-lime);
    --bs-btn-hover-color: var(--ng-ink);
    --bs-btn-hover-bg: var(--ng-lime);
    --bs-btn-hover-border-color: var(--ng-lime);
    --bs-btn-active-color: var(--ng-ink);
    --bs-btn-active-bg: var(--ng-lime);
}

/* Utilidades. Ojo con .text-primary: va en lima OSCURO, no en el de marca. */
.bg-primary        { background-color: var(--ng-lime) !important; color: var(--ng-ink) !important; }
.bg-primary a,
.bg-primary .nav-link { color: var(--ng-ink) !important; }
.text-primary      { color: var(--ng-lime-ink) !important; }
.border-primary    { border-color: var(--ng-lime) !important; }
.bg-secondary      { background-color: var(--ng-ink) !important; color: var(--ng-paper) !important; }
.text-secondary    { color: var(--ng-ink-soft) !important; }

/* Badges y barras de progreso: superficie lima, texto oscuro. */
.badge.bg-primary  { color: var(--ng-ink) !important; }
.progress-bar      { background-color: var(--ng-lime); color: var(--ng-ink); }

/* ======================================================================
 * 3. Estructura oscura, acento lima
 * ====================================================================== */
/*
 * La decisión de diseño: la estructura va en negro y el lima es el acento.
 * No al revés. Dos razones:
 *
 *   - Contraste: una navbar lima obligaría a texto oscuro sobre un bloque
 *     muy luminoso que domina toda la pantalla.
 *   - El lima destaca mucho más como acento sobre fondo oscuro (11.36:1)
 *     que como fondo propio, donde se lava.
 */

.navbar.bg-primary,
.navbar-dark.bg-primary,
.navbar.bg-dark {
    background-color: var(--ng-ink) !important;
}
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link,
.navbar.bg-dark .navbar-brand,
.navbar.bg-dark .nav-link {
    color: var(--ng-paper) !important;
}
/* El elemento activo y el hover: acento lima sobre la navbar oscura. */
.navbar.bg-primary .nav-link:hover,
.navbar.bg-primary .nav-link.active,
.navbar.bg-dark .nav-link:hover,
.navbar.bg-dark .nav-link.active {
    color: var(--ng-lime) !important;
}

footer.bg-dark, .footer.bg-dark { background-color: var(--ng-ink) !important; }

/* Avisos informativos con el tinte suave de la marca. */
.alert-primary {
    --bs-alert-bg: var(--ng-lime-soft);
    --bs-alert-border-color: var(--ng-lime);
    --bs-alert-color: var(--ng-ink);
}

/* ======================================================================
 * 4. Componentes React (MUI)
 * ====================================================================== */
/*
 * Parte de la interfaz son componentes React con MUI 9, que trae su propio
 * tema. Usa CssVarsProvider, así que expone la paleta como variables
 * --mui-palette-*, pero las inyecta en <head> EN RUNTIME, después de esta
 * hoja. De ahí el !important: sin él gana el tema de MUI.
 *
 * contrastText es la clave aquí, igual que --bs-btn-color más arriba: es lo
 * que evita que MUI ponga texto blanco sobre el lima.
 *
 * SIN VERIFICAR EN NAVEGADOR. Comprobar tras el despliegue con las
 * herramientas de desarrollo si el valor efectivo de
 * --mui-palette-primary-main es el de aquí. Si MUI siguiera ganando, la vía
 * segura es construir una imagen con un tema propio.
 */
:root {
    --mui-palette-primary-main:         var(--ng-lime)       !important;
    --mui-palette-primary-light:        var(--ng-lime-soft)  !important;
    --mui-palette-primary-dark:         var(--ng-lime-hover) !important;
    --mui-palette-primary-contrastText: var(--ng-ink)        !important;

    --mui-palette-secondary-main:         var(--ng-ink)   !important;
    --mui-palette-secondary-contrastText: var(--ng-paper) !important;

    --mui-palette-success-main: var(--ng-success) !important;
    --mui-palette-warning-main: var(--ng-warning) !important;
    --mui-palette-error-main:   var(--ng-danger)  !important;

    --mui-palette-text-primary:   var(--ng-ink)      !important;
    --mui-palette-text-secondary: var(--ng-ink-soft) !important;
}

/* ======================================================================
 * 5. Tipografía — lo que traía el fichero original de wger
 * ====================================================================== */
/* Se conserva: si se borra, los encabezados pierden su fuente. */
h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans Bold", Arial, Helvetica, sans-serif;
}

/* ======================================================================
 * 6. Página pública de presentación (landing)
 * ======================================================================
 *
 * La landing NO es la de wger: branding/templates/features.html la sustituye
 * entera. Aquí van solo sus estilos.
 *
 * OJO: esta hoja no se carga en la landing por defecto. template_features.html
 * solo enlaza bootstrap-compiled.css, fontawesome y landing_page.css; el
 * enlace a este fichero se añade en nuestra copia de esa plantilla. Sin eso,
 * nada de esta sección tiene efecto.
 */

/* --- Barra de navegación ------------------------------------------- */
.ng-nav {
    background-color: var(--ng-paper);
    border-bottom: 1px solid #e8e8ec;
}
/* La plantilla inserta los logos sin dimensionar y salen a los 700 px
 * nativos del SVG: se acotan por altura, con el ancho automático. */
.ng-nav .navbar-brand img { height: 56px; width: auto; }
.ng-nav .nav-link { color: var(--ng-ink); }
.ng-nav .nav-link:hover { color: var(--ng-lime-ink); }

/* --- Portada -------------------------------------------------------- */
/* Fondo oscuro con acento lima: es donde más destaca el color de marca
 * (11.36:1 contra el negro, frente a 1.53:1 contra el blanco). */
.ng-hero {
    background-color: var(--ng-ink);
    color: var(--ng-paper);
}
.ng-hero-title {
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}
.ng-accent { color: var(--ng-lime); }
.ng-hero-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #d7d7dc;
    max-width: 34rem;
}
.ng-hero-mark {
    width: 240px;
    height: auto;
    opacity: 0.95;
}
/* El botón "outline-light" de Bootstrap en hover rellena de blanco y pone el
 * texto del color del fondo: sobre el oscuro de la portada queda bien. */
.ng-hero .btn-outline-light:hover { color: var(--ng-ink); }

/* --- Tarjetas ------------------------------------------------------- */
.ng-card {
    border: 1px solid #e8e8ec;
    border-radius: 14px;
    padding: 2rem 1.75rem;
    background: var(--ng-paper);
    transition: border-color .15s ease, transform .15s ease;
    display: flex;
    flex-direction: column;
}
.ng-card:hover {
    border-color: var(--ng-lime);
    transform: translateY(-2px);
}
.ng-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--ng-lime);
    color: var(--ng-ink);          /* texto oscuro sobre lima: 11.36:1 */
    font-size: 1.35rem;
    margin-bottom: 1.1rem;
}
.ng-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ng-ink);
    margin-bottom: .6rem;
}
.ng-card-text {
    color: #55555e;
    line-height: 1.6;
    flex-grow: 1;
}
/* Enlace en lima OSCURO: el de marca sobre blanco da 1.53:1, ilegible. */
.ng-card-link {
    color: var(--ng-lime-ink);
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
}
.ng-card-link:hover { color: var(--ng-ink); }

/* --- Llamada final --------------------------------------------------- */
.ng-cta { background-color: var(--ng-lime-soft); }
.ng-cta-title {
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    font-weight: 800;
    color: var(--ng-ink);
}
.ng-cta-text { color: #45454e; font-size: 1.05rem; }

/* --- Pie -------------------------------------------------------------- */
.footer-bg { background-color: var(--ng-ink) !important; }
.footer-bg img { height: 52px; width: auto; }
.footer-bg, .footer-bg a, .footer-bg .text-light, .footer-bg .text-white {
    color: #ffffff !important;
}
.footer-bg a { text-decoration: none; }
.footer-bg a:hover { color: var(--ng-lime) !important; }

/* ======================================================================
 * 7. Ajustes propios
 * ====================================================================== */
/* Espacio para lo que haga falta. El logo NO se cambia desde aquí: se
 * sustituye el fichero de imagen, ver ../README.md */