/* Generado por tools/build-tokens.mjs desde tokens/mojave.tokens.json. No editar a mano. */
@layer mj.reset, mj.vendor, mj.tokens, mj.base, mj.components, mj.modules;

/* Tema fuera de capas a propósito: debe ganarle a cualquier reset del host.
   Sin atributo sigue al sistema; data-theme o .mj-light / .mj-dark lo fijan. */
:root { color-scheme: light dark; }
:root[data-theme="light"], .mj-light { color-scheme: light; }
:root[data-theme="dark"], .mj-dark { color-scheme: dark; }

/* Breakpoints (el build los expande; con PostCSS se pueden usar tal cual):
   @custom-media --mj-below-sm (max-width: 639.98px);
   @custom-media --mj-above-sm (min-width: 640px);
   @custom-media --mj-below-md (max-width: 899.98px);
   @custom-media --mj-above-md (min-width: 900px);
   @custom-media --mj-below-lg (max-width: 1099.98px);
   @custom-media --mj-above-lg (min-width: 1100px);
   @custom-media --mj-below-xl (max-width: 1439.98px);
   @custom-media --mj-above-xl (min-width: 1440px); */

@layer mj.tokens {
  :root {
    /* ember · Rojo de Adriana's. 500 es el color de marca exacto. */
    --mj-ember-50: #FFF5F3;
    --mj-ember-100: #FFE8E3;
    --mj-ember-200: #FFCFC5;
    --mj-ember-300: #FEAB9B;
    --mj-ember-400: #FF7360;
    --mj-ember-500: #E1141B;
    --mj-ember-600: #D30012;
    --mj-ember-700: #AB0213;
    --mj-ember-800: #860110;
    --mj-ember-900: #5E010B;
    --mj-ember-950: #400006;

    /* dusk · Azul marino de estructura. 800 es el color de marca exacto. */
    --mj-dusk-50: #F2F9FE;
    --mj-dusk-100: #E3F0FB;
    --mj-dusk-200: #CADFF1;
    --mj-dusk-300: #AAC8E1;
    --mj-dusk-400: #84A9CA;
    --mj-dusk-500: #648CB0;
    --mj-dusk-600: #4C7498;
    --mj-dusk-700: #385E7F;
    --mj-dusk-800: #104268;
    --mj-dusk-900: #183148;
    --mj-dusk-950: #0E1F30;

    /* sky · Azul de comunicación. 600 es el color de marca exacto. */
    --mj-sky-50: #F2F9FE;
    --mj-sky-100: #DFF1FE;
    --mj-sky-200: #BBE1FF;
    --mj-sky-300: #8FCBFA;
    --mj-sky-400: #5EACE9;
    --mj-sky-500: #358ED1;
    --mj-sky-600: #1A6FAD;
    --mj-sky-700: #025E9B;
    --mj-sky-800: #01477A;
    --mj-sky-900: #013057;
    --mj-sky-950: #011F3C;

    /* saffron · Amarillo de hoy y en espera. 300 es el color de marca exacto. */
    --mj-saffron-50: #FFF8E3;
    --mj-saffron-100: #FAEDCB;
    --mj-saffron-200: #F0DAA1;
    --mj-saffron-300: #F4B400;
    --mj-saffron-400: #CD9C11;
    --mj-saffron-500: #AC8001;
    --mj-saffron-600: #906900;
    --mj-saffron-700: #755404;
    --mj-saffron-800: #5B3F00;
    --mj-saffron-900: #402A01;
    --mj-saffron-950: #2B1A00;

    /* cactus · Verde de éxito, solo para éxito. 600 es el color de marca exacto. */
    --mj-cactus-50: #EBFDF4;
    --mj-cactus-100: #D9F6E7;
    --mj-cactus-200: #B8E9D1;
    --mj-cactus-300: #8DD6B4;
    --mj-cactus-400: #58BB91;
    --mj-cactus-500: #1F9F72;
    --mj-cactus-600: #057A55;
    --mj-cactus-700: #026B4A;
    --mj-cactus-800: #025238;
    --mj-cactus-900: #013926;
    --mj-cactus-950: #012517;

    /* agave · Turquesa, solo para gráficas. */
    --mj-agave-300: #88D3D2;
    --mj-agave-400: #4FB7B7;
    --mj-agave-500: #0B9B9B;
    --mj-agave-700: #056868;

    /* bloom · Flor del desierto, solo para gráficas. */
    --mj-bloom-300: #FEA4C7;
    --mj-bloom-400: #EB7AA9;
    --mj-bloom-500: #D1558C;
    --mj-bloom-700: #9B225F;

    /* clay · Terracota, solo para gráficas. */
    --mj-clay-300: #FDAE86;
    --mj-clay-400: #EA8654;
    --mj-clay-500: #D16329;
    --mj-clay-700: #963903;

    /* basalt · Neutros con sesgo al tono del azul marino (255°). */
    --mj-basalt-0: #FFFFFF;
    --mj-basalt-25: #F8FAFC;
    --mj-basalt-50: #F5F8FC;
    --mj-basalt-75: #F0F3F6;
    --mj-basalt-100: #EBEEF2;
    --mj-basalt-150: #E2E7ED;
    --mj-basalt-200: #D6DCE4;
    --mj-basalt-300: #BDC4CD;
    --mj-basalt-400: #9DA5B0;
    --mj-basalt-500: #7F8995;
    --mj-basalt-600: #67717F;
    --mj-basalt-650: #646E7C;
    --mj-basalt-700: #505B6A;
    --mj-basalt-800: #3A4655;
    --mj-basalt-900: #243040;
    --mj-basalt-950: #121F2E;

    /* night · Superficies del tema oscuro: un tono más claro por nivel. */
    --mj-night-0: #090F16;
    --mj-night-1: #0E131B;
    --mj-night-2: #111720;
    --mj-night-3: #19202A;
    --mj-night-4: #1C232E;
    --mj-night-5: #242C37;

    /* bg */
    --mj-bg-canvas: light-dark(var(--mj-basalt-25), var(--mj-night-0));
    --mj-bg-surface: light-dark(var(--mj-basalt-0), var(--mj-night-2));
    --mj-bg-raised: light-dark(var(--mj-basalt-0), var(--mj-night-3));
    --mj-bg-sunken: light-dark(var(--mj-basalt-75), var(--mj-night-1));
    --mj-bg-hover: light-dark(oklch(from var(--mj-basalt-950) l c h / 5%), oklch(from var(--mj-basalt-50) l c h / 5%));
    --mj-bg-pressed: light-dark(oklch(from var(--mj-basalt-950) l c h / 9%), oklch(from var(--mj-basalt-50) l c h / 9%));
    --mj-bg-selected: light-dark(oklch(from var(--mj-sky-600) l c h / 10%), oklch(from var(--mj-sky-400) l c h / 16%));
    --mj-bg-inverse: light-dark(var(--mj-basalt-950), var(--mj-basalt-50));
    --mj-bg-scrim: light-dark(oklch(from var(--mj-dusk-950) l c h / 42%), oklch(from #000000 l c h / 62%));

    /* fg */
    --mj-fg: light-dark(var(--mj-basalt-950), var(--mj-basalt-50));
    --mj-fg-muted: light-dark(var(--mj-basalt-700), var(--mj-basalt-300));
    --mj-fg-subtle: light-dark(var(--mj-basalt-650), var(--mj-basalt-400));
    --mj-fg-disabled: light-dark(var(--mj-basalt-400), var(--mj-basalt-700));
    --mj-fg-inverse: light-dark(var(--mj-basalt-0), var(--mj-basalt-950));

    /* border */
    --mj-border-subtle: light-dark(oklch(from var(--mj-basalt-950) l c h / 8%), oklch(from var(--mj-basalt-50) l c h / 8%));
    --mj-border: light-dark(oklch(from var(--mj-basalt-950) l c h / 16%), oklch(from var(--mj-basalt-50) l c h / 16%));
    --mj-border-strong: light-dark(var(--mj-basalt-500), var(--mj-basalt-600));

    /* focus */
    --mj-focus: light-dark(var(--mj-sky-600), var(--mj-sky-300));
    --mj-focus-halo: light-dark(oklch(from var(--mj-sky-600) l c h / 20%), oklch(from var(--mj-sky-300) l c h / 24%));

    /* primary · Una sola acción principal por vista. */
    --mj-primary-fill: var(--mj-ember-500);
    --mj-primary-on-fill: var(--mj-basalt-0);
    --mj-primary-ink: light-dark(var(--mj-ember-700), var(--mj-ember-300));
    --mj-primary-soft: light-dark(var(--mj-ember-100), color-mix(in oklab, var(--mj-ember-500) 20%, var(--mj-night-2)));
    --mj-primary-soft-ink: light-dark(var(--mj-ember-800), var(--mj-ember-200));

    /* critical · Error, rechazo, baja. */
    --mj-critical-fill: var(--mj-ember-700);
    --mj-critical-on-fill: var(--mj-basalt-0);
    --mj-critical-ink: light-dark(var(--mj-ember-700), var(--mj-ember-300));
    --mj-critical-soft: light-dark(var(--mj-ember-100), color-mix(in oklab, var(--mj-ember-500) 20%, var(--mj-night-2)));
    --mj-critical-soft-ink: light-dark(var(--mj-ember-800), var(--mj-ember-200));

    /* structure · Navegación, selección y tiles de resumen. */
    --mj-structure-fill: light-dark(var(--mj-dusk-800), var(--mj-dusk-700));
    --mj-structure-on-fill: var(--mj-basalt-0);
    --mj-structure-ink: light-dark(var(--mj-dusk-800), var(--mj-dusk-300));
    --mj-structure-soft: light-dark(var(--mj-dusk-100), color-mix(in oklab, var(--mj-dusk-500) 24%, var(--mj-night-2)));
    --mj-structure-soft-ink: light-dark(var(--mj-dusk-800), var(--mj-dusk-200));

    /* info · Comunicación: correo, SMS, llamadas. */
    --mj-info-fill: var(--mj-sky-600);
    --mj-info-on-fill: var(--mj-basalt-0);
    --mj-info-ink: light-dark(var(--mj-sky-700), var(--mj-sky-300));
    --mj-info-soft: light-dark(var(--mj-sky-100), color-mix(in oklab, var(--mj-sky-500) 22%, var(--mj-night-2)));
    --mj-info-soft-ink: light-dark(var(--mj-sky-800), var(--mj-sky-200));

    /* attention · Hoy, en espera, por vencer. */
    --mj-attention-fill: var(--mj-saffron-300);
    --mj-attention-on-fill: var(--mj-dusk-950);
    --mj-attention-ink: light-dark(var(--mj-saffron-700), var(--mj-saffron-200));
    --mj-attention-soft: light-dark(var(--mj-saffron-100), color-mix(in oklab, var(--mj-saffron-300) 18%, var(--mj-night-2)));
    --mj-attention-soft-ink: light-dark(var(--mj-saffron-800), var(--mj-saffron-200));

    /* success · Entregado, pagado, completado. Solo eso. */
    --mj-success-fill: var(--mj-cactus-600);
    --mj-success-on-fill: var(--mj-basalt-0);
    --mj-success-ink: light-dark(var(--mj-cactus-700), var(--mj-cactus-300));
    --mj-success-soft: light-dark(var(--mj-cactus-100), color-mix(in oklab, var(--mj-cactus-500) 20%, var(--mj-night-2)));
    --mj-success-soft-ink: light-dark(var(--mj-cactus-800), var(--mj-cactus-200));

    /* neutral · Borrador, sin estado. */
    --mj-neutral-fill: light-dark(var(--mj-basalt-700), var(--mj-basalt-600));
    --mj-neutral-on-fill: var(--mj-basalt-0);
    --mj-neutral-ink: light-dark(var(--mj-basalt-700), var(--mj-basalt-300));
    --mj-neutral-soft: light-dark(var(--mj-basalt-100), color-mix(in oklab, var(--mj-basalt-0) 9%, var(--mj-night-2)));
    --mj-neutral-soft-ink: light-dark(var(--mj-basalt-800), var(--mj-basalt-200));

    /* signature · Firma: azul marino sólido con curvas de nivel. Una por pantalla, solo en la capa resumen. */
    --mj-signature-bg: var(--mj-structure-fill);
    --mj-signature-line: rgb(255 255 255 / 0.11);
    --mj-signature-on: var(--mj-basalt-0);

    /* switch */
    --mj-switch-track: light-dark(var(--mj-basalt-500), var(--mj-basalt-600));

    /* state */
    --mj-state-darken: var(--mj-basalt-950);
    --mj-state-hover: 7%;
    --mj-state-pressed: 12%;

    /* series · Categóricas, orden fijo, nunca severidad. */
    --mj-series-1: light-dark(var(--mj-dusk-800), var(--mj-sky-300));
    --mj-series-2: light-dark(var(--mj-sky-500), var(--mj-dusk-400));
    --mj-series-3: light-dark(var(--mj-saffron-500), var(--mj-saffron-300));
    --mj-series-4: light-dark(var(--mj-agave-500), var(--mj-agave-400));
    --mj-series-5: light-dark(var(--mj-bloom-500), var(--mj-bloom-400));
    --mj-series-6: light-dark(var(--mj-clay-500), var(--mj-clay-400));

    /* chart */
    --mj-chart-grid: light-dark(oklch(from var(--mj-basalt-950) l c h / 8%), oklch(from var(--mj-basalt-50) l c h / 8%));
    --mj-chart-axis: var(--mj-fg-subtle);

    /* space · Escala de 4 pt. */
    --mj-space-0: 0px;
    --mj-space-1: 4px;
    --mj-space-2: 8px;
    --mj-space-3: 12px;
    --mj-space-4: 16px;
    --mj-space-5: 20px;
    --mj-space-6: 24px;
    --mj-space-8: 32px;
    --mj-space-10: 40px;
    --mj-space-12: 48px;
    --mj-space-16: 64px;
    --mj-space-20: 80px;
    --mj-space-24: 96px;
    --mj-space-32: 128px;
    --mj-space-px: 1px;
    --mj-space-0-5: 2px;
    --mj-space-1-5: 6px;

    /* inline */
    --mj-inline-tight: var(--mj-space-1);
    --mj-inline: var(--mj-space-2);
    --mj-inline-loose: var(--mj-space-3);

    /* stack */
    --mj-stack-tight: var(--mj-space-1);
    --mj-stack: var(--mj-space-2);
    --mj-stack-group: var(--mj-space-4);
    --mj-stack-block: var(--mj-space-6);
    --mj-stack-region: var(--mj-space-10);

    /* section */
    --mj-section: clamp(64px, 48px + 4.4444vw, 112px);

    /* inset */
    --mj-inset-card: var(--mj-space-6);
    --mj-inset-tile: var(--mj-space-5);
    --mj-inset-popover: var(--mj-space-2);

    /* bento */
    --mj-bento-gap: var(--mj-space-4);
    --mj-bento-row: 104px;

    /* gutter */
    --mj-gutter: clamp(16px, 8px + 2.2222vw, 40px);

    /* content */
    --mj-content-max: 1440px;

    /* reading */
    --mj-reading-max: 68ch;

    /* grid */
    --mj-grid-columns: 12;

    /* breakpoint · Generan @custom-media --mj-below-* y --mj-above-*. lg es donde el navbar pasa a menú. */
    --mj-breakpoint-sm: 640px;
    --mj-breakpoint-md: 900px;
    --mj-breakpoint-lg: 1100px;
    --mj-breakpoint-xl: 1440px;

    /* viewport */
    --mj-viewport-min: 360px;

    /* radius · Concéntricos: radio interior = exterior − padding. */
    --mj-radius-2xs: 4px;
    --mj-radius-xs: 6px;
    --mj-radius-sm: 8px;
    --mj-radius-md: 12px;
    --mj-radius-lg: 16px;
    --mj-radius-xl: 20px;
    --mj-radius-2xl: 28px;
    --mj-radius-3xl: 36px;
    --mj-radius-pill: 999px;

    /* font */
    --mj-font-display: 'Bricolage Grotesque', 'Onest', ui-sans-serif, system-ui, sans-serif;
    --mj-font-ui: 'Onest', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
    --mj-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

    /* text · Del 2xs al xl son fijos para no mover tablas; del 4xl arriba son fluidos. */
    --mj-text-2xs: 0.6875rem;
    --mj-text-xs: 0.75rem;
    --mj-text-sm: 0.8125rem;
    --mj-text-md: 0.875rem;
    --mj-text-lg: 1rem;
    --mj-text-xl: 1.125rem;
    --mj-text-2xl: 1.25rem;
    --mj-text-3xl: 1.5rem;
    --mj-text-4xl: clamp(1.625rem, 1.5rem + 0.5556vw, 2rem);
    --mj-text-5xl: clamp(2rem, 1.8333rem + 0.7407vw, 2.5rem);
    --mj-text-6xl: clamp(2.5rem, 2.1667rem + 1.4815vw, 3.5rem);
    --mj-text-7xl: clamp(3rem, 2.3333rem + 2.963vw, 5rem);
    --mj-text-8xl: clamp(4.5rem, 3.3333rem + 5.1852vw, 8rem);

    /* leading */
    --mj-leading-none: 0.92;
    --mj-leading-tight: 1.08;
    --mj-leading-snug: 1.25;
    --mj-leading-normal: 1.45;
    --mj-leading-relaxed: 1.6;

    /* tracking · En em. */
    --mj-tracking-display: -0.04em;
    --mj-tracking-heading: -0.02em;
    --mj-tracking-overline: 0.09em;

    /* weight */
    --mj-weight-regular: 400;
    --mj-weight-medium: 500;
    --mj-weight-semibold: 600;
    --mj-weight-bold: 700;

    /* shadow · Teñidas de azul marino; con la altura crece el blur y baja la opacidad. En oscuro se suma un brillo interior de 1 px. */
    --mj-shadow-xs: 0px 1px 2px 0px light-dark(rgb(14 31 48 / 0.06), rgb(0 0 0 / 0.4));
    --mj-shadow-sm: 0px 1px 2px 0px light-dark(rgb(14 31 48 / 0.05), rgb(0 0 0 / 0.4)), 0px 3px 8px -2px light-dark(rgb(14 31 48 / 0.07), rgb(0 0 0 / 0.35));
    --mj-shadow-thumb: inset 0px 1px 0px 0px light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / 0.06)), 0px 1px 2px 0px light-dark(rgb(14 31 48 / 0.08), rgb(0 0 0 / 0.5)), 0px 4px 12px -3px light-dark(rgb(14 31 48 / 0.12), rgb(0 0 0 / 0.5));
    --mj-shadow-md: inset 0px 1px 0px 0px light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / 0.05)), 0px 2px 4px -1px light-dark(rgb(14 31 48 / 0.06), rgb(0 0 0 / 0.3)), 0px 14px 32px -10px light-dark(rgb(14 31 48 / 0.16), rgb(0 0 0 / 0.7));
    --mj-shadow-lg: inset 0px 1px 0px 0px light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / 0.06)), 0px 4px 8px -2px light-dark(rgb(14 31 48 / 0.05), rgb(0 0 0 / 0.35)), 0px 30px 60px -18px light-dark(rgb(14 31 48 / 0.22), rgb(0 0 0 / 0.8));
    --mj-shadow-xl: inset 0px 1px 0px 0px light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / 0.07)), 0px 8px 16px -6px light-dark(rgb(14 31 48 / 0.06), rgb(0 0 0 / 0.4)), 0px 50px 100px -28px light-dark(rgb(14 31 48 / 0.3), rgb(0 0 0 / 0.9));

    /* highlight */
    --mj-highlight: inset 0px 0px 0px 1px var(--mj-border-subtle), inset 0px 1px 0px 0px light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / 0.04));

    /* ease */
    --mj-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --mj-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --mj-ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* spring · Resortes físicos. El build los resuelve a linear() y emite --mj-dur-<nombre> con su tiempo de asentamiento. $value es una aproximación cúbica para herramientas que no leen la extensión. */
    --mj-spring-snappy: linear(0, 0.009 1.7%, 0.033 3.3%, 0.068 5%, 0.157 8.3%, 0.411 16.7%, 0.546 21.7%, 0.623 25%, 0.690 28.3%, 0.771 33.3%, 0.833 38.3%, 0.893 45%, 0.952 56.7%, 1);
    --mj-dur-snappy: 430ms;
    --mj-spring-smooth: linear(0, 0.008 1.7%, 0.029 3.3%, 0.061 5%, 0.100 6.7%, 0.194 10%, 0.450 18.3%, 0.586 23.3%, 0.665 26.7%, 0.733 30%, 0.815 35%, 0.877 40%, 0.933 46.7%, 0.978 56.7%, 1.002 98.3%, 1);
    --mj-dur-smooth: 560ms;
    --mj-spring-bouncy: linear(0, 0.011 1.7%, 0.041 3.3%, 0.086 5%, 0.141 6.7%, 0.272 10%, 0.549 16.7%, 0.672 20%, 0.777 23.3%, 0.863 26.7%, 0.929 30%, 0.977 33.3%, 1.010 36.7%, 1.031 40%, 1.045 45%, 0.998 98.3%, 1);
    --mj-dur-bouncy: 810ms;

    /* dur */
    --mj-dur-instant: 90ms;
    --mj-dur-quick: 160ms;
    --mj-dur-base: 240ms;
    --mj-dur-gentle: 340ms;
    --mj-dur-slow: 520ms;
    --mj-dur-scenic: 900ms;

    /* stagger */
    --mj-stagger: 40ms;

    /* press */
    --mj-press-scale: 0.97;

    /* enter */
    --mj-enter-distance: 10px;

    /* control */
    --mj-control-sm: 32px;
    --mj-control-md: 40px;
    --mj-control-lg: 48px;
    --mj-control-pad: var(--mj-space-4);

    /* row */
    --mj-row: 56px;

    /* panel · Alto del cuerpo de paneles y listas acotadas, en filas (--mj-row). El alto se calcula en CSS, así que la densidad compacta lo reescala sola. Ver ADOPCION.md, «Paneles, tablas y listas». */
    --mj-panel-rows-min: 3;
    --mj-panel-rows-max: 8.5;
    --mj-panel-viewport-max: 60dvh;
    --mj-panel-viewport-max-sm: 50dvh;

    /* icon */
    --mj-icon-sm: 16px;
    --mj-icon-md: 18px;
    --mj-icon-lg: 22px;

    /* dialog */
    --mj-dialog-sm: 440px;
    --mj-dialog-md: 640px;
    --mj-dialog-lg: 960px;

    /* z · Alineado con las capas de MudBlazor (popovers 1200, diálogos 1400, snackbars 1500). */
    --mj-z-sticky: 100;
    --mj-z-nav: 200;
    --mj-z-drawer: 1250;
    --mj-z-softphone: 1300;
    --mj-z-modal: 1400;
    --mj-z-toast: 1500;
  }

  /* Densidad compacta: un atributo reescala controles, insets y ritmo. */
  :root[data-density="compact"] {
    --mj-stack-group: var(--mj-space-3);
    --mj-stack-block: var(--mj-space-4);
    --mj-stack-region: var(--mj-space-8);
    --mj-inset-card: var(--mj-space-4);
    --mj-inset-tile: var(--mj-space-4);
    --mj-bento-gap: var(--mj-space-3);
    --mj-bento-row: 88px;
    --mj-control-sm: 28px;
    --mj-control-md: 34px;
    --mj-control-lg: 40px;
    --mj-control-pad: var(--mj-space-3);
    --mj-row: 44px;
  }

  /* Movimiento reducido: nada viaja; lo demás es un fundido corto. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --mj-dur-snappy: 120ms;
      --mj-dur-smooth: 120ms;
      --mj-dur-bouncy: 120ms;
      --mj-dur-quick: 1ms;
      --mj-dur-base: 120ms;
      --mj-dur-gentle: 120ms;
      --mj-dur-slow: 120ms;
      --mj-dur-scenic: 1ms;
      --mj-stagger: 0ms;
      --mj-press-scale: 1;
      --mj-enter-distance: 0px;
    }
  }
  :root[data-motion="reduce"] {
    --mj-dur-snappy: 120ms;
    --mj-dur-smooth: 120ms;
    --mj-dur-bouncy: 120ms;
    --mj-dur-quick: 1ms;
    --mj-dur-base: 120ms;
    --mj-dur-gentle: 120ms;
    --mj-dur-slow: 120ms;
    --mj-dur-scenic: 1ms;
    --mj-stagger: 0ms;
    --mj-press-scale: 1;
    --mj-enter-distance: 0px;
  }
}

@layer mj.components {
/* ==========================================================================
   AG MOJAVE — COMPONENTES
   Se cargan dentro de @layer mj.components (lo hace tools/build.mjs).
   Solo leen tokens semánticos. Una receta por patrón: un segmented, unas tabs,
   un diálogo, un anillo de foco. Hover y pressed salen de capas de estado
   (color-mix con el color del texto), así cada variante obtiene los suyos.
   Los breakpoints se escriben como @media (max-width: 899.98px) y los expande el build.
   ========================================================================== */

