/* Copiado el 12-10-2026 de unfiniti.solutions/app/assets/css/tokens.css (misma fuente que la web). Sin cambios. */
/* FUENTE: app.unfiniti.solutions/app/assets/css/tailwind.css — copia literal, no editar aquí (canon 01), salvo el bloque «COLOR DE ESPACIO» del final (fuente: navigation/spaces.ts, canon 12). Único fichero con literales de color/radio/sombra. */
:root {
  --background: oklch(0.9784 0.0011 197.1);
  --foreground: oklch(0.1819 0.0111 229.7);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.1819 0.0111 229.7);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.1819 0.0111 229.7);
  --primary: oklch(0.1819 0.0111 229.7);
  /* PRESET 2026-09-24: primary es NEUTRO (negro en claro, casi blanco en oscuro). El coral
     se fue: la marca vive solo en --brand-* (el degradado) y el color de acción es negro
     sobre claro / blanco sobre oscuro. Blanco sobre --primary: 17.96:1.

     GRISES NEUTROS (croma 0), referencia Sana Labs (24-09 tarde). Sustituyen al «mauve»
     (hue 300) de la mañana: el gris sin tinte deja que la marca sea lo único con color.
     Oscuro = escala medida en su captura: lienzo #101010 · megacard #141414 · tarjeta
     #1a1a1a · hover/popover #1f1f1f · borde #292929 · texto #e5e5e5 · secundario #949494.
     Claro = su captura en claro: lienzo #f8f8f8 · megacard #fff · tarjeta #f7f8f8 ·
     hover/activo #ececec · borde #e6e7e7 · texto y botón #0d1316 (su negro lleva un
     punto frío, hue 230; se respeta). Texto secundario: el suyo (#6b6f71) da 4.30:1
     sobre #ececec y suspende AA; misma tinta a L 0.505 → pasa.

     Gráficas: azul, menta, violeta, cian, índigo (system colors de Apple), fuera de la zona
     rosa-melocotón y de los colores de estado. Validadas CVD + contraste en claro y oscuro. */
  --primary-foreground: oklch(1.0000 0 0);

  /* ── MARCA = DEGRADADO (2026-08-08) ────────────────────────────────────────
     [Hasta el 2026-09-24] primary NO era "el color de acción" (esa era la variante
     neutra del botón), es la MARCA. Y la marca es un degradado.

     Los dos stops salen de BRAND_GRADIENT_PALETTE (`app/lib/brand-gradient.ts`),
     posiciones 4 y 3 de la rampa canónica del hero. No son colores nuevos: son
     el trozo de la rampa que sobrevive fuera de WebGL. El gradiente WebGL real
     (BrandGradient.vue) queda para auth y la cabecera de IA; el resto de la app
     usa esta versión CSS, la misma que la cara de Libot.

     Lineal a 135º, no radial: el radial da relieve de esfera (probado en el
     mascot). En superficies planas eso lee como un botón 3D de 2009.

     El degradado NO cambia entre temas — es identidad. Lo que cambia es cuánto
     tinte se aplica sobre el fondo (ver --brand-tint en .dark). */
  --brand-from: #fc5c7d;
  --brand-to:   #ffaf7b;
  --brand-gradient: linear-gradient(135deg, var(--brand-from) 0%, var(--brand-to) 100%);

  /* Degradado de marca en GRÁFICAS: un trazo o una barra es un objeto gráfico y pide
     3:1 contra la tarjeta (#f3f1f7). La marca da 2,4 y 1,35:1, así que en claro los
     extremos bajan de luz sin cambiar de tono (oklch, mismo hue): 3,08 y 3,06:1,
     validado con el validador de dataviz (24-09). En oscuro, la marca tal cual. */
  --chart-brand-from: #ea5674;
  --chart-brand-to:   #c67842;

  /* TINTA sobre el relleno de marca. Oscura, NO blanca: el degradado es claro en
     su mitad derecha. Medido — blanco da 3.01:1 sobre #fc5c7d y 1.80:1 sobre
     #ffaf7b (suspende AA en las dos); #17052f da 6.34 y 10.62. Mismo criterio y
     mismo valor que el ojo del mascot. */
  --brand-ink: #17052f;

  /* TINTE: sustituye a `bg-primary/10`. Va en gradiente, no en plano, para que
     una fila seleccionada y un botón de marca se lean del mismo sistema. */
  --brand-tint: linear-gradient(135deg,
    color-mix(in oklab, var(--brand-from) 14%, transparent) 0%,
    color-mix(in oklab, var(--brand-to)   14%, transparent) 100%);

  /* TEXTO en degradado. Rampa DISTINTA a --brand-gradient, y no por gusto: sobre
     blanco, el melocotón #ffaf7b da 1.80:1 y el propio coral de marca #fc5c7d da
     3.01:1 — el melocotón suspende hasta el mínimo de texto grande (3:1) y el coral lo roza.
     Esta va de vino a coral rebajado: 6.52:1 → 5.09:1. Los DOS extremos pasan AA de
     texto normal (4.5:1), no solo el de texto grande: se usa en los chips de la barra
     de filtros, que van a 12px. Un extremo más vivo (#e94a72 = 3.69:1) solo valdría
     para titulares, y entonces harían falta dos rampas. */
  --brand-gradient-text: linear-gradient(135deg, #9e3a5e 0%, #c9345c 100%);

  /* Secundario = primary al 25%: gris translúcido que no compite con el fill.
     El texto va en --primary-text (regla: primary como texto nunca es el fill). */
  --secondary: color-mix(in oklch, var(--primary) 25%, transparent);
  --secondary-foreground: var(--primary-text);
  --muted: oklch(0.9431 0 0);
  /* 0.5555 daba 3.87:1 sobre --muted y 4.35:1 sobre --background: suspende AA.
     0.515 → 4.59 / 5.15 / 5.62 (muted / background / card). */
  --muted-foreground: oklch(0.5050 0.0058 228.9);
  --accent: oklch(0.9431 0 0);
  --accent-foreground: oklch(0.1819 0.0111 229.7);
  --destructive: oklch(0.5770 0.2450 27.3250);
  --destructive-foreground: oklch(1 0 0);
  --primary-text: oklch(0.1819 0.0111 229.7);
  --success: oklch(0.5102 0.1255 153.3147);
  --success-foreground: oklch(1.0000 0 0);
  --warning: oklch(0.6173 0.1323 68.7213);
  /* Blanco sobre --warning daba 3.79:1. Esta tinta (la misma del tema oscuro) da 4.51:1. */
  --warning-foreground: oklch(0.2262 0.0385 81.7186);
  /* Separador y borde de campo TRANSLÚCIDOS (24-09 noche, canon shadcn v4): un gris fijo
     desaparecía en cuanto la superficie cambiaba de tono (tarjeta hundida, diálogo). Con
     alfa quedan siempre un paso por encima de lo que pisan. Blanco: #ebebeb / #e0e0e0. */
  /* 25-09 «muy suave, como Sana»: tinta del texto (no negro puro) al 5 % / 10 %, como Sana
     (tinta del texto al 4-15 %). Sigue translúcido: vale sobre plano, tarjeta y diálogo. */
  --border: oklch(0.1819 0.0111 229.7 / 5%);
  /* Borde de campo: un punto más marcado que el separador. Decisión de diseño por debajo
     del 3:1 de WCAG 1.4.11 para el borde de un control. */
  --input: oklch(0.1819 0.0111 229.7 / 10%);
  --ring: oklch(0.7090 0 0);
  --chart-1: oklch(0.6028 0.2177 257.4);
  --chart-2: oklch(0.6450 0.1119 188.6);
  --chart-3: oklch(0.5502 0.2099 311.7);
  --chart-4: oklch(0.6197 0.1130 220.2);
  --chart-5: oklch(0.5295 0.1910 278.3);
  /* UN SOLO PLANO (24-09 noche): sidebar y Libot = el color del contenido (--card) y
     se separan por borde, no por tono. El borde es el de los campos (--input): el
     separador (--border, #f3f3f3) entre dos blancos no se ve. */
  --sidebar: oklch(1.0000 0 0);
  --sidebar-foreground: oklch(0.1819 0.0111 229.7);
  --sidebar-primary: oklch(0.1819 0.0111 229.7);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.9431 0 0);
  --sidebar-accent-foreground: oklch(0.1819 0.0111 229.7);
  --sidebar-border: var(--border); /* separador de columna = el más suave (25-09), no el de campo */
  --sidebar-ring: oklch(0.7090 0 0);
  --font-sans: 'Gilroy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 0.625rem;
  --shadow-x: 0;
  --shadow-y: 0px;
  --shadow-blur: 0px;
  --shadow-spread: 0px;
  --shadow-opacity: 0;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 0px 0px 0px oklch(0 0 0 / 0);
  --shadow-xs: 0 0px 0px 0px oklch(0 0 0 / 0);
  --shadow-sm: 0 0px 0px 0px oklch(0 0 0 / 0), 0 1px 2px -1px oklch(0 0 0 / 0);
  --shadow: 0 0px 0px 0px oklch(0 0 0 / 0), 0 1px 2px -1px oklch(0 0 0 / 0);
  --shadow-md: 0 0px 0px 0px oklch(0 0 0 / 0), 0 2px 4px -1px oklch(0 0 0 / 0);
  --shadow-lg: 0 0px 0px 0px oklch(0 0 0 / 0), 0 4px 6px -1px oklch(0 0 0 / 0);
  --shadow-xl: 0 0px 0px 0px oklch(0 0 0 / 0), 0 8px 10px -1px oklch(0 0 0 / 0);
  --shadow-2xl: 0 0px 0px 0px oklch(0 0 0 / 0);
  /* 25-09 «premium, como Sana»: SOLO capas que flotan (menú, popover, select, diálogo). Las
     tarjetas siguen planas; `shadow-lg/xl` no se tocan (los usan baldosas del TPV y el plano). */
  --shadow-float: 0 1px 2px oklch(0 0 0 / 4%), 0 8px 24px -4px oklch(0 0 0 / 10%);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  /* DARK 2026-09-24: escala Sana (ver PRESET en :root). UN SOLO PLANO (24-09 noche):
     contenido (--card), sidebar y Libot en el lienzo #101010, separados por borde
     (#292929). Las tarjetas de dentro (--background, ver «sunken» en global.css) más
     claras: en oscuro, lo que sube se aclara, y el plano base es el más oscuro. */
  /* Tarjeta de dentro = #151515 (24-09 noche, él lo eligió viéndolo): sobre el plano
     #101010 da 1.03:1, el mismo escalón suave que el claro (#f7f8f8 sobre #fff). */
  /* 25-09: #151515 → #1a1a1a. La tarjeta se separa por plano (como Sana, #131314 → #1e1f20)
     y no por línea: con el borde más suave hacía falta un escalón algo mayor. */
  --background: oklch(0.2050 0 0);
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.1730 0 0);
  --card-foreground: oklch(0.9219 0 0);
  --popover: oklch(0.2393 0 0);
  --popover-foreground: oklch(0.9219 0 0);
  --primary: oklch(0.9219 0 0);
  /* Ver el bloque PRESET 2026-09-24 en :root. Tinta oscura sobre --primary: 14.25:1. */
  --primary-foreground: oklch(0.1913 0 0);

  /* MARCA = DEGRADADO — ver el bloque largo en :root. El degradado y su tinta NO
     se invierten en oscuro: son identidad, no jerarquía. Lo único que sube es el
     TINTE: al 14% sobre un fondo oklch(0.14) no se ve nada. */
  --brand-from: #fc5c7d;
  --brand-to:   #ffaf7b;
  --brand-gradient: linear-gradient(135deg, var(--brand-from) 0%, var(--brand-to) 100%);
  --brand-ink: #17052f;
  --chart-brand-from: var(--brand-from);
  --chart-brand-to:   var(--brand-to);
  --brand-tint: linear-gradient(135deg,
    color-mix(in oklab, var(--brand-from) 24%, transparent) 0%,
    color-mix(in oklab, var(--brand-to)   24%, transparent) 100%);
  /* En oscuro el texto en degradado va al revés: el vino se pierde contra el
     fondo, así que la rampa arranca en coral y sube al melocotón. */
  --brand-gradient-text: linear-gradient(135deg, var(--brand-from) 0%, var(--brand-to) 100%);

  /* Secundario = primary al 25%: gris translúcido que no compite con el fill.
     El texto va en --primary-text (regla: primary como texto nunca es el fill). */
  --secondary: color-mix(in oklch, var(--primary) 25%, transparent);
  --secondary-foreground: var(--primary-text);
  --muted: oklch(0.2393 0 0);
  --muted-foreground: oklch(0.6665 0 0);
  --accent: oklch(0.2393 0 0);
  --accent-foreground: oklch(0.9219 0 0);
  --destructive: oklch(0.7040 0.1910 22.2160);
  /* En oscuro --destructive sube a L=0.70, así que la tinta casi blanca daba 2.77:1:
     el peor par de todo el tema. Tinta oscura del mismo tono → 6.34:1. */
  --destructive-foreground: oklch(0.2000 0.0500 22.2160);
  --primary-text: oklch(0.9219 0 0);
  --success: oklch(0.7623 0.1734 154.8966);
  --success-foreground: oklch(0.2179 0.0350 158.6841);
  --warning: oklch(0.7572 0.1386 74.9738);
  --warning-foreground: oklch(0.2262 0.0385 81.7186);
  /* Translúcidos como en claro: el #1f1f1f fijo era IGUAL que el diálogo (--popover) e
     invisible en él. Sobre #151515: separador #2c2c2c, campo #363636. */
  /* 25-09: bajados a 6 % / 11 % (tinta clara de Sana al 4-15 %). */
  --border: oklch(1 0 0 / 6%);
  --input: oklch(1 0 0 / 11%);
  --ring: oklch(0.5555 0 0);
  --chart-1: oklch(0.6300 0.1904 257.1);
  --chart-2: oklch(0.6589 0.1097 188.6);
  --chart-3: oklch(0.5805 0.2002 311.9);
  --chart-4: oklch(0.6645 0.1100 215.5);
  --chart-5: oklch(0.5301 0.1793 278.0);
  --sidebar: oklch(0.1730 0 0); /* = --card: un solo plano */
  --sidebar-foreground: oklch(0.9219 0 0);
  --sidebar-primary: oklch(0.9219 0 0);
  --sidebar-primary-foreground: oklch(0.1913 0 0);
  --sidebar-accent: oklch(0.2393 0 0);
  --sidebar-accent-foreground: oklch(0.9219 0 0);
  --sidebar-border: var(--border); /* separador de columna = el más suave (25-09) */
  --sidebar-ring: oklch(0.5555 0 0);
  --font-sans: 'Gilroy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 0.625rem;
  --shadow-x: 0;
  --shadow-y: 0px;
  --shadow-blur: 0px;
  --shadow-spread: 0px;
  --shadow-opacity: 0;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 0px 0px 0px oklch(0 0 0 / 0);
  --shadow-xs: 0 0px 0px 0px oklch(0 0 0 / 0);
  --shadow-sm: 0 0px 0px 0px oklch(0 0 0 / 0), 0 1px 2px -1px oklch(0 0 0 / 0);
  --shadow: 0 0px 0px 0px oklch(0 0 0 / 0), 0 1px 2px -1px oklch(0 0 0 / 0);
  --shadow-md: 0 0px 0px 0px oklch(0 0 0 / 0), 0 2px 4px -1px oklch(0 0 0 / 0);
  --shadow-lg: 0 0px 0px 0px oklch(0 0 0 / 0), 0 4px 6px -1px oklch(0 0 0 / 0);
  --shadow-xl: 0 0px 0px 0px oklch(0 0 0 / 0), 0 8px 10px -1px oklch(0 0 0 / 0);
  --shadow-2xl: 0 0px 0px 0px oklch(0 0 0 / 0);
  /* En oscuro la sombra casi no se ve: más densa para que la capa siga despegando. */
  --shadow-float: 0 1px 2px oklch(0 0 0 / 30%), 0 12px 32px -4px oklch(0 0 0 / 50%);
}

