/* ═══════════════════════════════════════════════════════════════════════
   tokens.css — Design System ItuVetCRM (Fugu-Lite T2, sep-2026)
   ───────────────────────────────────────────────────────────────────────
   Fuente de verdad de tokens del CRM. Prefijo ÚNICO del sistema: --vf-*.

   REGLAS DE ORO
   1. NUNCA hardcodear un valor que ya tiene token (color, radio, sombra,
      z-index, spacing). Si un valor nuevo aparece 2+ veces → es un token.
   2. Convención de nombres: --vf-<categoria>-<token>
      (--vf-color-*, --vf-space-*, --vf-font-*, --vf-radius-*,
       --vf-shadow-*, --vf-z-*).
   3. Los skins (body[data-skin="ocean"|"sunset"|"lp-dark"]) redefinen SOLO
      --vf-color-primary(-light/-dark), --vf-color-bg-base y --vf-color-accent
      (accent = override permitido, formalizado en DS-F2 §8.1-Q2).
   4. Tokens legacy: eliminados en DS-F2 L7 (14-sep-2026) — usar SIEMPRE los
      nombres canónicos documentados en este archivo.
   5. Los @media NO aceptan var() → los breakpoints son CONVENCIÓN
      documentada (ver sección Breakpoints abajo), no tokens.
   6. Compatible CSP strict: archivo estático vía style-src 'self', cero
      inline. NUNCA definir tokens en <style nonce> de templates.

   Cache-buster: ?v=2 (bump en TODO cambio de este archivo).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────
     COLOR — paleta base del CRM (skin "vetflow" por defecto).
     Valores idénticos a los pre-migración → CERO cambio visual.
     Los skins solo sobreescriben primary*/bg-base (+ accent — Q2).
     ───────────────────────────────────────────────────────────── */
  --vf-color-bg-base: #e3ebe6;          /* fondo del app (body)           */
  --vf-color-bg-surface: #ffffff;       /* superficies (cards/paneles)    */
  --vf-color-bg-elevated: #f8faf9;      /* nuevo (fase 2: cards elevadas) */
  --vf-color-border: #dee2e6;           /* bordes (inputs, cards)         */
  --vf-color-text: #212529;             /* texto principal (Bootstrap)    */
  --vf-color-text-muted: #6c757d;       /* texto secundario               */
  --vf-color-primary: #2d6a4f;          /* verde institucional            */
  --vf-color-primary-light: #40916c;    /* hover/estados                  */
  --vf-color-primary-dark: #1b4332;     /* sidebar/gradientes             */
  --vf-color-accent: #ffd60a;           /* acento del sistema             */
  --vf-color-success: #34d399;          /* nuevo (fase 2: éxito)          */
  --vf-color-warning: #ffc107;          /* = --bs-warning (stat-cards)    */
  --vf-color-danger: #dc3545;           /* errores / eliminar             */
  --vf-color-info: #0dcaf0;             /* = --bs-info                    */

  /* ─────────────────────────────────────────────────────────────
     SPACING — escala base 4px (0.25rem = 4px).
     Usar SIEMPRE la escala; nunca .2rem/.35rem sueltos.
     ───────────────────────────────────────────────────────────── */
  --vf-space-1: 0.25rem;
  --vf-space-2: 0.5rem;
  --vf-space-3: 0.75rem;
  --vf-space-4: 1rem;
  --vf-space-5: 1.5rem;
  --vf-space-6: 2rem;
  --vf-space-card-pad: var(--vf-space-4);   /* padding estándar de cards */
  --vf-space-section: var(--vf-space-6);    /* separación entre secciones */

  /* ─────────────────────────────────────────────────────────────
     TIPOGRAFÍA
     ───────────────────────────────────────────────────────────── */
  --vf-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vf-font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vf-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --vf-font-size-sm: 0.875rem;
  --vf-font-size-base: 1rem;
  --vf-font-size-lg: 1.25rem;
  --vf-font-weight-normal: 400;
  --vf-font-weight-semibold: 600;
  --vf-font-weight-bold: 700;
  --vf-line-height-base: 1.5;
  --vf-line-height-tight: 1.25;

  /* ─────────────────────────────────────────────────────────────
     RADIOS — escala (los 11 valores sueltos de vetflow.css
     colapsan a estos 5 en fase 2).
     ───────────────────────────────────────────────────────────── */
  --vf-radius-sm: 0.375rem;   /* inputs, badges                      */
  --vf-radius-md: 0.5rem;     /* botones, alertas                    */
  --vf-radius-lg: 0.75rem;    /* cards, modales                      */
  --vf-radius-pill: 999px;    /* pills, avatares, toggles            */
  --vf-radius-circle: 50%;    /* avatares, botones circulares        */

  /* ─────────────────────────────────────────────────────────────
     SOMBRAS
     ───────────────────────────────────────────────────────────── */
  --vf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --vf-shadow-md: 0 2px 8px rgba(0, 0, 0, .06);  /* = .card actual */
  --vf-shadow-lg: 0 8px 24px rgba(0, 0, 0, .12); /* modales/flotantes */

  /* ─────────────────────────────────────────────────────────────
     Z-INDEX — escala. Alineada a Bootstrap (dropdown 1000, sticky
     1020, modal 1055) con los pisos que el CRM ya usa. No inventar
     valores nuevos: elegir el más cercano de la escala.
     ───────────────────────────────────────────────────────────── */
  --vf-z-dropdown: 1045;   /* dropdowns/offcanvas (1045 = BS offcanvas) */
  --vf-z-sticky: 1050;     /* headers/paneles sticky                    */
  --vf-z-modal: 1055;      /* modales Bootstrap                         */
  --vf-z-toast: 9999;      /* toasts/notificaciones flotantes           */
  --vf-z-widget: 10000;    /* widgets flotantes (chat vetybot)          */
  --vf-z-tooltip: 99999;   /* tooltips/overlays críticos                */

  /* ─────────────────────────────────────────────────────────────
     TOKENS FANTASMA (GAP T2): eliminados en DS-F2 L7 (14-sep-2026)
     — sus usos migraron a los --vf-color-* canónicos (grep=0).
     ───────────────────────────────────────────────────────────── */
}

/* ─────────────────────────────────────────────────────────────
   BREAKPOINTS — CONVENCIÓN documentada (var() no funciona en
   @media). Usar SIEMPRE estos valores literales en @media:

     --vf-bp-sm: 576px   (celulares grandes)
     --vf-bp-md: 768px   (tablets / sidebar collapse)
     --vf-bp-lg: 992px   (desktop)
     --vf-bp-xl: 1200px  (desktop grande)

   Ejemplo:  @media (max-width: 767.98px)  →  @media (max-width: 767.98px)
   Regla (DS-F2, 14-sep-2026 — cerrado): los literales 900px (visor WSP),
   820/821px (panel Vety) y 1536x850 (Full HD) quedan como EXCEPCION
   intencional — NO se remapean (spec §4.1/§8.3). Los valores NO se pueden
   tokenizar (CSS no permite var() en media queries).
   ───────────────────────────────────────────────────────────── */