/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  DS-CHROMA · Capa cromática de Ducoudray & Asociados                      ║
   ║                                                                            ║
   ║  Se carga **la última**, después de ds.css, en los tres layouts. Es la      ║
   ║  única capa que puede dar por sentado su posición en la cascada, y por eso  ║
   ║  es donde vive el color: lo que se escriba aquí manda sin pelear con        ║
   ║  `!important` salvo donde ArchitectUI o erp-ui.css ya lo llevan.            ║
   ║                                                                            ║
   ║  Qué resuelve, y por qué existe como archivo aparte:                       ║
   ║                                                                            ║
   ║  1. **La paleta de acento no tenía escala.** `.tint-green` pintaba texto    ║
   ║     oliva sobre un fondo menta, `.tint-cyan` traía su fondo escrito a mano  ║
   ║     y tres tonos del catálogo de enums (`teal`, `purple`, `indigo`, más     ║
   ║     `green`) no tenían ni `.text-*` ni `.badge-*`: `<x-state color="teal">` ║
   ║     salía sin color. Aquí cada tono es una rampa de cuatro escalones        ║
   ║     —`soft`, `line`, `base`, `ink`— y todo lo demás sale de ahí.            ║
   ║                                                                            ║
   ║  2. **El color no llegaba a los componentes.** Los estados tenían color y   ║
   ║     los KPI no; los botones eran planos y las tablas grises. El color se    ║
   ║     usa para *distinguir* —módulo, estado, KPI, acción—, nunca para         ║
   ║     decorar: el fondo de página y las superficies siguen siendo neutros.    ║
   ║                                                                            ║
   ║  3. **Los degradados vuelven, pero acotados.** erp-ui.css los eliminó en    ║
   ║     bloque porque los de ArchitectUI («fruit», «hopes») son de dos tonos    ║
   ║     saturados y distintos. Los de aquí son de un mismo tono a dos           ║
   ║     escalones de distancia y sólo entran donde hay jerarquía que marcar:    ║
   ║     la acción principal, la pastilla de un icono, la banda del panel.       ║
   ║     Ningún texto largo se apoya en uno.                                     ║
   ║                                                                            ║
   ║  Regla que gobierna el archivo, la misma de ds.css: **ningún componente     ║
   ║  escribe un color literal**. Los literales están todos en la sección 1.     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ══════════════════════════════════════════════════════════════════════════
   1) TOKENS · la rampa de color
   ══════════════════════════════════════════════════════════════════════════

   Cada tono son cuatro escalones, y cada uno tiene un trabajo:

   | escalón | para qué                                    | contraste exigido |
   |---------|---------------------------------------------|-------------------|
   | `soft`  | fondo del tinte (pastilla, badge, fila)      | —                 |
   | `line`  | borde de ese fondo                           | —                 |
   | `base`  | relleno pleno e icono sobre superficie clara | 4.5:1 sobre blanco|
   | `ink`   | texto e icono **sobre `soft`**               | 4.5:1 sobre soft  |

   Separar `base` de `ink` es lo que arregla el problema de fondo: antes se
   usaba un único valor para las dos cosas, así que o el icono sobre el tinte
   quedaba lavado o el relleno pleno quedaba demasiado oscuro. Con dos
   escalones cada uno cumple su contraste sin arrastrar al otro.

   La marca no se toca: `--erp-primary` sigue saliendo de brand.css y el teal
   de la rampa es exactamente ese valor. Lo que sí se añade es `--k-brand-lift`,
   un teal un paso más claro que sólo existe para ser el otro extremo de los
   degradados: sin él, un degradado de marca tendría que inventarse un color.
   ────────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Marca ─────────────────────────────────────────────────────────── */
    --k-teal-soft:  #EAF1F0;
    --k-teal-line:  #CBDEDC;
    --k-teal-base:  var(--erp-primary, #355D5D);
    --k-teal-ink:   var(--erp-primary-700, #213B3B);
    --k-brand-lift: #4C837E;   /* extremo claro de los degradados de marca */

    /* ── Azul · informativo, programado, en proceso ────────────────────── */
    --k-blue-soft:  #E8F0FE;
    --k-blue-line:  #C6DCFB;
    --k-blue-base:  #2E7CD6;
    --k-blue-ink:   #1B5AA3;

    /* ── Índigo ────────────────────────────────────────────────────────── */
    --k-indigo-soft: #EAECFC;
    --k-indigo-line: #CFD3F7;
    --k-indigo-base: #4B57C9;
    --k-indigo-ink:  #333E9C;

    /* ── Violeta ───────────────────────────────────────────────────────── */
    --k-violet-soft: #F0EAFD;
    --k-violet-line: #DCD0FA;
    --k-violet-base: #7A5AEC;
    --k-violet-ink:  #5931C0;

    /* ── Cian ──────────────────────────────────────────────────────────── */
    --k-cyan-soft:  #E0F4F8;
    --k-cyan-line:  #BCE7EE;
    --k-cyan-base:  #0E9BB0;
    --k-cyan-ink:   #0A6E7E;

    /* ── Verde · completado, aprobado, en meta ─────────────────────────── */
    --k-green-soft: #E4F6EC;
    --k-green-line: #C2EAD4;
    --k-green-base: #1E9E5A;
    --k-green-ink:  #14713F;

    /* ── Lima · el oliva de la marca, con su propio fondo ──────────────── */
    --k-lime-soft:  #F1F3E1;
    --k-lime-line:  #DEE2BD;
    --k-lime-base:  #6E7A3A;
    --k-lime-ink:   #525B28;

    /* ── Ámbar · en riesgo, próximo a vencer, pendiente ────────────────── */
    --k-amber-soft: #FCF3DC;
    --k-amber-line: #F4E1AE;
    --k-amber-base: #C77E06;
    --k-amber-ink:  #8A5804;

    /* ── Naranja · la terracota de la marca, con su propio fondo ───────── */
    --k-orange-soft: #FBEDE3;
    --k-orange-line: #F2D7C3;
    --k-orange-base: #9F5E2D;
    --k-orange-ink:  #7A4520;

    /* ── Rojo · vencido, fuera de meta, rechazado ──────────────────────── */
    --k-red-soft:   #FCE9EB;
    --k-red-line:   #F6CCD0;
    --k-red-base:   #D64550;
    --k-red-ink:    #A62B35;

    /* ── Rosa ──────────────────────────────────────────────────────────── */
    --k-pink-soft:  #FCE7F1;
    --k-pink-line:  #F7C7DE;
    --k-pink-base:  #D6457E;
    --k-pink-ink:   #A62C5C;

    /* ── Pizarra · borrador, inactivo, archivado ───────────────────────── */
    --k-slate-soft: #EDF1F5;
    --k-slate-line: #DAE1E8;
    --k-slate-base: #55677A;
    --k-slate-ink:  #3C4A5A;

    /* ── Canales sueltos ────────────────────────────────────────────────
       Para los rgba() de sombras y anillos de color, que necesitan los
       canales y no el hexadecimal. */
    --k-green-rgb: 30, 158, 90;
    --k-amber-rgb: 199, 126, 6;
    --k-red-rgb:   214, 69, 80;
    --k-blue-rgb:  46, 124, 214;

    /* ── Degradados de la casa ──────────────────────────────────────────
       Siempre del mismo tono y a dos escalones: un degradado entre dos
       tonos distintos es lo que hace que una interfaz parezca de 2014. */
    --g-brand:  linear-gradient(135deg, var(--k-brand-lift) 0%, var(--erp-primary, #355D5D) 100%);
    --g-tint:   linear-gradient(140deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 62%);
    --g-header: linear-gradient(180deg, var(--su-card) 0%, var(--su-sunken) 100%);

    /* ── Sombras con color ──────────────────────────────────────────────
       Una sombra gris bajo un botón de marca lo aplana; teñida del propio
       color, el botón parece apoyado sobre la página y no pegado encima. */
    --el-brand: 0 1px 2px rgba(var(--erp-primary-rgb, 53,93,93), .18),
                0 6px 16px rgba(var(--erp-primary-rgb, 53,93,93), .22);
    --el-color: 0 1px 2px rgba(16,32,48,.06), 0 6px 18px rgba(16,32,48,.10);

    /* ── Realce al pasar el ratón ───────────────────────────────────────── */
    --lift: translateY(-2px);
}

/* ── Tema oscuro ───────────────────────────────────────────────────────────
   No se repinta un solo componente: se redefine la rampa. `soft` pasa de un
   pastel a una transparencia del propio tono —un pastel claro sobre fondo
   negro es una mancha luminosa— e `ink` sube de luminosidad hasta volver a
   cumplir su 4.5:1, esta vez contra el fondo oscuro.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --k-teal-soft:  rgba(var(--erp-primary-rgb, 53,93,93), .26);
    --k-teal-line:  rgba(var(--erp-primary-rgb, 53,93,93), .48);
    --k-teal-ink:   #8FC3BD;
    --k-brand-lift: #57938D;

    --k-blue-soft:  rgba(46,124,214,.20);
    --k-blue-line:  rgba(46,124,214,.38);
    --k-blue-ink:   #8FBCF4;

    --k-indigo-soft: rgba(75,87,201,.22);
    --k-indigo-line: rgba(75,87,201,.40);
    --k-indigo-ink:  #A8AFF2;

    --k-violet-soft: rgba(122,90,236,.22);
    --k-violet-line: rgba(122,90,236,.40);
    --k-violet-ink:  #BBA5F8;

    --k-cyan-soft:  rgba(14,155,176,.20);
    --k-cyan-line:  rgba(14,155,176,.38);
    --k-cyan-ink:   #6DD2E1;

    --k-green-soft: rgba(30,158,90,.20);
    --k-green-line: rgba(30,158,90,.38);
    --k-green-ink:  #6FD79E;

    --k-lime-soft:  rgba(110,122,58,.26);
    --k-lime-line:  rgba(110,122,58,.46);
    --k-lime-ink:   #C4CA7C;

    --k-amber-soft: rgba(199,126,6,.22);
    --k-amber-line: rgba(199,126,6,.40);
    --k-amber-ink:  #EAB458;

    --k-orange-soft: rgba(159,94,45,.26);
    --k-orange-line: rgba(159,94,45,.46);
    --k-orange-ink:  #E0A87C;

    --k-red-soft:   rgba(214,69,80,.20);
    --k-red-line:   rgba(214,69,80,.38);
    --k-red-ink:    #F2919C;

    --k-pink-soft:  rgba(214,69,126,.20);
    --k-pink-line:  rgba(214,69,126,.38);
    --k-pink-ink:   #F09BC0;

    --k-slate-soft: rgba(140,154,168,.16);
    --k-slate-line: rgba(140,154,168,.30);
    --k-slate-base: #8C9AA8;
    --k-slate-ink:  #A9B7C4;

    /* Sobre fondo oscuro el brillo de la superficie viene de arriba, no de
       la izquierda: un `--g-tint` con la misma dirección se vería sucio. */
    --g-tint:   linear-gradient(140deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 62%);
    --g-header: linear-gradient(180deg, var(--su-card) 0%, rgba(255,255,255,.02) 100%);
    --el-brand: 0 1px 2px rgba(0,0,0,.40), 0 8px 22px rgba(var(--erp-primary-rgb, 53,93,93), .34);
    --el-color: 0 1px 2px rgba(0,0,0,.36), 0 8px 22px rgba(0,0,0,.44);
}

/* ══════════════════════════════════════════════════════════════════════════
   2) PUENTE CON LA PALETA ANTERIOR
   Los acentos `--erp-a-*` los consumen erp-ui.css y media docena de vistas.
   Se reapuntan a la rampa en vez de retirarlos: así lo ya escrito se recolorea
   solo y no hay que repasar ninguna plantilla.

   Los cuatro tonos de tierra de la marca —oliva y terracota— **no se pierden**:
   siguen enteros en `--k-lime-*` y `--k-orange-*`, que ahora tienen fondo
   propio. Lo que se corrige es el emparejamiento: `.tint-green` pintaba oliva
   (amarillo-verde) sobre menta (azul-verde) porque tomaba prestado el fondo del
   estado «éxito», y dos verdes de familia distinta juntos se leen como un error
   de impresión.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --erp-a-teal:   var(--k-teal-base);
    --erp-a-blue:   var(--k-blue-base);
    --erp-a-green:  var(--k-green-base);
    --erp-a-amber:  var(--k-amber-base);
    --erp-a-red:    var(--k-red-base);
    --erp-a-purple: var(--k-violet-base);
    --erp-a-pink:   var(--k-pink-base);
    --erp-a-indigo: var(--k-indigo-base);
    --erp-a-cyan:   var(--k-cyan-base);
    --erp-a-slate:  var(--k-slate-base);
}

/* ══════════════════════════════════════════════════════════════════════════
   3) UTILIDADES DE TONO
   Un tono, tres formas de gastarlo: pastilla (`.tint-*`), icono suelto
   (`.ico-*`) y texto (`.text-*`). Las tres salen de la misma rampa, así que un
   módulo puede llevar su color en la pastilla del encabezado, en los iconos de
   dentro y en el estado de su tabla sin que ninguno desentone.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Pastilla de icono ──────────────────────────────────────────────────
   Lleva un anillo interior del mismo tono en vez de un borde: un borde de 1px
   sobre un fondo tan claro se ve como un contorno; el anillo interior se lee
   como volumen. Encima, el barrido de `--g-tint` da el brillo de arriba a la
   izquierda que separa la pastilla del papel. */
.tint-teal, .tint-blue, .tint-green, .tint-amber, .tint-red, .tint-purple,
.tint-slate, .tint-indigo, .tint-cyan, .tint-pink, .tint-lime, .tint-orange,
.tint-violet {
    background-image: var(--g-tint);
    box-shadow: inset 0 0 0 1px var(--k-ring, transparent);
}
.tint-teal   { --k-ring: var(--k-teal-line);   background-color: var(--k-teal-soft);   color: var(--k-teal-ink); }
.tint-blue   { --k-ring: var(--k-blue-line);   background-color: var(--k-blue-soft);   color: var(--k-blue-ink); }
.tint-green  { --k-ring: var(--k-green-line);  background-color: var(--k-green-soft);  color: var(--k-green-ink); }
.tint-amber  { --k-ring: var(--k-amber-line);  background-color: var(--k-amber-soft);  color: var(--k-amber-ink); }
.tint-red    { --k-ring: var(--k-red-line);    background-color: var(--k-red-soft);    color: var(--k-red-ink); }
.tint-purple,
.tint-violet { --k-ring: var(--k-violet-line); background-color: var(--k-violet-soft); color: var(--k-violet-ink); }
.tint-slate  { --k-ring: var(--k-slate-line);  background-color: var(--k-slate-soft);  color: var(--k-slate-ink); }
.tint-indigo { --k-ring: var(--k-indigo-line); background-color: var(--k-indigo-soft); color: var(--k-indigo-ink); }
.tint-cyan   { --k-ring: var(--k-cyan-line);   background-color: var(--k-cyan-soft);   color: var(--k-cyan-ink); }
.tint-pink   { --k-ring: var(--k-pink-line);   background-color: var(--k-pink-soft);   color: var(--k-pink-ink); }
.tint-lime   { --k-ring: var(--k-lime-line);   background-color: var(--k-lime-soft);   color: var(--k-lime-ink); }
.tint-orange { --k-ring: var(--k-orange-line); background-color: var(--k-orange-soft); color: var(--k-orange-ink); }

/* ── Icono suelto ──────────────────────────────────────────────────────── */
.ico-teal   { color: var(--k-teal-base) !important; }
.ico-blue   { color: var(--k-blue-base) !important; }
.ico-green  { color: var(--k-green-base) !important; }
.ico-amber  { color: var(--k-amber-base) !important; }
.ico-red    { color: var(--k-red-base) !important; }
.ico-purple, .ico-violet { color: var(--k-violet-base) !important; }
.ico-pink   { color: var(--k-pink-base) !important; }
.ico-indigo { color: var(--k-indigo-base) !important; }
.ico-cyan   { color: var(--k-cyan-base) !important; }
.ico-slate  { color: var(--k-slate-base) !important; }
.ico-lime   { color: var(--k-lime-base) !important; }
.ico-orange { color: var(--k-orange-base) !important; }
[data-theme="dark"] .ico-teal   { color: var(--k-teal-ink) !important; }
[data-theme="dark"] .ico-blue   { color: var(--k-blue-ink) !important; }
[data-theme="dark"] .ico-green  { color: var(--k-green-ink) !important; }
[data-theme="dark"] .ico-amber  { color: var(--k-amber-ink) !important; }
[data-theme="dark"] .ico-red    { color: var(--k-red-ink) !important; }
[data-theme="dark"] .ico-purple,
[data-theme="dark"] .ico-violet { color: var(--k-violet-ink) !important; }
[data-theme="dark"] .ico-pink   { color: var(--k-pink-ink) !important; }
[data-theme="dark"] .ico-indigo { color: var(--k-indigo-ink) !important; }
[data-theme="dark"] .ico-cyan   { color: var(--k-cyan-ink) !important; }
[data-theme="dark"] .ico-lime   { color: var(--k-lime-ink) !important; }
[data-theme="dark"] .ico-orange { color: var(--k-orange-ink) !important; }

/* ── Texto ──────────────────────────────────────────────────────────────
   `<x-state>` pinta `text-{color}` con lo que devuelve el `color()` del enum,
   y el catálogo de enums devuelve además de los de Bootstrap `teal`, `purple`,
   `indigo` y `green`. Ninguno de esos cuatro existía en ninguna hoja: el
   estado salía en el color del texto normal, es decir, sin estado. */
.text-teal   { color: var(--k-teal-base) !important; }
.text-purple, .text-violet { color: var(--k-violet-base) !important; }
.text-indigo { color: var(--k-indigo-base) !important; }
.text-green  { color: var(--k-green-base) !important; }
.text-lime   { color: var(--k-lime-base) !important; }
.text-orange { color: var(--k-orange-base) !important; }
.text-pink   { color: var(--k-pink-base) !important; }
.text-cyan   { color: var(--k-cyan-base) !important; }
.text-success { color: var(--k-green-base) !important; }
.text-danger  { color: var(--k-red-base) !important; }
.text-warning { color: var(--k-amber-base) !important; }
.text-info    { color: var(--k-blue-base) !important; }
[data-theme="dark"] .text-teal   { color: var(--k-teal-ink) !important; }
[data-theme="dark"] .text-purple,
[data-theme="dark"] .text-violet { color: var(--k-violet-ink) !important; }
[data-theme="dark"] .text-indigo { color: var(--k-indigo-ink) !important; }
[data-theme="dark"] .text-green,
[data-theme="dark"] .text-success { color: var(--k-green-ink) !important; }
[data-theme="dark"] .text-lime   { color: var(--k-lime-ink) !important; }
[data-theme="dark"] .text-orange { color: var(--k-orange-ink) !important; }
[data-theme="dark"] .text-pink   { color: var(--k-pink-ink) !important; }
[data-theme="dark"] .text-cyan   { color: var(--k-cyan-ink) !important; }
[data-theme="dark"] .text-danger  { color: var(--k-red-ink) !important; }
[data-theme="dark"] .text-warning { color: var(--k-amber-ink) !important; }
[data-theme="dark"] .text-info    { color: var(--k-blue-ink) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   4) SUPERFICIES · fondo neutro, tarjeta con relieve
   El fondo de la página se queda neutro a propósito: es lo que permite que el
   color signifique algo donde sí aparece. Lo único que gana es un velo de
   marca del 3 %, que basta para que el blanco de las tarjetas se despegue.
   ══════════════════════════════════════════════════════════════════════════ */
.app-main__outer {
    background-color: var(--erp-bg);
    background-image:
        radial-gradient(1200px 520px at 88% -8%, rgba(var(--erp-primary-rgb, 53,93,93), .055), transparent 60%),
        radial-gradient(900px 460px at 4% 102%, rgba(var(--k-blue-rgb), .045), transparent 62%);
    background-attachment: fixed;
}

.card, .main-card.card {
    box-shadow: var(--el-1);
    transition: box-shadow var(--mo-base) var(--mo-ease),
                border-color var(--mo-base) var(--mo-ease),
                transform var(--mo-base) var(--mo-ease);
}
/* La cabecera de la tarjeta se separa del cuerpo con un degradado de un solo
   paso en vez de con una línea más gruesa: marca la jerarquía sin añadir otra
   regla horizontal a una pantalla que ya tiene las de la tabla. */
.card > .card-header,
.main-card.card > .card-header {
    background-image: var(--g-header);
    border-top-left-radius: var(--erp-radius);
    border-top-right-radius: var(--erp-radius);
}
/* Sólo la tarjeta que es un enlace se levanta: una que no lleva a ningún sitio
   y se mueve al pasar por encima promete algo que no cumple. */
.erp-card-link:hover,
.card.erp-card-link:hover { box-shadow: var(--el-3); transform: var(--lift); }

/* ══════════════════════════════════════════════════════════════════════════
   5) ENCABEZADO DE MÓDULO · el color dice en qué módulo estás
   El `tint` que ya declara cada `<x-page-header>` deja de ser un adorno de la
   pastilla y pasa a teñir también el filete inferior: entrando por la paleta de
   comandos, ese filete es lo primero que confirma dónde caíste.
   ══════════════════════════════════════════════════════════════════════════ */
.app-page-title { position: relative; }
.page-title-icon {
    border-radius: var(--erp-radius) !important;
    box-shadow: inset 0 0 0 1px var(--k-ring, transparent),
                0 2px 6px rgba(16,32,48,.06) !important;
    transition: transform var(--mo-base) var(--mo-ease);
}
.app-page-title:hover .page-title-icon { transform: rotate(-3deg) scale(1.04); }
.page-title-heading { letter-spacing: -.01em; }

/* ══════════════════════════════════════════════════════════════════════════
   6) KPI · la tarjeta de métrica
   Era una fila de cajas blancas iguales donde sólo el icono cambiaba de color.
   Ahora el tono del icono sube al filete superior, así que la fila se recorre
   por color —verde lo cumplido, rojo lo vencido— sin leer una sola etiqueta.
   El `:has()` es lo que permite hacerlo **sin tocar el componente Blade**: el
   filete lo decide la clase `.tint-*` que la tarjeta ya trae dentro. Donde no
   haya soporte, la tarjeta se queda como estaba y no se rompe nada.
   ══════════════════════════════════════════════════════════════════════════ */
.erp-stat {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--el-1);
    transition: box-shadow var(--mo-base) var(--mo-ease),
                transform var(--mo-base) var(--mo-ease),
                border-color var(--mo-base) var(--mo-ease);
}
/* El filete. `--k-stat` lo pone la regla `:has()` de abajo; sin ella queda
   transparente y la tarjeta es la de siempre. */
.erp-stat::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--k-stat, transparent);
    z-index: 1;
}
/* El mismo tono, al 4 %, como resplandor detrás del icono: es lo que evita que
   el filete parezca una pegatina puesta encima de una tarjeta blanca. */
