/*! Eclipse UI 0.1.0: el motor, sin Rails ni Tailwind
 *  Enlázalo antes del theme.css de tu marca. Licencia: LICENCIA.md.
 */

/*
 * Eclipse UI — voz display
 *
 * Fraunces (SIL OFL 1.1, ver app/assets/fonts/eclipse_ui/OFL-Fraunces.txt),
 * variable con ejes wght, opsz, SOFT y WONK. Alojada en el repo: sin
 * terceros, sin CSP extra, igual en todos los dispositivos. La cursiva solo
 * se descarga si una página la usa.
 */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Inter (SIL OFL 1.1): la voz de toda la interfaz, en la app y en el
 * catálogo. Variable en peso y alojada aquí, así se ve igual en cualquier
 * equipo (antes solo se usaba si la persona la tenía instalada).
 * JetBrains Mono (SIL OFL 1.1): datos y etiquetas técnicas. Solo se
 * descarga si una página la usa. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Las voces de las personalidades (SIL OFL 1.1, licencias junto a cada archivo
 * en app/assets/fonts/eclipse_ui/). Variables y solo latín (incluye acentos,
 * ñ, ¿ y ¡). El navegador las descarga solo si una sección las usa: una app
 * en Eclipse o Carbón nunca las pide.
 *
 *   Manrope    sans geométrica y limpia            Brisa (texto y títulos)
 *   Archivo    grotesca con eje de ancho (wdth)    Umbra (títulos condensados)
 *   Cormorant  serif de alto contraste, cursiva    Alba (títulos)
 *   Nunito     sans de terminales redondas        Terra (texto) */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-wdth-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant";
  src: url("fonts/cormorant-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant";
  src: url("fonts/cormorant-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/*
 * Eclipse UI — motor de tokens
 *
 * La base es la misma; la personalidad la decide cada estudio. Este archivo
 * NO se edita por cliente: recibe unos pocos DIALES (--eui-*) y deriva todo lo
 * demás. Cada cliente fija sus diales en theme.css; las personalidades de
 * partida viven en expressions.css. Guía completa: docs/GUI.md.
 *
 *   Diales (entrada)          Tokens derivados (salida, los que usan las vistas)
 *   --eui-brand  ──────────►  --color-primary, -hover, -foreground, halo, corona
 *   --eui-ink / --eui-paper ► --color-background/foreground/muted/border/card…
 *   --eui-tint   ──────────►  cuánto tiñe la marca los grises intermedios
 *   --eui-roundness ───────►  --radius-*  (los rounded-* de Tailwind lo siguen)
 *   --eui-density ─────────►  --eui-control-*, --eui-pad-*
 *   --eui-depth  ──────────►  --shadow-*
 *   --eui-motion ──────────►  --eui-dur-*  (0 = sin movimiento)
 *   --eui-halo   ──────────►  --eui-ring, --eui-corona
 *   --eui-font-* / --eui-display-* ► --font-sans, --font-heading, estilo display
 *   --eui-line   ──────────►  qué tan marcados son los bordes (1 = base)
 *   --eui-control-radius ──►  --radius-button / --radius-field (pastilla, recto…)
 *   --eui-control-case / -tracking / -weight ► la voz de botones (eui-control-voice)
 *
 * Los tokens se derivan en `:root` y de nuevo en cada `[data-eui]`, así una
 * sección (o el taller /ui) puede cambiar de personalidad sin tocar la página.
 */

/* ── Diales: valores base (personalidad "eclipse") ───────────────────────────
 * :where() deja la especificidad en cero: theme.css y cualquier [data-eui]
 * los sobrescriben sin importar el orden de carga. */
:where(:root) {
  --eui-brand: #a3946b;
  --eui-ink: #1a1a18;
  --eui-paper: #f5f2ec;
  --eui-tint: 25%;

  --eui-roundness: 1;
  --eui-density: 1;
  --eui-depth: 1;
  --eui-motion: 1;
  --eui-halo: 1;

  /* Carácter de las piezas: con estos valores todo se ve como siempre. */
  --eui-line: 1; /* multiplica el paso de los bordes: 0.6 apenas se ven, 1.8 marcados */
  --eui-control-case: none; /* uppercase: botones en mayúsculas */
  --eui-control-tracking: normal;
  --eui-control-weight: 500;
  /* --eui-control-radius (sin valor): botones y campos siguen la escala de
   * radios; con 9999px son pastilla y con 0 rectos, aunque las tarjetas no. */

  --eui-font-text: "Inter", system-ui, -apple-system, sans-serif;
  --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --eui-display-weight: 500;
  --eui-display-tracking: -0.02em;
  --eui-display-leading: 1.05;
  --eui-display-case: none;
  --eui-display-stretch: normal; /* ancho del display: 75% condensa (si la fuente tiene eje wdth) */
  --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Estados: no salen de la marca para que un rojo siempre lea como error.
   * El rojo pasa AA como texto chico (errores de campo) sobre el fondo y la
   * tarjeta de todas las personalidades, en claro y en oscuro. */
  --eui-danger: #b04236;
  --eui-success: #4a7357; /* AA como texto y con papel encima en todas las personalidades */
  --eui-warning: #b88a3a;
  --eui-danger-dark: #e98073;
  --eui-success-dark: #7aa289;
  --eui-warning-dark: #d4a864;
}

/* ── Modo: claro ───────────────────────────────────────────────────────────
 * Los pasos (--eui-step-*) dicen cuánto se acerca cada gris a la tinta. En
 * oscuro se necesitan saltos mayores para la misma separación percibida. */
:root,
[data-eui] {
  --eui-bg: var(--eui-paper);
  --eui-fg: var(--eui-ink);
  --eui-step-muted: 6%;
  --eui-step-line: 15%;
  --eui-step-soft: 73%;
  --eui-step-press: 16%;
  --eui-step-hover: 4%;
  --eui-step-raised: 4%;
  --eui-step-line-subtle: 9%;
  --eui-step-line-strong: 24%;
  --eui-step-faint: 55%;
  --eui-step-subtle: 35%;
  --eui-text-l-lo: 0;
  --eui-text-l-hi: 0.48;
  --eui-surface: white;
  --eui-sidebar: var(--eui-surface);
  --eui-shadow-color: var(--eui-ink);
  --eui-shadow-k: 1;
  --eui-danger-now: var(--eui-danger);
  --eui-success-now: var(--eui-success);
  --eui-warning-now: var(--eui-warning);
  --eui-on-danger: var(--eui-paper);
  --eui-on-success: var(--eui-paper);
}

/* ── Modo: oscuro (html.dark, o forzado en una sección) ────────────────── */
/* .dark[data-eui]: la clase y la personalidad en el mismo <html> (shadcn/ui
 * con next-themes). */
.dark,
.dark[data-eui]:not([data-eui-mode="light"]),
.dark [data-eui]:not([data-eui-mode="light"]),
[data-eui][data-eui-mode="dark"],
[data-eui-mode="dark"] [data-eui]:not([data-eui-mode="light"]) {
  --eui-bg: var(--eui-ink);
  --eui-fg: var(--eui-paper);
  --eui-step-muted: 10%;
  --eui-step-line: 19%;
  --eui-step-soft: 77%; /* texto secundario AA también sobre tarjeta y fila con hover */
  --eui-step-press: 17%;
  --eui-step-hover: 5%;
  --eui-step-raised: 4%;
  --eui-step-line-subtle: 9%;
  --eui-step-line-strong: 27%;
  --eui-step-faint: 45%;
  --eui-step-subtle: 28%;
  --eui-text-l-lo: 0.78;
  --eui-text-l-hi: 1;
  --eui-surface: var(--color-muted);
  --eui-sidebar: var(--eui-ink);
  --eui-shadow-color: black;
  --eui-shadow-k: 7;
  --eui-danger-now: var(--eui-danger-dark);
  --eui-success-now: var(--eui-success-dark);
  --eui-warning-now: var(--eui-warning-dark);
  --eui-on-danger: var(--eui-ink);
  --eui-on-success: var(--eui-ink);
}

/* Claro forzado dentro de una página oscura (el taller compara ambos). */
[data-eui][data-eui-mode="light"],
[data-eui-mode="light"] [data-eui]:not([data-eui-mode="dark"]) {
  --eui-bg: var(--eui-paper);
  --eui-fg: var(--eui-ink);
  --eui-step-muted: 6%;
  --eui-step-line: 15%;
  --eui-step-soft: 73%;
  --eui-step-press: 16%;
  --eui-step-hover: 4%;
  --eui-step-raised: 4%;
  --eui-step-line-subtle: 9%;
  --eui-step-line-strong: 24%;
  --eui-step-faint: 55%;
  --eui-step-subtle: 35%;
  --eui-text-l-lo: 0;
  --eui-text-l-hi: 0.48;
  --eui-surface: white;
  --eui-sidebar: var(--eui-surface);
  --eui-shadow-color: var(--eui-ink);
  --eui-shadow-k: 1;
  --eui-danger-now: var(--eui-danger);
  --eui-success-now: var(--eui-success);
  --eui-warning-now: var(--eui-warning);
  --eui-on-danger: var(--eui-paper);
  --eui-on-success: var(--eui-paper);
}

/* Los controles nativos (calendario de un date, lista de un select, barras
 * de scroll) siguen el modo de la sección. Solo dentro de [data-eui]: en la
 * app el modo vive en <html class="dark"> y aún hay campos con fondo claro
 * fijo que dependen del esquema claro del navegador. */
[data-eui] {
  color-scheme: light;
}

.dark[data-eui]:not([data-eui-mode="light"]),
.dark [data-eui]:not([data-eui-mode="light"]),
[data-eui][data-eui-mode="dark"],
[data-eui-mode="dark"] [data-eui]:not([data-eui-mode="light"]) {
  color-scheme: dark;
}

[data-eui][data-eui-mode="light"],
[data-eui-mode="light"] [data-eui]:not([data-eui-mode="dark"]) {
  color-scheme: light;
}

/* ── Derivación ────────────────────────────────────────────────────────── */
:root,
[data-eui] {
  /* La tinta con un poco de la luz de la marca: da temperatura a los grises. */
  --eui-fg-tinted: color-mix(in oklab, var(--eui-fg), var(--eui-brand) var(--eui-tint));

  /* Superficies y texto */
  --color-background: var(--eui-bg);
  --color-foreground: var(--eui-fg);
  --color-muted: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-muted), var(--eui-bg));
  --color-muted-foreground: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-soft), var(--eui-bg));
  --color-border: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line) * var(--eui-line))), var(--eui-bg));
  --color-secondary: var(--color-muted);
  --color-secondary-foreground: var(--eui-fg);
  --color-card: var(--eui-surface);
  --color-card-foreground: var(--eui-fg);
  --color-sidebar: var(--eui-sidebar);
  --color-sidebar-foreground: var(--eui-fg);
  --color-footer: var(--eui-ink);
  --color-footer-foreground: var(--eui-paper);

  /* Escalera de capas: la profundidad sale de apilar
   * superficies apenas distintas con bordes de 1px, no de sombras. */
  --color-surface: var(--color-card);
  --color-surface-hover: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-hover), var(--color-card));
  --color-raised: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-raised), var(--eui-bg));
  --color-border-subtle: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line-subtle) * var(--eui-line))), var(--eui-bg));
  --color-border-hover: color-mix(in oklab, var(--eui-fg-tinted) min(100%, calc(var(--eui-step-line-strong) * var(--eui-line))), var(--eui-bg));
  --color-faint: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-faint), var(--eui-bg));
  --color-subtle: color-mix(in oklab, var(--eui-fg-tinted) var(--eui-step-subtle), var(--eui-bg));
  --eui-accent-subtle: color-mix(in oklab, var(--eui-fg) 6%, transparent);
  --eui-spotlight: color-mix(in oklab, var(--eui-fg) 9%, transparent);
  --shadow-glow: 0 0 20px -3px color-mix(in oklab, var(--color-primary) min(100%, calc(15% * var(--eui-halo))), transparent);
  --shadow-subtle: 0 1px 2px 0 color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(6% * var(--eui-shadow-a))), transparent), 0 0 0 1px color-mix(in oklab, var(--eui-fg) 4%, transparent);
  --shadow-elevated: 0 10px 25px -8px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(12% * var(--eui-shadow-a))), transparent), 0 0 0 1px color-mix(in oklab, var(--eui-fg) 5%, transparent);

  /* Luz: la marca. Se usa poco y para lo que importa. */
  --eui-brand-ink-auto: var(--eui-ink);
  --color-primary: var(--eui-brand);
  --color-primary-hover: color-mix(in oklab, var(--eui-brand), var(--eui-fg) var(--eui-step-press));
  --color-primary-foreground: var(--eui-brand-ink, var(--eui-brand-ink-auto));
  /* Texto en color de marca (ligas, etiquetas): la marca acercada a la
   * tinta hasta leerse bien sobre el fondo. La marca pura es para fondos. */
  --eui-brand-text-auto: color-mix(in oklab, var(--eui-brand), var(--eui-fg) 35%);
  --color-primary-text: var(--eui-brand-text, var(--eui-brand-text-auto));
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);
  --eui-brand-wash: color-mix(in oklab, var(--eui-brand) 12%, var(--eui-bg));

  /* Estados */
  --color-destructive: var(--eui-danger-now);
  --color-destructive-foreground: var(--eui-on-danger);
  --color-success: var(--eui-success-now);
  --color-success-foreground: var(--eui-on-success);
  --color-warning: var(--eui-warning-now);
  --color-warning-foreground: var(--eui-ink);

  /* Forma. Tailwind v4 compila rounded-lg como var(--radius-lg): toda la app
   * sigue este dial, no solo los componentes. */
  --radius-xs: calc(0.125rem * var(--eui-roundness));
  --radius-sm: calc(0.375rem * var(--eui-roundness));
  --radius-md: calc(0.5rem * var(--eui-roundness));
  --radius-lg: calc(0.75rem * var(--eui-roundness));
  --radius-xl: calc(1rem * var(--eui-roundness));
  --radius-2xl: calc(1.25rem * var(--eui-roundness)); /* paneles y modales: un paso arriba de las tarjetas */
  --radius-3xl: calc(1.5rem * var(--eui-roundness));
  --radius-4xl: calc(2rem * var(--eui-roundness));
  --radius-full: 9999px;
  /* Controles: botones (md) y campos (lg) por defecto; una personalidad puede
   * hacerlos pastilla o rectos sin tocar las tarjetas. */
  --radius-button: var(--eui-control-radius, var(--radius-md));
  --radius-field: var(--eui-control-radius, var(--radius-lg));

  /* Densidad: alturas de control y aire interno de los componentes. */
  --eui-control-sm: calc(2rem * var(--eui-density));
  --eui-control-md: calc(2.5rem * var(--eui-density));
  --eui-control-lg: calc(3rem * var(--eui-density));
  --eui-pad-sm: calc(0.75rem * var(--eui-density));
  --eui-pad-md: calc(1rem * var(--eui-density));
  --eui-pad-lg: calc(1.5rem * var(--eui-density));
  --eui-gap: calc(1rem * var(--eui-density));

  /* Profundidad: sombras teñidas de tinta, nunca negro puro en claro. */
  --eui-shadow-a: calc(var(--eui-depth) * var(--eui-shadow-k));
  --shadow-sm: 0 1px 2px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent);
  --shadow-md:
    0 4px 6px -1px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(7% * var(--eui-shadow-a))), transparent),
    0 2px 4px -2px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent);
  --shadow-lg:
    0 10px 15px -3px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(8% * var(--eui-shadow-a))), transparent),
    0 4px 6px -4px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(5% * var(--eui-shadow-a))), transparent);
  --shadow-xl:
    0 20px 25px -5px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(10% * var(--eui-shadow-a))), transparent),
    0 8px 10px -6px color-mix(in oklab, var(--eui-shadow-color) min(100%, calc(10% * var(--eui-shadow-a))), transparent);

  /* Halo: el foco y el énfasis son una corona de luz, no un contorno duro. */
  --eui-ring:
    0 0 0 2px var(--eui-bg),
    /* Opaco y con el texto de marca (AA contra el fondo): el anillo pasa 3:1. */
    0 0 0 4px var(--eui-focus, var(--color-primary-text)),
    0 0 calc(18px * var(--eui-halo)) calc(3px * var(--eui-halo)) color-mix(in oklab, var(--eui-brand) min(100%, calc(30% * var(--eui-halo))), transparent);
  --eui-corona:
    0 0 0 1px color-mix(in oklab, var(--eui-brand) 35%, transparent),
    0 10px 32px -8px color-mix(in oklab, var(--eui-brand) min(100%, calc(55% * var(--eui-halo))), transparent);

  /* Movimiento: respiración. Entra exhalando, sale inhalando. */
  --eui-motion-ok: 1;
  --eui-m: calc(var(--eui-motion) * var(--eui-motion-ok));
  --eui-dur-instant: calc(90ms * var(--eui-m));
  --eui-dur-quick: calc(160ms * var(--eui-m));
  --eui-dur-calm: calc(280ms * var(--eui-m));
  --eui-dur-breath: calc(560ms * var(--eui-m));
  --eui-dur-tide: calc(1400ms * var(--eui-m));
  --eui-ease-exhale: cubic-bezier(0.22, 1, 0.36, 1);
  --eui-ease-inhale: cubic-bezier(0.64, 0, 0.78, 0);
  --eui-ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
  --eui-ease-settle: linear(0, 0.24 8%, 0.62 18%, 0.9 29%, 1.04 41%, 1.06 50%, 1.02 63%, 0.995 78%, 1);
  --eui-press-scale: calc(1 - 0.03 * min(1, var(--eui-m)));

  /* Tipografía */
  --font-sans: var(--eui-font-text);
  --font-heading: var(--eui-font-display);
  --font-mono: var(--eui-font-mono);
  --eui-soft: var(--eui-display-soft, min(100, calc(50 * var(--eui-roundness))));
  --eui-wonk: var(--eui-display-wonk, 0);
}

