/* Tokens de diseño del sistema: paleta + semanticos. UNICA fuente de variables globales.
   La usan: el bundle global (antes de MasterPage.css), las paginas de login/error (antes de Login.css),
   ActionSales_Auth y ActionSales_Serverless (por link del csproj), la ventana de impresion de
   CanalComunicaciones y Auditoria (copia manual, igual que PanelesConfig.css).
   No agregar variables en otros :root salvo las propias de un componente. */
:root {
    /* Solo para definir los semanticos: fuera de este archivo usar --color-superficie (fondo)
       o --color-texto-sobre-primario (texto sobre color). npm run control lo verifica. */
    --blancoAction: #ffffff;
    --color-bg-body: #fdfdfd;
    --color-azul-50: #E7F5FE;
    --color-azul-100: #BCE4FB;
    --color-azul-200: #90D2F9;
    --color-azul-300: #65C1F6;
    --color-azul-400: #39AFF3;
    --color-azul-500: #0E9EF1;
    --color-azul-600: #0B7BBc;
    --color-azul-700: #09659A;
    --color-azul-800: #06496F;
    --color-azul-900: #042C43;
    --color-azul-950: #011018;
    --color-gris-0: #F6F6F9;
    --color-gris-50: #F1F2F4;
    --color-gris-100: #dee2e6;
    --color-gris-200: #BDC2CC;
    --color-gris-300: #A3ABB8;
    --color-gris-400: #8993A4;
    --color-gris-500: #6F7B90;
    --color-gris-600: #5B6576;
    --color-gris-700: #3E4551;
    --color-gris-800: #333942;
    --color-gris-900: #1F2228;
    --color-gris-950: #0B0C0E;
    --color-verde-50: #EAFAEF;
    --color-verde-100: #C5F2D2;
    --color-verde-200: #9FE9B4;
    --color-verde-300: #7AE197;
    --color-verde-400: #55D87A;
    --color-verde-500: #2CBF55;
    --color-verde-600: #27AA4C;
    --color-verde-700: #1E853B;
    --color-verde-800: #16602B;
    --color-verde-900: #0D3A1A;
    --color-verde-950: #051509;
    --color-rojo-50: #FBEBEA;
    --color-rojo-100: #F3C6C4;
    --color-rojo-200: #EAA19E;
    --color-rojo-300: #E27C78;
    --color-rojo-400: #DA5752;
    --color-rojo-500: #D53E3A;
    --color-rojo-600: #AD2925;
    --color-rojo-700: #87201D;
    --color-rojo-800: #611715;
    --color-rojo-900: #3B0E0C;
    --color-rojo-950: #150504;
    --color-amarillo-50: #FFF8E6;
    --color-amarillo-100: #FFEBB8;
    --color-amarillo-200: #FFDE8A;
    --color-amarillo-300: #FFD15C;
    --color-amarillo-400: #FFC42E;
    --color-amarillo-500: #FFB700;
    --color-amarillo-600: #D19600;
    --color-amarillo-700: #A37500;
    --color-amarillo-800: #755400;
    --color-amarillo-900: #473300;
    --color-amarillo-950: #1A1200;
    --color-violeta-50: #efecfd;
    --color-violeta-100: #e2dbfc;
    --color-violeta-200: #c5b5f9;
    --color-violeta-300: #ab90f6;
    --color-violeta-400: #936af2;
    --color-violeta-500: #7c3aed;
    --color-violeta-600: #6722ce;
    --color-violeta-700: #4e189f;
    --color-violeta-800: #360e72;
    --color-violeta-900: #22064c;
    --color-violeta-950: #140332;
    /* ===== CANALES (colores de marca de terceros) ===== */
    --color-canal-whatsapp: #25D366;
    --color-canal-whatsapp-burbuja: #DCF8C6;
    --color-canal-whatsapp-link: #00A5F4;
    --color-canal-mercadolibre: #FFE600;
    --color-canal-mercadolibre-burbuja: #D9E7FA;
    --color-canal-messenger: #CA40C4;
    --color-canal-messenger-burbuja: #0084FF;
    --color-canal-whatsapp-fondo: #efe7dd;
    --color-canal-whatsapp-texto: #111b21;
    --color-canal-whatsapp-texto-suave: #667781;
    --color-canal-whatsapp-texto-tenue: #8696a0;
    --color-canal-google: #4285f4;
    --color-canal-google-activo: #1669f2;
    /* ===== ENTIDADES (el mismo color en Aplicaciones, el menu "+" y Favoritos del navbar) =====
       Clientes, reportes y articulos no estan en la paleta: son los que ya usaba el menu de aplicaciones. */
    --color-entidad-actividades: var(--color-rojo-500);
    --color-entidad-negocios: var(--color-azul-600);
    --color-entidad-clientes: #0056b3;
    --color-entidad-reportes: #ffa726;
    --color-entidad-articulos: #872151;
    --color-entidad-proyectos: var(--color-azul-400);
    --color-entidad-service: var(--color-verde-700);
    --color-entidad-series: #4fb7d9;
    --color-entidad-pedidos: #5ccf9f;
    --color-entidad-stock: #008000;
    /* ===== TIPOGRAFIA ===== */
    --font-sans: VarelaRound-Regular, Segoe UI, Verdana, Sans-Serif;
    /* ===== FONT SIZE ===== */
    --fs-1: 8px;
    --fs-2: 10px;
    --fs-3: 12px;
    --fs-4: 14px;
    --fs-5: 16px;
    --fs-6: 18px;
    --fs-7: 20px;
    --fs-8: 24px;
    --fs-9: 28px;
    --fs-10: 32px;
    --fs-11: 40px;
    /* ===== FONT WEIGHT ===== */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 600;
    --fw-black: 700;
    /* ===== RADIOS ===== */
    --radius-1: 2px;
    --radius-2: 4px;
    --radius-3: 6px;
    --radius-4: 10px;
    --radius-pill: 999px;   /* pastilla: bordes del todo redondos */
    --radius-circulo: 50%;
    /* ===== SPACING ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    /* ===== SOMBRAS ===== */
    --shadow-sm: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    --shadow-md: 0 2px 6px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 20px rgba(0,0,0,.18);
    --shadow-menu: 0 6px 12px rgba(0,0,0,.175);   /* desplegables (dropdown-menu) */
    --shadow-popup: 0 12px 32px rgba(0,0,0,.18);  /* paneles flotantes grandes */
    /* ===== TRANSICIONES ===== */
    --transition-fast: 120ms ease;
    --transition-normal: 180ms ease;
    /* ===== CAPAS (z-index) =====
       Por debajo de los modales de Bootstrap (backdrop 1040 / modal 1050). */
    --z-navbar: 1030;
    --z-navbar-dropdown: 1035;
}

