/* ==========================================================================
   ERP-Pro — capa de diseño «modern».
   --------------------------------------------------------------------------
   QUE ES ESTO. Una hoja SUPERPUESTA, no un tema nuevo. Se carga la ultima
   -detras de style.css y del bundle de Tailwind- y redefine la apariencia del
   panel sin tocar el marcado de ni una vista: mismos componentes de Bootstrap 3
   (.panel_s, .btn, .table, .form-control, .label), misma barra lateral, mismas
   utilidades `tw-`. Se enciende y se apaga en Ajustes → Apariencia; con
   `classic` este fichero NI SE CARGA y el panel queda exactamente como estaba.

   POR QUE ASI Y NO REGENERANDO EL BUNDLE. El `tailwind.css` del tema es un
   build purgado que comparten todas las pantallas y todos los modulos; tocarlo
   es tocar el proyecto entero de una vez y sin marcha atras. Esto se apaga con
   un desplegable.

   TRES REGLAS QUE SE SIGUEN AQUI

   1. TODO SALE DE UN TOKEN. Ni un color, ni un radio, ni una sombra escritos a
      pelo dentro de una regla de componente. La paleta COMPLETA vive en
      `:root`; los bloques oscuros SOLO redefinen tokens. Asi el modo oscuro es
      una tabla de valores y no una segunda hoja que se desincroniza.

   2. EL ACENTO NO SOSTIENE NINGUN TEXTO. Lo elige el cliente y puede llegar
      flojisimo o clarisimo. Vive en la franja de la tarjeta, en el filo del
      elemento activo, en el anillo de foco y en el fondo del boton primario
      -y ahi la tinta de encima la calcula el servidor por luminancia, no es un
      blanco a ciegas-. Los textos usan la tinta, que si controlamos.

   3. LA DENSIDAD ES UN TOKEN, NO UNA HOJA APARTE. `comfortable` y `compact`
      cambian ocho numeros al principio del fichero. Quien pasa ocho horas en
      la pantalla elige cuanta tabla le cabe.

   ORGANIZACION
     1. Tokens (claro, oscuro, densidad, acento)
     2. Cimientos: tipografia, foco, scrollbar
     3. Armazon: cabecera, barra lateral, contenido, pie
     4. Paneles y tarjetas
     5. Tablas y DataTables
     6. Formularios y validacion en linea
     7. Botones
     8. Etiquetas de estado, badges y alertas
     9. Pestañas, desplegables, modales y demas piezas de Bootstrap
    10. Estados vacios y esqueletos de carga
    11. Modo oscuro: remapeo de las utilidades `tw-` que hay escritas en las
        vistas (no hay variante `dark:` en el build purgado)
    12. Pantallas de acceso
   ========================================================================== */

/* ======================================================== 1. TOKENS ======= */

