/* VfB · Paleta del CRM sobre la estructura de Instrumento v2.
   Leo (6-oct-2026): «que la línea de colores sea similar a lo que ya teníamos».
   Se conserva todo lo de Instrumento (Geist/Geist Mono, lecturas en mono, filo
   fino, cápsula, chips y sellos, espacios y formas); sólo cambian los colores,
   tomados de de6a992: grafito neutro en oscuro (#0a0a0a/#111), blanco y pizarra
   en claro (#0f172a, #475569, #e2e8f0), acento azul #2563eb y estados
   verde/naranja/rojo. Ajustes mínimos para AA (tinta tenue, textos de estado y
   acento como texto); tabla de contraste en docs/diseno/instrumento-v2/dist/contraste-vfb.md
   (verificar_paleta_vfb.py la valida y la regenera).

   Se carga DESPUÉS de vyron-tokens.css (generado y compartido con las apps, no
   se edita a mano) y sólo en el CRM. Un solo acento para todo el CRM: los
   atributos data-producto siguen en el HTML, pero ya no cambian el color. */

:root,[data-tema="claro"]{
  --vy-fondo:#F4F7FB;
  --vy-superficie:#FFFFFF;
  --vy-superficie-alta:#F1F5F9;
  --vy-tinta:#0F172A;
  --vy-tinta-suave:#475569;
  --vy-tinta-tenue:#5B6B80;
  --vy-linea:#E2E8F0;
  --vy-linea-fuerte:#CBD5E1;
  --vy-boton-fondo:#0F172A;
  --vy-boton-texto:#FFFFFF;
  --vy-exito:#157A3A;
  --vy-exito-relleno:#15803D;
  --vy-exito-sobre:#FFFFFF;
  --vy-exito-suave:rgba(34,197,94,0.12);
  --vy-aviso:#A84D07;
  --vy-aviso-relleno:#FF8A1F;
  --vy-aviso-sobre:#0F172A;
  --vy-aviso-suave:rgba(255,138,31,0.14);
  --vy-peligro:#C81E1E;
  --vy-peligro-relleno:#DC2626;
  --vy-peligro-sobre:#FFFFFF;
  --vy-peligro-suave:rgba(220,38,38,0.1);
  --vy-velo:rgba(15,23,42,0.45);
  --vy-tab-fondo:#FFFFFF;
  --vy-tab-icono:#475569;
  --vy-tab-texto:#0F172A;
  --vy-tab-borde:#E2E8F0;
  color-scheme:light;
}
[data-tema="oscuro"]{
  --vy-fondo:#0A0A0A;
  --vy-superficie:#111111;
  --vy-superficie-alta:#1A1A1A;
  --vy-tinta:#FFFFFF;
  --vy-tinta-suave:#BFBFBF;
  --vy-tinta-tenue:#8C8C8C;
  --vy-linea:#2A2A2A;
  --vy-linea-fuerte:#3F3F3F;
  --vy-boton-fondo:#FFFFFF;
  --vy-boton-texto:#0A0A0A;
  --vy-exito:#22C55E;
  --vy-exito-relleno:#22C55E;
  --vy-exito-sobre:#0A0A0A;
  --vy-exito-suave:rgba(34,197,94,0.15);
  --vy-aviso:#FF8A1F;
  --vy-aviso-relleno:#FF8A1F;
  --vy-aviso-sobre:#0A0A0A;
  --vy-aviso-suave:rgba(255,138,31,0.15);
  --vy-peligro:#FB7185;
  --vy-peligro-relleno:#F43F5E;
  --vy-peligro-sobre:#0A0A0A;
  --vy-peligro-suave:rgba(244,63,94,0.15);
  --vy-velo:rgba(0,0,0,0.66);
  --vy-tab-fondo:#161616;
  --vy-tab-icono:#BFBFBF;
  --vy-tab-texto:#FFFFFF;
  --vy-tab-borde:#2A2A2A;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-tema]){
  --vy-fondo:#0A0A0A;
  --vy-superficie:#111111;
  --vy-superficie-alta:#1A1A1A;
  --vy-tinta:#FFFFFF;
  --vy-tinta-suave:#BFBFBF;
  --vy-tinta-tenue:#8C8C8C;
  --vy-linea:#2A2A2A;
  --vy-linea-fuerte:#3F3F3F;
  --vy-boton-fondo:#FFFFFF;
  --vy-boton-texto:#0A0A0A;
  --vy-exito:#22C55E;
  --vy-exito-relleno:#22C55E;
  --vy-exito-sobre:#0A0A0A;
  --vy-exito-suave:rgba(34,197,94,0.15);
  --vy-aviso:#FF8A1F;
  --vy-aviso-relleno:#FF8A1F;
  --vy-aviso-sobre:#0A0A0A;
  --vy-aviso-suave:rgba(255,138,31,0.15);
  --vy-peligro:#FB7185;
  --vy-peligro-relleno:#F43F5E;
  --vy-peligro-sobre:#0A0A0A;
  --vy-peligro-suave:rgba(244,63,94,0.15);
  --vy-velo:rgba(0,0,0,0.66);
  --vy-tab-fondo:#161616;
  --vy-tab-icono:#BFBFBF;
  --vy-tab-texto:#FFFFFF;
  --vy-tab-borde:#2A2A2A;
  color-scheme:dark;
}}