/* ── Propios del help (no existen en el panel) ── */
:root {
  --w-prose: 68ch; /* columna de lectura */
  /* Superficie oscura (igual en los dos temas). Ninguna sección la usa como fondo (`_bg` solo admite `default`, 02-10). */
  --surface-inverse: oklch(0.1730 0 0);
  --surface-inverse-foreground: oklch(0.9219 0 0);
}

/* Fallback para navegadores sin oklch (lección Cronofit): hex equivalentes de los tokens principales. */
@supports not (color: oklch(0 0 0)) {
  :root {
    --background: #f8f9f9;
    --foreground: #0d1316;
    --card: #ffffff;
    --card-foreground: #0d1316;
    --popover: #ffffff;
    --popover-foreground: #0d1316;
    --primary: #0d1316;
    --primary-foreground: #ffffff;
    --muted: #ececec;
    --muted-foreground: #5f6467;
    --accent: #ececec;
    --accent-foreground: #0d1316;
    --border: rgba(13, 19, 22, 0.05);
    --input: rgba(13, 19, 22, 0.1);
    --ring: #a1a1a1;
  }
  .dark {
    --background: #171717;
    --foreground: #e5e5e5;
    --card: #101010;
    --card-foreground: #e5e5e5;
    --popover: #1f1f1f;
    --popover-foreground: #e5e5e5;
    --primary: #e5e5e5;
    --primary-foreground: #101010;
    --muted: #1f1f1f;
    --muted-foreground: #949494;
    --accent: #1f1f1f;
    --accent-foreground: #e5e5e5;
    --border: rgba(255, 255, 255, 0.06);
    --input: rgba(255, 255, 255, 0.11);
    --ring: #5f5f5f;
  }
}