/* ===== TOKENS SEMANTICOS =====
   Nombran el USO de un color (texto, fondo, borde...) en lugar del color. Apuntan a la paleta de arriba.
   El CSS nuevo usa estos; el modo oscuro y el tema v2 los redefinen (ver Documentacion/Rediseño CSS/
   Modo oscuro - consideraciones.md). Herramientas/css-audit/paleta-a-semanticos.js pasa la paleta a estos
   cuando la propiedad coincide con el uso, y npm run control frena usos nuevos de paleta en esos casos. */
:root {
    /* Fondos */
    --color-fondo: var(--color-bg-body);
    --color-superficie: var(--blancoAction);
    --color-superficie-alt: var(--color-gris-50);
    /* Bordes */
    --color-borde: var(--color-gris-100);
    --color-borde-suave: var(--color-gris-50);
    /* Texto */
    --color-texto: var(--color-gris-900);
    --color-texto-secundario: var(--color-gris-700);
    --color-texto-suave: var(--color-gris-500);
    --color-texto-sobre-primario: var(--blancoAction);
    /* Marca */
    --color-primario: var(--color-azul-600);
    --color-primario-hover: var(--color-azul-700);
    --color-primario-suave: var(--color-azul-50);
    /* El primario como texto (links, titulos): en oscuro necesita un azul mas claro que el de los botones */
    --color-primario-texto: var(--color-azul-600);
    --color-primario-texto-hover: var(--color-azul-700);
    /* Velo oscuro sobre un fondo de color (p. ej. el buscador del navbar) */
    --color-velo-sobre-primario: rgba(0, 0, 0, .12);
    /* Estados */
    --color-exito: var(--color-verde-500);
    --color-exito-suave: var(--color-verde-50);
    --color-peligro: var(--color-rojo-500);
    --color-peligro-suave: var(--color-rojo-50);
    --color-alerta: var(--color-amarillo-500);
    --color-alerta-suave: var(--color-amarillo-50);
    --color-info: var(--color-azul-500);
    --color-info-suave: var(--color-azul-50);
    /* Foco accesible */
    --color-foco: var(--color-azul-600);
}