:root {
    /* El acento lo pisa el <style> en linea que imprime theme_inline_style();
       este es el mismo azul por defecto que usa la portada publica. */
    --erp-accent: #2563eb;
    --erp-accent-ink: #ffffff;

    /* Tintes del acento. En un solo sitio para que ninguna regla componga un
       rgba() a partir de un hexadecimal que llega de la configuracion. */
    --erp-a-06: color-mix(in srgb, var(--erp-accent) 6%, transparent);
    --erp-a-10: color-mix(in srgb, var(--erp-accent) 10%, transparent);
    --erp-a-14: color-mix(in srgb, var(--erp-accent) 14%, transparent);
    --erp-a-22: color-mix(in srgb, var(--erp-accent) 22%, transparent);
    --erp-a-35: color-mix(in srgb, var(--erp-accent) 35%, transparent);
    --erp-accent-deep: color-mix(in srgb, var(--erp-accent) 82%, #000);
    --erp-accent-lift: color-mix(in srgb, var(--erp-accent) 88%, #fff);
    /* El acento cuando sostiene TEXTO -enlaces, entrada activa del menu,
       columna ordenada-. En claro se oscurece para contrastar con el papel;
       en oscuro se aclara. Es un token aparte y no `--erp-accent-deep` porque
       ese se usa como FONDO del boton primario pulsado, donde hay que ir en la
       direccion contraria. */
    --erp-accent-text: color-mix(in srgb, var(--erp-accent) 84%, #000);

    /* Rojo macizo del boton de borrar, que no es el rojo del TEXTO de aviso:
       en oscuro ese es claro y un boton claro con letra blanca no se lee. */
    --erp-danger-solid: #dc2626;
    --erp-danger-solid-ink: #ffffff;

    /* Superficies */
    --erp-bg: #f2f4f8;
    --erp-bg-2: #e9edf4;
    --erp-surface: #ffffff;
    --erp-surface-2: #f7f9fc;
    --erp-surface-3: #eef2f8;
    --erp-rail: #f8fafc;
    --erp-topbar: #ffffff;

    /* Filos */
    --erp-border: #e3e8f0;
    --erp-border-soft: #edf1f7;
    --erp-border-strong: #cbd5e1;

    /* Tinta */
    --erp-ink: #0f1723;
    --erp-ink-soft: #3d4759;
    /* Secundaria: 5,3:1 sobre el fondo y 5,6:1 sobre surface-2 (era #6b7688,
       4,17:1; 2.3.0). `--erp-ink-faint` NO es para texto: filos, separadores
       e iconos decorativos (2,6:1 sobre blanco). */
    --erp-ink-muted: #5b6577;
    --erp-ink-faint: #97a1b2;
    --erp-ink-invert: #ffffff;

    /* Semantica. Cada estado trae fondo, filo y tinta: una etiqueta de estado
       en una tabla densa se lee mucho mejor tintada que en color macizo. */
    /* Tintas de estado con 4,5:1 como minimo sobre su propio fondo (2.3.0:
       el verde daba 4,49 y el ambar 4,63). */
    --erp-ok: #166534;
    --erp-ok-bg: #e7f6ed;
    --erp-ok-bd: #b7e3c6;
    --erp-warn: #92400e;
    --erp-warn-bg: #fdf1dd;
    --erp-warn-bd: #f2d09a;
    --erp-danger: #b91c1c;
    --erp-danger-bg: #fdeaea;
    --erp-danger-bd: #f4bcbc;
    --erp-info: #1d4ed8;
    --erp-info-bg: #e8effd;
    --erp-info-bd: #bdd0f7;

    /* Relieve */
    --erp-shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
    --erp-shadow-2: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px -6px rgba(15, 23, 42, .12);
    --erp-shadow-3: 0 2px 6px rgba(15, 23, 42, .07), 0 18px 40px -12px rgba(15, 23, 42, .22);
    --erp-shadow-ring: 0 0 0 3px var(--erp-a-22);

    /* Geometria */
    --erp-radius: 12px;
    --erp-radius-sm: 8px;
    --erp-radius-xs: 6px;
    --erp-radius-pill: 999px;

    /* Tipografia. Inter viene con el tema y es LOCAL (assets/plugins/inter),
       asi que no se pide nada de fuera; detras, la pila del sistema. */
    --erp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --erp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                     "Liberation Mono", monospace;

    /* Densidad: comfortable. La compacta esta mas abajo y solo cambia esto. */
    --erp-size: 14px;
    --erp-size-sm: 12.5px;
    --erp-pad: 22px;
    --erp-pad-sm: 16px;
    --erp-cell-y: 11px;
    --erp-cell-x: 14px;
    --erp-field-h: 38px;
    --erp-field-y: 8px;
    --erp-gap: 16px;
    --erp-menu-y: 7px;
    --erp-content-pad: 26px;
}

/* Densidad compacta: mas filas a la vista sin cambiar ni un tamaño de letra
   por debajo de lo legible. Solo numeros. */
:root[data-erp-density="compact"] {
    --erp-size: 13px;
    --erp-size-sm: 11.5px;
    --erp-pad: 14px;
    --erp-pad-sm: 11px;
    --erp-cell-y: 6px;
    --erp-cell-x: 10px;
    --erp-field-h: 32px;
    --erp-field-y: 5px;
    --erp-gap: 10px;
    --erp-menu-y: 4px;
    --erp-content-pad: 16px;
}

/* ------------------------------------------------------------ modo oscuro */

/* Los tokens oscuros se escriben UNA vez y se aplican desde dos sitios: la
   preferencia del sistema cuando el ajuste esta en `auto`, y la eleccion
   explicita. Se repiten los dos bloques porque un `:is()` con media query no
   se puede factorizar sin duplicar la lista igualmente. */
@media (prefers-color-scheme: dark) {
    :root[data-erp-mode="auto"] {
        --erp-bg: #0c1017;
        --erp-bg-2: #11161f;
        --erp-surface: #151b25;
        --erp-surface-2: #1a212d;
        --erp-surface-3: #212936;
        --erp-rail: #10151d;
        --erp-topbar: #121821;

        --erp-border: #29313f;
        --erp-border-soft: #212936;
        --erp-border-strong: #3c4657;

        --erp-ink: #e8edf5;
        --erp-ink-soft: #c3ccda;
        --erp-ink-muted: #8f9aab;
        --erp-ink-faint: #6d7788;

        --erp-ok: #6ee7a8;
        --erp-ok-bg: #10261b;
        --erp-ok-bd: #1f5237;
        --erp-warn: #f2c268;
        --erp-warn-bg: #2a1f0d;
        --erp-warn-bd: #5c4413;
        --erp-danger: #f89191;
        --erp-danger-bg: #2b1315;
        --erp-danger-bd: #5e2426;
        --erp-info: #93b4fb;
        --erp-info-bg: #131f38;
        --erp-info-bd: #2a4179;

        --erp-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
        --erp-shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px -6px rgba(0, 0, 0, .6);
        --erp-shadow-3: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 40px -12px rgba(0, 0, 0, .7);

        --erp-accent-deep: color-mix(in srgb, var(--erp-accent) 88%, #000);
        --erp-accent-lift: color-mix(in srgb, var(--erp-accent) 82%, #fff);
        --erp-accent-text: color-mix(in srgb, var(--erp-accent) 68%, #fff);
        --erp-danger-solid: #a51f1f;
        --erp-danger-solid-ink: #ffe8e8;

        color-scheme: dark;
    }
}

:root[data-erp-mode="dark"] {
    --erp-bg: #0c1017;
    --erp-bg-2: #11161f;
    --erp-surface: #151b25;
    --erp-surface-2: #1a212d;
    --erp-surface-3: #212936;
    --erp-rail: #10151d;
    --erp-topbar: #121821;

    --erp-border: #29313f;
    --erp-border-soft: #212936;
    --erp-border-strong: #3c4657;

    --erp-ink: #e8edf5;
    --erp-ink-soft: #c3ccda;
    --erp-ink-muted: #8f9aab;
    --erp-ink-faint: #6d7788;

    --erp-ok: #6ee7a8;
    --erp-ok-bg: #10261b;
    --erp-ok-bd: #1f5237;
    --erp-warn: #f2c268;
    --erp-warn-bg: #2a1f0d;
    --erp-warn-bd: #5c4413;
    --erp-danger: #f89191;
    --erp-danger-bg: #2b1315;
    --erp-danger-bd: #5e2426;
    --erp-info: #93b4fb;
    --erp-info-bg: #131f38;
    --erp-info-bd: #2a4179;

    --erp-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
    --erp-shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px -6px rgba(0, 0, 0, .6);
    --erp-shadow-3: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 40px -12px rgba(0, 0, 0, .7);

    --erp-accent-deep: color-mix(in srgb, var(--erp-accent) 88%, #000);
    --erp-accent-lift: color-mix(in srgb, var(--erp-accent) 82%, #fff);
    --erp-accent-text: color-mix(in srgb, var(--erp-accent) 68%, #fff);
    --erp-danger-solid: #a51f1f;
    --erp-danger-solid-ink: #ffe8e8;

    color-scheme: dark;
}

/* Un navegador sin color-mix() dejaria los tintes en «valor invalido en tiempo
   de computo», que es peor que un color feo: la propiedad se hereda. Se fijan
   al azul por defecto, que es el acento de serie. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    :root {
        --erp-a-06: rgba(37, 99, 235, .06);
        --erp-a-10: rgba(37, 99, 235, .10);
        --erp-a-14: rgba(37, 99, 235, .14);
        --erp-a-22: rgba(37, 99, 235, .22);
        --erp-a-35: rgba(37, 99, 235, .35);
        --erp-accent-deep: #1e46a8;
        --erp-accent-lift: #4b7bf0;
        --erp-accent-text: #1d47ab;
    }
}

/* =================================================== 2. CIMIENTOS ========= */

body.app,
body.login_admin,
body.login_client {
    font-family: var(--erp-font);
    font-size: var(--erp-size);
    color: var(--erp-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.005em;
}

body.app {
    background: var(--erp-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--erp-ink);
    font-weight: 650;
    letter-spacing: -.015em;
}

h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }

hr {
    border-color: var(--erp-border);
}

/* El color de los enlaces es un token (2.3.0): la tinta del acento, o el que
   se elija en «Estilo del tema», con su variante oscura (erp-base.css). */
a {
    color: var(--erp-link, var(--erp-accent-text));
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--erp-accent);
    text-decoration: none;
}

.text-muted,
small.text-muted {
    color: var(--erp-ink-muted);
}

/* Foco visible de verdad, y solo con teclado. El anillo es del acento: es la
   pieza de identidad que mas se ve y la que menos molesta. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--erp-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Barras de desplazamiento discretas y, sobre todo, VISIBLES en oscuro: las de
   serie se quedan blancas encima de un panel oscuro. */
* {
    scrollbar-color: var(--erp-border-strong) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--erp-border-strong);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--erp-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--erp-ink-faint);
    background-clip: content-box;
}

::selection {
    background: var(--erp-a-22);
    color: var(--erp-ink);
}

/* ===================================================== 3. ARMAZON ======== */

/* --------------------------------------------------------------- cabecera */

#header {
    background: var(--erp-topbar);
    border-bottom: 1px solid var(--erp-border);
    box-shadow: none;
}

/* La firma de la casa: un hilo del acento bajo la barra superior, que se
   desvanece hacia la derecha. Dos pixeles y se acabo el «esto es el sistema de origen». */
#header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--erp-accent), var(--erp-a-35) 38%, transparent 72%);
    pointer-events: none;
}

#header .navbar-nav > li > a {
    color: var(--erp-ink-soft);
    font-weight: 500;
    border-radius: var(--erp-radius-sm);
}

#header .navbar-nav > li > a:hover,
#header .navbar-nav > li > a:focus {
    color: var(--erp-ink);
    background: var(--erp-surface-3);
}

#header li > a.active {
    background: var(--erp-surface-3);
    border-radius: var(--erp-radius-sm);
}

#header .hide-menu {
    color: var(--erp-ink-muted);
}

#header .hide-menu:hover {
    background: var(--erp-surface-3);
    color: var(--erp-ink);
}

#logo .logo-text {
    color: var(--erp-ink);
    letter-spacing: -.02em;
}

/* Buscador: el campo mas usado del panel, asi que se le da altura y un foco
   que se ve. */
#top_search #search_input {
    background: var(--erp-surface-2) !important;
    border: 1px solid var(--erp-border) !important;
    color: var(--erp-ink);
    border-radius: var(--erp-radius-sm) !important;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

