/* ============================================================================
   FESv — las utilidades de Bootstrap 5.3 que faltan en el 5.1 que tenemos
   ----------------------------------------------------------------------------
   EL DEFECTO QUE CIERRA. El proyecto carga Bootstrap 5.1.0, y las clases
   `*-subtle` y `text-*-emphasis` llegaron en 5.3. Las pantallas las usan igual:
   medido, 195 apariciones en 70 archivos .razor.

   La mayoría solo pierde un fondo suave y se sigue leyendo. Pero hay un caso
   que desaparece: `badge bg-*-subtle`. El `.badge` de Bootstrap trae
   `color: #fff` por omisión, así que sin un `bg-*` que le ponga fondo oscuro
   queda TEXTO BLANCO SOBRE FONDO CLARO — invisible. Medido: 39 badges así en 26
   archivos.

   Lo encontró una captura de pantalla, no el compilador ni las 4.213 pruebas: en
   la pantalla de catálogos de inventario la columna «Libro de inventario» salía
   en blanco en las diez filas que SÍ se presentan, mientras las otras nueve
   decían «no se presenta» en texto normal. El dato estaba en el DOM.

   POR QUÉ ACÁ Y NO REESCRIBIENDO 70 ARCHIVOS. Las clases no están mal usadas:
   están bien usadas contra una versión de Bootstrap que todavía no tenemos.
   Definirlas una vez arregla los 70 de golpe y deja el camino abierto para
   subir a 5.3, donde este archivo se borra entero y nada cambia.

   CÓMO SE DERIVAN. Con `color-mix` contra las variables del tema, no con hex
   fijos: así los cinco temas —claro, oscuro, claro-suave, alto contraste y
   daltónico— obtienen su propia versión sin escribir cinco bloques. El fondo se
   mezcla contra la superficie del tema y el texto contra su color de letra, que
   es lo que mantiene el contraste al pasar a oscuro.

   CARGA: después de bootstrap.min.css, y después de fesv-temas.css para que las
   variables del tema ya estén resueltas.
   ============================================================================ */

/* auditar-estilos: permitir importantColor -- un .badge gana por especificidad de
   origen y no hay forma de pisarlo sin un selector mas largo que el que pelea; el
   !important ES la solucion correcta aca, y sin el queda texto blanco sobre fondo
   claro, que es el defecto que este archivo cierra */

:root {
    /* Cuánto color lleva un fondo «subtle» y cuánto un texto «emphasis».
       14% es suficiente para que se note el fondo sin pelearse con el texto. */
    --fesv-subtle-mezcla: 14%;
    --fesv-emphasis-mezcla: 72%;
}

/* ── Fondos suaves ───────────────────────────────────────────────────────── */

