/* GENERADO desde sistema-diseno/css/tokens.css con herramientas/sincronizar_sistema.py. No se edita aquí. */
/* Kitsite · tokens del sistema de diseño (2026-10-24)
 * Salen de la landing (landing/css/tokens.css) y el onboarding: mismos nombres y mismos valores, más lo que el
 * producto necesita (estados, funcionales, densidades, modo oscuro, capas). La landing puede cargar este archivo
 * en lugar del suyo sin cambiar nada.
 *
 * Tres capas:
 *   1. Primitivos   --gris-*, --kit-*            valores crudos; no se usan directo en componentes (salvo los kits)
 *   2. Semánticos   --color-*, --estado-*        el papel de cada color; cambian con el tema
 *   3. Derivados    --anillo-*, --sombra-*       se recalculan en cada elemento con [data-tema]
 *
 * Temas: claro por defecto. [data-tema="oscuro"] en <html> o en cualquier contenedor (la consola y el constructor).
 * Densidad: cómoda por defecto. [data-densidad="densa"] para la consola (filas de 36–40 px). */

@font-face { font-family: "Google Sans Flex"; font-weight: 1 1000; font-display: swap; src: url("../assets/fuentes/GoogleSansFlex-web.woff2") format("woff2"); }
@font-face { font-family: "Fragment Mono"; font-weight: 400; font-display: swap; src: url("../assets/fuentes/FragmentMono-400.woff2") format("woff2"); }