/* ---------- Compartido ---------------------------------------------------- */
.mj-icon, .mj-btn svg, .mj-chip svg, .mj-alert svg, .mj-status svg, .mj-nav svg,
.mj-search svg, .mj-menu svg, .mj-toast svg, .mj-empty svg, .mj-tile svg.lucide {
    width: var(--mj-icon-md); height: var(--mj-icon-md);
    flex: none; stroke-width: 1.75;
}
:where([class^="mj-"], [class*=" mj-"]):focus-visible {
    outline: 2px solid var(--mj-focus);
    outline-offset: 2px;
}
a.mj-btn, a.mj-tile, .mj-nav__brand, .mj-nav__link { text-decoration: none; }
.mj-num {
    font-family: var(--mj-font-display);
    font-variant-numeric: tabular-nums;
    font-variation-settings: "wdth" 85, "opsz" 72;
    letter-spacing: var(--mj-tracking-display);
    line-height: var(--mj-leading-none);
}
.mj-overline {
    font-size: var(--mj-text-2xs);
    font-weight: var(--mj-weight-semibold);
    letter-spacing: var(--mj-tracking-overline);
    text-transform: uppercase;
    color: var(--mj-fg-subtle);
}
.mj-kbd {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 22px; padding: 0 var(--mj-space-1-5);
    font: 500 var(--mj-text-2xs)/1 var(--mj-font-mono);
    color: var(--mj-fg-muted);
    background: var(--mj-bg-surface);
    border-radius: var(--mj-radius-2xs);
    box-shadow: inset 0 0 0 1px var(--mj-border), 0 1px 0 var(--mj-border);
}
.mj-visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Botón -------------------------------------------------------- */
.mj-btn {
    --_bg: var(--mj-bg-surface); --_fg: var(--mj-fg); --_bd: var(--mj-border);
    --_shadow: var(--mj-shadow-xs);
    --_state: var(--_fg);               /* color de la capa de estado */
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--mj-inline);
    height: var(--mj-control-md);
    padding-inline: var(--mj-control-pad);
    font: var(--mj-weight-semibold) var(--mj-text-md)/1 var(--mj-font-ui);
    letter-spacing: -0.005em;
    color: var(--_fg);
    background-color: var(--_bg);
    border: 0;
    border-radius: var(--mj-radius-pill);
    box-shadow: inset 0 0 0 1px var(--_bd), var(--_shadow);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--mj-dur-quick) var(--mj-ease-hover),
        box-shadow var(--mj-dur-quick) var(--mj-ease-hover),
        color var(--mj-dur-quick) var(--mj-ease-hover),
        transform var(--mj-dur-snappy) var(--mj-spring-snappy);
}
@media (hover: hover) and (pointer: fine) {
    .mj-btn:not(:disabled, [aria-disabled="true"]):hover { background-color: color-mix(in oklab, var(--_bg), var(--_state) var(--mj-state-hover)); }
}
.mj-btn:not(:disabled, [aria-disabled="true"]):active {
    background-color: color-mix(in oklab, var(--_bg), var(--_state) var(--mj-state-pressed));
    transform: scale(var(--mj-press-scale));
    transition-duration: var(--mj-dur-instant);
}
.mj-btn:disabled, .mj-btn[aria-disabled="true"] {
    --_bg: var(--mj-bg-sunken); --_fg: var(--mj-fg-disabled); --_bd: transparent; --_shadow: none;
    cursor: not-allowed;
}
/* Rellenos: la capa de estado oscurece para que el texto blanco no pierda contraste. */
.mj-btn--primary {
    --_bg: var(--mj-primary-fill); --_fg: var(--mj-primary-on-fill); --_bd: transparent; --_state: var(--mj-state-darken);
    --_shadow: inset 0 1px 0 oklch(from var(--mj-primary-on-fill) l c h / 18%), 0 8px 18px -10px oklch(from var(--mj-primary-fill) l c h / 80%);
    background-image: linear-gradient(180deg, oklch(from var(--mj-primary-on-fill) l c h / 10%), transparent 60%);
}
.mj-btn--secondary {
    --_bg: var(--mj-structure-fill); --_fg: var(--mj-structure-on-fill); --_bd: transparent; --_state: var(--mj-state-darken);
    --_shadow: inset 0 1px 0 oklch(from var(--mj-structure-on-fill) l c h / 10%);
}
.mj-btn--tonal { --_bg: var(--mj-structure-soft); --_fg: var(--mj-structure-soft-ink); --_bd: transparent; --_shadow: none; }
.mj-btn--ghost { --_bg: transparent; --_bd: transparent; --_shadow: none; --_fg: var(--mj-fg-muted); --_state: var(--mj-fg); }
.mj-btn--ghost:hover { color: var(--mj-fg); }
.mj-btn--critical { --_fg: var(--mj-critical-ink); --_bd: oklch(from var(--mj-critical-ink) l c h / 40%); }
.mj-btn--sm { height: var(--mj-control-sm); padding-inline: var(--mj-space-3); font-size: var(--mj-text-sm); gap: var(--mj-space-1-5); }
.mj-btn--sm svg { width: var(--mj-icon-sm); height: var(--mj-icon-sm); }
.mj-btn--lg { height: var(--mj-control-lg); padding-inline: var(--mj-space-6); font-size: var(--mj-text-lg); }
.mj-btn--icon { width: var(--mj-control-md); padding: 0; }
.mj-btn--icon.mj-btn--sm { width: var(--mj-control-sm); }
.mj-btn__label { display: inline-flex; align-items: center; gap: inherit; transition: opacity var(--mj-dur-quick) var(--mj-ease-out), transform var(--mj-dur-base) var(--mj-ease-out); }
.mj-btn__spinner {
    position: absolute; inset: 0; margin: auto;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    opacity: 0; transform: scale(.6);
    transition: opacity var(--mj-dur-quick) var(--mj-ease-out), transform var(--mj-dur-snappy) var(--mj-spring-snappy);
}
.mj-btn[aria-busy="true"] { cursor: progress; }
.mj-btn[aria-busy="true"] .mj-btn__label { opacity: 0; transform: translateY(-4px); }
.mj-btn[aria-busy="true"] .mj-btn__spinner { opacity: 1; transform: scale(1); animation: mj-spin 700ms linear infinite; }
@keyframes mj-spin { to { rotate: 360deg; } }