/* Acento único (azul de antes). Gana a los acentos por producto de vyron-tokens.css. */
:root,:root[data-producto],:root [data-producto]{
  --vy-acento:#2563EB;
  --vy-sobre-acento:#FFFFFF;
  --vy-acento-texto:#1D4ED8;
  --vy-acento-suave:rgba(37,99,235,0.1);
}
[data-tema="oscuro"],[data-tema="oscuro"][data-producto],[data-tema="oscuro"] [data-producto]{
  --vy-acento:#2563EB;
  --vy-sobre-acento:#FFFFFF;
  --vy-acento-texto:#60A5FA;
  --vy-acento-suave:rgba(59,130,246,0.16);
}
@media (prefers-color-scheme:dark){:root:not([data-tema]),:root:not([data-tema]) [data-producto]{
  --vy-acento:#2563EB;
  --vy-sobre-acento:#FFFFFF;
  --vy-acento-texto:#60A5FA;
  --vy-acento-suave:rgba(59,130,246,0.16);
}}

/* Colores por métrica (6-oct, Leo: «para diferentes métricas había diferentes colores… colores
   vivos»). Son los de de6a992 (dashboard.html: --accent-blue #3b82f6, --accent-orange #ff8a1f,
   --accent-green #22c55e, --accent-red #f43f5e, --accent-purple #a855f7, --accent-cyan #06b6d4;
   cotizaciones por asesor: #fbbf24 y #38bdf8). En oscuro van tal cual; en claro, los que no
   llegaban a 3:1 como relleno pasan al tono 600 de su familia. --vy-m-*-texto es la variante
   para usarlos como TEXTO (4.5:1). El azul sigue siendo el acento del CRM. */
:root,[data-tema="claro"]{
  --vy-m-azul:#3B82F6;
  --vy-m-azul-texto:#1D4ED8;
  --vy-m-naranja:#EA580C;
  --vy-m-naranja-texto:#C2410C;
  --vy-m-verde:#16A34A;
  --vy-m-verde-texto:#15803D;
  --vy-m-rojo:#F43F5E;
  --vy-m-rojo-texto:#BE123C;
  --vy-m-morado:#A855F7;
  --vy-m-morado-texto:#7E22CE;
  --vy-m-cian:#0891B2;
  --vy-m-cian-texto:#0E7490;
  --vy-m-ambar:#D57506;
  --vy-m-ambar-texto:#B45309;
  --vy-m-celeste:#0284C7;
  --vy-m-celeste-texto:#0369A1;
  --vy-m-sobre:#0A0A0A;
}
[data-tema="oscuro"]{
  --vy-m-azul:#3B82F6;
  --vy-m-azul-texto:#3B82F6;
  --vy-m-naranja:#FF8A1F;
  --vy-m-naranja-texto:#FF8A1F;
  --vy-m-verde:#22C55E;
  --vy-m-verde-texto:#22C55E;
  --vy-m-rojo:#F43F5E;
  --vy-m-rojo-texto:#F43F5E;
  --vy-m-morado:#A855F7;
  --vy-m-morado-texto:#C084FC;
  --vy-m-cian:#06B6D4;
  --vy-m-cian-texto:#06B6D4;
  --vy-m-ambar:#FBBF24;
  --vy-m-ambar-texto:#FBBF24;
  --vy-m-celeste:#38BDF8;
  --vy-m-celeste-texto:#38BDF8;
  --vy-m-sobre:#0A0A0A;
}
@media (prefers-color-scheme:dark){:root:not([data-tema]){
  --vy-m-azul:#3B82F6;
  --vy-m-azul-texto:#3B82F6;
  --vy-m-naranja:#FF8A1F;
  --vy-m-naranja-texto:#FF8A1F;
  --vy-m-verde:#22C55E;
  --vy-m-verde-texto:#22C55E;
  --vy-m-rojo:#F43F5E;
  --vy-m-rojo-texto:#F43F5E;
  --vy-m-morado:#A855F7;
  --vy-m-morado-texto:#C084FC;
  --vy-m-cian:#06B6D4;
  --vy-m-cian-texto:#06B6D4;
  --vy-m-ambar:#FBBF24;
  --vy-m-ambar-texto:#FBBF24;
  --vy-m-celeste:#38BDF8;
  --vy-m-celeste-texto:#38BDF8;
  --vy-m-sobre:#0A0A0A;
}}