/* Anchos y ritmo de la web (canon 03). --w-content, --w-narrow y --gutter = panel tailwind.css (container único 1440 + pequeño 960, 25-09) */
:root {
  --w-content: 90rem; /* 1440 px exactos de contenido; el gutter se suma por fuera (página = 1440 + 2 × 40 = 1520) */
  --w-narrow: 60rem;
  --w-docs: 48rem; /* columna de contenido de docs, /developers (768 px); aprobado por el fundador 12-10 */
  --w-page: calc(var(--w-content) + var(--gutter) * 2);
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --col-gap: 1.5rem; /* grid de 12 columnas (canon 03 § Grid): hueco entre columnas 24 px = `gap-6` y el `gap-6`/`py-6`/`px-6` del Card de shadcn-vue (fundador 11-10; antes 32 de Sana) */
  --row-gap: 1.5rem; /* hueco entre filas del grid: 24 px, igual que el de columnas (un solo hueco, 11-10) */
  --header-h: 3.25rem; /* 52 en todos los anchos (medido en Sana) */
  --header-glass: 72%; /* opacidad del fondo del header */
  --header-blur: 20px;
  --header-saturate: 180%;
  /* Ritmo vertical (canon 03 § Ritmo vertical): escala 4·8·12·16·24·32·48·64·96 y tokens semánticos que cambian por ancho, nunca valores sueltos */
  --sp-section: 2rem; /* relleno de cada lado de una sección: entre dos secciones = el doble */
  --sp-band: 3rem; /* ídem para la cabecera de página interior (`_pad lg`) */
  --sp-head: 1.5rem; /* cabecera de sección → su contenido (siempre menor que el aire entre secciones: proximidad) */
  --sp-hero-top: 3rem; /* header fijo → primer texto de la home */
  --sp-group: calc(var(--sp-section) * 2); /* relleno SUPERIOR de la 1.ª sección de un grupo (`_group`): entre grupos = --sp-section + --sp-group (192 / 144 / 96), derivado de --sp-section, sin valores sueltos */
  --sp-group-lg: calc(var(--sp-band) + var(--sp-section)); /* ídem para `_pad lg` + `_group` (banda + sección) */
  --pad-md: var(--sp-section);
  --pad-lg: var(--sp-band);
  /* Medidas históricas de bloques ya aprobados que no caben en la escala: nombradas, no sueltas (aspecto sin cambios) */
  --sp-20: 1.25rem;
  --sp-36: 2.25rem;
  --sp-head-pull: calc(var(--sp-head) - var(--sp-section) * 2); /* cabecera de página del help: recoge el relleno de la sección siguiente */
  --sp-hero-pull: calc(var(--sp-hero-top) - var(--sp-section)); /* hero a pantalla completa: compensa el aire superior para centrar ópticamente */
  --radius-pill: 9999px;
  --brand-paper: #f6f5f4; /* gris de marca (stop 0 de BRAND_GRADIENT_PALETTE): fondo `_bg: 'brand'` */
  --sp-40: 2.5rem;
  --ease-nav: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-nav: 0.6s;
}
@media (width >= 46rem) {
  :root { --header-h: 3.25rem; --sp-section: 3rem; --sp-band: 4rem; --sp-head: 2rem; --sp-hero-top: 4rem; }
}
@media (width >= 64rem) {
  :root { --sp-section: 4rem; --sp-band: 6rem; --sp-head: 3rem; --sp-hero-top: 6rem; }
}


