/* El Legado · tokens del sistema de diseño (referencia: DESIGN_SYSTEM_REFERENCE.md).
   La tinta es el navy de la marca (#081e30 = hsl(207 71% 11%)): marca lo activo y lo importante.
   La interfaz vive en neutros fríos; los datos, en azules de la misma familia; los estados, en pastillas.
   Escalas cerradas (criterio de la skill iastudio-ui): todo valor sale de aquí. */

:root {
  /* Navy de la marca, del 50 al 900 (referencia; la interfaz usa los roles de abajo). */
  --navy-50: hsl(210 25% 95%);
  --navy-100: hsl(210 27% 91%);
  --navy-200: hsl(210 24% 83%);
  --navy-300: hsl(209 21% 64%);
  --navy-400: hsl(209 22% 50%);
  --navy-500: hsl(209 35% 35%);
  --navy-600: hsl(208 45% 28%);
  --navy-700: hsl(208 59% 22%);
  --navy-800: hsl(208 65% 16%);
  --navy-900: hsl(207 71% 11%);

  /* Neutros fríos: el gris de la interfaz (nunca gris 0 % ni negro puro). */
  --gray-0: hsl(0 0% 100%);
  --gray-50: hsl(216 28% 96%);
  --gray-100: hsl(216 24% 93%);
  --gray-150: hsl(216 20% 90%);
  --gray-200: hsl(216 17% 84%);
  --gray-300: hsl(216 14% 70%);
  --gray-400: hsl(216 12% 56%);
  --gray-500: hsl(214 13% 42%);
  --gray-600: hsl(214 16% 34%);
  --gray-700: hsl(212 22% 25%);

  /* Azul de datos, de la misma familia que la tinta. 500 solo en gráficos (4.4:1); 600 para texto. */
  --blue-50: hsl(208 85% 97%);
  --blue-100: hsl(208 80% 93%);
  --blue-200: hsl(208 75% 85%);
  --blue-300: hsl(207 70% 72%);
  --blue-500: hsl(208 72% 46%);
  --blue-600: hsl(208 75% 38%);
  --blue-700: hsl(208 78% 30%);

  /* Atmósfera: champaña muy claro, solo en degradados de fondo. */
  --sand-50: hsl(40 60% 97%);
  --sand-100: hsl(40 55% 93%);

  /* Estados. Texto y badges en 700/800 (≥ 4.5:1); puntos y barras en 500 (≥ 3:1 sobre blanco). */
  --good-50: hsl(145 45% 96%);
  --good-100: hsl(145 50% 91%);
  --good-500: hsl(148 55% 38%);
  --good-700: hsl(150 62% 26%);
  --good-800: hsl(152 66% 19%);
  --watch-50: hsl(40 80% 96%);
  --watch-100: hsl(40 85% 90%);
  --watch-500: hsl(36 85% 42%);
  --watch-700: hsl(30 80% 32%);
  --watch-800: hsl(28 82% 24%);
  --bad-50: hsl(8 80% 97%);
  --bad-100: hsl(8 80% 93%);
  --bad-500: hsl(8 72% 52%);
  --bad-700: hsl(6 70% 40%);
  --bad-800: hsl(4 72% 30%);

  /* Roles: dónde se usa cada color. La interfaz usa estos nombres, no las rampas. */
  --canvas: var(--gray-100);        /* lienzo, detrás del marco */
  --frame: var(--gray-0);           /* marco: barra lateral */
  --well: var(--gray-50);           /* pozo donde viven las tarjetas */
  --surface: var(--gray-0);         /* tarjeta */
  --surface-2: var(--gray-50);      /* mosaicos, notas y hover de filas */
  --fill: var(--gray-100);          /* pistas, chips y pastillas neutras */
  --fill-hover: var(--gray-150);
  --line: var(--gray-150);          /* bordes y divisores de estructura */
  --line-soft: var(--gray-100);     /* divisores entre filas */
  --line-strong: var(--gray-200);   /* bordes de campos y botones de contorno */
  --line-hover: var(--gray-300);    /* el mismo borde al pasar el cursor */
  --text: var(--navy-900);
  --text-2: var(--gray-500);        /* secundario: 5.6:1 sobre blanco, 4.7:1 sobre --fill */
  --text-3: var(--gray-400);        /* solo íconos y placeholder (3.4:1): nunca información */
  --text-chip: var(--gray-700);     /* texto sobre pastillas neutras */
  --ink: var(--navy-900);           /* tinta: lo activo y el botón primario */
  --ink-hover: hsl(207 58% 18%);
  --ink-soft: hsl(207 45% 26%);     /* rayado y círculos sobre tinta */
  --on-ink: hsl(0 0% 100%);
  --on-ink-2: hsl(207 30% 78%);     /* secundario sobre tinta (9.9:1) */
  --range: var(--navy-100);         /* banda del rango elegido en el calendario (entre los dos días en tinta) */
  --focus: var(--blue-500);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
  --backdrop: hsl(207 71% 11% / 0.5);
  --inset-field: inset 0 1px 2px hsl(207 50% 15% / 0.05);   /* campo hundido */
  --ring-image: inset 0 0 0 1px hsl(207 50% 15% / 0.08);    /* borde interior de miniaturas */
  /* Lo vacío, lo proyectado o lo que no está en foco se raya; nunca se pinta de gris plano. */
  /* Chevron de los selectores (trazo en --text-2; una url no puede leer variables). */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235D6979' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --hatch: repeating-linear-gradient(135deg, var(--gray-200) 0 1px, transparent 1px 6px);
  /* Atmósfera del lienzo y del héroe: dos tintes muy claros de tono cercano. */
  --atmosphere: radial-gradient(60% 80% at 0% 0%, var(--blue-50) 0%, transparent 70%),
                radial-gradient(50% 70% at 100% 0%, var(--sand-50) 0%, transparent 70%);


  /* Datos: rampa ordinal en el tono de la tinta, de la venta (oscuro) a lo más lejano (claro).
     ≥ 8 puntos de luminosidad entre vecinos; en hsl para que Chart.js los lea. */
  --data-1: hsl(207 71% 11%);
  --data-2: hsl(207 62% 21%);
  --data-3: hsl(208 64% 31%);
  --data-4: hsl(208 70% 41%);
  --data-5: hsl(208 72% 51%);
  --data-6: hsl(207 72% 61%);
  --data-7: hsl(206 70% 71%);
  --data-8: hsl(206 66% 80%);
  --data-9: hsl(206 60% 89%);
  --chart-grid: var(--gray-100);

  /* Un tono por tipo de anuncio, del más cercano a la venta (oscuro) al más lejano (claro). */
  --type-whatsapp: var(--data-1);
  --type-formularios: var(--data-2);
  --type-mensajes: var(--data-3);
  --type-trafico: var(--data-4);
  --type-video: var(--data-5);
  --type-visitas_perfil: var(--data-6);
  --type-seguidores: var(--data-7);
  --type-alcance: var(--data-8);
  --type-otros: var(--gray-300);

  /* Un tono por experto del equipo (su avatar en el chat, agente/expertos.py); la forma del cuerpo los distingue
     además del color. Todos ≥ 3:1 sobre --surface. */
  --experto-coordinador: var(--data-1);
  --experto-anuncios: var(--data-4);
  --experto-clientes: var(--data-5);
  --experto-grupos: var(--data-3);
  --experto-automatizaciones: var(--data-2);

  /* Marcas: solo en sus logotipos (static/img/iconos.svg), nunca en texto ni en fondos. Todas ≥ 3:1 sobre blanco
     (WhatsApp, un poco más oscuro que el oficial para llegar). Sobre tinta, el logotipo toma el color del texto. */
  --marca-meta: hsl(213 96% 45%);
  --marca-facebook: hsl(217 100% 52%);
  --marca-instagram: hsl(335 100% 50%);
  --marca-whatsapp: hsl(142 70% 38%);
  --marca-messenger: hsl(217 100% 52%);
  --marca-kommo: hsl(252 60% 54%);
  --marca-n8n: hsl(346 79% 61%);

  /* Tipografía: una familia (Inter con tamaños ópticos) y la serifa solo en la marca.
     Cuerpo de 14px (panel denso) y escala 12 · 14 · 16 · 18 · 20 · 24 · 30 · 36 · 48. Pesos 400/500/600. */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --tracking-tight: -0.015em;      /* 18–24 px */
  --tracking-tighter: -0.03em;     /* ≥ 30 px */
  --tracking-caps: 0.08em;         /* MAYÚSCULAS */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --measure: 70ch;

  /* Espaciado: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Elevación: la profundidad sale de alternar fondos; la sombra es para lo que flota.
     tarjeta (1, casi plana con aro) < chip activo (2) < tooltip y menú (3) < aviso flotante (4) < modal (5). */
  --shadow-1: 0 1px 2px hsl(207 50% 15% / 0.06), 0 0 0 1px hsl(207 50% 15% / 0.04);
  --shadow-2: 0 1px 2px hsl(207 50% 15% / 0.06), 0 4px 12px -2px hsl(207 50% 15% / 0.08);
  --shadow-3: 0 12px 24px -6px hsl(207 50% 15% / 0.16), 0 2px 6px hsl(207 50% 15% / 0.06);
  --shadow-4: 0 20px 40px -10px hsl(207 50% 15% / 0.22), 0 4px 8px hsl(207 50% 15% / 0.05);
  --shadow-5: 0 32px 64px -16px hsl(207 71% 11% / 0.35);
  --shadow-frame: 0 1px 2px hsl(207 50% 15% / 0.04), 0 24px 60px -30px hsl(207 50% 15% / 0.18);
  /* Tinta elevada: el borde de arriba recibe la luz. */
  --shadow-ink: inset 0 1px 0 hsl(207 40% 32%), 0 1px 2px hsl(207 71% 11% / 0.4), 0 6px 14px -4px hsl(207 71% 11% / 0.35);

  /* Radios por rol: controles en píldora, campos 10, mosaicos 14, tarjetas y modales 20, marco 28. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Capas: lo que se encima, de menos a más (el modal va en la capa superior del navegador, sobre todo). */
  --z-encima: 1;      /* sobre su propio contenedor */
  --z-sticky: 2;      /* barra lateral */
  --z-flotante: 3;    /* controles sobre el lienzo de flujos */
  --z-menu: 20;       /* panel de la campana */
  --z-cajon: 30;      /* panel de Don Legado */

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;

  --gap: var(--space-4);
  --frame-gap: var(--space-3);       /* margen del marco y del pozo en pantallas amplias */
  /* Altura de los controles: todo lo que va en una misma fila (campo, selector, botón) mide lo mismo. */
  --control-height: 40px;
  --control-height-compact: 36px;
  /* Acciones dentro de una fila de tabla (ícono y botón chico juntos). */
  --control-height-row: 32px;
  --icon-button: 40px;
  --avatar-lg: 80px;  /* foto en el modal del perfil */
  /* Íconos (caja de 24, trazo de 1.75): tamaño según el texto que acompañan. */
  --icon-xs: 14px;   /* micro-etiquetas de 12px */
  --icon-sm: 16px;   /* texto de 14px: botones, chips, filas y pestañas */
  --icon-md: 20px;   /* tarjetas, menú y botones de ícono */
  --icon-lg: 24px;   /* estados vacíos */
  --icon-stroke: 1.75;
  --sidebar-width: 256px;
  /* Barra comprimida (solo íconos): 40px de ícono y botón + 16px a cada lado. */
  --sidebar-width-collapsed: 72px;
  --side-panel-width: 340px;

  /* Acceso (static/css/acceso.css): pared de marca en tinta y formulario. */
  --hatch-ink: repeating-linear-gradient(135deg, var(--ink-soft) 0 1px, transparent 1px 6px);  /* rayado sobre tinta */
  --atmosphere-ink: radial-gradient(70% 55% at 90% 0%, var(--ink-hover) 0%, transparent 70%);  /* luz desde arriba */
  --acceso-logo: 280px;
  --acceso-logo-compacto: 200px;
  --acceso-emblema: 560px;
  --acceso-emblema-compacto: 240px;
  --acceso-barras: 176px;
  --acceso-barras-compacto: 64px;
  --acceso-form: 360px;
  --duration-entrada: 640ms;   /* barras que suben al cargar */
  --stagger: 40ms;             /* desfase entre barras */
}