.erp-stat::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background: radial-gradient(120% 150% at 0% 0%, var(--k-stat-soft, transparent) 0%, transparent 60%);
}
.erp-stat:has(.tint-teal)   { --k-stat: var(--k-teal-base);   --k-stat-soft: var(--k-teal-soft); }
.erp-stat:has(.tint-blue)   { --k-stat: var(--k-blue-base);   --k-stat-soft: var(--k-blue-soft); }
.erp-stat:has(.tint-green)  { --k-stat: var(--k-green-base);  --k-stat-soft: var(--k-green-soft); }
.erp-stat:has(.tint-amber)  { --k-stat: var(--k-amber-base);  --k-stat-soft: var(--k-amber-soft); }
.erp-stat:has(.tint-red)    { --k-stat: var(--k-red-base);    --k-stat-soft: var(--k-red-soft); }
.erp-stat:has(.tint-purple),
.erp-stat:has(.tint-violet) { --k-stat: var(--k-violet-base); --k-stat-soft: var(--k-violet-soft); }
.erp-stat:has(.tint-indigo) { --k-stat: var(--k-indigo-base); --k-stat-soft: var(--k-indigo-soft); }
.erp-stat:has(.tint-cyan)   { --k-stat: var(--k-cyan-base);   --k-stat-soft: var(--k-cyan-soft); }
.erp-stat:has(.tint-pink)   { --k-stat: var(--k-pink-base);   --k-stat-soft: var(--k-pink-soft); }
.erp-stat:has(.tint-lime)   { --k-stat: var(--k-lime-base);   --k-stat-soft: var(--k-lime-soft); }
.erp-stat:has(.tint-orange) { --k-stat: var(--k-orange-base); --k-stat-soft: var(--k-orange-soft); }
.erp-stat:has(.tint-slate)  { --k-stat: var(--k-slate-base);  --k-stat-soft: var(--k-slate-soft); }