/* ── COLOR DE ESPACIO (canon 12) ─────────────────────────────────────────────
   FUENTE: app.unfiniti.solutions/app/navigation/spaces.ts (campo `color` de cada espacio, línea entre paréntesis). Un hue ÚNICO por espacio; el panel no tiene
   tokens CSS para esto (son hex en un .ts). Si cambia allí, cambia aquí y en docs/canon/12 en el mismo cambio.
   Receta del panel (components/home/HomeShortcuts.vue:tileStyle): fondo = color al 18 % sobre la superficie · icono = color al 70 % + --foreground al 30 % (oklab; 70 y no 80 para ≥ 3:1 en los 12 colores, canon 12). */
:root {
  --space-home: #52525b; /* Inicio · spaces.ts:133 */
  --space-restaurant: #84cc16; /* Restaurante · spaces.ts:173 */
  --space-commerce: #10b981; /* Comercio · spaces.ts:232 */
  --space-wellness: #2eb82e; /* Bienestar · spaces.ts:271 */
  --space-crm: #3b82f6; /* Clientes · spaces.ts:351 */
  --space-automations: #a855f7; /* Automatizaciones · spaces.ts:380 */
  --space-promotions: #eab308; /* Promociones · spaces.ts:394 */
  --space-cms: #06b6d4; /* Sitio web · spaces.ts:429 */
  --space-admin: #78716c; /* Administración · spaces.ts:443 */
}
:root, .dark { /* derivados: se recalculan con --foreground, por eso también en .dark */
  --space-home-bg: color-mix(in oklab, var(--space-home) 18%, transparent);
  --space-home-fg: color-mix(in oklab, var(--space-home) 70%, var(--foreground));
  --space-restaurant-bg: color-mix(in oklab, var(--space-restaurant) 18%, transparent);
  --space-restaurant-fg: color-mix(in oklab, var(--space-restaurant) 70%, var(--foreground));
  --space-commerce-bg: color-mix(in oklab, var(--space-commerce) 18%, transparent);
  --space-commerce-fg: color-mix(in oklab, var(--space-commerce) 70%, var(--foreground));
  --space-wellness-bg: color-mix(in oklab, var(--space-wellness) 18%, transparent);
  --space-wellness-fg: color-mix(in oklab, var(--space-wellness) 70%, var(--foreground));
  --space-crm-bg: color-mix(in oklab, var(--space-crm) 18%, transparent);
  --space-crm-fg: color-mix(in oklab, var(--space-crm) 70%, var(--foreground));
  --space-automations-bg: color-mix(in oklab, var(--space-automations) 18%, transparent);
  --space-automations-fg: color-mix(in oklab, var(--space-automations) 70%, var(--foreground));
  --space-promotions-bg: color-mix(in oklab, var(--space-promotions) 18%, transparent);
  --space-promotions-fg: color-mix(in oklab, var(--space-promotions) 70%, var(--foreground));
  --space-cms-bg: color-mix(in oklab, var(--space-cms) 18%, transparent);
  --space-cms-fg: color-mix(in oklab, var(--space-cms) 70%, var(--foreground));
  --space-admin-bg: color-mix(in oklab, var(--space-admin) 18%, transparent);
  --space-admin-fg: color-mix(in oklab, var(--space-admin) 70%, var(--foreground));
}