#top_search #search_input::placeholder {
    color: var(--erp-ink-muted) !important;
}

#top_search #search_input:focus {
    background: var(--erp-surface) !important;
    border-color: var(--erp-accent) !important;
    box-shadow: var(--erp-shadow-ring) !important;
}

#top_search_button button {
    color: var(--erp-ink-faint);
}

/* El boton redondo de «crear» toma el acento: es la accion, y se ve desde
   lejos. */
#header .icon .tw-bg-primary-600,
#header .icon .tw-rounded-full.tw-bg-primary-600 {
    background: var(--erp-accent) !important;
    color: var(--erp-accent-ink) !important;
    box-shadow: 0 1px 2px var(--erp-a-35);
}

#header .icon a:hover .tw-bg-primary-600 {
    background: var(--erp-accent-deep) !important;
}

/* Idioma y ajustes: mismo boton redondo que «crear», pero en neutro. La accion
   de crear se lleva el acento; estos dos acompañan y no compiten. */
#header .navbar-icon-chip {
    background: var(--erp-surface-3) !important;
    color: var(--erp-ink-soft) !important;
    transition: background-color .15s, color .15s;
}

#header .navbar-icon-button:hover .navbar-icon-chip,
#header .navbar-icon-button:focus .navbar-icon-chip,
#header .open > .navbar-icon-button .navbar-icon-chip {
    background: var(--erp-a-22) !important;
    color: var(--erp-ink) !important;
}

/* La cuenta, al final de la barra. */
#header .navbar-account > a img {
    border: 1px solid var(--erp-border);
}

#header .navbar-account-name {
    color: var(--erp-ink-soft);
}

#header .navbar-account > a:hover .navbar-account-name,
#header .navbar-account.open > a .navbar-account-name {
    color: var(--erp-ink);
}

/* La cabecera del menu de la cuenta lleva un nombre y un correo, no una
   etiqueta de seccion: sin las mayusculas forzadas de `.dropdown-header`, que
   convertian el correo en un grito. */
.dropdown-header.navbar-account-head {
    text-transform: none;
    letter-spacing: normal;
    padding-bottom: 8px;
}

.navbar-account-head-name {
    color: var(--erp-ink) !important;
}

.navbar-account-head-email {
    color: var(--erp-ink-muted) !important;
}

/* ----------------------------------------------------------- barra lateral */

.sidebar {
    background: var(--erp-rail);
    border-right: 1px solid var(--erp-border);
}

[dir="rtl"] .sidebar {
    border-right: 0;
    border-left: 1px solid var(--erp-border);
}

/* Entradas del menu */
.sidebar ul.nav li a {
    color: var(--erp-ink-soft);
    font-weight: 500;
    font-size: var(--erp-size);
    padding: var(--erp-menu-y) 11px;
    border-radius: var(--erp-radius-sm);
    border: 1px solid transparent;
    transition: background-color .13s, color .13s;
}

.sidebar ul.nav li a i.menu-icon {
    color: var(--erp-ink-faint);
    font-size: 16px;
    width: 20px;
    transition: color .13s;
}

/* El estado activo es lo unico que hay que ver de un vistazo: fondo tintado,
   texto e icono en tinta fuerte y un FILO de acento a la izquierda. Se sustituye
   la «tarjeta blanca con sombra» del tema, que en una lista de catorce entradas
   no distingue nada. */
.sidebar > ul.nav > li:hover > a:first-child,
.sidebar > ul.nav > li.active > a:first-child {
    background: var(--erp-surface-3);
    border: 1px solid transparent;
    border-radius: var(--erp-radius-sm);
    box-shadow: none;
}

.sidebar > ul.nav > li.active > a:first-child {
    background: var(--erp-a-14);
    color: var(--erp-accent-text);
    font-weight: 650;
    position: relative;
}

.sidebar > ul.nav > li.active > a:first-child::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-accent);
}

[dir="rtl"] .sidebar > ul.nav > li.active > a:first-child::before {
    left: auto;
    right: -6px;
}

.sidebar ul.nav li.active > a,
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
    color: var(--erp-ink);
}

.sidebar ul.nav li.active > a .menu-icon,
.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon {
    color: var(--erp-accent);
}

.sidebar > ul.nav > li {
    border-left-color: transparent;
}

/* Submenus: se leen como una lista sangrada, no como botones pequeños. */
.sidebar ul.nav li .nav-second-level li a {
    color: var(--erp-ink-muted);
    font-weight: 500;
    padding: 4px 12px 4px 44px;
}

.sidebar ul.nav li .nav-second-level li.active a,
.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover,
.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:focus {
    color: var(--erp-ink);
}

.sidebar ul.nav li .nav-second-level li.active a {
    font-weight: 650;
    color: var(--erp-accent-text);
}

.sidebar .arrow,
.sidebar .fa.arrow {
    color: var(--erp-ink-faint);
}

/* Menu de configuracion (el panel deslizante) */
#setup-menu-wrapper {
    background: var(--erp-rail);
}

#setup-menu > li:first-child {
    color: var(--erp-ink);
    border-bottom: 1px solid var(--erp-border);
    font-weight: 650;
}

/* --------------------------------------------------------------- contenido */

#wrapper {
    background: var(--erp-bg);
}

.content {
    padding: var(--erp-content-pad);
}

/* ------------------------------------------------------------------- pie */

#wrapper .content > div:last-child > span,
.content .tw-text-neutral-400,
.content .tw-text-neutral-500 {
    /* El gris 500 de Tailwind (#6b7280) da 4,39:1 sobre el fondo gris del
       panel: las vistas lo usan como texto secundario fuera de las tarjetas
       (2.3.0). */
    color: var(--erp-ink-muted);
}

/* ============================================ 4. PANELES Y TARJETAS ====== */

.panel_s {
    position: relative;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-2);
    margin-bottom: var(--erp-gap);
}

/*
 | El panel NO recorta lo que sobresale de el.
 |
 | Aqui habia un `overflow: hidden`, y estaba puesto por una sola razon: que la
 | franja de acento de `::before` no asomara por fuera de las esquinas
 | redondeadas. Lo que recortaba de paso era todo lo demas, y lo demas incluye
 | cualquier menu que se abra hacia abajo cerca del borde inferior: el
 | desplegable de `bootstrap-select` se cortaba exactamente en el filo del
 | panel, dejando dos opciones a la vista de las cinco que tenia.
 |
 | Lo reporto QA en la pantalla de «Añadir tipo de tramite» -«se cortan las
 | ventanas y por tanto las opciones de los 3 campos»-, pero no era del SGCR:
 | esta regla la comparten TODAS las pantallas del panel con la capa moderna
 | puesta, asi que le pasaba a cualquier desplegable en el ultimo campo de un
 | panel.
 |
 | La franja se recorta ella sola con su propio radio, que es lo que tendria
 | que haber hecho desde el principio.
 */

/* La franja de la portada, traida al panel. Un hilo de acento que se desvanece
   por encima del borde superior. Es la unica marca de color permanente de la
   pantalla, asi que se queda en 2 px y en los paneles de PRIMER nivel: uno
   anidado dentro de otro no la lleva, o la pagina se convierte en un peine. */
.panel_s::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    /* Su propio radio, en lugar de que la recorte el panel: ver arriba. */
    border-top-left-radius: var(--erp-radius);
    border-top-right-radius: var(--erp-radius);
    background: linear-gradient(90deg, var(--erp-accent), var(--erp-a-35) 30%, transparent 62%);
    opacity: .85;
    pointer-events: none;
    z-index: 1;
}

.panel_s .panel_s::before,
.modal .panel_s::before,
.kan-ban-body .panel_s::before {
    display: none;
}

