/*
 * GrupoProdex ERP — design scale on top of Tabler tokens.
 *
 * RULE: these 4 font sizes and 5 state badges are the ONLY typographic and
 * status vocabulary allowed in templates. Never use inline font-size styles
 * (a pre-commit hook rejects them); pick the closest .fs-* class instead.
 *
 * Font scale:
 *   .fs-meta  — 0.6875rem / 11px  (timestamps, fine print, metadata)
 *   .fs-small — 0.75rem   / 12px  (secondary text, table details)
 *   .fs-body  — 0.875rem  / 14px  (default body copy)
 *   .fs-title — 1.125rem  / 18px  (section/card titles)
 *
 * State badges (wrap Tabler's soft "-lt" tokens, valid in light AND dark —
 * Tabler 1.4 defines --tblr-*-lt as color-mix(... 10%, transparent), so the
 * same value adapts to both themes, exactly like .bg-*-lt does):
 *   .badge-state-inactive — grey   (draft, archived, off)
 *   .badge-state-progress — blue   (in progress, pending review)
 *   .badge-state-done     — green  (validated, completed)
 *   .badge-state-action   — orange (needs action, waiting on us)
 *   .badge-state-blocked  — red    (rejected, blocked, error)
 */

/* ── Prodex brand palette ───────────────────────────────────────
 * Colors lifted from the existing brand assets (report PDFs + logo):
 *   ink #1a1a1a · gold #b5940b · taupe #8a8371 · cream #eae4d6
 *   night blue #1d273b (manifest theme_color) · terracotta #c0392b
 * Mapping: gold becomes Tabler's primary accent (darkened to #8a6f08
 * for text-on-white contrast), the page canvas warms up to a faint
 * cream, the sidebar stays night blue. Semantic colors (green/orange/
 * red state badges) stay stock Tabler — brand never overrides meaning.
 */

:root,
[data-bs-theme="light"] {
    --prodex-gold: #b5940b;
    --prodex-gold-ink: #8a6f08;      /* gold dark enough for text on white */
    --prodex-night: #1d273b;
    --prodex-cream-page: #faf8f2;    /* report cream, heavily diluted */

    --tblr-primary: var(--prodex-gold);
    --tblr-primary-rgb: 181, 148, 11;
    --tblr-primary-lt: rgba(181, 148, 11, 0.1);
    --tblr-primary-darken: var(--prodex-gold-ink); /* button hover */
    --tblr-primary-fg: #ffffff;

    /* Full brand remap (Pedro, 04-ago): EVERYTHING blue or green — text,
     * links, icons, badges — moves to brand colors. Blue → night blue,
     * green/success → gold. Tabler derives all of it from these tokens. */
    --tblr-blue: var(--prodex-night);
    --tblr-blue-rgb: 29, 39, 59;
    --tblr-blue-lt: rgba(29, 39, 59, 0.08);
    --tblr-blue-darken: #16202f;
    --tblr-blue-fg: #ffffff;
    --tblr-azure: #2c3b55; /* lifted night for info accents */
    --tblr-azure-rgb: 44, 59, 85;
    --tblr-azure-lt: rgba(44, 59, 85, 0.08);
    --tblr-info: #2c3b55;
    --tblr-info-rgb: 44, 59, 85;
    --tblr-green: var(--prodex-gold);
    --tblr-green-rgb: 181, 148, 11;
    --tblr-green-lt: rgba(181, 148, 11, 0.1);
    --tblr-green-darken: var(--prodex-gold-ink);
    --tblr-green-fg: #ffffff;
    --tblr-success: var(--prodex-gold);
    --tblr-success-rgb: 181, 148, 11;
    --tblr-success-lt: rgba(181, 148, 11, 0.1);
    --tblr-success-darken: var(--prodex-gold-ink);
    --tblr-success-fg: #ffffff;
    /* Pedro (04-ago, cierre): NINGUNA letra amarilla en todo el ERP.
     * Los enlaces —la mayor fuente de texto dorado fuera de Hoy— pasan
     * al gris secundario, con hover en el color del cuerpo. Los RELLENOS
     * dorados (botón primario con letra blanca, barras) se quedan. */
    --tblr-link-color: #616876;
    --tblr-link-color-rgb: 97, 104, 118;
    --tblr-link-hover-color: #1d273b;
    --tblr-link-hover-color-rgb: 29, 39, 59;
}