/* ---------- Campos ------------------------------------------------------- */
.mj-field { display: grid; gap: var(--mj-stack); min-width: 0; }
.mj-field__label { font-size: var(--mj-text-sm); font-weight: var(--mj-weight-medium); color: var(--mj-fg); }
.mj-field__label small { font-weight: var(--mj-weight-regular); color: var(--mj-fg-subtle); margin-inline-start: var(--mj-space-1); font-size: inherit; }
.mj-field__hint { display: flex; gap: var(--mj-space-1-5); align-items: center; font-size: var(--mj-text-xs); color: var(--mj-fg-subtle); }
.mj-field__hint svg { width: 14px; height: 14px; }
.mj-input, .mj-select select, .mj-textarea {
    width: 100%; min-width: 0;
    height: var(--mj-control-md);
    padding-inline: var(--mj-control-pad);
    font: var(--mj-weight-regular) var(--mj-text-md)/1.2 var(--mj-font-ui);
    color: var(--mj-fg);
    background: var(--mj-bg-surface);
    border: 1px solid var(--mj-border-strong);
    border-radius: var(--mj-radius-pill);
    transition: border-color var(--mj-dur-quick) var(--mj-ease-hover), box-shadow var(--mj-dur-base) var(--mj-ease-out);
}
.mj-textarea { height: auto; min-height: 96px; padding-block: var(--mj-space-3); border-radius: var(--mj-radius-lg); resize: vertical; line-height: var(--mj-leading-normal); }
.mj-input::placeholder, .mj-textarea::placeholder { color: var(--mj-fg-subtle); }
.mj-input:hover, .mj-select select:hover, .mj-textarea:hover { border-color: var(--mj-fg-muted); }
.mj-input:focus, .mj-select select:focus, .mj-textarea:focus { outline: none; border-color: var(--mj-focus); box-shadow: 0 0 0 4px var(--mj-focus-halo); }
.mj-input[aria-invalid="true"] { border-color: var(--mj-critical-ink); }
.mj-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px oklch(from var(--mj-critical-ink) l c h / 18%); }
.mj-field:has([aria-invalid="true"]) .mj-field__hint { color: var(--mj-critical-ink); }
.mj-select { position: relative; display: block; }
.mj-select select { appearance: none; padding-inline-end: var(--mj-space-10); cursor: pointer; }
.mj-select::after {
    content: ""; position: absolute; inset-inline-end: var(--mj-space-4); top: 50%;
    width: 10px; height: 10px; margin-top: -7px;
    border: solid var(--mj-fg-muted); border-width: 0 1.75px 1.75px 0;
    rotate: 45deg; pointer-events: none;
}
.mj-search { position: relative; display: flex; align-items: center; }
.mj-search > svg { position: absolute; inset-inline-start: var(--mj-space-4); color: var(--mj-fg-subtle); pointer-events: none; }
.mj-search .mj-input { padding-inline-start: calc(var(--mj-space-4) + var(--mj-icon-md) + var(--mj-space-2)); padding-inline-end: var(--mj-space-12); background: var(--mj-bg-sunken); border-color: transparent; }
.mj-search .mj-input:hover { border-color: var(--mj-border); }
.mj-search .mj-input:focus { background: var(--mj-bg-surface); border-color: var(--mj-focus); }
.mj-search .mj-kbd { position: absolute; inset-inline-end: var(--mj-space-3); }

/* ---------- Checkbox · radio · switch ------------------------------------ */
.mj-choice { display: inline-flex; align-items: center; gap: var(--mj-space-3); font-size: var(--mj-text-md); color: var(--mj-fg); cursor: pointer; position: relative; min-height: 28px; }
.mj-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mj-check, .mj-radio {
    position: relative; flex: none; display: grid; place-items: center;
    width: 20px; height: 20px;
    background: var(--mj-bg-surface);
    border: 1.5px solid var(--mj-border-strong);
    transition: background-color var(--mj-dur-quick) var(--mj-ease-hover), border-color var(--mj-dur-quick) var(--mj-ease-hover), transform var(--mj-dur-snappy) var(--mj-spring-snappy);
}
.mj-check { border-radius: var(--mj-radius-xs); }
.mj-radio { border-radius: 50%; }
.mj-check svg { width: 14px; height: 14px; stroke: var(--mj-structure-on-fill); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--mj-dur-base) var(--mj-ease-out); }
.mj-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mj-structure-on-fill); transform: scale(0); transition: transform var(--mj-dur-bouncy) var(--mj-spring-bouncy); }
.mj-choice:hover .mj-check, .mj-choice:hover .mj-radio { border-color: var(--mj-fg-muted); }
.mj-choice:active .mj-check, .mj-choice:active .mj-radio { transform: scale(.9); }
.mj-choice input:checked + .mj-check, .mj-choice input:checked + .mj-radio { background: var(--mj-structure-fill); border-color: var(--mj-structure-fill); }
.mj-choice input:checked + .mj-check svg { stroke-dashoffset: 0; }
.mj-choice input:checked + .mj-radio::after { transform: scale(1); }
.mj-choice input:focus-visible + .mj-check, .mj-choice input:focus-visible + .mj-radio, .mj-choice input:focus-visible + .mj-switch { outline: 2px solid var(--mj-focus); outline-offset: 2px; }
.mj-switch {
    position: relative; flex: none;
    width: 42px; height: 26px; border-radius: var(--mj-radius-pill);
    background: var(--mj-switch-track);
    transition: background-color var(--mj-dur-base) var(--mj-ease-hover);
}
.mj-switch::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: var(--mj-radius-pill);
    background: var(--mj-basalt-0);
    box-shadow: var(--mj-shadow-thumb);
    transition: transform var(--mj-dur-snappy) var(--mj-spring-snappy), width var(--mj-dur-snappy) var(--mj-spring-snappy);
}
.mj-choice:active .mj-switch::after { width: 25px; }
.mj-choice input:checked + .mj-switch { background: var(--mj-structure-fill); }
.mj-choice input:checked + .mj-switch::after { transform: translateX(16px); }
.mj-choice:active input:checked + .mj-switch::after { transform: translateX(11px); }

/* ---------- Segmented (el único) ----------------------------------------- */
.mj-segmented {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; gap: var(--mj-space-0-5);
    padding: var(--mj-space-1);
    background: var(--mj-bg-sunken);
    border-radius: var(--mj-radius-pill);
    box-shadow: inset 0 0 0 1px var(--mj-border-subtle);
    max-width: 100%;
}
.mj-segmented__thumb {
    position: absolute; z-index: -1; top: var(--mj-space-1); bottom: var(--mj-space-1); left: 0;
    width: var(--_w, 0px);
    transform: translateX(var(--_x, 0px));
    background: var(--mj-bg-raised);
    border-radius: var(--mj-radius-pill);
    box-shadow: var(--mj-shadow-thumb);
    transition: transform var(--mj-dur-snappy) var(--mj-spring-snappy), width var(--mj-dur-snappy) var(--mj-spring-snappy);
}
.mj-segmented__item {
    display: inline-flex; align-items: center; gap: var(--mj-space-1-5);
    height: calc(var(--mj-control-md) - 8px);
    padding-inline: var(--mj-space-4);
    font: var(--mj-weight-medium) var(--mj-text-sm)/1 var(--mj-font-ui);
    color: var(--mj-fg-muted);
    background: none; border: 0; border-radius: var(--mj-radius-pill);
    cursor: pointer; white-space: nowrap;
    transition: color var(--mj-dur-quick) var(--mj-ease-hover);
}
.mj-segmented__item svg { width: var(--mj-icon-sm); height: var(--mj-icon-sm); }
.mj-segmented__item:hover { color: var(--mj-fg); }
.mj-segmented__item[aria-checked="true"], .mj-segmented__item[aria-selected="true"], .mj-segmented__item[aria-pressed="true"] { color: var(--mj-fg); font-weight: var(--mj-weight-semibold); }
.mj-segmented--sm .mj-segmented__item { height: calc(var(--mj-control-sm) - 8px); padding-inline: var(--mj-space-3); font-size: var(--mj-text-xs); }

/* ---------- Tabs (secciones de una página) ------------------------------- */
.mj-tabs { position: relative; display: flex; gap: var(--mj-space-6); border-bottom: 1px solid var(--mj-border-subtle); overflow-x: auto; scrollbar-width: none; }
.mj-tabs__tab {
    position: relative; padding: var(--mj-space-3) 0;
    font: var(--mj-weight-medium) var(--mj-text-md)/1 var(--mj-font-ui);
    color: var(--mj-fg-subtle); background: none; border: 0; cursor: pointer; white-space: nowrap;
    display: inline-flex; gap: var(--mj-space-2); align-items: center;
    transition: color var(--mj-dur-quick) var(--mj-ease-hover);
}
.mj-tabs__tab:hover { color: var(--mj-fg); }
.mj-tabs__tab[aria-selected="true"] { color: var(--mj-fg); font-weight: var(--mj-weight-semibold); }
.mj-tabs__count { font-size: var(--mj-text-2xs); padding: 3px 7px; border-radius: var(--mj-radius-pill); background: var(--mj-neutral-soft); color: var(--mj-neutral-soft-ink); font-weight: var(--mj-weight-semibold); }
.mj-tabs__indicator {
    position: absolute; bottom: -1px; left: 0; height: 2px;
    width: var(--_w, 0px); transform: translateX(var(--_x, 0px));
    background: var(--mj-fg); border-radius: 2px;
    transition: transform var(--mj-dur-snappy) var(--mj-spring-snappy), width var(--mj-dur-snappy) var(--mj-spring-snappy);
}