/* Contraste automático del texto sobre la marca (oscuro sobre luz clara,
 * claro sobre luz oscura). Una personalidad puede fijarlo con --eui-brand-ink. */
@supports (color: oklch(from red l c h)) {
  :root,
  [data-eui] {
    --eui-brand-ink-auto: oklch(from var(--eui-brand) clamp(0.2, (0.57 - l) * 999, 0.985) calc(c * 0.15) h);
    --eui-brand-text-auto: oklch(from var(--eui-brand) clamp(var(--eui-text-l-lo), l, var(--eui-text-l-hi)) c h);
    /* El hover se aleja del texto que lleva encima: aclara la marca si el
     * texto es oscuro y la oscurece si es claro (antes bajaba de AA). */
    --color-primary-hover: oklch(from var(--eui-brand) calc(l + 0.07 * clamp(-1, (l - 0.57) * 999, 1)) c h);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-eui] {
    --eui-motion-ok: 0;
  }
}

/*
 * Eclipse UI — personalidades
 *
 * Personalidades de partida (en el código se llaman expresiones: data-eui,
 * Ui::Expressions). Cada bloque es un punto de partida para un estudio:
 * /ui/personalidades lo muestra sobre una página de estudio
 * y lo copia para theme.css (con :root en lugar de [data-eui="<nombre>"]).
 * También sirve en una sección con data-eui="<nombre>".
 *
 * Cada una cambia más que el color: su voz (familias, peso, mayúsculas,
 * ancho), su forma (redondez, controles en pastilla o rectos, qué tan
 * marcados son los bordes), su aire (densidad, sombra) y su ritmo
 * (movimiento). Los metadatos (para quién, rasgos) viven en
 * app/components/ui/expressions.rb.
 *
 *   carbon   el catálogo: monocromo y técnica (abajo, valores fijos)
 *   eclipse  la base: oro cálido, editorial y tranquilo
 *   alba     spa, barre: malva, Cormorant en cursiva, pastillas, muy lenta
 *   brisa    pilates clínico, fisio: Manrope, bordes finos, sin sombras
 *   umbra    box, HIIT, cycling: Archivo condensada en mayúsculas, recta
 *   terra    yoga: terracota, Nunito y Fraunces suave, fondos teñidos
 *
 * Cada bloque fija TODOS sus diales (también los que deja en su valor base)
 * para no heredar los de una sección de otra personalidad que lo contenga.
 */