/*
 | El fondo del cuerpo lo pone el panel, no el cuerpo.
 |
 | El bundle del tema declara `.panel, .panel-body, .panel_s {background:#fff}`,
 | asi que en oscuro un `.panel > .panel-body` -las tarjetas por audiencia de
 | Ajustes → Seguridad- se quedaba BLANCO con las etiquetas en gris claro
 | encima: ilegible. El `:not([class*="tw-bg-"])` no es adorno: hay vistas que
 | tiñen el cuerpo a proposito (`panel-body tw-bg-amber-50`, el aviso de «esto
 | espera tu decision» en compras y en flujos) y esa utilidad tiene menos
 | especificidad que esta regla, o sea que sin la exclusion desaparecerian.
 */
.panel_s > .panel-body:not([class*="tw-bg-"]),
.panel_s > .panel-heading:not([class*="tw-bg-"]),
.panel > .panel-body:not([class*="tw-bg-"]) {
    background: transparent;
}

.panel_s > .panel-body,
.panel_s > .panel-heading {
    border-radius: 0;
}

/*
 | El relleno del panel SOLO se toca en densidad compacta, y a proposito.
 |
 | En «comoda» vale el del tema (1.5rem) y no se pisa, porque unas cuantas
 | vistas ajustan un lado con una utilidad -`panel-body tw-pb-0`, `tw-p-2`,
 | `tw-py-3`- y una regla `padding:` con dos clases de especificidad se las
 | lleva por delante TODAS: en la ficha de cliente eso reaparecia como una
 | franja vacia de 24 px debajo de las pestañas. Aqui se paga el precio solo
 | donde hace falta y se le devuelve el sitio a la unica utilidad que de verdad
 | se usa para eso.
 */
:root[data-erp-density="compact"] .panel_s > .panel-body,
:root[data-erp-density="compact"] .panel_s > .panel-heading {
    padding: var(--erp-pad);
}

:root[data-erp-density="compact"] .panel_s > .panel-body.tw-pb-0 { padding-bottom: 0; }
:root[data-erp-density="compact"] .panel_s > .panel-body.tw-p-2  { padding: .5rem; }
:root[data-erp-density="compact"] .panel_s > .panel-body.tw-py-3 { padding-top: .75rem; padding-bottom: .75rem; }

.panel_s > .panel-body + .panel-body,
.panel_s .panel-body {
    border-top-color: var(--erp-border-soft);
}

.panel_s .hr-panel-heading,
.panel_s .hr-panel-separator {
    border-color: var(--erp-border);
}

/* El resto de paneles de Bootstrap (los que no son .panel_s) */
.panel,
.panel-default {
    background: var(--erp-surface);
    border-color: var(--erp-border);
    border-radius: var(--erp-radius-sm);
    box-shadow: none;
}

.panel-default > .panel-heading {
    background: var(--erp-surface-2);
    border-color: var(--erp-border);
    color: var(--erp-ink);
    font-weight: 600;
}

.well {
    background: var(--erp-surface-2);
    border-color: var(--erp-border);
    border-radius: var(--erp-radius-sm);
    box-shadow: none;
    color: var(--erp-ink-soft);
}

/* Las tarjetas de cifra del tablero: se les da jerarquia -el numero manda- y
   el mismo relieve que los paneles. */
.panel_s .tw-text-2xl,
.panel_s .tw-text-3xl {
    color: var(--erp-ink);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

/* ================================================ 5. TABLAS ============== */

.table {
    color: var(--erp-ink-soft);
    /* Cifras que se pueden comparar en columna sin bailar. */
    font-variant-numeric: tabular-nums;
}

.table > thead > tr > th {
    background: var(--erp-surface-2);
    border-bottom: 1px solid var(--erp-border);
    border-top: 0;
    color: var(--erp-ink-muted);
    font-size: var(--erp-size-sm);
    font-weight: 650;
    /* NI VERSALITAS NI `nowrap`, por tentador que sea: una cabecera en
       mayusculas ocupa cerca de un 15 % mas, y en un listado de nueve columnas
       -el de clientes- eso es la diferencia entre verlas todas y tener que
       arrastrar la tabla a lo ancho. Se distingue por peso, color y fondo. */
    padding: calc(var(--erp-cell-y) - 1px) var(--erp-cell-x);
    vertical-align: middle;
    /* Cabecera pegajosa: en una tabla de cien filas es la diferencia entre
       saber que columna se esta mirando y no saberlo. Dentro de un
       `.table-responsive` -que tiene overflow- no pega, y tampoco estorba. */
    position: sticky;
    top: 0;
    z-index: 2;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 1px solid var(--erp-border-soft);
    padding: var(--erp-cell-y) var(--erp-cell-x);
    vertical-align: middle;
    color: var(--erp-ink-soft);
}

.table > tbody > tr > td a {
    font-weight: 550;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background: var(--erp-surface-2);
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
    background: var(--erp-a-06);
}

.table > tbody > tr:hover > td {
    color: var(--erp-ink);
}

.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th {
    border-color: var(--erp-border);
}

.table-responsive {
    border-color: var(--erp-border);
}

/*
 | LO QUE NO SE HACE AQUI, Y POR QUE. La tentacion era sacar la tabla a sangre
 | -margenes negativos contra el padding del panel- para ganar 44 px de ancho.
 | Se probo y se quito: hay tablas que van sueltas dentro del `.panel-body` y
 | otras envueltas en `.table-responsive`, y en las primeras el `width: auto`
 | que hace falta para que el margen negativo ensanche convierte el `width:100%`
 | de `.table` en «encoge hasta el contenido»: el registro de actividades del
 | tablero se quedo a media anchura. Es exactamente el tipo de arreglo bonito
 | que rompe pantallas que no se estan mirando. Si algun dia se hace, se hace
 | con una clase en el marcado y no adivinando la estructura desde el CSS.
 */

/* --------------------------------------------------------- DataTables */

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--erp-surface-2);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    color: var(--erp-ink);
    padding: 4px 10px;
    height: auto;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--erp-accent);
    box-shadow: var(--erp-shadow-ring);
    outline: none;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--erp-ink-muted);
    font-size: var(--erp-size-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--erp-radius-xs) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--erp-ink-soft) !important;
    padding: 4px 11px !important;
    margin: 0 1px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--erp-surface-3) !important;
    border-color: var(--erp-border) !important;
    color: var(--erp-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--erp-a-14) !important;
    border-color: var(--erp-a-35) !important;
    color: var(--erp-accent-text) !important;
    font-weight: 650;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--erp-ink-faint) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/*
 | LA CABECERA DE UN DataTable EN UN MOVIL. «Mostrar N entradas» va flotando a
 | la izquierda y «Buscar» a la derecha; por debajo de unos 500 px las dos se
 | montan una encima de otra y se lee «ShSoewarch». Pasa igual sin esta capa
 | -es del tema-, pero aqui el campo de busqueda es mas alto y se nota mas, asi
 | que se arregla: por debajo del salto, cada control en su linea y el buscador
 | a todo el ancho, que ademas es lo que se quiere con el pulgar.
 */
@media (max-width: 767px) {
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter {
        /* `position: static` es LA linea que arregla el solape: el tema saca el
           «Mostrar N entradas» del flujo con `position: absolute`, asi que los
           dos controles se pintan encima del mismo sitio aunque cada uno este
           en su columna. Sin esto, `float: none` no sirve de nada. Y el
           selector va cualificado por elemento -`div.dataTables_wrapper
           div.dataTables_length`- porque asi lo escribe el tema y con la clase
           sola no se le gana. */
        position: static;
        float: none;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }

    .dataTables_wrapper .dataTables_filter label {
        display: block;
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }

    [dir="rtl"] .dataTables_wrapper .dataTables_length,
    [dir="rtl"] .dataTables_wrapper .dataTables_filter {
        text-align: right;
    }
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
}