[data-bs-theme="light"] body,
body {
    background-color: var(--prodex-cream-page);
}

[data-bs-theme="dark"] {
    /* On dark ground the darkened gold vanishes; use the true brand gold */
    --tblr-primary: #cfa91e;
    --tblr-primary-rgb: 207, 169, 30;
    --tblr-primary-lt: rgba(207, 169, 30, 0.15);
    /* Enlaces también grises en oscuro (Pedro: ninguna letra amarilla) */
    --tblr-link-color: #9aa5b8;
    --tblr-link-color-rgb: 154, 165, 184;
    --tblr-link-hover-color: #e4e8ef;
    --tblr-link-hover-color-rgb: 228, 232, 239;
    --tblr-primary-darken: #b8941a;
    --tblr-primary-fg: #1a1a1a; /* bright gold needs dark text in dark mode */

    /* Dark ground: night blue is invisible on itself — lift to steel; gold
     * brightens (same treatment as primary above). */
    --tblr-blue: #8fa4c9;
    --tblr-blue-rgb: 143, 164, 201;
    --tblr-blue-lt: rgba(143, 164, 201, 0.12);
    --tblr-blue-fg: #1a1a1a;
    --tblr-azure: #8fa4c9;
    --tblr-azure-rgb: 143, 164, 201;
    --tblr-azure-lt: rgba(143, 164, 201, 0.12);
    --tblr-info: #8fa4c9;
    --tblr-info-rgb: 143, 164, 201;
    --tblr-green: #cfa91e;
    --tblr-green-rgb: 207, 169, 30;
    --tblr-green-lt: rgba(207, 169, 30, 0.15);
    --tblr-green-fg: #1a1a1a;
    --tblr-success: #cfa91e;
    --tblr-success-rgb: 207, 169, 30;
    --tblr-success-lt: rgba(207, 169, 30, 0.15);
    --tblr-success-fg: #1a1a1a;
}

/* ── Brand buttons ──────────────────────────────────────────────
 * "Save/confirm" buttons (btn-success) move from Tabler green to the
 * brand night blue. Only the BUTTON is remapped: --tblr-success stays
 * stock, so state badges and text-success keep meaning green.
 */

.btn-success {
    --tblr-btn-color: #ffffff;
    --tblr-btn-bg: var(--prodex-night);
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-hover-bg: #2c3b55;
    --tblr-btn-active-color: #ffffff;
    --tblr-btn-active-bg: #16202f;
}

.btn-outline-success {
    --tblr-btn-color: var(--prodex-night);
    --tblr-btn-border-color: var(--prodex-night);
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-hover-bg: var(--prodex-night);
    --tblr-btn-hover-border-color: var(--prodex-night);
    --tblr-btn-active-color: #ffffff;
    --tblr-btn-active-bg: #16202f;
}

[data-bs-theme="dark"] .btn-success {
    --tblr-btn-bg: #3a4d70; /* night blue lifted so it reads on dark ground */
    --tblr-btn-hover-bg: #46587c;
    --tblr-btn-active-bg: #2c3b55;
}

[data-bs-theme="dark"] .btn-outline-success {
    --tblr-btn-color: #8fa4c9;
    --tblr-btn-border-color: #3a4d70;
    --tblr-btn-hover-bg: #3a4d70;
    --tblr-btn-hover-border-color: #3a4d70;
}