[data-eui="eclipse"] {
  --eui-focus: initial;
  --eui-moon: initial;
  --eui-brand: #a3946b;
  --eui-ink: #1a1a18;
  --eui-paper: #f5f2ec;
  --eui-tint: 25%;
  --eui-roundness: 1;
  --eui-density: 1;
  --eui-depth: 1;
  --eui-motion: 1;
  --eui-halo: 1;
  --eui-line: 1;
  --eui-control-radius: initial;
  --eui-control-case: none;
  --eui-control-tracking: normal;
  --eui-control-weight: 500;
  --eui-font-text: "Inter", system-ui, -apple-system, sans-serif;
  --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --eui-display-weight: 500;
  --eui-display-tracking: -0.02em;
  --eui-display-leading: 1.05;
  --eui-display-style: normal;
  --eui-display-case: none;
  --eui-display-stretch: normal;
  --eui-display-soft: initial;
  --eui-display-wonk: initial;
}

/* Alba: un spa al amanecer. Habla bajito: serif de alto contraste en
 * cursiva, todo en pastilla, bordes que casi no se ven y mucho aire. */
[data-eui="alba"] {
  --eui-focus: initial;
  --eui-moon: initial;
  --eui-brand: #96527a;
  --eui-ink: #2a1d24;
  --eui-paper: #faf3f2;
  --eui-tint: 30%;
  --eui-roundness: 1.75;
  --eui-density: 1.1;
  --eui-depth: 0.7;
  --eui-motion: 1.35;
  --eui-halo: 1.6;
  --eui-line: 0.6;
  --eui-control-radius: 9999px;
  --eui-control-case: none;
  --eui-control-tracking: 0.01em;
  --eui-control-weight: 500;
  --eui-font-text: "Inter", system-ui, -apple-system, sans-serif;
  --eui-font-display: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --eui-display-weight: 500;
  --eui-display-tracking: -0.005em;
  --eui-display-leading: 1;
  --eui-display-style: italic;
  --eui-display-case: none;
  --eui-display-stretch: normal;
  --eui-display-soft: initial;
  --eui-display-wonk: initial;
}