table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    color: var(--erp-accent-text);
}

/*
 | EL ENLACE DE UNA CELDA NO ES AZUL, Y ESO ESTA BIEN: el tema decide que
 | dentro de un DataTable los enlaces van en tinta -en una tabla de cien filas
 | con tres enlaces por fila, el azul es ruido-. Se respeta la decision y solo
 | se cambia el VALOR por el token, porque el suyo esta escrito a pelo (#374151)
 | y en oscuro eso es gris marengo sobre negro: el nombre del cliente no se
 | leia. El selector repite el `:not(...)` del tema para no pisar las clases
 | semanticas, y lleva delante el atributo del <html> porque el original tiene
 | dos clases y tres elementos de especificidad.
 */
:root[data-erp-style="modern"] .dataTables_wrapper table tbody a:not(.text-muted, .text-primary, .text-danger, .text-warning, .text-success, .text-info) {
    color: var(--erp-ink);
}

:root[data-erp-style="modern"] .dataTables_wrapper table tbody a:not(.text-muted, .text-primary, .text-danger, .text-warning, .text-success, .text-info):hover {
    color: var(--erp-accent-text);
}

/* =============================================== 6. FORMULARIOS ========== */

label,
.control-label {
    color: var(--erp-ink-soft);
    font-weight: 600;
    font-size: var(--erp-size-sm);
    letter-spacing: .01em;
    margin-bottom: 6px;
}

.form-group {
    margin-bottom: var(--erp-gap);
}

/*
 | Los cuatro selectores no son por gusto: el bundle del tema declara el fondo
 | del campo como `input.form-control, textarea.form-control, select.form-control`
 | -cualificado por elemento, o sea mas especifico que `.form-control` a secas-,
 | asi que una regla con la clase sola NO lo gana por mucho que la hoja cargue
 | despues. En oscuro eso se veia como campos gris claro con el texto invisible,
 | porque su fondo es un `rgba(249,250,251,.7)` que compone sobre el panel
 | oscuro. Los desplegables de bootstrap-select se veian bien y los `<input>`
 | no, que fue la pista.
 */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    /* `background-color` y no el atajo `background`: el atajo borraria de paso
       cualquier imagen de fondo -la flecha de un desplegable, el icono de un
       campo de busqueda- que ponga el tema o una utilidad. */
    background-color: var(--erp-surface-2);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    box-shadow: none;
    color: var(--erp-ink);
    min-height: var(--erp-field-h);
    height: auto;
    padding: var(--erp-field-y) 11px;
    font-size: var(--erp-size);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

textarea.form-control {
    min-height: calc(var(--erp-field-h) * 2);
}

.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--erp-ink-muted);
}

.form-control:hover {
    border-color: var(--erp-ink-faint);
}

.form-control:focus {
    background-color: var(--erp-surface);
    border-color: var(--erp-accent);
    box-shadow: var(--erp-shadow-ring);
    outline: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--erp-surface-3);
    color: var(--erp-ink-muted);
    cursor: not-allowed;
}

/*
 | LA FLECHA DEL DESPLEGABLE SE DIBUJA AQUI.
 |
 | La de serie del navegador la pinta el sistema y, sobre un campo con fondo
 | propio, en oscuro se queda practicamente invisible: en Ajustes → Seguridad
 | el desplegable del segundo factor parecia un cuadro de texto. Se apaga la
 | del navegador y se pone una en SVG en linea -ni un fichero mas que pedir-,
 | con su color de cada modo. Se excluyen los `multiple` y los que tienen
 | `size`, que no llevan flecha.
 */
select.form-control {
    color: var(--erp-ink);
}

select.form-control:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7688' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 16px 16px;
    padding-right: 32px;
    /* Bootstrap da a `select.input-sm` y `select.input-lg` un `line-height` igual
       a su altura (30 y 46 px), pensado para la flecha nativa. Sin ella, y con
       la altura en `auto`, ese interlineado se SUMA al relleno y el desplegable
       salía 10 px más alto que el campo de texto de al lado (42 frente a 32 en
       los filtros de cualquier listado). Mismo interlineado que un input. */
    line-height: 1.5;
}

/* El «Mostrar [10] entradas» de DataTables va DENTRO de un <label>, pegado al
   texto: con el hueco de 32 px que pide la flecha, a 390 px el desplegable se
   subia encima de la palabra «Show». Ahi la flecha se aprieta. */
.dataTables_wrapper .dataTables_length select:not([multiple]):not([size]) {
    padding: 4px 22px 4px 8px;
    background-position: right 5px center;
    background-size: 13px 13px;
}

[dir="rtl"] select.form-control:not([multiple]):not([size]) {
    background-position: left 9px center;
    padding-right: 11px;
    padding-left: 32px;
}

:root[data-erp-mode="dark"] select.form-control:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238f9aab' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root[data-erp-mode="auto"] select.form-control:not([multiple]):not([size]) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238f9aab' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8'/%3E%3C/svg%3E");
    }
}

/* Las casillas NATIVAS -la pantalla de acceso no carga style.css, asi que ahi
   son las del navegador- toman el acento de la casa. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--erp-accent);
}

/* Casillas y radios del tema */
.checkbox label,
.radio label {
    color: var(--erp-ink-soft);
    font-weight: 500;
    font-size: var(--erp-size);
}

.checkbox-primary input[type="checkbox"]:checked + label::before,
.radio-primary input[type="radio"]:checked + label::before {
    background: var(--erp-accent);
    border-color: var(--erp-accent);
}

.radio-primary input[type="radio"]:checked + label::after {
    background: var(--erp-accent-ink);
}

/* --------------------------------------------------- validacion en linea */

/* La 1.9.0 avisa al salir de un campo obligatorio vacio: marca `has-error` en
   el `.form-group` y cuelga un `<p class="text-danger">` bajo el campo. Aqui se
   le da al aviso la forma de un aviso -filo rojo, fondo tintado, sin gritar- en
   vez de un texto rojo suelto que se confunde con la ayuda del campo. */
.form-group.has-error .form-control,
.form-group.has-error .bootstrap-select > .btn {
    border-color: var(--erp-danger);
    background: var(--erp-danger-bg);
}

.form-group.has-error .form-control:focus {
    box-shadow: 0 0 0 3px var(--erp-danger-bd);
}

.form-group.has-error .control-label,
.has-error .control-label,
.has-error .help-block {
    color: var(--erp-danger);
}

/* Se apunta al ELEMENTO del aviso -`<p class="text-danger">`, que es lo que
   pinta appFormValidator (error_class:"text-danger", error_element:"p")- y no a
   la clase suelta: el asterisco de «campo obligatorio» que pone
   `form_required_mark()` es un `<small class="req text-danger">` dentro del
   mismo `<label>`, y con la clase a secas se le ponia delante el circulo de
   admiracion y se partia la etiqueta en dos lineas. */
.form-group > p.text-danger,
.form-group p.text-danger,
label.error {
    display: block;
    color: var(--erp-danger);
    font-size: var(--erp-size-sm);
    font-weight: 550;
    margin: 6px 0 0;
    padding-left: 18px;
    position: relative;
    line-height: 1.4;
}

/* El circulo de admiracion se dibuja con CSS: ni un icono mas que cargar. */
.form-group p.text-danger::before,
label.error::before {
    content: "!";
    position: absolute;
    left: 0;
    top: .1em;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--erp-danger);
    color: var(--erp-surface);
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

.form-group.has-success .form-control {
    border-color: var(--erp-ok-bd);
}