:root {
  /* ── 1 · Primitivos: grises en OKLCH sin croma. El nombre sigue la escala de Tailwind; el comentario, la luminosidad ── */
  --gris-0: oklch(100% 0 0);       /* blanco de marca */
  --gris-50: oklch(98.5% 0 0);     /* #fafafa, el papel */
  --gris-100: oklch(96.5% 0 0);
  --gris-150: oklch(93.5% 0 0);
  --gris-200: oklch(91% 0 0);
  --gris-300: oklch(82% 0 0);
  --gris-400: oklch(68% 0 0);
  --gris-500: oklch(48% 0 0);
  --gris-600: oklch(38% 0 0);
  --gris-700: oklch(28% 0 0);
  --gris-750: oklch(24% 0 0);
  --gris-800: oklch(20.5% 0 0);    /* #161616, la tinta */
  --gris-900: oklch(17% 0 0);
  --gris-950: oklch(14.5% 0 0);

  /* Colores de los kits (marca/kitsite.md): solo viven en el cuadro del ícono de cada kit. Iguales en los dos temas */
  --kit-promo: oklch(66% 0.2 15);         /* coral */
  --kit-menu: oklch(70% 0.18 45);         /* mandarina */
  --kit-catalogo: oklch(76% 0.16 72);     /* ámbar */
  --kit-resenas: oklch(78% 0.16 92);      /* girasol */
  --kit-pedidos: oklch(68% 0.18 155);     /* esmeralda */
  --kit-cotizador: oklch(68% 0.13 185);   /* verde agua */
  --kit-idioma: oklch(70% 0.13 215);      /* cian */
  --kit-leads: oklch(65% 0.16 240);       /* cielo */
  --kit-bandeja: oklch(57% 0.2 262);      /* cobalto */
  --kit-agenda: oklch(55% 0.22 280);      /* índigo eléctrico */
  --kit-recordar: oklch(60% 0.21 300);    /* violeta */
  --kit-asistente: oklch(60% 0.22 322);   /* magenta */
  --kit-lealtad: oklch(66% 0.21 350);     /* rosa */
  --kit-kitsite: var(--gris-800);         /* grafito */
  --kit-medida: var(--gris-800);
  --color-sobre-kit: oklch(99% 0 0);      /* las piezas sobre el color del kit */
  --icono-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --sombra-kit: drop-shadow(0 1px 1px oklch(20% 0 0 / 0.18));   /* las piezas se despegan un poco del cuadro */

  /* Los sitios de ejemplo son estructuras alámbricas sin color: el sistema arma la estructura y el equipo la diseña.
     No cambian con el tema: el sitio del cliente es su propia hoja */
  --cliente-fondo: oklch(100% 0 0);
  --cliente-tinta: oklch(20.5% 0 0);
  --cliente-acento: oklch(94.5% 0 0);
  --cliente-sol: oklch(88% 0 0);
  --cliente-suave: oklch(96.5% 0 0);
  --cliente-trazo: oklch(80% 0 0);

  /* ── Tipografía ── */
  --font-sans: "Google Sans Flex", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, monospace;
  /* Marketing (landing): fluida */
  --text-display: clamp(2.75rem, 5.4vw + 0.75rem, 6rem);
  --text-h2: clamp(2rem, 2.6vw + 1rem, 3.5rem);
  --text-h3: clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
  --text-lede: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
  /* Producto (portal, consola, constructor): fija */
  --text-pagina: 1.75rem;        /* 28 · título de la pantalla */
  --text-seccion: 1.25rem;       /* 20 · título de bloque */
  --text-tarjeta: 1.0625rem;     /* 17 · título de tarjeta o diálogo chico */
  --text-kpi: 2rem;              /* 32 · cifras grandes */
  --text-body: 1rem;             /* 16 · cuerpo de lectura y campos */
  --text-ui: 0.9375rem;          /* 15 · texto de interfaz cómoda (cambia con la densidad) */
  --text-sm: 0.875rem;           /* 14 */
  --text-xs: 0.75rem;            /* 12 · etiquetas y notas */
  --text-2xs: 0.6875rem;         /* 11 · solo etiquetas de estructura alámbrica */
  /* Pesos (Google Sans Flex es variable: se usan estos y ningún otro) */
  --peso-cuerpo: 420;
  --peso-ui: 520;                /* chips, pestañas, filas de menú */
  --peso-boton: 560;             /* botones, etiquetas de campo, enlaces */
  --peso-titulo: 580;            /* titulares de marketing y de pantalla */
  --peso-fuerte: 600;            /* nombres, cifras, títulos de tarjeta */
  /* Interletrado: más cerrado cuanto más grande */
  --tracking-display: -0.045em;
  --tracking-h2: -0.04em;
  --tracking-titulo: -0.03em;
  --tracking-nombre: -0.01em;

  /* ── Espacio: escala de 4 pt ── */
  --space-3xs: 0.125rem;  /* 2 */
  --space-2xs: 0.25rem;   /* 4 */
  --space-xs: 0.5rem;     /* 8 */
  --space-sm: 0.75rem;    /* 12 */
  --space-md: 1rem;       /* 16 */
  --space-lg: 1.5rem;     /* 24 */
  --space-xl: 2rem;       /* 32 */
  --space-2xl: 3rem;      /* 48 */
  --space-3xl: 4rem;      /* 64 */
  --space-4xl: 6rem;      /* 96 */
  --space-5xl: 8rem;      /* 128 */

  /* ── Maquetación ── */
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --max: 1240px;              /* marketing */
  --max-contenido: 1120px;    /* contenido del portal */
  --max-lectura: 68ch;
  --nav-h: 64px;
  --lateral-w: 256px;         /* barra lateral del portal */
  --barra-inferior-h: 64px;   /* barra de pestañas del celular */

  /* ── Forma ── */
  --esquina: superellipse(1.4);   /* la esquina de Stackgrid: va en todo lo que tiene radio */
  --radius-xs: 6px;
  --radius-sm: 8px;               /* etiquetas */
  --radius-md: 14px;              /* opciones, filas con caja, avisos */
  --radius-lg: 22px;              /* tarjetas y paneles */
  --radius-xl: 24px;              /* diálogos, menús de vidrio */
  --radius-2xl: 30px;             /* bandejas que contienen tarjetas */
  --radius-pieza: 28%;            /* cuadro grande de un kit */
  --radius-redondo: 999px;        /* solo avatares de persona, radios e interruptores. Nunca botones */
  /* Controles: 18 px en superelipse; sin soporte de corner-shape, un radio menor para que no se lean como píldora */
  --radius-control: 12px;
  --radius-campo: 15px;
  --radius-control-chico: 10px;

  /* ── Movimiento: una sola curva de salida ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-panel: cubic-bezier(0.32, 0.72, 0, 1);   /* paneles que crecen (menú de la landing, hojas) */
  --dur-micro: 120ms;     /* hover, presionar */
  --dur-short: 220ms;     /* cambios de estado */
  --dur-long: 420ms;      /* entrar y salir */
  --dur-panel: 560ms;     /* paneles y hojas */
  --dur-escena: 900ms;    /* solo marketing */

  /* ── Capas ── */
  --z-pegajoso: 10;
  --z-nav: 20;
  --z-flotante: 40;
  --z-dialogo: 50;
  --z-toast: 60;
  --z-banner: 70;

  /* ── Densidad cómoda (portal y celular): objetivos táctiles de 44 px o más ── */
  --control-h: 44px;
  --control-h-chico: 34px;
  --control-h-grande: 56px;
  --campo-h: 48px;
  --fila-h: 56px;
  --celda-x: var(--space-md);
  --tarjeta-p: var(--space-lg);
}