/* Brisa: un consultorio luminoso. Precisa y fresca: Manrope en todo,
 * radios chicos, bordes finos, sin sombras y un movimiento que no rebota. */
[data-eui="brisa"] {
  --eui-focus: initial;
  --eui-moon: initial;
  --eui-brand: #2f7d6d;
  --eui-ink: #0e1b19;
  --eui-paper: #f4f7f6;
  --eui-tint: 12%;
  --eui-roundness: 0.5;
  --eui-density: 0.94;
  --eui-depth: 0.35;
  --eui-motion: 0.8;
  --eui-halo: 0.6;
  --eui-line: 0.85;
  --eui-control-radius: initial;
  --eui-control-case: none;
  --eui-control-tracking: -0.005em;
  --eui-control-weight: 600;
  --eui-font-text: "Manrope", system-ui, -apple-system, sans-serif;
  --eui-font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --eui-display-weight: 700;
  --eui-display-tracking: -0.04em;
  --eui-display-leading: 1.02;
  --eui-display-style: normal;
  --eui-display-case: none;
  --eui-display-stretch: normal;
  --eui-display-soft: initial;
  --eui-display-wonk: initial;
}

/* Umbra: un box a media luz. Grita: Archivo condensada en mayúsculas,
 * todo recto, bordes marcados, botones en mayúsculas espaciadas y rápida.
 * Su modo natural es el oscuro. */