.bg-primary-subtle   { background-color: color-mix(in srgb, var(--bs-primary)   var(--fesv-subtle-mezcla), var(--v2-surface, #fff)); }
.bg-secondary-subtle { background-color: color-mix(in srgb, var(--bs-secondary) var(--fesv-subtle-mezcla), var(--v2-surface, #fff)); }
.bg-success-subtle   { background-color: color-mix(in srgb, var(--bs-success)   var(--fesv-subtle-mezcla), var(--v2-surface, #fff)); }
.bg-danger-subtle    { background-color: color-mix(in srgb, var(--bs-danger)    var(--fesv-subtle-mezcla), var(--v2-surface, #fff)); }
.bg-warning-subtle   { background-color: color-mix(in srgb, var(--bs-warning)   var(--fesv-subtle-mezcla), var(--v2-surface, #fff)); }
.bg-info-subtle      { background-color: color-mix(in srgb, var(--bs-info)      var(--fesv-subtle-mezcla), var(--v2-surface, #fff)); }
.bg-light-subtle     { background-color: var(--v2-surface-alt, #f8f9fa); }
.bg-dark-subtle      { background-color: color-mix(in srgb, var(--bs-dark)      var(--fesv-subtle-mezcla), var(--v2-surface, #fff)); }

/* ── Texto con énfasis ───────────────────────────────────────────────────── */

.text-primary-emphasis   { color: color-mix(in srgb, var(--bs-primary)   var(--fesv-emphasis-mezcla), var(--v2-text, #212529)); }
.text-secondary-emphasis { color: color-mix(in srgb, var(--bs-secondary) var(--fesv-emphasis-mezcla), var(--v2-text, #212529)); }
.text-success-emphasis   { color: color-mix(in srgb, var(--bs-success)   var(--fesv-emphasis-mezcla), var(--v2-text, #212529)); }
.text-danger-emphasis    { color: color-mix(in srgb, var(--bs-danger)    var(--fesv-emphasis-mezcla), var(--v2-text, #212529)); }
.text-warning-emphasis   { color: color-mix(in srgb, var(--bs-warning)   var(--fesv-emphasis-mezcla), var(--v2-text, #212529)); }
.text-info-emphasis      { color: color-mix(in srgb, var(--bs-info)      var(--fesv-emphasis-mezcla), var(--v2-text, #212529)); }
.text-dark-emphasis      { color: var(--v2-text, #212529); }
.text-light-emphasis     { color: var(--v2-text-3, #6c757d); }

/* ── Bordes suaves ───────────────────────────────────────────────────────── */

.border-primary-subtle   { border-color: color-mix(in srgb, var(--bs-primary)   30%, var(--v2-border, #dee2e6)) !important; }
.border-secondary-subtle { border-color: color-mix(in srgb, var(--bs-secondary) 30%, var(--v2-border, #dee2e6)) !important; }
.border-success-subtle   { border-color: color-mix(in srgb, var(--bs-success)   30%, var(--v2-border, #dee2e6)) !important; }
.border-danger-subtle    { border-color: color-mix(in srgb, var(--bs-danger)    30%, var(--v2-border, #dee2e6)) !important; }
.border-warning-subtle   { border-color: color-mix(in srgb, var(--bs-warning)   30%, var(--v2-border, #dee2e6)) !important; }
.border-info-subtle      { border-color: color-mix(in srgb, var(--bs-info)      30%, var(--v2-border, #dee2e6)) !important; }

/* ── EL CASO QUE DESAPARECÍA ─────────────────────────────────────────────────
   Un `.badge` trae `color: #fff`. Sobre un fondo suave eso es blanco sobre
   claro. Se le devuelve el color del énfasis, que es el que Bootstrap 5.3 usa
   para esta misma combinación.

   Va con `!important` porque `.badge` gana por especificidad de origen y acá no
   hay forma de subir sin inventar un selector más largo que el que pelea. */

.badge.bg-primary-subtle   { color: color-mix(in srgb, var(--bs-primary)   var(--fesv-emphasis-mezcla), var(--v2-text, #212529)) !important; }
.badge.bg-secondary-subtle { color: color-mix(in srgb, var(--bs-secondary) var(--fesv-emphasis-mezcla), var(--v2-text, #212529)) !important; }
.badge.bg-success-subtle   { color: color-mix(in srgb, var(--bs-success)   var(--fesv-emphasis-mezcla), var(--v2-text, #212529)) !important; }
.badge.bg-danger-subtle    { color: color-mix(in srgb, var(--bs-danger)    var(--fesv-emphasis-mezcla), var(--v2-text, #212529)) !important; }
.badge.bg-warning-subtle   { color: color-mix(in srgb, var(--bs-warning)   var(--fesv-emphasis-mezcla), var(--v2-text, #212529)) !important; }
.badge.bg-info-subtle      { color: color-mix(in srgb, var(--bs-info)      var(--fesv-emphasis-mezcla), var(--v2-text, #212529)) !important; }
.badge.bg-light-subtle,
.badge.bg-light            { color: var(--v2-text, #212529) !important; }
.badge.bg-dark-subtle      { color: var(--v2-text, #212529) !important; }

/* Un navegador sin `color-mix` igual tiene que ver el badge. Sin esto quedaría
   el blanco de Bootstrap, que es exactamente el defecto que este archivo cierra. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .badge[class*="-subtle"] { color: var(--v2-text, #212529) !important; }
    [class*="bg-"][class*="-subtle"] { background-color: var(--v2-surface-alt, #f1f3f5); }
    [class*="text-"][class*="-emphasis"] { color: var(--v2-text, #212529); }
}