.erp-stat__icon {
    border-radius: 12px;
    transition: transform var(--mo-base) var(--mo-ease);
}
.erp-stat__value { letter-spacing: -.02em; }
/* La etiqueta en versalitas: la cifra manda y el rótulo acompaña, y en un muro
   de doce tarjetas eso se nota más que dos puntos de tamaño. */
.erp-stat__label {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}
/* La dirección de la tendencia es una pastilla, no un texto suelto: al lado de
   una cifra de 22px, un «+4 %» en 11px pasa desapercibido justo cuando es el
   dato que dice si hay que preocuparse. */
.erp-stat__trend {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px 2px 6px; border-radius: 999px;
    background: var(--su-sunken); color: var(--tx-muted);
}
.erp-stat__trend.up   { background: var(--k-green-soft); color: var(--k-green-ink); }
.erp-stat__trend.down { background: var(--k-red-soft);   color: var(--k-red-ink); }

a.erp-stat:hover, .erp-stat.erp-card-link:hover {
    transform: var(--lift);
    box-shadow: var(--el-3);
    border-color: var(--k-stat, var(--li-strong));
}
a.erp-stat:hover .erp-stat__icon { transform: scale(1.06); }

/* ══════════════════════════════════════════════════════════════════════════
   7) BOTONES · la acción principal se ve como la principal
   Una pantalla con seis botones grises obliga a leerlos todos para encontrar
   el que hace la acción. Aquí sólo uno lleva relleno de marca y sombra teñida;
   el resto baja un escalón, y las acciones destructivas suben sólo al pasar
   por encima —un rojo pleno permanente en una fila de tabla convierte todo el
   listado en una alarma—.
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
    transition: background var(--mo-fast) var(--mo-ease),
                border-color var(--mo-fast) var(--mo-ease),
                box-shadow var(--mo-fast) var(--mo-ease),
                transform var(--mo-fast) var(--mo-ease),
                color var(--mo-fast) var(--mo-ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background-image: var(--g-brand) !important;
    border-color: transparent !important;
    box-shadow: var(--el-brand);
}
.btn-primary:hover, .btn-primary:focus {
    background-image: none !important;
    background-color: var(--erp-primary-600) !important;
    border-color: transparent !important;
    box-shadow: var(--el-brand);
    transform: var(--lift);
}
.btn-primary:disabled, .btn-primary.disabled { box-shadow: none; opacity: .55; }

/* Los plenos de estado, con la misma receta: degradado de un tono y sombra de
   su color. Se usan poco y a propósito —aprobar, anular—, que es lo que hace
   que se distingan cuando aparecen. */