[data-eui="umbra"] {
  --eui-focus: initial;
  --eui-moon: initial;
  --eui-brand: #f2542d;
  --eui-ink: #0c0c0d;
  --eui-paper: #f0efeb;
  --eui-tint: 0%;
  --eui-roundness: 0;
  --eui-density: 0.92;
  --eui-depth: 1.4;
  --eui-motion: 0.7;
  --eui-halo: 1.2;
  --eui-line: 1.8;
  --eui-control-radius: 0;
  --eui-control-case: uppercase;
  --eui-control-tracking: 0.08em;
  --eui-control-weight: 700;
  --eui-font-text: "Inter", system-ui, -apple-system, sans-serif;
  --eui-font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --eui-display-weight: 800;
  --eui-display-tracking: -0.005em;
  --eui-display-leading: 0.92;
  --eui-display-style: normal;
  --eui-display-case: uppercase;
  --eui-display-stretch: 70%;
  --eui-display-soft: initial;
  --eui-display-wonk: initial;
}

/* Terra: un shala de comunidad. Cálida y redonda: Nunito para leer,
 * Fraunces suave para los títulos y la terracota tiñendo los grises. */
[data-eui="terra"] {
  --eui-focus: initial;
  --eui-moon: initial;
  --eui-brand: #a95a36;
  --eui-ink: #261a12;
  --eui-paper: #f6ede2;
  --eui-tint: 30%;
  --eui-roundness: 1.4;
  --eui-density: 1.05;
  --eui-depth: 0.9;
  --eui-motion: 1.15;
  --eui-halo: 1;
  --eui-line: 1.1;
  --eui-control-radius: initial;
  --eui-control-case: none;
  --eui-control-tracking: normal;
  --eui-control-weight: 700;
  --eui-font-text: "Nunito", system-ui, -apple-system, sans-serif;
  --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --eui-display-weight: 600;
  --eui-display-tracking: -0.015em;
  --eui-display-leading: 1.05;
  --eui-display-style: normal;
  --eui-display-case: none;
  --eui-display-stretch: normal;
  --eui-display-soft: 100;
  --eui-display-wonk: 1;
}