/* ---------- Chips, tags, estados ----------------------------------------- */
.mj-chip {
    --_bg: var(--mj-bg-surface); --_fg: var(--mj-fg-muted); --_bd: var(--mj-border);
    display: inline-flex; align-items: center; gap: var(--mj-space-1-5);
    height: var(--mj-control-sm); padding-inline: var(--mj-space-3);
    font: var(--mj-weight-medium) var(--mj-text-sm)/1 var(--mj-font-ui);
    color: var(--_fg); background-color: var(--_bg);
    border: 0; border-radius: var(--mj-radius-pill);
    box-shadow: inset 0 0 0 1px var(--_bd);
    cursor: pointer;
    transition: background-color var(--mj-dur-quick) var(--mj-ease-hover), color var(--mj-dur-quick) var(--mj-ease-hover), box-shadow var(--mj-dur-quick) var(--mj-ease-hover), transform var(--mj-dur-snappy) var(--mj-spring-snappy);
}
.mj-chip svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
    .mj-chip:hover { --_bd: var(--mj-border-strong); background-color: color-mix(in oklab, var(--_bg), var(--_fg) var(--mj-state-hover)); color: var(--mj-fg); }
}
.mj-chip:active { transform: scale(var(--mj-press-scale)); }
.mj-chip .mj-chip__check { width: 0; opacity: 0; margin-inline-end: -6px; transition: width var(--mj-dur-snappy) var(--mj-spring-snappy), opacity var(--mj-dur-quick) var(--mj-ease-out), margin var(--mj-dur-snappy) var(--mj-spring-snappy); }
.mj-chip[aria-pressed="true"] { --_bg: var(--mj-structure-soft); --_fg: var(--mj-structure-soft-ink); --_bd: oklch(from var(--mj-structure-ink) l c h / 30%); }
.mj-chip[aria-pressed="true"]:hover { color: var(--_fg); }
.mj-chip[aria-pressed="true"] .mj-chip__check { width: 15px; opacity: 1; margin-inline-end: 0; }
.mj-chip__count { font-variant-numeric: tabular-nums; font-size: var(--mj-text-xs); color: var(--mj-fg-subtle); }
.mj-chip[aria-pressed="true"] .mj-chip__count { color: inherit; }
.mj-tag {
    display: inline-flex; align-items: center; gap: var(--mj-space-1);
    height: 24px; padding-inline: var(--mj-space-2);
    font: var(--mj-weight-medium) var(--mj-text-xs)/1 var(--mj-font-ui);
    color: var(--mj-neutral-soft-ink); background: var(--mj-neutral-soft);
    border-radius: var(--mj-radius-sm);
}
.mj-status {
    --_bg: var(--mj-neutral-soft); --_fg: var(--mj-neutral-soft-ink); --_dot: var(--mj-neutral-ink);
    display: inline-flex; align-items: center; gap: var(--mj-space-1-5);
    height: 24px; padding-inline: var(--mj-space-2);
    font: var(--mj-weight-semibold) var(--mj-text-xs)/1 var(--mj-font-ui);
    color: var(--_fg); background: var(--_bg);
    border-radius: var(--mj-radius-pill); white-space: nowrap;
}
.mj-status svg { width: 13px; height: 13px; stroke-width: 2.25; }
.mj-status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--_dot); }
.mj-status--success { --_bg: var(--mj-success-soft); --_fg: var(--mj-success-soft-ink); --_dot: var(--mj-success-ink); }
.mj-status--attention { --_bg: var(--mj-attention-soft); --_fg: var(--mj-attention-soft-ink); --_dot: var(--mj-attention-ink); }
.mj-status--info { --_bg: var(--mj-info-soft); --_fg: var(--mj-info-soft-ink); --_dot: var(--mj-info-ink); }
.mj-status--critical { --_bg: var(--mj-critical-soft); --_fg: var(--mj-critical-soft-ink); --_dot: var(--mj-critical-ink); }
.mj-status--structure { --_bg: var(--mj-structure-soft); --_fg: var(--mj-structure-soft-ink); --_dot: var(--mj-structure-ink); }
.mj-status--live { --_bg: var(--mj-primary-fill); --_fg: var(--mj-primary-on-fill); --_dot: var(--mj-primary-on-fill); }
.mj-status--live .mj-status__dot { box-shadow: 0 0 0 0 oklch(from var(--mj-primary-on-fill) l c h / 70%); animation: mj-pulse 1.6s var(--mj-ease-out) infinite; }
@keyframes mj-pulse { 70%, 100% { box-shadow: 0 0 0 6px oklch(from var(--mj-primary-on-fill) l c h / 0%); } }
@media (prefers-reduced-motion: reduce) { .mj-status--live .mj-status__dot { animation: none; } }

/* ---------- Avatar -------------------------------------------------------- */
.mj-avatar {
    position: relative; flex: none;
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    font: var(--mj-weight-semibold) var(--mj-text-xs)/1 var(--mj-font-ui);
    color: var(--_fg, var(--mj-structure-soft-ink)); background: var(--_bg, var(--mj-structure-soft));
}
.mj-avatar--lg { width: 44px; height: 44px; font-size: var(--mj-text-md); }
.mj-avatar[data-tone="sky"] { --_bg: var(--mj-info-soft); --_fg: var(--mj-info-soft-ink); }
.mj-avatar[data-tone="saffron"] { --_bg: var(--mj-attention-soft); --_fg: var(--mj-attention-soft-ink); }
.mj-avatar[data-tone="cactus"] { --_bg: var(--mj-success-soft); --_fg: var(--mj-success-soft-ink); }
.mj-avatar[data-tone="ember"] { --_bg: var(--mj-primary-soft); --_fg: var(--mj-primary-soft-ink); }
.mj-avatar__presence { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--mj-success-fill); box-shadow: 0 0 0 2px var(--mj-bg-surface); }
.mj-avatar-group { display: inline-flex; }
.mj-avatar-group .mj-avatar { box-shadow: 0 0 0 2px var(--mj-bg-surface); transition: transform var(--mj-dur-snappy) var(--mj-spring-snappy); }
.mj-avatar-group .mj-avatar + .mj-avatar { margin-inline-start: -8px; }
.mj-avatar-group:hover .mj-avatar { transform: translateX(calc(var(--_i, 0) * 4px)); }

/* ---------- Superficies --------------------------------------------------- */
.mj-card {
    container: mj-card / inline-size;
    background: var(--mj-bg-surface);
    border-radius: var(--mj-radius-xl);
    box-shadow: var(--mj-highlight);
    padding: var(--mj-inset-card);
    min-width: 0;
}
.mj-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--mj-inline-loose); margin-bottom: var(--mj-stack-block); }
.mj-card__title { margin: 0; font: var(--mj-weight-semibold) var(--mj-text-xl)/var(--mj-leading-snug) var(--mj-font-ui); letter-spacing: -0.01em; color: var(--mj-fg); }
.mj-card__subtitle { margin: var(--mj-stack-tight) 0 0; font-size: var(--mj-text-sm); color: var(--mj-fg-subtle); }
/* Una tarjeta angosta apila sus acciones debajo del título, sin importar el ancho de la pantalla. */
@container mj-card (max-width: 420px) { .mj-card__header { flex-wrap: wrap; } }

/* ---------- Panel -------------------------------------------------------- */
/* Un panel nunca se encoge: el cuerpo tiene un alto mínimo en filas, así que vacío, cargando o con error
   mide lo mismo que con contenido. En .mj-panels los paneles de una fila se estiran juntos y el pie va abajo,
   así los bordes inferiores quedan alineados. Una lista larga va dentro de .mj-scroll-area. */
.mj-panels {
    --_min: 320px;
    display: grid; gap: var(--mj-bento-gap); align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_min)), 1fr));
}
.mj-panel {
    container: mj-panel / inline-size;
    display: flex; flex-direction: column; min-width: 0;
    background: var(--mj-bg-surface);
    border-radius: var(--mj-radius-xl);
    box-shadow: var(--mj-highlight);
}
.mj-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mj-inline-loose); padding: var(--mj-inset-card) var(--mj-inset-card) 0; }
.mj-panel__title { margin: 0; font: var(--mj-weight-semibold) var(--mj-text-xl)/var(--mj-leading-snug) var(--mj-font-ui); letter-spacing: -0.01em; color: var(--mj-fg); }
.mj-panel__subtitle { margin: var(--mj-stack-tight) 0 0; font-size: var(--mj-text-sm); color: var(--mj-fg-subtle); }
.mj-panel__actions { display: flex; flex: none; align-items: center; gap: var(--mj-inline); }
.mj-panel__body {
    flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--mj-stack-group);
    min-width: 0; min-height: calc(var(--mj-row) * var(--mj-panel-rows-min));
    padding: var(--mj-stack-block) var(--mj-inset-card) var(--mj-inset-card);
}
.mj-panel__body:first-child { padding-top: var(--mj-inset-card); }
/* Cuerpo de filas que traen su propio padding y hover (navegación, menús): el borde lo pone la fila. */
.mj-panel__body--flush { gap: var(--mj-space-0-5); padding: var(--mj-stack) var(--mj-inset-popover); }
.mj-panel__body > .mj-empty { flex: 1 1 auto; }
.mj-panel__skeleton { display: grid; gap: var(--mj-stack); }
.mj-panel__skeleton .mj-skeleton { height: calc(var(--mj-row) - var(--mj-space-3)); }
.mj-panel__footer {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mj-inline);
    margin-top: auto; padding: var(--mj-space-3) var(--mj-inset-card);
    border-top: 1px solid var(--mj-border-subtle);
    font-size: var(--mj-text-sm); color: var(--mj-fg-subtle);
}
.mj-panel__footer a { font-weight: var(--mj-weight-medium); color: var(--mj-info-ink); text-decoration: none; }
.mj-panel__footer a:hover { text-decoration: underline; }
/* Un panel angosto apila sus acciones debajo del título. */
@container mj-panel (max-width: 420px) { .mj-panel__header { flex-wrap: wrap; } }

/* ---------- Tile del bento ------------------------------------------------ */
.mj-tile {
    --_bg: var(--mj-bg-surface); --_fg: var(--mj-fg); --_muted: var(--mj-fg-muted);
    container: mj-tile / inline-size;
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--mj-stack-group);
    min-width: 0; min-height: calc(var(--mj-bento-row) * 1.6);
    padding: var(--mj-inset-tile);
    color: var(--_fg); background: var(--_bg);
    border-radius: var(--mj-radius-2xl);
    box-shadow: var(--mj-highlight);
    text-decoration: none;
    transition: transform var(--mj-dur-smooth) var(--mj-spring-smooth), box-shadow var(--mj-dur-gentle) var(--mj-ease-out);
}
@media (hover: hover) and (pointer: fine) {
    a.mj-tile:hover, button.mj-tile:hover { transform: translateY(-3px); box-shadow: var(--mj-highlight), var(--mj-shadow-md); }
}
a.mj-tile:active, button.mj-tile:active { transform: translateY(-1px) scale(.99); transition-duration: var(--mj-dur-instant); }
.mj-tile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mj-inline); }
.mj-tile__head > :last-child:not(:first-child) { flex: none; white-space: nowrap; }
.mj-tile__label { display: inline-flex; align-items: center; gap: var(--mj-space-2); font-size: var(--mj-text-sm); font-weight: var(--mj-weight-medium); color: var(--_muted); }
.mj-tile__label svg { width: var(--mj-icon-sm); height: var(--mj-icon-sm); }
/* La cifra crece con el ancho del tile (cqi), no con el de la pantalla. */
.mj-tile__value { font-size: clamp(2rem, 1.25rem + 8cqi, 3.25rem); font-weight: var(--mj-weight-semibold); margin: 0; }
.mj-tile__value small { font-size: .5em; letter-spacing: -0.01em; margin-inline-start: 2px; color: var(--_muted); font-weight: var(--mj-weight-medium); }
.mj-tile__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mj-inline); font-size: var(--mj-text-xs); color: var(--_muted); }
@container mj-tile (max-width: 240px) {
    .mj-tile__head { flex-direction: column; align-items: flex-start; }
    .mj-tile__foot { justify-content: flex-start; }
}
@container mj-tile (max-width: 180px) { .mj-spark { display: none; } }
.mj-delta { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; height: 22px; padding-inline: var(--mj-space-1-5) var(--mj-space-2); border-radius: var(--mj-radius-pill); font: var(--mj-weight-semibold) var(--mj-text-xs)/1 var(--mj-font-ui); font-variant-numeric: tabular-nums; color: var(--mj-success-soft-ink); background: var(--mj-success-soft); }
.mj-delta svg { width: 13px; height: 13px; stroke-width: 2.5; }
.mj-delta--down { color: var(--mj-critical-soft-ink); background: var(--mj-critical-soft); }
.mj-tile--structure { --_bg: var(--mj-structure-fill); --_fg: var(--mj-structure-on-fill); --_muted: oklch(from var(--mj-structure-on-fill) l c h / 74%); box-shadow: none; }
.mj-tile--attention { --_bg: var(--mj-attention-fill); --_fg: var(--mj-attention-on-fill); --_muted: oklch(from var(--mj-attention-on-fill) l c h / 78%); box-shadow: none; }
.mj-tile--primary { --_bg: var(--mj-primary-fill); --_fg: var(--mj-primary-on-fill); --_muted: oklch(from var(--mj-primary-on-fill) l c h / 80%); box-shadow: none; }
.mj-tile:is(.mj-tile--structure, .mj-tile--primary, .mj-tile--attention, .mj-tile--signature) .mj-delta { color: var(--_fg); background: oklch(from var(--_fg) l c h / 14%); }
.mj-spark { width: 100%; height: 44px; overflow: visible; }
.mj-spark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mj-spark .mj-spark__area { stroke: none; fill: currentColor; opacity: .12; }

