/* ============================================================
   HRZN · COLOR · Users e Insights · SOLO TEMA CLARO
   ------------------------------------------------------------
   Esta hoja NO define la paleta. La paleta la define
   css/hrzn-color.css, que es el archivo del disenador y ahora
   cargan tambien Users e Insights.

   Aca vive UNICAMENTE el delta que aquella hoja no puede cubrir,
   porque no conoce la familia de componentes .hz- (esos viven en
   horizon-pages.css y no existen dentro del cockpit de FinOps).

   POR QUE CARGAMOS hrzn-color.css EN ESTAS DOS PAGINAS
   Medido: el sidebar de Users tenia 53 diferencias computadas
   contra el de FinOps — logo, activo del nav, pie del rail,
   avatar, boton de tema. Ninguna era un bug de Users: eran las
   secciones 40, 41 y 42 de hrzn-color.css, que estan acotadas a
   `.bridge-page` — la MISMA clase que ya tenian las tres paginas —
   y simplemente no se estaban cargando aca.

   Enlazarla dejo el diff en 3, y las 3 restantes son la tarjeta
   de compania, que FinOps no tiene en su marcado (ver abajo).

   Riesgo verificado antes de enlazarla: hrzn-color.css remapea
   ~200 utilidades de Tailwind del cockpit. Un barrido sobre el
   marcado de Users e Insights encontro CERO clases de ese tipo,
   asi que todo ese bloque es inerte aqui.

   TEMA OSCURO: no se toca nada. El dark de estas pantallas no esta
   resuelto todavia y la referencia es el light.
   ============================================================ */


/* ── 1 · LAS INSIGNIAS VAN CON FONDO OPACO ────────────────────
   `.hz-badge` no existe en FinOps —es un componente de
   horizon-pages.css— asi que esto no puede venir de la hoja del
   disenador.

   El problema no es el color sino el APILADO: el tinte translucido
   de la insignia se suma al de la tarjeta que la contiene. Una
   `.is-bad` vive dentro de una `.hz-kpi.is-bad`, que ya trae su
   propio degradado del mismo rojo. Dos capas del mismo color justo
   debajo de un texto que ya es rojo.

   MEDIDO · contraste del ink sobre la pila real (tinte .10 sobre
   degradado .06 sobre blanco) contra el mismo tinte hecho opaco:

     insignia   ink        apilado         opaco
     is-bad     #CC002B    4.447  NO AA    4.898  ok
     is-ok      #127A45    4.588  raspa    4.858  ok
     is-warn    #A05F02    4.518  raspa    4.709  ok
     is-blue    #2450E4    4.959  ok       5.399  ok

   Solo is-bad incumplia, pero is-ok e is-warn pasaban por dos
   centesimas: cualquier anidamiento mas y caian tambien. Se
   corrigen las cuatro, porque el defecto es el apilado y no el rojo.

   Cada valor opaco ES el mismo tinte resuelto sobre blanco, asi que
   sobre una tarjeta blanca se ven EXACTAMENTE igual que antes. Lo
   unico que cambia es que dentro de una tarjeta tenida ya no se
   oscurecen.

   Mismo criterio que usa el disenador, que fija el contraste de su
   naranja contra la pildora opaca (#FFF0ED) y no contra el blanco. */
:root:not([data-theme="dark"]) .hz-badge.is-bad  { background: #FDE6EB; }
:root:not([data-theme="dark"]) .hz-badge.is-ok   { background: #E9F6EF; }
:root:not([data-theme="dark"]) .hz-badge.is-warn { background: #FEF5E7; }
:root:not([data-theme="dark"]) .hz-badge.is-blue { background: #E9EEFC; }


/* ── 2 · LOS RESTOS DEL ROJO VIEJO EN LOS COMPONENTES .hz- ────
   hrzn-color.css corrige el TOKEN (--hz-bad pasa a #EE0033), pero
   tres componentes de horizon-pages.css pintan su tinte con un
   LITERAL rgba(229, 72, 77, ...) en vez de con var(--hz-bad).

   MEDIDO tras cargar la hoja del disenador: sin esto, la franja y la
   tarjeta .is-bad quedaban con el rojo viejo mientras su texto ya
   usaba el nuevo — dos rojos en el mismo objeto.

   Se conservan los MISMOS valores de alfa que traia cada regla: lo
   que cambia es el rojo, no la intensidad del tinte.

   Es el mismo tipo de resto que el disenador documenta en su
   seccion 32 para el cockpit. */
:root:not([data-theme="dark"]) .hz-strip.is-bad i {
  box-shadow: 0 0 0 4px rgba(238, 0, 51, .14);
}
:root:not([data-theme="dark"]) .hz-kpi.is-bad {
  background: linear-gradient(160deg, rgba(238, 0, 51, .06) 0%, var(--hz-surface) 62%);
}
:root:not([data-theme="dark"]) .hz-btn.is-danger {
  background: rgba(238, 0, 51, .08);
  border-color: rgba(238, 0, 51, .34);
}
:root:not([data-theme="dark"]) .hz-btn.is-danger:hover {
  background: rgba(238, 0, 51, .14);
}


/* ── 3 · EL NARANJA LEGIBLE, CON EL NOMBRE DE ESTA FAMILIA ────
   La familia --hz-* no tenia un naranja apto para texto: el vivo
   (#F05A28) da 3.39:1 y no cumple AA. El disenador ya resolvio el
   valor en --h-accent-ink; aca solo se le da el alias que usan
   estas paginas, para no tener dos numeros distintos rondando. */
:root { --hz-orange-ink: var(--h-accent-ink, #B84018); }


/* ── NOTA · LA TARJETA DE COMPANIA ────────────────────────────
   Es la unica diferencia estructural que queda contra FinOps:
   Users e Insights tienen `.company-card` ("Acme Corp. · Enterprise
   plan") en el pie del rail y FinOps no la tiene en su marcado.

   NO se quita. Es una diferencia de contenido, no de estilo, y la
   seccion 42 de hrzn-color.css la contempla explicitamente: la
   nombra como una de las cuatro filas del pie y le da el mismo
   tratamiento que a las otras tres. O sea que el disenador la tuvo
   en cuenta; lo que faltaba era cargar la hoja.

   Consecuencia medida: `.side-bottom` mide 238px aca contra 162 en
   FinOps. Son los 76px de esa fila de mas. */