.btn-success {
    background-image: linear-gradient(135deg, #27B26A 0%, var(--k-green-base) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(var(--k-green-rgb), .20), 0 6px 16px rgba(var(--k-green-rgb), .24);
}
.btn-danger {
    background-image: linear-gradient(135deg, #E25963 0%, var(--k-red-base) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(var(--k-red-rgb), .20), 0 6px 16px rgba(var(--k-red-rgb), .24);
}
.btn-warning {
    background-image: linear-gradient(135deg, #DE9316 0%, var(--k-amber-base) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(var(--k-amber-rgb), .20), 0 6px 16px rgba(var(--k-amber-rgb), .24);
}
.btn-info {
    background-image: linear-gradient(135deg, #4790E2 0%, var(--k-blue-base) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(var(--k-blue-rgb), .20), 0 6px 16px rgba(var(--k-blue-rgb), .24);
}
.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover {
    background-image: none !important;
    transform: var(--lift);
}
.btn-success:hover { background-color: var(--k-green-ink) !important; }
.btn-danger:hover  { background-color: var(--k-red-ink) !important; }
.btn-warning:hover { background-color: var(--k-amber-ink) !important; }
.btn-info:hover    { background-color: var(--k-blue-ink) !important; }

/* Contorneados: el borde neutro se mantiene en reposo —así la fila de acciones
   no es un arcoíris— y el tono aparece al apuntar, que es cuando hace falta
   saber qué va a pasar si se pulsa. */
.btn-outline-primary { background-color: var(--su-card) !important; }
.btn-outline-primary:hover {
    background-color: var(--k-teal-soft) !important;
    border-color: var(--k-teal-base) !important;
    color: var(--k-teal-ink) !important;
}
.btn-outline-secondary { background-color: var(--su-card) !important; }
.btn-outline-secondary:hover { background-color: var(--su-sunken) !important; }
.btn-outline-danger { color: var(--k-red-base) !important; background-color: var(--su-card) !important; }
.btn-outline-danger:hover {
    background-color: var(--k-red-soft) !important;
    border-color: var(--k-red-base) !important;
    color: var(--k-red-ink) !important;
}
.btn-outline-success { color: var(--k-green-base) !important; border-color: var(--li-strong) !important; background-color: var(--su-card) !important; }
.btn-outline-success:hover {
    background-color: var(--k-green-soft) !important;
    border-color: var(--k-green-base) !important;
    color: var(--k-green-ink) !important;
}
.btn-outline-info { color: var(--k-blue-base) !important; border-color: var(--li-strong) !important; background-color: var(--su-card) !important; }
.btn-outline-info:hover {
    background-color: var(--k-blue-soft) !important;
    border-color: var(--k-blue-base) !important;
    color: var(--k-blue-ink) !important;
}
.btn-outline-warning { color: var(--k-amber-base) !important; border-color: var(--li-strong) !important; background-color: var(--su-card) !important; }
.btn-outline-warning:hover {
    background-color: var(--k-amber-soft) !important;
    border-color: var(--k-amber-base) !important;
    color: var(--k-amber-ink) !important;
}
.btn-link { color: var(--k-teal-base) !important; }
[data-theme="dark"] .btn-link { color: var(--k-teal-ink) !important; }

/* ── Acciones de fila ───────────────────────────────────────────────────
   Cada acción con su color, que es lo que permite acertar el icono correcto en
   la tercera fila sin volver a leerlos: ver en marca, editar en ámbar,
   descargar en azul, aprobar en verde, eliminar en rojo. En reposo son
   contornos neutros; el tono está en el icono y se completa al apuntar. */
.erp-row-actions .btn { background-color: var(--su-card) !important; }
.erp-row-actions .btn-outline-primary   { color: var(--k-teal-base) !important; }
.erp-row-actions .btn-outline-secondary { color: var(--k-amber-base) !important; border-color: var(--li-strong) !important; }
.erp-row-actions .btn-outline-secondary:hover,
.erp-row-actions .btn-outline-secondary:focus {
    background-color: var(--k-amber-soft) !important;
    border-color: var(--k-amber-base) !important;
    color: var(--k-amber-ink) !important;
}
.erp-row-actions .btn:hover { transform: none; box-shadow: var(--el-1); }

/* ── Botón suave ────────────────────────────────────────────────────────
   Para la acción secundaria de una cabecera: se ve, lleva su color y no
   compite con el pleno de marca que tiene al lado. */
.btn-soft-primary { background-color: var(--k-teal-soft) !important; color: var(--k-teal-ink) !important; border-color: transparent !important; }
.btn-soft-success { background-color: var(--k-green-soft) !important; color: var(--k-green-ink) !important; border-color: transparent !important; }
.btn-soft-danger  { background-color: var(--k-red-soft) !important;   color: var(--k-red-ink) !important;   border-color: transparent !important; }
.btn-soft-warning { background-color: var(--k-amber-soft) !important; color: var(--k-amber-ink) !important; border-color: transparent !important; }
.btn-soft-info    { background-color: var(--k-blue-soft) !important;  color: var(--k-blue-ink) !important;  border-color: transparent !important; }
.btn-soft-primary:hover, .btn-soft-success:hover, .btn-soft-danger:hover,
.btn-soft-warning:hover, .btn-soft-info:hover { transform: var(--lift); box-shadow: var(--el-2); }

/* ══════════════════════════════════════════════════════════════════════════
   8) BADGES · fondo suave, tinta fuerte, borde del mismo tono
   La versión anterior era fondo suave sin borde: sobre una fila rayada, el
   badge y la fila tenían casi la misma luminosidad y la etiqueta se deshacía.
   El borde del propio tono le devuelve el contorno sin subir la saturación.
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 10px;
    display: inline-flex; align-items: center; gap: 5px;
}
.badge-success   { background: var(--k-green-soft) !important;  color: var(--k-green-ink) !important;  border-color: var(--k-green-line) !important; }
.badge-green     { background: var(--k-lime-soft) !important;   color: var(--k-lime-ink) !important;   border-color: var(--k-lime-line) !important; }
.badge-warning   { background: var(--k-amber-soft) !important;  color: var(--k-amber-ink) !important;  border-color: var(--k-amber-line) !important; }
.badge-danger    { background: var(--k-red-soft) !important;    color: var(--k-red-ink) !important;    border-color: var(--k-red-line) !important; }
.badge-info      { background: var(--k-blue-soft) !important;   color: var(--k-blue-ink) !important;   border-color: var(--k-blue-line) !important; }
.badge-primary   { background: var(--k-teal-soft) !important;   color: var(--k-teal-ink) !important;   border-color: var(--k-teal-line) !important; }
.badge-teal      { background: var(--k-cyan-soft) !important;   color: var(--k-cyan-ink) !important;   border-color: var(--k-cyan-line) !important; }
.badge-purple    { background: var(--k-violet-soft) !important; color: var(--k-violet-ink) !important; border-color: var(--k-violet-line) !important; }
.badge-indigo    { background: var(--k-indigo-soft) !important; color: var(--k-indigo-ink) !important; border-color: var(--k-indigo-line) !important; }
.badge-pink      { background: var(--k-pink-soft) !important;   color: var(--k-pink-ink) !important;   border-color: var(--k-pink-line) !important; }
.badge-orange    { background: var(--k-orange-soft) !important; color: var(--k-orange-ink) !important; border-color: var(--k-orange-line) !important; }
.badge-secondary,
.badge-light     { background: var(--k-slate-soft) !important;  color: var(--k-slate-ink) !important;  border-color: var(--k-slate-line) !important; }
.badge-dark      { background: var(--su-sunken) !important;     color: var(--tx-title) !important;     border-color: var(--li-strong) !important; }

/* El punto del badge toma el tono del texto y con eso ya distingue sin color:
   quien no separa el verde del rojo sigue teniendo el punto, el icono y la
   palabra (§11 · nunca sólo color). */
.badge .erp-dot { background: currentColor; opacity: .85; }

/* El contador del menú lateral sí va pleno: es una alarma («tienes 3 acciones
   vencidas»), no una etiqueta de estado, y con fondo suave se perdía entre los
   treinta ítems del menú. */
.vertical-nav-menu .badge-danger  { background: var(--k-red-base) !important;   color: #fff !important; border-color: transparent !important; }
.vertical-nav-menu .badge-warning { background: var(--k-amber-base) !important; color: #fff !important; border-color: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════════
   9) TABLAS · la cabecera manda y la fila responde
   ══════════════════════════════════════════════════════════════════════════ */
.table thead th {
    background-image: var(--g-header);
    background-color: var(--su-sunken);
    color: var(--tx-muted);
    border-bottom: 1px solid var(--li-strong) !important;
}
.table.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(var(--erp-primary-rgb, 53,93,93), .022); }
/* Al pasar por encima, la fila se tiñe **y** saca un filete de marca a la
   izquierda: con veinticinco filas y la vista puesta en la columna de la
   derecha, un cambio de fondo del 4 % no se percibe. El filete se pinta con
   box-shadow y no con border para que no descuadre la rejilla. */
.table.table-hover tbody tr { transition: background-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease); }
.table.table-hover tbody tr:hover {
    background-color: var(--k-teal-soft);
    box-shadow: inset 3px 0 0 var(--erp-primary);
}
.table tbody tr.is-selected { box-shadow: inset 3px 0 0 var(--erp-primary); }
.erp-sort.is-active { color: var(--erp-primary) !important; }
.erp-table-sticky thead th { background-color: var(--su-sunken); }

/* ══════════════════════════════════════════════════════════════════════════
   10) FORMULARIOS · el campo activo se ve activo
   ══════════════════════════════════════════════════════════════════════════ */
.form-control, .custom-select {
    background-color: var(--su-card);
    transition: border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease);
}
.form-control:hover:not(:focus), .custom-select:hover:not(:focus) { border-color: var(--li-strong); }
.form-control:focus, .custom-select:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb, 53,93,93), .16);
}
.form-control.is-invalid, .custom-select.is-invalid { border-color: var(--k-red-base); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--k-red-rgb), .16); }
.invalid-feedback { color: var(--k-red-ink); font-weight: var(--fw-medium); }
.input-group-text { background: var(--su-sunken); color: var(--tx-muted); }
/* El asterisco del campo obligatorio, del rojo del sistema y no del rojo del
   navegador. */