/* ---------- Signature surface: solid navy + dune contours ------------- */
.mj-tile--signature, .mj-signature {
    --_fg: var(--mj-signature-on); --_muted: oklch(from var(--mj-signature-on) l c h / 76%);
    position: relative; isolation: isolate; overflow: hidden;
    color: var(--mj-signature-on);
    background: var(--mj-signature-bg);
    box-shadow: none;
}
.mj-tile--signature::after, .mj-signature::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--mj-signature-line);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 520'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M816 506 L813 506 L809 507 L806 508 L803 508 L800 509 L797 510 L794 511 L791 512 L788 512 L785 513 L781 513 L778 513 L775 514 L771 514 L768 514 L764 514 L760 514 L756 514 L752 514 L748 515 L744 515 L740 516 L737 517 L733 518 L730 519 L727 520 L724 522 L722 523 L719 525 L717 527 L715 528 L713 530 L711 532 L710 534 L708 536 L707 538 L705 540 L705 542 L704 544 L704 546 L704 548 L704 550 L705 552 L706 554 L707 556 L708 558 L710 560 L712 562 L714 563 L715 565 L717 567 L718 568 L719 570 L720 572 L721 573 L721 575 L721 577 L721 579 L722 580 L722 582 L722 584 L723 586 L723 588 L724 590 L726 591 L727 593 L729 595 L731 596 L733 597 L736 599 L738 600 L741 601 L743 603 L746 604 L749 605 L751 606 L754 607 L756 609 L759 610 L762 611 L765 612 L768 613 L771 615 L774 615 L777 616 L780 617 L784 618 L787 618 L791 619 L794 619 L798 619 L802 619 L805 620 L809 620 L812 620 L816 621'/%3E%3Cpath d='M816 470 L810 471 L805 472 L800 473 L794 474 L789 475 L784 476 L779 477 L773 477 L768 477 L762 478 L756 478 L750 478 L744 477 L738 477 L731 478 L725 478 L718 478 L712 479 L705 480 L699 481 L693 483 L688 484 L682 486 L677 488 L672 490 L668 493 L663 495 L659 498 L655 500 L651 503 L647 506 L643 509 L640 512 L637 515 L635 518 L633 522 L632 525 L631 528 L631 532 L632 536 L633 539 L635 543 L637 546 L640 549 L643 553 L645 556 L648 559 L650 562 L652 564 L653 567 L654 570 L655 573 L656 576 L656 578 L655 581 L655 584 L655 587 L655 591 L655 594 L656 597 L657 600 L658 603 L660 606 L663 608 L665 611 L668 614 L671 616 L675 619 L678 621 L682 624 L685 626 L689 629 L693 631 L696 634 L700 636 L704 639 L709 641 L713 643 L718 645 L723 647 L728 649 L733 650 L739 652 L745 653 L751 654 L756 654 L762 655 L768 656 L774 656 L780 657 L786 657 L792 658 L798 659 L804 660 L810 661 L816 662'/%3E%3Cpath d='M816 434 L808 435 L800 436 L793 437 L785 437 L777 438 L769 438 L761 438 L753 438 L745 437 L736 437 L727 437 L718 437 L709 437 L700 438 L692 438 L683 439 L674 441 L666 443 L658 445 L650 447 L642 449 L634 452 L627 455 L620 458 L613 461 L606 464 L599 467 L593 471 L586 475 L581 478 L575 482 L571 487 L567 491 L564 496 L563 501 L562 506 L562 511 L563 516 L564 521 L567 526 L570 531 L573 536 L576 541 L579 545 L582 549 L584 554 L586 558 L587 562 L588 566 L588 570 L587 574 L587 578 L586 582 L585 586 L585 590 L584 594 L584 599 L585 603 L586 607 L588 612 L590 616 L593 620 L596 624 L599 628 L603 632 L606 636 L610 640 L614 644 L618 648 L622 652 L626 656 L631 660 L636 664 L641 667 L646 671 L653 674 L659 677 L667 680 L674 682 L682 684 L690 686 L699 688 L707 689 L716 690 L724 691 L733 692 L741 693 L749 694 L757 695 L765 696 L773 698 L782 699 L790 701 L799 703 L807 704 L816 705'/%3E%3Cpath d='M816 396 L806 396 L795 396 L785 396 L775 396 L764 395 L753 394 L742 394 L731 394 L720 393 L708 394 L697 394 L685 395 L674 396 L663 398 L652 399 L641 402 L631 404 L621 407 L610 410 L600 413 L590 416 L580 419 L570 422 L560 426 L550 430 L540 434 L532 438 L523 443 L516 448 L510 453 L505 459 L501 465 L498 472 L497 478 L497 485 L498 492 L500 499 L503 505 L506 512 L509 518 L512 524 L515 530 L517 535 L519 541 L520 546 L520 551 L519 556 L518 562 L517 567 L516 572 L514 577 L513 583 L512 588 L512 594 L512 599 L512 605 L513 610 L515 616 L517 621 L519 627 L522 632 L525 638 L528 643 L531 649 L534 654 L537 660 L541 666 L545 672 L549 677 L554 683 L560 688 L566 694 L574 698 L582 703 L591 707 L600 710 L610 713 L621 716 L632 718 L643 720 L654 722 L665 723 L676 725 L687 726 L698 728 L708 730 L719 732 L729 734 L739 736 L749 739 L760 741 L771 743 L782 745 L793 747 L804 748 L816 749'/%3E%3Cpath d='M816 352 L803 352 L790 350 L777 349 L763 349 L749 348 L736 348 L722 348 L708 348 L694 349 L680 350 L667 352 L654 354 L640 356 L627 359 L614 362 L601 365 L588 367 L575 370 L561 374 L548 377 L535 380 L521 384 L508 388 L496 392 L485 397 L474 403 L465 409 L457 416 L450 423 L445 431 L442 439 L440 447 L440 455 L440 464 L442 472 L444 480 L446 488 L449 496 L451 503 L452 510 L453 517 L454 523 L453 530 L452 536 L450 543 L448 549 L446 555 L444 562 L442 568 L441 575 L439 581 L439 588 L439 595 L439 601 L440 608 L441 615 L442 622 L443 629 L445 636 L446 643 L447 650 L449 657 L451 665 L453 673 L455 680 L459 688 L463 695 L468 703 L475 710 L483 716 L492 722 L502 728 L513 733 L525 737 L538 741 L551 744 L565 747 L579 749 L593 752 L606 754 L619 756 L632 759 L645 761 L658 764 L670 767 L682 770 L695 773 L707 776 L720 779 L733 782 L746 785 L760 787 L774 788 L788 789 L802 789 L816 788'/%3E%3Cpath d='M816 303 L800 302 L784 301 L767 300 L751 300 L735 301 L718 302 L702 303 L686 305 L670 307 L654 310 L639 312 L623 315 L607 318 L591 320 L575 323 L559 326 L542 328 L525 331 L509 335 L492 338 L476 343 L461 348 L447 353 L434 360 L423 367 L413 375 L405 383 L399 392 L395 402 L392 412 L390 421 L390 431 L390 441 L391 451 L391 460 L392 469 L392 477 L392 485 L391 493 L389 501 L387 509 L385 516 L382 524 L379 531 L376 539 L373 546 L371 554 L369 562 L368 569 L367 577 L366 585 L366 593 L365 601 L365 609 L365 617 L364 626 L363 634 L362 643 L361 652 L361 661 L360 671 L361 680 L362 690 L365 699 L369 709 L374 718 L382 726 L391 734 L401 742 L414 748 L427 754 L442 759 L458 764 L474 768 L490 772 L506 775 L522 779 L538 782 L553 785 L568 789 L583 792 L597 796 L612 800 L626 804 L641 808 L655 812 L670 816 L686 819 L702 821 L718 823 L734 824 L750 825 L767 825 L783 825 L800 824 L816 822'/%3E%3Cpath d='M816 253 L797 252 L778 253 L759 254 L740 255 L721 258 L703 260 L684 263 L666 265 L647 268 L629 270 L610 273 L591 275 L572 277 L552 279 L533 281 L513 284 L493 287 L474 291 L455 295 L437 300 L421 307 L406 314 L392 322 L381 331 L371 341 L363 352 L357 362 L352 373 L349 384 L346 396 L344 406 L342 417 L341 427 L339 437 L336 447 L333 456 L330 465 L326 474 L322 482 L318 491 L314 500 L311 508 L307 517 L304 526 L302 535 L300 544 L298 553 L296 562 L295 571 L293 580 L291 589 L288 598 L285 608 L282 618 L278 628 L274 638 L270 649 L266 660 L263 672 L262 683 L262 694 L264 706 L268 717 L274 727 L282 737 L293 747 L305 755 L320 763 L336 770 L353 777 L370 782 L389 788 L407 793 L425 797 L443 802 L461 807 L478 811 L495 816 L511 821 L528 826 L544 831 L561 836 L577 840 L595 844 L612 848 L630 851 L648 854 L667 856 L686 857 L705 858 L723 858 L742 858 L761 858 L779 857 L798 856 L816 856'/%3E%3Cpath d='M816 206 L794 208 L772 210 L751 213 L730 215 L709 218 L688 220 L667 223 L645 225 L624 226 L602 228 L579 229 L557 230 L534 232 L511 234 L488 237 L466 241 L445 246 L425 252 L406 259 L389 267 L374 276 L360 287 L348 297 L338 309 L330 321 L322 332 L316 344 L310 356 L305 368 L299 379 L294 390 L289 401 L283 411 L277 421 L271 431 L265 441 L260 451 L254 461 L250 471 L245 481 L242 491 L239 501 L236 511 L233 521 L231 531 L228 541 L225 551 L221 562 L216 572 L210 583 L204 594 L196 605 L189 616 L181 628 L174 641 L167 654 L162 667 L159 680 L157 693 L159 706 L163 718 L169 730 L179 742 L191 753 L205 763 L221 772 L239 780 L258 788 L277 796 L297 802 L317 809 L336 815 L356 822 L375 828 L393 834 L412 840 L430 846 L449 852 L468 858 L487 863 L506 868 L526 873 L546 877 L567 880 L588 882 L609 884 L630 886 L651 887 L672 887 L693 888 L714 889 L734 890 L755 890 L775 892 L795 893 L816 894'/%3E%3Cpath d='M816 166 L792 169 L768 171 L744 174 L720 176 L696 177 L672 178 L647 179 L623 180 L597 180 L572 181 L546 183 L521 185 L496 188 L471 192 L448 197 L425 204 L404 211 L385 220 L367 230 L351 241 L337 253 L324 265 L312 277 L301 289 L291 301 L281 313 L271 325 L262 337 L253 348 L243 359 L234 370 L225 381 L217 392 L209 403 L201 414 L195 426 L190 437 L185 448 L181 460 L177 471 L174 482 L170 494 L166 505 L162 516 L156 527 L149 538 L140 550 L131 562 L120 574 L108 586 L97 599 L85 612 L75 626 L65 641 L58 655 L53 670 L51 684 L52 699 L56 713 L63 727 L74 740 L87 752 L102 763 L119 774 L138 785 L158 794 L178 803 L199 812 L219 821 L240 829 L260 837 L280 845 L301 853 L321 860 L341 868 L362 874 L384 881 L406 887 L428 892 L451 896 L474 900 L498 903 L522 905 L545 908 L569 909 L592 911 L615 913 L637 915 L659 917 L681 920 L703 923 L725 926 L747 930 L770 934 L793 937 L816 940'/%3E%3Cpath d='M816 128 L789 130 L763 131 L736 132 L709 132 L682 132 L654 131 L626 132 L598 132 L570 133 L543 135 L515 139 L489 143 L463 149 L438 156 L415 165 L393 174 L373 185 L354 196 L336 207 L319 219 L304 231 L288 243 L273 255 L259 267 L244 278 L230 290 L216 301 L203 313 L190 324 L178 336 L167 348 L158 360 L149 373 L142 386 L135 398 L130 411 L125 424 L121 437 L116 449 L110 462 L104 474 L96 486 L87 498 L76 510 L63 522 L49 535 L34 548 L18 562 L3 576 L-12 590 L-26 605 L-37 621 L-46 637 L-52 653 L-55 669 L-54 685 L-49 700 L-42 716 L-31 730 L-17 744 L-2 758 L16 770 L34 783 L54 794 L74 806 L94 817 L115 827 L136 838 L157 848 L178 857 L200 867 L223 876 L246 884 L269 891 L294 898 L319 904 L345 909 L371 914 L398 917 L424 921 L450 923 L476 926 L501 929 L526 932 L550 935 L574 939 L597 944 L620 949 L643 954 L666 960 L690 966 L714 972 L739 977 L764 982 L790 986 L816 988'/%3E%3Cpath d='M816 87 L787 86 L757 85 L727 85 L697 84 L667 84 L637 84 L606 86 L576 88 L547 92 L518 97 L490 104 L464 112 L438 120 L414 130 L390 140 L368 151 L346 162 L325 173 L304 184 L284 195 L264 206 L244 216 L224 227 L205 239 L187 250 L170 262 L154 274 L139 287 L125 300 L114 313 L104 327 L95 341 L88 356 L81 370 L75 384 L69 398 L61 411 L53 425 L43 438 L32 450 L18 463 L3 476 L-15 489 L-33 502 L-53 516 L-72 531 L-91 546 L-109 562 L-124 578 L-137 595 L-147 612 L-154 629 L-157 647 L-156 664 L-151 681 L-144 698 L-133 714 L-121 730 L-106 745 L-90 760 L-72 774 L-54 789 L-35 802 L-15 815 L5 828 L26 841 L48 853 L70 864 L94 875 L119 885 L145 894 L172 902 L200 909 L229 916 L258 921 L288 926 L318 930 L347 933 L375 937 L402 941 L429 945 L454 949 L479 955 L503 961 L527 968 L550 976 L574 984 L598 992 L623 1001 L648 1008 L674 1016 L701 1022 L729 1027 L758 1031 L787 1033 L816 1033'/%3E%3Cpath d='M816 40 L784 39 L751 38 L719 38 L686 39 L654 41 L622 45 L590 49 L559 55 L529 62 L500 69 L472 78 L444 87 L417 96 L391 106 L365 115 L339 124 L313 134 L288 143 L262 153 L237 163 L213 173 L189 183 L166 195 L145 207 L126 220 L108 233 L93 248 L79 262 L67 278 L57 293 L48 309 L39 324 L30 339 L21 354 L10 368 L-2 382 L-16 396 L-32 409 L-50 423 L-71 436 L-92 450 L-115 464 L-138 478 L-161 494 L-182 510 L-201 526 L-218 544 L-232 562 L-242 580 L-249 599 L-253 617 L-252 636 L-249 655 L-242 673 L-233 691 L-223 709 L-210 726 L-196 743 L-181 760 L-165 777 L-148 793 L-129 808 L-110 823 L-89 838 L-66 852 L-42 865 L-16 877 L12 888 L41 898 L72 907 L104 914 L137 921 L170 927 L202 932 L234 937 L265 941 L295 946 L324 951 L351 957 L377 964 L401 972 L425 981 L449 991 L472 1001 L496 1011 L521 1022 L546 1033 L573 1042 L600 1051 L629 1059 L659 1065 L690 1070 L721 1073 L752 1075 L784 1075 L816 1074'/%3E%3Cpath d='M816 -4 L781 -4 L746 -2 L712 1 L678 5 L644 10 L611 16 L579 23 L547 30 L516 38 L485 45 L454 53 L423 60 L393 67 L362 75 L331 82 L300 89 L270 97 L240 105 L211 115 L182 125 L156 136 L131 149 L109 162 L88 177 L70 192 L54 208 L40 225 L27 241 L15 258 L3 274 L-10 290 L-23 305 L-38 320 L-55 334 L-74 348 L-95 362 L-118 376 L-143 389 L-168 404 L-194 418 L-220 434 L-244 450 L-267 467 L-287 485 L-305 503 L-319 522 L-330 542 L-337 562 L-341 582 L-342 602 L-340 622 L-336 642 L-330 662 L-322 681 L-313 701 L-303 720 L-291 739 L-278 758 L-263 776 L-246 794 L-227 812 L-206 828 L-182 844 L-156 858 L-127 872 L-96 884 L-63 895 L-28 904 L8 913 L44 920 L79 927 L115 933 L148 939 L181 945 L211 952 L240 959 L266 967 L292 977 L316 987 L339 999 L362 1011 L386 1023 L410 1036 L434 1049 L461 1061 L488 1072 L517 1083 L548 1092 L579 1099 L612 1105 L645 1110 L679 1113 L713 1115 L747 1116 L782 1117 L816 1117'/%3E%3Cpath d='M816 -38 L779 -34 L743 -30 L707 -24 L672 -19 L637 -13 L602 -7 L568 -1 L534 4 L499 9 L465 14 L430 19 L394 23 L359 28 L323 33 L288 39 L253 46 L220 54 L188 64 L157 75 L129 88 L103 102 L80 118 L59 134 L40 151 L22 168 L5 185 L-11 203 L-27 219 L-45 235 L-63 251 L-84 266 L-106 280 L-130 294 L-156 308 L-183 322 L-211 336 L-240 351 L-268 367 L-295 383 L-320 401 L-344 419 L-364 437 L-381 457 L-396 477 L-407 498 L-415 519 L-421 540 L-424 562 L-425 583 L-425 605 L-423 626 L-420 648 L-415 669 L-409 691 L-401 712 L-391 733 L-379 753 L-363 773 L-345 793 L-323 811 L-297 828 L-268 844 L-236 859 L-202 872 L-165 884 L-127 895 L-89 905 L-50 913 L-12 921 L24 929 L59 937 L91 945 L121 954 L149 964 L175 975 L199 987 L222 1000 L245 1014 L268 1028 L291 1043 L315 1057 L341 1072 L368 1085 L396 1098 L426 1109 L458 1119 L491 1128 L525 1136 L560 1142 L595 1148 L631 1153 L668 1157 L704 1161 L741 1165 L778 1168 L816 1172'/%3E%3Cpath d='M816 -60 L778 -55 L740 -50 L703 -46 L666 -42 L629 -39 L591 -36 L553 -34 L515 -33 L476 -31 L436 -30 L397 -28 L357 -25 L317 -21 L279 -15 L241 -7 L206 2 L172 14 L140 27 L111 41 L84 57 L59 74 L36 91 L13 108 L-8 126 L-30 143 L-52 159 L-75 175 L-99 190 L-125 205 L-153 219 L-182 233 L-212 248 L-243 262 L-274 277 L-304 293 L-333 310 L-361 327 L-386 346 L-409 365 L-429 385 L-446 406 L-461 427 L-473 449 L-484 471 L-492 493 L-499 516 L-505 539 L-509 562 L-513 585 L-515 608 L-515 631 L-514 654 L-510 677 L-503 700 L-492 723 L-477 745 L-459 766 L-435 786 L-408 805 L-377 823 L-342 839 L-305 854 L-265 867 L-225 879 L-184 891 L-144 901 L-106 911 L-69 921 L-35 931 L-4 942 L25 954 L51 966 L76 980 L99 994 L121 1009 L144 1025 L166 1041 L189 1058 L214 1074 L240 1089 L268 1104 L298 1118 L329 1130 L362 1142 L395 1153 L430 1163 L466 1172 L503 1181 L540 1189 L577 1197 L615 1205 L654 1212 L693 1220 L734 1227 L774 1233 L816 1239'/%3E%3Cpath d='M816 -79 L776 -77 L737 -76 L697 -76 L657 -77 L616 -78 L575 -80 L532 -82 L489 -83 L446 -84 L402 -83 L359 -80 L317 -75 L276 -68 L237 -59 L200 -48 L164 -35 L131 -21 L100 -5 L70 11 L42 28 L14 45 L-14 61 L-41 77 L-70 93 L-99 108 L-130 123 L-161 137 L-194 152 L-227 166 L-261 181 L-294 196 L-327 213 L-358 230 L-387 248 L-414 267 L-439 287 L-462 307 L-481 329 L-499 351 L-515 373 L-530 396 L-543 419 L-555 442 L-567 465 L-578 489 L-589 513 L-598 537 L-606 562 L-611 586 L-614 611 L-614 636 L-609 661 L-600 685 L-585 709 L-566 732 L-542 754 L-512 775 L-479 794 L-442 812 L-403 829 L-362 844 L-321 858 L-280 871 L-240 884 L-203 897 L-168 909 L-136 922 L-106 936 L-79 950 L-54 965 L-31 981 L-9 998 L13 1015 L35 1033 L58 1050 L82 1068 L108 1085 L135 1101 L163 1117 L194 1132 L226 1146 L259 1160 L293 1173 L328 1185 L363 1198 L400 1210 L437 1223 L475 1235 L514 1248 L554 1260 L595 1271 L637 1282 L680 1291 L725 1299 L770 1305 L816 1309'/%3E%3C/g%3E%3C/svg%3E") right bottom / cover no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 520'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M816 506 L813 506 L809 507 L806 508 L803 508 L800 509 L797 510 L794 511 L791 512 L788 512 L785 513 L781 513 L778 513 L775 514 L771 514 L768 514 L764 514 L760 514 L756 514 L752 514 L748 515 L744 515 L740 516 L737 517 L733 518 L730 519 L727 520 L724 522 L722 523 L719 525 L717 527 L715 528 L713 530 L711 532 L710 534 L708 536 L707 538 L705 540 L705 542 L704 544 L704 546 L704 548 L704 550 L705 552 L706 554 L707 556 L708 558 L710 560 L712 562 L714 563 L715 565 L717 567 L718 568 L719 570 L720 572 L721 573 L721 575 L721 577 L721 579 L722 580 L722 582 L722 584 L723 586 L723 588 L724 590 L726 591 L727 593 L729 595 L731 596 L733 597 L736 599 L738 600 L741 601 L743 603 L746 604 L749 605 L751 606 L754 607 L756 609 L759 610 L762 611 L765 612 L768 613 L771 615 L774 615 L777 616 L780 617 L784 618 L787 618 L791 619 L794 619 L798 619 L802 619 L805 620 L809 620 L812 620 L816 621'/%3E%3Cpath d='M816 470 L810 471 L805 472 L800 473 L794 474 L789 475 L784 476 L779 477 L773 477 L768 477 L762 478 L756 478 L750 478 L744 477 L738 477 L731 478 L725 478 L718 478 L712 479 L705 480 L699 481 L693 483 L688 484 L682 486 L677 488 L672 490 L668 493 L663 495 L659 498 L655 500 L651 503 L647 506 L643 509 L640 512 L637 515 L635 518 L633 522 L632 525 L631 528 L631 532 L632 536 L633 539 L635 543 L637 546 L640 549 L643 553 L645 556 L648 559 L650 562 L652 564 L653 567 L654 570 L655 573 L656 576 L656 578 L655 581 L655 584 L655 587 L655 591 L655 594 L656 597 L657 600 L658 603 L660 606 L663 608 L665 611 L668 614 L671 616 L675 619 L678 621 L682 624 L685 626 L689 629 L693 631 L696 634 L700 636 L704 639 L709 641 L713 643 L718 645 L723 647 L728 649 L733 650 L739 652 L745 653 L751 654 L756 654 L762 655 L768 656 L774 656 L780 657 L786 657 L792 658 L798 659 L804 660 L810 661 L816 662'/%3E%3Cpath d='M816 434 L808 435 L800 436 L793 437 L785 437 L777 438 L769 438 L761 438 L753 438 L745 437 L736 437 L727 437 L718 437 L709 437 L700 438 L692 438 L683 439 L674 441 L666 443 L658 445 L650 447 L642 449 L634 452 L627 455 L620 458 L613 461 L606 464 L599 467 L593 471 L586 475 L581 478 L575 482 L571 487 L567 491 L564 496 L563 501 L562 506 L562 511 L563 516 L564 521 L567 526 L570 531 L573 536 L576 541 L579 545 L582 549 L584 554 L586 558 L587 562 L588 566 L588 570 L587 574 L587 578 L586 582 L585 586 L585 590 L584 594 L584 599 L585 603 L586 607 L588 612 L590 616 L593 620 L596 624 L599 628 L603 632 L606 636 L610 640 L614 644 L618 648 L622 652 L626 656 L631 660 L636 664 L641 667 L646 671 L653 674 L659 677 L667 680 L674 682 L682 684 L690 686 L699 688 L707 689 L716 690 L724 691 L733 692 L741 693 L749 694 L757 695 L765 696 L773 698 L782 699 L790 701 L799 703 L807 704 L816 705'/%3E%3Cpath d='M816 396 L806 396 L795 396 L785 396 L775 396 L764 395 L753 394 L742 394 L731 394 L720 393 L708 394 L697 394 L685 395 L674 396 L663 398 L652 399 L641 402 L631 404 L621 407 L610 410 L600 413 L590 416 L580 419 L570 422 L560 426 L550 430 L540 434 L532 438 L523 443 L516 448 L510 453 L505 459 L501 465 L498 472 L497 478 L497 485 L498 492 L500 499 L503 505 L506 512 L509 518 L512 524 L515 530 L517 535 L519 541 L520 546 L520 551 L519 556 L518 562 L517 567 L516 572 L514 577 L513 583 L512 588 L512 594 L512 599 L512 605 L513 610 L515 616 L517 621 L519 627 L522 632 L525 638 L528 643 L531 649 L534 654 L537 660 L541 666 L545 672 L549 677 L554 683 L560 688 L566 694 L574 698 L582 703 L591 707 L600 710 L610 713 L621 716 L632 718 L643 720 L654 722 L665 723 L676 725 L687 726 L698 728 L708 730 L719 732 L729 734 L739 736 L749 739 L760 741 L771 743 L782 745 L793 747 L804 748 L816 749'/%3E%3Cpath d='M816 352 L803 352 L790 350 L777 349 L763 349 L749 348 L736 348 L722 348 L708 348 L694 349 L680 350 L667 352 L654 354 L640 356 L627 359 L614 362 L601 365 L588 367 L575 370 L561 374 L548 377 L535 380 L521 384 L508 388 L496 392 L485 397 L474 403 L465 409 L457 416 L450 423 L445 431 L442 439 L440 447 L440 455 L440 464 L442 472 L444 480 L446 488 L449 496 L451 503 L452 510 L453 517 L454 523 L453 530 L452 536 L450 543 L448 549 L446 555 L444 562 L442 568 L441 575 L439 581 L439 588 L439 595 L439 601 L440 608 L441 615 L442 622 L443 629 L445 636 L446 643 L447 650 L449 657 L451 665 L453 673 L455 680 L459 688 L463 695 L468 703 L475 710 L483 716 L492 722 L502 728 L513 733 L525 737 L538 741 L551 744 L565 747 L579 749 L593 752 L606 754 L619 756 L632 759 L645 761 L658 764 L670 767 L682 770 L695 773 L707 776 L720 779 L733 782 L746 785 L760 787 L774 788 L788 789 L802 789 L816 788'/%3E%3Cpath d='M816 303 L800 302 L784 301 L767 300 L751 300 L735 301 L718 302 L702 303 L686 305 L670 307 L654 310 L639 312 L623 315 L607 318 L591 320 L575 323 L559 326 L542 328 L525 331 L509 335 L492 338 L476 343 L461 348 L447 353 L434 360 L423 367 L413 375 L405 383 L399 392 L395 402 L392 412 L390 421 L390 431 L390 441 L391 451 L391 460 L392 469 L392 477 L392 485 L391 493 L389 501 L387 509 L385 516 L382 524 L379 531 L376 539 L373 546 L371 554 L369 562 L368 569 L367 577 L366 585 L366 593 L365 601 L365 609 L365 617 L364 626 L363 634 L362 643 L361 652 L361 661 L360 671 L361 680 L362 690 L365 699 L369 709 L374 718 L382 726 L391 734 L401 742 L414 748 L427 754 L442 759 L458 764 L474 768 L490 772 L506 775 L522 779 L538 782 L553 785 L568 789 L583 792 L597 796 L612 800 L626 804 L641 808 L655 812 L670 816 L686 819 L702 821 L718 823 L734 824 L750 825 L767 825 L783 825 L800 824 L816 822'/%3E%3Cpath d='M816 253 L797 252 L778 253 L759 254 L740 255 L721 258 L703 260 L684 263 L666 265 L647 268 L629 270 L610 273 L591 275 L572 277 L552 279 L533 281 L513 284 L493 287 L474 291 L455 295 L437 300 L421 307 L406 314 L392 322 L381 331 L371 341 L363 352 L357 362 L352 373 L349 384 L346 396 L344 406 L342 417 L341 427 L339 437 L336 447 L333 456 L330 465 L326 474 L322 482 L318 491 L314 500 L311 508 L307 517 L304 526 L302 535 L300 544 L298 553 L296 562 L295 571 L293 580 L291 589 L288 598 L285 608 L282 618 L278 628 L274 638 L270 649 L266 660 L263 672 L262 683 L262 694 L264 706 L268 717 L274 727 L282 737 L293 747 L305 755 L320 763 L336 770 L353 777 L370 782 L389 788 L407 793 L425 797 L443 802 L461 807 L478 811 L495 816 L511 821 L528 826 L544 831 L561 836 L577 840 L595 844 L612 848 L630 851 L648 854 L667 856 L686 857 L705 858 L723 858 L742 858 L761 858 L779 857 L798 856 L816 856'/%3E%3Cpath d='M816 206 L794 208 L772 210 L751 213 L730 215 L709 218 L688 220 L667 223 L645 225 L624 226 L602 228 L579 229 L557 230 L534 232 L511 234 L488 237 L466 241 L445 246 L425 252 L406 259 L389 267 L374 276 L360 287 L348 297 L338 309 L330 321 L322 332 L316 344 L310 356 L305 368 L299 379 L294 390 L289 401 L283 411 L277 421 L271 431 L265 441 L260 451 L254 461 L250 471 L245 481 L242 491 L239 501 L236 511 L233 521 L231 531 L228 541 L225 551 L221 562 L216 572 L210 583 L204 594 L196 605 L189 616 L181 628 L174 641 L167 654 L162 667 L159 680 L157 693 L159 706 L163 718 L169 730 L179 742 L191 753 L205 763 L221 772 L239 780 L258 788 L277 796 L297 802 L317 809 L336 815 L356 822 L375 828 L393 834 L412 840 L430 846 L449 852 L468 858 L487 863 L506 868 L526 873 L546 877 L567 880 L588 882 L609 884 L630 886 L651 887 L672 887 L693 888 L714 889 L734 890 L755 890 L775 892 L795 893 L816 894'/%3E%3Cpath d='M816 166 L792 169 L768 171 L744 174 L720 176 L696 177 L672 178 L647 179 L623 180 L597 180 L572 181 L546 183 L521 185 L496 188 L471 192 L448 197 L425 204 L404 211 L385 220 L367 230 L351 241 L337 253 L324 265 L312 277 L301 289 L291 301 L281 313 L271 325 L262 337 L253 348 L243 359 L234 370 L225 381 L217 392 L209 403 L201 414 L195 426 L190 437 L185 448 L181 460 L177 471 L174 482 L170 494 L166 505 L162 516 L156 527 L149 538 L140 550 L131 562 L120 574 L108 586 L97 599 L85 612 L75 626 L65 641 L58 655 L53 670 L51 684 L52 699 L56 713 L63 727 L74 740 L87 752 L102 763 L119 774 L138 785 L158 794 L178 803 L199 812 L219 821 L240 829 L260 837 L280 845 L301 853 L321 860 L341 868 L362 874 L384 881 L406 887 L428 892 L451 896 L474 900 L498 903 L522 905 L545 908 L569 909 L592 911 L615 913 L637 915 L659 917 L681 920 L703 923 L725 926 L747 930 L770 934 L793 937 L816 940'/%3E%3Cpath d='M816 128 L789 130 L763 131 L736 132 L709 132 L682 132 L654 131 L626 132 L598 132 L570 133 L543 135 L515 139 L489 143 L463 149 L438 156 L415 165 L393 174 L373 185 L354 196 L336 207 L319 219 L304 231 L288 243 L273 255 L259 267 L244 278 L230 290 L216 301 L203 313 L190 324 L178 336 L167 348 L158 360 L149 373 L142 386 L135 398 L130 411 L125 424 L121 437 L116 449 L110 462 L104 474 L96 486 L87 498 L76 510 L63 522 L49 535 L34 548 L18 562 L3 576 L-12 590 L-26 605 L-37 621 L-46 637 L-52 653 L-55 669 L-54 685 L-49 700 L-42 716 L-31 730 L-17 744 L-2 758 L16 770 L34 783 L54 794 L74 806 L94 817 L115 827 L136 838 L157 848 L178 857 L200 867 L223 876 L246 884 L269 891 L294 898 L319 904 L345 909 L371 914 L398 917 L424 921 L450 923 L476 926 L501 929 L526 932 L550 935 L574 939 L597 944 L620 949 L643 954 L666 960 L690 966 L714 972 L739 977 L764 982 L790 986 L816 988'/%3E%3Cpath d='M816 87 L787 86 L757 85 L727 85 L697 84 L667 84 L637 84 L606 86 L576 88 L547 92 L518 97 L490 104 L464 112 L438 120 L414 130 L390 140 L368 151 L346 162 L325 173 L304 184 L284 195 L264 206 L244 216 L224 227 L205 239 L187 250 L170 262 L154 274 L139 287 L125 300 L114 313 L104 327 L95 341 L88 356 L81 370 L75 384 L69 398 L61 411 L53 425 L43 438 L32 450 L18 463 L3 476 L-15 489 L-33 502 L-53 516 L-72 531 L-91 546 L-109 562 L-124 578 L-137 595 L-147 612 L-154 629 L-157 647 L-156 664 L-151 681 L-144 698 L-133 714 L-121 730 L-106 745 L-90 760 L-72 774 L-54 789 L-35 802 L-15 815 L5 828 L26 841 L48 853 L70 864 L94 875 L119 885 L145 894 L172 902 L200 909 L229 916 L258 921 L288 926 L318 930 L347 933 L375 937 L402 941 L429 945 L454 949 L479 955 L503 961 L527 968 L550 976 L574 984 L598 992 L623 1001 L648 1008 L674 1016 L701 1022 L729 1027 L758 1031 L787 1033 L816 1033'/%3E%3Cpath d='M816 40 L784 39 L751 38 L719 38 L686 39 L654 41 L622 45 L590 49 L559 55 L529 62 L500 69 L472 78 L444 87 L417 96 L391 106 L365 115 L339 124 L313 134 L288 143 L262 153 L237 163 L213 173 L189 183 L166 195 L145 207 L126 220 L108 233 L93 248 L79 262 L67 278 L57 293 L48 309 L39 324 L30 339 L21 354 L10 368 L-2 382 L-16 396 L-32 409 L-50 423 L-71 436 L-92 450 L-115 464 L-138 478 L-161 494 L-182 510 L-201 526 L-218 544 L-232 562 L-242 580 L-249 599 L-253 617 L-252 636 L-249 655 L-242 673 L-233 691 L-223 709 L-210 726 L-196 743 L-181 760 L-165 777 L-148 793 L-129 808 L-110 823 L-89 838 L-66 852 L-42 865 L-16 877 L12 888 L41 898 L72 907 L104 914 L137 921 L170 927 L202 932 L234 937 L265 941 L295 946 L324 951 L351 957 L377 964 L401 972 L425 981 L449 991 L472 1001 L496 1011 L521 1022 L546 1033 L573 1042 L600 1051 L629 1059 L659 1065 L690 1070 L721 1073 L752 1075 L784 1075 L816 1074'/%3E%3Cpath d='M816 -4 L781 -4 L746 -2 L712 1 L678 5 L644 10 L611 16 L579 23 L547 30 L516 38 L485 45 L454 53 L423 60 L393 67 L362 75 L331 82 L300 89 L270 97 L240 105 L211 115 L182 125 L156 136 L131 149 L109 162 L88 177 L70 192 L54 208 L40 225 L27 241 L15 258 L3 274 L-10 290 L-23 305 L-38 320 L-55 334 L-74 348 L-95 362 L-118 376 L-143 389 L-168 404 L-194 418 L-220 434 L-244 450 L-267 467 L-287 485 L-305 503 L-319 522 L-330 542 L-337 562 L-341 582 L-342 602 L-340 622 L-336 642 L-330 662 L-322 681 L-313 701 L-303 720 L-291 739 L-278 758 L-263 776 L-246 794 L-227 812 L-206 828 L-182 844 L-156 858 L-127 872 L-96 884 L-63 895 L-28 904 L8 913 L44 920 L79 927 L115 933 L148 939 L181 945 L211 952 L240 959 L266 967 L292 977 L316 987 L339 999 L362 1011 L386 1023 L410 1036 L434 1049 L461 1061 L488 1072 L517 1083 L548 1092 L579 1099 L612 1105 L645 1110 L679 1113 L713 1115 L747 1116 L782 1117 L816 1117'/%3E%3Cpath d='M816 -38 L779 -34 L743 -30 L707 -24 L672 -19 L637 -13 L602 -7 L568 -1 L534 4 L499 9 L465 14 L430 19 L394 23 L359 28 L323 33 L288 39 L253 46 L220 54 L188 64 L157 75 L129 88 L103 102 L80 118 L59 134 L40 151 L22 168 L5 185 L-11 203 L-27 219 L-45 235 L-63 251 L-84 266 L-106 280 L-130 294 L-156 308 L-183 322 L-211 336 L-240 351 L-268 367 L-295 383 L-320 401 L-344 419 L-364 437 L-381 457 L-396 477 L-407 498 L-415 519 L-421 540 L-424 562 L-425 583 L-425 605 L-423 626 L-420 648 L-415 669 L-409 691 L-401 712 L-391 733 L-379 753 L-363 773 L-345 793 L-323 811 L-297 828 L-268 844 L-236 859 L-202 872 L-165 884 L-127 895 L-89 905 L-50 913 L-12 921 L24 929 L59 937 L91 945 L121 954 L149 964 L175 975 L199 987 L222 1000 L245 1014 L268 1028 L291 1043 L315 1057 L341 1072 L368 1085 L396 1098 L426 1109 L458 1119 L491 1128 L525 1136 L560 1142 L595 1148 L631 1153 L668 1157 L704 1161 L741 1165 L778 1168 L816 1172'/%3E%3Cpath d='M816 -60 L778 -55 L740 -50 L703 -46 L666 -42 L629 -39 L591 -36 L553 -34 L515 -33 L476 -31 L436 -30 L397 -28 L357 -25 L317 -21 L279 -15 L241 -7 L206 2 L172 14 L140 27 L111 41 L84 57 L59 74 L36 91 L13 108 L-8 126 L-30 143 L-52 159 L-75 175 L-99 190 L-125 205 L-153 219 L-182 233 L-212 248 L-243 262 L-274 277 L-304 293 L-333 310 L-361 327 L-386 346 L-409 365 L-429 385 L-446 406 L-461 427 L-473 449 L-484 471 L-492 493 L-499 516 L-505 539 L-509 562 L-513 585 L-515 608 L-515 631 L-514 654 L-510 677 L-503 700 L-492 723 L-477 745 L-459 766 L-435 786 L-408 805 L-377 823 L-342 839 L-305 854 L-265 867 L-225 879 L-184 891 L-144 901 L-106 911 L-69 921 L-35 931 L-4 942 L25 954 L51 966 L76 980 L99 994 L121 1009 L144 1025 L166 1041 L189 1058 L214 1074 L240 1089 L268 1104 L298 1118 L329 1130 L362 1142 L395 1153 L430 1163 L466 1172 L503 1181 L540 1189 L577 1197 L615 1205 L654 1212 L693 1220 L734 1227 L774 1233 L816 1239'/%3E%3Cpath d='M816 -79 L776 -77 L737 -76 L697 -76 L657 -77 L616 -78 L575 -80 L532 -82 L489 -83 L446 -84 L402 -83 L359 -80 L317 -75 L276 -68 L237 -59 L200 -48 L164 -35 L131 -21 L100 -5 L70 11 L42 28 L14 45 L-14 61 L-41 77 L-70 93 L-99 108 L-130 123 L-161 137 L-194 152 L-227 166 L-261 181 L-294 196 L-327 213 L-358 230 L-387 248 L-414 267 L-439 287 L-462 307 L-481 329 L-499 351 L-515 373 L-530 396 L-543 419 L-555 442 L-567 465 L-578 489 L-589 513 L-598 537 L-606 562 L-611 586 L-614 611 L-614 636 L-609 661 L-600 685 L-585 709 L-566 732 L-542 754 L-512 775 L-479 794 L-442 812 L-403 829 L-362 844 L-321 858 L-280 871 L-240 884 L-203 897 L-168 909 L-136 922 L-106 936 L-79 950 L-54 965 L-31 981 L-9 998 L13 1015 L35 1033 L58 1050 L82 1068 L108 1085 L135 1101 L163 1117 L194 1132 L226 1146 L259 1160 L293 1173 L328 1185 L363 1198 L400 1210 L437 1223 L475 1235 L514 1248 L554 1260 L595 1271 L637 1282 L680 1291 L725 1299 L770 1305 L816 1309'/%3E%3C/g%3E%3C/svg%3E") right bottom / cover no-repeat;
}