/* bootstrap-select, que envuelve al <select> */
.bootstrap-select > .btn.dropdown-toggle {
    background: var(--erp-surface-2);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    color: var(--erp-ink);
    min-height: var(--erp-field-h);
    box-shadow: none;
    /* Misma altura que un campo de texto: el texto elegido trae su propio
       interlineado (20 px) y, sumado al relleno del botón, lo dejaba 2 px más
       alto que el input de al lado. El hueco lo pone la altura, no el texto. */
    height: var(--erp-field-h);
    padding-top: 0;
    padding-bottom: 0;
}

.bootstrap-select > .btn.dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
}

.bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner {
    line-height: 1.4;
}

.bootstrap-select > .btn.dropdown-toggle:focus,
.bootstrap-select.open > .btn.dropdown-toggle {
    border-color: var(--erp-accent);
    box-shadow: var(--erp-shadow-ring);
    outline: none !important;
}

/*
 | LA PUNTA DE FLECHA DE bootstrap-select Y DE LOS DESPLEGABLES DEL TEMA.
 |
 | No es una flecha: es un cuadrado girado 45 grados hecho con dos bordes, y el
 | tema le escribe el color a pelo (`.caret{border:solid #1f2937}`). Sobre un
 | campo oscuro eso es invisible, y los desplegables de Ajustes → Apariencia
 | -que son selectpicker, no `<select>`- parecian cuadros de texto sin flecha.
 | Va por token, y sobre un boton primario toma la tinta calculada del acento.
 */
.caret {
    border-color: var(--erp-ink-muted);
}

.btn-primary .caret,
.btn-danger .caret {
    border-color: currentColor;
}

.bootstrap-select .filter-option-inner-inner {
    color: var(--erp-ink);
}

.bootstrap-select .bs-searchbox .form-control {
    background: var(--erp-surface);
}

/* ==================================================== 7. BOTONES ========= */

.btn {
    border-radius: var(--erp-radius-sm);
    font-weight: 600;
    font-size: var(--erp-size);
    padding: var(--erp-field-y) 15px;
    min-height: var(--erp-field-h);
    border: 1px solid transparent;
    box-shadow: var(--erp-shadow-1);
    transition: background-color .14s, border-color .14s, box-shadow .14s, transform .06s;
}

.btn:active {
    transform: translateY(1px);
}

.btn-sm,
.btn-xs {
    min-height: 0;
    padding: 4px 10px;
    font-size: var(--erp-size-sm);
}

/* El primario lleva el acento del cliente. La tinta de encima la calcula el
   servidor por luminancia (theme_accent_ink) y llega en --erp-accent-ink, asi
   que un acento amarillo no deja el boton ilegible. */
.btn-primary,
.btn-primary:focus {
    background: linear-gradient(180deg, var(--erp-accent-lift), var(--erp-accent));
    border-color: var(--erp-accent-deep);
    color: var(--erp-accent-ink);
    box-shadow: var(--erp-shadow-1), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background: var(--erp-accent-deep);
    border-color: var(--erp-accent-deep);
    color: var(--erp-accent-ink);
}

.btn-default {
    background: var(--erp-surface);
    border-color: var(--erp-border-strong);
    color: var(--erp-ink-soft);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.open > .dropdown-toggle.btn-default {
    background: var(--erp-surface-3);
    border-color: var(--erp-ink-faint);
    color: var(--erp-ink);
}

.btn-success {
    background: var(--erp-ok-bg);
    border-color: var(--erp-ok-bd);
    color: var(--erp-ok);
}

.btn-success:hover,
.btn-success:focus {
    background: var(--erp-ok-bd);
    border-color: var(--erp-ok);
    color: var(--erp-ok);
}

.btn-info {
    background: var(--erp-info-bg);
    border-color: var(--erp-info-bd);
    color: var(--erp-info);
}

.btn-info:hover,
.btn-info:focus {
    background: var(--erp-info-bd);
    border-color: var(--erp-info);
    color: var(--erp-info);
}

.btn-warning {
    background: var(--erp-warn-bg);
    border-color: var(--erp-warn-bd);
    color: var(--erp-warn);
}

.btn-warning:hover,
.btn-warning:focus {
    background: var(--erp-warn-bd);
    border-color: var(--erp-warn);
    color: var(--erp-warn);
}

/* Borrar es la unica accion que se pinta maciza: es la que hay que pensarse. */
.btn-danger {
    background: var(--erp-danger-solid);
    border-color: var(--erp-danger-solid);
    color: var(--erp-danger-solid-ink);
}

.btn-danger:hover,
.btn-danger:focus {
    background: color-mix(in srgb, var(--erp-danger-solid) 82%, #000);
    border-color: color-mix(in srgb, var(--erp-danger-solid) 82%, #000);
    color: var(--erp-danger-solid-ink);
}

.btn-link {
    color: var(--erp-accent-text);
    box-shadow: none;
}

.btn.disabled,
.btn[disabled] {
    opacity: .55;
    box-shadow: none;
}

.btn-group > .btn:not(:first-child) {
    margin-left: -1px;
}

/* ================================ 8. ETIQUETAS, BADGES Y AVISOS ========== */

/* Una etiqueta de estado tintada se lee en una tabla densa; una maciza es una
   mancha de color que compite con el texto de al lado. */
.label,
.badge {
    border-radius: var(--erp-radius-pill);
    font-size: var(--erp-size-sm);
    font-weight: 650;
    letter-spacing: .01em;
    padding: 3px 9px;
    border: 1px solid transparent;
    display: inline-block;
    line-height: 1.35;
}

.label-default,
.badge {
    background: var(--erp-surface-3);
    border-color: var(--erp-border);
    color: var(--erp-ink-soft);
}

.label-success { background: var(--erp-ok-bg);     border-color: var(--erp-ok-bd);     color: var(--erp-ok); }
.label-info    { background: var(--erp-info-bg);   border-color: var(--erp-info-bd);   color: var(--erp-info); }
.label-warning { background: var(--erp-warn-bg);   border-color: var(--erp-warn-bd);   color: var(--erp-warn); }
.label-danger  { background: var(--erp-danger-bg); border-color: var(--erp-danger-bd); color: var(--erp-danger); }

.label-primary {
    background: var(--erp-a-14);
    border-color: var(--erp-a-35);
    color: var(--erp-accent-text);
}

.badge.bg-info    { background: var(--erp-info-bg);   color: var(--erp-info);   border-color: var(--erp-info-bd); }
.badge.bg-danger  { background: var(--erp-danger-bg); color: var(--erp-danger); border-color: var(--erp-danger-bd); }
.badge.bg-warning { background: var(--erp-warn-bg);   color: var(--erp-warn);   border-color: var(--erp-warn-bd); }
.badge.bg-success { background: var(--erp-ok-bg);     color: var(--erp-ok);     border-color: var(--erp-ok-bd); }

/* Avisos: filo grueso a la izquierda, que es lo que se ve de reojo. */
.alert {
    border-radius: var(--erp-radius-sm);
    border: 1px solid transparent;
    border-left-width: 3px;
    padding: 12px 15px;
    font-size: var(--erp-size);
}

.alert-success { background: var(--erp-ok-bg);     border-color: var(--erp-ok-bd);     border-left-color: var(--erp-ok);     color: var(--erp-ok); }
.alert-info    { background: var(--erp-info-bg);   border-color: var(--erp-info-bd);   border-left-color: var(--erp-info);   color: var(--erp-info); }
.alert-warning { background: var(--erp-warn-bg);   border-color: var(--erp-warn-bd);   border-left-color: var(--erp-warn);   color: var(--erp-warn); }
.alert-danger  { background: var(--erp-danger-bg); border-color: var(--erp-danger-bd); border-left-color: var(--erp-danger); color: var(--erp-danger); }

.alert a { color: inherit; text-decoration: underline; }

.text-success { color: var(--erp-ok); }
.text-info    { color: var(--erp-info); }
.text-warning { color: var(--erp-warn); }
.text-danger  { color: var(--erp-danger); }

/* =============================== 9. PESTAÑAS Y PIEZAS DE BOOTSTRAP ======= */

.nav-tabs {
    border-bottom: 1px solid var(--erp-border);
}

.nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--erp-ink-muted);
    font-weight: 600;
    margin-right: 4px;
    padding: 10px 14px;
    background: transparent;
    transition: color .13s, border-color .13s, background-color .13s;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background: var(--erp-surface-2);
    border-bottom-color: var(--erp-border-strong);
    color: var(--erp-ink);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--erp-accent);
    color: var(--erp-ink);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background: var(--erp-a-14);
    color: var(--erp-accent-text);
    border-radius: var(--erp-radius-sm);
}