@supports (corner-shape: superellipse(1.4)) {
  :root { --radius-control: 18px; --radius-campo: 22px; --radius-control-chico: 14px; }
}

/* ── 2 · Semánticos, tema claro (los nombres son los de la landing) ── */
:root, [data-tema="claro"] {
  --color-paper: var(--gris-50);          /* fondo de la página */
  --color-paper-2: var(--gris-100);       /* relleno suave: hover, campos grises, notas */
  --color-paper-3: var(--gris-150);       /* bandejas, etiquetas, pistas */
  --color-sheet: var(--gris-0);           /* hojas y tarjetas */
  --color-ink: var(--gris-800);           /* texto y el único color de acción */
  --color-ink-2: var(--gris-700);         /* hover de lo que va en tinta */
  --color-ink-soft: var(--gris-500);      /* texto secundario, ≥ 4.5:1 sobre el papel */
  --color-ink-faint: var(--gris-400);     /* marcadores de posición y decorativo; no para texto que se tenga que leer */
  --color-line: var(--gris-200);
  --color-line-strong: var(--gris-300);
  --color-on-ink: var(--gris-50);
  --color-on-ink-soft: oklch(72% 0 0);
  --color-focus: var(--gris-800);
  --color-vidrio: oklch(97% 0 0 / 0.72);  /* menús y popovers: vidrio esmerilado */
  --color-iso: oklch(91.3% 0 0);
  --color-velo: oklch(20.5% 0 0 / 0.28);  /* detrás de diálogos y hojas */

  /* Funcionales: verde, ámbar y rojo apagados. Solo dicen un estado; nunca son botones (salvo el destructivo) */
  --color-ok: oklch(55% 0.12 155);
  --color-ok-fondo: oklch(95% 0.04 155);
  --color-ok-texto: oklch(43% 0.1 155);
  --color-aviso: oklch(72% 0.15 75);
  --color-aviso-fondo: oklch(96% 0.05 88);
  --color-aviso-texto: oklch(45% 0.1 65);
  --color-error: oklch(56% 0.19 27);
  --color-error-fondo: oklch(96% 0.025 25);
  --color-error-texto: oklch(47% 0.17 27);
  --color-sobre-color: var(--gris-0);     /* texto sobre un funcional sólido (Publicado, botón destructivo) */
  --color-ok-en-tinta: oklch(72% 0.14 155);     /* íconos de estado dentro de un toast en tinta */
  --color-error-en-tinta: oklch(70% 0.16 27);

  --icono-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fafafa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icono-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%237a7a7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sombra-base: oklch(20.5% 0 0);
  color-scheme: light;
}