/* ---------- Progreso, anillo, esqueleto ---------------------------------- */
.mj-progress { position: relative; height: 6px; border-radius: var(--mj-radius-pill); background: var(--mj-bg-sunken); overflow: hidden; }
.mj-progress__bar { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--_v, 0)); background: var(--_c, var(--mj-structure-fill)); border-radius: inherit; transition: transform var(--mj-dur-scenic) var(--mj-ease-out); }
.mj-tile:is(.mj-tile--signature, .mj-tile--structure) .mj-progress { background: oklch(from var(--_fg) l c h / 18%); }
.mj-tile:is(.mj-tile--signature, .mj-tile--structure) .mj-progress__bar { --_c: var(--_fg); }
.mj-ring { --_size: 64px; width: var(--_size); height: var(--_size); rotate: -90deg; }
.mj-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.mj-ring__track { stroke: var(--mj-bg-sunken); }
.mj-ring__value { stroke: var(--_c, var(--mj-success-fill)); stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--_v, 0)); transition: stroke-dashoffset var(--mj-dur-scenic) var(--mj-ease-out); }
.mj-skeleton { border-radius: var(--mj-radius-sm); background: linear-gradient(90deg, var(--mj-bg-sunken) 0%, var(--mj-bg-sunken) 40%, color-mix(in oklab, var(--mj-bg-sunken) 40%, var(--mj-bg-surface)) 50%, var(--mj-bg-sunken) 60%) 0 0 / 300% 100%; animation: mj-shimmer 1.6s linear infinite; }
@keyframes mj-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .mj-skeleton { animation: none; } }