/* ── carbon: la personalidad del catálogo ───────────────────────────────
 * Monocromo: la "luz" es la propia tinta (negra en claro, casi blanca en
 * oscuro); el único color es el azul del foco. Profundidad por capas de
 * superficie y bordes de 1px. Inter + JetBrains Mono. Es la personalidad del
 * catálogo /ui.
 * Valores fijados a mano (no derivados): grises neutros exactos. */
[data-eui="carbon"],
[data-eui="carbon"][data-eui-mode="light"],
[data-eui-mode="light"] [data-eui="carbon"]:not([data-eui-mode="dark"]) {
  --eui-brand: #0a0a0a;
  --eui-ink: #0a0a0a;
  --eui-paper: #fafafa;
  --eui-tint: 0%;
  --eui-roundness: 1.25;
  --eui-density: 1;
  --eui-depth: 1;
  --eui-motion: 1;
  --eui-halo: 0.5;
  --eui-line: 1;
  --eui-control-radius: initial;
  --eui-control-case: none;
  --eui-control-tracking: normal;
  --eui-control-weight: 500;
  --eui-display-stretch: normal;
  --eui-display-soft: initial;
  --eui-display-wonk: initial;
  /* El azul del foco, opaco en claro: translúcido no llega a 3:1. */
  --eui-focus: #0284c7;
  --eui-font-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --eui-font-display: var(--eui-font-text);
  --eui-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --eui-display-weight: 600;
  --eui-display-tracking: -0.035em;
  --eui-display-style: normal;
  --eui-display-case: none;

  --eui-bg: #fafafa;
  --eui-fg: #0a0a0a;
  --color-card: #ffffff;
  --color-surface-hover: #f4f4f5;
  --color-raised: #f1f1f2;
  --color-muted: #f4f4f5;
  --color-border: #e4e4e7;
  --color-border-hover: #d4d4d8;
  --color-border-subtle: #ededef;
  --color-muted-foreground: #52525b;
  --color-faint: #71717a;
  --color-subtle: #a1a1aa;
  --color-primary: #0a0a0a;
  --color-primary-hover: #262626;
  --color-primary-foreground: #fafafa;
  --color-primary-text: #0a0a0a;
  /* El sol del medidor es negro en claro: la luna tiene que ser clara. */
  --eui-moon: #dcdce0;
  --eui-accent-subtle: rgb(10 10 10 / 0.05);
  --eui-spotlight: rgb(10 10 10 / 0.05);
  --shadow-glow: 0 0 15px -3px rgb(15 15 20 / 0.08);
  --shadow-subtle: 0 1px 2px 0 rgb(15 15 20 / 0.06), 0 0 0 1px rgb(15 15 20 / 0.04);
  --shadow-elevated: 0 10px 25px -8px rgb(15 15 20 / 0.12), 0 0 0 1px rgb(15 15 20 / 0.05);
}