/* Desplegables */
.dropdown-menu {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    box-shadow: var(--erp-shadow-3);
    padding: 5px;
}

.dropdown-menu > li > a {
    border-radius: var(--erp-radius-xs);
    color: var(--erp-ink-soft);
    padding: 7px 11px;
    font-weight: 500;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--erp-surface-3);
    color: var(--erp-ink);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
    background: var(--erp-a-14);
    color: var(--erp-accent-text);
}

.dropdown-menu .divider {
    background: var(--erp-border);
}

.dropdown-header {
    color: var(--erp-ink-muted);
    font-size: var(--erp-size-sm);
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 11px 4px;
}

/* Modales */
.modal-content {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-3);
}

.modal-header,
.modal-footer {
    border-color: var(--erp-border);
}

.modal-title {
    color: var(--erp-ink);
    font-weight: 650;
}

.modal-backdrop.in {
    opacity: .55;
}

/* Emergentes y globos */
.popover,
.tooltip-inner {
    border-radius: var(--erp-radius-sm);
    font-size: var(--erp-size-sm);
}

.popover {
    background: var(--erp-surface);
    border-color: var(--erp-border);
    box-shadow: var(--erp-shadow-3);
    color: var(--erp-ink-soft);
}

.popover-title {
    background: var(--erp-surface-2);
    border-color: var(--erp-border);
    color: var(--erp-ink);
}

/* Migas y paginacion */
.breadcrumb {
    background: transparent;
    padding: 0 0 12px;
    color: var(--erp-ink-muted);
}

.pagination > li > a,
.pagination > li > span {
    background: var(--erp-surface);
    border-color: var(--erp-border);
    color: var(--erp-ink-soft);
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--erp-a-14);
    border-color: var(--erp-a-35);
    color: var(--erp-accent-text);
}

/* Grupos de campos */
.input-group-addon {
    background: var(--erp-surface-3);
    border-color: var(--erp-border-strong);
    color: var(--erp-ink-muted);
    border-radius: var(--erp-radius-sm);
}

/* Listas de grupo */
.list-group-item {
    background: var(--erp-surface);
    border-color: var(--erp-border);
    color: var(--erp-ink-soft);
}

/* Barras de progreso */
.progress {
    background: var(--erp-surface-3);
    border-radius: var(--erp-radius-pill);
    box-shadow: none;
    height: 8px;
}

.progress-bar {
    background: var(--erp-accent);
    box-shadow: none;
}

/* Codigo y prefomateado (pantallas de informacion del sistema) */
code, pre, kbd {
    font-family: var(--erp-font-mono);
    background: var(--erp-surface-2);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-xs);
    color: var(--erp-ink-soft);
}

/* =============================== 10. VACIOS Y CARGAS ===================== */

/* Una tabla vacia que solo dice «No matching records found» no le dice a nadie
   que hacer. Aqui al menos se ve como un estado y no como una fila rota. */
.dataTables_empty,
td.dataTables_empty {
    color: var(--erp-ink-muted);
    font-size: var(--erp-size);
    padding: 44px 18px !important;
    text-align: center;
    background: var(--erp-surface-2);
}

.dataTables_wrapper .dataTables_processing {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    box-shadow: var(--erp-shadow-2);
    color: var(--erp-ink-muted);
    font-weight: 600;
    padding: 10px 18px;
    height: auto;
    z-index: 5;
}

/* Esqueleto de carga: barras que respiran. El tema ya pinta los huecos; aqui
   solo se les da el color del modo activo y el pulso. */
@keyframes erp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

.tw-animate-pulse,
.erp-skeleton {
    animation: erp-pulse 1.6s cubic-bezier(.4, 0, .6, 1) infinite;
}

.erp-skeleton {
    background: var(--erp-surface-3);
    border-radius: var(--erp-radius-xs);
    display: block;
    height: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .tw-animate-pulse,
    .erp-skeleton,
    .btn,
    .form-control {
        animation: none !important;
        transition: none !important;
    }
}

/* ================== 11. MODO OSCURO: LAS UTILIDADES `tw-` DE LAS VISTAS === */

/*
 | El build de Tailwind del tema es un PURGADO sin variante `dark:`, y las
 | vistas llevan escritas a mano utilidades como `tw-bg-white` o
 | `tw-text-neutral-500`. En oscuro eso son parches blancos y texto invisible.
 |
 | Regenerar el bundle con el modo oscuro encendido tocaria todas las pantallas
 | de todos los modulos a la vez; en su lugar se remapean AQUI las utilidades
 | que de verdad estan escritas en el proyecto (contadas con grep sobre
 | app/Modules: son estas veintitantas). Al añadir una utilidad neutra nueva a
 | una vista hay que añadirla tambien a esta lista.
 |
 | El selector lleva el atributo del <html> delante, asi que gana en
 | especificidad a la utilidad sin necesidad de `!important`; solo lo llevan
 | las utilidades que en el marcado van con `!` (las que Tailwind genera ya
 | importantes).
 */

:root[data-erp-mode="dark"] .tw-bg-white,
:root[data-erp-mode="dark"] .tw-bg-neutral-50 { background-color: var(--erp-surface); }
:root[data-erp-mode="dark"] .tw-bg-neutral-100 { background-color: var(--erp-surface-2); }
:root[data-erp-mode="dark"] .tw-bg-neutral-200,
:root[data-erp-mode="dark"] .tw-bg-neutral-300,
:root[data-erp-mode="dark"] .tw-bg-neutral-400,
:root[data-erp-mode="dark"] .tw-bg-stone-200,
:root[data-erp-mode="dark"] .tw-bg-stone-400 { background-color: var(--erp-surface-3); }
:root[data-erp-mode="dark"] .tw-bg-neutral-900\/5,
:root[data-erp-mode="dark"] .tw-bg-neutral-600\/10 { background-color: var(--erp-surface-3); }
:root[data-erp-mode="dark"] .\!tw-bg-neutral-100 { background-color: var(--erp-surface-2) !important; }

:root[data-erp-mode="dark"] .tw-text-neutral-900,
:root[data-erp-mode="dark"] .tw-text-neutral-800 { color: var(--erp-ink); }
:root[data-erp-mode="dark"] .tw-text-neutral-700,
:root[data-erp-mode="dark"] .tw-text-neutral-600,
:root[data-erp-mode="dark"] .tw-text-stone-700 { color: var(--erp-ink-soft); }
:root[data-erp-mode="dark"] .tw-text-neutral-500 { color: var(--erp-ink-muted); }
:root[data-erp-mode="dark"] .tw-text-neutral-400,
:root[data-erp-mode="dark"] .tw-text-neutral-300 { color: var(--erp-ink-muted); }
/* Las pestañas horizontales del tema traen fondo gris claro (#f3f4f6) con una
   regla de tres clases: en oscuro, el texto claro encima no se leia (2.3.0). */