label .text-danger, .form-label .text-danger { color: var(--k-red-base) !important; }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--erp-primary);
    border-color: var(--erp-primary);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb, 53,93,93), .16);
}
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--erp-primary); }

/* Select2 y Flatpickr, que traen su propio azul de fábrica. */
.select2-container--bootstrap4 .select2-selection { border-color: var(--li-strong); background: var(--su-card); }
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb, 53,93,93), .16);
}
.select2-container--bootstrap4 .select2-results__option--highlighted { background: var(--erp-primary) !important; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background: var(--k-teal-soft) !important;
    border-color: var(--k-teal-line) !important;
    color: var(--k-teal-ink) !important;
    border-radius: 999px;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
}
.flatpickr-day.today { border-color: var(--erp-primary) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   11) AVISOS · el icono lleva el color, el texto se lee
   El aviso queda con barra lateral del tono, fondo del tono al mínimo y el
   icono a color pleno. El texto va en la tinta oscura del tono y no en el tono
   pleno: un párrafo entero en color saturado cansa a la segunda línea.
   ══════════════════════════════════════════════════════════════════════════ */
.alert {
    border-left-width: 4px;
    border-radius: var(--erp-radius);
    box-shadow: var(--el-1);
    background-image: var(--g-tint);
}
.alert .erp-i { width: 17px; height: 17px; }
.alert-success { background-color: var(--k-green-soft); border-color: var(--k-green-line); border-left-color: var(--k-green-base); color: var(--k-green-ink); }
.alert-warning { background-color: var(--k-amber-soft); border-color: var(--k-amber-line); border-left-color: var(--k-amber-base); color: var(--k-amber-ink); }
.alert-danger  { background-color: var(--k-red-soft);   border-color: var(--k-red-line);   border-left-color: var(--k-red-base);   color: var(--k-red-ink); }
.alert-info    { background-color: var(--k-blue-soft);  border-color: var(--k-blue-line);  border-left-color: var(--k-blue-base);  color: var(--k-blue-ink); }
.alert-dark, .alert-secondary { background-color: var(--k-slate-soft); border-color: var(--k-slate-line); border-left-color: var(--k-slate-base); color: var(--k-slate-ink); }
.alert code { background: rgba(16,32,48,.06); color: inherit; border-radius: 4px; padding: 1px 5px; }
.alert .close { color: inherit; opacity: .5; }
.alert .close:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   12) MENÚ LATERAL · el ítem activo se reconoce sin leerlo
   Los colores por módulo se quedan donde están (sección 15 de erp-ui.css, con
   su invariante y su prueba). Lo que se añade aquí es el estado: el activo
   lleva pastilla de marca y filete, y el icono conserva **su** color en vez de
   virar al de marca —si virara, el color por módulo dejaría de servir justo en
   la pantalla en la que estás—.
   ══════════════════════════════════════════════════════════════════════════ */
