/* ============================================================
   WOLFBITE UI · tokens.css · v1.2.0 (sept 2026 · fondo cianotipo)
   Sistema compartido de las apps (caja, cartera, appc), derivado
   del sitio wolfbit.co ("cianotipo"): mesa azul + hojas blancas + tinta.
   Cambia un token AQUÍ y se propaga a todas las apps (ver README).
   Los datos viven siempre en hojas blancas (tema claro, legible a
   pleno sol); solo la mesa de fondo es azul.
   ============================================================ */
:root{
  /* ── Color · fondo cianotipo (la mesa de plano; los paneles blancos son las hojas) ── */
  --wb-navy:#061737; --wb-blueprint:#0C3068; --wb-blueprint-2:#12457F;   /* degradado 165° (base.css body::before) */
  --wb-aurora:rgba(38,168,255,.30);                                       /* resplandor cian arriba-izquierda */
  --wb-fondo:var(--wb-blueprint);   /* color plano de respaldo del fondo */
  --wb-fondo-texto:#EEF4FF;         /* texto principal directamente sobre el fondo (títulos de sección, fecha) */
  --wb-fondo-texto-2:#C6D6EF;       /* secundario sobre el fondo: migas, pestañas, barra de sesión (AA 9,6:1) */
  --wb-fondo-acento:#A3E6FF;        /* cian: pestaña activa, enlace en foco sobre el fondo */
  --wb-fondo-linea:rgba(255,255,255,.24);
  --wb-fondo-malla:rgba(255,255,255,.07);

  /* ── Color · superficies (hojas) ─────────────────────── */
  --wb-papel:#E8EBEF;        /* rellenos DENTRO de paneles: badges, cajas de info, fila de total, campos bloqueados */
  --wb-superficie:#FFFFFF;   /* paneles, barras, tarjetas, modales */
  --wb-campo:#FFFFFF;        /* fondo de campos editables */

  /* ── Color · texto ───────────────────────────────────── */
  --wb-tinta:#15181C;        /* texto principal y trazo fuerte */
  --wb-tinta-2:#2A3138;      /* párrafos largos */
  --wb-cota:#4E5A66;         /* secundario: rótulos, ayudas, metadatos (AA 5.8:1) */
  --wb-cota-2:#7A848E;       /* SOLO placeholders y texto deshabilitado (no informativo) */

  /* ── Color · acción (azul plano) ─────────────────────── */
  --wb-plano:#1B4B8C;
  --wb-plano-osc:#143A6E;
  --wb-plano-tinte:rgba(27,75,140,.10);
  --wb-plano-foco:rgba(27,75,140,.28);
  --wb-cifra-azul:#1D4ED8;   --wb-cifra-azul-tinte:rgba(29,78,216,.12); /* 17-sep: cifras en pesos (COP), más vivo que el azul plano de marca, que sigue igual en botones y bordes */

  /* ── Color · semántica de estado (independiente del acento) ── */
  --wb-ok:#15803D;           --wb-ok-tinte:rgba(21,128,61,.12);      /* al día · ingreso · positivo · éxito */
  --wb-ambar:#8A5A00;        --wb-ambar-tinte:rgba(138,90,0,.14);   /* pendiente · parcial · día abierto · atención */
  --wb-oxido:#C62828;        --wb-oxido-osc:#9E1E1E;                /* vencido · salida · negativo · error · peligro */
  --wb-oxido-tinte:rgba(198,40,40,.12); --wb-oxido-foco:rgba(198,40,40,.25);

  /* ── Color · líneas y capas ──────────────────────────── */
  --wb-linea:#D3D8DE;        /* reglas finas (dentro de paneles) */
  --wb-linea-fuerte:#15181C; /* reglas de 1.5px */
  --wb-malla:rgba(21,24,28,.065);
  --wb-velo:rgba(21,24,28,.55);
  --wb-sombra-hoja:0 -8px 24px rgba(21,24,28,.12); /* única sombra del sistema: hoja modal móvil */

  /* ── Tipografía ──────────────────────────────────────── */
  --wb-f-titulo:'Chakra Petch','Archivo',system-ui,sans-serif;                 /* títulos, marca, botones */
  --wb-f-ui:'Archivo',system-ui,'Helvetica Neue',Arial,sans-serif;              /* interfaz y texto */
  --wb-f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;  /* montos, tablas, rótulos */

  /* ── Escala tipográfica (16px = 1rem) ────────────────── */
  --wb-t-xs:.72rem;      /* 11.5 · rótulos mono */
  --wb-t-sm:.8125rem;    /* 13   · ayudas, metadatos */
  --wb-t-base:1rem;      /* 16   · mínimo en móvil (sin zoom iOS) */
  --wb-t-md:1.0625rem;   /* 17   · texto de lectura */
  --wb-t-lg:1.25rem;     /* 20   · h2 */
  --wb-t-xl:1.5rem;      /* 24   · h1 de pantalla */
  --wb-t-2xl:1.75rem;    /* 28   · marca en login */
  --wb-t-monto:1.5rem;   /* 24   · monto en tarjeta */
  --wb-t-monto-xl:2.125rem; /* 34 · saldo principal */
  --wb-lh:1.5;
  --wb-lh-ajustado:1.2;

  /* ── Espaciado ───────────────────────────────────────── */
  --wb-s1:4px; --wb-s2:8px; --wb-s3:12px; --wb-s4:16px;
  --wb-s5:20px; --wb-s6:24px; --wb-s7:32px; --wb-s8:48px;

  /* ── Forma ───────────────────────────────────────────── */
  --wb-radio:0;              /* esquinas rectas: lenguaje de plano */
  --wb-borde:1.5px;
  --wb-borde-fino:1px;
  --wb-tap:44px;             /* objetivo táctil mínimo */
  --wb-tap-sm:36px;          /* solo controles secundarios en escritorio */
  --wb-foco:2px solid var(--wb-plano);
  --wb-foco-offset:2px;

  /* ── Capas ───────────────────────────────────────────── */
  --wb-z-topbar:100; --wb-z-nav:100; --wb-z-fab:90;
  --wb-z-drawer:150; --wb-z-modal:200; --wb-z-toast:300;

  /* ── Movimiento (casi nulo) ──────────────────────────── */
  --wb-dur:150ms;
  --wb-ease:cubic-bezier(.2,0,0,1);

  /* ── Medidas de layout ───────────────────────────────── */
  --wb-topbar-h:56px;
  --wb-nav-h:60px;
  --wb-safe-b:env(safe-area-inset-bottom,0px);
  --wb-ancho-estrecho:560px;   /* apps de una columna (caja) */
  --wb-ancho-ancho:1140px;     /* apps de escritorio (appc) */
}