[data-bs-theme="dark"] body {
    background-color: var(--tblr-bg-surface-dark, #151f2c);
}

/* ── Gold TEXT darkens, gold boxes stay ──────────────────────────
 * Pedro (04-ago): the soft gold boxes are right, but gold letters on
 * them read too yellow. Text-role usages of the gold drop to the dark
 * brand gold (the link color); fills and tints keep the true gold.
 * Dark mode keeps the bright gold — there the dark one would vanish.
 *
 * Segunda vuelta (Pedro, 04-ago, «sigue sin convencerme»): el texto
 * DENTRO de los recuadros dorados pasa al azul noche de la marca —
 * contraste real y conjunta con el menú. El texto dorado sobre fondo
 * blanco (text-*) se queda en oro oscuro, que ahí sí funciona.
 */
/* Tercera y definitiva (Pedro, 04-ago: «todas las letras amarillas, en
 * todas las pantallas»): cualquier texto con rol dorado pasa al gris
 * secundario de Tabler, que se adapta solo en oscuro. */
.text-primary,
.text-success,
.text-green {
    color: var(--tblr-secondary) !important;
}

.bg-primary-lt,
.bg-success-lt,
.bg-green-lt,
.badge-state-done {
    color: var(--prodex-night) !important;
}

[data-bs-theme="dark"] .bg-primary-lt,
[data-bs-theme="dark"] .bg-success-lt,
[data-bs-theme="dark"] .bg-green-lt,
[data-bs-theme="dark"] .badge-state-done {
    color: #c8d2e4 !important; /* acero claro: legible sobre el tinte oscuro */
}

/* The Hoy pills and quick-capture buttons paint their text with
 * var(--tblr-primary) in their own <style> blocks; :not() guards keep
 * their hover/active whites intact. */
/* Pedro (04-ago, cierre): las pestañas de arriba llevan el MISMO gris
 * oscuro que los chips del cajón (btn-soft-muted -> --tblr-secondary),
 * para que arriba y abajo hablen igual. La pestaña activa no cambia. */
.dash-tabs .nav-link:not(.active):not(:hover) {
    color: var(--tblr-secondary) !important;
}

.dash-actions > .nav-link:not(:hover) {
    color: var(--tblr-secondary) !important;
}

.btn-soft-accent {
    --tblr-btn-color: var(--prodex-night);
}

/* En oscuro, --tblr-secondary ya se adapta solo: mismas reglas que en claro,
 * sin override dorado — el gris de arriba y el de abajo coinciden siempre. */

[data-bs-theme="dark"] .btn-soft-accent {
    --tblr-btn-color: var(--tblr-secondary);
}

/* ── Prodex brand bar ────────────────────────────────────────────
 * ONLY the menu bar wears the night blue (Pedro, 04-ago: painting the
 * page header too duplicated it). The vertical sidebar IS the mobile
 * top bar (same <aside>, collapsed by Bootstrap under lg), so one rule
 * covers both.
 */
.navbar-vertical.navbar {
    background-color: var(--prodex-night);
}

.navbar-brand-logo {
    height: 40px;
    width: auto;
    display: block;
    /* trim the PNG's generous transparent margins */
    margin: -6px 0;
}

/* ── Font scale ─────────────────────────────────────────────── */

.fs-meta {
    font-size: 0.6875rem; /* 11px */
    line-height: 1.35;
}

.fs-small {
    font-size: 0.75rem; /* 12px */
    line-height: 1.4;
}

.fs-body {
    font-size: 0.875rem; /* 14px */
    line-height: 1.45;
}

.fs-title {
    font-size: 1.125rem; /* 18px */
    line-height: 1.3;
}

/* ── State badge vocabulary ─────────────────────────────────── */

.badge-state-inactive {
    color: var(--tblr-secondary) !important;
    background-color: var(--tblr-secondary-lt) !important;
}

.badge-state-progress {
    color: var(--tblr-blue) !important;
    background-color: var(--tblr-blue-lt) !important;
}

.badge-state-done {
    color: var(--tblr-green) !important;
    background-color: var(--tblr-green-lt) !important;
}

.badge-state-action {
    color: var(--tblr-orange) !important;
    background-color: var(--tblr-orange-lt) !important;
}

.badge-state-blocked {
    color: var(--tblr-red) !important;
    background-color: var(--tblr-red-lt) !important;
}

/* ── Móvil — la página no se va de lado ─────────────────────────
 *
 * POR QUÉ EXISTE ESTA REGLA (13-ago-2026).
 *
 * Medido con Chrome a 375 px en /ventas y en /dia-a-dia:
 * document.documentElement.scrollWidth = 379 sobre un clientWidth de 375. La
 * página se iba 4 px de lado, y cuando eso pasa el navegador encoge la página
 * entera para meter lo que sobra: por eso las tarjetas parecían acabar antes
 * del borde.
 *
 * La causa es aritmética, y NO es que falte contenedor —las filas cuelgan de
 * su .container-xl—: es que el canalón del .row es más ancho que el padding
 * que debería absorberlo.
 *
 *   · Tabler baja --tblr-page-padding a 0,5rem por debajo de 992 px (regla
 *     suya, no nuestra), y el padding de cualquier .container-* es justo ese
 *     valor: 8 px por lado.
 *   · Un .row.g-4 fija su --tblr-gutter-x en 1,5rem y se resta 12 px de margen
 *     por lado, contando con que alguien se los devuelva.
 *   · 12 > 8 → sobresale 4 px por cada lado.
 *
 * En escritorio no ocurre: a partir de 992 px --tblr-page-padding vale 1rem,
 * el padding son 16 px y el g-4 cabe de sobra. Por eso la regla vive dentro de
 * su @media y el PC no se entera: medido a 1280 px, contenedor, fila, columna
 * y tarjeta dan exactamente los mismos números con la regla y sin ella.
 *
 * EL ARREGLO: por debajo de 992 px el g-4 usa el mismo canalón que usa el
 * contenedor —calc(--tblr-page-padding * 2), que es literalmente la definición
 * de --tblr-gutter-x de .container-*—. Así el margen negativo de la fila y el
 * padding del contenedor son el mismo número POR CONSTRUCCIÓN, y lo seguirán
 * siendo el día que Tabler cambie el valor.
 *
 * No se toca dónde acaba el contenido: la posición de una tarjeta es
 * «padding del padre − margen de la fila + padding de la columna», y esos dos
 * últimos se anulan siempre (el margen es −gutter/2 y el padding +gutter/2).
 * Medido: la tarjeta sigue a 8 px del borde antes y después. Lo único que
 * desaparece son los 4 px que sobraban.
 *
 * Se toca SOLO la X. El --tblr-gutter-y del g-4 sigue en 1,5rem, que es la
 * separación que de verdad se ve en el móvil, donde las columnas van apiladas.
 * Entre 768 y 991 px, donde algún col-md-* sí va en paralelo, el hueco
 * horizontal pasa de 24 a 16 px.
 *
 * POR QUÉ SIN COMBINADOR DE HIJO. El primer intento fue
 * `.container-xl > .row.g-4`, que suena más prudente. Se le escapó
 * /admin/configuracion/redes, donde hay un <form> entre el contenedor y la
 * fila. Y no hacía falta afinar: la regla es inofensiva en las filas anidadas
 * (dentro de un .col o de un .card-body) precisamente por lo de arriba —el
 * contenido no se mueve—, así que se aplica a todas y se acaba el problema.
 *
 * Se arregla aquí y no fila a fila porque el patrón está repetido en 19 sitios
 * de las plantillas: el contenido de TODAS las pantallas entra por
 * .page-body > .container-xl. Si algún día aparece un .row.g-5 (hoy no existe
 * ninguno) volverá a pasar lo mismo y habrá que sumarlo a esta regla.
 *
 * Y no se usa overflow-x: hidden en el body: eso esconde el síntoma y el día
 * que algo se salga de verdad nadie lo encuentra.
 */

@media (max-width: 991.98px) {
    .row.g-4 {
        --tblr-gutter-x: calc(var(--tblr-page-padding) * 2);
    }
}