/* ============================================================
   tokens.css — CRM THIS IS BP · Dirección D «Mac nativo»
   iOS HIG en mobile; la variante desktop hereda estos tokens.
   Acentos: verde/rojo/naranja del sistema iOS + azul #0071e3
   (azul de marketing de apple.com, heredado del tablero de
   Performance — NO es el systemBlue #007AFF; decisión de familia).
   Regla de la casa: el tono vivo pinta gráficos/dots/íconos;
   la variante -text (AA) pinta todo lo que se lee.
   Fuente: docs/design/sistema-visual.md §2 (contrato).
   ============================================================ */

:root {
  /* ---- Acentos vivos (gráficos, dots, íconos — NO texto) ---- */
  --blue:   #0071e3;   /* acción / interactivo — azul de familia */
  --green:  #34c759;   /* ok / cobrado / al día                  */
  --red:    #ff3b30;   /* urgencia / vencido crítico             */
  --orange: #ff9500;   /* warning / atrasado                     */

  /* ---- Variantes de TEXTO (AA sobre surface y sobre su soft) ---- */
  --blue-text:   #0060c2;   /* 6,1:1 */
  --green-text:  #1d7a33;   /* 5,4:1 */
  --red-text:    #d70015;   /* 5,4:1 */
  --orange-text: #ad5700;   /* 5,1:1 */

  /* ---- Fondo SÓLIDO con texto/ícono blanco encima (2026-09-01) ----
     `--blue` vale #2997ff en oscuro (correcto para gráficos/dots/íconos sueltos — ver el
     encabezado de este archivo), y blanco encima de ese tono da 3,02:1: falla AA de texto
     (4,5:1). `--blue-solid` es el token para botones/superficies que llevan texto o ícono
     BLANCO encima: mismo valor #0071e3 en los dos temas — NO se redefine en el bloque
     `@media (prefers-color-scheme: dark)` de abajo, igual que los tokens de espaciado/radio,
     que tampoco cambian con el theme (se declara una sola vez y se hereda). */
  --blue-solid: #0071e3;   /* 4,70:1 con texto blanco, en claro Y en oscuro */

  /* ---- Softs 10% (chips, discos, fondos tinteados) ---- */
  --blue-soft:   rgba(0,113,227,.10);
  --green-soft:  rgba(52,199,89,.10);
  --red-soft:    rgba(255,59,48,.10);
  --orange-soft: rgba(255,149,0,.10);
  --gray-soft:   rgba(120,120,128,.12);   /* fill de segmented iOS */

  --blue-border:   rgba(0,113,227,.22);
  --green-border:  rgba(52,199,89,.25);
  --red-border:    rgba(255,59,48,.22);
  --orange-border: rgba(255,149,0,.28);

  /* ---- Semáforo BCRA (decisión de Fernando 2026-08-30: 1 verde · 2 amarillo · 3 rojo ·
     4+ bordó bien oscuro — "negro no"). Amarillo = familia nueva estilo soft (el texto NO es
     amarillo puro: sobre blanco no llega a AA, se oscurece como --orange-text). Bordó = chip
     RELLENO (fondo sólido + texto blanco, 11,9:1): el peor escalón se distingue del rojo por
     peso, no solo por tinte. ---- */
  --yellow-text:   #8a6500;               /* 5,4:1 sobre blanco */
  --yellow-soft:   rgba(255,204,0,.16);
  --yellow-border: rgba(255,204,0,.45);
  --bordo-bg:      #6d1220;

  /* ---- Toasts (fondo cápsula llena — NO son --green-text/--red-text) ----
     Hallazgo 2.1, auditoría 2026-08-25: el toast pintaba blanco sobre
     --green-text/--red-text, que son variantes de TEXTO calibradas para leerse
     SOBRE un fondo claro — usadas como FONDO en oscuro dan 1,8:1 y 2,8:1 (piso
     4,5:1). Tokens propios, medidos con la fórmula WCAG: claro = exactamente lo
     que ya se veía (5,4:1), oscuro = sólido oscuro nuevo (6,7:1 / 7,8:1). */
  --toast-ok-bg:  #1d7a33;
  --toast-bad-bg: #d70015;
  --toast-warn-bg: #8a6500;   /* 5,33:1 con texto blanco (medido) */
  --toast-fg:     #fff;

  /* ---- Superficies (iOS grouped, claro) ---- */
  --bg-app:        #f2f2f7;   /* el gris "Ajustes"            */
  --surface:       #ffffff;   /* cards, grupos, tablas        */
  --surface-2:     #f5f5f7;   /* hover, botón neutro          */
  --surface-3:     #ededf0;   /* :active                      */
  --border:        #e5e5e7;
  --border-strong: #d2d2d7;
  --hairline: rgba(60,60,67,.29);  /* UIColor.separator light  */

  /* ---- Texto (4 pasos) ---- */
  --text-1: #1d1d1f;   /* títulos, valores, nombres     16,8:1 */
  --text-2: #515154;   /* cuerpo                         7,9:1 */
  --text-3: #6e6e73;   /* captions, headers de sección   5,1:1 */
  --text-4: #aeaeb2;   /* SOLO placeholder/decorativo — no texto informativo */

  /* ---- Aging de cobranza (status ramp — ver §6.1; leyenda SIEMPRE) ---- */
  --age-1: #b4b4bb;   /* 0–30 d  · recién vencido */
  --age-2: #ff9500;   /* 31–60 d · warning        */
  --age-3: #ff3b30;   /* 61–90 d · serio          */
  --age-4: #a8221a;   /* +90 d   · crítico (7,2:1 — sirve también como texto) */

  /* ---- Tipografía ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter var", "Inter", "Segoe UI", sans-serif;
  --fs-large-title: 34px;  /* Hoy — solo mobile appbar        */
  --fs-title-2:     24px;  /* títulos de vista mobile          */
  --fs-title-desk:  28px;  /* h1 de topbar desktop             */
  --fs-hero:        30px;  /* montos hero (saldo, tiles desk)  */
  --fs-name:        16px;  /* nombre en tarjeta                */
  --fs-body-lg:     15px;  /* motivo, filas, inputs            */
  --fs-body:        14px;  /* base, botones                    */
  --fs-sm:          13px;  /* secundario, tablas               */
  --fs-caption:     12px;  /* captions, uppercase              */
  --fs-chip:        11px;  /* chips, headers de tabla          */
  --fs-micro:       10px;  /* labels de tab bar                */

  /* ---- Espaciado (base 4 px) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- Radios (esquinas continuas generosas) ---- */
  --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* ---- Sombras finas multicapa (nunca un solo blur gordo) ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);   /* reposo  */
  --sh-2: 0 4px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);  /* hover   */
  --sh-3: 0 12px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05); /* elevado */
  --sh-seg: 0 1px 4px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.04);   /* thumb segmented */
  --sh-focus: 0 0 0 3px rgba(0,113,227,.30);

  /* ---- Materiales (vibrancy) ---- */
  --mat-blur: saturate(1.8) blur(20px);
  --mat-appbar: rgba(242,242,247,.80);
  --mat-tabbar: rgba(255,255,255,.78);

  /* ---- Z-layers ---- */
  --z-content: 1;
  --z-bar:     20;   /* appbar + tab bar          */
  --z-tooltip: 30;   /* tooltips de gráficos      */
  --z-toast:   40;
  --z-modal:   60;   /* reservado (no hay en M1)  */
  /* Un desplegable (type-ahead de cliente/localidad) puede abrirse DENTRO de un modal, así que
     va por encima de él (2026-09-01): el buscador de cliente de #/problemas vive adentro de la
     hoja de alta, y con `--z-tooltip` (30) quedaba TAPADO por el sheet (60) -- la lista existía,
     la geometría decía "visible" y `elementFromPoint` devolvía el contenedor de atrás, o sea
     que no se podía elegir cliente. Mismo defecto que la UI flotante del mapa detrás de los
     panes de Leaflet: se verifica PINTURA, no rects. */
  --z-popover: 70;

  /* ---- Layout ---- */
  --touch: 44px;                     /* target táctil mínimo          */
  --content-w: min(560px, 100vw);    /* columna mobile                */
  --nav-h: 64px;                     /* tab bar mobile                */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --bp-desk: 900px;                  /* ≥900px = layout con sidebar (referencia; en CSS va literal en @media) */
  --sidebar-w: 232px;
  --side-bg: #ececf1;                /* gris sidebar macOS            */
  --pad-desk: 28px;                  /* padding de contenido desktop  */
  --feed-max: 640px;                 /* techo columna de trabajo Hoy  */
  --rail-w: 300px;                   /* rail de contexto — Hoy Y Ficha comparten ancho (mismo
                                         componente visual, aunque el mockup B de Ficha proponía
                                         276px propios: se unifica a 300 para que los rails no
                                         difieran de vista a vista, "extensión no rediseño") */
  /* Techo de la columna de la Ficha (Variante B, 2026-08-25): Fernando venía con "es
     angosta, sobra espacio en los laterales" — el viejo cap de 640px era el ancho pensado
     para mobile que sobrevivió a desktop sin que nadie lo cuestionara. Token PROPIO: no se
     toca --feed-max (lo sigue usando Hoy, es otra pasada). */
  --feed-max-ficha: 850px;
  --table-max: 1104px;               /* techo de tablas densas (Tablero — no tocar acá) */
  /* Techo fluido SOLO del listado de Clientes (Variante A, 2026-08-24): suelta el techo fijo
     y usa el espacio lateral sobrante. Token propio para no arrastrar al Tablero, que comparte
     --table-max con .tiles4/.duo/.tablero-col (otra pasada). */
  --table-max-clientes: min(calc(100vw - var(--sidebar-w) - var(--pad-desk) * 2), 1540px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 120ms; --t-med: 220ms;
}