/* RESERVADOS (canon 12 § 2): módulos de la web que el panel aún no tiene (sin espacio en spaces.ts). Color = siguiente libre de la paleta de espacios (hue único, fuera de 330°–40° y 235°–255°);
   cuando el panel los cree deberán usar EXACTAMENTE estos valores. Mismo receta -bg/-fg. */
:root {
  --space-reserved-nominas: #d946ef; /* Nóminas */
  --space-reserved-contabilidad: #22c55e; /* Contabilidad */
  --space-reserved-delivery: #b5c100; /* Delivery */
}
:root, .dark {
  --space-reserved-nominas-bg: color-mix(in oklab, var(--space-reserved-nominas) 18%, transparent);
  --space-reserved-nominas-fg: color-mix(in oklab, var(--space-reserved-nominas) 70%, var(--foreground));
  --space-reserved-contabilidad-bg: color-mix(in oklab, var(--space-reserved-contabilidad) 18%, transparent);
  --space-reserved-contabilidad-fg: color-mix(in oklab, var(--space-reserved-contabilidad) 70%, var(--foreground));
  --space-reserved-delivery-bg: color-mix(in oklab, var(--space-reserved-delivery) 18%, transparent);
  --space-reserved-delivery-fg: color-mix(in oklab, var(--space-reserved-delivery) 70%, var(--foreground));
}