/* ══════════════════════════════════════════════════════════════════════════
   tokens.css · La unica fuente de verdad del sistema visual de la plataforma
   interna de The Grow Mode (CRM, Scanner, Agenda panel, Pitch) y de las tres
   paginas que ve el lead (Agenda, Gestion, Grow Way).
   ──────────────────────────────────────────────────────────────────────────
   REGLAS
   · Aqui viven VALORES, no componentes. Ningun selector salvo :root y los dos
     temas. Los componentes van en cada pagina (y mas adelante en assets/).
   · Se enlaza ANTES del <style> de cada pagina, con ?v= (lo pone
     herramientas/sellar-version.mjs, igual que shell.css). Asi el :root que
     cada pagina aun conserve GANA por orden mientras esa pagina no migre.
   · Dos temas sobre la misma base:
       <html data-tema="interno">  denso, rapido, morado = "estas aqui"
       <html data-tema="marca">    respirado, morado = marca
     Sin atributo se comporta como "interno".
   · Paleta de marca: 5 valores (CLAUDE.md). Los semanticos (ok/aviso/error/
     info) son una paleta APARTE de 4, aprobada en la fase 2 del trabajo de
     unificacion (ago 2026), porque sin ellos no hay estados accesibles.
   · Contraste medido sobre --bg #0E0E14 (WCAG 2.1, texto normal 4.5:1,
     grande e iconos 3:1). Cada valor de texto lleva su ratio al lado.
   · Los nombres antiguos (--gp2, --dark2, --muted, --r1, --sh2, --space-8…)
     se mantienen como ALIAS al final. No se borran hasta que la ultima pagina
     deje de usarlos. No definir un token nuevo con un nombre viejo.
   · Los breakpoints NO pueden ser variables CSS dentro de @media. Estan
     documentados aqui y expuestos como --bp-* solo para que JS los lea con
     getComputedStyle. En CSS se escriben a mano, SIEMPRE con esta forma:
       @media (max-width:560px)   telefono estrecho
       @media (max-width:860px)   movil: lateral -> barra inferior (corte de la carcasa)
       @media (min-width:861px)   escritorio
       @media (max-width:1100px)  escritorio estrecho / tablet horizontal
       @media (orientation:landscape) and (max-height:500px)   movil tumbado
       @media (hover:hover) and (pointer:fine)                 solo raton
       @media (prefers-reduced-motion:reduce)
     Cualquier otro valor lleva un comentario al lado que lo justifique.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFIA AUTOALOJADA ─────────────────────────────────────────────
   Barlow, subconjunto latino (cubre ñ, acentos y ¿¡), licencia OFL. Son los
   MISMOS woff2 que servia Google Fonts (v13), guardados en assets/fonts/ el
   18-ago-2026: mismo peso de descarga, una conexion menos, sin @import
   bloqueante y funciona sin red. Las paginas que enlazan tokens.css NO deben
   llevar ya el @import de fonts.googleapis.com. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url("fonts/barlow-300.woff2") format("woff2");}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-400.woff2") format("woff2");}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-500.woff2") format("woff2");}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-700.woff2") format("woff2");}
@font-face{font-family:'Barlow';font-style:normal;font-weight:900;font-display:swap;src:url("fonts/barlow-900.woff2") format("woff2");}
@font-face{font-family:'Barlow';font-style:italic;font-weight:300;font-display:swap;src:url("fonts/barlow-300i.woff2") format("woff2");}

:root{
  /* ── PALETA DE MARCA (5, CLAUDE.md) ─────────────────────────────────── */
  --bg:    #0E0E14;   /* fondo principal */
  --bg2:   #13131f;   /* fondo secundario, barra lateral, tarjetas */
  --acc:   #9A57F5;   /* morado. Como TEXTO sobre --bg da 4.6:1 (pasa justo) */
  --acc2:  #6D28D9;   /* morado oscuro. Blanco encima: 6.9:1 */
  --acc3:  #D3A4FF;   /* morado claro. Sobre --bg: 9.6:1. Texto oscuro encima: ok */

  /* ── SUPERFICIES derivadas (grises de la misma familia, no son paleta) ─ */
  --bg3:   #1a1a2e;   /* tercer nivel (hover de fila, cabecera pegajosa) */
  --s2:    #191926;   /* tarjeta sobre --bg2 */
  --s3:    #20202e;   /* tarjeta destacada / campo con foco */

  /* ── ACENTO con alfa (para fondos y bordes de lo activo) ─────────────── */
  --acc-bg:  rgba(154,87,245,0.10);
  --acc-bd:  rgba(154,87,245,0.28);
  --acc-bg2: rgba(154,87,245,0.07);   /* mas suave: filas, chips inactivos */
  --acc-bd2: rgba(154,87,245,0.16);
  /* Relleno del boton PRIMARIO. Blanco sobre --acc solo da 4.15:1 (no pasa
     AA en texto normal); sobre este degradado pasa en los dos extremos
     (5.7:1 y 6.9:1). #7C3AED es un tinte intermedio de la propia paleta
     (entre --acc y --acc2), no un sexto color. */
  --acc-fill: linear-gradient(135deg,#7C3AED,var(--acc2));
  --acc-fill-flat: var(--acc2);
  --acc-halo: 0 10px 26px -12px rgba(154,87,245,0.85);   /* UN halo, no cinco */

  /* ── SEMANTICOS (4, paleta aparte) ───────────────────────────────────── */
  --ok:    #4ade80;   /* 11.0:1 */   --ok-bg:   rgba(74,222,128,0.12);  --ok-bd:   rgba(74,222,128,0.30);
  --warn:  #fbbf24;   /* 11.6:1 */   --warn-bg: rgba(251,191,36,0.12);  --warn-bd: rgba(251,191,36,0.30);
  --err:   #f87171;   /*  7.0:1 */   --err-bg:  rgba(248,113,113,0.12); --err-bd:  rgba(248,113,113,0.30);
  --info:  #93c5fd;   /* 11.5:1 */   --info-bg: rgba(147,197,253,0.12); --info-bd: rgba(147,197,253,0.30);
  /* Rosa: lo usa el CRM para "seguimiento". Se conserva como color de dato,
     no de estado. */
  --pk:    #f472b6;   --pk-bg: rgba(244,114,182,0.10);  --pk-bd: rgba(244,114,182,0.28);

  /* ── PALETA DE DATOS DEL EMBUDO (extension, no es paleta de marca) ─────
     Los 10 estados del CRM (.st-*) se pintan como una rampa continua
     azul → indigo → morado → violeta → rosa → magenta → ambar → naranja →
     verde → gris. Seis salen de arriba (--info, --acc, --pk, --warn, --ok y
     el gris); estos cuatro son los peldanos intermedios, y solo se usan para
     DATOS (badges, graficas), nunca para botones ni texto de interfaz.
     Contraste del texto sobre --bg: indigo 10.6:1 · violeta 8.1:1 ·
     magenta 7.4:1 · naranja 8.5:1. */
  --dato-indigo:  #a5b4fc; --dato-indigo-bg:  rgba(99,102,241,0.14);  --dato-indigo-bd:  rgba(99,102,241,0.30);
  --dato-violeta: #c084fc; --dato-violeta-bg: rgba(168,85,247,0.15);  --dato-violeta-bd: rgba(168,85,247,0.32);
  --dato-magenta: #f472b6; --dato-magenta-bg: rgba(236,72,153,0.14);  --dato-magenta-bd: rgba(236,72,153,0.30);
  --dato-naranja: #fbbf24; --dato-naranja-bg: rgba(245,158,11,0.15);  --dato-naranja-bd: rgba(245,158,11,0.32);

  /* ── TEXTO (todos pasan AA sobre --bg y --bg2) ───────────────────────── */
  --tx:    #ffffff;                    /* 19:1  titulos, cuerpo */
  --tx-2:  rgba(255,255,255,0.72);     /*  9.6:1  cuerpo secundario */
  --tx-3:  rgba(255,255,255,0.55);     /*  6.2:1  etiquetas, metadatos ("muted") */
  --tx-4:  rgba(255,255,255,0.40);     /*  3.8:1  SOLO decorativo o texto >= 24px / iconos. NUNCA texto normal */
  --tx-ph: rgba(255,255,255,0.50);     /*  5.3:1  placeholder */
  --tx-on-acc: #ffffff;                /* texto sobre --acc-fill */
  --tx-on-acc3: #1a0b2e;               /* texto sobre --acc3 (10.7:1) */

  /* ── BORDES ──────────────────────────────────────────────────────────── */
  --bd:    rgba(255,255,255,0.07);     /* separadores, tarjeta en reposo */
  --bd2:   rgba(255,255,255,0.14);     /* controles, tarjeta en hover */
  --bd3:   rgba(255,255,255,0.24);     /* campo con foco (3:1 sobre --bg2: si) */
  --bd-w:  0.5px;                      /* grosor de linea de la plataforma */

  /* ── TIPOGRAFIA ──────────────────────────────────────────────────────── */
  --font:  'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Escala de 8 pasos. --t0 es el cuerpo INTERNO; el tema marca sube uno. */
  --t-1: 11px;   /* micro-etiquetas (con letter-spacing) */
  --t0:  13px;   /* cuerpo denso */
  --t1:  14px;   /* cuerpo */
  --t2:  16px;   /* cuerpo de marca, inputs en movil (evita zoom de iOS) */
  --t3:  20px;   /* subtitulo */
  --t4:  24px;   /* titulo de seccion */
  --t5:  32px;   /* titulo de pagina */
  --t6:  clamp(36px, 5vw, 52px);   /* display (solo tema marca) */
  --w-light: 300;  --w-reg: 400;  --w-med: 500;  --w-bold: 700;  --w-black: 900;
  --lh-tight: 1.15;  --lh: 1.45;  --lh-loose: 1.6;
  --ls-caps: .12em;                 /* eyebrows en mayusculas */

  /* ── ESPACIADO (4pt; el CRM ya lo usaba como --space-N) ──────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;  --sp-9: 48px;  --sp-10: 64px;

  /* ── RADIOS (CLAUDE.md: 12 tarjeta · 16 destacada · 999 pildora) ─────── */
  --r-s:   8px;     /* controles: botones, inputs, chips cuadrados */
  --r:     12px;    /* tarjetas */
  --r-l:   16px;    /* tarjetas destacadas, hojas, modales */
  --r-xl:  20px;    /* solo el panel de la agenda lo usa (era --r4) */
  --r-pill: 999px;

  /* ── ELEVACION (3 niveles + brillo superior) ─────────────────────────── */
  --sh1:  0 1px 2px rgba(0,0,0,.4);
  --sh2:  0 10px 24px -18px rgba(0,0,0,.9), 0 2px 6px -3px rgba(0,0,0,.5);
  --sh3:  0 30px 70px -40px rgba(0,0,0,.95), 0 4px 14px -8px rgba(0,0,0,.6);
  --lift: inset 0 1px 0 rgba(255,255,255,.055);

  /* ── CAPAS (z-index). Los de la carcasa (80/70) NO se cambian. ───────── */
  --z-pegajoso: 20;   /* cabeceras sticky dentro del contenido */
  --z-desplegable: 50;
  --z-barra-inferior: 70;   /* .shell-bottom / .bottom-nav */
  --z-lateral: 80;          /* .shell / .sidebar */
  --z-hoja: 90;             /* bottom sheets, cajones */
  --z-modal: 100;
  --z-toast: 110;
  --z-acceso: 120;          /* pantalla de login: tapa todo, incluida la barra */

  /* ── TACTIL ──────────────────────────────────────────────────────────── */
  --tap:      44px;   /* minimo tactil (WCAG 2.5.5 / Apple HIG) */
  --tap-fine: 36px;   /* con raton (hover:hover and pointer:fine) en tema interno */
  --tap-gap:  8px;    /* separacion minima entre dos controles tactiles */

  /* ── MOVIMIENTO ──────────────────────────────────────────────────────── */
  --ease:  cubic-bezier(.16,1,.3,1);
  --dur-1: .14s;    /* hover, foco, color */
  --dur-2: .22s;    /* transform, apertura de paneles */
  --dur-3: .35s;    /* entradas de pantalla, hojas */

  /* ── BREAKPOINTS (solo lectura desde JS; en CSS se escriben a mano) ──── */
  --bp-estrecho: 560px;
  --bp-movil:    860px;
  --bp-estrecho-esc: 1100px;

  /* ── FOCO VISIBLE (unico en toda la plataforma) ──────────────────────── */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc3);
  --focus-outline: 2px solid var(--acc3);

  /* ══ VALORES DE TEMA (los redefinen los dos temas de abajo) ══════════ */
  --t-body:    var(--t0);     /* tamano de cuerpo */
  --tap-base:  var(--tap);    /* altura minima de control */
  --pad-card:  var(--sp-4);   /* relleno de tarjeta */
  --pad-page:  var(--sp-5);   /* relleno lateral de pagina */
  --gap:       var(--sp-3);   /* hueco entre elementos hermanos */
  --r-card:    var(--r);
  --acc-uso:   var(--acc-bg); /* como se pinta "lo activo": fondo suave (interno) */
}

