/*
 * 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)
 * ======================================================================
 *
 * Buena parte de la interfaz (ejercicios, rutinas, nutrición) son componentes
 * React con MUI, que trae el tema de wger compilado dentro de su bundle.
 *
 * LO QUE NO FUNCIONA, y aquí estuvo mi error inicial: redefinir
 * --mui-palette-primary-main. La variable SÍ cambia de valor —comprobado en
 * el navegador— pero NADA la lee: este build de MUI resuelve los colores en
 * clases de emotion que apuntan a sus propias variables internas. El override
 * quedaba de adorno mientras los botones seguían azules.
 *
 * Verificado sobre /es/exercise/overview/: el botón "Aporta un ejercicio"
 * tenía `background-color: var(--variant-containedBg)` con ese valor en
 * #2A4C7D, el azul de wger, y --variant-containedColor en #fff.
 *
 * Eso último importa: MUI pone texto BLANCO sobre el color primario. Sobre
 * nuestro lima daría 1.53:1, ilegible. Hay que corregir fondo Y texto.
 *
 * Se atacan las dos capas, a propósito:
 *   a) las propiedades directas sobre las clases MuiXxx-colorPrimary, que son
 *      nombres estables
 *   b) las variables --variant-*, que son internas de MUI y podrían cambiar de
 *      nombre al actualizar, pero cubren hover y las variantes outlined/text
 *      sin enumerarlas una a una
 * Si tras un upgrade algo vuelve a salir azul, (a) debería seguir aguantando.
 */

/* --- (a) Superficies: lima con texto oscuro ------------------------- */
.MuiButton-contained.MuiButton-colorPrimary,
.MuiChip-filled.MuiChip-colorPrimary,
.MuiPaginationItem-colorPrimary.Mui-selected,
.MuiFab-primary,
.MuiToggleButton-primary.Mui-selected {
    background-color: var(--ng-lime) !important;
    color: var(--ng-ink) !important;
}
.MuiButton-contained.MuiButton-colorPrimary:hover,
.MuiPaginationItem-colorPrimary.Mui-selected:hover {
    background-color: var(--ng-lime-hover) !important;
}

/* --- (a) Texto e iconos sobre fondo claro: lima OSCURO --------------- */
.MuiButton-text.MuiButton-colorPrimary,
.MuiButton-outlined.MuiButton-colorPrimary,
.MuiIconButton-colorPrimary,
.MuiTypography-colorPrimary,
.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked,
.MuiTab-root.Mui-selected {
    color: var(--ng-lime-ink) !important;
}
.MuiButton-outlined.MuiButton-colorPrimary {
    border-color: var(--ng-lime) !important;
}
.MuiSwitch-colorPrimary.Mui-checked .MuiSwitch-thumb { color: var(--ng-lime) !important; }
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { background-color: var(--ng-lime) !important; }
.MuiTabs-indicator,
.MuiLinearProgress-barColorPrimary { background-color: var(--ng-lime) !important; }

/* --- (b) Las variables internas de MUI ------------------------------- */
.MuiButton-colorPrimary,
.MuiChip-colorPrimary,
.MuiPaginationItem-colorPrimary,
.MuiFab-primary,
.MuiToggleButton-primary {
    --variant-containedBg: var(--ng-lime) !important;
    --variant-containedColor: var(--ng-ink) !important;
    --variant-containedHoverBg: var(--ng-lime-hover) !important;
    --variant-textColor: var(--ng-lime-ink) !important;
    --variant-outlinedColor: var(--ng-lime-ink) !important;
    --variant-outlinedBorder: var(--ng-lime) !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 */