/* ---------- Alerta -------------------------------------------------------- */
.mj-alert {
    --_bg: var(--mj-info-soft); --_fg: var(--mj-info-soft-ink);
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--mj-space-1) var(--mj-space-3); align-items: start;
    padding: var(--mj-space-4); border-radius: var(--mj-radius-lg);
    color: var(--_fg); background: var(--_bg);
    font-size: var(--mj-text-sm); line-height: var(--mj-leading-normal);
}
.mj-alert svg { margin-top: 1px; }
.mj-alert strong { display: block; font-weight: var(--mj-weight-semibold); }
.mj-alert p { margin: 0; color: color-mix(in oklab, var(--_fg) 84%, var(--_bg)); }
.mj-alert .mj-btn { grid-row: span 2; align-self: center; }
.mj-alert--attention { --_bg: var(--mj-attention-soft); --_fg: var(--mj-attention-soft-ink); }
.mj-alert--success { --_bg: var(--mj-success-soft); --_fg: var(--mj-success-soft-ink); }
.mj-alert--critical { --_bg: var(--mj-critical-soft); --_fg: var(--mj-critical-soft-ink); }

/* ---------- Menú (popover nativo) ---------------------------------------- */
.mj-menu {
    margin: 0; inset: auto; position: fixed;
    min-width: 232px; padding: var(--mj-inset-popover);
    color: var(--mj-fg); background: var(--mj-bg-raised);
    border: 0; border-radius: var(--mj-radius-lg);
    box-shadow: var(--mj-highlight), var(--mj-shadow-md);
    transform-origin: var(--_origin, top left);
    opacity: 1; transform: none;
    transition: opacity var(--mj-dur-quick) var(--mj-ease-out), transform var(--mj-dur-base) var(--mj-ease-out), overlay var(--mj-dur-base) allow-discrete, display var(--mj-dur-base) allow-discrete;
}
.mj-menu:not(:popover-open) { opacity: 0; transform: scale(.96) translateY(-4px); }
@starting-style { .mj-menu:popover-open { opacity: 0; transform: scale(.96) translateY(-4px); } }
.mj-menu__item {
    display: flex; align-items: center; gap: var(--mj-space-3); width: 100%;
    height: 36px; padding-inline: var(--mj-space-3);
    font: var(--mj-weight-medium) var(--mj-text-md)/1 var(--mj-font-ui); color: var(--mj-fg);
    background: none; border: 0; border-radius: calc(var(--mj-radius-lg) - var(--mj-inset-popover));
    cursor: pointer; text-align: start;
}
.mj-menu__item svg { color: var(--mj-fg-subtle); width: var(--mj-icon-sm); height: var(--mj-icon-sm); }
.mj-menu__item:hover, .mj-menu__item:focus-visible { background: var(--mj-bg-hover); outline: none; }
.mj-menu__item .mj-kbd { margin-inline-start: auto; }
.mj-menu__item--critical, .mj-menu__item--critical svg { color: var(--mj-critical-ink); }
.mj-menu__sep { height: 1px; margin: var(--mj-space-1) var(--mj-space-2); background: var(--mj-border-subtle); }