/* Color por asesor (6-oct, Leo: «cada asesor con un color distinto»). Diez tonos distintos del
   rojo, el amarillo y el azul de las temperaturas, ordenados para que las primeras personas del
   tenant caigan en tonos bien separados (0 índigo, 1 naranja, 2 verde, 3 fucsia, 4 cian, 5 lima, 6 violeta, 7 rosa, 8 teal, 9 celeste).
   --vy-as-N es el relleno (punto, filo), --vy-as-N-texto el tono para TEXTO (4.5:1 sobre
   superficie, fondo y su propio tinte) y --vy-as-N-suave el tinte del chip. El índice lo asigna
   app.asesor_color (orden de alta en el tenant): el mismo asesor, el mismo color siempre. */
:root,[data-tema="claro"]{
  --vy-as-0:#4F46E5;
  --vy-as-0-texto:#4338CA;
  --vy-as-0-suave:rgba(79,70,229,0.12);
  --vy-as-1:#EA580C;
  --vy-as-1-texto:#9A3412;
  --vy-as-1-suave:rgba(234,88,12,0.12);
  --vy-as-2:#16A34A;
  --vy-as-2-texto:#166534;
  --vy-as-2-suave:rgba(22,163,74,0.12);
  --vy-as-3:#C026D3;
  --vy-as-3-texto:#A21CAF;
  --vy-as-3-suave:rgba(192,38,211,0.12);
  --vy-as-4:#0891B2;
  --vy-as-4-texto:#155E75;
  --vy-as-4-suave:rgba(8,145,178,0.12);
  --vy-as-5:#4D7C0F;
  --vy-as-5-texto:#3F6212;
  --vy-as-5-suave:rgba(77,124,15,0.12);
  --vy-as-6:#7C3AED;
  --vy-as-6-texto:#6D28D9;
  --vy-as-6-suave:rgba(124,58,237,0.12);
  --vy-as-7:#DB2777;
  --vy-as-7-texto:#BE185D;
  --vy-as-7-suave:rgba(219,39,119,0.12);
  --vy-as-8:#0D9488;
  --vy-as-8-texto:#115E59;
  --vy-as-8-suave:rgba(13,148,136,0.12);
  --vy-as-9:#0284C7;
  --vy-as-9-texto:#075985;
  --vy-as-9-suave:rgba(2,132,199,0.12);
}
[data-tema="oscuro"]{
  --vy-as-0:#818CF8;
  --vy-as-0-texto:#A5B4FC;
  --vy-as-0-suave:rgba(129,140,248,0.16);
  --vy-as-1:#FB923C;
  --vy-as-1-texto:#FDBA74;
  --vy-as-1-suave:rgba(251,146,60,0.16);
  --vy-as-2:#4ADE80;
  --vy-as-2-texto:#86EFAC;
  --vy-as-2-suave:rgba(74,222,128,0.16);
  --vy-as-3:#E879F9;
  --vy-as-3-texto:#F0ABFC;
  --vy-as-3-suave:rgba(232,121,249,0.16);
  --vy-as-4:#22D3EE;
  --vy-as-4-texto:#67E8F9;
  --vy-as-4-suave:rgba(34,211,238,0.16);
  --vy-as-5:#A3E635;
  --vy-as-5-texto:#BEF264;
  --vy-as-5-suave:rgba(163,230,53,0.16);
  --vy-as-6:#A78BFA;
  --vy-as-6-texto:#C4B5FD;
  --vy-as-6-suave:rgba(167,139,250,0.16);
  --vy-as-7:#F472B6;
  --vy-as-7-texto:#F9A8D4;
  --vy-as-7-suave:rgba(244,114,182,0.16);
  --vy-as-8:#2DD4BF;
  --vy-as-8-texto:#5EEAD4;
  --vy-as-8-suave:rgba(45,212,191,0.16);
  --vy-as-9:#38BDF8;
  --vy-as-9-texto:#7DD3FC;
  --vy-as-9-suave:rgba(56,189,248,0.16);
}
@media (prefers-color-scheme:dark){:root:not([data-tema]){
  --vy-as-0:#818CF8;
  --vy-as-0-texto:#A5B4FC;
  --vy-as-0-suave:rgba(129,140,248,0.16);
  --vy-as-1:#FB923C;
  --vy-as-1-texto:#FDBA74;
  --vy-as-1-suave:rgba(251,146,60,0.16);
  --vy-as-2:#4ADE80;
  --vy-as-2-texto:#86EFAC;
  --vy-as-2-suave:rgba(74,222,128,0.16);
  --vy-as-3:#E879F9;
  --vy-as-3-texto:#F0ABFC;
  --vy-as-3-suave:rgba(232,121,249,0.16);
  --vy-as-4:#22D3EE;
  --vy-as-4-texto:#67E8F9;
  --vy-as-4-suave:rgba(34,211,238,0.16);
  --vy-as-5:#A3E635;
  --vy-as-5-texto:#BEF264;
  --vy-as-5-suave:rgba(163,230,53,0.16);
  --vy-as-6:#A78BFA;
  --vy-as-6-texto:#C4B5FD;
  --vy-as-6-suave:rgba(167,139,250,0.16);
  --vy-as-7:#F472B6;
  --vy-as-7-texto:#F9A8D4;
  --vy-as-7-suave:rgba(244,114,182,0.16);
  --vy-as-8:#2DD4BF;
  --vy-as-8-texto:#5EEAD4;
  --vy-as-8-suave:rgba(45,212,191,0.16);
  --vy-as-9:#38BDF8;
  --vy-as-9-texto:#7DD3FC;
  --vy-as-9-suave:rgba(56,189,248,0.16);
}}