/* ============================================================
   MODO OSCURO — grises elevated de iOS. Misma capa doble:
   vivos dark para gráficos/dots, variantes accesibles dark de
   Apple para todo lo que se lee (AA sobre #2c2c2e).
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-app:    #1c1c1e;   /* systemGroupedBackground · elevated  */
    --surface:   #2c2c2e;   /* secondarySystemGroupedBackground    */
    --surface-2: #3a3a3c;
    --surface-3: #48484a;
    --border:        #3a3a3c;
    --border-strong: #48484a;
    --hairline: rgba(84,84,88,.65);  /* UIColor.separator dark */

    --text-1: #f5f5f7;
    --text-2: rgba(235,235,245,.72);
    --text-3: rgba(235,235,245,.52);
    --text-4: rgba(235,235,245,.28);

    --blue:   #2997ff;   /* azul de familia, variante dark apple.com */
    --red:    #ff453a;  --green: #30d158;  --orange: #ff9f0a;
    --blue-text:   #409cff;
    --green-text:  #30db5b;
    --red-text:    #ff6961;
    --orange-text: #ffb340;

    --blue-soft:   rgba(10,132,255,.18);
    --green-soft:  rgba(48,209,88,.16);
    --red-soft:    rgba(255,69,58,.16);
    --orange-soft: rgba(255,159,10,.16);
    --gray-soft:   rgba(120,120,128,.26);
    --blue-border:   rgba(64,156,255,.34);
    --green-border:  rgba(48,219,91,.34);
    --red-border:    rgba(255,105,97,.34);
    --orange-border: rgba(255,179,64,.36);

    /* Semáforo BCRA dark: amarillo se aclara como los otros -text; el bordó del chip relleno
       sube apenas de tono para no fundirse con el fondo oscuro (blanco encima: 8,6:1). */
    --yellow-text:   #ffd426;
    --yellow-soft:   rgba(255,214,10,.16);
    --yellow-border: rgba(255,214,10,.38);
    --bordo-bg:      #8a1e2c;

    /* Toasts dark: sólidos oscuros propios, NO el flip de --green-text/--red-text
       de arriba (esos son claros a propósito, para leerse como texto). */
    --toast-ok-bg:  #0e6b2a;   /* 6,7:1 con texto blanco */
    --toast-bad-bg: #a3160f;   /* 7,8:1 con texto blanco */
    --toast-warn-bg: #5c4200;  /* 9,4:1 con texto blanco (medido) */

    /* Aging ramp dark — pasos propios, validados (§6.1), NO el flip del light */
    --age-1: #8e8e96;
    --age-2: #ff9f0a;
    --age-3: #ff453a;
    --age-4: #b3261e;

    --mat-appbar: rgba(28,28,30,.78);
    --mat-tabbar: rgba(28,28,30,.78);
    --side-bg: #232325;

    --sh-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.20);
    --sh-2: 0 4px 12px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
    --sh-3: 0 12px 32px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.30);
    --sh-focus: 0 0 0 3px rgba(64,156,255,.40);
  }
}