/* ---------- Tooltip ------------------------------------------------------- */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 8px);
    padding: 6px 10px; border-radius: var(--mj-radius-sm);
    font: var(--mj-weight-medium) var(--mj-text-xs)/1.2 var(--mj-font-ui);
    color: var(--mj-fg-inverse); background: var(--mj-bg-inverse);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translate(-50%, 4px) scale(.97); transform-origin: bottom center;
    transition: opacity var(--mj-dur-quick) var(--mj-ease-out), transform var(--mj-dur-quick) var(--mj-ease-out);
    transition-delay: 0ms;
    z-index: 5;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 350ms; }

/* ---------- Toast --------------------------------------------------------- */
.mj-toaster {
    position: fixed; z-index: var(--mj-z-toast);
    right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: min(380px, calc(100vw - 32px));
    display: grid; pointer-events: none;
}
.mj-toast {
    grid-area: 1 / 1; align-self: end;
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--mj-space-3); align-items: center;
    padding: var(--mj-space-3) var(--mj-space-3) var(--mj-space-3) var(--mj-space-4);
    color: var(--mj-fg); background: var(--mj-bg-raised);
    border-radius: var(--mj-radius-lg);
    box-shadow: var(--mj-highlight), var(--mj-shadow-lg);
    font-size: var(--mj-text-sm);
    pointer-events: auto;
    transform: translateY(calc(var(--_i, 0) * -10px)) scale(calc(1 - var(--_i, 0) * .05));
    opacity: calc(1 - var(--_i, 0) * .22);
    transition: transform var(--mj-dur-smooth) var(--mj-spring-smooth), opacity var(--mj-dur-base) var(--mj-ease-out);
}
@starting-style { .mj-toast { transform: translateY(24px) scale(.96); opacity: 0; } }
.mj-toast[data-leaving] { transform: translateY(12px) scale(.97); opacity: 0; transition-duration: var(--mj-dur-base); transition-timing-function: var(--mj-ease-out); }
.mj-toast__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--mj-radius-md); color: var(--mj-success-ink); background: var(--mj-success-soft); }
.mj-toast strong { display: block; font-weight: var(--mj-weight-semibold); }
.mj-toast > div > span { display: block; margin-top: 2px; color: var(--mj-fg-subtle); font-size: var(--mj-text-xs); }

/* ---------- Diálogo (el único, sobre <dialog> nativo) -------------------- */
.mj-dialog {
    width: min(var(--_w, var(--mj-dialog-md)), calc(100vw - 32px));
    max-height: min(86vh, 860px);
    padding: 0; margin: auto;
    color: var(--mj-fg); background: var(--mj-bg-raised);
    border: 0; border-radius: var(--mj-radius-2xl);
    box-shadow: var(--mj-highlight), var(--mj-shadow-xl);
    overflow: hidden;
    opacity: 1; transform: none;
    transition: opacity var(--mj-dur-base) var(--mj-ease-out), transform var(--mj-dur-smooth) var(--mj-spring-smooth), overlay var(--mj-dur-gentle) allow-discrete, display var(--mj-dur-gentle) allow-discrete;
}
.mj-dialog:not([open]) { opacity: 0; transform: translateY(8px) scale(.97); transition-duration: var(--mj-dur-base); transition-timing-function: var(--mj-ease-out); }
@starting-style { .mj-dialog[open] { opacity: 0; transform: translateY(12px) scale(.96); } }
.mj-dialog::backdrop { background: var(--mj-bg-scrim); opacity: 1; transition: opacity var(--mj-dur-gentle) var(--mj-ease-out), overlay var(--mj-dur-gentle) allow-discrete, display var(--mj-dur-gentle) allow-discrete; }
.mj-dialog:not([open])::backdrop { opacity: 0; }
@starting-style { .mj-dialog[open]::backdrop { opacity: 0; } }
.mj-dialog--sm { --_w: var(--mj-dialog-sm); }
.mj-dialog--lg { --_w: var(--mj-dialog-lg); }
.mj-dialog__header { display: flex; align-items: flex-start; gap: var(--mj-space-4); padding: var(--mj-space-6) var(--mj-space-6) 0; }
.mj-dialog__header h3 { margin: 0; font: var(--mj-weight-semibold) var(--mj-text-2xl)/var(--mj-leading-snug) var(--mj-font-display); letter-spacing: var(--mj-tracking-heading); }
.mj-dialog__header p { margin: var(--mj-space-1) 0 0; font-size: var(--mj-text-sm); color: var(--mj-fg-subtle); }
.mj-dialog__header .mj-btn { margin-inline-start: auto; margin-top: -6px; margin-inline-end: -8px; }
.mj-dialog__body { display: grid; gap: var(--mj-stack-group); padding: var(--mj-space-6); overflow: auto; }
.mj-dialog__footer { display: flex; justify-content: flex-end; gap: var(--mj-inline); padding: var(--mj-space-4) var(--mj-space-6); background: var(--mj-bg-sunken); }

/* ---------- Estado vacío -------------------------------------------------- */
.mj-empty { display: grid; justify-items: center; gap: var(--mj-space-2); padding: var(--mj-space-10) var(--mj-space-6); text-align: center; }
.mj-empty__art { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--mj-space-2); border-radius: var(--mj-radius-lg); color: var(--mj-structure-ink); background: var(--mj-structure-soft); }
.mj-empty__art svg { width: 26px; height: 26px; }
.mj-empty h4, .mj-empty__title { margin: 0; font: var(--mj-weight-semibold) var(--mj-text-xl)/1.3 var(--mj-font-ui); }
.mj-empty p { margin: 0 0 var(--mj-space-3); max-width: 36ch; font-size: var(--mj-text-sm); color: var(--mj-fg-subtle); line-height: var(--mj-leading-normal); }
/* Dentro de un panel: compacto y centrado en el alto mínimo del cuerpo, para que el panel vacío no se encoja. */
.mj-empty--panel { align-content: center; gap: var(--mj-space-1); padding: var(--mj-space-4); }
.mj-empty--panel .mj-empty__art { width: var(--mj-control-md); height: var(--mj-control-md); margin-bottom: var(--mj-space-1); border-radius: var(--mj-radius-md); }
.mj-empty--panel .mj-empty__art svg { width: var(--mj-icon-lg); height: var(--mj-icon-lg); }
.mj-empty--panel :is(h4, .mj-empty__title) { font-size: var(--mj-text-md); }
.mj-empty--panel p { margin-bottom: var(--mj-space-2); font-size: var(--mj-text-xs); }
.mj-empty--critical .mj-empty__art { color: var(--mj-critical-ink); background: var(--mj-critical-soft); }

/* ---------- Tabla --------------------------------------------------------- */
.mj-table-wrap { overflow-x: auto; border-radius: var(--mj-radius-xl); background: var(--mj-bg-surface); box-shadow: var(--mj-highlight); }
.mj-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--mj-text-sm); }
.mj-table th {
    position: sticky; top: 0; z-index: 1;
    height: 40px; padding-inline: var(--mj-space-4);
    font-weight: var(--mj-weight-semibold); font-size: var(--mj-text-xs); color: var(--mj-fg-subtle); text-align: start;
    background: var(--mj-bg-sunken); white-space: nowrap;
}
.mj-table td { height: var(--mj-row); padding-inline: var(--mj-space-4); border-top: 1px solid var(--mj-border-subtle); white-space: nowrap; color: var(--mj-fg-muted); }
.mj-table td:first-child { color: var(--mj-fg); }
.mj-table tbody tr { transition: background-color var(--mj-dur-quick) var(--mj-ease-hover); }
.mj-table tbody tr:hover { background: var(--mj-bg-hover); }
.mj-table tbody tr[aria-selected="true"] { background: var(--mj-bg-selected); }
.mj-table .is-num { text-align: end; font-variant-numeric: tabular-nums; }
.mj-table__primary { display: flex; align-items: center; gap: var(--mj-space-3); font-weight: var(--mj-weight-medium); }
.mj-table__primary small { display: block; font-weight: var(--mj-weight-regular); font-size: var(--mj-text-xs); color: var(--mj-fg-subtle); margin-top: 2px; }
.mj-meter { display: inline-flex; align-items: center; gap: var(--mj-space-2); font-variant-numeric: tabular-nums; }
.mj-meter__track { width: 72px; height: 6px; border-radius: var(--mj-radius-pill); background: var(--mj-bg-sunken); overflow: hidden; }
.mj-meter__bar { height: 100%; width: calc(var(--_v) * 1%); background: var(--mj-series-2); border-radius: inherit; }

/* ---------- Lista acotada con scroll -------------------------------------- */
/* Alto máximo en filas (8 y media: la fila cortada avisa que hay más), nunca más de 60 dvh (50 en móvil).
   La tabla va directo adentro, sin .mj-table-wrap, para que su encabezado fijo se pegue a esta zona.
   Las sombras de borde solo aparecen cuando hay contenido oculto en esa dirección. */
.mj-scroll-area { display: grid; gap: var(--mj-stack); min-width: 0; }
.mj-scroll {
    --_head: 0px;
    --_max: calc(var(--mj-row) * var(--mj-panel-rows-max) + var(--_head));
    max-height: min(var(--_max), var(--mj-panel-viewport-max));
    overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    border-radius: var(--mj-radius-lg);
    background:
        linear-gradient(var(--mj-bg-surface) 30%, transparent) top / 100% var(--mj-space-6) no-repeat local,
        linear-gradient(transparent, var(--mj-bg-surface) 70%) bottom / 100% var(--mj-space-6) no-repeat local,
        radial-gradient(farthest-side at 50% 0, color-mix(in oklab, var(--mj-fg) 14%, transparent), transparent) top / 100% var(--mj-space-2) no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, color-mix(in oklab, var(--mj-fg) 14%, transparent), transparent) bottom / 100% var(--mj-space-2) no-repeat scroll,
        var(--mj-bg-surface);
}
.mj-scroll:has(> .mj-table) { --_head: 40px; } /* el alto de .mj-table th */
@media (max-width: 639.98px) { .mj-scroll { max-height: min(var(--_max), var(--mj-panel-viewport-max-sm)); } }
.mj-scroll-area__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mj-inline); font-size: var(--mj-text-xs); color: var(--mj-fg-subtle); }
.mj-scroll-area__foot a { font-weight: var(--mj-weight-medium); color: var(--mj-info-ink); text-decoration: none; }
.mj-scroll-area__foot a:hover { text-decoration: underline; }

/* ---------- Navbar flotante ----------------------------------------------- */
.mj-nav {
    display: flex; align-items: center; gap: var(--mj-space-2);
    height: 56px; padding: 0 var(--mj-space-2) 0 var(--mj-space-4);
    background: var(--mj-bg-raised);
    border-radius: var(--mj-radius-pill);
    box-shadow: var(--mj-highlight), var(--mj-shadow-md);
    min-width: 0;
}
.mj-nav__brand { display: inline-flex; align-items: center; gap: var(--mj-space-2); margin-inline-end: var(--mj-space-2); font: var(--mj-weight-bold) var(--mj-text-md)/1 var(--mj-font-display); letter-spacing: -0.02em; color: var(--mj-fg); white-space: nowrap; }
.mj-nav__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--mj-primary-on-fill); background: var(--mj-primary-fill); font: 800 13px/1 var(--mj-font-display); letter-spacing: -0.04em; }
.mj-nav__links { position: relative; isolation: isolate; display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mj-nav__link {
    display: inline-flex; align-items: center; gap: var(--mj-space-1-5);
    height: 40px; padding-inline: var(--mj-space-4);
    font: var(--mj-weight-medium) var(--mj-text-md)/1 var(--mj-font-ui); color: var(--mj-fg-muted);
    background: none; border: 0; border-radius: var(--mj-radius-pill);
    white-space: nowrap; cursor: pointer;
    transition: color var(--mj-dur-base) var(--mj-ease-hover);
}
.mj-nav__link svg { width: var(--mj-icon-sm); height: var(--mj-icon-sm); }
.mj-nav__link:hover { color: var(--mj-fg); }
.mj-nav__link[aria-current="page"], .mj-nav__link[aria-current="true"] { color: var(--mj-structure-on-fill); }
.mj-nav__indicator {
    position: absolute; z-index: -1; top: 0; left: 0; height: 40px;
    width: var(--_w, 0px); transform: translateX(var(--_x, 0px));
    background: var(--mj-structure-fill); border-radius: var(--mj-radius-pill);
    transition: transform var(--mj-dur-smooth) var(--mj-spring-smooth), width var(--mj-dur-smooth) var(--mj-spring-smooth);
}
.mj-nav__tools { display: flex; align-items: center; gap: var(--mj-space-1); margin-inline-start: auto; }

/* ---------- Colores forzados ---------------------------------------------- */
@media (forced-colors: active) {
    .mj-btn, .mj-chip, .mj-input, .mj-segmented, .mj-card, .mj-tile, .mj-dialog, .mj-menu { border: 1px solid CanvasText; }
    .mj-segmented__thumb, .mj-nav__indicator, .mj-tabs__indicator { background: Highlight; }
    .mj-nav__link[aria-current] { color: HighlightText; }
}

}