/* =========================================================================
   marca-tokens.css — LA PALETA DE MARCA, UNA SOLA VEZ
   =========================================================================
   Creado el 2026-08-19 al pasar el banner de /marcas/{marca}/ de foto a
   degradado.

   POR QUE EXISTE. Esta tabla vivia dentro de `vendor-solucion.css`, que solo
   carga `vendor-solucion.php`. Al querer el mismo degradado en
   `vendor-micro.php` habia dos caminos: copiar las 34 filas a otra hoja, o
   sacarlas a una compartida. Copiarlas es exactamente la trampa que ya nos
   costo dos veces en este sitio —la canonica de producto implementada en dos
   archivos, y el `-800.webp` como contrato entre dos repos—: dos fuentes de
   la misma verdad se separan en silencio y nadie se entera hasta que una
   marca se pinta de dos colores distintos en dos pantallas.

   QUIEN LA CARGA. `vendor-micro.php` y `vendor-solucion.php`, SIEMPRE antes
   de su propia hoja. Si manana la carga una tercera pantalla, no hay nada
   que copiar: se agrega el <link>.

   EL PREFIJO `--vs-` ES HISTORICO. Nacio en vendor-solucion; se conserva
   para no tener que reescribir los ~40 usos del catalogo. Hoy significa
   "token de marca", no "token de vendor-solucion".

   DE DONDE SALEN LOS COLORES. Del color corporativo que la marca ya
   declaraba para `.titulo` en `micrositios.css`. No se invento ninguno.
   ========================================================================= */

/* En :root, no en un contenedor: el hero vive FUERA del wrapper del catalogo
   y tiene que alcanzarlo igual. Default = azul Iterati, que es lo que ve una
   marca que todavia no tenga fila aqui abajo.
   Los valores planos son el respaldo para un navegador sin color-mix(). */
:root{
  --vs-accent:#0078D4;
  --vs-on-accent:#ffffff;
  --vs-accent-strong:#005a9e;
  --vs-accent-weak:#e8f2fd;
  --vs-accent-ring:rgba(0,120,212,.15);
}

/* =========================================================================
   ⚠️ LOS TOKENS DERIVADOS SE DECLARAN EN `body`, NO EN `:root`
   =========================================================================
   BUG ENCONTRADO Y MEDIDO EL 2026-08-19 (venia desde el 2026-08-10, o sea que
   estuvo nueve dias vivo en /soluciones/{sol}/{marca}/).

   `--vs-accent-strong` se derivaba con `color-mix(... var(--vs-accent) ...)`
   DENTRO del bloque `:root`. Una propiedad personalizada se resuelve contra el
   elemento donde se DECLARA, y despues se hereda ya resuelta. Como el acento de
   cada marca se declara en `body.<marca>` —un elemento distinto de `:root`— la
   mezcla se hacia siempre contra el azul de `:root` y bajaba heredada tal cual.

   Comprobado con getComputedStyle sobre `.banner.vs-banner`:
     microsoft -> #005A9E   (correcto: es la UNICA que declaraba el token a mano)
     citrix    -> color-mix(in srgb, #0078D4 80%, #000)  ← el azul, no el negro
     symantec  -> lo mismo
     veeam     -> lo mismo
   O sea: 33 de las 34 marcas abrian su hero con el azul de Iterati y solo
   terminaban en su color. Un degradado "de marca" que empezaba con la marca
   equivocada, y nadie lo vio porque el resultado igual se veia bonito.

   El arreglo es mover la derivacion a `body`, que es el MISMO elemento donde
   vive `--vs-accent`: ahi la mezcla se hace con el color de la marca. `body`
   (0,0,1) pierde contra `body.microsoft` (0,1,1), asi que su #005A9E explicito
   se respeta.

   REGLA PARA NO REPETIRLO: un token que se derive de `--vs-accent` va en `body`
   o en la misma regla `body.<marca>`. En `:root` solo valores literales.
   ========================================================================= */