.app-sidebar { border-right: 1px solid var(--li-border); }
.app-sidebar__heading {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--tx-faint) !important;
    opacity: 1 !important;
}
.vertical-nav-menu li a {
    border-radius: var(--erp-radius-sm);
    margin: 1px 8px;
    transition: background var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease);
}
.vertical-nav-menu li a:hover { background: var(--su-hover) !important; color: var(--tx-title) !important; }
.vertical-nav-menu li a.mm-active,
.vertical-nav-menu li a.mm-active:hover {
    background: var(--k-teal-soft) !important;
    color: var(--k-teal-ink) !important;
    font-weight: var(--fw-semibold);
    box-shadow: inset 3px 0 0 var(--erp-primary);
}
/* ── Con el rail plegado no hay pastilla ─────────────────────────────────
   Plegado, el menú son 80 px de iconos: ArchitectUI manda el texto fuera con
   `text-indent:-99rem` pero **el `<a>` conserva todo el ancho**. La pastilla
   del activo se queda entonces sin contenido que envolver y se lee como una
   franja suelta detrás del icono, con el filete asomando por la izquierda —que
   es justo lo que no puede pasar en un rail: ahí la única figura debe ser el
   icono—. Se retira, y con ella el `#e0f3ff` que ArchitectUI pinta por su
   cuenta y que tenía el mismo defecto.

   Sigue puesta en los dos estados en que el menú sí enseña su texto y la
   pastilla vuelve a tener qué envolver: cuando el rail se despliega al pasar
   por encima y cuando el cajón se abre en el móvil. Por eso las dos
   exclusiones del selector, y no un `display:none` a secas.
   ────────────────────────────────────────────────────────────────────────── */
.closed-sidebar:not(.sidebar-mobile-open) .app-sidebar:not(:hover) .vertical-nav-menu li a.mm-active,
.closed-sidebar:not(.sidebar-mobile-open) .app-sidebar:not(:hover) .vertical-nav-menu li a.mm-active:hover {
    background: transparent !important;
    box-shadow: none !important;
}

/* El icono de un ítem activo o al que se apunta crece un pelo: es el único
   movimiento del menú y sirve para confirmar el objetivo del clic. */
.vertical-nav-menu li a i.metismenu-icon {
    transition: transform var(--mo-fast) var(--mo-ease);
}
.vertical-nav-menu li a:hover i.metismenu-icon,
.vertical-nav-menu li a.mm-active i.metismenu-icon { transform: scale(1.14); }

/* ══════════════════════════════════════════════════════════════════════════
   13) BARRA SUPERIOR
   ══════════════════════════════════════════════════════════════════════════ */
.app-header { border-bottom: 1px solid var(--li-border); }
.app-header .icon-wrapper .icon-wrapper-bg { opacity: .14; }
.app-header .icon-wrapper:hover .icon-wrapper-bg { opacity: .24; }
/* La cabecera de los desplegables del usuario y de las notificaciones: es el
   único sitio del sistema con una superficie grande de marca, y ahí sí cabe el
   degradado porque no lleva texto largo encima. */
.dropdown-menu-header-inner.bg-primary {
    background-image: var(--g-brand) !important;
    background-color: var(--erp-primary) !important;
}
.dropdown-menu { box-shadow: var(--el-3); border: 1px solid var(--li-border); }
.dropdown-item { border-radius: var(--erp-radius-sm); }
.dropdown-item:active, .dropdown-item.active { background: var(--k-teal-soft); color: var(--k-teal-ink); }
.ds-search-trigger:focus-visible { border-color: var(--erp-primary); }

/* ══════════════════════════════════════════════════════════════════════════
   14) PESTAÑAS, PAGINACIÓN Y PROGRESO
   ══════════════════════════════════════════════════════════════════════════ */
.ds-tabs__link.is-active {
    background: linear-gradient(180deg, transparent 0%, var(--k-teal-soft) 100%);
    border-bottom-color: var(--erp-primary);
}
.nav-tabs .nav-link.active { border-bottom-color: var(--erp-primary); color: var(--erp-primary); }

.page-item.active .page-link {
    background-image: var(--g-brand) !important;
    border-color: transparent !important;
    box-shadow: var(--el-brand);
}
.page-item .page-link:hover { background: var(--k-teal-soft); border-color: var(--k-teal-line); color: var(--k-teal-ink); }

.progress { background: var(--su-sunken); border-radius: 999px; height: 8px; }
/* Ninguna barra del sistema lleva texto dentro (se comprobó: son todas `<div>`
   vacíos con el ancho en el `style`), así que 8 px de alto no recorta nada y
   una barra fina se lee como una medida y no como un bloque de color. */