/* ── 2 · Semánticos, tema oscuro: la hoja es la tinta de la marca y la tinta se vuelve gis ── */
[data-tema="oscuro"] {
  --color-paper: var(--gris-950);
  --color-paper-2: var(--gris-750);
  --color-paper-3: oklch(28% 0 0);
  --color-sheet: var(--gris-800);
  --color-ink: oklch(96.5% 0 0);
  --color-ink-2: oklch(86% 0 0);
  --color-ink-soft: oklch(72% 0 0);
  --color-ink-faint: oklch(52% 0 0);
  --color-line: oklch(29% 0 0);
  --color-line-strong: oklch(38% 0 0);
  --color-on-ink: var(--gris-800);
  --color-on-ink-soft: oklch(42% 0 0);
  --color-focus: oklch(96.5% 0 0);
  --color-vidrio: oklch(24% 0 0 / 0.74);
  --color-iso: oklch(91.3% 0 0);
  --color-velo: oklch(0% 0 0 / 0.55);

  --color-ok: oklch(70% 0.13 155);
  --color-ok-fondo: oklch(29% 0.05 155);
  --color-ok-texto: oklch(82% 0.12 155);
  --color-aviso: oklch(78% 0.14 80);
  --color-aviso-fondo: oklch(30% 0.05 75);
  --color-aviso-texto: oklch(86% 0.12 85);
  --color-error: oklch(62% 0.19 27);
  --color-error-fondo: oklch(29% 0.07 25);
  --color-error-texto: oklch(80% 0.12 25);
  --color-sobre-color: var(--gris-0);
  --color-ok-en-tinta: oklch(50% 0.13 155);
  --color-error-en-tinta: oklch(52% 0.19 27);

  --icono-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23161616' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icono-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a8a8a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sombra-base: oklch(0% 0 0);
  color-scheme: dark;
}

/* ── 3 · Derivados: se declaran también en [data-tema] para que se recalculen dentro de un contenedor con otro tema ── */
:root, [data-tema] {
  /* Bordes: se dibujan como anillo por dentro (box-shadow inset), nunca con border, para no mover el contenido */
  --anillo: inset 0 0 0 1px var(--color-line);
  --anillo-fuerte: inset 0 0 0 1px var(--color-line-strong);
  --anillo-sel: inset 0 0 0 2px var(--color-ink);          /* seleccionado y foco dentro de un campo */
  --anillo-error: inset 0 0 0 2px var(--color-error);
  --rule: 1px solid var(--color-line);                     /* línea divisoria (border-top de listas y preguntas) */
  /* Elevación: sombras largas y suaves, con la caída negativa de la landing */
  --sombra-1: 0 1px 2px color-mix(in oklch, var(--sombra-base) 10%, transparent);                 /* perilla, pestaña elegida */
  --sombra-2: 0 8px 16px -10px color-mix(in oklch, var(--sombra-base) 40%, transparent);          /* tooltip, etiqueta flotante */
  --sombra-3: 0 30px 60px -48px color-mix(in oklch, var(--sombra-base) 35%, transparent);         /* panel del paso, tarjeta elevada */
  --sombra-4: 0 24px 48px -28px color-mix(in oklch, var(--sombra-base) 45%, transparent);         /* menús y popovers */
  --sombra-5: 0 50px 90px -60px color-mix(in oklch, var(--sombra-base) 50%, transparent);         /* diálogos y hojas */
  --sombra-flotante: 0 18px 36px -16px color-mix(in oklch, var(--sombra-base) 55%, transparent);  /* toast, botón fijo */
}

/* ── Densidad densa (consola y constructor): filas de 40 px, controles de 36 ── */
[data-densidad="densa"] {
  --control-h: 36px;
  --control-h-chico: 28px;
  --control-h-grande: 44px;
  --campo-h: 36px;
  --fila-h: 40px;
  --celda-x: var(--space-sm);
  --tarjeta-p: var(--space-md);
  --text-ui: 0.875rem;
  --radius-control: 10px;
  --radius-campo: 10px;
}
@supports (corner-shape: superellipse(1.4)) {
  [data-densidad="densa"] { --radius-control: 14px; --radius-campo: 14px; }
}