/* Temperatura del contacto (6-oct, Leo: «caliente = rojo, templado = amarillo, frío = azul»),
   igual en todo el CRM: chips de Contactos, ficha, Mi día / Equipo hoy y filtros. Cliente sigue
   en verde. --vy-temp-X es el filo o el punto (3:1), --vy-temp-X-texto el tono para TEXTO (4.5:1
   también sobre su tinte) y --vy-temp-X-suave el tinte del chip. El amarillo como texto en claro
   no se lee: el texto va en ámbar oscuro (#854D0E) sobre tinte amarillo, con filo amarillo. */
:root,[data-tema="claro"]{
  --vy-temp-caliente:#DC2626;
  --vy-temp-caliente-texto:#B91C1C;
  --vy-temp-caliente-suave:rgba(220,38,38,0.12);
  --vy-temp-templado:#A16207;
  --vy-temp-templado-texto:#854D0E;
  --vy-temp-templado-suave:rgba(234,179,8,0.2);
  --vy-temp-frio:#2563EB;
  --vy-temp-frio-texto:#1D4ED8;
  --vy-temp-frio-suave:rgba(37,99,235,0.1);
  --vy-temp-cliente:#16A34A;
  --vy-temp-cliente-texto:#166534;
  --vy-temp-cliente-suave:rgba(22,163,74,0.12);
}
[data-tema="oscuro"]{
  --vy-temp-caliente:#EF4444;
  --vy-temp-caliente-texto:#F87171;
  --vy-temp-caliente-suave:rgba(239,68,68,0.16);
  --vy-temp-templado:#EAB308;
  --vy-temp-templado-texto:#FACC15;
  --vy-temp-templado-suave:rgba(234,179,8,0.16);
  --vy-temp-frio:#3B82F6;
  --vy-temp-frio-texto:#60A5FA;
  --vy-temp-frio-suave:rgba(59,130,246,0.16);
  --vy-temp-cliente:#22C55E;
  --vy-temp-cliente-texto:#4ADE80;
  --vy-temp-cliente-suave:rgba(34,197,94,0.15);
}
@media (prefers-color-scheme:dark){:root:not([data-tema]){
  --vy-temp-caliente:#EF4444;
  --vy-temp-caliente-texto:#F87171;
  --vy-temp-caliente-suave:rgba(239,68,68,0.16);
  --vy-temp-templado:#EAB308;
  --vy-temp-templado-texto:#FACC15;
  --vy-temp-templado-suave:rgba(234,179,8,0.16);
  --vy-temp-frio:#3B82F6;
  --vy-temp-frio-texto:#60A5FA;
  --vy-temp-frio-suave:rgba(59,130,246,0.16);
  --vy-temp-cliente:#22C55E;
  --vy-temp-cliente-texto:#4ADE80;
  --vy-temp-cliente-suave:rgba(34,197,94,0.15);
}}