.progress-bar { background-image: var(--g-brand); border-radius: 999px; }
.progress-bar.bg-success { background-image: linear-gradient(90deg, #27B26A, var(--k-green-base)) !important; }
.progress-bar.bg-warning { background-image: linear-gradient(90deg, #DE9316, var(--k-amber-base)) !important; }
.progress-bar.bg-danger  { background-image: linear-gradient(90deg, #E25963, var(--k-red-base)) !important; }
.progress-bar.bg-info    { background-image: linear-gradient(90deg, #4790E2, var(--k-blue-base)) !important; }
/* Los cuatro que faltaban. Sin regla propia caían en el degradado de marca de
   la línea de arriba, y entonces la barra de participación de una campaña
   (`bg-purple`) y la del tiempo corrido de un plan (`bg-secondary`, que es
   deliberadamente neutra: mide el calendario, no el avance) salían las dos del
   color de la acción principal. */
.progress-bar.bg-purple    { background-image: linear-gradient(90deg, #9276F0, var(--k-violet-base)) !important; }
.progress-bar.bg-indigo    { background-image: linear-gradient(90deg, #6570D6, var(--k-indigo-base)) !important; }
.progress-bar.bg-teal      { background-image: linear-gradient(90deg, #1FB3C9, var(--k-cyan-base)) !important; }
.progress-bar.bg-secondary { background-image: none !important; background-color: var(--k-slate-line) !important; }

/* ── Utilidades de fondo que Bootstrap 4 no trae ─────────────────────────
   El catálogo de enums devuelve `purple`, `teal`, `indigo` y `green` además de
   los colores de Bootstrap, y una plantilla que pida `bg-purple` se queda hoy
   sin fondo. Van con el `base` de la rampa, no con el `soft`: lo que pide un
   `bg-*` es una superficie pequeña de color pleno. */
.bg-purple, .bg-violet { background-color: var(--k-violet-base) !important; }
.bg-teal   { background-color: var(--k-cyan-base) !important; }
.bg-indigo { background-color: var(--k-indigo-base) !important; }
.bg-green  { background-color: var(--k-lime-base) !important; }
.bg-orange { background-color: var(--k-orange-base) !important; }

/* ── El punto de aviso ───────────────────────────────────────────────────
   ArchitectUI usa `.badge-dot` como un punto de 8 px con el texto escondido
   (`text-indent`), y la píldora de la sección 8 lo convertiría en una etiqueta
   con el número dentro colgando de la campana. Recupera su caja, y va en color
   **pleno**: un aviso de «tienes tres sin leer» no es una etiqueta de estado. */
.badge.badge-dot { padding: 0; display: inline-block; border-radius: 30px; }
.badge.badge-dot.badge-danger  { background: var(--k-red-base) !important;   border-color: transparent !important; }
.badge.badge-dot.badge-warning { background: var(--k-amber-base) !important; border-color: transparent !important; }
.badge.badge-dot.badge-success { background: var(--k-green-base) !important; border-color: transparent !important; }
.badge.badge-dot.badge-info    { background: var(--k-blue-base) !important;  border-color: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════════
   15) PIEZAS DEL REDISEÑO QUE GANAN CON LA RAMPA
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Banda principal del panel ─────────────────────────────────────────── */
.ds-hero { box-shadow: var(--el-2); }
.ds-hero::before {
    background:
        radial-gradient(120% 140% at 100% 0%, var(--k-teal-soft) 0%, transparent 58%),
        radial-gradient(90% 120% at 0% 100%, var(--k-blue-soft) 0%, transparent 55%);
}
.ds-hero__value { letter-spacing: -.03em; }
.ds-hero__delta.is-up   { background: var(--k-green-soft); color: var(--k-green-ink); }
.ds-hero__delta.is-down { background: var(--k-red-soft);   color: var(--k-red-ink); }
.ds-hero__row { background: var(--su-card); }
a.ds-hero__row:hover { border-color: var(--erp-primary); box-shadow: var(--el-2); }
.ds-hero__row-value.is-alert { color: var(--k-red-base); }
.ds-hero__row-value.is-warn  { color: var(--k-amber-base); }

/* ── Tarjeta del tablero ───────────────────────────────────────────────── */
.ds-card:hover { box-shadow: var(--el-2); }
.ds-card__bar span { background-image: var(--g-brand); }
.ds-card__due.is-late { color: var(--k-red-base); }
.ds-card__due.is-soon { color: var(--k-amber-base); }

/* ── Columnas del tablero: la cabecera toma el tono de su punto ────────── */
.ds-board__head { background: var(--g-header); border-top-left-radius: var(--erp-radius-lg); border-top-right-radius: var(--erp-radius-lg); }
.ds-board__dot { box-shadow: 0 0 0 3px var(--su-card); }

/* ── Estado, línea de tiempo, chequeos, riesgo ─────────────────────────── */
.ds-timeline__item.is-success .ds-timeline__dot { border-color: var(--k-green-line); color: var(--k-green-ink); background: var(--k-green-soft); }
.ds-timeline__item.is-danger  .ds-timeline__dot { border-color: var(--k-red-line);   color: var(--k-red-ink);   background: var(--k-red-soft); }
.ds-timeline__item.is-warning .ds-timeline__dot { border-color: var(--k-amber-line); color: var(--k-amber-ink); background: var(--k-amber-soft); }
.ds-timeline__item.is-info    .ds-timeline__dot { border-color: var(--k-blue-line);  color: var(--k-blue-ink);  background: var(--k-blue-soft); }

.ds-check { box-shadow: var(--el-1); }
.ds-check--ok      { border-left-color: var(--k-green-base); }
.ds-check--warn    { border-left-color: var(--k-amber-base); }
.ds-check--fail    { border-left-color: var(--k-red-base); }
.ds-check--ok   .ds-check__dot { background: var(--k-green-soft); color: var(--k-green-ink); }
.ds-check--warn .ds-check__dot { background: var(--k-amber-soft); color: var(--k-amber-ink); }
.ds-check--fail .ds-check__dot { background: var(--k-red-soft);   color: var(--k-red-ink); }

.ds-risk__item.is-high .ds-risk__flag { background: var(--k-red-base); }
.ds-risk__item.is-mid  .ds-risk__flag { background: var(--k-amber-base); }
.ds-risk__item.is-low  .ds-risk__flag { background: var(--k-green-base); }
.ds-focus__item.sev-critical .ds-focus__dot { background: var(--k-red-base); }
.ds-focus__item.sev-high     .ds-focus__dot { background: var(--k-amber-base); }
.ds-focus__item.sev-medium   .ds-focus__dot { background: var(--k-blue-base); }

/* ── Anillo de progreso ────────────────────────────────────────────────── */
.ds-ring.is-success .ds-ring__bar { stroke: var(--k-green-base); }
.ds-ring.is-warning .ds-ring__bar { stroke: var(--k-amber-base); }
.ds-ring.is-danger  .ds-ring__bar { stroke: var(--k-red-base); }

/* ── Ficha de filtro activo ────────────────────────────────────────────── */
.ds-chip { background: var(--k-teal-soft); color: var(--k-teal-ink); border: 1px solid var(--k-teal-line); }

/* ── Cabecera de ficha ─────────────────────────────────────────────────── */
.ds-entity { box-shadow: var(--el-2); background-image: var(--g-tint); }
.ds-entity__logo { box-shadow: inset 0 0 0 1px var(--k-amber-line); }

/* ── Estado vacío ──────────────────────────────────────────────────────── */
.erp-empty__icon { box-shadow: inset 0 0 0 1px var(--k-ring, transparent); }

/* ── Zona de arrastrar y soltar ────────────────────────────────────────── */
.ds-drop.is-over, .erp-dropzone:hover, .erp-dropzone.is-drag {
    border-color: var(--erp-primary);
    background: var(--k-teal-soft);
}

/* ── Tipos de archivo ──────────────────────────────────────────────────── */
.ds-file__thumb.is-pdf   { color: var(--k-red-ink);    background: var(--k-red-soft); }
.ds-file__thumb.is-sheet { color: var(--k-green-ink);  background: var(--k-green-soft); }
.ds-file__thumb.is-doc   { color: var(--k-blue-ink);   background: var(--k-blue-soft); }
.ds-file__thumb.is-image { color: var(--k-violet-ink); background: var(--k-violet-soft); }

/* ── Avatares: la rampa completa, un tono por persona ──────────────────── */
.erp-avatar--c0 { background: var(--k-teal-soft);   color: var(--k-teal-ink); }
.erp-avatar--c1 { background: var(--k-blue-soft);   color: var(--k-blue-ink); }
.erp-avatar--c2 { background: var(--k-green-soft);  color: var(--k-green-ink); }
.erp-avatar--c3 { background: var(--k-amber-soft);  color: var(--k-amber-ink); }
.erp-avatar--c4 { background: var(--k-violet-soft); color: var(--k-violet-ink); }
.erp-avatar--c5 { background: var(--k-indigo-soft); color: var(--k-indigo-ink); }
.erp-avatar--c6 { background: var(--k-cyan-soft);   color: var(--k-cyan-ink); }
.erp-avatar--c7 { background: var(--k-pink-soft);   color: var(--k-pink-ink); }
.erp-avatar--c8 { background: var(--k-orange-soft); color: var(--k-orange-ink); }
.erp-avatar--c9 { background: var(--k-lime-soft);   color: var(--k-lime-ink); }
.erp-avatar--solid { background-image: var(--g-brand); color: #fff; }

/* ── Cabecera de sección y lista de datos ──────────────────────────────── */
.erp-section-ic { box-shadow: inset 0 0 0 1px var(--k-ring, transparent); }
.erp-steps li:before { background: var(--k-teal-soft); color: var(--k-teal-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   16) LO QUE ARCHITECTUI PINTA CON COLOR LITERAL
   erp-ui.css pasó a sólido las clases «fruit». Se mantienen sólidas —el
   degradado de dos tonos saturados es justo lo que no queremos— y sólo se
   reapuntan a la rampa para que el tema oscuro y un rebranding las alcancen.
   ══════════════════════════════════════════════════════════════════════════ */
.bg-warm-flame, .bg-love-kiss, .bg-arielle-smile, .bg-strong-bliss { background: var(--k-red-base) !important; }
.bg-mean-fruit, .bg-night-fade, .bg-mixed-hopes { background: var(--k-violet-base) !important; }
.bg-sunny-morning, .bg-sweet-morning, .bg-dark-vanilla { background: var(--k-amber-base) !important; }
.bg-tempting-azure, .bg-happy-itmeo, .bg-malibu-beach { background: var(--k-blue-base) !important; }
.bg-amy-crisp, .bg-happy-fisher { background: var(--k-cyan-base) !important; }
.bg-ripe-malin, .bg-grow-early, .bg-happy-green, .bg-ohhappiness { background: var(--k-green-base) !important; }
.bg-plum-plate, .bg-deep-blue, .bg-royal, .bg-asteroid, .bg-midnight-bloom, .bg-night-sky { background: var(--k-indigo-base) !important; }
.bg-heavy-rain { background: var(--k-slate-base) !important; }
.bg-lucky-lily { background: var(--k-teal-base) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   17) TEMA OSCURO · lo que no se arregla con redefinir un token
   La rampa ya se encarga de casi todo. Aquí quedan los tres sitios donde el
   componente escribe un valor que no sale de ella.
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .app-main__outer {
    background-image:
        radial-gradient(1200px 520px at 88% -8%, rgba(var(--erp-primary-rgb, 53,93,93), .16), transparent 60%),
        radial-gradient(900px 460px at 4% 102%, rgba(var(--k-blue-rgb), .09), transparent 62%);
}
[data-theme="dark"] .table thead th { background-color: rgba(255,255,255,.03); }
[data-theme="dark"] .table.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.022); }
[data-theme="dark"] .table.table-hover tbody tr:hover { background-color: var(--k-teal-soft); }
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-info,
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .erp-row-actions .btn { background-color: var(--su-card) !important; }
[data-theme="dark"] .btn-warning, [data-theme="dark"] .btn-info { color: #0F151C !important; }
/* El contorneado lleva el tono en el texto, y sobre superficie oscura el
   escalón `base` se apaga: pasa al `ink`, que en oscuro es el claro. Sin esto,
   «Ver» y «Editar» de cada fila quedaban casi negros sobre la tarjeta negra. */
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .erp-row-actions .btn-outline-primary { color: var(--k-teal-ink) !important; }
[data-theme="dark"] .btn-outline-success { color: var(--k-green-ink) !important; }
[data-theme="dark"] .btn-outline-info    { color: var(--k-blue-ink) !important; }
[data-theme="dark"] .btn-outline-danger  { color: var(--k-red-ink) !important; }
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .erp-row-actions .btn-outline-secondary { color: var(--k-amber-ink) !important; }
[data-theme="dark"] .erp-row-actions .btn-outline-secondary:hover,
[data-theme="dark"] .erp-row-actions .btn-outline-secondary:focus { color: var(--k-amber-ink) !important; }
[data-theme="dark"] .btn-outline-primary:hover { color: var(--k-teal-ink) !important; }
[data-theme="dark"] .btn-outline-danger:hover  { color: var(--k-red-ink) !important; }
[data-theme="dark"] .btn-outline-success:hover { color: var(--k-green-ink) !important; }
[data-theme="dark"] .btn-outline-info:hover    { color: var(--k-blue-ink) !important; }
[data-theme="dark"] .btn-outline-warning:hover { color: var(--k-amber-ink) !important; }
[data-theme="dark"] .alert code { background: rgba(255,255,255,.08); }
/* En oscuro la superficie ya es oscura: el pleno de estado se lee mejor que la
   inversión, y el texto blanco encima mantiene el contraste. */
[data-theme="dark"] .badge-dark { background: rgba(255,255,255,.06) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   18) MOVIMIENTO E IMPRESIÓN
   Todo el realce de esta hoja es transform o box-shadow —nunca alto ni
   ancho—, así que nada de esto provoca un recálculo de la maquetación. Bajo
   `prefers-reduced-motion` se anula el desplazamiento pero **no el color**: el
   color no marea a nadie y es el que lleva la información.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    :root { --lift: none; }
    .app-page-title:hover .page-title-icon,
    .vertical-nav-menu li a:hover i.metismenu-icon,
    .vertical-nav-menu li a.mm-active i.metismenu-icon,
    a.erp-stat:hover .erp-stat__icon { transform: none; }
}

@media print {
    /* Un degradado impreso sale como una banda gris sucia y se come el tóner
       de media página: en papel todo vuelve a ser plano. */
    .btn, .badge, .progress-bar, .page-link, .erp-avatar--solid,
    .dropdown-menu-header-inner, .card > .card-header, .table thead th,
    .ds-hero, .ds-entity, .alert { background-image: none !important; }
    .erp-stat, .card, .ds-hero, .ds-entity, .alert, .ds-check { box-shadow: none !important; }
    .app-main__outer { background-image: none !important; }
}