body{
  --vs-accent-strong:color-mix(in srgb, var(--vs-accent) 80%, #000);
  --vs-accent-weak:color-mix(in srgb, var(--vs-accent) 12%, #fff);

  /* PAR DEL HERO, aparte del acento. El hero pinta el texto en BLANCO fijo, asi
     que sus dos colores tienen que estar garantizados oscuros; los chips y los
     filtros del catalogo, en cambio, usan `--vs-accent` con `--vs-on-accent`
     (que ya es negro en las marcas claras). Son dos necesidades distintas y por
     eso son dos tokens: tocar uno no descompone al otro.

     LOS PORCENTAJES NO SON DE GUSTO, SON MEDIDOS. Se rasterizaron las 34 marcas
     en Chromium y se muestreo el pixel real del fondo en los dos puntos donde
     hay texto —el lead, y la tarjeta de vidrio de la derecha, que es el peor
     caso porque su velo blanco al 14% ACLARA el fondo justo debajo de una
     etiqueta de 10 px—. Con el acento crudo, 7 de las 34 no llegaban al 4.5:1
     de la AA: suse 3.07, hp 3.33, veeam 3.47, vmware 4.04, apc 4.26,
     net2phone 4.26, checkpoint 4.44. Con 39%/70% la PEOR de las 34 queda en
     4.54 (aws y symantec, que comparten el amarillo).

     Se prefirio una formula unica sobre una lista de excepciones a proposito:
     una lista dice "estas fallaron el dia que medi" y se pudre en cuanto una
     marca cambia de color o entra una nueva. La formula dice lo que el token
     significa —el acento, oscurecido lo suficiente para sostener texto blanco—
     y eso sigue siendo cierto solo. Si mueves estos numeros, vuelve a medir:
     el script vive en la bitacora de la sesion. */
  --vs-hero-a:color-mix(in srgb, var(--vs-accent) 39%, #000);
  --vs-hero-b:color-mix(in srgb, var(--vs-accent) 70%, #000);
}

body.hp         {--vs-accent:#00b388;--vs-accent-ring:rgba(0,179,136,.18);}
body.cisco      {--vs-accent:#c6071f;--vs-accent-ring:rgba(198,7,31,.18);}
body.citrix     {--vs-accent:#1a1a1a;--vs-accent-ring:rgba(0,0,0,.16);}
body.vmware     {--vs-accent:#5c9d31;--vs-accent-ring:rgba(92,157,49,.18);}
body.oracle     {--vs-accent:#c90000;--vs-accent-ring:rgba(201,0,0,.18);}
body.checkpoint {--vs-accent:#e34f85;--vs-accent-ring:rgba(227,79,133,.18);}
body.veritas    {--vs-accent:#b12024;--vs-accent-ring:rgba(177,32,36,.18);}
body.symantec   {--vs-accent:#fdbb30;--vs-on-accent:#1a1a1a;--vs-accent-ring:rgba(253,187,48,.30);}
body.aws        {--vs-accent:#fdbb30;--vs-on-accent:#1a1a1a;--vs-accent-ring:rgba(253,187,48,.30);}
body.infoblox   {--vs-accent:#7dc434;--vs-on-accent:#1a1a1a;--vs-accent-ring:rgba(125,196,52,.28);}
/* microsoft: azul Fluent explicito (cubre Microsoft ID 8 y Azure ID 17, misma clase).
   El default de :root ya era #0078D4, pero --vs-accent-strong se derivaba con color-mix
   y daba #0060AA; el token Fluent real es #005A9E. NO usar el naranja #f25022: es un
   cuadro del logo, no el color de la marca. */
body.microsoft  {--vs-accent:#0078D4;--vs-accent-strong:#005A9E;--vs-accent-ring:rgba(0,120,212,.18);}
body.net2phone  {--vs-accent:#f25022;--vs-accent-ring:rgba(242,80,34,.20);}
body.microfocus {--vs-accent:#0078ef;--vs-accent-ring:rgba(0,120,239,.18);}
body.fortinet   {--vs-accent:#ee3124;--vs-accent-ring:rgba(238,49,36,.18);}
body.quest      {--vs-accent:#1a1a1a;--vs-accent-ring:rgba(0,0,0,.16);}
body.audiocodes {--vs-accent:#1a1a1a;--vs-accent-ring:rgba(0,0,0,.16);}
body.splunk     {--vs-accent:#1a1a1a;--vs-accent-ring:rgba(0,0,0,.16);}
body.apc        {--vs-accent:#f25022;--vs-accent-ring:rgba(242,80,34,.20);}
body.adobe      {--vs-accent:#fa0f00;--vs-accent-ring:rgba(250,15,0,.16);}
body.iterati    {--vs-accent:#38597c;--vs-accent-ring:rgba(56,89,124,.18);}
body.veeam      {--vs-accent:#13b14b;--vs-accent-ring:rgba(19,177,75,.18);}
body.huawei     {--vs-accent:#e41f28;--vs-accent-ring:rgba(228,31,40,.18);}
body.lenovo     {--vs-accent:#c90000;--vs-accent-ring:rgba(201,0,0,.18);}
body.dell       {--vs-accent:#0076ce;--vs-accent-ring:rgba(0,118,206,.18);}
body.redhat     {--vs-accent:#c90000;--vs-accent-ring:rgba(201,0,0,.18);}
body.trendmicro {--vs-accent:#c90000;--vs-accent-ring:rgba(201,0,0,.18);}
body.acronis    {--vs-accent:#0076ce;--vs-accent-ring:rgba(0,118,206,.18);}
body.safedns    {--vs-accent:#0076ce;--vs-accent-ring:rgba(0,118,206,.18);}
body.autodesk   {--vs-accent:#1a1a1a;--vs-accent-ring:rgba(0,0,0,.16);}
body.suse       {--vs-accent:#30ba78;--vs-accent-ring:rgba(48,186,120,.18);}
body.ibm        {--vs-accent:#0530ad;--vs-accent-ring:rgba(5,48,173,.18);}
body.hpinc      {--vs-accent:#7dc434;--vs-on-accent:#1a1a1a;--vs-accent-ring:rgba(125,196,52,.28);}
body.broadcom   {--vs-accent:#c90000;--vs-accent-ring:rgba(201,0,0,.18);}
/* MSP360 CloudBerry (2026-08-19). Era la unica de las 34 clases de marca SIN fila de
   acento —igual que le habia pasado con `.titulo`— porque tampoco tenia regla de
   `.banner`: se pintaba con el azul Iterati del default, o sea con el color de otro.
   El #104098 no es nuevo: es el mismo que `micrositios.css` ya le asigna a su `.titulo`,
   muestreado del logo que servimos (/vendors/msp360.png) y elegido sobre el naranja
   #f04800 por contraste (9.5:1 contra 3.7:1). */
body.msp360cloudberry {--vs-accent:#104098;--vs-accent-ring:rgba(16,64,152,.18);}