:root[data-erp-mode="dark"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal { background-color: var(--erp-surface-2); }
:root[data-erp-mode="dark"] .panel-full-width-tabs .nav li a,
:root[data-erp-mode="dark"] .panel-full-width-tabs.horizontal-scrollable-tabs .scroller,
:root[data-erp-mode="dark"] [dir=rtl] .panel-full-width-tabs .nav { background-color: var(--erp-surface-2); }
:root[data-erp-mode="dark"] .\!tw-placeholder-neutral-500::placeholder { color: var(--erp-ink-muted) !important; }

:root[data-erp-mode="dark"] .tw-border-neutral-100,
:root[data-erp-mode="dark"] .tw-border-neutral-200,
:root[data-erp-mode="dark"] .tw-border-neutral-300,
:root[data-erp-mode="dark"] .tw-border-neutral-400,
:root[data-erp-mode="dark"] .tw-border-neutral-600\/20,
:root[data-erp-mode="dark"] .tw-ring-neutral-200,
:root[data-erp-mode="dark"] .tw-ring-stone-300 { border-color: var(--erp-border); }
:root[data-erp-mode="dark"] .\!tw-border-white { border-color: var(--erp-border) !important; }

/* Lo mismo cuando el modo es `auto` y el sistema pide oscuro. */
@media (prefers-color-scheme: dark) {
    :root[data-erp-mode="auto"] .tw-bg-white,
    :root[data-erp-mode="auto"] .tw-bg-neutral-50 { background-color: var(--erp-surface); }
    :root[data-erp-mode="auto"] .tw-bg-neutral-100 { background-color: var(--erp-surface-2); }
    :root[data-erp-mode="auto"] .tw-bg-neutral-200,
    :root[data-erp-mode="auto"] .tw-bg-neutral-300,
    :root[data-erp-mode="auto"] .tw-bg-neutral-400,
    :root[data-erp-mode="auto"] .tw-bg-stone-200,
    :root[data-erp-mode="auto"] .tw-bg-stone-400 { background-color: var(--erp-surface-3); }
    :root[data-erp-mode="auto"] .tw-bg-neutral-900\/5,
    :root[data-erp-mode="auto"] .tw-bg-neutral-600\/10 { background-color: var(--erp-surface-3); }
    :root[data-erp-mode="auto"] .\!tw-bg-neutral-100 { background-color: var(--erp-surface-2) !important; }

    :root[data-erp-mode="auto"] .tw-text-neutral-900,
    :root[data-erp-mode="auto"] .tw-text-neutral-800 { color: var(--erp-ink); }
    :root[data-erp-mode="auto"] .tw-text-neutral-700,
    :root[data-erp-mode="auto"] .tw-text-neutral-600,
    :root[data-erp-mode="auto"] .tw-text-stone-700 { color: var(--erp-ink-soft); }
    :root[data-erp-mode="auto"] .tw-text-neutral-500 { color: var(--erp-ink-muted); }
    :root[data-erp-mode="auto"] .tw-text-neutral-400,
    :root[data-erp-mode="auto"] .tw-text-neutral-300 { color: var(--erp-ink-muted); }
    :root[data-erp-mode="auto"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal { background-color: var(--erp-surface-2); }
    :root[data-erp-mode="auto"] .panel-full-width-tabs .nav li a,
    :root[data-erp-mode="auto"] .panel-full-width-tabs.horizontal-scrollable-tabs .scroller,
    :root[data-erp-mode="auto"] [dir=rtl] .panel-full-width-tabs .nav { background-color: var(--erp-surface-2); }
    :root[data-erp-mode="auto"] .\!tw-placeholder-neutral-500::placeholder { color: var(--erp-ink-muted) !important; }

    :root[data-erp-mode="auto"] .tw-border-neutral-100,
    :root[data-erp-mode="auto"] .tw-border-neutral-200,
    :root[data-erp-mode="auto"] .tw-border-neutral-300,
    :root[data-erp-mode="auto"] .tw-border-neutral-400,
    :root[data-erp-mode="auto"] .tw-border-neutral-600\/20,
    :root[data-erp-mode="auto"] .tw-ring-neutral-200,
    :root[data-erp-mode="auto"] .tw-ring-stone-300 { border-color: var(--erp-border); }
    :root[data-erp-mode="auto"] .\!tw-border-white { border-color: var(--erp-border) !important; }
}

/*
 | EL LOGOTIPO EN OSCURO. La cabecera del panel usa SIEMPRE `company_logo_dark`,
 | que en la nomenclatura heredada del sistema de origen es el logotipo para FONDOS CLAROS
 | -tinta oscura sobre transparencia, que es lo que manda cualquier empresa-.
 | Sobre una barra oscura eso no es un logotipo apagado: no queda ni el hueco.
 | Se le pone una plaquita clara detras, que es la misma solucion que se tomo en
 | la portada publica y que funciona con cualquier arte sin pedirle al cliente
 | que suba una segunda imagen.
 */
:root[data-erp-mode="dark"] #logo img,
:root[data-erp-mode="dark"] .company-logo img {
    background: #ffffff;
    border-radius: var(--erp-radius-sm);
    padding: 4px 9px;
}

@media (prefers-color-scheme: dark) {
    :root[data-erp-mode="auto"] #logo img,
    :root[data-erp-mode="auto"] .company-logo img {
        background: #ffffff;
        border-radius: var(--erp-radius-sm);
        padding: 4px 9px;
    }
}

/* Piezas del tema que traen el color escrito dentro de style.css y que en
   oscuro se quedan claras. Van por token, no por color. */
.dropdown-menu,
.modal-content,
.popover,
.panel_s,
.well {
    color-scheme: inherit;
}

.mobile-navbar .navbar-nav > li > a {
    color: var(--erp-ink-soft) !important;
    border-bottom-color: var(--erp-border);
}

.navbar-default,
.navbar-toggle {
    background: var(--erp-surface);
    border-color: var(--erp-border);
}

img.staff-profile-image-small,
img.client-profile-image-small,
.staff-profile-image-xs {
    background: var(--erp-surface-3);
}

/* ================================= 12. PANTALLAS DE ACCESO =============== */

/*
 | Entrar, recuperar la contraseña y el reto del segundo factor comparten
 | cabecera pero NO el armazon del panel: son cuatro elementos sobre un fondo.
 | Aqui se les da el mismo aire que a la portada publica -resplandor del acento
 | de fondo, tarjeta con franja- para que la primera pantalla que ve alguien ya
 | sea la de esta casa.
 */

body.login_admin,
body.login_client {
    background: var(--erp-bg) !important;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

body.login_admin::before,
body.login_client::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .22;
    background:
        radial-gradient(44rem 28rem at 12% -10%, var(--erp-accent), transparent 60%),
        radial-gradient(36rem 24rem at 90% 4%, var(--erp-accent), transparent 56%);
}

.authentication-form-wrapper {
    position: relative;
    z-index: 1;
}

/* La tarjeta del formulario: se le pone la franja y la sombra del panel. Se
   alcanza por sus utilidades porque la vista no le da clase propia. */
.authentication-form-wrapper > .tw-bg-white {
    position: relative;
    background: var(--erp-surface) !important;
    border-color: var(--erp-border) !important;
    border-radius: var(--erp-radius) !important;
    box-shadow: var(--erp-shadow-3) !important;
    overflow: hidden;
}

.authentication-form-wrapper > .tw-bg-white::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--erp-accent), var(--erp-a-35) 40%, transparent 75%);
}

.authentication-form-wrapper h1 {
    color: var(--erp-ink);
}

.authentication-form-wrapper .tw-text-neutral-600,
.authentication-form-wrapper .text-muted {
    color: var(--erp-ink-muted);
}

/* En una pantalla de acceso el boton es la accion: ancho completo y acento. */
.authentication-form-wrapper .btn-primary {
    min-height: 42px;
    font-size: 15px;
}