.dark [data-eui="carbon"]:not([data-eui-mode="light"]),
.dark[data-eui="carbon"]:not([data-eui-mode="light"]),
[data-eui="carbon"][data-eui-mode="dark"],
[data-eui-mode="dark"] [data-eui="carbon"]:not([data-eui-mode="light"]) {
  --eui-brand: #f2f2f3;
  --eui-focus: rgb(56 189 248 / 0.55);
  --eui-bg: #111113;
  --eui-fg: #f2f2f3;
  --color-card: #1c1c1f;
  --color-surface-hover: #202023;
  --color-raised: #18181a;
  --color-muted: #202023;
  --color-border: #29292c;
  --color-border-hover: #343438;
  --color-border-subtle: #18181a;
  --color-muted-foreground: #a1a1a6;
  --color-faint: #6f6f75;
  --color-subtle: #4d4d52;
  --color-primary: #f2f2f3;
  --color-primary-hover: #ffffff;
  --color-primary-foreground: #111113;
  --color-primary-text: #f2f2f3;
  --eui-moon: initial;
  --eui-accent-subtle: rgb(242 242 243 / 0.06);
  --eui-spotlight: rgb(242 242 243 / 0.07);
  --shadow-glow: 0 0 20px -3px rgb(255 255 255 / 0.15);
  --shadow-subtle: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 0 0 1px rgb(242 242 243 / 0.02);
  --shadow-elevated: 0 10px 25px -8px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(242 242 243 / 0.04);
}