/* ── TEMA INTERNO (por defecto): denso, morado solo para "estas aqui" ──── */
:root[data-tema="interno"]{
  --t-body:   var(--t0);
  --pad-card: var(--sp-4);
  --pad-page: var(--sp-5);
  --gap:      var(--sp-3);
}
/* Con raton, los controles internos pueden bajar a 36. En tactil se quedan
   en 44 aunque el tema sea interno (Gabriela usa el CRM desde el iPhone). */
@media (hover:hover) and (pointer:fine){
  :root[data-tema="interno"]{ --tap-base: var(--tap-fine); }
}

/* ── TEMA MARCA (agenda, gestion, grow way): respirado, morado = marca ──── */
:root[data-tema="marca"]{
  --t-body:   var(--t2);
  --tap-base: var(--tap);        /* siempre 44, con raton tambien */
  --pad-card: var(--sp-6);
  --pad-page: var(--sp-6);
  --gap:      var(--sp-4);
  --r-card:   var(--r-l);
  --acc-uso:  var(--acc-fill);
}
@media (max-width:560px){
  :root[data-tema="marca"]{ --pad-card: var(--sp-5); --pad-page: var(--sp-4); }
}

/* ── ALIAS a los nombres antiguos (compatibilidad; NO usar en codigo nuevo) ─
   Cada pagina que migre borra su :root y estos alias la sostienen. shell.css
   ya lee var(--dark, …), var(--gp2, …), etc., asi que la carcasa toma los
   tokens sola. */
:root{
  --gp1: var(--acc2);  --gp2: var(--acc);  --gp3: var(--acc3);
  --gd: var(--acc-bg); --gb: var(--acc-bd); --gq: var(--acc-bg2); --gqb: var(--acc-bd2);
  --pk-d: var(--pk-bg); --pk-b: var(--pk-bd);
  --dark: var(--bg);   --dark2: var(--bg2);  --dark3: var(--bg3);  --s1: var(--bg2);
  --border: var(--bd); --border2: var(--bd2);
  --muted: var(--tx-3);  --dim: var(--tx-2);  --bright: var(--tx);  --placeholder: var(--tx-ph);
  --green: var(--ok);  --amber: var(--warn);  --red: var(--err);  --blue: var(--info);
  --r1: var(--r-s);  --r2: var(--r);  --r3: var(--r-l);  --r4: var(--r-xl);
  --space-2: 2px;  --space-4: var(--sp-1);  --space-6: 6px;  --space-8: var(--sp-2);
  --space-10: 10px; --space-12: var(--sp-3); --space-14: 14px; --space-16: var(--sp-4);
  --space-20: var(--sp-5); --space-24: var(--sp-6); --space-32: var(--sp-7);
}