/* Claro forzado dentro de un ancestro oscuro: gana sobre el bloque de arriba. */
[data-eui="carbon"][data-eui-mode="light"],
[data-eui-mode="light"] [data-eui="carbon"]:not([data-eui-mode="dark"]) {
  --eui-brand: #0a0a0a;
  --eui-focus: #0284c7;
  --eui-bg: #fafafa;
  --eui-fg: #0a0a0a;
  --color-card: #ffffff;
  --color-surface-hover: #f4f4f5;
  --color-raised: #f1f1f2;
  --color-muted: #f4f4f5;
  --color-border: #e4e4e7;
  --color-border-hover: #d4d4d8;
  --color-border-subtle: #ededef;
  --color-muted-foreground: #52525b;
  --color-faint: #71717a;
  --color-subtle: #a1a1aa;
  --color-primary: #0a0a0a;
  --color-primary-hover: #262626;
  --color-primary-foreground: #fafafa;
  --color-primary-text: #0a0a0a;
  /* El sol del medidor es negro en claro: la luna tiene que ser clara. */
  --eui-moon: #dcdce0;
  --eui-accent-subtle: rgb(10 10 10 / 0.05);
  --eui-spotlight: rgb(10 10 10 / 0.05);
  --shadow-glow: 0 0 15px -3px rgb(15 15 20 / 0.08);
  --shadow-subtle: 0 1px 2px 0 rgb(15 15 20 / 0.06), 0 0 0 1px rgb(15 15 20 / 0.04);
  --shadow-elevated: 0 10px 25px -8px rgb(15 15 20 / 0.12), 0 0 0 1px rgb(15 15 20 / 0.05);
}

/* ── Sin Tailwind: la escala de texto y las clases eui-* ─────────────── */
:where(:root) {
  --text-3xs: 0.625rem; /* 10px: ejes de gráficas, teclas, contadores mínimos */
  --text-3xs--line-height: 0.875rem;
  --text-2xs: 0.6875rem; /* 11px: pastillas, metadatos, etiquetas mono */
  --text-2xs--line-height: 1rem;
  --text-compact: 0.8125rem; /* 13px: texto de componentes compactos (menús, avisos, celdas) */
  --text-compact--line-height: 1.125rem;
  --text-md: 0.9375rem; /* 15px: entradillas y lectura larga */
  --text-md--line-height: 1.5rem;
}

.eui-display {
  font-family: var(--font-heading);
  font-weight: var(--eui-display-weight);
  font-style: var(--eui-display-style, normal);
  letter-spacing: var(--eui-display-tracking);
  line-height: var(--eui-display-leading, 1.05);
  text-transform: var(--eui-display-case, none);
  font-stretch: var(--eui-display-stretch, normal);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" var(--eui-soft), "WONK" var(--eui-wonk);
  text-wrap: balance;
}

.eui-control-voice {
  font-weight: var(--eui-control-weight, 500);
  letter-spacing: var(--eui-control-tracking, normal);
  text-transform: var(--eui-control-case, none);
}

.eui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);

  &::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 9999px;
    background: var(--color-primary);
    box-shadow: 0 0 calc(8px * var(--eui-halo)) color-mix(in oklab, var(--color-primary) 70%, transparent);
  }
}

.eui-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.eui-focus {
  &:focus-visible {
    /* Opaco: un anillo translúcido bajaba de 3:1 contra el fondo (WCAG 1.4.11). */
    outline: 2px solid var(--eui-focus, var(--color-primary-text));
    outline-offset: 2px;
  }
}

.eui-ring {
  &:focus-visible {
    outline: none;
    box-shadow: var(--eui-ring), var(--tw-shadow, 0 0 #0000);
  }
}

.eui-corona {
  box-shadow: var(--eui-corona);
}

.eui-press {
  transition-property: transform, background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--eui-dur-quick);
  transition-timing-function: var(--eui-ease-exhale);

  &:active:not(:disabled) {
    transform: scale(var(--eui-press-scale));
  }
}

.eui-numeric {
  font-variant-numeric: tabular-nums lining-nums;
}

.eui-glass {
  background: color-mix(in oklab, var(--color-background) 78%, transparent);
  /* El prefijado va primero: si va después, Lightning CSS se queda solo con
   * él y Chrome deja de desenfocar. */
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}

@keyframes eui-rise {
  from {
    opacity: 0;
    transform: translateY(calc(10px * var(--eui-motion-ok, 1)));
  }
}

@keyframes eui-settle {
  from {
    opacity: 0;
    transform: scale(calc(1 - 0.08 * var(--eui-motion-ok, 1)));
  }
}

@keyframes eui-breathe {
  50% {
    opacity: 0.55;
  }
}

/* Lo mínimo para que una página en blanco ya hable con la personalidad. */
:where(body) {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
}