/*
 * mg-r3.css — GENERADO por herramientas/mg-gen-r3 (no se edita: `node herramientas/mg-gen-r3/cli/generar.mjs`;
 * `--check` falla si este archivo difiere de lo que emite el generador).
 *
 * Autoridad R3 (copias byte a byte, ver web/r3/tokens/PROCEDENCIA.md):
 *   brand-tokens.json        sha256 4be440b36c2768d4f5a30edc5c2a30eabf03ac2d44a66427cb1f1c8e7c04b949
 *   brand-design-tokens.css  sha256 2bc8f706c1eb232b73a02bbcc6d27ec614c1f40219f24e618da76d0ad220b1b7
 *
 * Variantes derivadas (contraste WCAG 2.1 medido sobre el hex emitido):
 *   --mg-money-positive    #10B981  texto #007E56 (5.10 blanco · 4.87 surface · 4.61 suave)  solido #00875C (blanco encima 4.55)  borde #00A975 (3.03)
 *   --mg-status-complete   #0F9F8F  texto #007C6F (5.11 blanco · 4.88 surface · 4.62 suave)  solido #008477 (blanco encima 4.60)  borde #0F9F8F (3.29)
 *   --mg-status-warning    #F59E0B  texto #9A6100 (5.14 blanco · 4.91 surface · 4.56 suave)  solido #A66900 (blanco encima 4.52)  borde #CE8400 (3.03)
 *   --mg-status-danger     #EF4444  texto #D4252D (5.12 blanco · 4.89 surface · 4.53 suave)  solido #DF3236 (blanco encima 4.52)  borde #EF4444 (3.76)
 *   --mg-status-info       #3B82F6  texto #2169DA (5.12 blanco · 4.90 surface · 4.55 suave)  solido #2B72E5 (blanco encima 4.52)  borde #3B82F6 (3.68)
 *   --mg-brand-blue        #2563EB  texto #2563EB (5.17 blanco · 4.94 surface · 4.60 suave)  solido #2563EB (blanco encima 5.17)  borde #2563EB (5.17)
 *
 * Fuentes:
 *   Inter: @fontsource-variable/inter@5.3.0 (OFL-1.1), latin + latin-ext, servida desde /r3/fuentes/inter/
 *   Plus Jakarta Sans: @fontsource-variable/plus-jakarta-sans@5.3.0 (OFL-1.1), latin + latin-ext, servida desde /r3/fuentes/plus-jakarta-sans/
 *
 * Provisionales (no-R3, decisión UI-G0 pendiente): escala tipográfica --mg-type-*, pesos, interlineado,
 * sombras --mg-elevation-*, capas --mg-layer-*, breakpoints --mg-bp-*, foco, easing, --mg-space-0/16,
 * medidas --mg-formulario-* y --mg-campo-*.
 *
 * UX-LATERAL: los tokens --mg-lateral-* (fondo, grupo activo, entrada activa, textos, foco) en :root y en cada tema
 * (core/lateral.js; luminancias de bo.valkyrie.ar, contraste medido).
 *
 * F-VC (Valkyrie L9): diez temas por persona en bloques [data-mg-tema] (roles y derivadas medidos contra
 * cada tema; los primitivos R3 no cambian), la escala por dispositivo en [data-mg-escala] y los seis tonos
 * de categoría --mg-categoria-N-{fondo,texto} (ver core/temas.js).
 */
@layer mg.legacy, mg.tokens, mg.base, mg.components, mg.surface, mg.utilities;

/* @fontsource-variable/inter@5.3.0 · latin-ext · OFL-1.1 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/r3/fuentes/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/r3/fuentes/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* @fontsource-variable/inter@5.3.0 · latin · OFL-1.1 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/r3/fuentes/inter/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/r3/fuentes/inter/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* @fontsource-variable/plus-jakarta-sans@5.3.0 · latin-ext · OFL-1.1 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/r3/fuentes/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/r3/fuentes/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* @fontsource-variable/plus-jakarta-sans@5.3.0 · latin · OFL-1.1 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/r3/fuentes/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"), url("/r3/fuentes/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@layer mg.tokens {
  :root {
    /* ── R3 literal: brand-design-tokens.css ── */
    --mg-brand-navy: #0B1F44;
    --mg-brand-blue: #2563EB;
    --mg-brand-electric: #00A3FF;
    --mg-brand-cyan: #14D1C8;
    --mg-neutral-slate: #64748B;
    --mg-neutral-gray: #94A3B8;
    --mg-neutral-border: #E2E8F0;
    --mg-neutral-surface: #F8FAFC;
    --mg-neutral-white: #FFFFFF;
    --mg-money-positive: #10B981;
    --mg-status-complete: #0F9F8F;
    --mg-status-warning: #F59E0B;
    --mg-status-danger: #EF4444;
    --mg-status-info: #3B82F6;
    --mg-font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
    --mg-font-ui: Inter, system-ui, sans-serif;
    --mg-space-1: .25rem;
    --mg-space-2: .5rem;
    --mg-space-3: .75rem;
    --mg-space-4: 1rem;
    --mg-space-6: 1.5rem;
    --mg-space-8: 2rem;
    --mg-space-12: 3rem;
    --mg-radius-sm: .375rem;
    --mg-radius-md: .75rem;
    --mg-radius-lg: 1rem;
    --mg-radius-xl: 1.5rem;
    --mg-motion-fast: 120ms;
    --mg-motion-base: 200ms;
    --mg-motion-slow: 320ms;
    --mg-spinner-duration: 800ms;
    --mg-shimmer-duration: 1500ms;

    /* ── R3 literal: brand-tokens.json (motion.logoRevealMs; no está en el CSS de R3) ── */
    --mg-logo-reveal-duration: 1000ms;

    /* ── Derivadas con contraste verificado (el primitivo R3 queda intacto) ── */
    --mg-money-positive-texto: #007E56;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #00A975;
    --mg-status-complete-texto: #007C6F;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #9A6100;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #CE8400;
    --mg-status-danger-texto: #D4252D;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #2169DA;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2563EB;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;

    /* ── Neutros derivados del slate de R3 (ola 0 del rework visual): texto tenue/sutil y borde con cuerpo ── */
    --mg-neutro-tenue: #47566C;
    --mg-neutro-sutil: #64748B;
    --mg-neutro-borde-fuerte: #8192AA;

    /* ── Roles semánticos MG (apuntan a R3 o a derivadas) ── */
    --mg-color-fondo: var(--mg-neutral-surface);
    --mg-color-superficie: var(--mg-neutral-white);
    --mg-color-texto: var(--mg-brand-navy);
    --mg-color-texto-atenuado: var(--mg-neutral-slate);
    --mg-color-texto-tenue: var(--mg-neutro-tenue);
    --mg-color-texto-sutil: var(--mg-neutro-sutil);
    --mg-color-borde: var(--mg-neutro-borde-fuerte);
    --mg-color-borde-suave: var(--mg-neutral-border);
    --mg-color-borde-control: var(--mg-neutral-slate);
    --mg-color-deshabilitado: var(--mg-neutral-gray);
    --mg-color-sobre-solido: var(--mg-neutral-white);
    --mg-color-accion: var(--mg-brand-blue-solido);
    --mg-color-accion-hover: var(--mg-brand-blue-solido-hover);
    --mg-color-accion-suave: var(--mg-brand-blue-suave);
    --mg-color-enlace: var(--mg-brand-blue-texto);
    --mg-color-foco: var(--mg-brand-blue);
    --mg-color-marca-profunda: var(--mg-brand-navy);
    --mg-color-sobre-marca-profunda: var(--mg-neutral-surface);
    --mg-color-marca-acento: var(--mg-brand-cyan);
    --mg-color-esqueleto: var(--mg-neutral-border);
    --mg-color-esqueleto-brillo: var(--mg-neutral-surface);
    --mg-color-brand-sobre-suave: var(--mg-brand-blue-texto);
    --mg-color-success-sobre-suave: var(--mg-status-complete-texto);
    --mg-color-warning-sobre-suave: var(--mg-status-warning-texto);
    --mg-color-danger-sobre-suave: var(--mg-status-danger-texto);
    --mg-color-info-sobre-suave: var(--mg-status-info-texto);

    /* ── Provisionales: no-R3, decisión UI-G0 pendiente ── */
    --mg-type-xs: .75rem;
    --mg-type-sm: .875rem;
    --mg-type-base: 1rem;
    --mg-type-md: 1.125rem;
    --mg-type-lg: 1.25rem;
    --mg-type-xl: 1.5rem;
    --mg-type-2xl: 1.875rem;
    --mg-type-3xl: 2.25rem;
    --mg-weight-normal: 400;
    --mg-weight-medium: 500;
    --mg-weight-semibold: 600;
    --mg-weight-bold: 700;
    --mg-leading-ajustado: 1.25;
    --mg-leading-base: 1.5;
    --mg-space-0: 0;
    --mg-space-16: 4rem;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
    --mg-elevation-0: none;
    --mg-elevation-1: 0 1px 2px var(--mg-elevation-color);
    --mg-elevation-2: 0 1px 2px var(--mg-elevation-color), 0 4px 12px var(--mg-elevation-color);
    --mg-elevation-3: 0 2px 4px var(--mg-elevation-color), 0 12px 32px var(--mg-elevation-color);
    --mg-layer-base: 0;
    --mg-layer-elevado: 10;
    --mg-layer-fijo: 20;
    --mg-layer-panel: 30;
    --mg-layer-cajon: 40;
    --mg-layer-modal: 50;
    --mg-layer-aviso: 60;
    --mg-layer-tooltip: 70;
    --mg-bp-sm: 480px;
    --mg-bp-md: 768px;
    --mg-bp-lg: 1024px;
    --mg-bp-xl: 1440px;
    --mg-ease-out: cubic-bezier(.2, .8, .4, 1);
    --mg-focus-ring-width: 2px;
    --mg-focus-ring-offset: 2px;
    --mg-control-min: 2.75rem;
    --mg-measure: 68ch;
    --mg-contenedor-max: 75rem;
    --mg-font-numeric: ui-monospace, "DM Mono", Menlo, Consolas, monospace;
    --mg-formulario-max: 32rem;
    --mg-formulario-texto: 40rem;
    --mg-formulario-grilla: 64rem;
    --mg-formulario-columna: 24rem;
    --mg-campo-codigo: 10rem;
    --mg-campo-corto: 14rem;
    --mg-campo-importe: 18rem;
    --mg-vidrio-transparencia-base: 1;
    --mg-vidrio-transparencia-lente: 1;
    --mg-vidrio-transparencia-campo: 1;
    --mg-vidrio-transparencia-densa: 1;
    --mg-vidrio-fondo-base: var(--mg-color-superficie);
    --mg-vidrio-fondo-lente: var(--mg-color-superficie);
    --mg-vidrio-fondo-campo: var(--mg-color-superficie);
    --mg-vidrio-fondo-denso: var(--mg-color-superficie);
    --mg-vidrio-fondo-flotante: var(--mg-color-superficie);
    --mg-vidrio-velo-superficie: var(--mg-color-superficie);
    --mg-vidrio-velo-hundido: var(--mg-color-fondo);
    --mg-vidrio-desenfoque-base: 0px;
    --mg-vidrio-desenfoque-lente: 0px;
    --mg-vidrio-desenfoque-fuerte: 0px;
    --mg-vidrio-saturacion: 1;
    --mg-vidrio-banda: 0px;
    --mg-vidrio-fondo-banda: transparent;
    --mg-vidrio-borde-color: var(--mg-color-borde);
    --mg-vidrio-borde-fuerte: var(--mg-color-borde);
    --mg-vidrio-borde-suave: var(--mg-color-borde-suave);
    --mg-vidrio-canto: transparent;
    --mg-vidrio-canto-suave: transparent;
    --mg-vidrio-canto-sombra: transparent;
    --mg-vidrio-caustica: transparent;
    --mg-vidrio-iluminacion: 0 0 transparent;
    --mg-vidrio-espesor: 0 0 transparent;
    --mg-vidrio-sombra: var(--mg-elevation-1);
    --mg-vidrio-contacto: transparent;
    --mg-vidrio-luz-angulo: 132deg;
    --mg-vidrio-seleccion: var(--mg-color-accion);
    --mg-vidrio-sobre-seleccion: var(--mg-color-sobre-solido);
    --mg-reflejo-x: 24%;
    --mg-reflejo-y: 0%;
    --mg-escena-base: transparent;
    --mg-escena-azul: transparent;
    --mg-escena-turquesa: transparent;
    --mg-escena-bruma: transparent;
    --mg-escena-extremo: transparent;
    --mg-escena-velo: 0%;
    --mg-escena-velo-telefono: 0%;
    --mg-escena-exposicion: 0.81;
    --mg-escena-x: 0.66;
    --mg-escena-y: 0.52;
    --mg-escena-cobertura: 0.78;
    --mg-escena-max-px: 520;
    --mg-isotipo-solo-tam: clamp(18rem, 38vmin, 29rem);
    --mg-isotipo-duracion: 7s;
    --mg-patron-escala: 1;
    --mg-patron-flote-dist: 9px;
    --mg-patron-flote-tilt: 1.8deg;
    --mg-mate-base-1: var(--mg-color-fondo);
    --mg-mate-base-2: var(--mg-color-fondo);
    --mg-mate-capa-1: var(--mg-color-superficie);
    --mg-mate-capa-2: var(--mg-color-superficie);
    --mg-mate-hundida: var(--mg-color-fondo);
    --mg-mate-borde: var(--mg-color-borde);
    --mg-mate-sombra: var(--mg-elevation-color);
    --mg-mate-satinado: transparent;
    --mg-tonal-primario: var(--mg-color-accion-suave);
    --mg-tonal-sobre-primario: var(--mg-color-brand-sobre-suave);
    --mg-tonal-secundario: var(--mg-color-fondo);
    --mg-tonal-sobre-secundario: var(--mg-color-texto);
    --mg-tonal-variante: var(--mg-color-fondo);
    --mg-tonal-sobre-variante: var(--mg-color-texto-atenuado);
    --mg-tonal-contorno: var(--mg-color-borde);
    --mg-tonal-elevada: var(--mg-color-superficie);
    --mg-grafito-capa-1: var(--mg-color-superficie);
    --mg-grafito-capa-2: var(--mg-color-fondo);
    --mg-grafito-capa-3: var(--mg-color-fondo);
    --mg-grafito-separador: var(--mg-color-borde-suave);
    --mg-grafito-elevada: var(--mg-color-superficie);

    /* ── F-VC · tonos de categoría (no son estados): fondo tenue y texto con contraste medido ── */
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;

    /* ── UX-LATERAL · el menú lateral (luminancias de bo.valkyrie.ar, ver core/lateral.js) ── */
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
  }

  /* R3 literal: con movimiento reducido el spinner se hace MÁS LENTO (1400ms), no se detiene. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --mg-motion-fast: 1ms;
      --mg-motion-base: 1ms;
      --mg-motion-slow: 1ms;
      --mg-spinner-duration: 1400ms;
      --mg-shimmer-duration: 1ms;
    }
  }

  /* Extensión MG (no-R3): la animación de entrada de la marca no se reproduce con movimiento reducido. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --mg-logo-reveal-duration: 1ms;
    }
  }
}

@layer mg.base {
  /* ── web/r3/fuente/base.css ── */
  /*
   * Capa mg.base — SÓLO bajo [data-mg-surface].
   *
   * La pone `cascara()` en <html>. Las pantallas legado de App no la tienen, así que cargar mg-r3.css
   * junto al mg.css viejo no les cambia la tipografía ni el fondo: lo único que les llega son los
   * tokens (y el puente de variables, que es a propósito).
   *
   * ⚠ En App las páginas R3 cargan además el mg.css viejo en `mg.legacy`, y sus reglas de ELEMENTO
   * (`a { text-decoration: none }`, `img, svg { display: block }`, `:focus-visible { border-radius }`)
   * sobreviven a toda propiedad que esta capa no vuelva a fijar: el mismo componente se vería
   * distinto en App que en Comercial y Control (MC-01). Por eso acá se fija CADA propiedad que el
   * legado toca en un elemento suelto (lo verifica K-9 del generador), con el valor que ya tenían
   * App y el legado donde el de R3 no estaba decidido.
   */
  :where([data-mg-surface]) {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  :where([data-mg-surface]) *,
  :where([data-mg-surface]) *::before,
  :where([data-mg-surface]) *::after {
    box-sizing: border-box;
  }
  :where([data-mg-surface]) body {
    margin: 0;
    min-height: 100dvh;
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto);
    font-family: var(--mg-font-ui);
    font-size: var(--mg-type-base);
    line-height: var(--mg-leading-base);
  }
  :where([data-mg-surface]) :is(h1, h2, h3, h4) {
    margin: 0 0 var(--mg-space-3);
    font-family: var(--mg-font-heading);
    line-height: var(--mg-leading-ajustado);
    color: var(--mg-color-texto);
    letter-spacing: -0.01em;
  }
  :where([data-mg-surface]) h1 { font-size: var(--mg-type-2xl); font-weight: var(--mg-weight-bold); }
  :where([data-mg-surface]) h2 { font-size: var(--mg-type-xl); font-weight: var(--mg-weight-semibold); }
  :where([data-mg-surface]) h3 { font-size: var(--mg-type-lg); font-weight: var(--mg-weight-semibold); }
  :where([data-mg-surface]) h4 { font-size: var(--mg-type-md); font-weight: var(--mg-weight-semibold); }
  :where([data-mg-surface]) p { margin: 0 0 var(--mg-space-4); max-width: var(--mg-measure); }
  :where([data-mg-surface]) a {
    color: var(--mg-color-enlace);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
  }
  :where([data-mg-surface]) a:hover { text-decoration-thickness: 2px; }
  :where([data-mg-surface]) :focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
    border-radius: var(--mg-radius-sm);
  }
  :where([data-mg-surface]) :is(img, svg) { display: block; max-width: 100%; }
  :where([data-mg-surface]) img { height: auto; }
  :where([data-mg-surface]) :is(input, select, textarea, button) { font: inherit; }
  :where([data-mg-surface]) table { border-collapse: collapse; }
  :where([data-mg-surface]) :is(dl, dd) { margin: 0; }
  /* 16 px en puntero grueso: por debajo, iOS hace zoom al enfocar el control. */
  @media (pointer: coarse) {
    :where([data-mg-surface]) :is(input, select, textarea) { font-size: max(1rem, var(--mg-type-base)); }
  }
}

@layer mg.components {
  /* ── web/r3/fuente/apariencia.css ── */
  /*
   * F-VC · «Apariencia»: el selector de los temas (cards con una MUESTRA que lleva su propio `data-mg-tema`, así se dibuja con
   * los colores de ese tema aunque la página tenga otro) y la escala. Radios ocultos pero enfocables.
   *
   * APARIENCIA POR PÁGINA (31/10/2026): además, el PANEL lateral (`<dialog>` no modal: la pantalla real sigue viva debajo
   * para la vista previa), las TARJETAS de estilo con su miniatura (la misma composición para todas: barra, lateral, tarjeta,
   * campo y botón, con los tokens del tema de la tarjeta), la vista previa dentro del panel, el gestor «Por página» y el aviso
   * con «Deshacer». El panel es una superficie SÓLIDA del tema (`--mg-color-superficie`): sus controles no forman parte del
   * efecto óptico que la persona está ajustando (las hojas de cada familia le dan su capa elevada; cristal no lo toca).
   */
  .mgui-temas { margin: 0 0 var(--mg-space-6); padding: 0; border: 0; min-inline-size: 0; }
  .mgui-temas__leyenda { margin-block-end: var(--mg-space-1); padding: 0; font-size: var(--mg-type-md); font-weight: var(--mg-weight-semibold); }
  .mgui-temas__grupo { margin-block-start: var(--mg-space-4); }
  .mgui-temas__titulo { margin: 0 0 var(--mg-space-2); font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto-atenuado); }
  .mgui-temas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: var(--mg-space-3); }
  .mgui-tema { position: relative; display: flex; flex-direction: column; gap: var(--mg-space-2); cursor: pointer; }
  .mgui-tema__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
  }
  .mgui-tema__nombre { font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto); }
  .mgui-tema-muestra {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 2px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
    block-size: 5.5rem;
  }
  .mgui-tema-muestra__superficie {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    padding: var(--mg-space-2);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
  }
  .mgui-tema-muestra__renglon { display: block; block-size: .375rem; border-radius: 999px; background: var(--mg-color-texto); inline-size: 80%; }
  .mgui-tema-muestra__renglon--corto { inline-size: 50%; background: var(--mg-color-texto-atenuado); }
  .mgui-tema-muestra__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); }
  .mgui-tema-muestra__boton { display: block; inline-size: 2.5rem; block-size: .875rem; border-radius: var(--mg-radius-sm); background: var(--mg-color-accion); }
  .mgui-tema-muestra__marca { display: block; inline-size: 1.5rem; block-size: .875rem; border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-sm); background: var(--mg-color-marca-profunda); }
  .mgui-tema__control:checked + .mgui-tema-muestra { outline: 3px solid var(--mg-color-accion); outline-offset: 2px; }
  .mgui-tema__control:focus-visible + .mgui-tema-muestra { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 5px; }
  .mgui-tema__control:checked ~ .mgui-tema__nombre { color: var(--mg-color-enlace); }
  .mgui-escala .mgui-eleccion__chip { min-inline-size: 4.25rem; justify-content: center; font-variant-numeric: tabular-nums; }
  .mgui-apariencia { max-inline-size: none; }
  @media (forced-colors: active) {
    .mgui-tema__control:checked + .mgui-tema-muestra { outline: 3px solid Highlight; }
  }

  /* ── APARIENCIA POR PÁGINA · el panel lateral ──────────────────────────────────────────────────────────────────── */
  .mgui-apariencia-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--mg-layer-cajon);
    display: none;
    flex-direction: column;
    inline-size: min(30rem, 100vw);
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-inline-start: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-3);
    font-family: var(--mg-font-ui);
    font-size: var(--mg-type-base);
    line-height: var(--mg-leading-base);
    text-align: start;
  }
  .mgui-apariencia-panel[open] { display: flex; }
  .mgui-apariencia-panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3) var(--mg-space-4);
    border-block-end: 1px solid var(--mg-color-borde);
  }
  .mgui-apariencia-panel__titulo { display: inline-flex; align-items: center; gap: var(--mg-space-2); margin: 0; font-size: var(--mg-type-lg); }
  .mgui-apariencia-panel__cerrar { flex: none; }
  .mgui-apariencia-panel__cuerpo { flex: 1 1 auto; min-block-size: 0; padding: var(--mg-space-4); overflow-y: auto; overscroll-behavior: contain; }
  .mgui-apariencia__regla { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-apariencia__alcance { margin: 0; }
  .mgui-apariencia__alcance .mgui-segmentado__grupo { display: flex; }
  .mgui-apariencia__alcance .mgui-segmentado__item { flex: 1 1 0; min-inline-size: 0; }
  .mgui-apariencia__alcance .mgui-segmentado__opcion { flex: 1 1 auto; justify-content: center; text-align: center; }
  .mgui-apariencia__form { margin: 0; }
  /* (`hidden` dentro del panel y de la página de ajustes: regla en `utilidades.css`, la única capa que le gana a `.mgui-stack`.) */
  .mgui-apariencia__subtitulo { margin: 0; font-size: var(--mg-type-lg); }
  .mgui-apariencia__estado { margin: 0; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto); }
  .mgui-apariencia__estilos,
  .mgui-apariencia__comodidad { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .mgui-apariencia__leyenda { margin-block-end: var(--mg-space-1); padding: 0; font-size: var(--mg-type-md); font-weight: var(--mg-weight-semibold); }
  .mgui-apariencia__plegable { margin: 0; }
  .mgui-apariencia__sumario {
    display: list-item;
    min-block-size: 2.25rem;
    padding: var(--mg-space-1) 0;
    color: var(--mg-color-enlace);
    font-weight: var(--mg-weight-semibold);
    cursor: pointer;
  }
  .mgui-apariencia__sumario:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); border-radius: var(--mg-radius-sm); }
  .mgui-apariencia__ajustar > :not(summary) { margin-block-start: var(--mg-space-2); }
  .mgui-apariencia__limite { color: var(--mg-status-warning-texto); }
  .mgui-apariencia__nota { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-apariencia__pie { display: flex; flex-direction: column; gap: var(--mg-space-2); padding-block-start: var(--mg-space-3); border-block-start: 1px solid var(--mg-color-borde-suave); }
  .mgui-apariencia__pendiente { margin: 0; }
  .mgui-apariencia__mensaje { margin: 0; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-status-warning-texto); }
  .mgui-apariencia__mensaje.is-ok { color: var(--mg-status-complete-texto); }
  .mgui-apariencia__mensaje.is-error { color: var(--mg-status-danger-texto); }
  .mgui-apariencia__mas { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-apariencia__mas a { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  /* Con el panel abierto, la pantalla sigue operable; en el teléfono cubre el ancho y la barra inferior queda detrás. */
  @media not all and (min-width: 768px) {
    .mgui-apariencia-panel { inline-size: 100vw; border-inline-start: 0; }
  }

  /* ── Las tarjetas de estilo ────────────────────────────────────────────────────────────────────────────────────── */
  .mgui-estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(8.75rem, 100%), 1fr)); gap: var(--mg-space-3); }
  .mgui-estilos--un-tono { margin-block-start: var(--mg-space-2); }
  .mgui-estilo { position: relative; display: flex; flex-direction: column; gap: var(--mg-space-1); padding: var(--mg-space-1); border-radius: var(--mg-radius-md); cursor: pointer; }
  .mgui-estilo__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
  }
  .mgui-estilo__nombre { font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto); }
  .mgui-estilo__frase { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-estilo__marca {
    position: absolute;
    inset-block-start: var(--mg-space-2);
    inset-inline-end: var(--mg-space-2);
    display: grid;
    place-items: center;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    border-radius: 999px;
    background: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
    opacity: 0;
    transition: opacity var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-estilo__marca > .mgui-ico { inline-size: .875rem; block-size: .875rem; }
  .mgui-estilo:hover .mgui-estilo-mini { border-color: var(--mg-color-borde-control); }
  .mgui-estilo__control:checked ~ .mgui-estilo-mini { outline: 3px solid var(--mg-color-accion); outline-offset: 2px; }
  .mgui-estilo__control:checked ~ .mgui-estilo__marca { opacity: 1; }
  .mgui-estilo__control:checked ~ .mgui-estilo__nombre { color: var(--mg-color-enlace); }
  .mgui-estilo__control:focus-visible ~ .mgui-estilo-mini { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 5px; }
  .mgui-estilo.is-disabled { opacity: .55; cursor: not-allowed; }
  /* «Usar el estilo general»: la miniatura del general con borde discontinuo (es la herencia, no otra tarjeta). */
  .mgui-estilo--general .mgui-estilo-mini { border-style: dashed; }

  /* ── La miniatura: la misma composición para todas; los colores, del tema de la tarjeta ───────────────────────── */
  .mgui-estilo-mini {
    position: relative;
    display: grid;
    grid-template-columns: 1.125rem minmax(0, 1fr);
    grid-template-rows: .875rem minmax(0, 1fr);
    grid-template-areas: "barra barra" "lateral tarjeta";
    gap: .25rem;
    block-size: 5.75rem;
    padding: .3125rem;
    overflow: hidden;
    border: 2px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto);
    isolation: isolate;
    /* La miniatura es el bloque contenedor también de lo FIJO: una regla de tema escrita para `<html>` (p. ej. un
       `[data-mg-tema="…"]::before { position: fixed; inset: 0 }` de malla o aurora) matchea el `data-mg-tema` de la
       miniatura y, sin esto, pintaría toda la ventana por encima del panel; con `contain: paint` queda adentro, recortada. */
    contain: paint;
  }
  /* La escena del fondo (lo que un cristal transmite): un degradé con los acentos de la marca, tenue en los opacos. */
  .mgui-estilo-mini__escena {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(60% 55% at 78% 72%, color-mix(in oklab, var(--mg-color-marca-acento) 55%, transparent), transparent 70%),
      radial-gradient(50% 50% at 20% 30%, color-mix(in oklab, var(--mg-color-accion) 40%, transparent), transparent 70%);
    opacity: var(--mg-vidrio-transparencia-base); /* integración 31/10: CRISTAL V3 renombró --mg-vidrio-fondo-opacidad → -transparencia-base */
  }
  .mgui-estilo-mini__barra { grid-area: barra; display: flex; align-items: center; gap: .25rem; padding-inline: .25rem; border-radius: .1875rem; background: var(--mg-vidrio-fondo-flotante); font-size: .5rem; font-weight: var(--mg-weight-semibold); }
  .mgui-estilo-mini__marca { display: block; inline-size: .5rem; block-size: .5rem; border-radius: 999px; background: var(--mg-color-marca-profunda); }
  .mgui-estilo-mini__texto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mgui-estilo-mini__lateral { grid-area: lateral; display: flex; flex-direction: column; gap: .1875rem; padding: .1875rem; border-radius: .1875rem; background: var(--mg-lateral-fondo); }
  .mgui-estilo-mini__item { display: block; block-size: .3125rem; border-radius: 999px; background: var(--mg-lateral-atenuado); }
  .mgui-estilo-mini__item--activo { background: var(--mg-lateral-activo); }
  .mgui-estilo-mini__tarjeta {
    grid-area: tarjeta;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-block-size: 0;
    padding: .3125rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: .25rem;
    background: var(--mg-vidrio-fondo-base);
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-elevation-1);
  }
  .mgui-estilo-mini__titulo { display: block; block-size: .3125rem; inline-size: 60%; border-radius: 999px; background: var(--mg-color-texto); font-size: .5rem; line-height: .3125rem; overflow: hidden; color: transparent; }
  .mgui-estilo-mini__campo { display: block; block-size: .5rem; border: 1px solid var(--mg-color-borde-control); border-radius: .125rem; background: var(--mg-vidrio-fondo-denso); font-size: .5rem; line-height: .5rem; color: transparent; overflow: hidden; }
  .mgui-estilo-mini__filas { display: none; }
  .mgui-estilo-mini__boton { display: block; inline-size: 40%; block-size: .4375rem; margin-block-start: auto; border-radius: .125rem; background: var(--mg-color-accion); font-size: .5rem; line-height: .4375rem; color: transparent; overflow: hidden; }
  /* Los temas cristal transmiten la escena: la tarjeta de la miniatura desenfoca lo que tiene detrás (un blur chico). */
  [data-mg-tema^="cristal-"].mgui-estilo-mini .mgui-estilo-mini__tarjeta,
  [data-mg-tema^="cristal-"].mgui-estilo-mini .mgui-estilo-mini__barra {
    backdrop-filter: blur(3px) saturate(var(--mg-vidrio-saturacion));
    -webkit-backdrop-filter: blur(3px) saturate(var(--mg-vidrio-saturacion));
    border-color: var(--mg-vidrio-borde-color);
  }
  /* Las familias opacas, con su acabado: mica con satinado y sombra; tonal con la variante en la barra; grafito plano. */
  [data-mg-tema^="mineral-"].mgui-estilo-mini { background: linear-gradient(160deg, var(--mg-mate-base-1), var(--mg-color-fondo) 48%, var(--mg-mate-base-2)); }
  [data-mg-tema^="mineral-"].mgui-estilo-mini .mgui-estilo-mini__tarjeta { background: var(--mg-mate-capa-1); border-color: var(--mg-mate-borde); box-shadow: inset 0 1px 0 var(--mg-mate-satinado), 0 2px 6px var(--mg-mate-sombra); }
  [data-mg-tema^="mineral-"].mgui-estilo-mini .mgui-estilo-mini__barra { background: var(--mg-mate-capa-2); }
  [data-mg-tema^="tonal-"].mgui-estilo-mini .mgui-estilo-mini__barra { background: var(--mg-tonal-elevada); }
  [data-mg-tema^="tonal-"].mgui-estilo-mini .mgui-estilo-mini__tarjeta { border-color: var(--mg-tonal-contorno); box-shadow: none; }
  [data-mg-tema^="tonal-"].mgui-estilo-mini .mgui-estilo-mini__titulo { background: var(--mg-tonal-primario); }
  [data-mg-tema^="grafito-"].mgui-estilo-mini .mgui-estilo-mini__tarjeta { border-color: var(--mg-grafito-separador); box-shadow: none; }
  [data-mg-tema^="grafito-"].mgui-estilo-mini .mgui-estilo-mini__barra { background: var(--mg-grafito-elevada); box-shadow: 0 0 0 1px var(--mg-grafito-separador); }
  [data-mg-tema^="grafito-"].mgui-estilo-mini .mgui-estilo-mini__campo { background: var(--mg-grafito-capa-2); }

  /* ── La vista previa grande (dentro del panel, cuando la página tiene estilo propio) ────────────────────────────── */
  .mgui-apariencia-previa { display: flex; flex-direction: column; gap: var(--mg-space-2); }
  .mgui-estilo-mini--grande {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    grid-template-rows: 1.5rem minmax(0, 1fr);
    gap: .5rem;
    block-size: 11rem;
    padding: .5rem;
  }
  .mgui-estilo-mini--grande .mgui-estilo-mini__barra { font-size: var(--mg-type-xs); padding-inline: .5rem; }
  .mgui-estilo-mini--grande .mgui-estilo-mini__marca { inline-size: .75rem; block-size: .75rem; }
  .mgui-estilo-mini--grande .mgui-estilo-mini__item { block-size: .5rem; }
  .mgui-estilo-mini--grande .mgui-estilo-mini__tarjeta { gap: .375rem; padding: .5rem; }
  .mgui-estilo-mini--grande .mgui-estilo-mini__titulo { block-size: auto; inline-size: auto; border-radius: 0; background: none; color: var(--mg-color-texto); font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); line-height: 1.2; }
  .mgui-estilo-mini--grande .mgui-estilo-mini__campo { block-size: auto; padding: .125rem .375rem; color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-xs); line-height: 1.4; }
  .mgui-estilo-mini--grande .mgui-estilo-mini__filas { display: flex; flex-direction: column; gap: .125rem; font-size: var(--mg-type-xs); }
  .mgui-estilo-mini--grande .mgui-estilo-mini__fila { padding-block: .125rem; border-block-end: 1px solid var(--mg-color-borde-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mgui-estilo-mini--grande .mgui-estilo-mini__boton { inline-size: auto; block-size: auto; align-self: flex-start; padding: .125rem .5rem; color: var(--mg-color-sobre-solido); font-size: var(--mg-type-xs); font-weight: var(--mg-weight-semibold); line-height: 1.4; }

  /* ── El gestor «Por página» ───────────────────────────────────────────────────────────────────────────────────── */
  .mgui-apariencia-pagina { max-inline-size: none; }
  .mgui-apariencia-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); }
  .mgui-apariencia-lista__fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "pagina acciones" "estado acciones";
    gap: var(--mg-space-1) var(--mg-space-3);
    align-items: center;
    padding: var(--mg-space-2) var(--mg-space-3);
    border-block-end: 1px solid var(--mg-color-borde-suave);
  }
  .mgui-apariencia-lista__fila:last-child { border-block-end: 0; }
  .mgui-apariencia-lista__pagina { grid-area: pagina; font-weight: var(--mg-weight-semibold); }
  .mgui-apariencia-lista__estado { grid-area: estado; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-apariencia-lista__acciones { grid-area: acciones; justify-content: flex-end; }
  .mgui-apariencia-lista__form { margin: 0; }
  .mgui-apariencia__afectadas { margin: 0; padding-inline-start: var(--mg-space-4); font-size: var(--mg-type-sm); }
  .mgui-apariencia__confirmar { margin: 0; }
  @media (min-width: 768px) {
    .mgui-apariencia-lista__fila { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; grid-template-areas: "pagina estado acciones"; }
  }

  /* ── El aviso con «Deshacer» (el aviso flotante de siempre, con un formulario adentro) ─────────────────────────── */
  .mgui-apariencia-aviso { max-inline-size: min(28rem, calc(100vw - 2 * var(--mg-space-4))); }
  .mgui-apariencia-aviso__deshacer { margin: var(--mg-space-2) 0 0; }

  @media (forced-colors: active) {
    .mgui-estilo__control:checked ~ .mgui-estilo-mini { outline: 3px solid Highlight; }
    .mgui-estilo__marca { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mgui-estilo__marca { transition: none; }
  }
  @media print {
    .mgui-apariencia-panel { display: none; }
  }

  /* ── web/r3/fuente/app-cascara-barras.css ── */
  /*
   * F-V2 · CÁSCARA-SIDEBAR-Y-TOOLBAR (pedido del titular del 12/10/2026, §11: «Sidebar y toolbar de Valkyrie: se autoocultan y
   * son TODO configurables; dentro del sidebar identificar bien GRUPOS y SUBGRUPOS»). Completa `app-cascara.css` (F-A5).
   *
   * SIN GUION (la App no tiene `script-src`): la barra de arriba y el menú se esconden con una animación que espera los
   * segundos que eligió la persona (`data-mg-*-espera`, `web/interfaz-modelo.ts`) y se reinicia cada vez que el puntero o el
   * foco SALEN de la barra —mientras están adentro, `animation-name: none` la deja a la vista (y al volver el nombre, la
   * animación arranca de cero; nunca `animation: none`, que R3 prohíbe como apagado en bloque)—: la misma semántica que el
   * temporizador de Valkyrie (`useBarraAuto`: la cuenta arranca al mostrarse y no corre con el puntero encima). Vuelven:
   *   · con el puntero en el borde (la franja que queda a la vista es parte de la barra: `:hover`);
   *   · con el teclado (`:focus-within`: recorrer con el tabulador la trae);
   *   · con el TIRADOR (la etiqueta de una casilla: en un teléfono o una tableta, donde no hay puntero que se acerque),
   *     que la deja a la vista hasta cambiar de pantalla.
   * Escondida, el contenido gana el lugar: el menú CEDE su columna (Valkyrie, 9/9/2026: «cuando se ocultan deben ceder su
   * espacio para agrandar la parte central») y la barra, fija arriba, deja de tapar lo que se desplaza.
   *
   * Los grupos y subgrupos del menú son `<details>`: se pliegan sin guion y el control anuncia «expandido/contraído». En el
   * teléfono, el cajón entra por encima (fijo) con «Cerrar el menú» arriba, y una barra de ATAJOS abajo llega al pulgar.
   * Sin colores crudos ni !important; con movimiento reducido, sin transición (el cambio de estado sigue).
   */
  .mgui-app {
    --mgui-espera-barra: 12s;
    --mgui-espera-lateral: 12s;
    --mgui-carril: .75rem;
    /* Z-R · 232 px como bo.valkyrie.ar (`--mg-sidebar-ancho`); el riel, 56 px; los accesos de la derecha, 60 px si se ven. */
    --mgui-lateral-ancho: 14.5rem;
    --mgui-accesos-ancho: 0px;
    --mgui-movimiento: var(--mg-motion-base);
    --mgui-atajos-alto: 3.5rem;
  }
  .mgui-app[data-mg-barra-espera="5"] { --mgui-espera-barra: 5s; }
  .mgui-app[data-mg-barra-espera="8"] { --mgui-espera-barra: 8s; }
  .mgui-app[data-mg-barra-espera="12"] { --mgui-espera-barra: 12s; }
  .mgui-app[data-mg-barra-espera="20"] { --mgui-espera-barra: 20s; }
  .mgui-app[data-mg-barra-espera="30"] { --mgui-espera-barra: 30s; }
  .mgui-app[data-mg-barra-espera="60"] { --mgui-espera-barra: 60s; }
  .mgui-app[data-mg-lateral-espera="5"] { --mgui-espera-lateral: 5s; }
  .mgui-app[data-mg-lateral-espera="8"] { --mgui-espera-lateral: 8s; }
  .mgui-app[data-mg-lateral-espera="12"] { --mgui-espera-lateral: 12s; }
  .mgui-app[data-mg-lateral-espera="20"] { --mgui-espera-lateral: 20s; }
  .mgui-app[data-mg-lateral-espera="30"] { --mgui-espera-lateral: 30s; }
  .mgui-app[data-mg-lateral-espera="60"] { --mgui-espera-lateral: 60s; }
  @media (prefers-reduced-motion: reduce) {
    .mgui-app { --mgui-movimiento: 1ms; }
  }

  /* Las casillas del tirador: fuera de la vista y del recorrido (el teclado ya trae las barras con el foco). */
  .mgui-app__ver { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }

  /* ── La barra de arriba que se esconde sola (toda pantalla) ─────────────────────────────────────────────────────────── */
  @keyframes mgui-barra-se-va {
    from { transform: none; }
    to { transform: translateY(calc(-100% + .375rem)); }
  }
  .mgui-app[data-mg-barra="auto"] > .mgui-app-marcas {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--mg-layer-fijo);
    animation: mgui-barra-se-va var(--mgui-movimiento) var(--mg-ease-out) var(--mgui-espera-barra) both;
  }
  .mgui-app[data-mg-barra="auto"] > .mgui-app-marcas:is(:hover, :focus-within),
  .mgui-app__ver--barra:checked ~ .mgui-app-marcas,
  .mgui-app__interruptor:checked ~ .mgui-app-marcas {
    animation-name: none;
    transform: none;
    box-shadow: var(--mg-elevation-1);
  }

  /* ── El tirador (la manija que la devuelve en una pantalla táctil): aparece recién cuando la barra se fue ───────────── */
  @keyframes mgui-tirador-aparece {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
  }
  .mgui-app__tirador {
    position: fixed;
    z-index: var(--mg-layer-panel);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--mg-control-min);
    min-block-size: 2rem;
    border: 1px solid var(--mg-color-borde-control);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto-atenuado);
    box-shadow: var(--mg-elevation-1);
    cursor: pointer;
    font-size: var(--mg-type-base);
    line-height: 1;
  }
  .mgui-app__tirador--barra {
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    border-block-start: 0;
    border-radius: 0 0 var(--mg-radius-sm) var(--mg-radius-sm);
    animation: mgui-tirador-aparece var(--mgui-movimiento) linear var(--mgui-espera-barra) both;
  }
  .mgui-app__tirador--lateral {
    display: none;
    inset-block-start: 50%;
    inset-inline-start: 0;
    min-inline-size: 1.75rem;
    min-block-size: var(--mg-control-min);
    border-inline-start: 0;
    border-radius: 0 var(--mg-radius-sm) var(--mg-radius-sm) 0;
    animation: mgui-tirador-aparece var(--mgui-movimiento) linear var(--mgui-espera-lateral) both;
  }
  .mgui-app__tirador:hover { color: var(--mg-color-enlace); }
  .mgui-app__ver--barra:checked ~ .mgui-app__tirador--barra,
  .mgui-app__ver--lateral:checked ~ .mgui-app__tirador--lateral,
  .mgui-app__interruptor:checked ~ .mgui-app__tirador { display: none; }
  .mgui-app[data-mg-barra="auto"]:has(> .mgui-app-marcas:is(:hover, :focus-within)) > .mgui-app__tirador--barra { animation-name: none; opacity: 0; visibility: hidden; }

  /* ── Grupos y subgrupos del menú ───────────────────────────────────────────────────────────────────────────────────── */
  details.mgui-app-menu__grupo { gap: 0; }
  .mgui-app-menu__grupo > summary.mgui-app-menu__titulo,
  .mgui-app-menu__subtitulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    min-block-size: 2.25rem;
    border-radius: var(--mg-radius-sm);
    cursor: pointer;
    list-style: none;
  }
  .mgui-app-menu__grupo > summary.mgui-app-menu__titulo { margin: 0; }
  .mgui-app-menu__grupo > summary.mgui-app-menu__titulo::-webkit-details-marker,
  .mgui-app-menu__subtitulo::-webkit-details-marker { display: none; }
  /* El chevrón dice si el grupo está abierto (el control lo anuncia por su cuenta). */
  .mgui-app-menu__grupo > summary.mgui-app-menu__titulo::after,
  .mgui-app-menu__subtitulo::after {
    content: "";
    flex: none;
    inline-size: .45rem;
    block-size: .45rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--mgui-movimiento) var(--mg-ease-out);
  }
  .mgui-app-menu__grupo[open] > summary.mgui-app-menu__titulo::after,
  .mgui-app-menu__subgrupo[open] > .mgui-app-menu__subtitulo::after { transform: rotate(45deg); }
  .mgui-app-menu__grupo > summary.mgui-app-menu__titulo:hover,
  .mgui-app-menu__subtitulo:hover { background: color-mix(in oklab, var(--mg-lateral-texto) 10%, transparent); color: var(--mg-lateral-texto); }
  .mgui-app-menu__grupo > summary.mgui-app-menu__titulo:focus-visible,
  .mgui-app-menu__subtitulo:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-lateral-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-app-menu__grupo[open] > .mgui-app-menu__lista,
  .mgui-app-menu__grupo[open] > .mgui-app-menu__subgrupo { margin-block-start: var(--mg-space-1); }
  /* El grupo donde se está parado: su fondo (app-cascara.css) y su título en la tinta plena, como `mg-nav__group.mg-is-active-group`. */
  .mgui-app-menu__grupo--activo > summary.mgui-app-menu__titulo { color: var(--mg-lateral-texto); }
  /*
   * LATERAL-COLORES (titular 20/10): los grupos ABIERTOS en gris y el SELECCIONADO en el celeste del isotipo; en los dos, el NOMBRE del
   * grupo (su primera fila) un tono más intenso que sus entradas. Los tokens los emite el generador (core/lateral.js) con el contraste
   * medido en cada tema. El seleccionado gana aunque esté abierto; el pasar por encima es un velo de la tinta sobre su propio fondo.
   */
  details.mgui-app-menu__grupo[open]:not(.mgui-app-menu__grupo--activo) { background: var(--mg-lateral-abierto); }
  details.mgui-app-menu__grupo[open]:not(.mgui-app-menu__grupo--activo) > summary.mgui-app-menu__titulo {
    background: var(--mg-lateral-abierto-titulo);
    color: var(--mg-lateral-texto);
  }
  details.mgui-app-menu__grupo[open]:not(.mgui-app-menu__grupo--activo) > summary.mgui-app-menu__titulo:hover {
    background: color-mix(in oklab, var(--mg-lateral-texto) 8%, var(--mg-lateral-abierto-titulo));
  }
  .mgui-app-menu__grupo--activo > summary.mgui-app-menu__titulo { background: var(--mg-lateral-grupo-titulo); }
  .mgui-app-menu__grupo.mgui-app-menu__grupo--activo > summary.mgui-app-menu__titulo:hover {
    background: color-mix(in oklab, var(--mg-lateral-texto) 8%, var(--mg-lateral-grupo-titulo));
  }
  .mgui-app-menu__subgrupo { margin: 0; }
  .mgui-app-menu__subtitulo {
    padding: var(--mg-space-1) var(--mg-space-3);
    color: var(--mg-lateral-atenuado);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    letter-spacing: .02em;
    line-height: 1.3;
  }
  .mgui-app-menu__subgrupo--activo > .mgui-app-menu__subtitulo { color: var(--mg-lateral-texto); }
  /* La SANGRÍA del subgrupo: sus entradas cuelgan de una línea, más adentro que las sueltas del grupo. */
  .mgui-app-menu__lista--sub {
    margin-block: var(--mg-space-1) var(--mg-space-2);
    margin-inline-start: var(--mg-space-4);
    padding-inline-start: var(--mg-space-2);
    border-inline-start: 1px solid var(--mg-lateral-borde);
  }
  .mgui-app-menu__lista--sub .mgui-app-menu__enlace { min-block-size: 2.25rem; font-weight: var(--mg-weight-normal); }
  .mgui-app-menu__lista--sub .mgui-app-menu__enlace[aria-current="page"] { font-weight: var(--mg-weight-semibold); }
  .mgui-app-menu__grupo--favoritos > .mgui-app-menu__titulo { color: var(--mg-lateral-texto); }
  .mgui-app-menu__personalizar { margin: 0; }
  .mgui-app-menu__cerrar { display: none; }

  /* Los favoritos en la barra de arriba (si la persona lo eligió): sólo en el escritorio. */
  .mgui-app__favoritos-barra { display: none; }
  .mgui-app__favoritos-lista { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; }
  .mgui-app__favorito {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    padding-inline: var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-medium);
    text-decoration: none;
  }
  .mgui-app__favorito:hover,
  .mgui-app__favorito[aria-current="page"] { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }

  /* La barra de ATAJOS: sólo en el teléfono. */
  .mgui-app__atajos { display: none; }

  /* ── Escritorio: el menú que se esconde solo y CEDE su columna ─────────────────────────────────────────────────────── */
  @keyframes mgui-columna-se-va {
    from { grid-template-columns: var(--mgui-lateral-ancho) minmax(0, 1fr) var(--mgui-accesos-ancho); }
    to { grid-template-columns: var(--mgui-carril) minmax(0, 1fr) var(--mgui-accesos-ancho); }
  }
  @keyframes mgui-lateral-se-va {
    from { transform: none; }
    to { transform: translateX(calc(var(--mgui-carril) - 100%)); }
  }
  @media (min-width: 769px) and (min-height: 521px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none),
    (min-width: 561px) and (min-height: 901px), (min-width: 561px) and (min-height: 521px) and (pointer: coarse) {
    .mgui-app__favoritos-barra { display: block; margin-inline: auto var(--mg-space-2); }
    .mgui-app[data-mg-lateral="auto"] {
      grid-template-columns: var(--mgui-lateral-ancho) minmax(0, 1fr) var(--mgui-accesos-ancho);
      animation: mgui-columna-se-va var(--mgui-movimiento) var(--mg-ease-out) var(--mgui-espera-lateral) both;
    }
    .mgui-app[data-mg-lateral="auto"] > .mgui-app__lateral {
      inline-size: var(--mgui-lateral-ancho);
      box-sizing: border-box;
      position: sticky;
      inset-block-start: 0;
      align-self: start;
      max-block-size: 100dvh;
      overflow-y: auto;
      z-index: var(--mg-layer-elevado);
      animation: mgui-lateral-se-va var(--mgui-movimiento) var(--mg-ease-out) var(--mgui-espera-lateral) both;
    }
    /* Con el puntero, el foco o el tirador adentro, el menú vuelve y la cuenta se detiene; al salir, arranca de cero. */
    .mgui-app[data-mg-lateral="auto"]:has(> .mgui-app__lateral:is(:hover, :focus-within)),
    .mgui-app[data-mg-lateral="auto"]:has(> .mgui-app__ver--lateral:checked) { animation-name: none; }
    .mgui-app[data-mg-lateral="auto"] > .mgui-app__lateral:is(:hover, :focus-within),
    .mgui-app__ver--lateral:checked ~ .mgui-app__lateral { animation-name: none; transform: none; }
    .mgui-app[data-mg-lateral="auto"] > .mgui-app__tirador--lateral { display: inline-flex; }
    .mgui-app[data-mg-lateral="auto"]:has(> .mgui-app__lateral:is(:hover, :focus-within)) > .mgui-app__tirador--lateral { animation-name: none; opacity: 0; visibility: hidden; }
  }

  /* ── Teléfono: el cajón entra por encima y la barra de atajos queda abajo, al alcance del pulgar ──────────────────── */
  @media not (((min-width: 769px) and (min-height: 521px)) or ((min-width: 769px) and (pointer: fine)) or ((min-width: 769px) and (pointer: none))
    or ((min-width: 561px) and (min-height: 901px)) or ((min-width: 561px) and (min-height: 521px) and (pointer: coarse))) {
    .mgui-app__interruptor:checked ~ .mgui-app__lateral {
      position: fixed;
      inset-block: 0 calc(var(--mgui-atajos-alto) + env(safe-area-inset-bottom));
      inset-inline: 0;
      z-index: var(--mg-layer-cajon);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-block-start: max(var(--mg-space-4), env(safe-area-inset-top));
    }
    .mgui-app__interruptor:checked ~ .mgui-app__lateral .mgui-app-menu__cerrar {
      display: inline-flex;
      align-self: flex-end;
      align-items: center;
      min-block-size: var(--mg-control-min);
      padding-inline: var(--mg-space-3);
      border: 1px solid var(--mg-color-borde-control);
      border-radius: var(--mg-radius-sm);
      background: var(--mg-color-superficie);
      color: var(--mg-color-texto);
      cursor: pointer;
      font-size: var(--mg-type-sm);
      font-weight: var(--mg-weight-semibold);
    }
    .mgui-app__atajos {
      display: block;
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: var(--mg-layer-modal);
      padding-block-end: env(safe-area-inset-bottom);
      border-block-start: 1px solid var(--mg-color-borde);
      background: var(--mg-color-superficie);
      box-shadow: var(--mg-elevation-1);
    }
    .mgui-app__atajos-lista {
      display: flex;
      margin: 0;
      padding: 0 max(var(--mg-space-1), env(safe-area-inset-right)) 0 max(var(--mg-space-1), env(safe-area-inset-left));
      list-style: none;
    }
    .mgui-app__atajos-lista > li { flex: 1 1 0; min-inline-size: 0; }
    .mgui-app__atajo {
      display: flex;
      align-items: center;
      justify-content: center;
      min-block-size: var(--mgui-atajos-alto);
      padding-inline: var(--mg-space-1);
      color: var(--mg-color-texto);
      cursor: pointer;
      font-size: var(--mg-type-xs);
      font-weight: var(--mg-weight-semibold);
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      overflow-wrap: anywhere;
    }
    .mgui-app__atajo[aria-current="page"] { color: var(--mg-color-enlace); box-shadow: inset 0 3px 0 var(--mg-color-accion); }
    .mgui-app__interruptor:checked ~ .mgui-app__atajos .mgui-app__atajo--menu { color: var(--mg-color-enlace); box-shadow: inset 0 3px 0 var(--mg-color-accion); }
    .mgui-app__interruptor:focus-visible ~ .mgui-app__atajos .mgui-app__atajo--menu {
      outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
      outline-offset: calc(-1 * var(--mg-focus-ring-width));
    }
    .mgui-app__contenido { padding-block-end: calc(var(--mg-space-12) + var(--mgui-atajos-alto) + env(safe-area-inset-bottom)); }
  }

  /* ── «Mi cuenta › Menú y barras» (`web/r3-interfaz.ts`) ────────────────────────────────────────────────────────────── */
  .mgui-interfaz__bloque,
  .mgui-interfaz__grupo {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    margin: 0;
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    min-inline-size: 0;
  }
  .mgui-interfaz__leyenda {
    padding-inline: var(--mg-space-1);
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-base);
    font-weight: var(--mg-weight-bold);
  }
  .mgui-interfaz__subgrupo {
    margin: var(--mg-space-2) 0 0;
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .mgui-interfaz__lista { display: flex; flex-direction: column; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; }
  .mgui-interfaz__lista--sub { padding-inline-start: var(--mg-space-3); border-inline-start: 1px solid var(--mg-color-borde); }
  .mgui-interfaz__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
    min-block-size: var(--mg-control-min);
    padding-block: var(--mg-space-1);
    border-block-end: 1px solid var(--mg-color-borde);
  }
  .mgui-interfaz__casilla { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--mg-color-accion); }
  .mgui-interfaz__nombre { flex: 1 1 10rem; min-inline-size: 0; font-size: var(--mg-type-sm); overflow-wrap: anywhere; }
  .mgui-interfaz__acciones { display: inline-flex; flex-wrap: wrap; gap: var(--mg-space-1); }
  .mgui-interfaz__acciones > .mgui-btn { min-inline-size: 2.5rem; }
  .mgui-interfaz__estrella[aria-pressed="true"] { color: var(--mg-color-enlace); }

  /* ── web/r3/fuente/app-cascara.css ── */
  /*
   * F-A5 · La cáscara de ADENTRO de la App (`pagina()` en `web/plantilla.ts`) en R3: la barra de arriba (marca, íconos y
   * contadores del encabezado, logo del inquilino y «Menú»), el menú lateral claro por grupos y el contenido. Reemplaza a
   * `.mg-app`, `.mg-app-side`, `.mg-app-main` y `.mg-app-top` del `mg.css` viejo (pedido del titular del 11/10/2026).
   *
   * No depende de `[data-mg-surface]`: el contenido de muchas pantallas todavía es del legado (clases `mg-*` en la capa
   * `mg.legacy`) y la capa base de R3 le ganaría a sus utilidades. La cáscara fija su propia tipografía.
   *
   * Sin JavaScript: el menú del teléfono es la casilla + etiqueta de siempre (la casilla en el recorrido del tabulador y el
   * anillo de foco reenviado a la etiqueta visible). Z-R: el corte del cajón es el de bo.valkyrie.ar (ver `lateral.css`): la
   * computadora es una lista de `min-width` y el teléfono su complemento exacto `not (…)`. Sin colores crudos ni !important.
   */
  .mgui-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "barra" "lateral" "contenido";
    grid-template-rows: auto auto 1fr;
    min-block-size: 100dvh;
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto);
    font-family: var(--mg-font-ui);
    font-size: var(--mg-type-base);
    line-height: var(--mg-leading-base);
  }
  /*
   * TEMAS DE CRISTAL · el shell de la App no puede repintar el fondo con el color de superficie sólido o la escena
   * decorativa queda tapada: el `<html>` pinta la base del tema y `.mgui-escena` (CRISTAL V3, `escena.css`: el canvas con
   * el isotipo 3D sobre su fondo procedural, o su imagen de respaldo) queda fija detrás de todo con z-index -1. Como
   * `.mgui-app` cubre toda la ventana (grid 100dvh), con fondo opaco encima nada de eso llega al ojo. Fijar
   * `background: transparent` en los cuatro temas «cristal-*» deja la escena visible debajo del contenido, que es lo que la
   * familia de temas pide. El resto de temas conserva su fondo sólido original.
   */
  [data-mg-tema^="cristal-"] .mgui-app { background: transparent; }
  /* La barra de arriba es el encabezado de marcas de siempre (`ui/app-marca.ts`): acá sólo se la ubica y se la deja partir. */
  .mgui-app > .mgui-app-marcas { grid-area: barra; flex-wrap: wrap; }
  /* Sin la capa base (que fija el margen del cuerpo sólo bajo `[data-mg-surface]`), el cuerpo no deja un borde blanco. */
  :where(body):has(> .mgui-app, > .mgui-puerta) { margin: 0; }
  .mgui-app__interruptor { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .mgui-app__abrir {
    display: none;
    align-items: center;
    gap: var(--mg-space-2);
    min-block-size: var(--mg-control-min);
    padding-inline: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    cursor: pointer;
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-app__interruptor:focus-visible ~ .mgui-app-marcas .mgui-app__abrir {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-app__lateral {
    grid-area: lateral;
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-6);
    padding: var(--mg-space-4);
    border-block-end: 1px solid var(--mg-lateral-borde);
    background: var(--mg-lateral-fondo);
    color: var(--mg-lateral-texto);
  }
  .mgui-app-menu__nav { display: flex; flex-direction: column; gap: var(--mg-space-3); }
  /*
   * UX-LATERAL (18/10, pedido del titular: «el item seleccionado y el grupo seleccionado quedan identificados con un color o
   * background color que los resalte, tal como esta ahora en valkyrie»). Los colores son los `--mg-lateral-*` que emite el
   * generador (luminancias de `--mg-sidebar-*` de Valkyrie, contraste medido en cada tema): el GRUPO donde se está parado lleva
   * fondo (`--mg-lateral-grupo`, con radio) y la ENTRADA activa, fondo sólido de la acción con texto blanco. Todos los grupos
   * llevan el mismo relleno, así abrir o cerrar el activo no corre el resto.
   */
  .mgui-app-menu__grupo { display: flex; flex-direction: column; gap: var(--mg-space-1); padding: var(--mg-space-1); border-radius: var(--mg-radius-md); }
  .mgui-app-menu__grupo[hidden],
  .mgui-app-menu__subgrupo[hidden],
  .mgui-app-menu__lista > li[hidden],
  .mgui-app-menu__filtro-vacio[hidden] { display: none; }
  .mgui-app-menu__grupo--activo { background: var(--mg-lateral-grupo); }
  /*
   * Z-R (coordinador, 17/10): los títulos de GRUPO y de SUBGRUPO con la MISMA forma, como bo.valkyrie.ar (`mg-sidebar-group-btn`,
   * `mg-nav__subgroup-btn`): en tipo de oración (sin versalitas), atenuados y con su chevrón; las ENTRADAS, en el color del
   * texto. Antes unos grupos iban en versalitas y los subgrupos parecían entradas con chevrón.
   */
  .mgui-app-menu__titulo {
    margin: 0 0 var(--mg-space-1);
    padding-inline: var(--mg-space-3);
    color: var(--mg-lateral-atenuado);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    line-height: 1.3;
  }
  .mgui-app-menu__lista { display: flex; flex-direction: column; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; }
  .mgui-app-menu__enlace {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    min-block-size: 2.5rem;
    padding: var(--mg-space-2) var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-lateral-texto);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-medium);
    text-decoration: none;
  }
  /*
   * El pasar por encima NO se confunde con el estar parado: el hover es un velo de la tinta sobre el fondo en que esté
   * (lateral o grupo activo), nunca el sólido de la entrada activa. La entrada activa (`aria-current`) va sólida y en negrita, y
   * ya no lleva la barra de 3 px: con el relleno completo la barra sobraba (y en el riel de 56 px comía el ícono).
   */
  .mgui-app-menu__enlace:hover:not([aria-current="page"]) { background: color-mix(in oklab, var(--mg-lateral-texto) 10%, transparent); }
  .mgui-app-menu__enlace[aria-current="page"] {
    background: var(--mg-lateral-activo);
    color: var(--mg-lateral-sobre-activo);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-app-menu__enlace:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-lateral-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-app-menu__sesion { gap: var(--mg-space-3); padding-block-start: var(--mg-space-4); border-block-start: 1px solid var(--mg-lateral-borde); }
  .mgui-app-menu__sesion form { margin: 0; }
  .mgui-app__contenido {
    grid-area: contenido;
    min-inline-size: 0;
    inline-size: 100%;
    padding-block: var(--mg-space-6) var(--mg-space-12);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
  }
  .mgui-app__contenido:focus { outline: none; }
  .mgui-app__encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-4);
    margin-block-end: var(--mg-space-6);
  }
  .mgui-app__encabezado > * { flex-wrap: wrap; }
  .mgui-app__titular { flex: 1 1 18rem; min-inline-size: 0; }
  .mgui-app__titulo {
    margin: 0;
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-xl);
    font-weight: var(--mg-weight-bold);
    line-height: var(--mg-leading-ajustado);
    letter-spacing: -0.01em;
  }
  .mgui-app__bajada { margin: var(--mg-space-1) 0 0; color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  @media (min-width: 769px) and (min-height: 521px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none),
    (min-width: 561px) and (min-height: 901px), (min-width: 561px) and (min-height: 521px) and (pointer: coarse) {
    .mgui-app {
      grid-template-columns: var(--mgui-lateral-ancho) minmax(0, 1fr) var(--mgui-accesos-ancho);
      grid-template-areas: "barra barra barra" "lateral contenido accesos";
      grid-template-rows: auto 1fr;
    }
    .mgui-app__interruptor { display: none; }
    .mgui-app__lateral { border-block-end: 0; border-inline-end: 1px solid var(--mg-lateral-borde); }
    .mgui-app__contenido { padding-inline: var(--mg-space-8); }
    .mgui-app__titulo { font-size: var(--mg-type-2xl); }
  }
  @media not (((min-width: 769px) and (min-height: 521px)) or ((min-width: 769px) and (pointer: fine)) or ((min-width: 769px) and (pointer: none))
    or ((min-width: 561px) and (min-height: 901px)) or ((min-width: 561px) and (min-height: 521px) and (pointer: coarse))) {
    .mgui-app__abrir { display: inline-flex; }
    .mgui-app__lateral { display: none; }
    .mgui-app__interruptor:checked ~ .mgui-app__lateral { display: flex; }
  }
  @media (pointer: coarse) {
    .mgui-app-menu__enlace { min-block-size: var(--mg-control-min); }
  }

  /* ── web/r3/fuente/app-marca.css ── */
  /* APP-MARCA-MG: encabezado de App y pie comercial compartido. */
  /* f-empresa-activa: las filas de la grilla las fija la cáscara (`app-cascara.css`: tres en el teléfono, dos en la computadora). Una
     regla `auto 1fr` acá le ganaba en el teléfono y la fila del menú (oculto) se quedaba con el espacio libre: una franja vacía entre
     la barra y el contenido de toda pantalla corta. */
  .mgui-app-marcas {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-4);
    padding: var(--mg-space-2) var(--mg-space-4);
    background: var(--mg-color-superficie);
    border-bottom: 1px solid var(--mg-color-borde);
  }
  .mgui-app-marcas__propia {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: var(--mg-control-min);
  }
  .mgui-app-marcas .mgui-marca__img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    content: url("/r3/marca/isotipo-logo.png");
  }
  .mgui-app-marcas__tenant {
    display: block;
    margin-inline-start: auto;
    width: auto;
    height: 2.5rem;
    max-width: min(10rem, 45%);
    object-fit: contain;
  }
  /*
   * Z-R · las HERRAMIENTAS de la barra de arriba (`ui/herramientas-barra.ts`, portadas de bo.valkyrie.ar `Layout.jsx →
   * mg-topbar-actions`): un grupo de íconos sueltos pegados contra el botón «Menú» del teléfono y el selector de empresa, con
   * la misma forma que los `.mgui-accesos` del encabezado de avisos (bordes del tema, color atenuado, con pintura al pasar o al
   * tener la pantalla actual) pero VISIBLES también en el teléfono: cerrar sesión y abrir las preferencias son cosas que valen
   * tanto en la computadora como en el celular.
   *
   * El tono del botón de salir (log-out) se trae del rol `--mg-color-texto-atenuado`: no es un estado peligroso, es la salida
   * de siempre; marcarlo rojo haría pensar que destruye algo. El `<form>` del POST `/salir` no mete margen propio.
   */
  .mgui-barra-herramientas {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding-inline-start: var(--mg-space-2);
    margin-inline-start: var(--mg-space-1);
    border-inline-start: 1px solid var(--mg-color-borde);
  }
  .mgui-barra-herramientas__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--mg-control-min);
    block-size: var(--mg-control-min);
    padding: 0;
    border: 0;
    border-radius: var(--mg-radius-md);
    background: transparent;
    color: var(--mg-color-texto-atenuado);
    cursor: pointer;
    text-decoration: none;
  }
  .mgui-barra-herramientas__item:hover { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-barra-herramientas__item:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-barra-herramientas__item[aria-current="page"] { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-barra-herramientas__salir { margin: 0; }
  @media print {
    .mgui-barra-herramientas { display: none; }
  }

  /*
   * Z-R · PWA-INSTALAR · el diálogo con los pasos por navegador/sistema (bo.valkyrie.ar `BotonInstalar.jsx`, el `<Modal>` con
   * los pasos). Sale de la caja de `.mgui-dialog` + `.mgui-dialog--modal` del framework, con un ancho mediano, bordes y tono
   * de superficie. Los paneles por plataforma (`[data-mg-plataforma]`) nacen con `hidden`; el guion muestra el que detecta.
   */
  .mgui-pwa-instalar { max-inline-size: min(32rem, 100vw - var(--mg-space-6)); }
  .mgui-pwa-instalar__paneles { margin-block-end: var(--mg-space-3); }
  .mgui-pwa-instalar__sub {
    margin: 0 0 var(--mg-space-2);
    font-size: var(--mg-type-md);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-pwa-instalar__pasos {
    margin: 0 0 var(--mg-space-2);
    padding-inline-start: var(--mg-space-6);
    color: var(--mg-color-texto);
  }
  .mgui-pwa-instalar__pasos li + li { margin-block-start: var(--mg-space-1); }
  .mgui-pwa-instalar__nota {
    margin: var(--mg-space-2) 0 0;
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-sm);
  }
  .mgui-pwa-instalar__estado {
    margin: 0 0 var(--mg-space-3);
    padding: var(--mg-space-2) var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-sm);
  }

  .mgui-pie-prestador {
    margin-block-start: var(--mg-space-6);
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs);
    line-height: 1.4;
    text-align: right;
    overflow-wrap: anywhere;
    break-inside: avoid;
  }
  .mgui-pie-prestador > span { display: block; }
  .mgui-pie-prestador--maqueta {
    position: absolute;
    left: 28.5714%;
    bottom: 4.9881%;
    width: 64.7059%;
    margin: 0;
    font-size: .375rem;
    line-height: 1.1;
  }
  @media print {
    .mgui-app-layout { display: block; min-height: 0; }
    .mgui-app-marcas, .mgui-app-menu { display: none; }
    .mgui-app-contenido { padding: 0; }
  }

  /* ── web/r3/fuente/aviso.css ── */
  /* Aviso. `alert` sólo para peligro; el resto `status`. Nunca ámbar para un error. */
  .mgui-alert {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    margin-bottom: var(--mg-space-4);
    padding: var(--mg-space-3) var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-left-width: 4px;
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
  }
  .mgui-alert:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-alert__title { margin: 0; font-size: var(--mg-type-base); font-weight: var(--mg-weight-bold); }
  .mgui-alert__body { margin: 0; }
  .mgui-alert__actions { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin-top: var(--mg-space-2); }
  .mgui-alert--danger { background: var(--mg-status-danger-suave); border-color: var(--mg-status-danger-borde); }
  .mgui-alert--danger .mgui-alert__title { color: var(--mg-status-danger-texto); }
  .mgui-alert--warning { background: var(--mg-status-warning-suave); border-color: var(--mg-status-warning-borde); }
  .mgui-alert--warning .mgui-alert__title { color: var(--mg-status-warning-texto); }
  .mgui-alert--info { background: var(--mg-status-info-suave); border-color: var(--mg-status-info-borde); }
  .mgui-alert--info .mgui-alert__title { color: var(--mg-status-info-texto); }
  .mgui-alert--complete { background: var(--mg-status-complete-suave); border-color: var(--mg-status-complete-borde); }
  .mgui-alert--complete .mgui-alert__title { color: var(--mg-status-complete-texto); }

  /* ── web/r3/fuente/ayuda.css ── */
  /*
   * Z-R · P2-10 · los cajones de ayuda (`ui/cajon-ayuda.ts`; Valkyrie MetricHelp y ComoLeer): el ⓘ con su frase al pasar o
   * enfocar, y el cajón lateral (popover declarativo) con lo largo. Sin `popover`, el cajón queda a la vista debajo del botón.
   */
  .mgui-ayuda { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
  .mgui-ayuda__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--mg-color-texto-atenuado);
    cursor: pointer;
  }
  .mgui-ayuda__boton:hover { color: var(--mg-color-enlace); background: var(--mg-color-accion-suave); }
  .mgui-ayuda__boton:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-ayuda__corta {
    position: absolute;
    inset-block-end: calc(100% + var(--mg-space-1));
    inset-inline-start: 50%;
    translate: -50% 0;
    display: none;
    inline-size: max-content;
    max-inline-size: min(18rem, calc(100vw - 2 * var(--mg-space-4)));
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-texto);
    color: var(--mg-color-superficie);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-medium);
    line-height: 1.35;
    white-space: normal;
    pointer-events: none;
  }
  .mgui-ayuda__boton:is(:hover, :focus-visible) + .mgui-ayuda__corta { display: block; }
  .mgui-ayuda__leer { cursor: pointer; }
  .mgui-ayuda__leer:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }

  .mgui-ayuda__cajon {
    inset: 0 0 0 auto;
    inline-size: min(28rem, 100vw);
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 0;
    border-inline-start: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-3);
    text-align: start;
    white-space: normal;
  }
  .mgui-ayuda__cajon::backdrop { background: color-mix(in oklab, var(--mg-color-marca-profunda) 30%, transparent); }
  .mgui-ayuda__cabeza {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3) var(--mg-space-4);
    border-block-end: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
  }
  .mgui-ayuda__titulo { margin: 0; font-size: var(--mg-type-lg); font-weight: var(--mg-weight-semibold); }
  .mgui-ayuda__cuerpo { padding: var(--mg-space-4); }
  .mgui-ayuda__seccion { display: grid; gap: var(--mg-space-1); }
  .mgui-ayuda__subtitulo { margin: 0; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto-atenuado); }
  .mgui-ayuda__lista { margin: 0; padding-inline-start: var(--mg-space-4); display: grid; gap: var(--mg-space-1); }
  .mgui-ayuda__formula { font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
  .mgui-ayuda__composicion { display: grid; gap: var(--mg-space-1); margin: 0; }
  .mgui-ayuda__fila { display: flex; justify-content: space-between; gap: var(--mg-space-3); padding-block: .125rem; border-block-end: 1px dashed var(--mg-color-borde); }
  .mgui-ayuda__fila dt, .mgui-ayuda__fila dd { margin: 0; }
  .mgui-ayuda__fila--total { border-block-end: 0; border-block-start: 1px solid var(--mg-color-texto); font-weight: var(--mg-weight-semibold); }
  @media (prefers-reduced-motion: no-preference) {
    .mgui-ayuda__cajon:popover-open { animation: mgui-ayuda-entra var(--mg-motion-base) var(--mg-ease-out); }
  }
  @keyframes mgui-ayuda-entra { from { translate: 100% 0; } to { translate: 0 0; } }
  @supports not selector(:popover-open) {
    .mgui-ayuda { display: inline-grid; }
    .mgui-ayuda__cajon { position: static; display: block; inline-size: auto; block-size: auto; box-shadow: none; border: 1px solid var(--mg-color-borde); }
    .mgui-ayuda__cerrar { display: none; }
  }

  /* ── web/r3/fuente/bandera.css ── */
  /*
   * Z-R · P2-10 · la bandera de un país (`ui/banderas.ts`, Valkyrie `Bandera.jsx`) y el select con íconos en sus opciones
   * (`campo({ tipo: 'select' })` con `icono`: el selector de país con su bandera). Con `appearance: base-select` (Chromium 135+)
   * la lista y el elegido dibujan el ícono; sin eso, el navegador muestra el texto y nada se rompe. Sin guion.
   */
  .mgui-bandera {
    display: inline-block;
    flex: none;
    inline-size: 1.25rem;
    block-size: .9375rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--mg-color-borde);
    object-fit: cover;
    vertical-align: middle;
  }
  .mgui-field__opcion { min-inline-size: 0; }

  @supports (appearance: base-select) {
    .mgui-field__control--iconos,
    .mgui-field__control--iconos::picker(select) { appearance: base-select; }
    .mgui-field__control--iconos { display: flex; align-items: center; gap: var(--mg-space-2); cursor: pointer; }
    .mgui-field__control--iconos::picker-icon { color: var(--mg-color-texto-atenuado); }
    .mgui-field__boton { display: flex; align-items: center; flex: 1; min-inline-size: 0; }
    .mgui-field__control--iconos selectedcontent { display: flex; align-items: center; gap: var(--mg-space-2); min-inline-size: 0; }
    .mgui-field__control--iconos selectedcontent .mgui-field__opcion { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mgui-field__control--iconos::picker(select) {
      max-block-size: min(22rem, 70vh);
      overflow-y: auto;
      padding: var(--mg-space-1);
      border: 1px solid var(--mg-color-borde);
      border-radius: var(--mg-radius-md);
      background: var(--mg-color-superficie);
      color: var(--mg-color-texto);
      box-shadow: var(--mg-elevation-2);
    }
    .mgui-field__control--iconos option { display: flex; align-items: center; gap: var(--mg-space-2); padding: var(--mg-space-2); border-radius: var(--mg-radius-sm); }
    .mgui-field__control--iconos option:checked { background: var(--mg-color-accion-suave); }
    .mgui-field__control--iconos option::checkmark { display: none; }
  }

  /* ── web/r3/fuente/boton.css ── */
  /*
   * Botón. Jerarquía por énfasis: primario (acción) · secundario · quieto · peligro.
   *
   * Ola 1 del rework visual:
   *   · Elevación por defecto en todo botón que no sea `--quiet` (elevation-1 lo despega del fondo).
   *   · `--secondary` tintado con el `-suave` de la acción (antes era superficie + borde azul): más
   *     peso visual y jerarquía más clara frente al primario.
   *   · Anillo de foco de dos capas (halo de superficie + anillo de foco), con fallback a `outline`
   *     por si falta `:focus-visible` (@supports selector(…)).
   */
  .mgui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mg-space-2);
    min-height: 2.5rem;
    padding: var(--mg-space-2) var(--mg-space-4);
    border: 1px solid transparent;
    border-radius: var(--mg-radius-sm);
    font-family: var(--mg-font-ui);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mg-motion-fast) var(--mg-ease-out), border-color var(--mg-motion-fast) var(--mg-ease-out), box-shadow var(--mg-motion-fast) var(--mg-ease-out);
  }
  /* Elevación por defecto; `--quiet` queda plano. */
  .mgui-btn:not(.mgui-btn--quiet) { box-shadow: var(--mg-elevation-1); }
  /*
   * Foco de dos capas: 2 px de superficie como halo (deja ver un «vacío» entre el botón y el anillo)
   * + 2 px del color de foco. Conserva la sombra de elevación cuando corresponde apilándola al final.
   */
  .mgui-btn:focus-visible,
  .mgui-btn.is-foco-demo {
    outline: none;
    box-shadow: 0 0 0 2px var(--mg-color-superficie), 0 0 0 4px var(--mg-color-foco);
  }
  .mgui-btn:not(.mgui-btn--quiet):focus-visible,
  .mgui-btn:not(.mgui-btn--quiet).is-foco-demo {
    box-shadow: 0 0 0 2px var(--mg-color-superficie), 0 0 0 4px var(--mg-color-foco), var(--mg-elevation-1);
  }
  /* Fallback para navegadores sin :focus-visible (Safari viejo, kioscos): outline tradicional. */
  @supports not (selector(:focus-visible)) {
    .mgui-btn:focus {
      outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
      outline-offset: var(--mg-focus-ring-offset);
    }
  }
  .mgui-btn--primary { background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  .mgui-btn--primary:hover { background: var(--mg-color-accion-hover); }
  .mgui-btn--secondary {
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    border-color: transparent;
  }
  .mgui-btn--secondary:hover {
    background: color-mix(in oklab, var(--mg-color-accion-suave) 85%, var(--mg-color-accion) 15%);
  }
  .mgui-btn--quiet { background: transparent; color: var(--mg-color-enlace); }
  .mgui-btn--quiet:hover { background: var(--mg-color-accion-suave); }
  .mgui-btn--danger { background: var(--mg-status-danger-solido); color: var(--mg-color-sobre-solido); }
  .mgui-btn--danger:hover { background: var(--mg-status-danger-solido-hover); }
  .mgui-btn--sm { min-height: 2rem; padding: var(--mg-space-1) var(--mg-space-3); font-size: var(--mg-type-xs); }
  .mgui-btn--block { display: flex; width: 100%; }
  .mgui-btn:disabled,
  .mgui-btn.is-disabled,
  .mgui-btn[aria-disabled="true"] {
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto-atenuado);
    border-color: var(--mg-color-borde);
    cursor: not-allowed;
  }
  .mgui-btn[aria-busy="true"] { cursor: progress; }
  .mgui-btn__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mgui-girar var(--mg-spinner-duration) linear infinite;
  }
  /* Objetivo táctil de 44 px (WCAG 2.5.5) donde se toca con el dedo. */
  @media (pointer: coarse) {
    .mgui-btn { min-height: var(--mg-control-min); }
    .mgui-btn--sm { min-height: var(--mg-control-min); }
  }

  /* ── web/r3/fuente/campo-especial.css ── */
  /*
   * F-VC · campos especiales: importe con el ícono de su moneda, CUIT, fecha con atajos, buscador, panel de filtros, el
   * renglón de acción de la caja móvil y la barra de acciones sobre filas elegidas. Todo con los controles del navegador;
   * lo que agrega el guion propio es comodidad.
   */

  /* Los contenedores de los campos especiales (la caja la pone .mgui-field). */
  .mgui-moneda,
  .mgui-importe,
  .mgui-cuit,
  .mgui-fecha { min-inline-size: 0; }
  .mgui-buscable__filtro { margin-block-end: var(--mg-space-1); }

  /* Importe */
  .mgui-importe__caja { position: relative; display: flex; align-items: center; }
  .mgui-importe__moneda {
    position: absolute;
    inset-inline-start: var(--mg-space-2);
    display: inline-flex;
    align-items: center;
    color: var(--mg-color-texto-atenuado);
    pointer-events: none;
  }
  .mgui-importe__svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .mgui-importe__control { padding-inline-start: 2.75rem; font-variant-numeric: tabular-nums; text-align: end; max-inline-size: var(--mg-campo-importe); }

  /* CUIT */
  .mgui-cuit__control { max-inline-size: var(--mg-campo-corto); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .mgui-cuit__vivo[hidden] { display: none; }

  /* Fecha */
  .mgui-fecha__control { max-inline-size: var(--mg-campo-corto); }
  .mgui-fecha__rapidas { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
  .mgui-fecha__rapidas[hidden] { display: none; }
  .mgui-fecha__atajo { min-block-size: 2rem; }

  /* Buscador */
  .mgui-buscador {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    max-inline-size: var(--mg-formulario-texto);
    margin-block-end: var(--mg-space-4);
  }
  .mgui-buscador__icono { position: absolute; inset-inline-start: var(--mg-space-3); display: inline-flex; color: var(--mg-color-texto-atenuado); pointer-events: none; }
  .mgui-buscador__svg { inline-size: 1.125rem; block-size: 1.125rem; }
  .mgui-buscador__control {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.5rem;
    padding: var(--mg-space-2) var(--mg-space-3) var(--mg-space-2) 2.5rem;
    border: 1px solid var(--mg-color-borde-control);
    border-radius: 999px;
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-base);
  }
  .mgui-buscador__boton { flex: none; }
  .mgui-buscador__control:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 0; border-color: var(--mg-color-foco); }

  /* Filtros */
  .mgui-filtros { margin-block-end: var(--mg-space-4); }
  .mgui-filtros__panel { border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie); }
  .mgui-filtros__resumen {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    min-block-size: var(--mg-control-min);
    padding: var(--mg-space-2) var(--mg-space-3);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    cursor: pointer;
    list-style: none;
  }
  .mgui-filtros__resumen::-webkit-details-marker { display: none; }
  .mgui-filtros__resumen:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 0; border-radius: var(--mg-radius-md); }
  .mgui-filtros__svg { inline-size: 1.125rem; block-size: 1.125rem; color: var(--mg-color-texto-atenuado); }
  .mgui-filtros__cuenta {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: .3rem;
    border-radius: 999px;
    background: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
    font-size: var(--mg-type-xs);
  }
  .mgui-filtros__formulario { padding: 0 var(--mg-space-3) var(--mg-space-3); border-block-start: 1px solid var(--mg-color-borde); }
  .mgui-filtros__campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
    align-items: start;
    gap: 0 var(--mg-space-4);
    padding-block-start: var(--mg-space-3);
  }
  .mgui-filtros__acciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
  .mgui-filtros__aplicados { margin-block-start: var(--mg-space-2); }

  /* Renglón de acción (caja móvil) */
  .mgui-accion {
    display: flex;
    align-items: center;
    gap: var(--mg-space-3);
    min-block-size: 3.5rem;
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    text-decoration: none;
  }
  .mgui-accion:hover { border-color: var(--mg-color-borde-control); }
  .mgui-accion:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-accion__icono {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
  }
  .mgui-accion__svg { inline-size: 1.375rem; block-size: 1.375rem; }
  .mgui-accion__texto { display: flex; flex-direction: column; gap: .125rem; flex: 1; min-inline-size: 0; }
  .mgui-accion__titulo { font-weight: var(--mg-weight-semibold); }
  .mgui-accion__bajada { font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-accion__flecha { flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: var(--mg-color-texto-atenuado); }
  .mgui-accion--primaria { border-color: var(--mg-color-accion); background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  .mgui-accion--primaria .mgui-accion__icono { background: var(--mg-color-sobre-solido); }
  .mgui-accion--primaria .mgui-accion__bajada,
  .mgui-accion--primaria .mgui-accion__flecha { color: var(--mg-color-sobre-solido); }
  .mgui-accion--primaria:hover { background: var(--mg-color-accion-hover); }
  :dir(rtl) .mgui-accion__flecha { transform: scaleX(-1); }

  /* Selección de filas y acciones masivas */
  .mgui-seleccion__casilla { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--mg-color-accion); cursor: pointer; }
  .mgui-masivas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2) var(--mg-space-4);
    margin-block-end: var(--mg-space-3);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
  }
  .mgui-masivas__todas { display: inline-flex; align-items: center; gap: var(--mg-space-2); font-size: var(--mg-type-sm); }
  .mgui-masivas__todas[hidden],
  .mgui-masivas__cuenta[hidden] { display: none; }
  .mgui-masivas__cuenta { font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto); }
  .mgui-masivas__botones { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin-inline-start: auto; }
  /* F-VK-FALTAN · B-4 · la CUENTA de los elegidos SIN guion (Valkyrie `AccionesMasivas`: «dice cuántos hay seleccionados»), con
     contadores de CSS: el ámbito (un ancestro de las casillas y de la cuenta) reinicia, cada casilla marcada suma y el número se
     dibuja DESPUÉS de las casillas en el documento. Para las pantallas sin guion (remitos, documentos emitidos). */
  .mgui-seleccion-ambito { counter-reset: mgui-elegidas; }
  .mgui-seleccion__casilla:checked { counter-increment: mgui-elegidas; }
  .mgui-seleccion-cuenta { font-size: var(--mg-type-sm); }
  .mgui-seleccion-cuenta__numero { font-weight: var(--mg-weight-semibold); }
  .mgui-seleccion-cuenta__numero::after { content: counter(mgui-elegidas); }

  /*
   * porte-vk · ola 33 · campo teléfono con selector de país (bandera + prefijo). Portado del
   * `CampoTelefono.jsx` de Valkyrie: el país a la izquierda (bandera, código ISO y prefijo) y el
   * número local a la derecha. Sin guion funciona como un `<input type="tel">`; con guion, el botón
   * abre un panel con buscador y los 248 países.
   */
  .mgui-telefono { position: relative; min-inline-size: 0; }
  .mgui-telefono__caja { display: flex; align-items: stretch; }
  .mgui-telefono__pais {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-2);
    flex: none;
    min-block-size: 2.5rem;
    padding: var(--mg-space-2) var(--mg-space-2);
    border: 1px solid var(--mg-color-borde-control);
    border-inline-end: 0;
    border-radius: var(--mg-radius-sm) 0 0 var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    cursor: pointer;
    font: inherit;
  }
  .mgui-telefono__pais:hover { background: var(--mg-color-fondo); }
  .mgui-telefono__pais:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: 0;
    z-index: 1;
  }
  .mgui-telefono__pais:disabled {
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto-atenuado);
    cursor: not-allowed;
  }
  .mgui-telefono__bandera { inline-size: 1.125rem; block-size: .8125rem; flex: none; }
  .mgui-telefono__dial {
    font-variant-numeric: tabular-nums;
    font-weight: var(--mg-weight-semibold);
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto);
  }
  .mgui-telefono__chevron { inline-size: .875rem; block-size: .875rem; color: var(--mg-color-texto-atenuado); flex: none; }
  .mgui-telefono__local {
    flex: 1;
    min-inline-size: 0;
    border-radius: 0 var(--mg-radius-sm) var(--mg-radius-sm) 0;
  }
  /* Panel desplegable con buscador + lista de países (lo arma el guion al abrir el panel). */
  .mgui-telefono__panel {
    position: absolute;
    z-index: 10;
    inset-block-start: 100%;
    inset-inline-start: 0;
    margin-block-start: var(--mg-space-1);
    min-inline-size: 20rem;
    max-inline-size: calc(100vw - 2 * var(--mg-space-4));
    max-block-size: 20rem;
    display: flex;
    flex-direction: column;
    background: var(--mg-color-superficie);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    box-shadow: var(--mg-elevation-2);
    padding: var(--mg-space-2);
    gap: var(--mg-space-1);
  }
  .mgui-telefono__panel-buscar {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    padding: var(--mg-space-1) var(--mg-space-2);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
  }
  .mgui-telefono__panel-buscar:focus-within {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: 0;
    border-color: var(--mg-color-foco);
  }
  .mgui-telefono__panel-icono { inline-size: 1rem; block-size: 1rem; color: var(--mg-color-texto-atenuado); flex: none; }
  .mgui-telefono__panel-input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: var(--mg-color-texto);
    font: inherit;
    outline: 0;
  }
  .mgui-telefono__panel-lista { overflow-y: auto; min-block-size: 0; }
  .mgui-telefono__panel-opcion {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    inline-size: 100%;
    padding: var(--mg-space-1) var(--mg-space-2);
    border: 0;
    background: transparent;
    color: var(--mg-color-texto);
    cursor: pointer;
    border-radius: var(--mg-radius-sm);
    text-align: start;
    font: inherit;
  }
  .mgui-telefono__panel-opcion:hover,
  .mgui-telefono__panel-opcion.is-resaltada,
  .mgui-telefono__panel-opcion[aria-selected="true"] {
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
  }
  .mgui-telefono__panel-opcion .mgui-bandera { inline-size: 1.125rem; block-size: .8125rem; flex: none; }
  .mgui-telefono__panel-opcion-dial {
    font-variant-numeric: tabular-nums;
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-atenuado);
    min-inline-size: 3rem;
  }
  .mgui-telefono__panel-opcion-nombre { font-size: var(--mg-type-sm); flex: 1; min-inline-size: 0; }
  .mgui-telefono__panel-vacio {
    padding: var(--mg-space-2);
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto-atenuado);
  }

  /* ── web/r3/fuente/campo.css ── */
  /* Campo: etiqueta atada al control, ayuda visible, error enlazado por aria-describedby.
   * Ola 13 · alineación vertical de inputs en filas: `.mgui-field__label` mantiene `min-block-size: 1.75rem` y `display: flex;
   * align-items: center` en todas las superficies para que los campos cuyo título incluye íconos, chips o botones tengan
   * exactamente la misma altura de encabezado que los campos de sólo texto y los `<input>` / `<select>` queden alineados. */
  .mgui-field { display: flex; flex-direction: column; gap: var(--mg-space-1); margin-bottom: var(--mg-space-4); min-inline-size: 0; }
  .mgui-field__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-1);
    min-block-size: 1.75rem;
    line-height: 1.25;
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
  }
  .mgui-field__label :is(.mgui-chip, .mgui-btn) {
    min-block-size: 1.5rem;
    max-block-size: 1.75rem;
    padding-block: 0;
  }
  .mgui-field__req { font-weight: var(--mg-weight-normal); color: var(--mg-color-texto-atenuado); }
  .mgui-field__control {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-base);
  }
  .mgui-field__control:focus-visible,
  .mgui-field__control.is-foco-demo {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: 0;
    border-color: var(--mg-color-foco);
  }
  textarea.mgui-field__control { min-height: 6rem; resize: vertical; }
  .mgui-field__control:disabled { background: var(--mg-color-fondo); color: var(--mg-color-texto-atenuado); border-color: var(--mg-color-deshabilitado); cursor: not-allowed; }
  .mgui-field__control[aria-invalid="true"] { border-color: var(--mg-status-danger-borde); border-width: 2px; }
  .mgui-field__help { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-field__error { margin: 0; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-status-danger-texto); }
  @media (pointer: coarse) {
    .mgui-field__control { min-height: var(--mg-control-min); }
  }
  /*
   * 9U · modificadores de tamaño del campo (porte de Valkyrie `mg-field--2xs/xs/sm/md/auto`): sirven
   * para que la grilla `.mgui-emisor-grid` acomode cada campo a su ancho real (el documento, el apodo,
   * la condición…) en vez de darles a todos el mismo. El campo mantiene su columna de la grilla
   * (ancho mínimo intrínseco 0: el flex-basis manda; sin esto, los `input` largos empujan la fila).
   */
  .mgui-field--xs { flex: 0 0 7rem; }
  .mgui-field--sm { flex: 0 0 11rem; }
  .mgui-field--md { flex: 0 1 16rem; }
  .mgui-field--auto { flex: 0 1 auto; width: max-content; max-width: 100%; }
  .mgui-span-2 { flex: 2 1 20rem; max-width: none; }
  /*
   * ola 31 · modificador de ancho MÁXIMO para campos sueltos que no viven adentro de una fila flex y por eso no
   * se benefician del `flex: 0 0 ...` de xs/sm/md. Un `<select>` como «Turno de caja» del paso 6 se renderiza en
   * una stack vertical y la hoja base le pone `width: 100%` al control: queda cruzando toda la columna aunque sólo
   * muestre un nombre de caja corto. `max-inline-size` acota la caja del campo (etiqueta + control + ayuda) a 20 rem
   * sin forzar un ancho fijo que lo haga ver cortado en móviles angostos. Útil para selects/entradas con valor
   * esperado corto (identificadores, códigos, etiquetas de un solo renglón).
   */
  .mgui-field--acotado { max-inline-size: 20rem; }

  /* ── web/r3/fuente/carga.css ── */
  /*
   * Carga. Umbrales de §14.1 (los aplica el servidor al elegir qué dibujar): <120 ms nada ·
   * 120–400 ms estado en línea · 400 ms–2 s cargador en línea o esqueleto · >2 s progreso explicado ·
   * >10 s tarea durable. El spinner usa --mg-spinner-duration, que con movimiento reducido se hace
   * más LENTO (1400 ms) y no se detiene; el brillo usa --mg-shimmer-duration (1 ms reducido).
   * ⚠ Un 1 ms INFINITO no es «quieto»: el ciclo se reinicia cada milisegundo y cada cuadro cae en una
   * fase distinta, así que el degradé salta. Con movimiento reducido el brillo corre UNA vez (1 ms) y
   * queda en su estado base; el spinner no (R3 lo quiere más lento, no detenido).
   */
  @keyframes mgui-girar { to { transform: rotate(360deg); } }
  @keyframes mgui-brillar { from { background-position: 100% 0; } to { background-position: 0 0; } }
  .mgui-loading { display: inline-flex; align-items: center; gap: var(--mg-space-2); color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--mg-color-borde);
    border-top-color: var(--mg-color-foco);
    border-radius: 50%;
    animation: mgui-girar var(--mg-spinner-duration) linear infinite;
  }
  .mgui-spinner-marca { display: block; width: auto; height: 1.25rem; }
  .mgui-progress { display: flex; flex-direction: column; gap: var(--mg-space-1); margin-bottom: var(--mg-space-4); }
  .mgui-progress__label { font-size: var(--mg-type-sm); color: var(--mg-color-texto); }
  .mgui-progress__bar { width: 100%; height: .5rem; accent-color: var(--mg-color-accion); }
  .mgui-skeleton { display: flex; flex-direction: column; gap: var(--mg-space-2); margin-bottom: var(--mg-space-4); }
  .mgui-skeleton__line {
    display: block;
    height: .875rem;
    border-radius: var(--mg-radius-sm);
    background: linear-gradient(90deg, var(--mg-color-esqueleto) 25%, var(--mg-color-esqueleto-brillo) 50%, var(--mg-color-esqueleto) 75%);
    background-size: 400% 100%;
    animation: mgui-brillar var(--mg-shimmer-duration) ease-in-out infinite;
  }
  .mgui-skeleton__line--w40 { width: 40%; }
  .mgui-skeleton__line--w60 { width: 60%; }
  .mgui-skeleton__line--w80 { width: 80%; }
  .mgui-skeleton__line--w100 { width: 100%; }
  .mgui-skeleton__line--titulo { height: 1.25rem; }
  .mgui-skeleton--card { padding: var(--mg-space-4); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie); }
  .mgui-skeleton--table .mgui-skeleton__line { height: 1.5rem; }
  @media (prefers-reduced-motion: reduce) {
    .mgui-skeleton__line { animation-iteration-count: 1; }
  }

  /* ── web/r3/fuente/cascara.css ── */
  /* Cáscara común: salto al contenido, barra, navegación con cajón sin JS. Presentación final en todo entorno. */
  .mgui-saltar {
    position: absolute;
    top: var(--mg-space-2);
    left: var(--mg-space-2);
    z-index: var(--mg-layer-aviso);
    padding: var(--mg-space-2) var(--mg-space-4);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
    font-weight: var(--mg-weight-semibold);
    transform: translateY(-200%);
  }
  .mgui-saltar:focus { transform: none; }
  .mgui-cascara {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "barra" "nav" "contenido";
    min-height: 100dvh;
  }
  .mgui-cascara__barra {
    grid-area: barra;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-3);
    padding: var(--mg-space-3) var(--mg-space-4);
    padding-left: max(var(--mg-space-4), env(safe-area-inset-left));
    padding-right: max(var(--mg-space-4), env(safe-area-inset-right));
    border-bottom: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
  }
  .mgui-cascara__inicio { display: inline-flex; text-decoration: none; }
  .mgui-cascara__superficie {
    padding: 0 var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .mgui-cascara__usuario { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin-left: auto; font-size: var(--mg-type-sm); }
  .mgui-cascara__rol { color: var(--mg-color-texto-atenuado); }
  .mgui-cascara__salir { margin: 0; }
  .mgui-cascara__interruptor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .mgui-cascara__abrir {
    display: none;
    align-items: center;
    min-height: var(--mg-control-min);
    padding: 0 var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-sm);
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-cascara__interruptor:focus-visible ~ .mgui-cascara__barra .mgui-cascara__abrir {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-cascara__nav { grid-area: nav; padding: var(--mg-space-4); background: var(--mg-color-superficie); }
  .mgui-cascara__lista { display: flex; flex-direction: column; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; }
  .mgui-cascara__enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    min-height: 2.5rem;
    padding: var(--mg-space-2) var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto);
    text-decoration: none;
  }
  a.mgui-cascara__enlace:hover { background: var(--mg-color-accion-suave); }
  .mgui-cascara__enlace[aria-current="page"] {
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    font-weight: var(--mg-weight-semibold);
    box-shadow: inset 3px 0 0 var(--mg-color-accion);
  }
  .mgui-cascara__enlace--pendiente { color: var(--mg-color-texto-atenuado); cursor: default; }
  .mgui-cascara__contenido {
    grid-area: contenido;
    width: 100%;
    max-width: var(--mg-contenedor-max);
    padding: var(--mg-space-6) var(--mg-space-4) var(--mg-space-12);
    padding-left: max(var(--mg-space-4), env(safe-area-inset-left));
    padding-right: max(var(--mg-space-4), env(safe-area-inset-right));
  }
  .mgui-cascara__contenido:focus { outline: none; }
  .mgui-cascara__encabezado { margin-bottom: var(--mg-space-6); }
  .mgui-cascara__titulo { margin: 0; }
  .mgui-cascara__bajada { margin: var(--mg-space-2) 0 0; color: var(--mg-color-texto-atenuado); }
  /*
   * En escritorio el menú está siempre a la vista: la casilla sale del recorrido del tabulador.
   * El móvil es el COMPLEMENTO exacto (`not all and (min-width: 768px)`), no `max-width: 767px`: con
   * anchos fraccionarios (zoom, DPR) entre 767 y 768 px no valía ninguno de los dos y quedaba una
   * parada de foco invisible (la casilla, con su anillo reenviado a una etiqueta oculta).
   */
  @media (min-width: 768px) {
    .mgui-cascara__interruptor { display: none; }
  }
  @media not all and (min-width: 768px) {
    .mgui-cascara__abrir { display: inline-flex; }
    .mgui-cascara__nav { display: none; border-bottom: 1px solid var(--mg-color-borde); }
    .mgui-cascara__interruptor:checked ~ .mgui-cascara__nav { display: block; }
    .mgui-cascara__usuario { width: 100%; margin-left: 0; }
  }
  /* DT-IDIOMA (MG-SELECTOR-IDIOMA-DISENO.md §2.6): el idioma y «Menú» juntos, al final de la barra, a cualquier ancho. */
  .mgui-cascara__herramientas { display: flex; align-items: center; gap: var(--mg-space-2); margin-inline-start: auto; }
  .mgui-cascara__herramientas ~ .mgui-cascara__usuario { margin-inline-start: 0; }

  /* ── web/r3/fuente/chip.css ── */
  /*
   * F-VC · chips (Valkyrie: `.mg-chip`, ChipAccion/ChipEnlace, `.mg-tipo-selector`): rótulos cortos, chips-enlace, chips de
   * filtro aplicado con su «×», y la elección con chips (radios o casillas ocultos pero enfocables).
   * Un estado nunca se pinta con el verde de dinero: el tono «complete» es el de completado.
   */
  .mgui-chips { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
  .mgui-chips__item { display: flex; }
  .mgui-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    min-block-size: 1.75rem;
    padding: .125rem var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: 999px;
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    font-family: var(--mg-font-ui);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }
  button.mgui-chip { cursor: pointer; }
  .mgui-chip--neutral { background: var(--mg-color-superficie); color: var(--mg-color-texto); }
  .mgui-chip__texto { overflow: hidden; text-overflow: ellipsis; }
  .mgui-chip__svg { inline-size: .875rem; block-size: .875rem; flex: none; }
  /* UX-CONTROL · la línea de lo hecho de un flujo de varios pasos (`server/src/control/paginas/paso-a-paso.ts`): el chip-enlace que
     resume un paso hecho ENVUELVE su texto en vez de desbordar el ancho (en el celular, el dato de un paso puede ser largo). */
  .mgui-chips--lineas .mgui-chips__item { min-inline-size: 0; max-inline-size: 100%; }
  .mgui-chips--lineas .mgui-chip { max-inline-size: 100%; white-space: normal; border-radius: var(--mg-radius-md); }
  .mgui-chips--lineas .mgui-chip__texto { overflow: visible; overflow-wrap: anywhere; }
  .mgui-chip--info { background: var(--mg-status-info-suave); border-color: var(--mg-status-info-borde); color: var(--mg-status-info-texto); }
  .mgui-chip--complete { background: var(--mg-status-complete-suave); border-color: var(--mg-status-complete-borde); color: var(--mg-status-complete-texto); }
  .mgui-chip--warning { background: var(--mg-status-warning-suave); border-color: var(--mg-status-warning-borde); color: var(--mg-status-warning-texto); }
  .mgui-chip--danger { background: var(--mg-status-danger-suave); border-color: var(--mg-status-danger-borde); color: var(--mg-status-danger-texto); }
  .mgui-chip--accion { background: var(--mg-color-accion-suave); border-color: var(--mg-brand-blue-borde); color: var(--mg-color-enlace); }
  /*
   * 9U · chips semánticos del dominio (porte de Valkyrie `mg-chip--consulta/corregir/stock/preventa/
   * operar/nuevo/primera`): nombran POR QUÉ CLASE DE TAREA son — una consulta, una corrección, una
   * novedad de stock, una preventa, una pieza para operar, un cliente nuevo, su primera compra — y el
   * tono sale de la familia de estado (info, warning, complete). No son estados: son rótulos. El verde
   * de dinero no se usa acá; «primera compra» es `complete` (algo logrado), no un importe favorable.
   */
  .mgui-chip--consulta { background: var(--mg-status-info-suave); border-color: var(--mg-status-info-borde); color: var(--mg-status-info-texto); }
  .mgui-chip--corregir { background: var(--mg-status-warning-suave); border-color: var(--mg-status-warning-borde); color: var(--mg-status-warning-texto); }
  .mgui-chip--stock { background: var(--mg-status-info-suave); border-color: var(--mg-status-info-borde); color: var(--mg-status-info-texto); }
  .mgui-chip--preventa { background: var(--mg-status-warning-suave); border-color: var(--mg-status-warning-borde); color: var(--mg-status-warning-texto); }
  .mgui-chip--operar { background: var(--mg-status-info-suave); border-color: var(--mg-status-info-borde); color: var(--mg-status-info-texto); }
  .mgui-chip--nuevo { background: var(--mg-status-info-suave); border-color: var(--mg-status-info-borde); color: var(--mg-status-info-texto); }
  .mgui-chip--primera { background: var(--mg-status-complete-suave); border-color: var(--mg-status-complete-borde); color: var(--mg-status-complete-texto); }
  /*
   * Ola 1 · chip CATEGORICO (--cat-1..6): usa los seis tonos de categoría de F-VC (fondo tenue
   * + texto medido ≥ 4,5:1 contra ese fondo). Son RÓTULOS, no estados: etiquetan a qué grupo
   * pertenece un item (rubro, canal, cuenta, familia de producto…), no si está «ok» o «error».
   * El borde se vuelve transparente para que el peso visual lo lleve el fondo tintado.
   */
  .mgui-chip--cat-1 { background: var(--mg-categoria-1-fondo); color: var(--mg-categoria-1-texto); border-color: transparent; }
  .mgui-chip--cat-2 { background: var(--mg-categoria-2-fondo); color: var(--mg-categoria-2-texto); border-color: transparent; }
  .mgui-chip--cat-3 { background: var(--mg-categoria-3-fondo); color: var(--mg-categoria-3-texto); border-color: transparent; }
  .mgui-chip--cat-4 { background: var(--mg-categoria-4-fondo); color: var(--mg-categoria-4-texto); border-color: transparent; }
  .mgui-chip--cat-5 { background: var(--mg-categoria-5-fondo); color: var(--mg-categoria-5-texto); border-color: transparent; }
  .mgui-chip--cat-6 { background: var(--mg-categoria-6-fondo); color: var(--mg-categoria-6-texto); border-color: transparent; }
  .mgui-chip--enlace:hover,
  button.mgui-chip:hover { border-color: var(--mg-color-borde-control); }
  .mgui-chip--enlace:focus-visible,
  button.mgui-chip:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-chip--quitable { padding-inline-end: .125rem; }
  .mgui-chip__quitar {
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 999px;
    color: inherit;
  }
  .mgui-chip__quitar:hover { background: var(--mg-color-fondo); }
  .mgui-chip__quitar:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 0; }
  .mgui-chip__quitar-svg { inline-size: .875rem; block-size: .875rem; }

  /* Elegir con chips */
  .mgui-eleccion { margin: 0 0 var(--mg-space-4); padding: 0; border: 0; min-inline-size: 0; }
  .mgui-eleccion__leyenda { margin-block-end: var(--mg-space-2); padding: 0; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); }
  .mgui-eleccion__grupo { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
  .mgui-eleccion__item { position: relative; display: flex; }
  .mgui-eleccion__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
  }
  .mgui-eleccion__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    min-block-size: 2.25rem;
    padding: var(--mg-space-1) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: 999px;
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    cursor: pointer;
  }
  .mgui-eleccion__svg { inline-size: 1rem; block-size: 1rem; }
  .mgui-eleccion__marca { display: none; inline-size: .875rem; block-size: .875rem; stroke-width: 3; }
  .mgui-eleccion__chip:hover { background: var(--mg-color-fondo); }
  .mgui-eleccion__control:checked + .mgui-eleccion__chip {
    border-color: var(--mg-color-accion);
    background: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
  }
  .mgui-eleccion__control:checked + .mgui-eleccion__chip .mgui-eleccion__marca { display: inline; }
  .mgui-eleccion__control:focus-visible + .mgui-eleccion__chip {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  @media (pointer: coarse) {
    .mgui-eleccion__chip { min-block-size: var(--mg-control-min); }
  }
  @media (forced-colors: active) {
    .mgui-eleccion__control:checked + .mgui-eleccion__chip { outline: 2px solid Highlight; }
  }

  /* ── web/r3/fuente/contenedores.css ── */
  /*
   * L1 · LOGÍSTICA DE LOS CONTENEDORES · la pestaña «Contenedores y viajes» de la carpeta (`server/src/web/r3-contenedores.ts`), la
   * sección «Viajes» del portal de la logística (`r3-portal-viajes.ts`) y el componente de asignación del enlace del paso 6
   * (`r3-enlace-viajes.ts`): las casillas de los contenedores de un camión, la línea de tiempo y el MAPA de los viajes
   * (`web/r3/contenedores/mapa-viajes.js`, Leaflet con la política `default` de L0). Sólo tokens: ningún color ni medida inventados.
   * Los puntos del mapa son círculos SVG de Leaflet con su clase (`className`): el color lo pone esta hoja, no el guion.
   */

  /* Las casillas (los contenedores que lleva un camión, «el contenedor queda acá», avisar a la marítima). */
  .mgui-contenedores__casilla {
    display: inline-flex; align-items: center; gap: var(--mg-space-2); margin: 0; padding-block: var(--mg-space-1);
    font-size: var(--mg-type-sm);
  }
  .mgui-contenedores__casilla > input { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--mg-color-accion); }
  /* El guion deshabilita la tercera casilla con dos marcadas (un camión lleva hasta dos). */
  .mgui-contenedores__casilla--apagada { color: var(--mg-color-texto-tenue); }

  /* La línea de tiempo de la carpeta y del portal: un renglón por evento, el más nuevo arriba. */
  .mgui-contenedores__linea { margin: 0; padding-inline-start: var(--mg-space-4); font-size: var(--mg-type-sm); }
  .mgui-contenedores__linea > li { padding-block: var(--mg-space-1); border-block-end: 1px solid var(--mg-color-borde-suave); }
  .mgui-contenedores__linea > li:last-child { border-block-end: 0; }

  /* Lo que el guion oculta o muestra según el paso elegido (sin guion se ve todo y el servidor valida). */
  .mgui-contenedores [hidden] { display: none; }

  /* El mapa de los viajes: el encuadre lo fijan los LUGARES (no sigue a los camiones). */
  .mgui-mapa-viajes {
    inline-size: 100%; block-size: 22rem; overflow: hidden; border-radius: var(--mg-radius-lg); border: 1px solid var(--mg-color-borde);
    background: var(--mg-color-fondo);
  }
  .mgui-mapa-viajes[hidden] { display: none; }
  .mgui-mapa-viajes__atribucion { margin: 0; font-size: var(--mg-type-xs); }
  .mgui-mapa-viajes__estado { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }

  /* Los lugares: círculos con borde por tipo. */
  .mgui-mapa-viajes__lugar { stroke: var(--mg-color-marca-profunda); stroke-width: 2; fill: var(--mg-color-superficie); fill-opacity: 1; }
  .mgui-mapa-viajes__lugar--terminal { stroke: var(--mg-status-info-solido); }
  .mgui-mapa-viajes__lugar--destino { stroke: var(--mg-status-complete-solido); }
  .mgui-mapa-viajes__lugar--devolucion { stroke: var(--mg-status-warning-solido); }

  /* Los camiones: la última posición que mandó cada chofer que comparte su ubicación (atenuada si es vieja). */
  .mgui-mapa-viajes__camion { stroke: var(--mg-color-superficie); stroke-width: 2; fill: var(--mg-color-accion); fill-opacity: 0.9; }
  .mgui-mapa-viajes__camion--vieja { fill: var(--mg-color-texto-tenue); fill-opacity: 0.6; }
  .mgui-mapa-viajes__precision { stroke: var(--mg-color-accion); stroke-width: 1; stroke-opacity: 0.4; fill: var(--mg-color-accion-suave); fill-opacity: 0.25; }

  /* El recuadro de cada punto (tooltip de Leaflet con esta clase): texto armado con `textContent`. */
  .mgui-mapa-viajes__burbuja { font-size: var(--mg-type-sm); line-height: 1.35; }
  .mgui-mapa-viajes__burbuja strong { font-weight: 600; }

  @media not all and (min-width: 30rem) {
    .mgui-mapa-viajes { block-size: 17rem; }
  }

  /* ── web/r3/fuente/contraste.css ── */
  /*
   * mgui · CONTRASTE ALTO — la preferencia de comodidad visual común a todas las familias (APARIENCIA POR PÁGINA, TEMAS-ADICIONALES
   * §5): superficies sólidas, texto secundario más oscuro, límites de campos y foco reforzados, selección con una señal
   * además del color y menos decoración. No es otra familia de material: acompaña a cualquiera.
   *
   * Dos entradas, el mismo resultado:
   *   · `data-mg-contraste="alto"` en `<html>`: la persona lo eligió (el resolutor lo emite);
   *   · `prefers-contrast: more` del sistema cuando la persona dejó «Automático» (ausente) — nunca cuando eligió «estándar».
   * Los colores forzados del sistema (`forced-colors: active`) conservan su tratamiento nativo: acá no se simulan.
   *
   * Primero los TOKENS (roles del tema que se endurecen: valen para todo componente que los consume, también el legado del
   * puente); después las pocas reglas estructurales que un token no expresa. Los temas cristal reciben lo mismo en sus propias
   * hojas (`vidrio.css`): acá no se toca su material.
   */

  /* ── Los roles, endurecidos ────────────────────────────────────────────────────────────────────────────────────── */
  [data-mg-contraste="alto"] {
    --mg-color-texto-atenuado: var(--mg-color-texto);
    --mg-color-texto-sutil: var(--mg-color-texto);
    --mg-color-texto-tenue: var(--mg-color-texto);
    --mg-color-borde: var(--mg-color-borde-control);
    --mg-color-borde-suave: var(--mg-color-borde-control);
    --mg-focus-ring-width: 3px;
    --mg-elevation-1: 0 0 0 1px var(--mg-color-borde-control);
    --mg-elevation-2: 0 0 0 1px var(--mg-color-borde-control);
    --mg-elevation-3: 0 0 0 2px var(--mg-color-borde-control);
    --mg-mate-borde: var(--mg-color-borde-control);
    --mg-tonal-contorno: var(--mg-color-borde-control);
    --mg-grafito-separador: var(--mg-color-borde-control);
  }
  @media (prefers-contrast: more) {
    html:not([data-mg-contraste="estandar"]) {
      --mg-color-texto-atenuado: var(--mg-color-texto);
      --mg-color-texto-sutil: var(--mg-color-texto);
      --mg-color-texto-tenue: var(--mg-color-texto);
      --mg-color-borde: var(--mg-color-borde-control);
      --mg-color-borde-suave: var(--mg-color-borde-control);
      --mg-focus-ring-width: 3px;
      --mg-elevation-1: 0 0 0 1px var(--mg-color-borde-control);
      --mg-elevation-2: 0 0 0 1px var(--mg-color-borde-control);
      --mg-elevation-3: 0 0 0 2px var(--mg-color-borde-control);
      --mg-mate-borde: var(--mg-color-borde-control);
      --mg-tonal-contorno: var(--mg-color-borde-control);
      --mg-grafito-separador: var(--mg-color-borde-control);
    }
  }

  /* ── Campos: límite de 2 px en el color del texto; deshabilitado con trazo discontinuo (no sólo más claro) ───────── */
  [data-mg-contraste="alto"] .mgui-field__control,
  [data-mg-contraste="alto"] .mgui-buscador__control,
  [data-mg-contraste="alto"] .mgui-telefono__pais,
  [data-mg-contraste="alto"] .mgui-selector-buscable__boton {
    border-color: var(--mg-color-texto);
    box-shadow: inset 0 0 0 1px var(--mg-color-texto);
  }
  [data-mg-contraste="alto"] .mgui-field__control:disabled { border-style: dashed; box-shadow: none; }

  /* ── Selección: borde grueso + subrayado del título (una señal además del color) ──────────────────────────────── */
  [data-mg-contraste="alto"] .mgui-opcion__control:checked ~ .mgui-opcion__caja { box-shadow: inset 0 0 0 3px var(--mg-color-accion); }
  [data-mg-contraste="alto"] .mgui-opcion__control:checked ~ .mgui-opcion__cuerpo .mgui-opcion__titulo { text-decoration: underline; text-decoration-thickness: 2px; }
  [data-mg-contraste="alto"] .mgui-eleccion__control:checked + .mgui-eleccion__chip,
  [data-mg-contraste="alto"] .mgui-opcion-pill__control:checked ~ .mgui-opcion-pill__pastilla { outline: 2px solid var(--mg-color-texto); outline-offset: 1px; }
  [data-mg-contraste="alto"] .mgui-segmentado__control:checked + .mgui-segmentado__opcion,
  [data-mg-contraste="alto"] .mgui-segmentado__opcion.is-actual { text-decoration: underline; text-decoration-thickness: 2px; box-shadow: inset 0 0 0 2px var(--mg-color-accion); }
  [data-mg-contraste="alto"] .mgui-app-menu__enlace[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
  [data-mg-contraste="alto"] .mgui-estilo__control:checked ~ .mgui-estilo__nombre { text-decoration: underline; text-decoration-thickness: 2px; }

  /* ── Enlaces y botones: subrayado siempre; el botón con borde propio ─────────────────────────────────────────── */
  [data-mg-contraste="alto"] .mgui-app-contenido a:not(.mgui-btn, .mgui-app-menu__enlace, .mgui-chip, .mgui-paleta__opcion) { text-decoration: underline; }
  [data-mg-contraste="alto"] .mgui-btn--primary { border-color: var(--mg-color-texto); }
  [data-mg-contraste="alto"] .mgui-btn--secondary,
  [data-mg-contraste="alto"] .mgui-btn--quiet { border-color: var(--mg-color-texto); color: var(--mg-color-texto); }

  /* ── Foco: anillo de 3 px (el token) con un halo del color de superficie para separarlo de cualquier fondo ─────── */
  [data-mg-contraste="alto"] :focus-visible { outline-width: 3px; outline-offset: 2px; }
  [data-mg-contraste="alto"] .mgui-field__control:focus-visible { box-shadow: 0 0 0 2px var(--mg-color-superficie); }

  /* ── Decoración que se retira: sombras grandes y velos translúcidos del panel de apariencia y las miniaturas ────── */
  [data-mg-contraste="alto"] .mgui-notificacion,
  [data-mg-contraste="alto"] .mgui-dialog,
  [data-mg-contraste="alto"] .mgui-apariencia-panel { box-shadow: 0 0 0 2px var(--mg-color-texto); }
  [data-mg-contraste="alto"] .mgui-estilo-mini__escena { opacity: .35; }

  /* ── web/r3/fuente/conversacion-audio.css ── */
  /*
   * C3 · COMUNICACIONES · las NOTAS DE VOZ (`server/src/web/r3-conversacion-audio.ts` + `web/r3/conversacion/ptt.js`): el botón para
   * grabar con su indicador rojo mientras graba, el estado y la ayuda; y la nota en la conversación (el rótulo con la duración,
   * «Escuchar», la transcripción con los valores dudosos marcados «(revisar)», «Ver original» y la corrección del autor). Sólo tokens:
   * el rojo es el de peligro de la paleta; el resaltado de un valor dudoso, el de advertencia. Funciona igual en la carpeta de la App,
   * en el enlace del paso, en el portal y en un teléfono.
   */

  /* ── El botón de grabar ────────────────────────────────────────────────────────────────────────────────────────────────── */
  .mgui-ptt {
    display: flex; flex-direction: column; gap: var(--mg-space-1); margin: 0; padding-block-start: var(--mg-space-2);
    border-block-start: 1px solid var(--mg-color-borde-suave);
  }
  .mgui-ptt[hidden] { display: none; }
  .mgui-ptt__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0; }
  /* Mantener apretado: sin menú contextual, sin selección y sin que el dedo desplace la página mientras graba. */
  .mgui-ptt__boton { gap: var(--mg-space-2); user-select: none; touch-action: none; }
  .mgui-ptt__punto {
    display: none; inline-size: .75rem; block-size: .75rem; border-radius: 50%; background: var(--mg-status-danger-solido); flex: none;
  }
  /* Mientras graba: el borde y el punto rojos, visibles siempre (también sin animación). */
  .mgui-ptt__boton--grabando { border-color: var(--mg-status-danger-borde); color: var(--mg-status-danger-texto); background: var(--mg-status-danger-suave); }
  .mgui-ptt__boton--grabando .mgui-ptt__punto { display: inline-block; }
  @media (prefers-reduced-motion: no-preference) {
    .mgui-ptt__boton--grabando .mgui-ptt__punto { animation: mgui-ptt-latido 1.2s ease-in-out infinite; }
  }
  @keyframes mgui-ptt-latido { 50% { opacity: .35; } }
  .mgui-ptt__tiempo { font-variant-numeric: tabular-nums; font-weight: var(--mg-weight-semibold); color: var(--mg-status-danger-texto); }
  .mgui-ptt__estado { margin: 0; min-block-size: 1lh; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-ptt__ayuda { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-ptt__modo { display: flex; align-items: center; gap: var(--mg-space-2); margin: 0; font-size: var(--mg-type-sm); }
  .mgui-ptt__error { margin: 0; color: var(--mg-status-danger-texto); font-size: var(--mg-type-sm); }
  .mgui-ptt--bloqueado .mgui-ptt__estado { color: var(--mg-status-warning-texto); }

  /* ── La nota en la conversación ────────────────────────────────────────────────────────────────────────────────────────── */
  .mgui-conversacion__cuerpo-audio { display: flex; flex-direction: column; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-conversacion__audio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-2); margin: 0; }
  .mgui-conversacion__audio-rotulo { margin: 0; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); }
  /* Sin guion, el reproductor del navegador con sus controles, al ancho de la burbuja. */
  .mgui-conversacion__reproductor { inline-size: min(18rem, 100%); max-inline-size: 100%; }
  .mgui-conversacion__escucha { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
  .mgui-conversacion__audio-tiempo { font-size: var(--mg-type-xs); font-variant-numeric: tabular-nums; color: var(--mg-color-texto-atenuado); }
  .mgui-conversacion__audio-aviso { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-conversacion__transcribiendo { margin: 0; font-size: var(--mg-type-sm); font-style: italic; color: var(--mg-color-texto-atenuado); }
  /* Un valor que se oyó con dudas: resaltado y con «(revisar)» al lado (el texto, no sólo el color, lo dice). */
  .mgui-conversacion__dudoso {
    padding-inline: .1em; border-radius: var(--mg-radius-sm); background: var(--mg-status-warning-suave); color: var(--mg-color-texto);
    text-decoration: underline dotted var(--mg-status-warning-borde);
  }
  .mgui-conversacion__revisar { font-size: var(--mg-type-xs); font-weight: var(--mg-weight-semibold); color: var(--mg-status-warning-texto); }
  .mgui-conversacion__original,
  .mgui-conversacion__corregir { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-conversacion__original > summary,
  .mgui-conversacion__corregir > summary { cursor: pointer; color: var(--mg-color-texto-atenuado); }
  .mgui-conversacion__original > p { margin: var(--mg-space-1) 0 0; }
  .mgui-conversacion__nota-original { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-conversacion__corregir > form { margin-block-start: var(--mg-space-2); }
  .mgui-conversacion__corregir textarea { min-block-size: 4rem; resize: vertical; }

  @media not all and (min-width: 40rem) {
    .mgui-ptt__boton { inline-size: 100%; justify-content: center; }
    .mgui-conversacion__reproductor { inline-size: 100%; }
  }

  /* ── web/r3/fuente/conversacion.css ── */
  /*
   * C1 · COMUNICACIONES · la conversación (`server/src/web/r3-conversacion.ts` + `web/r3/conversacion/conversacion.js`): la lista de
   * mensajes que se desplaza sola (lo propio a la derecha, lo del otro a la izquierda, lo del sistema al centro), el estado de un
   * envío («Enviando…», «No se envió · Reintentar»), la divulgación antes del primer mensaje y el redactor. Sólo tokens: ningún
   * color ni medida inventados. Funciona igual en la carpeta de la App, en el enlace del paso, en el portal y en un teléfono.
   */
  .mgui-conversacion { display: flex; flex-direction: column; gap: var(--mg-space-3); min-inline-size: 0; }
  /* `hidden` manda aunque el elemento lleve una clase con `display`. */
  .mgui-conversacion [hidden] { display: none; }

  /* La línea fija de arriba (la pone el anfitrión: p. ej. la retención y la traducción en la conversación de un viaje). */
  .mgui-conversacion__linea {
    margin: 0; padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-md);
    background: var(--mg-status-info-suave); color: var(--mg-status-info-texto); font-size: var(--mg-type-sm);
  }
  .mgui-conversacion__silenciar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mg-space-2); margin: 0; }
  .mgui-conversacion__silenciar > p { margin: 0; font-size: var(--mg-type-sm); }

  /* La lista: se desplaza sola (el guion la lleva al final al llegar algo nuevo si se estaba mirando el final). */
  .mgui-conversacion__mensajes {
    display: flex; flex-direction: column; gap: var(--mg-space-2); margin: 0; padding: var(--mg-space-3);
    list-style: none; max-block-size: 60vh; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-lg); background: var(--mg-color-fondo);
  }
  .mgui-conversacion__mensajes:empty { display: none; }
  /* «Mensajes anteriores» arriba de la lista y «Mensajes más nuevos» abajo (sin guion), centrados; el error de traer los anteriores,
     al lado. */
  .mgui-conversacion__paginas {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--mg-space-2); margin: 0;
  }
  .mgui-conversacion__mensaje {
    align-self: flex-start; max-inline-size: min(36rem, 88%); min-inline-size: 0; padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-suave); border-radius: var(--mg-radius-lg); background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-conversacion__mensaje--propio {
    align-self: flex-end; background: var(--mg-color-accion-suave); border-color: var(--mg-color-borde);
  }
  .mgui-conversacion__mensaje--sistema {
    align-self: center; max-inline-size: 100%; text-align: center; background: transparent; border-style: dashed; box-shadow: none;
  }
  .mgui-conversacion__mensaje--enviando { opacity: .75; }
  .mgui-conversacion__mensaje--fallido { border-color: var(--mg-status-danger-borde); }
  .mgui-conversacion__autor {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-1) var(--mg-space-2); margin: 0 0 var(--mg-space-1);
    font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado);
  }
  .mgui-conversacion__mensaje--sistema .mgui-conversacion__autor { justify-content: center; margin: var(--mg-space-1) 0 0; }
  .mgui-conversacion__nombre { font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto); }
  .mgui-conversacion__hora { font-variant-numeric: tabular-nums; }
  /* El texto tal como se escribió (los saltos de línea cuentan) y las palabras largas no rompen la burbuja. */
  .mgui-conversacion__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .mgui-conversacion__texto--borrado { font-style: italic; color: var(--mg-color-texto-atenuado); }
  .mgui-conversacion__mensaje--sistema .mgui-conversacion__texto { font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-conversacion__paso { margin: var(--mg-space-1) 0 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-conversacion__estado { margin: var(--mg-space-1) 0 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-conversacion__mensaje--fallido .mgui-conversacion__estado { color: var(--mg-status-danger-texto); }
  .mgui-conversacion__vacio { margin: 0; }

  /* La divulgación antes del primer mensaje: qué se guarda y por cuánto (una vez por persona). */
  .mgui-conversacion__divulgacion {
    margin: 0; padding: var(--mg-space-3); border: 1px solid var(--mg-status-info-borde); border-radius: var(--mg-radius-md);
    background: var(--mg-status-info-suave); color: var(--mg-color-texto); font-size: var(--mg-type-sm);
  }
  .mgui-conversacion__divulgacion > p { margin: 0; }
  .mgui-conversacion__divulgacion > p + p { margin-block-start: var(--mg-space-1); }
  .mgui-conversacion__divulgacion-titulo { font-weight: var(--mg-weight-semibold); }

  /* El redactor: el mensaje ocupa el ancho; la acción principal a la derecha. */
  .mgui-conversacion__redactor { margin: 0; }
  .mgui-conversacion__redactor textarea { min-block-size: 5rem; resize: vertical; }
  .mgui-conversacion__acciones { display: flex; justify-content: flex-end; margin: 0; }
  .mgui-conversacion__error { margin: 0; color: var(--mg-status-danger-texto); font-size: var(--mg-type-sm); }
  .mgui-conversacion__solo-lectura { margin: 0; color: var(--mg-color-texto-atenuado); }

  @media not all and (min-width: 40rem) {
    .mgui-conversacion__mensajes { max-block-size: 55vh; padding: var(--mg-space-2); }
    .mgui-conversacion__mensaje { max-inline-size: 94%; }
    .mgui-conversacion__acciones > .mgui-btn { inline-size: 100%; }
  }

  /* ── web/r3/fuente/dialogo.css ── */
  /* Diálogo de confirmación. El respaldo es una página; el modal nativo usa <dialog>. */
  .mgui-dialog {
    max-width: 36rem;
    margin: 0 0 var(--mg-space-4);
    padding: var(--mg-space-6);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-dialog__title { margin: 0 0 var(--mg-space-2); font-size: var(--mg-type-xl); }
  .mgui-dialog__body { margin: 0 0 var(--mg-space-4); }
  .mgui-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mg-space-2); margin: 0; }
  .mgui-dialog__respaldo { margin: var(--mg-space-2) 0 0; font-size: var(--mg-type-sm); }
  .mgui-dialog--danger { border-top: 4px solid var(--mg-status-danger-borde); }
  .mgui-dialog--modal { margin: auto; }
  .mgui-dialog--modal::backdrop { background: color-mix(in oklab, var(--mg-color-marca-profunda) 45%, transparent); }

  /* ── web/r3/fuente/direccion.css ── */
  /*
   * Z-R · P2-10 · el campo de dirección (`ui/campo-direccion.ts`; Valkyrie CampoDireccion): la lista de sugerencias que el guion
   * de los componentes suma debajo del campo (se recorre entera: altura máxima con desplazamiento) y el pie con cuántas hay.
   */
  .mgui-direccion { position: relative; }
  .mgui-direccion__panel {
    display: grid;
    max-block-size: 16rem;
    overflow-y: auto;
    margin-block-start: var(--mg-space-1);
    padding: var(--mg-space-1);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-direccion__panel[hidden] { display: none; }
  .mgui-direccion__opcion {
    display: grid;
    gap: .125rem;
    padding: var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    cursor: pointer;
  }
  .mgui-direccion__opcion:hover,
  .mgui-direccion__opcion[aria-selected="true"] { background: var(--mg-color-accion-suave); }
  .mgui-direccion__texto { font-size: var(--mg-type-sm); }
  .mgui-direccion__lugar { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-direccion__estado { margin: var(--mg-space-1) 0 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-direccion__estado:empty { display: none; }

  /* ── web/r3/fuente/diseno-impresion.css ── */
  /*
   * A9 · El diseñador de comprobantes de impresión (App, `/app/plantillas/:id`): la vista previa milimétrica.
   *
   * Cada hoja es un SVG con el tamaño del papel en sus atributos (`width="210mm" height="297mm"`) y las coordenadas del PDF
   * en su `viewBox`: con el zoom del navegador al 100 % mide lo mismo que el papel. Acá sólo va el marco: el fondo de
   * mesa, la sombra de la hoja y el rótulo «Hoja 1 de 2». En una pantalla angosta la hoja se achica entera (proporcional),
   * nunca se recorta. Las posiciones no van en esta hoja de estilos ni en `style=`: son atributos del SVG.
   */
  .mgui-hojas-impresas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mg-space-6);
    padding: var(--mg-space-4);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
  }
  .mgui-hoja-impresa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mg-space-2);
    max-width: 100%;
    margin: 0;
  }
  .mgui-hoja-impresa__papel {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-hoja-impresa__rotulo {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-diseno-banda {
    margin: var(--mg-space-4) 0 var(--mg-space-2);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-diseno-problema {
    color: var(--mg-status-danger-texto);
  }
  .mgui-diseno-logo {
    display: block;
    max-width: 12rem;
    max-height: 6rem;
    margin-bottom: var(--mg-space-2);
    border: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
  }
  /*
   * F-V1 · La galería de diseños prediseñados (`/app/plantillas/galeria`): una tarjeta por papel con la primera hoja en
   * miniatura (proporcional: el SVG trae su tamaño en milímetros y acá sólo se acota el alto), y los selectores de documento y
   * letra como enlaces.
   */
  .mgui-hojas-impresas--miniatura {
    padding: var(--mg-space-2);
    gap: var(--mg-space-2);
  }
  .mgui-hojas-impresas--miniatura .mgui-hoja-impresa__papel {
    width: auto;
    max-height: 26rem;
  }
  .mgui-diseno-selector {
    list-style: none;
    margin: 0 0 var(--mg-space-3);
    padding: 0;
  }
  .mgui-diseno-galeria {
    align-items: start;
  }

  /* ── web/r3/fuente/emitir-cliente.css ── */
  /*
   * emitir · P2 (31/10/2026) · el PASO 2 «Cliente» de /app/emitir como Valkyrie `SeccionCliente` (bo.valkyrie.ar,
   * `EmitirComprobante.jsx` L749-1248, `mg-admin.css`). Hoja PROPIA del paso (patrón `emitir-recibo.css`): todo lo que
   * cambia respecto de la pantalla general vive acá, acotado al fieldset `[data-mg-seccion="cliente"]` (y al del
   * asociado), para no tocar lo que comparten los otros pasos. El generador la suma sola (lee `web/r3/fuente/*.css`).
   *
   * ⚠ Esta hoja se concatena ANTES que `emitir.css` (orden alfabético: «emitir-» < «emitir.»): lo que redefine algo de
   * allí va con una clase más de especificidad (`.mgui-emisor-grid.mgui-emitir-receptor-grid > …`).
   *
   * 1 · Densidad de VK dentro del paso: rótulos de 12 px, peso medio, atenuados (`.mg-field__label`: text-xs, medium,
   *     ink-muted) y controles de 14 px (`.mg-input`: text-base = 14 px en VK). El alto táctil del control se conserva.
   */
  [data-mg-seccion="cliente"] .mgui-field__label,
  [data-mg-seccion="cliente"] .mgui-emitir-nombre__rotulo,
  [data-mg-seccion="asociado"] .mgui-field__label {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-medium);
    color: var(--mg-color-texto-atenuado);
  }
  [data-mg-seccion="cliente"] .mgui-field__control,
  [data-mg-seccion="cliente"] .mgui-emitir-nombre__texto,
  [data-mg-seccion="asociado"] .mgui-field__control { font-size: var(--mg-type-sm); }
  [data-mg-seccion="cliente"] .mgui-field__help { font-size: var(--mg-type-xs); }
  .mgui-emitir-ayuda-chica { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }

  /*
   * 2 · La leyenda «Cliente» del fieldset repetía el título del paso: `seccion(…, { sinLeyenda: true })` (P1) la deja sólo para
   *     el lector de pantalla (`mgui-sr-only`); acá no hace falta ninguna regla.
   */

  /*
   * 3 · La grilla del receptor con los anchos de VK (`mg-admin.css` L3019-3057): los modificadores son FIJOS (`flex: 0 0`),
   *     el campo sin modificador arranca en 190 px y crece, `span-2` 2 1 320.
   *     Ola 13: los campos se alinean por ARRIBA (`align-items: flex-start`) con rótulos de altura fija (`1.75rem`) para que
   *     subtítulos o avisos debajo de un control (`[data-mg-doc-aviso]`, `.mgui-emitir-condicion-dual`) nunca desalineen los inputs.
   */
  .mgui-emisor-grid.mgui-emitir-receptor-grid { align-items: flex-start; }
  .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field { flex: 1 1 190px; }
  .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field--2xs { flex: 0 0 88px; inline-size: auto; }
  .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field--xs { flex: 0 0 110px; inline-size: auto; }
  .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field--sm { flex: 0 0 170px; inline-size: auto; }
  .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field--md { flex: 0 1 260px; inline-size: auto; }
  .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field--auto { flex: 0 1 auto; }
  .mgui-emisor-grid.mgui-emitir-receptor-grid > :is(.mgui-field--span-2, .mgui-span-2) { flex: 2 1 320px; max-inline-size: none; }
  /* En una pantalla angosta los fijos dejan de serlo: cada campo toma lo que entra (VK apila igual; acá sin desbordar). */
  @media not all and (min-width: 481px) {
    .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field--xs,
    .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field--sm,
    .mgui-emisor-grid.mgui-emitir-receptor-grid > .mgui-field--md { flex: 1 1 110px; }
  }

  /*
   * 3b · emitir · recibo (31/10/2026) · lo que el recibo no muestra del cliente (condición frente al IVA, letra, casilla dual,
   *     ingresos brutos, adjuntos, domicilios): `data-mg-cliente-sin` + la clase que pone el guion (o el servidor, con el tipo
   *     servido). Es una clase y no `hidden` porque la casilla dual y las jurisdicciones manejan su propio `hidden`; el selector
   *     doble le gana a los anchos fijos de la grilla (0,3,0) con (0,3,1).
   */
  fieldset[data-mg-seccion="cliente"] .mgui-emitir-oculto-por-tipo.mgui-emitir-oculto-por-tipo { display: none; }

  /*
   * 4 · Un rótulo con algo a la derecha, en la MISMA línea (VK `mg-flex mg-items-center mg-justify-between`): la lupa del
   *     buscador, el «ARCA» del documento, el «↔» del nombre. El de `--con-chip` de `emitir.css` ya hace esto; éste es el
   *     genérico para lo que no es chip.
   */
  .mgui-emitir-rotulo-con-icono { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); }
  .mgui-emitir-rotulo-con-icono > :last-child { flex: none; }

  /*
   * 5 · «Ocupado»: un par de íconos (quieto / giro). El guion pone `is-ocupado` mientras consulta (VK alterna `Search` y
   *     `Loader2 .girando`). Sirve para la lupa del rótulo, el chip «ARCA» y «Subir constancia».
   */
  .mgui-emitir-ocupable { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  .mgui-emitir-ocupable > .mgui-emitir-ocupable__giro { display: none; }
  /* El giro es el del spinner de la biblioteca (`carga.css`: `mgui-girar` con `--mg-spinner-duration`, que el bloque de movimiento
     reducido vuelve más lento, no lo detiene). */
  .mgui-emitir-ocupable.is-ocupado > .mgui-emitir-ocupable__giro { display: inline-block; animation: mgui-girar var(--mg-spinner-duration) linear infinite; }
  .mgui-emitir-ocupable.is-ocupado > .mgui-ico:not(.mgui-emitir-ocupable__giro) { display: none; }
  /* Los botones del buscador: el ícono delante del texto, como VK (`FileScan` + «Subir constancia…»), alineados con el input. */
  .mgui-emitir-buscador-acciones {
    display: flex; flex-wrap: wrap; gap: var(--mg-space-2); align-items: center;
    margin-block-start: calc(1.75rem + var(--mg-space-1)); min-block-size: 2.5rem;
  }
  .mgui-emitir-buscador-acciones > .mgui-btn { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  @media not all and (min-width: 481px) {
    .mgui-emitir-buscador-acciones { margin-block-start: 0; }
  }
  .mgui-emitir-chip-arca[aria-busy="true"], .mgui-emitir-chip-arca:disabled { opacity: .7; cursor: progress; }
  /* El aviso del documento («Escribí el número y volvé a intentar»): chico, debajo del input. */
  [data-mg-doc-aviso] { font-size: var(--mg-type-xs); }
  [data-mg-doc-aviso][hidden] { display: none; }

  /*
   * 6 · Las coincidencias del buscador en TABLAS (VK L1012-1038): una para la cartera, otra para lo que dice ARCA, filas
   *     clickeables (y con teclado). Letra chica (VK `mg-table--sm`: 12 px), documento en mono.
   */
  .mgui-emitir-resultados { display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-resultados:empty { display: none; }
  .mgui-emitir-resultados-tabla { inline-size: 100%; border-collapse: collapse; font-size: var(--mg-type-xs); }
  .mgui-emitir-resultados-tabla th,
  .mgui-emitir-resultados-tabla td { padding: var(--mg-space-1) var(--mg-space-2); border-bottom: 1px solid var(--mg-color-borde); text-align: start; vertical-align: top; }
  .mgui-emitir-resultados-tabla th { font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto-atenuado); white-space: nowrap; }
  .mgui-emitir-resultados-tabla tbody tr { cursor: pointer; }
  .mgui-emitir-resultados-tabla tbody tr:hover,
  .mgui-emitir-resultados-tabla tbody tr:focus-visible { background: var(--mg-color-accion-suave); outline: none; }
  .mgui-emitir-resultados-tabla tbody tr:focus-visible > td:first-child { box-shadow: inset 3px 0 0 var(--mg-color-foco); }
  .mgui-emitir-resultados-tabla .mgui-emitir-novedades { margin-block-start: var(--mg-space-1); }
  .mgui-emitir-resultados__secundario { color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-resultados__vacio { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }

  /*
   * 7 · La constancia leída como AVISO (VK `VhAlert` L1047-1056): título con el método de lectura, el cuerpo y «Cerrar».
   */
  .mgui-emitir-constancia-aviso .mgui-alert__actions { margin-block-start: var(--mg-space-2); }
  .mgui-emitir-constancia-aviso__linea { margin: 0; font-size: var(--mg-type-xs); }
  .mgui-emitir-constancia-aviso__linea--advertencia { color: var(--mg-status-warning-texto); }

  /*
   * 8 · El nombre (`CampoNombre`): el «↔» y la burbuja «¿Al revés?» en el renglón del título; la pista «se guarda como …»
   *     chica y atenuada; el placeholder del texto cerrado sale de `data-mg-placeholder` (i18n, no del CSS); el editor en
   *     fila con los dos inputs y el separador; una parte que se arrastra se marca.
   */
  .mgui-emitir-nombre__titulo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-emitir-nombre__pista { font-size: var(--mg-type-xs); font-weight: var(--mg-weight-normal); color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-nombre__pista[hidden] { display: none; }
  [data-mg-seccion="cliente"] .mgui-emitir-nombre__texto:empty::before { content: attr(data-mg-placeholder); color: var(--mg-color-texto-atenuado); }
  [data-mg-seccion="cliente"] .mgui-emitir-nombre__texto { text-align: start; }
  .mgui-emitir-nombre__swap[hidden] { display: none; }
  .mgui-emitir-nombre__editor > .mgui-field__control.is-arrastrando { opacity: .55; border-style: dashed; }
  .mgui-burbuja-ancla { position: relative; display: inline-flex; }
  .mgui-burbuja {
    position: absolute; inset-block-end: calc(100% + 6px); inset-inline-end: 0; z-index: 5;
    white-space: nowrap; padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm); background: var(--mg-color-texto); color: var(--mg-color-superficie);
    font-size: var(--mg-type-xs); font-weight: var(--mg-weight-normal); box-shadow: var(--mg-elevation-2); pointer-events: none;
  }
  .mgui-burbuja::after {
    content: ""; position: absolute; inset-block-start: 100%; inset-inline-end: 10px;
    border: 5px solid transparent; border-block-start-color: var(--mg-color-texto);
  }
  .mgui-burbuja[hidden] { display: none; }

  /*
   * 9 · Lo que se sabe del cliente (VK L1191-1202): los chips y la ficha ARCA en UNA línea atenuada («Persona física ·
   *     Monotributo categoría D · Régimen general: IVA, Ganancias · …»); las novedades debajo con su rótulo «ARCA informa:».
   */
  .mgui-emitir-receptor-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
  .mgui-emitir-receptor-chips[hidden] { display: none; }
  .mgui-emitir-ficha-arca__linea { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-novedades-caja { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-1) var(--mg-space-2); margin-block-start: var(--mg-space-1); }
  .mgui-emitir-novedades-rotulo { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-novedades-caja > .mgui-emitir-novedades { margin: 0; }

  /*
   * 10 · «Compra como» como VK `CompraComo` (L355-370, `.mg-retiro` L3247-3270): SIN caja exterior ni ayuda fija, una grilla de
   *      tarjetas `minmax(220px, 1fr)` con la letra grande donde iría el punto del radio y la sublínea «Se factura según su
   *      condición: …». La casilla «RI + Monotributo» (MG) es una línea chica debajo del select «a emitir» (frente B, 31/10).
   */
  [data-mg-seccion="cliente"] .mgui-emitir-compra-como { border: 0; padding: 0; margin-block-start: var(--mg-space-2); }
  [data-mg-seccion="cliente"] .mgui-emitir-compra-como > .mgui-emitir-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--mg-space-2); }
  [data-mg-seccion="cliente"] .mgui-emitir-compra-como[hidden] { display: none; }
  .mgui-emitir-letra-opcion__ayuda:empty { display: none; }
  .mgui-emitir-condicion-dual { font-size: var(--mg-type-xs); }
  .mgui-emitir-condicion-dual[hidden] { display: none; }
  /* El aviso de la letra (VK L1151-1170): los botones envuelven en una línea; los escondidos no ocupan lugar. */
  .mgui-emitir-alert-letra__acciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
  .mgui-emitir-alert-letra__acciones > [hidden] { display: none; }

  /* 11 · Ingresos brutos (VK `CamposIibb`): su propia grilla, el motivo abajo a lo ancho. */
  .mgui-emitir-iibb { margin-block-start: var(--mg-space-2); }
  .mgui-emitir-iibb-motivo { margin: 0; font-size: var(--mg-type-xs); }
  .mgui-emitir-iibb-motivo[hidden] { display: none; }
  .mgui-emitir-iibb-chips { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); }

  /*
   * 12 · Domicilios, la fila como VK (L684-739): la línea de tipos lleva al final «lo informó ARCA» y el TACHO (ícono, no
   *      texto); la línea de estado: el chip del punto + «Ver en el mapa» (chip con pin, deshabilitado sin dirección). Lo
   *      demás (Street View, Google Maps, el enlace para el cliente) vive adentro del panel del mapa.
   */
  .mgui-emitir-domicilio__quitar { margin-inline-start: auto; inline-size: 1.75rem; block-size: 1.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  /* El chip «Lo informó ARCA» sigue a los tipos (en `emitir.css` se empujaba a la derecha): a la derecha va sólo el tacho. */
  .mgui-emitir-domicilio__tipos > .mgui-emitir-domicilio__arca { margin-inline-start: 0; }
  .mgui-emitir-domicilio__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); font-size: var(--mg-type-xs); }
  .mgui-emitir-domicilio__estado > .mgui-chip { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  .mgui-chip--deshabilitado, .mgui-chip:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
  a.mgui-chip--deshabilitado { pointer-events: none; }
  .mgui-emitir-domicilios__contador { font-weight: var(--mg-weight-normal); color: var(--mg-color-texto-atenuado); }
  /* El panel del mapa (VK `mg-mapa-panel`): título con «Cerrar», la dirección, el estado, el buscador, el mapa, dónde quedó
     el pin, la ayuda con los visores, las indicaciones con su botón, «Es acá» + el enlace para el cliente, y su tarjeta. */
  .mgui-mapa-panel__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); margin: 0 0 var(--mg-space-2); }
  .mgui-mapa-panel__titulo > b { font-size: var(--mg-type-sm); }
  .mgui-mapa-panel__direccion { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-mapa-panel__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: var(--mg-space-1) 0 var(--mg-space-2); font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-mapa-panel__estado[hidden] { display: none; }
  .mgui-mapa-panel__visores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-mapa-panel__visores > .mgui-chip { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  .mgui-mapa-panel__indicaciones-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-mapa-panel__indicaciones-pie > span { flex: 1 1 16rem; }
  .mgui-mapa-panel__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
  .mgui-mapa-panel__acciones > .mgui-muted { font-size: var(--mg-type-xs); flex: 1 1 16rem; }
  .mgui-mapa-panel__enlace {
    display: grid; gap: var(--mg-space-1); margin-block-start: var(--mg-space-2); padding: var(--mg-space-2);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-vidrio-velo-hundido);
  }
  .mgui-mapa-panel__enlace[hidden] { display: none; }
  .mgui-mapa-panel__enlace-texto { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-mapa-panel__enlace-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1); }
  .mgui-mapa-panel__enlace-fila > .mgui-field__control { flex: 1 1 12rem; min-inline-size: 0; font-size: var(--mg-type-xs); }
  .mgui-mapa-panel__error { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-status-danger-texto); }
  .mgui-mapa-panel__error:empty { display: none; }

  /* 13 · «2c · Presupuestos y pedidos» (VK `SeccionPresupuestos`): chips de estado en la celda, letra chica. */
  .mgui-emitir-pyp__chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1); }
  .mgui-emitir-pyp__chips > .mgui-chip { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  .mgui-emitir-pyp__estado { text-transform: none; }
  .mgui-emitir-pyp__sub > .mgui-muted { font-weight: var(--mg-weight-normal); }
  .mgui-emitir-pyp__bloque[hidden], .mgui-emitir-pyp__anteriores[hidden], .mgui-emitir-pyp[hidden] { display: none; }
  .mgui-emitir-pyp__aviso { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-emitir-pyp__aviso:empty { display: none; }

  /*
   * 14 · El comprobante asociado como VK `SeccionAsociado` (frente A, 31/10/2026): la TABLA de los comprobantes del cliente
   *      (`mg-table--sm mg-table--hover`: letra chica, fila clickeable, la elegida en el color de la marca `mg-text-brand`),
   *      los vacíos chicos y atenuados, la línea de la NC, y los devolvibles por cantidad (Facturado · Ya devuelto · Devolver,
   *      el número a la derecha con el importe que se devuelve al lado); el pie dice PARCIAL o TOTAL.
   */
  .mgui-emitir-asociado-tabla { inline-size: 100%; border-collapse: collapse; font-size: var(--mg-type-xs); }
  .mgui-emitir-asociado-tabla th,
  .mgui-emitir-asociado-tabla td { padding: var(--mg-space-1) var(--mg-space-2); border-bottom: 1px solid var(--mg-color-borde); text-align: start; vertical-align: middle; white-space: nowrap; }
  .mgui-emitir-asociado-tabla th { font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-asociado-tabla .mgui-nums { text-align: end; font-variant-numeric: tabular-nums; }
  .mgui-emitir-asociado-tabla__fila { cursor: pointer; }
  .mgui-emitir-asociado-tabla__fila:hover,
  .mgui-emitir-asociado-tabla__fila:focus-visible { background: var(--mg-color-accion-suave); outline: none; }
  .mgui-emitir-asociado-tabla__fila:focus-visible > td:first-child { box-shadow: inset 3px 0 0 var(--mg-color-foco); }
  .mgui-emitir-asociado-tabla__fila.is-elegido { color: var(--mg-color-accion); font-weight: var(--mg-weight-semibold); }
  .mgui-emitir-asociado-tabla__xs { color: var(--mg-color-texto-atenuado); }
  [data-mg-asociado-lista][hidden] { display: none; }
  .mgui-emitir-asociado__vacio { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-emitir-asociado__vacio[hidden] { display: none; }
  .mgui-emitir-asociado__linea { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-emitir-asociado-nc[hidden] { display: none; }
  [data-mg-devolvibles-sin-saldo] { color: var(--mg-status-warning-texto); }
  [data-mg-devolvibles-sin-saldo][hidden] { display: none; }
  .mgui-emitir-devolvibles__devolver { white-space: nowrap; }
  .mgui-emitir-devolvibles__devolver > .mgui-field__control { display: inline-block; inline-size: 5.5rem; max-inline-size: 5.5rem; margin-inline-start: 0; }
  .mgui-emitir-devolvibles__importe { margin-inline-start: var(--mg-space-2); font-size: var(--mg-type-xs); font-variant-numeric: tabular-nums; }
  .mgui-emitir-devolvibles__importe:empty { display: none; }
  /* La nota de crédito en el paso 6 (VK `esNc`): la nota de arriba y el vacío de la tabla, chicos y atenuados. */
  .mgui-emitir-pagos__nota-nc, .mgui-emitir-pagos__vacio { margin: 0; font-size: var(--mg-type-xs); }
  .mgui-emitir-pagos__nota-nc[hidden], .mgui-emitir-pagos__vacio[hidden] { display: none; }
  .mgui-emitir-devolvibles { inline-size: 100%; border-collapse: collapse; font-size: var(--mg-type-xs); }
  .mgui-emitir-devolvibles th,
  .mgui-emitir-devolvibles td { padding: var(--mg-space-1) var(--mg-space-2); border-bottom: 1px solid var(--mg-color-borde); text-align: start; vertical-align: middle; }
  .mgui-emitir-devolvibles th { font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-devolvibles .mgui-nums,
  .mgui-emitir-devolvibles th.mgui-nums { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mgui-emitir-devolvibles .mgui-field { margin: 0; }
  .mgui-emitir-devolvibles .mgui-field__control { max-inline-size: 9rem; text-align: end; font-variant-numeric: tabular-nums; margin-inline-start: auto; }
  .mgui-emitir-asociado-pie { margin: var(--mg-space-1) 0 0; font-size: var(--mg-type-xs); font-weight: var(--mg-weight-semibold); }
  .mgui-emitir-asociado-nd { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-emitir-asociado-nd[hidden], [data-mg-asociado-nc][hidden] { display: none; }
  .mgui-emitir-devolvibles-aviso { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-status-warning-texto); }

  /* ── web/r3/fuente/emitir-detalle.css ── */
  /*
   * emitir · P1 (31/10/2026) · los pasos 1 «Tipo de comprobante» y 3 «Detalle del comprobante» de `/app/emitir` como las
   * secciones de Valkyrie (`EmitirComprobante.jsx` › `SeccionTipo`, `SeccionDetalle`; `FechaComprobante.jsx` en columna;
   * `mg-admin.css` › `.mg-tipo-selector`, `.mg-emisor-grid`). Render en `web/r3-emitir-detalle.ts`, guion `web/r3/emitir/detalle.js`.
   * Sólo tokens: ningún color ni medida inventados. Esta hoja se ordena ANTES que `emitir.css` en el bundle (orden alfabético del
   * generador): lo que pisa reglas de allá lo hace con más especificidad, nunca con `!important`.
   */

  /* ── Paso 1 · las pastillas del tipo: VK `.mg-tipo-selector .mg-chip` (13 px, padding 8 × 16, gap 8, envuelven) ── */
  .mgui-emitir-tipo-pills .mgui-opcion-pill__pastilla { padding: var(--mg-space-2) var(--mg-space-4); font-size: var(--mg-type-sm); }

  /*
   * ── Paso 3 · UNA grilla que envuelve (VK `.mg-emisor-grid`: flex-wrap, gap 12 × 16, `align-items: flex-end`) ──
   * Los modificadores miden como en VK (`mg-admin.css` L3025-3057): base `1 1 190px`; `--xs` 110 y `--sm` 170 fijos; `--md`
   * `0 1 260px`; `--auto` lo que pide su contenido. Nada plegado: Valkyrie no tiene «Más opciones» en la cabecera.
   */
  .mgui-emitir-detalle-grilla {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: var(--mg-space-3) var(--mg-space-4);
  }
  .mgui-emitir-detalle-grilla > .mgui-field { flex: 1 1 11.875rem; min-inline-size: 0; margin-block-end: 0; }
  .mgui-emitir-detalle-grilla > .mgui-field--xs { flex: 0 0 6.875rem; }
  .mgui-emitir-detalle-grilla > .mgui-field--sm { flex: 0 0 10.625rem; }
  .mgui-emitir-detalle-grilla > .mgui-field--md { flex: 0 1 16.25rem; }
  .mgui-emitir-detalle-grilla > .mgui-field--auto { flex: 0 1 auto; width: max-content; max-width: 100%; }
  /* El `hidden` de los campos que no van con el tipo tiene que ganarle al `display: flex` de `.mgui-field`. */
  .mgui-emitir-detalle-grilla > .mgui-field[hidden] { display: none; }
  /* La nota del concepto (VK L1727: 2xs, atenuada) y su `hidden` cuando el tipo no lleva CAE. */
  .mgui-emitir-detalle__nota { margin: 0; font-size: var(--mg-type-xs); }
  .mgui-emitir-detalle__nota[hidden] { display: none; }

  /*
   * ── La fecha como una columna más (VK `FechaComprobante enColumna`: `mg-field--auto`, «la columna mide lo que miden los
   * días; si son once, se limita a la fila y envuelven»). La caja de los días (`.mgui-fecha-arca__grupo`, pedido del titular
   * del 31/10) hace de rectángulo; los días son botones de dos líneas (VK `dibujarDia`: semana arriba, «d/m» abajo), el elegido
   * en sólido como el `mg-btn--primary` de VK.
   */
  .mgui-emitir-detalle-grilla > .mgui-emitir-detalle__fecha { flex: 0 1 auto; width: max-content; max-width: 100%; }
  .mgui-emitir-detalle__fecha .mgui-fecha-arca__grupo { padding-block-start: var(--mg-space-1); }
  .mgui-emitir-detalle__fecha .mgui-fecha-arca__dias { margin-top: 0; gap: var(--mg-space-1); }
  .mgui-fecha-arca__dia {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0; line-height: 1.15; padding: var(--mg-space-1) var(--mg-space-2); min-height: 2.5rem;
  }
  .mgui-fecha-arca__dia-semana { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-fecha-arca__dia-fecha { font-variant-numeric: tabular-nums; }
  .mgui-fecha-arca__dia[aria-pressed="true"] {
    background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); border-color: var(--mg-color-accion);
  }
  .mgui-fecha-arca__dia[aria-pressed="true"] .mgui-fecha-arca__dia-semana { color: inherit; opacity: 0.85; }
  /* El chip «Ventana vigente…» ya no hace falta con los días pintados (la regla está en el globo de cada día); el guion lo esconde. */
  .mgui-emitir-detalle__fecha [data-mg-chip-ventana][hidden] { display: none; }

  /* ── El selector sin buscador (VK `sinBusqueda`: «acá no hay campo ni tope»): la lista entera, sin altura tope. ── */
  .mgui-selector-buscable__lista--entera { max-height: none; overflow-y: visible; }

  /*
   * ── Los cargos, plegados (VK ya no los muestra como sección; MG conserva el contrato): el fieldset es la sección `cargos`
   * de siempre y adentro un `<details>` cerrado con el resumen en una línea. ──
   */
  .mgui-emitir-cargos { padding-block: var(--mg-space-2); }
  .mgui-emitir-cargos__plegable { margin: 0; }
  .mgui-emitir-cargos__plegable > summary {
    cursor: pointer;
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto-atenuado);
    padding-block: var(--mg-space-1);
  }
  .mgui-emitir-cargos__plegable[open] > summary { color: var(--mg-color-texto); margin-block-end: var(--mg-space-2); }

  /* ── web/r3/fuente/emitir-documento.css ── */
  /*
   * emitir · P8 (31/10/2026) · El paso 8 «El documento» (como la sección 9 de Valkyrie, `DisenoDocumento.jsx`) y el pie
   * «Emitir» de /app/emitir (`web/r3-emitir-documento.ts`, `web/r3-emitir-rediseno.ts`, `web/r3/emitir/rediseno.js`), y la
   * pantalla del resultado (`pantallaResultado` en `web/r3-emitir.ts`).
   *
   * La barra del documento reusa `.mgui-emitir-previa-barra*` de `emitir.css`; acá va lo nuevo: la regla de ancho (un
   * `<meter>`, sin estilos en línea), la lista de requisitos ARCA, los selectores de la tabla de columnas, el botón grande
   * del pie con su estado «emitiendo», el error en el lugar, la cabecera del resultado con sus acciones en línea, la caja
   * punteada del enlace corto, el lienzo a toda la pantalla en el teléfono, y las máscaras de los íconos que el paso usa
   * (trazos Lucide 0.460.0, los mismos de Valkyrie, con la receta de `iconos.css`: `tmp/agentes/z-r/bin/iconos.py`).
   * Sólo tokens: ningún color ni medida inventados. Los `[hidden]` se declaran donde `display: flex/grid` le gana al
   * `hidden` del navegador (la lección de `.mgui-emitir-seccion`).
   */

  /* ── La nota de la NC sin factura, el rótulo del papel, el estado por letra, el estado de la barra ──────────────────── */
  .mgui-emitir-documento__nota { margin: 0; }
  .mgui-emitir-documento__nota[hidden] { display: none; }
  .mgui-documento-rotulo { font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); white-space: nowrap; }
  .mgui-documento-select { inline-size: auto; min-inline-size: 0; min-block-size: 2rem; padding-block: var(--mg-space-1); font-size: var(--mg-type-sm); }
  .mgui-documento-letra { font-size: var(--mg-type-xs); }
  /* Los grupos de la barra envuelven (el chip y el estado por letra no entran en una sola línea a 390 px). */
  .mgui-documento-barra-grupo { flex-wrap: wrap; min-inline-size: 0; }
  .mgui-documento-letra[hidden] { display: none; }
  .mgui-documento-estado { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-documento-estado:empty { display: none; }
  .mgui-documento-estado.is-error { color: var(--mg-status-danger-texto); }
  .mgui-documento-cabecera[aria-busy="true"],
  .mgui-documento-herramientas[aria-busy="true"] { opacity: 0.6; }

  /* frente C (31/10/2026): la regla de ancho y los requisitos de ARCA viven con el resto de la sección 9 en `rediseno.css` (`.mgui-doc__*`). */

  /* frente C (31/10/2026): la tabla de columnas de P8 se retiró: las herramientas son las de VK sobre la hoja (`rediseno.css`). */

  /* ── El pie «Emitir» (VK L3417-3429: a la derecha, el botón grande con su ícono) ───────────────────────────────────── */
  .mgui-emitir-pie__acciones {
    margin-inline-start: auto; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: var(--mg-space-2) var(--mg-space-3);
  }
  .mgui-emitir-pie__emitir {
    display: inline-flex; align-items: center; gap: var(--mg-space-2);
    padding-block: var(--mg-space-3); padding-inline: var(--mg-space-6);
    font-size: var(--mg-type-md); text-transform: uppercase; letter-spacing: 0.02em;
  }
  .mgui-emitir-pie__emitir .mgui-ico { inline-size: 1rem; block-size: 1rem; }
  .mgui-emitir-pie__emitir[aria-busy="true"] { opacity: 0.7; cursor: progress; }
  .mgui-emitir-pie__falta { flex-basis: 100%; }
  /* La casilla del enlace sólo con presupuesto o pedido: `hidden` tiene que ganarle al `display: flex` de `.mgui-field`. */
  .mgui-emitir-pie__acciones .mgui-emitir-casilla { margin: 0; }
  .mgui-emitir-pie__acciones .mgui-emitir-casilla[hidden] { display: none; }
  .mgui-emitir-pie__error {
    flex-basis: 100%; margin: 0; display: flex; align-items: flex-start; gap: var(--mg-space-2);
    padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-md);
    background: var(--mg-status-danger-suave); color: var(--mg-status-danger-texto); border-inline-start: 3px solid var(--mg-status-danger-borde);
    font-size: var(--mg-type-sm);
  }
  .mgui-emitir-pie__error .mgui-ico { margin-block-start: 0.125rem; }

  /* ── El resultado (VK `Resultado` + `EnlaceCorto`): título con acciones en línea, el enlace en su caja punteada ──────── */
  .mgui-emitir-resultado__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-3); }
  .mgui-emitir-resultado__titulo { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
  .mgui-emitir-resultado__acciones { margin: 0; margin-inline-start: auto; }
  .mgui-emitir-resultado__enlace { align-items: center; }
  .mgui-emitir-enlace-corto {
    display: inline-flex; align-items: center; gap: var(--mg-space-2); max-inline-size: 100%;
    padding: var(--mg-space-1) var(--mg-space-3); background: var(--mg-color-fondo);
    border: 1px dashed var(--mg-color-borde-control); border-radius: var(--mg-radius-md); font-size: var(--mg-type-sm);
  }
  .mgui-emitir-enlace-corto__url { min-inline-size: 0; inline-size: auto; border: 0; padding: 0; background: transparent; color: inherit; font-size: inherit; user-select: all; }
  .mgui-emitir-acciones .mgui-btn { display: inline-flex; align-items: center; gap: var(--mg-space-1); }

  /* ── El teléfono: el lienzo ocupa toda la pantalla (VK: «9 · El documento, que en el teléfono ocupa toda la pantalla») ── */
  @media not all and (min-width: 48rem) {
    .mgui-emitir-pie__acciones { margin-inline-start: 0; flex-basis: 100%; }
    .mgui-emitir-pie__emitir { flex: 1 1 100%; justify-content: center; }
    .mgui-emitir-resultado__acciones { margin-inline-start: 0; }
  }

  /* ── Íconos del paso y del resultado (Lucide 0.460.0, ISC: ver el aviso en `iconos.css`) ───────────────────────────── */
  .mgui-ico--printer { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); }
  .mgui-ico--download { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E"); }
  .mgui-ico--copy { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
  .mgui-ico--save { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E"); }
  .mgui-ico--external-link { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
  .mgui-ico--circle-x { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }
  .mgui-ico--link-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7A5 5 0 0 1 7 7h2'/%3E%3Cpath d='M15 7h2a5 5 0 1 1 0 10h-2'/%3E%3Cline x1='8' x2='16' y1='12' y2='12'/%3E%3C/svg%3E"); }
  /* frente C (31/10/2026) · los íconos de la barra y del panel de la sección 9 de VK (Lock/Unlock, History, Zoom, Maximize2, StretchHorizontal, Redo2, ArrowLeft/Right). */
  .mgui-ico--lock { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
  .mgui-ico--lock-open { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E"); }
  .mgui-ico--history { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
  .mgui-ico--zoom-in { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' x2='16.65' y1='21' y2='16.65'/%3E%3Cline x1='11' x2='11' y1='8' y2='14'/%3E%3Cline x1='8' x2='14' y1='11' y2='11'/%3E%3C/svg%3E"); }
  .mgui-ico--zoom-out { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' x2='16.65' y1='21' y2='16.65'/%3E%3Cline x1='8' x2='14' y1='11' y2='11'/%3E%3C/svg%3E"); }
  .mgui-ico--maximize-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' x2='14' y1='3' y2='10'/%3E%3Cline x1='3' x2='10' y1='21' y2='14'/%3E%3C/svg%3E"); }
  .mgui-ico--stretch-horizontal { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='6' x='2' y='4' rx='2'/%3E%3Crect width='20' height='6' x='2' y='14' rx='2'/%3E%3C/svg%3E"); }
  .mgui-ico--redo-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 14 5-5-5-5'/%3E%3Cpath d='M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13'/%3E%3C/svg%3E"); }
  .mgui-ico--arrow-left { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); }
  .mgui-ico--arrow-right { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }

  /* ── web/r3/fuente/emitir-entrega.css ── */
  /*
   * emitir · P6b (31/10/2026) · el paso 6 · «Entrega» y «Remito y reparto» de /app/emitir, como Valkyrie (`mg-admin.css`
   * L3247-3308: `.mg-retiro`, `.mg-retiro__opcion--icono`, `.mg-retiro__icono`). Sólo lo que el framework no trae: las cards
   * del modo de retiro (grilla auto-fill de 220 px; el ícono grande ES la marca de selección: se pinta con el color de la acción
   * cuando la opción está elegida; el radio se oculta a la vista, no a la accesibilidad), la línea de título «Entrega: cómo sale
   * la mercadería», la línea de verificación del DNI del tercero, el título de los bultos y las herramientas del selector de
   * repartos. El resto se compone con `.mgui-emisor-grid`, `.mgui-field`, `.mgui-chip`, `.mgui-alert` y `.mgui-ico`.
   * Los `[hidden]` de la pantalla los resuelve `.mgui-emitir [hidden]` (ux-fiscal.css). Nada de colores literales: tokens.
   */
  .mgui-emitir-entrega { display: grid; gap: var(--mg-space-3); }
  .mgui-emitir-entrega__sin-productos { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-emitir-entrega__cuerpo { display: grid; gap: var(--mg-space-3); }
  .mgui-emitir-entrega__titulo { margin: 0; font-size: var(--mg-type-sm); }
  /* El bloque del domicilio no lleva la caja punteada de los otros modos: es la lista de domicilios del cliente, con sus propias filas. */
  .mgui-emitir-retiro-detalle--domicilio { margin-block-start: 0; padding: 0; border: 0; background: transparent; }

  .mgui-retiro {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--mg-space-2);
    margin: 0; padding: 0; border: 0; min-inline-size: 0;
  }
  .mgui-retiro__opcion {
    position: relative;
    display: flex; gap: var(--mg-space-2); align-items: flex-start;
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    cursor: pointer;
  }
  .mgui-retiro__opcion:hover { border-color: var(--mg-color-borde-control); }
  .mgui-retiro__opcion:has(.mgui-retiro__control:checked) { border-color: var(--mg-color-accion); background: var(--mg-color-accion-suave); }
  .mgui-retiro__opcion:has(.mgui-retiro__control:focus-visible) {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-retiro__control {
    position: absolute; inline-size: 1px; block-size: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); opacity: 0;
  }
  .mgui-retiro__icono {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    inline-size: 2rem; block-size: 2rem;
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-retiro__icono .mgui-ico { inline-size: 1.75rem; block-size: 1.75rem; }
  .mgui-retiro__opcion:has(.mgui-retiro__control:checked) .mgui-retiro__icono { color: var(--mg-color-accion); }
  .mgui-retiro__texto { display: grid; gap: 2px; min-inline-size: 0; }
  .mgui-retiro__nombre { font-size: var(--mg-type-sm); }
  .mgui-retiro__bajada { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  @media (pointer: coarse) {
    .mgui-retiro__opcion { min-block-size: var(--mg-control-min); }
  }
  @media (forced-colors: active) {
    .mgui-retiro__opcion:has(.mgui-retiro__control:checked) { outline: 2px solid Highlight; }
  }

  /* El tercero autorizado: la línea de verificación contra el padrón y la patente en mayúsculas. */
  .mgui-emitir-entrega__verificacion { font-size: var(--mg-type-xs); }
  .mgui-emitir-entrega__distinto { color: var(--mg-status-warning-texto); }
  .mgui-emitir-entrega__patente { text-transform: uppercase; }

  /* Remito y reparto. */
  .mgui-emitir-remito { display: grid; gap: var(--mg-space-3); }
  .mgui-emitir-remito .mgui-emitir-casilla { margin-block-end: 0; }
  .mgui-emitir-remito__activo { display: grid; gap: var(--mg-space-3); }
  .mgui-emitir-remito__bultos { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1); font-size: var(--mg-type-sm); }
  .mgui-emitir-remito__nota { margin: 0; font-size: var(--mg-type-xs); }
  .mgui-emitir-remito__herramientas { gap: var(--mg-space-1); }
  .mgui-emitir-remito__herramientas .mgui-chip { padding-inline: var(--mg-space-1); min-inline-size: 1.75rem; justify-content: center; }

  /* ── web/r3/fuente/emitir-impuestos.css ── */
  /*
   * emitir · P5 (31/10/2026) · Paso 5 «Impuestos» y paso 7 «Notas y totales» de «Emitir» (`web/r3-emitir-impuestos-totales.ts`
   * + `web/r3/emitir/impuestos-totales.js`), portados de Valkyrie (`SeccionImpuestos`, «6 · Notas y totales», `Totales`):
   *   · la tabla unificada de impuestos (`.mg-table--sm` de VK: 12 px, 8 × 16 de padding; numéricos a la derecha en la fuente
   *     numérica; el origen en xs atenuado; la fila quitada al 60 % con el importe tachado);
   *   · el botón-ícono cuadrado (VK `.mg-btn-icon.mg-btn-sm`: 29 × 29, ícono de 14) y las máscaras `trash-2` / `plus` de Lucide
   *     0.460.0 (los MISMOS trazos que usa Valkyrie; las demás máscaras viven en `iconos.css`);
   *   · el formulario de un tributo (`.mgui-emisor-grid` + `margin-top` de VK `mg-mt-2`), con el botón al pie de los campos;
   *   · las notas internas teñidas de advertencia (VK `.mg-notas-internas`: fondo suave, borde y 3 px a la izquierda);
   *   · el cuadro de totales como tabla (VK `.mg-totales`: a la derecha, mínimo 320 px, primera columna atenuada, fila final con
   *     separador fuerte y tamaño md); las filas de respaldo se esconden cuando el guion arma el detalle.
   * Sólo tokens: ningún color ni medida inventados. Nada de `!important` ni `max-width` en media queries (reglas del generador).
   */

  /* Máscaras de Lucide (ISC) para los dos íconos que esta pantalla suma: el tacho y el más. */
  .mgui-ico--trash-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' x2='10' y1='11' y2='17'/%3E%3Cline x1='14' x2='14' y1='11' y2='17'/%3E%3C/svg%3E"); }
  .mgui-ico--plus { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }

  /* Botón-ícono cuadrado (VK `.mg-btn-icon` 39 × 39; `.mg-btn-sm` 29 × 29 con el ícono de 14 px). */
  .mgui-btn--icono { inline-size: 2.4375rem; padding-inline: 0; }
  .mgui-btn--icono.mgui-btn--sm { inline-size: 1.8125rem; min-height: 1.8125rem; padding: 0; }
  .mgui-btn--icono .mgui-ico { inline-size: .875rem; block-size: .875rem; }

  /* ── Paso 5 · la tabla unificada ─────────────────────────────────────────────────────────────────────────────── */
  .mgui-emitir-impuestos__tabla-caja { overflow-x: auto; min-inline-size: 0; }
  .mgui-emitir-impuestos-tabla { width: 100%; border-collapse: collapse; font-size: var(--mg-type-xs); }
  .mgui-emitir-impuestos-tabla th,
  .mgui-emitir-impuestos-tabla td {
    padding: var(--mg-space-2) var(--mg-space-4);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--mg-color-borde);
  }
  .mgui-emitir-impuestos-tabla thead th {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mg-color-texto-atenuado);
    white-space: nowrap;
  }
  .mgui-emitir-impuestos-tabla tbody tr:last-child td { border-block-end: none; }
  .mgui-emitir-impuestos-tabla__num { text-align: end; font-family: var(--mg-font-numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mgui-emitir-impuestos-tabla td.mgui-emitir-impuestos-tabla__num { text-align: end; }
  .mgui-emitir-impuestos-tabla__importe { color: var(--mg-status-info-texto); }
  .mgui-emitir-impuestos-tabla__origen { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-impuestos-tabla__acciones { text-align: end; white-space: nowrap; padding-block: var(--mg-space-1); }
  .mgui-emitir-impuestos-tabla tr.is-quitado td { opacity: .6; }
  .mgui-emitir-impuestos-tabla tr.is-quitado td.mgui-emitir-impuestos-tabla__acciones { opacity: 1; }
  .mgui-emitir-impuestos-tabla tr.is-quitado .mgui-emitir-impuestos-tabla__importe { color: var(--mg-color-texto-atenuado); }

  /* El formulario de UN tributo en 1 sola fila arriba de la tabla readonly, con los botones CTA alineados a la altura de los inputs. */
  .mgui-emitir-tributo-entrada { margin-block-end: var(--mg-space-3); align-items: flex-start; }
  .mgui-emitir-tributo-entrada .mgui-field { margin-block-end: 0; }
  .mgui-emitir-tributo-entrada__acciones {
    display: flex; flex-wrap: nowrap; gap: var(--mg-space-2); align-items: center; flex: 0 0 auto;
    margin-block-start: calc(1.75rem + var(--mg-space-1)); min-block-size: 2.5rem;
  }
  .mgui-emitir-tributo-entrada__acciones .mgui-btn .mgui-ico { inline-size: .875rem; block-size: .875rem; }
  @media (min-width: 64rem) {
    .mgui-emitir-tributo-entrada { flex-wrap: nowrap; }
  }
  .mgui-emitir-impuestos-tabla tr.mgui-fila-editando td { background: var(--mg-status-warning-suave); }

  /* Patrón transversal de barra de carga de 1 sola fila con CTA + tabla readonly con iconos de editar y eliminar.
   * Ola 13 · `align-items: flex-start` para que los subtítulos o ayudas debajo de un campo no empujen su input hacia arriba;
   * las acciones y botones directos bajan exactamente el alto del rótulo (`1.75rem + var(--mg-space-1)`) para quedar alineados con los inputs. */
  .mgui-fila-carga {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-3);
    align-items: flex-start;
    margin-block-end: var(--mg-space-3);
    padding: var(--mg-space-3);
    background: var(--mg-color-superficie);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
  }
  .mgui-fila-carga > .mgui-field,
  .mgui-fila-carga > div {
    margin-block-end: 0;
    flex: 1 1 8rem;
    min-inline-size: 0;
  }
  .mgui-fila-carga > .mgui-fila-carga__corto {
    flex: 0 1 7rem;
  }
  .mgui-fila-carga > .mgui-fila-carga__largo {
    flex: 2 1 14rem;
  }
  .mgui-fila-carga > .mgui-fila-carga__acciones {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--mg-space-2);
    align-items: center;
    flex: 0 0 auto;
    margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }
  .mgui-fila-carga > .mgui-btn {
    margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }
  @media not all and (min-width: 30.0625rem) {
    .mgui-emitir-tributo-entrada__acciones,
    .mgui-fila-carga > .mgui-fila-carga__acciones,
    .mgui-fila-carga > .mgui-btn {
      margin-block-start: 0;
    }
  }
  @media (min-width: 64rem) {
    .mgui-fila-carga { flex-wrap: nowrap; }
  }
  .mgui-table tr.mgui-fila-editando td {
    background: var(--mg-status-warning-suave);
  }

  /* ── Paso 7 · notas (izquierda) + totales (derecha) ─────────────────────────────────────────────────────────── */
  /* Como VK `.mg-mitades`: dos columnas sólo si cada una llega a 20 rem (320 px); si no, una sola. El placeholder `.mgui-mitades`
     parte 50/50 hasta 769 px y a 1024 px de ventana la tabla de totales (≈ 330 px de mínimo) desbordaba su mitad (31/10, tanda I). */
  .mgui-emitir-notas { margin: 0; }
  /* Con la clase doble: `mitades.css` va después en la hoja generada y, a igual especificidad, su 50/50 ganaba (tanda J: 634 > 616 en angosta). */
  .mgui-mitades.mgui-emitir-notas { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
  .mgui-emitir-notas__columna { display: flex; flex-direction: column; gap: var(--mg-space-2); min-inline-size: 0; }
  .mgui-emitir-notas .mgui-field { margin-block-end: 0; }
  .mgui-emitir-notas textarea.mgui-field__control { min-height: 0; }
  /* Lo que NO se imprime, teñido de advertencia (VK `.mg-notas-internas`): se distingue de un vistazo. */
  .mgui-emitir-notas-internas .mgui-field__control {
    background: var(--mg-status-warning-suave);
    border-color: var(--mg-status-warning-borde);
    border-inline-start-width: 3px;
  }
  .mgui-emitir-notas-internas .mgui-field__label { color: var(--mg-status-warning-texto); }

  /* El cuadro de totales como tabla (VK `.mg-totales`). */
  .mgui-emitir-totales { min-inline-size: 0; }
  .mgui-emitir-totales__tabla {
    inline-size: 100%;
    min-inline-size: min(20rem, 100%);
    margin-inline-start: auto;
    border-collapse: collapse;
    font-size: var(--mg-type-xs);
  }
  .mgui-emitir-totales__tabla td {
    padding: var(--mg-space-2) var(--mg-space-4);
    border-block-end: 1px solid var(--mg-color-borde);
    vertical-align: top;
  }
  .mgui-emitir-totales__tabla td:first-child { color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-totales__num { text-align: end; font-family: var(--mg-font-numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mgui-emitir-totales__tabla .mgui-emitir-suma { color: var(--mg-status-info-texto); }
  .mgui-emitir-totales__tabla .mgui-emitir-resta { color: var(--mg-status-danger-texto); }
  .mgui-emitir-totales__tabla .mgui-emitir-totales__final td {
    font-weight: var(--mg-weight-semibold);
    font-size: var(--mg-type-md);
    color: var(--mg-color-texto);
    border-block-start: 2px solid var(--mg-neutro-borde-fuerte);
    border-block-end: none;
  }
  /* El total: negrita en md (VK `mg-total--final`: md semibold); en lg el número no entraba en una mitad de 300 px ni en el teléfono. */
  .mgui-emitir-totales__tabla td.mgui-emitir-total { font-weight: var(--mg-weight-bold); font-size: var(--mg-type-md); color: var(--mg-color-texto); }
  /* Teléfono (bajo 481 px): el padding horizontal de las celdas baja a 8 px para que «Total del comprobante» y el importe convivan en 306 px. */
  @media not all and (min-width: 30.0625rem) {
    .mgui-emitir-totales__tabla td { padding-inline: var(--mg-space-2); }
    .mgui-emitir-impuestos-tabla th, .mgui-emitir-impuestos-tabla td { padding-inline: var(--mg-space-2); }
  }
  /* Nota de crédito (VK `mg-total--resta`): lo que suma pasa a restar, en rojo, total incluido. */
  .mgui-emitir-totales--resta .mgui-emitir-totales__tabla .mgui-emitir-suma,
  .mgui-emitir-totales--resta .mgui-emitir-totales__tabla td.mgui-emitir-total { color: var(--mg-status-danger-texto); }
  /* Con el detalle armado por el guion, las filas de respaldo («IVA», «Percepción…», «Total tributos», «Cargos») se esconden. */
  .mgui-emitir-totales[data-mg-totales-con-detalle="1"] .mgui-emitir-totales__respaldo { display: none; }
  /* Los acuerdos informativos del canal, adentro de «Descuentos aplicados» (VK: texto chico bajo el rótulo). */
  .mgui-emitir-totales__sub { margin-block-start: var(--mg-space-1); font-size: var(--mg-type-xs); color: var(--mg-color-texto); }
  .mgui-emitir-totales__casilla { display: inline-flex; gap: var(--mg-space-1); align-items: center; font-weight: var(--mg-weight-normal); }
  .mgui-emitir-totales__sub-nota { margin: 0; font-size: var(--mg-type-xs); }
  .mgui-emitir-totales__ayuda { margin: var(--mg-space-2) 0 0; font-size: var(--mg-type-xs); }
  .mgui-emitir-totales--card .mgui-emitir-totales__tabla { min-inline-size: 0; }

  /* ── web/r3/fuente/emitir-pagos.css ── */
  /*
   * emitir · P6 (31/10/2026) · El paso «Pagos» de «Emitir comprobante» (`web/r3-emitir-pagos.ts` + `web/r3/emitir/pagos.js`),
   * como `SeccionPago` de Valkyrie (`EmitirComprobante.jsx` L2766-2853): «Cómo paga» con el ícono del medio en línea con el
   * select (VK `.mg-medio`, gap space-2), la tabla de pagos (VK `.mg-table--sm`: texto xs, cabecera en versalitas atenuada,
   * celdas compactas, numéricos a la derecha, una fila editable por pago) con el resumen en una línea al pie (VK `<tfoot>`:
   * fondo hundido, borde superior fuerte) y el bloque «A qué se imputa» con sus chips de modo. Sólo tokens: ningún color ni
   * medida inventados. Los `[hidden]` se declaran porque `display: flex/inline-flex/inline` le gana al `hidden` del navegador.
   */
  .mgui-emitir-pagos { display: flex; flex-direction: column; gap: var(--mg-space-3); min-inline-size: 0; }
  .mgui-emitir-pagos__unico { display: none; }
  .mgui-emitir-pagos__unico > .mgui-field[hidden],
  .mgui-emitir-pagos__carga > .mgui-field[hidden] { display: none; }
  .mgui-emitir-pagos__almacen { display: none; }
  .mgui-emitir-pagos__lectura { display: inline-flex; align-items: center; gap: var(--mg-space-2); font-size: var(--mg-type-sm); }
  .mgui-emitir-pagos__fila.is-editando { background: var(--mg-color-accion-suave); }
  /* El medio con su ícono: el ícono mide lo suyo y el select toma el resto del ancho del campo. */
  .mgui-emitir-pagos__medio { display: inline-flex; align-items: center; gap: var(--mg-space-2); inline-size: 100%; min-inline-size: 0; }
  .mgui-emitir-pagos__medio > .mgui-field__control { flex: 1 1 auto; min-inline-size: 0; }
  .mgui-emitir-pagos__icono { display: inline-flex; flex: none; }
  .mgui-emitir-pagos__icono[hidden] { display: none; }
  /* La tabla de pagos: se desplaza de costado cuando no entra (VK `.mg-scroll-x`), nunca rompe la columna del paso. */
  .mgui-emitir-pagos__caja { overflow-x: auto; min-inline-size: 0; }
  .mgui-emitir-pagos__tabla { inline-size: 100%; border-collapse: collapse; font-size: var(--mg-type-xs); }
  .mgui-emitir-pagos__tabla th,
  .mgui-emitir-pagos__tabla td { padding: var(--mg-space-2); border-block-end: 1px solid var(--mg-color-borde); text-align: start; vertical-align: middle; }
  .mgui-emitir-pagos__tabla thead th {
    font-size: var(--mg-type-xs); font-weight: var(--mg-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--mg-color-texto-atenuado); white-space: nowrap;
  }
  .mgui-emitir-pagos__tabla th.mgui-nums,
  .mgui-emitir-pagos__tabla td.mgui-nums { text-align: end; }
  /* Controles compactos adentro de la tabla (el control base mide 2.5rem × 16 px, pensado para un formulario). */
  .mgui-emitir-pagos__tabla .mgui-field__control { min-block-size: 2rem; padding: var(--mg-space-1) var(--mg-space-2); font-size: var(--mg-type-sm); }
  .mgui-emitir-pagos__tabla input.mgui-nums { text-align: end; font-variant-numeric: tabular-nums; }
  .mgui-emitir-pagos__tabla td > select[hidden] { display: none; }
  /* Anchos de las columnas (orden VK: forma de pago · importe · moneda · cambio · caja/cuenta · referencia · acciones). */
  .mgui-emitir-pagos__col--medio { inline-size: 15rem; min-inline-size: 11rem; }
  .mgui-emitir-pagos__col--importe { inline-size: 8.5rem; }
  .mgui-emitir-pagos__col--moneda { inline-size: 7rem; }
  .mgui-emitir-pagos__col--cambio { inline-size: 6.5rem; }
  .mgui-emitir-pagos__col--cuenta { inline-size: 12rem; }
  .mgui-emitir-pagos__col--quitar { inline-size: 5rem; padding-inline: var(--mg-space-1); text-align: end; white-space: nowrap; }
  .mgui-emitir-pagos__quitar {
    min-inline-size: 2rem; min-block-size: 2rem; padding: 0 var(--mg-space-1);
    border: 1px solid var(--mg-status-danger-borde); background: var(--mg-status-danger-suave); color: var(--mg-status-danger-texto);
  }
  .mgui-emitir-pagos__quitar:hover { background: var(--mg-status-danger-borde); color: var(--mg-status-danger-texto); }
  .mgui-emitir-pagos__svg { inline-size: .875rem; block-size: .875rem; flex: none; }
  .mgui-emitir-pagos__nada { display: inline-block; padding-inline: var(--mg-space-2); }
  .mgui-emitir-pagos__nada[hidden] { display: none; }
  /* El resumen en una línea (VK `tfoot td`): fondo hundido, borde superior fuerte; las partes se encienden según el caso. */
  .mgui-emitir-pagos__resumen {
    font-size: var(--mg-type-sm); font-weight: var(--mg-weight-normal); color: var(--mg-color-texto);
    background: var(--mg-color-fondo); border-block-start: 2px solid var(--mg-color-borde); border-block-end: 0;
  }
  .mgui-emitir-pagos__resumen[hidden] { display: none; }
  .mgui-emitir-pagos__parte { display: inline; white-space: nowrap; }
  .mgui-emitir-pagos__parte[hidden] { display: none; }
  .mgui-emitir-pagos__parte--falta { color: var(--mg-status-danger-texto); }
  .mgui-emitir-pagos__parte--muted { color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-pagos__parte--ok { color: var(--mg-status-complete-texto); }
  .mgui-emitir-pagos__acciones .mgui-chip__svg { inline-size: .875rem; block-size: .875rem; }
  /* «A qué se imputa» (nota de crédito): los chips de modo sin el margen de formulario, la tabla con scroll y el importe acotado. */
  .mgui-emitir-imputacion__modo.mgui-eleccion { margin: 0; }
  .mgui-emitir-imputacion__caja { overflow-x: auto; min-inline-size: 0; }
  .mgui-emitir-imputacion__tabla .mgui-field__control {
    inline-size: 9rem; max-inline-size: 100%; min-block-size: 2rem; padding: var(--mg-space-1) var(--mg-space-2);
    font-size: var(--mg-type-sm); text-align: end;
  }
  .mgui-emitir-imputacion__fecha { white-space: nowrap; }
  .mgui-emitir-imputacion__pie--exceso,
  .mgui-emitir-imputacion__excedente { color: var(--mg-status-danger-texto); }

  /* ── web/r3/fuente/emitir-productos.css ── */
  /*
   * P4 (31/10/2026) · paso 4 «Productos y conceptos» de `/app/emitir`, como el paso 3 de Valkyrie (`SeccionConceptos`,
   * `bo.valkyrie.ar/client/src/pages/EmitirComprobante.jsx` L1812-2557; medidas de `styles/mg/mg-admin.css` L3019-3126).
   * Hoja PROPIA del paso (patrón `emitir-recibo.css`): el formulario de carga (`.mgui-carga*`), la línea de resumen y lo que la tabla
   * de LECTURA (`.mgui-tabla-items--lectura`) cambia respecto de la tabla rica de `emitir.css` (texto de 12 px, miniatura de 86,
   * columnas condicionales). Sólo tokens: ningún color ni medida inventados.
   */

  /* ── El formulario de carga: la grilla envolvente del emisor (`.mgui-emisor-grid`) con los cinco campos ──
   * Ola 13 · `align-items: flex-start` para que el subtítulo de stock (`Hay X en stock`) o los chips de precio por categoría
   * debajo de Precio / Cantidad no empujen esos inputs hacia arriba respecto de Código, Descripción, Descuento o IVA. */
  .mgui-carga { margin-block-end: var(--mg-space-2); align-items: flex-start; }
  .mgui-carga > .mgui-field[hidden],
  .mgui-carga > .mgui-carga__casilla[hidden],
  .mgui-carga > .mgui-carga__precio-cant > .mgui-field[hidden] { display: none; }
  /* El rótulo con el control a la derecha (VK `mg-flex mg-items-center mg-justify-between`): el chip no le come ancho al input. */
  .mgui-carga .mgui-field__label--con-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); min-block-size: 1.75rem; }
  .mgui-carga .mgui-field__label--con-chip .mgui-chip { flex: none; min-block-size: 1.5rem; padding-block: 0; }
  .mgui-carga__modos { display: inline-flex; gap: var(--mg-space-1); align-items: center; }
  .mgui-carga__modos[hidden], .mgui-carga [data-mg-carga-rotulo-producto][hidden], .mgui-carga__hay[hidden] { display: none; }
  .mgui-carga__rotulo-chip { display: inline-flex; gap: var(--mg-space-1); align-items: center; }
  /* Código corto (VK `size={10}`: lo que entra es el título con su lector), Descripción se queda con el sobrante, Precio mide «9.999.999,99». */
  .mgui-carga__codigo .mgui-field__control { inline-size: 100%; }
  .mgui-carga .mgui-field--auto .mgui-field__control { inline-size: auto; max-inline-size: 100%; }
  .mgui-carga__precio-cant { display: flex; gap: var(--mg-space-1); align-items: flex-start; flex: 0 1 auto; }
  .mgui-carga__precio-cant > .mgui-field { margin-block-end: 0; }
  .mgui-carga__hay { font-size: var(--mg-type-xs); }
  .mgui-carga__descuento .mgui-field__control { inline-size: auto; min-inline-size: 5rem; max-inline-size: 100%; }
  .mgui-carga__casilla {
    display: inline-flex; align-items: center; gap: var(--mg-space-1);
    margin: 0; margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem; font-size: var(--mg-type-xs); align-self: flex-start;
  }
  .mgui-carga__casilla[hidden] { display: none; }
  .mgui-carga__lector { inline-size: 1.75rem; block-size: 1.75rem; }
  /* Los chips de precio por categoría (propio de MG) debajo del campo Precio. */
  .mgui-carga .mgui-chips-precio { margin-block-start: var(--mg-space-1); }

  /* El aviso de excedente (VK `AlertTriangle` + frase, L2282-2287), el chip NUEVO con su frase, el alta de lo nuevo. */
  .mgui-carga__aviso { display: flex; gap: var(--mg-space-2); align-items: center; flex-wrap: wrap; margin: var(--mg-space-1) 0 0; font-size: var(--mg-type-xs); }
  .mgui-carga__aviso[hidden] { display: none; }
  .mgui-carga__aviso-ico { color: var(--mg-status-warning-texto); }
  .mgui-carga__nuevo { display: flex; gap: var(--mg-space-2); align-items: center; flex-wrap: wrap; margin: var(--mg-space-1) 0 0; font-size: var(--mg-type-xs); }
  .mgui-carga__nuevo[hidden] { display: none; }
  .mgui-carga__alta { margin-block-start: var(--mg-space-2); align-items: flex-start; }
  .mgui-carga__alta[hidden] { display: none; }
  .mgui-carga__avanzado { margin-block-start: var(--mg-space-2); }
  .mgui-carga__avanzado > summary { cursor: pointer; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); padding-block: var(--mg-space-1); }
  .mgui-carga__avanzado > .mgui-emisor-grid { margin-block-start: var(--mg-space-2); }
  .mgui-carga__error { margin: var(--mg-space-1) 0 0; }
  .mgui-carga__error[hidden] { display: none; }
  .mgui-carga__acciones { margin-block-start: var(--mg-space-2); }
  .mgui-carga__acciones .mgui-btn--primary .mgui-ico { background-color: currentColor; }
  .mgui-carga__mas { display: inline-block; font-size: var(--mg-type-xs); }
  .mgui-carga__mas > summary { cursor: pointer; }
  .mgui-carga__mas .mgui-cluster { display: inline-flex; gap: var(--mg-space-2); flex-wrap: wrap; margin-inline-start: var(--mg-space-2); }
  .mgui-carga__sugerencias { margin-block-start: var(--mg-space-1); }

  /* ── La línea de resumen sobre la tabla (VK L2404-2414): «Productos: N (U unidades) · Conceptos: N» · finales/netos · stock ── */
  .mgui-carga__resumen { display: flex; gap: var(--mg-space-3); align-items: center; flex-wrap: wrap; margin-block: var(--mg-space-3) var(--mg-space-2); font-size: var(--mg-type-sm); }
  .mgui-carga__resumen[hidden] { display: none; }
  .mgui-carga__resumen-item[hidden] { display: none; }
  .mgui-carga__resumen b { font-weight: var(--mg-weight-semibold); }
  .mgui-carga__vista { display: inline-flex; gap: var(--mg-space-1); align-items: center; flex-wrap: wrap; }
  .mgui-carga__vista .mgui-chip { min-block-size: 1.5rem; padding-block: 0; }
  .mgui-carga__vista-leyenda { font-size: 10px; }
  .mgui-emitir-descarga-stock { display: inline-flex; align-items: center; gap: var(--mg-space-1); margin: 0; font-size: var(--mg-type-sm); }
  .mgui-emitir-descarga-stock[hidden] { display: none; }

  /* ── La tabla de LECTURA: texto de 12 px (VK `mg-table--sm`), celdas de 4 px, la miniatura de 86 ── */
  .mgui-tabla-items-caja[hidden] { display: none; }
  .mgui-tabla-items--lectura tbody td { font-size: var(--mg-type-xs); padding-block: var(--mg-space-1); vertical-align: top; }
  .mgui-tabla-items--lectura thead th { font-size: var(--mg-type-xs); }
  .mgui-tabla-items--lectura .mgui-col-concepto { min-width: 12rem; }
  .mgui-tabla-items--lectura .mgui-tabla-items__linea { display: flex; gap: var(--mg-space-1); align-items: center; flex-wrap: wrap; }
  .mgui-tabla-items--lectura .mgui-tabla-items__descripcion { font-size: var(--mg-type-sm); }
  .mgui-tabla-items--lectura .mgui-tabla-items__concepto-chips { display: inline-flex; min-height: 0; }
  .mgui-tabla-items--lectura .mgui-tabla-items__sec { display: block; font-size: 10px; }
  .mgui-tabla-items--lectura .mgui-tabla-items__sec:empty { display: none; }
  .mgui-tabla-items--lectura .mgui-tabla-items__sub { display: block; font-size: 10px; color: var(--mg-color-texto-atenuado); font-weight: var(--mg-weight-normal); }
  .mgui-tabla-items--lectura .mgui-tabla-items__sub[hidden] { display: none; }
  .mgui-tabla-items--lectura :is(.mgui-col-cant, .mgui-col-precio, .mgui-col-desc, .mgui-col-imp-doble, .mgui-col-total) { text-align: end; font-variant-numeric: tabular-nums; }
  .mgui-tabla-items--lectura thead th.mgui-col-desc { text-align: end; }
  .mgui-tabla-items--lectura .mgui-col-imp-doble .mgui-emitir-renglon__dato-vacio[hidden] { display: none; }
  /* `emitir.css` le da `display: flex` al dato (IVA / interno) dentro de la celda doble: el `[hidden]` del UA perdía y el rótulo
     «Interno» se veía sin valor. */
  .mgui-tabla-items--lectura .mgui-col-imp-doble .mgui-emitir-renglon__dato[hidden] { display: none; }
  .mgui-tabla-items--lectura .mgui-col-foto .mgui-tabla-items__thumb,
  .mgui-tabla-items--lectura .mgui-col-foto .mgui-miniatura { width: 86px; height: 86px; }
  /* «Descuento» y «Precio con descuento» sólo cuando algún renglón descuenta (VK L2439-2445). */
  .mgui-tabla-items--lectura[data-mg-hay-descuentos="0"] :is(.mgui-col-desc, .mgui-col-precio-desc) { display: none; }
  /* La fila que se trajo con el lápiz (VK `mg-fila-editando`: el tono suave de la acción). */
  .mgui-tabla-items--lectura .mgui-fila-editando > td { background: var(--mg-color-accion-suave); }

  /* ── Botón-ícono 29 × 29 (VK `.mg-btn-icon.mg-btn--sm`): lápiz secundario arriba, tacho de peligro abajo ── */
  .mgui-btn--icono { inline-size: 1.8125rem; block-size: 1.8125rem; min-height: 0; padding: 0; flex: none; }
  .mgui-btn--icono .mgui-ico { background-color: currentColor; }
  .mgui-tabla-items .mgui-col-acciones__pila .mgui-btn--icono { padding-inline: 0; align-self: center; }

  /* ── Chips de dominio sin regla propia hasta hoy (caían al gris base): tonos de estado del framework ── */
  .mgui-emitir-chip--otro-deposito { background: var(--mg-status-info-suave); color: var(--mg-status-info-texto); border-color: var(--mg-status-info-borde); }
  .mgui-emitir-chip--bloqueado { background: var(--mg-status-danger-suave); color: var(--mg-status-danger-texto); border-color: var(--mg-status-danger-borde); }
  .mgui-emitir-chip--primera-compra { background: var(--mg-status-complete-suave); color: var(--mg-status-complete-texto); border-color: var(--mg-status-complete-borde); }
  /* El renglón es un concepto del catálogo (VK `mg-chip--consulta` «concepto»). */
  .mgui-emitir-chip--concepto { background: var(--mg-status-info-suave); color: var(--mg-status-info-texto); border-color: var(--mg-status-info-borde); }

  /* ── La lupa en la línea del título «Descripción» (VK `Search` / `Loader2` girando mientras busca) ── */
  .mgui-emitir-lupa { display: inline-flex; align-items: center; color: var(--mg-color-texto-atenuado); flex: none; }
  .mgui-emitir-lupa .mgui-emitir-lupa__girando { display: none; }
  .mgui-emitir-lupa.is-buscando .mgui-emitir-lupa__quieta { display: none; }
  /* Gira con los `@keyframes mgui-girar` y la duración del spinner del framework (`--mg-spinner-duration`, `boton.css`/`carga.css`):
   * con movimiento reducido el token la vuelve más lenta (R3 no la detiene: la prueba K-8 del generador lo vigila). */
  .mgui-emitir-lupa.is-buscando .mgui-emitir-lupa__girando { display: inline-block; animation: mgui-girar var(--mg-spinner-duration) linear infinite; }

  /* ── «Calculando impuestos…» bajo la tabla mientras la previa no contestó (VK `EC.jsx:2551`) ── */
  .mgui-emitir-calculando { margin: var(--mg-space-1) 0 0; font-size: var(--mg-type-xs); }
  .mgui-emitir-calculando[hidden] { display: none; }

  /* ── El resumen «Productos: N · Conceptos: N» a la derecha del título del paso ── */
  .mgui-emitir-resumen-paso4:empty { display: none; }
  .mgui-emitir-resumen-paso4 b { font-weight: var(--mg-weight-semibold); }

  /* ── Sólo mercadería (remito, traslado; VK `soloMercaderia`): sin Precio, Desc., Impuestos ni Total ── */
  .mgui-tabla-items[data-mg-solo-mercaderia="1"] :is(.mgui-col-precio, .mgui-col-desc, .mgui-col-imp-doble, .mgui-col-total) { display: none; }

  /* ── El popover de conceptos del catálogo agrupados por grupo (VK L2311-2326) ── */
  .mgui-emitir-conceptos-popover {
    display: grid; gap: var(--mg-space-2);
    margin: var(--mg-space-1) 0 var(--mg-space-2);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-fondo-denso);
  }
  .mgui-emitir-conceptos-popover[hidden] { display: none; }
  .mgui-emitir-conceptos-popover__grupo { display: grid; gap: var(--mg-space-1); }
  .mgui-emitir-conceptos-popover__titulo { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-conceptos-popover__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
  .mgui-emitir-conceptos-popover__lista .mgui-emitir-chip { cursor: pointer; border-radius: 999px; padding-inline: var(--mg-space-2); min-block-size: 1.5rem; }
  .mgui-emitir-conceptos-popover__lista .mgui-emitir-chip:hover { filter: brightness(0.97); }
  .mgui-emitir-conceptos-popover__iva { font-size: 10px; margin-inline-start: var(--mg-space-1); }

  /* ── El panel de sugerencias con lo que muestra la tabla de resultados de VK: foto, código de barras, serie, grupo fiscal ── */
  .mgui-renglon-sugerencias__item .mgui-renglon-sugerencias__extra {
    grid-column: 1 / -1; grid-row: 3 / 4;
    font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado);
    font-variant-numeric: tabular-nums;
  }
  .mgui-renglon-sugerencias__item .mgui-emitir-chip { grid-row: 4 / 5; }
  .mgui-renglon-sugerencias__item .mgui-miniatura {
    grid-column: 1 / 2; grid-row: 1 / 3; align-self: start;
    display: inline-block; inline-size: 2.25rem; block-size: 2.25rem; margin-inline-end: var(--mg-space-2);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-sm); object-fit: cover;
  }
  .mgui-renglon-sugerencias__item.mgui-renglon-sugerencias__item--con-foto { grid-template-columns: auto 1fr auto; }
  .mgui-renglon-sugerencias__item--con-foto .mgui-renglon-sugerencias__nombre,
  .mgui-renglon-sugerencias__item--con-foto .mgui-renglon-sugerencias__sku { grid-column: 2 / 3; }
  .mgui-renglon-sugerencias__item--con-foto .mgui-renglon-sugerencias__precio,
  .mgui-renglon-sugerencias__item--con-foto .mgui-renglon-sugerencias__stock { grid-column: 3 / 4; }
  .mgui-renglon-sugerencias__item--con-foto .mgui-renglon-sugerencias__extra { grid-column: 2 / -1; }

  /* ── Celular (390 px): el formulario envuelve campo por campo; la tabla se desplaza dentro de su caja ── */
  @media not all and (min-width: 481px) {
    .mgui-carga > .mgui-field, .mgui-carga__precio-cant, .mgui-carga__precio-cant > .mgui-field { flex: 1 1 100%; inline-size: 100%; }
    .mgui-carga .mgui-field--auto .mgui-field__control, .mgui-carga__descuento .mgui-field__control { inline-size: 100%; }
    .mgui-carga__precio-cant { flex-wrap: wrap; }
    .mgui-tabla-items-caja { max-inline-size: 100%; }
  }

  /* ── web/r3/fuente/emitir-recibo.css ── */
  /*
   * RECIBO-F1 → emitir · recibo (31/10/2026) · La sección «Valores recibidos» del recibo en «Emitir comprobante»
   * (`web/r3-emitir-recibo.ts` + `web/r3/emitir/recibo.js`), como `SeccionPago` + `SeccionImputacion` de Valkyrie: el formulario
   * de UN valor (la grilla del emisor), la tabla de lo cargado (reusa `.mgui-emitir-pagos__tabla`/`__resumen` de `emitir-pagos.css`:
   * texto xs, cabecera en versalitas, numéricos a la derecha, el pie hundido), el almacén `recibo_<i>_*` (a la vista sólo sin guion)
   * y el bloque de imputación (reusa `.mgui-emitir-imputacion__*`). Sólo tokens: ningún color ni medida inventados. Los `[hidden]`
   * se declaran porque `display: flex/contents/grid` le gana al `hidden` del navegador (la misma lección de `.mgui-emitir-seccion`).
   */
  .mgui-emitir-cobro { display: flex; flex-direction: column; gap: var(--mg-space-3); min-inline-size: 0; }
  /* A · el formulario de un valor: la grilla que envuelve, alineada por abajo (VK `mg-emisor-grid`). */
  .mgui-emitir-cobro__carga { display: flex; flex-direction: column; gap: var(--mg-space-2); min-inline-size: 0; }
  .mgui-emitir-cobro__carga[hidden] { display: none; }
  .mgui-emitir-cobro__grilla { align-items: flex-start; }
  .mgui-emitir-cobro__grilla > .mgui-field[hidden] { display: none; }
  /* Los sub-campos del cheque y de la retención viven dentro de la grilla como si fueran campos sueltos. */
  .mgui-emitir-cobro__sub { display: contents; }
  .mgui-emitir-cobro__sub[hidden] { display: none; }
  /* «Agregar» (+), «Cancelar» y el error en el lugar, en la misma línea, al pie de la grilla (VK: el botón con el chip). */
  .mgui-emitir-cobro__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); flex: 1 1 100%; }
  .mgui-emitir-cobro__acciones > [hidden] { display: none; }
  .mgui-emitir-cobro__error { font-size: var(--mg-type-xs); color: var(--mg-status-danger-texto); }
  /* B · la tabla de lo cargado: forma de pago · importe · caja/cuenta/referencia · acciones. */
  .mgui-emitir-cobro__tabla-caja[hidden] { display: none; }
  .mgui-emitir-cobro__col--medio { inline-size: 14rem; min-inline-size: 11rem; }
  .mgui-emitir-cobro__col--importe { inline-size: 9rem; }
  .mgui-emitir-cobro__col--acciones { inline-size: 4.5rem; padding-inline: 0; text-align: end; white-space: nowrap; }
  .mgui-emitir-cobro__medio-celda { display: inline-flex; align-items: center; gap: var(--mg-space-2); }
  .mgui-emitir-cobro__accion { min-block-size: 1.75rem; padding: 0 var(--mg-space-1); color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-cobro__accion:hover { color: var(--mg-color-texto); }
  .mgui-emitir-cobro__fila.is-editando > td { background: var(--mg-color-accion-suave); }
  .mgui-emitir-cobro__total { font-weight: var(--mg-weight-semibold); }
  /* C · el almacén (los renglones del contrato): a la vista sólo sin guion. */
  .mgui-emitir-cobro__valores { display: flex; flex-direction: column; gap: var(--mg-space-3); min-inline-size: 0; }
  .mgui-emitir-cobro__valores[hidden] { display: none; }
  .mgui-emitir-cobro__valor { margin: 0; min-inline-size: 0; }
  .mgui-emitir-cobro__valor[hidden] { display: none; }
  /* D · «A qué se imputa»: la caja con su leyenda; la tabla reusa `.mgui-emitir-imputacion__tabla` (importe acotado, scroll). */
  .mgui-emitir-cobro__imputacion {
    display: flex; flex-direction: column; gap: var(--mg-space-2); min-inline-size: 0;
    margin: 0; padding: var(--mg-space-3) var(--mg-space-4); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
  }
  .mgui-emitir-cobro__imputacion > .mgui-emitir-leyenda { padding: 0 var(--mg-space-1); }
  .mgui-emitir-cobro__imputacion .mgui-emitir-imputacion__tabla input.mgui-field__control { inline-size: 9rem; max-inline-size: 100%; text-align: end; }
  /* En una pantalla angosta (teléfono) los anchos fijos de la tabla dejan de serlo: cada columna toma lo que entra y el detalle
   * envuelve, así la tabla cabe en los 358 px del paso sin desplazarse (la caja con scroll queda como red). */
  @media not all and (min-width: 481px) {
    .mgui-emitir-cobro__col--medio { inline-size: auto; min-inline-size: 0; }
    .mgui-emitir-cobro__col--importe { inline-size: auto; white-space: nowrap; }
    .mgui-emitir-cobro__col--detalle { overflow-wrap: anywhere; }
    .mgui-emitir-cobro__col--acciones { inline-size: auto; }
    .mgui-emitir-cobro__tabla th, .mgui-emitir-cobro__tabla td { padding-inline: var(--mg-space-1); }
    /* El resumen en una línea pasa a dos o tres: cada parte envuelve en vez de desplazar la caja. */
    .mgui-emitir-cobro__tabla .mgui-emitir-pagos__parte { white-space: normal; }
  }

  /* ── web/r3/fuente/emitir.css ── */
  /*
   * A8 · «Emitir comprobante» (`/app/emitir`), en la biblioteca R3 desde F-V1 (antes era la hoja aparte
   * `/r3/emitir/emitir.css` con clases `mg-emitir-*`). La CSP no admite `style=`: la disposición de los tipos, los renglones,
   * los chips, los totales y el pie de acciones llega por acá. Sólo tokens: ningún color ni medida inventados.
   */
  .mgui-emitir-leyenda { font-weight: var(--mg-weight-semibold); }

  /*
   * ola 31 · descripción del tipo elegido · bajo el conjunto de chips del paso 1 vive un bloque por tipo
   * de comprobante con la frase descriptiva («qué es») y la lista de datos que pide (`pide`). Sólo se ve
   * el bloque del tipo seleccionado: el guion de `emitir.js` ya togglea `is-elegido` en todo `[data-mg-tipo]`
   * (`armarSecciones` en `web/r3/emitir/emitir.js`), así que acá sólo pintamos el estado visual.
   *   · sin elegir  → oculto (`display: none`)
   *   · elegido     → bloque con texto principal + línea atenuada con «lo que pide»
   * El contenedor usa `aria-live="polite"` en el HTML; el bloque elegido es el único mostrado y los lectores
   * de pantalla anuncian el cambio al elegir otro tipo.
   */
  .mgui-emitir-tipo-descripciones { margin-block-start: var(--mg-space-2); display: grid; }
  .mgui-emitir-tipo-descripcion {
    display: none;
    margin: 0;
    padding: var(--mg-space-2) 0;
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    line-height: var(--mg-leading-base);
  }
  .mgui-emitir-tipo-descripcion.is-elegido { display: grid; gap: var(--mg-space-1); }
  .mgui-emitir-tipo-descripcion__texto { color: var(--mg-color-texto); }
  .mgui-emitir-tipo-descripcion__pide { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-xs); }
  .mgui-emitir-tipo-descripcion__pide::before { content: "Pide: "; font-weight: var(--mg-weight-semibold); }

  .mgui-emitir-tipos { display: grid; gap: var(--mg-space-2); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  /* ola 35b · las capas HIJAS del paso consumen los VELOS del vidrio (`--mg-vidrio-velo-superficie` / `-hundido`,
   * generador: temas.js + core/emitir.js): en los temas sólidos son la superficie y el fondo de siempre (no-op); en los
   * cuatro temas cristal, un velo translúcido sin backdrop-filter propio (el blur lo aporta el `.mgui-emitir-paso`). Lo que
   * se ESCRIBE encima (controles, desplegables) toma `--mg-vidrio-fondo-denso`, como los campos del framework. */
  .mgui-emitir-tipo {
    display: grid; gap: var(--mg-space-1); padding: var(--mg-space-3); border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md); cursor: pointer; background: var(--mg-vidrio-velo-superficie);
  }
  .mgui-emitir-tipo:focus-within { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-emitir-tipo.is-elegido, .mgui-emitir-tipo:has(input:checked) { border-color: var(--mg-color-accion); background: var(--mg-color-accion-suave); }
  .mgui-emitir-tipo__nombre { font-weight: var(--mg-weight-semibold); }
  .mgui-emitir-tipo__texto, .mgui-emitir-tipo__pide { font-size: var(--mg-type-sm); }
  /* P4 (31/10/2026, ola F) · el renglón plano legado (`.mgui-emitir-renglon*`: grilla de 7 columnas, info, quitar, avanzado
     por renglón) se retiró: el paso 4 es formulario de carga + tabla de lectura (`emitir-productos.css`). Quedan sólo los
     datos de impuestos (`__dato*`), que la celda «Impuestos» de la tabla sigue usando. */
  .mgui-emitir-renglon__dato { display: inline-flex; gap: var(--mg-space-1); align-items: baseline; }
  .mgui-emitir-renglon__dato-rotulo { color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-renglon__dato-valor { font-weight: var(--mg-weight-semibold); font-variant-numeric: tabular-nums; }

  /* EMI-G · totalizador al pie del paso 4 (ex sólo en paso 7): subtotal + IVA desglosado por alícuota + total del paso.
     No sustituye al totalizador global `[data-mg-totales]`; vive en el paso 4 como «cierre» del armado del comprobante. */
  .mgui-emitir-productos-pie {
    display: none;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3); margin-block-start: var(--mg-space-2);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-velo-hundido);
  }
  .mgui-emitir-productos-pie__dl {
    display: grid; grid-template-columns: 1fr auto; gap: var(--mg-space-1) var(--mg-space-4); margin: 0;
  }
  .mgui-emitir-productos-pie__dl dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
  .mgui-emitir-productos-pie__iva { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mg-space-1); }
  .mgui-emitir-productos-pie__iva li {
    display: grid; grid-template-columns: 1fr auto; gap: var(--mg-space-1) var(--mg-space-4);
    font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado);
  }
  .mgui-emitir-productos-pie__iva li .mgui-emitir-mono { color: var(--mg-color-texto); }
  .mgui-emitir-productos-pie__total {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--mg-space-4); margin: 0;
    padding-block-start: var(--mg-space-2); border-block-start: 1px solid var(--mg-color-borde);
    font-weight: var(--mg-weight-semibold);
  }

  /* EMI-B · tributos manuales (paso 4 · Impuestos): un repeater similar al de los conceptos. */
  .mgui-emitir-tributos {
    display: grid; gap: var(--mg-space-3); padding: var(--mg-space-3); border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md); margin: 0;
  }
  .mgui-emitir-tributos > .mgui-emitir-leyenda { font-weight: var(--mg-weight-semibold); }

  /*
   * ola 33 · agrupador «Compra como» (D) alineado al patrón de «Tributos manuales»: padding + borde fino + radio
   * medio, con el legend adentro, arriba. Antes el fieldset no tenía CSS propio y quedaba sin caja visible.
   */
  .mgui-emitir-compra-como {
    display: grid; gap: var(--mg-space-2);
    margin: 0; padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
  }

  /*
   * ola 33 · caja de impuestos unificada (tabla con H3 arriba) alineada al patrón de tributos: padding, borde,
   * radio y una pizca de margen vertical para separarse del párrafo que la precede.
   */
  .mgui-emitir-impuestos-unificada {
    margin-block-start: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    display: grid; gap: var(--mg-space-2);
  }
  .mgui-emitir-tributo {
    display: grid; gap: var(--mg-space-2); align-items: start; padding-bottom: var(--mg-space-3);
    border-bottom: 1px solid var(--mg-color-borde); grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 761px) {
    .mgui-emitir-tributo {
      grid-template-columns: minmax(10rem, 1.2fr) minmax(10rem, 2fr) minmax(6rem, 0.8fr) minmax(5rem, 0.6fr) minmax(7rem, 0.9fr);
    }
  }

  .mgui-emitir-chip {
    display: inline-block; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-xl); font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold); border: 1px solid var(--mg-color-borde);
  }
  .mgui-emitir-chip--nuevo { background: var(--mg-status-info-suave); color: var(--mg-status-info-texto); border-color: var(--mg-status-info-borde); }
  .mgui-emitir-chip--en-stock { background: var(--mg-status-complete-suave); color: var(--mg-status-complete-texto); border-color: var(--mg-status-complete-borde); }
  .mgui-emitir-chip--preventa { background: var(--mg-status-warning-suave); color: var(--mg-status-warning-texto); border-color: var(--mg-status-warning-borde); }
  .mgui-emitir-casilla .mgui-field__label { display: flex; gap: var(--mg-space-2); align-items: center; }
  .mgui-emitir-opciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-2) var(--mg-space-4); }
  .mgui-emitir-con-boton { display: grid; gap: var(--mg-space-2); align-content: start; }
  .mgui-emitir-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mg-space-1); }
  .mgui-emitir-letra { font-weight: var(--mg-weight-semibold); min-height: 1.2rem; margin: 0; }
  .mgui-emitir-totales dl { display: grid; grid-template-columns: auto auto; gap: var(--mg-space-1) var(--mg-space-4); justify-content: end; margin: 0; }
  .mgui-emitir-totales dt { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); align-self: baseline; }
  .mgui-emitir-totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mg-font-numeric); color: var(--mg-color-texto); align-self: baseline; }
  .mgui-emitir-resta { color: var(--mg-status-danger-texto); }
  .mgui-emitir-suma { color: var(--mg-status-complete-texto); }
  .mgui-emitir-total { font-weight: var(--mg-weight-bold); font-size: var(--mg-type-lg); font-family: var(--mg-font-numeric); font-variant-numeric: tabular-nums; color: var(--mg-color-texto); }
  /* porte VK · chip del % de descuento al lado del rótulo (fondo warning-suave + texto warning): hidden por omisión y se oculta
     cuando el guion no la puebla (`:empty`). Vive dentro del `<dt>`, inline, sin romper la grilla de dos columnas. */
  .mgui-emitir-totales__chip-descuento {
    display: inline-flex; align-items: center; margin-inline-start: var(--mg-space-2);
    padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-xl);
    background: var(--mg-status-warning-suave); color: var(--mg-status-warning-texto);
    border: 1px solid var(--mg-status-warning-borde);
    font-size: var(--mg-type-xs); font-weight: var(--mg-weight-semibold);
    font-family: var(--mg-font-numeric); font-variant-numeric: tabular-nums;
  }
  .mgui-emitir-totales__chip-descuento:empty { display: none; }
  /* porte VK · «· sobre $X» inline, al lado del rótulo del impuesto. Más chico y atenuado. */
  .mgui-emitir-totales__base {
    margin-inline-start: var(--mg-space-1); color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs); font-family: var(--mg-font-numeric); font-variant-numeric: tabular-nums;
    font-weight: var(--mg-weight-normal);
  }
  /* porte VK · «Impuestos, todos juntos»: fila agregada (sólo con >1 impuestos), tamaño xs y estilo italic como la VK. */
  .mgui-emitir-totales__suma-grupo { font-size: var(--mg-type-xs); font-style: italic; }
  /* porte VK · «Total del comprobante»: fila final con separador fuerte arriba, rótulo en negrita y md. */
  .mgui-emitir-totales__final-rotulo {
    font-weight: var(--mg-weight-semibold); font-size: var(--mg-type-md); color: var(--mg-color-texto);
  }
  .mgui-emitir-totales__final-rotulo,
  .mgui-emitir-totales dd.mgui-emitir-total {
    border-block-start: 2px solid var(--mg-color-borde);
    padding-block-start: var(--mg-space-2);
    margin-block-start: var(--mg-space-1);
  }
  .mgui-emitir-acciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); align-items: center; }
  .mgui-emitir-video { width: 100%; max-height: 60vh; border-radius: var(--mg-radius-md); background: var(--mg-color-texto); }

  /* F-V1 · las secciones, la vista previa del documento y el pie de acciones (desde el 31/10/2026 fluye, ya no es fijo). */
  .mgui-emitir-seccion { min-inline-size: 0; }
  .mgui-emitir-para { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-emitir-buscador { display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-resultados:empty { display: none; }
  /* porte-vk · O10 · fila de botones top al nivel del campo de búsqueda del cliente (como VK: siempre a la vista). */
  .mgui-emitir-buscador-acciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); align-items: center; }
  /* porte-vk · O15 (fix 2) + O21 · input de búsqueda + botones en MISMA FILA (como VK: `[campo flex-grow] [botones]`
   * al ras del borde derecho). El input crece hasta llenar la fila; los botones viajan a la derecha. En móvil
   * (`flex-wrap`) los botones caen debajo. O21: los botones «Subir constancia PDF» y «Limpiar» van centrados
   * verticalmente al INPUT (no al wrapper del campo con label/help): se alinean con la línea del `<input>`
   * usando el mismo `min-height` del control (2.5rem) y un margin-top equivalente al label (type-sm). */
  .mgui-emitir-buscador-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mg-space-2) var(--mg-space-3);
  }
  .mgui-emitir-buscador-fila > .mgui-field { flex: 1 1 16rem; min-inline-size: 0; margin-block-end: 0; }
  .mgui-emitir-buscador-fila > .mgui-emitir-buscador-acciones { flex: 0 0 auto; }
  /* O21 · empujar los botones hacia abajo lo justo para que su centro vertical coincida con el centro
   * del input de búsqueda: el label (`.mgui-field__label`, type-sm) ocupa ~1.25rem + 0.25rem de gap. */
  .mgui-emitir-buscador-fila > .mgui-emitir-buscador-acciones {
    margin-block-start: calc(var(--mg-type-sm) * 1.4 + var(--mg-space-1));
    min-block-size: 2.5rem;
    align-items: center;
  }
  /* porte-vk · O10 · rótulo del campo Nro doc con chip ARCA a la derecha (al estilo de VK l.1083-1092: el chip no
   * se mete al lado del input porque le come los dígitos; va EN el rótulo, al ras de la derecha, en la misma línea). */
  .mgui-field__label--con-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); }
  .mgui-field__label--con-chip > .mgui-chip { flex-shrink: 0; }
  /*
   * emitir · 31/10/2026 (frente D, pedido del titular): el pie «Emitir» DEJA de ser sticky. Antes se pegaba al fondo de la
   * ventana (`position: sticky; bottom: 0` + sombra) y ocupaba pantalla en todos los pasos; ahora fluye como una sección más,
   * con el mismo contorno que las cards de los pasos (`.mgui-emitir-paso`: borde del color de la acción, radio medio) y el mismo
   * respiro interior que el cuerpo de un paso. Sin alto reservado, sin sombra, sin `z-index`.
   */
  .mgui-emitir-pie {
    position: static; display: flex; flex-wrap: wrap; gap: var(--mg-space-2); align-items: center;
    padding: var(--mg-space-3) var(--mg-space-6) var(--mg-space-4); border: 1px solid var(--mg-color-accion); border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-emitir-pie__letra { font-weight: var(--mg-weight-semibold); }
  .mgui-emitir-diseno { margin: 0; font-size: var(--mg-type-sm); }
  .mgui-emitir-resultado__datos { display: grid; grid-template-columns: auto 1fr; gap: var(--mg-space-1) var(--mg-space-4); margin: 0; }
  .mgui-emitir-resultado__datos dd { margin: 0; }
  .mgui-emitir { display: flex; flex-direction: column; gap: var(--mg-space-4); }
  .mgui-emitir-caja { padding: var(--mg-space-4); gap: var(--mg-space-3); }

  /* O6-UX · punto 4 · el botón flotante «usar celular como lector»: va a la derecha de la pantalla,
   * ancho acotado para que no gaste línea entera. En móviles angostos (≤480px) cae a su lugar
   * natural, pero sigue alineado al final por si convive con otros bloques. */
  .mgui-emitir-lector-flot {
    display: flex; justify-content: flex-end; align-items: flex-start;
    width: 100%;
    margin-block-end: var(--mg-space-2);
  }
  .mgui-emitir-lector-flot > * {
    width: max-content; max-width: 240px;
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--mg-space-1);
  }
  .mgui-emitir-lector-flot__nota { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  @media not all and (min-width: 481px) {
    .mgui-emitir-lector-flot > * { max-width: 100%; align-items: stretch; }
  }

  /* O6-UX · punto 1 · scroll horizontal como fallback de la tabla de ítems: cuando el ancho real de la
   * ventana no alcanza para las 8 columnas pixel-fijas, se desplaza en vez de forzar wrap (que es lo
   * que generaba el desorden que vio el titular en móvil). Es el mismo patrón que VK con `.mg-scroll-x`. */
  .mgui-tabla-items-caja { overflow-x: auto; }
  .mgui-emitir-leyenda { font-size: var(--mg-type-md); }
  .mgui-emitir-ficha { margin: 0; }
  .mgui-emitir-medio { display: inline-flex; gap: var(--mg-space-1); align-items: center; }
  .mgui-emitir-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
  /* VK-05 · las novedades del padrón (integ-vkbc: de la hoja vieja a la biblioteca R3): un chip por novedad (la gravedad por el color y por la palabra), el detalle a un clic. */
  .mgui-emitir-novedades { list-style: none; padding: 0; margin: var(--mg-space-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--mg-space-1) var(--mg-space-2); }
  .mgui-emitir-novedad {
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); padding: 0 var(--mg-space-2); font-size: var(--mg-type-sm);
  }
  .mgui-emitir-novedad > summary { cursor: pointer; font-weight: var(--mg-weight-semibold); }
  .mgui-emitir-novedad > p { margin: var(--mg-space-1) 0; }
  .mgui-emitir-novedad--critica { background: var(--mg-status-danger-suave); color: var(--mg-status-danger-texto); border-color: var(--mg-status-danger-borde); }
  .mgui-emitir-novedad--alerta { background: var(--mg-status-warning-suave); color: var(--mg-status-warning-texto); border-color: var(--mg-status-warning-borde); }
  .mgui-emitir-novedad--informativa { background: var(--mg-status-info-suave); color: var(--mg-status-info-texto); border-color: var(--mg-status-info-borde); }
  .mgui-emitir-freno { margin: 0; font-weight: var(--mg-weight-semibold); color: var(--mg-status-danger-texto); }
  .mgui-emitir-constancia-area { display: grid; gap: var(--mg-space-2); margin-block-start: var(--mg-space-2); }
  .mgui-emitir-constancia-area:empty { display: none; }

  /* porte-vk · O23 · pasos del formulario apilados verticalmente, cada uno a ancho completo.
   * (Se descartó el patrón «pills horizontales compactas» de O21: el titular lo rechazó porque
   * no quería achicar los pasos inactivos. Mantiene plegado/desplegado por `data-mg-paso-abierto`,
   * sin cambios de ancho.) */
  .mgui-emitir-pasos {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    align-items: stretch;
  }
  .mgui-emitir-pasos > .mgui-emitir-paso {
    inline-size: 100%;
  }

  /*
   * EMI-F · reorg VK: cada paso del formulario se envuelve en un `.mgui-emitir-paso` que arranca con el
   * header full-width (`.mgui-paso-header`, componente de la biblioteca) y agrupa las secciones del paso.
   * El cuerpo mantiene la pila de secciones; el header va fuera del card para que se vea a todo lo ancho.
   */
  .mgui-emitir-paso {
    display: flex; flex-direction: column; gap: var(--mg-space-3);
    margin: 0; padding: 0;
    /* porte-vk · O16 (fix 5) · el borde de la card del paso pasa a `--mg-color-accion` (el mismo azul del
     * fondo del `.mgui-paso-header`): el titular pidió que el contorno quede visualmente ligado al header. */
    border: 1px solid var(--mg-color-accion);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  /* ola 32 · el titular reportó que el contenido del paso «queda pegado a los bordes» de la card. Bump
   * del padding del cuerpo: lados y fondo pasan a `space-6` (24px, antes 16px); arriba `space-3` (12px)
   * que se SUMA al gap del paso (otros 12px) → ~24px entre el header azul y la primera sección, mismo
   * respiro visual que a los lados. La primera sección NO flota contra el header. */
  /* emitir · recibo (31/10/2026) · un paso sin secciones para el tipo elegido no se muestra (`armarSecciones`): `display: flex` le ganaría al `hidden`. */
  .mgui-emitir-paso[hidden] { display: none; }
  .mgui-emitir-paso__cuerpo { display: flex; flex-direction: column; gap: var(--mg-space-3); padding: var(--mg-space-3) var(--mg-space-6) var(--mg-space-6); }
  /* Dentro del cuerpo del paso, cada sección se muestra como una caja «contorno sutil» con el mismo
   * patrón que `.mgui-emitir-tributos` (ver más arriba, L109-113): borde fino con el color de borde
   * del tema, radio medio y padding `space-3`. SIN FONDO OPACO, SIN SOMBRA, SIN BLUR propio: el fondo
   * de vidrio ya lo trae el `.mgui-emitir-paso` que las envuelve, y si cada sección le sumaba su
   * propio semitransparente, en los temas cristal se apilaban dos capas con dos backdrop-filters y
   * la opacidad efectiva saltaba a ~75% rompiendo el efecto. Transparente deja ver el isotipo + el
   * fondo del paso detrás con la misma opacidad leve en los cuatro temas cristal. El doble selector
   * de clase (`.mgui-emitir-seccion.mgui-card`) le gana en especificidad (0,3,0) a la regla
   * `[data-mg-tema^="cristal-"] .mgui-card` de `vidrio.css` (0,2,0).
   *
   * El `<legend>` nativo del fieldset se posa sobre la línea del borde superior: la clase
   * `.mgui-emitir-leyenda` dentro de la sección le da el mismo peso de fuente que usa Tributos
   * manuales, y el padding horizontal corta visualmente el borde (el fondo lo aporta el paso). */
  .mgui-emitir-paso__cuerpo > .mgui-emitir-seccion.mgui-card {
    margin: 0;
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mgui-emitir-paso__cuerpo > .mgui-emitir-seccion > .mgui-emitir-leyenda {
    padding-inline: var(--mg-space-1);
    font-weight: var(--mg-weight-semibold);
  }

  /* porte-vk · O16 (fix 3) · pliegue/despliegue del paso: cuando `data-mg-paso-abierto="0"`, el cuerpo
   * del paso queda oculto y SÓLO el header con el chevron a la derecha permanece visible. El header
   * pierde el radio inferior-top (ya es la única fila), pero igual pasa el padding del cuerpo a 0 para
   * que la card quede alta justa (header). El chevron del header muestra el estado (ver paso-header.css). */
  .mgui-emitir-paso[data-mg-paso-abierto="0"] > .mgui-emitir-paso__cuerpo { display: none; }
  .mgui-emitir-paso[data-mg-paso-abierto="0"] > .mgui-paso-header {
    border-end-start-radius: calc(var(--mg-radius-md) - 1px);
    border-end-end-radius: calc(var(--mg-radius-md) - 1px);
  }

  /* O9 · progress-stepper del inicio ELIMINADO (pedido titular). Las reglas .mgui-progress-stepper*
   * se removieron; el step-badge («N» pastilla) en el encabezado de cada paso sigue. */

  /* CRISTAL V3: el número va en `--mg-color-brand-sobre-suave` (el texto de la familia medido ≥ 4,5:1 sobre su `-suave` en
   * cada tema), no en el sólido de la acción, que sobre el tinte oscuro de los temas oscuros daba 2,24:1. */
  .mgui-step-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 1.75rem; block-size: 1.75rem; padding: 0 var(--mg-space-1);
    border-radius: 999px; background: var(--mg-color-accion-suave); color: var(--mg-color-brand-sobre-suave);
    font-weight: var(--mg-weight-bold); font-size: var(--mg-type-sm);
    margin-inline-end: var(--mg-space-2); flex: 0 0 auto;
  }
  .mgui-emitir-leyenda__texto { display: inline; }
  [data-mg-paso-pendiente] .mgui-step-badge { background: var(--mg-color-fondo); color: var(--mg-color-texto-atenuado); border: 1px dashed var(--mg-color-borde); }
  .mgui-emitir-pie__paso { font-weight: var(--mg-weight-semibold); display: inline-flex; align-items: center; gap: var(--mg-space-2); }

  /* UX-APP · OLA-3 · Paso 6 «Previsualización»: vista previa en vivo (iframe con el PDF del servidor), */
  /* panel de totales reactivo y lista de «qué falta». El agente DIS encaja el rediseño inline en el hook. */
  .mgui-emitir-previa { display: grid; gap: var(--mg-space-4); }
  .mgui-emitir-previa__paper { position: relative; min-block-size: 480px; background: var(--mg-color-superficie); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); overflow: hidden; }
  .mgui-emitir-previa__iframe { inline-size: 100%; block-size: 480px; border: 0; background: var(--mg-color-superficie); }
  .mgui-emitir-previa__totales dl { display: grid; grid-template-columns: 1fr auto; gap: var(--mg-space-1) var(--mg-space-4); margin: 0; }
  .mgui-emitir-previa__totales dt { color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-previa__totales dd { margin: 0; text-align: end; }
  .mgui-emitir-previa__falta { padding: var(--mg-space-3); border-radius: var(--mg-radius-md); background: var(--mg-status-warning-suave); border-left: 3px solid var(--mg-status-warning-borde); }
  .mgui-emitir-previa__falta h3 { margin: 0 0 var(--mg-space-2); font-size: var(--mg-type-sm); }
  .mgui-emitir-previa__falta ul { margin: 0; padding-inline-start: var(--mg-space-6); }

  /*
   * PORTE-VK §9 · «barra del documento»: la franja horizontal al tope del rediseño inline, análoga a
   * `.mg-doc__barra` de VK (`DisenoDocumento.jsx`). Agrupa en una sola fila los selectores de tipo,
   * modalidad y versión, la barra de zoom + undo/redo, y la insignia de «en uso». Los sub-grupos
   * envuelven con flex-wrap: en el teléfono se apilan solos, sin un segundo breakpoint.
   *
   * Único prefijo nuevo (`.mgui-emitir-previa-barra`), tokens del framework (sin hex ni px duros): el
   * contenedor arma el borde y el padding; los grupos internos (`__grupo`) les dan a los selectores su
   * respiro mínimo. El grupo marcado `--ancho` empuja a la derecha la barra de zoom + ediciones, igual
   * que `.mg-doc__grupo.mg-ms-auto` en VK.
   */
  .mgui-emitir-previa-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2) var(--mg-space-3);
    padding: var(--mg-space-2) var(--mg-space-3);
    background: var(--mg-vidrio-velo-superficie);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
  }
  .mgui-emitir-previa-barra__rige {
    margin: 0;
    min-inline-size: 0;
    flex: 1 1 14rem;
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
  }
  .mgui-emitir-previa-barra__grupo {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    min-inline-size: 0;
  }
  .mgui-emitir-previa-barra__grupo > form,
  .mgui-emitir-previa-barra__grupo > .mgui-field {
    margin: 0;
  }
  .mgui-emitir-previa-barra__grupo--ancho {
    margin-inline-start: auto;
  }
  @media not all and (min-width: 48rem) {
    .mgui-emitir-previa-barra__grupo--ancho { margin-inline-start: 0; }
    .mgui-emitir-previa-barra__rige { flex-basis: 100%; }
  }

  /* UX-APP · OLA-3 · Guarda del botón «Emitir» (feature extra): botón deshabilitado hasta que la lista */
  /* de requisitos (`data-mg-emitir-pie-falta`) esté vacía; `data-mg-emitir-listo` lo encuentran los tests. */
  .mgui-emitir-pie__falta { margin: 0; padding-inline-start: var(--mg-space-6); color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  [data-mg-emitir-boton][data-mg-emitir-listo="false"] { opacity: 0.55; cursor: not-allowed; }

  /* Destello suave sobre los números cuando llegan del servidor (keep-last-good + 0 flicker). */
  .mgui-nums.mgui-destello { animation: mgui-destello 420ms ease-out 1; }
  @keyframes mgui-destello { 0% { background: var(--mg-color-accion-suave); } 100% { background: transparent; } }

  /*
   * EMI-E · fila de íconos del header del receptor (padrón, constancia, historial, correo, WA, mapa, resumen),
   * drawer lateral y panel 1c de presupuestos y pedidos del cliente seleccionado.
   */
  .mgui-emitir-receptor-tools {
    display: flex; flex-wrap: wrap; gap: var(--mg-space-2);
    margin-block-start: var(--mg-space-2); padding-block-start: var(--mg-space-2);
    border-block-start: 1px dashed var(--mg-color-borde);
  }
  .mgui-emitir-receptor-tool {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2.5rem; block-size: 2.5rem;
    background: var(--mg-vidrio-velo-superficie); color: var(--mg-color-enlace);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    cursor: pointer; padding: 0;
    transition: background-color var(--mg-motion-fast) var(--mg-ease-out), border-color var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-emitir-receptor-tool:hover { background: var(--mg-color-accion-suave); border-color: var(--mg-color-accion); }
  .mgui-emitir-receptor-tool:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-emitir-receptor-tool[aria-pressed="true"] { background: var(--mg-color-accion-suave); border-color: var(--mg-color-accion); }
  @media (pointer: coarse) {
    .mgui-emitir-receptor-tool { inline-size: var(--mg-control-min); block-size: var(--mg-control-min); }
  }

  .mgui-emitir-receptor-panel {
    display: grid; gap: var(--mg-space-2);
    margin-block-start: var(--mg-space-3); padding: var(--mg-space-3);
    background: var(--mg-vidrio-velo-superficie); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
  }
  .mgui-emitir-receptor-panel__titulo { margin: 0; font-size: var(--mg-type-md); font-weight: var(--mg-weight-semibold); }
  .mgui-emitir-receptor-panel__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-receptor-panel__fila {
    display: grid; grid-template-columns: 1fr auto; gap: var(--mg-space-2) var(--mg-space-3); align-items: center;
    padding: var(--mg-space-2); border-radius: var(--mg-radius-sm); background: var(--mg-vidrio-velo-hundido);
  }
  .mgui-emitir-receptor-panel__datos { display: flex; flex-wrap: wrap; gap: var(--mg-space-1) var(--mg-space-3); align-items: baseline; font-size: var(--mg-type-sm); }
  .mgui-emitir-receptor-panel__numero { font-weight: var(--mg-weight-semibold); font-variant-numeric: tabular-nums; }
  .mgui-emitir-receptor-panel__total { font-variant-numeric: tabular-nums; }
  .mgui-emitir-receptor-panel__estado { font-size: var(--mg-type-xs); padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-xl); border: 1px solid var(--mg-color-borde); }
  .mgui-emitir-receptor-panel__estado--vigente { background: var(--mg-status-complete-suave); color: var(--mg-status-complete-texto); border-color: var(--mg-status-complete-borde); }
  .mgui-emitir-receptor-panel__estado--vencido { background: var(--mg-status-danger-suave); color: var(--mg-status-danger-texto); border-color: var(--mg-status-danger-borde); }
  .mgui-emitir-receptor-panel__estado--en-curso { background: var(--mg-status-info-suave); color: var(--mg-status-info-texto); border-color: var(--mg-status-info-borde); }
  .mgui-emitir-receptor-panel__acciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); }

  /* Drawer lateral: el <dialog> ya trae caja; acá sólo lo movemos a la derecha y le damos altura. */
  .mgui-emitir-receptor-drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto;
    max-inline-size: min(28rem, 95vw); inline-size: 100%; block-size: 100vh;
    margin: 0; border-radius: 0; border-inline-start: 1px solid var(--mg-color-borde);
    padding: var(--mg-space-4); overflow: auto;
  }
  .mgui-emitir-receptor-drawer::backdrop { background: color-mix(in oklab, var(--mg-color-marca-profunda) 35%, transparent); }
  .mgui-emitir-receptor-drawer__cabeza {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2);
    margin-block-end: var(--mg-space-3);
  }
  .mgui-emitir-receptor-drawer__cuerpo { display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-receptor-drawer__fila {
    display: grid; grid-template-columns: 1fr auto; gap: var(--mg-space-1) var(--mg-space-3);
    padding: var(--mg-space-2); border-radius: var(--mg-radius-sm); background: var(--mg-vidrio-velo-hundido);
    font-size: var(--mg-type-sm);
  }
  .mgui-emitir-receptor-drawer__dato { display: flex; justify-content: space-between; gap: var(--mg-space-3); }
  .mgui-emitir-receptor-drawer__dato dt { color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-receptor-drawer__dato dd { margin: 0; font-variant-numeric: tabular-nums; }

  /*
   * 9U · porte de Valkyrie `mg-emisor-grid` + `mg-mitades`.
   *
   * `.mgui-emisor-grid` arma la fila del receptor (documento, nombre, condición, apodo…): cada campo
   * mide lo que su contenido pide (los modificadores `.mgui-field--xs/sm/md/auto` y `.mgui-span-2`
   * viven en campo.css), y el conjunto se envuelve cuando no entra. `align-items: flex-end` mantiene
   * la línea de las etiquetas y los controles alineada por abajo aunque algún campo lleve `help`.
   *
   * `.mgui-mitades` es la pareja de columnas pareja (notas + totales en el paso 7): dos columnas en
   * escritorio y una sola en celular, con el mínimo exacto para no partir un total a mitad.
   */
  .mgui-emisor-grid {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: var(--mg-space-3) var(--mg-space-4);
  }
  .mgui-emisor-grid > .mgui-field { flex: 1 1 12rem; min-inline-size: 0; margin-block-end: 0; }
  /* porte-vk · O21 + O23 · altura mínima uniforme para TODOS los labels del grid del receptor, para que
   * un label que lleva un chip-botón (p. ej. «Documento · Traer de ARCA», `.mgui-field__label--con-chip`)
   * o un label dentro de un wrapper anidado (p. ej. `.mgui-direccion > .mgui-field > .mgui-field__label`
   * del campo de direccion predictivo del repeater de domicilios) no empuje su input abajo. El chip tiene
   * `min-block-size: 1.75rem`; damos esa misma altura al label-base y alineamos su texto para que arranque
   * arriba (misma línea del chip). O23: el selector pasó de directo (`>`) a descendiente para alcanzar
   * los labels anidados dentro de `.mgui-direccion`. */
  .mgui-emisor-grid .mgui-field__label {
    display: flex;
    align-items: center;
    min-block-size: 1.75rem;
  }
  .mgui-mitades {
    display: grid; align-items: start; gap: var(--mg-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  }

  /*
   * 9U · «letra del comprobante» (porte de Valkyrie `mg-letra-cbte`): la A/B/C grande (26 px) que va al
   * lado de cada opción de «¿cómo compra?», en vez del punto del radio. La respuesta —qué letra sale—
   * aparece en el lugar donde se toma la decisión; el input real queda visible pero oculto a la vista
   * (`.mgui-emitir-letra-opcion` esconde el círculo del radio y deja la letra como marca).
   */
  .mgui-letra-cbte {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 1.75rem; block-size: 1.75rem; flex: none;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-vidrio-velo-superficie);
    color: var(--mg-color-texto-atenuado);
    font-weight: var(--mg-weight-semibold);
    font-size: var(--mg-type-xl);
    line-height: 1;
  }
  .mgui-emitir-letra-opcion {
    position: relative; display: flex; gap: var(--mg-space-2); align-items: flex-start;
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-velo-superficie);
    cursor: pointer; font-size: var(--mg-type-sm);
  }
  .mgui-emitir-letra-opcion > input {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .mgui-emitir-letra-opcion:has(input:checked) {
    border-color: var(--mg-color-accion);
    background: var(--mg-color-accion-suave);
  }
  .mgui-emitir-letra-opcion:has(input:checked) .mgui-letra-cbte {
    background: var(--mg-color-accion);
    border-color: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
  }
  .mgui-emitir-letra-opcion:has(input:focus-visible) {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-emitir-letra-opcion__cuerpo { display: flex; flex-direction: column; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-emitir-letra-opcion__titulo { font-weight: var(--mg-weight-semibold); }
  .mgui-emitir-letra-opcion__ayuda { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }

  /*
   * frente B (31/10/2026): las cards de letra A/B/C del 28/10 y el display grande «Factura A» (ola 32) se retiraron: la letra
   * es el select «a emitir» de Valkyrie al lado de la condición (`r3-emitir-cliente.ts` → `selectorLetra`); sus reglas se fueron
   * con ellas (lo que quedaba del paso vive en `emitir-cliente.css`).
   */

  /*
   * 9U · «importe vivo» (porte de Valkyrie `mg-importe-vivo` + `ImporteVivo`): mientras se edita un
   * renglón los totales se recalculan solos; esto DESTELLA el importe que acaba de cambiar para que
   * quien movió el descuento vea DÓNDE impactó. Un destello de 1,4 s y una sola vez: una animación
   * que se repite se deja de mirar. Con movimiento reducido, el fondo tintado queda fijo (sin
   * animación) para preservar la señal sin flashes. El guion toggla `--cambio` cuando el texto cambia
   * (`data-mg-cambio` marca a los que se observan; ver `web/r3/emitir/emitir.js`).
   */
  .mgui-importe-vivo { border-radius: var(--mg-radius-sm); display: inline-block; padding-inline: 0.125rem; }
  .mgui-importe-vivo--cambio { animation: mgui-destello-vivo 1.4s ease-out 1; }
  @keyframes mgui-destello-vivo {
    0%   { background-color: var(--mg-color-accion-suave); box-shadow: 0 0 0 4px var(--mg-color-accion-suave); }
    70%  { background-color: var(--mg-color-accion-suave); box-shadow: 0 0 0 4px var(--mg-color-accion-suave); }
    100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
  }
  /* Con movimiento reducido el destello no corre: dura 1 ms y queda el estado final (R3 prohíbe `animation: none` en bloque;
   * la prueba R3-2 del generador lo vigila). El resaltado estático se conserva para que el cambio se vea igual. */
  @media (prefers-reduced-motion: reduce) {
    .mgui-importe-vivo--cambio {
      animation-duration: 1ms;
      background-color: var(--mg-color-accion-suave);
    }
  }

  /*
   * Fase 1 porte VK · anchos y utilidades de campo. Lee los valores exactos de VK
   * (`bo.valkyrie.ar/client/src/styles/mg/mg-admin.css`, líneas 595-611 para los modificadores de
   * campo sin contexto, 3041-3056 para los overrides dentro del emisor-grid). `campo.css` ya traía
   * los modificadores `--xs/sm/md/auto` como `flex: 0 0 Nrem` (sirve DENTRO del emisor-grid: ver "9U"
   * más arriba); acá se fijan en píxeles para que funcionen también FUERA del emisor-grid, y se
   * suman los que faltaban (`--2xs`, `--lg`, `--angosto`, `--span-2`, `.mgui-grow`, `.mgui-min-w-0`,
   * `.mgui-fila-editando`). El amarillo de la fila-en-edición usa el token "warning-suave" en vez
   * del `#fff8c6` crudo: la regla del proyecto es "nada inline, todo en tokens mg-gen-r3".
   */
  .mgui-field--2xs { width: 88px; }
  .mgui-field--xs { width: 110px; }
  .mgui-field--sm { width: 170px; }
  .mgui-field--md { width: 260px; }
  .mgui-field--lg { width: 380px; }
  .mgui-field--angosto { width: 480px; }
  .mgui-field--auto { width: max-content; max-width: 100%; }
  .mgui-field--span-2 { flex: 2 1 320px; max-width: none; }
  .mgui-grow { flex: 1 1 auto; }
  .mgui-min-w-0 { min-width: 0; }
  .mgui-fila-editando > td,
  .mgui-fila-editando { background: var(--mg-status-warning-suave); }
  /* Porte VK · Fase 3 (28/10) · alias BEM para la clase legada `.mgui-fila-editando`. Se agregan JUNTAS
   * (ambas) desde `entrarEnEdicion` para que el estilo entre por una u otra; vive al lado para que un
   * refactor pueda tirar la vieja sin tocar la nueva. */
  .mgui-tabla-items__fila--editando > td,
  .mgui-tabla-items__fila--editando { background: var(--mg-status-warning-suave); }

  /*
   * Overrides dentro del `.mgui-emisor-grid`: los modificadores pisan el `flex` base, no el `width`,
   * para que la fila se envuelva bien y ningún campo quede comprimido por un flex-basis grande.
   * Los anchos base son los de VK (`mg-admin.css` 3029-3056).
   *
   * 30/10/2026 · «tomar todo el ancho visible disponible» (pedido del titular). El ancho base sigue siendo
   * el MÍNIMO de cada campo —decide dónde se envuelve la fila y mantiene «Apodo» (`--sm`) más chico que
   * «Teléfono» (`--md`)—, pero ahora todos crecen (`flex-grow: 1`; `--span-2` el doble, como ya lo hacía
   * frente al campo sin modificador) y el sobrante de cada renglón se reparte entre ellos en vez de quedar
   * vacío a la derecha. Antes sólo crecían el campo sin modificador y el `--span-2`: una fila armada sólo con
   * modificadores (condición `--md` + letra + IIBB) terminaba a mitad del renglón. Todos se achican también
   * (`flex-shrink: 1`): un campo solo en su renglón no desborda un contenedor más angosto que su base.
   * `.mgui-span-2` (alias viejo de campo.css, repeater de domicilios) recibe el mismo trato que `--span-2`:
   * sin esto perdía contra `.mgui-emisor-grid > .mgui-field` y la dirección medía como cualquier campo.
   */
  .mgui-emisor-grid > .mgui-field--2xs { flex: 1 1 88px; width: auto; }
  .mgui-emisor-grid > .mgui-field--xs { flex: 1 1 110px; width: auto; }
  .mgui-emisor-grid > .mgui-field--sm { flex: 1 1 170px; width: auto; }
  .mgui-emisor-grid > .mgui-field--md { flex: 1 1 260px; width: auto; }
  .mgui-emisor-grid > .mgui-field--lg { flex: 1 1 380px; width: auto; }
  .mgui-emisor-grid > .mgui-field--angosto { flex: 1 1 480px; width: auto; }
  .mgui-emisor-grid > .mgui-field--auto { flex: 1 1 auto; }
  .mgui-emisor-grid > :is(.mgui-field--span-2, .mgui-span-2) { flex: 2 1 320px; max-width: none; }

  /*
   * Fase 2 porte VK · tabla rica de ítems: columnas pixel-fijas, miniatura, celdas
   * apiladas para IVA+interno y para lápiz+trash. Lee los valores exactos del master
   * de Valkyrie (`bo.valkyrie.ar/client/src/styles/mg/mg-admin.css`, líneas 3068-3123):
   *
   *   .mg-tabla-items .mg-col-foto     92  (dentro de tabla; afuera eran 64)
   *   .mg-col-cant                     56
   *   .mg-col-precio                  108
   *   .mg-col-desc                     96  (fondo amarillo "warning-suave")
   *   .mg-col-imp-doble               112  (IVA arriba, interno debajo, misma celda)
   *   .mg-col-total                   116
   *   .mg-col-acciones                 40  (lápiz arriba, trash debajo)
   *   .mg-col-foto .mg-miniatura    56×56  (VK usa 86 dentro de tabla; acá queda 56
   *                                        porque el titular pidió 56 para la primera
   *                                        pasada; medir en pantalla real al cerrar.)
   *
   * La columna "Concepto" (descripción + sku + chips + checkbox nuevo) NO lleva clase:
   * se queda con lo que sobra. El `col-desc` ES para la columna "Descuento" (amarilla)
   * y comparte el nombre con la clase del master; la columna "Descripción" NO la
   * reutiliza (en el master tampoco: la descripción no tiene clase propia).
   */
  .mgui-tabla-items { width: 100%; border-collapse: collapse; table-layout: auto; }
  .mgui-tabla-items thead th {
    text-align: start;
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto-atenuado);
    font-weight: var(--mg-weight-semibold);
    padding-inline: var(--mg-space-1);
    padding-block: var(--mg-space-1);
    border-block-end: 1px solid var(--mg-color-borde);
    vertical-align: bottom;
  }
  .mgui-tabla-items tbody td {
    padding-inline: var(--mg-space-1);
    padding-block: var(--mg-space-2);
    border-block-end: 1px solid var(--mg-color-borde);
    vertical-align: top;
  }
  .mgui-tabla-items .mgui-col-foto { width: 92px; min-width: 92px; }
  /* porte-vk · Ola 5 (deuda 7) · columna foto ocultable: si ningún renglón trae miniatura,
     el guion deja `data-mg-foto-estado="vacio"` en la tabla y la columna no reserva 92px.
     Al pintar la primera foto el guion pone "hay" y la columna reaparece. */
  .mgui-tabla-items[data-mg-foto-estado="vacio"] thead th.mgui-col-foto,
  .mgui-tabla-items[data-mg-foto-estado="vacio"] tbody td.mgui-col-foto { display: none; }
  .mgui-tabla-items .mgui-col-cant { width: 56px; min-width: 56px; }
  .mgui-tabla-items .mgui-col-precio { width: 108px; min-width: 108px; }
  .mgui-tabla-items .mgui-col-desc {
    width: 96px; min-width: 96px;
    background: var(--mg-status-warning-suave);
  }
  .mgui-tabla-items thead th.mgui-col-desc { color: var(--mg-color-texto); }
  .mgui-tabla-items .mgui-col-imp-doble { width: 112px; min-width: 112px; }
  .mgui-tabla-items .mgui-col-total { width: 116px; min-width: 116px; }
  .mgui-tabla-items .mgui-col-acciones { width: 40px; min-width: 40px; }
  .mgui-tabla-items thead th.mgui-col-cant,
  .mgui-tabla-items thead th.mgui-col-precio,
  .mgui-tabla-items thead th.mgui-col-imp-doble,
  .mgui-tabla-items thead th.mgui-col-total { text-align: end; }

  /* Miniatura 56×56 dentro de `.mgui-col-foto`. El master (`mg-admin.css:3120`)
   * usa 86×86; el titular pidió 56 para esta pasada — ajustar al cerrar la fase. */
  .mgui-tabla-items .mgui-col-foto .mgui-tabla-items__thumb,
  .mgui-tabla-items .mgui-col-foto .mgui-miniatura {
    display: inline-block;
    width: 56px; height: 56px;
    background: var(--mg-vidrio-velo-hundido);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-sm);
    object-fit: cover;
    vertical-align: top;
  }
  .mgui-tabla-items .mgui-col-foto .mgui-miniatura--img { background: transparent; }

  /* IVA + interno apilados dentro de la misma celda (`col-imp-doble`): el IVA
   * arriba, el interno debajo, cada uno con su rótulo chico, alineados a la
   * derecha (`.mg-num` del master). Oculto si no vino el dato. */
  .mgui-tabla-items .mgui-col-imp-doble {
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: var(--mg-type-sm);
  }
  .mgui-tabla-items .mgui-col-imp-doble .mgui-emitir-renglon__dato {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
  .mgui-tabla-items .mgui-col-imp-doble .mgui-emitir-renglon__dato + .mgui-emitir-renglon__dato {
    margin-block-start: var(--mg-space-1);
  }

  .mgui-tabla-items .mgui-col-total {
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-weight: var(--mg-weight-semibold);
  }

  /* Acciones apiladas: lápiz arriba (secundario), trash debajo (peligro). Uno al
   * lado del otro, iguales y grises, se tocaban por error — es el patrón VK. */
  .mgui-tabla-items .mgui-col-acciones__pila {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    align-items: stretch;
    justify-content: space-between;
  }
  .mgui-tabla-items .mgui-col-acciones__pila .mgui-btn {
    padding-inline: var(--mg-space-1);
  }

  /* "Concepto" (descripción + sku + chips + checkbox nuevo) sin clase: se queda con
   * lo que sobra. Dentro apilamos descripción arriba, línea secundaria (sku · grupo)
   * debajo, con los chips al final. */
  .mgui-tabla-items__concepto {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
  }
  .mgui-tabla-items__concepto-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-1);
    min-height: 1.1rem;
    margin: 0;
  }

  /* P4 (31/10/2026, ola F) · la columna «Código» con QR en el título y la fila-overlay del detalle avanzado eran de la
     grilla vieja: el código y el QR viven en el formulario de carga (`.mgui-carga__codigo`), el avanzado en `<details>`. */
  /* Chip de estado de la fila de lectura (`emitir.js › chip()`: En stock N, Preventa N, concepto…). P4 (31/10/2026, ola F):
     `.mgui-renglon-campo`, `.mgui-renglon-chips-arriba` y `--tipo-concepto` eran de la grilla vieja y se retiraron. */
  .mgui-renglon-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding: 0 var(--mg-space-2);
    border-radius: var(--mg-radius-xl);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    line-height: 1.5;
    background: var(--mg-vidrio-velo-superficie);
    color: var(--mg-color-texto-atenuado);
    border: 1px solid var(--mg-color-borde);
    cursor: pointer;
    min-height: 1.5rem;
  }
  .mgui-renglon-chip:hover { filter: brightness(0.98); }
  .mgui-renglon-chip:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-renglon-chip.is-activo,
  .mgui-renglon-chip[aria-pressed="true"] {
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    border-color: var(--mg-color-accion);
  }
  /*
   * Fase 6 porte VK · «Selector buscable» (porte `client/src/ui/SelectorBuscable.jsx`): un botón + popover absoluto
   * reemplaza al `<select>` nativo cuando `.mgui-field` lleva `data-mg-selector-buscable`. El select queda escondido
   * (lo lee el formulario); el popover tiene su campo de búsqueda, la lista con la elegida marcada y una línea
   * «nada coincide» cuando el filtro no deja nada. Click afuera y Esc lo cierran; ↑↓ Enter navegan y confirman.
   */
  .mgui-selector-buscable { position: relative; width: 100%; }
  .mgui-selector-buscable__boton {
    display: inline-flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2);
    width: 100%; min-height: var(--mg-control-min, 2.5rem);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control); border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-fondo-denso); color: var(--mg-color-texto);
    font: inherit; text-align: start; cursor: pointer;
  }
  .mgui-selector-buscable__boton:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset);
    border-color: var(--mg-color-foco);
  }
  .mgui-selector-buscable__boton[aria-expanded="true"] { border-color: var(--mg-color-foco); }
  .mgui-selector-buscable__etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
  .mgui-selector-buscable__caret { color: var(--mg-color-texto-atenuado); font-size: 0.75em; flex: 0 0 auto; }
  .mgui-selector-buscable__nativo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .mgui-selector-buscable__panel {
    position: absolute; inset-block-start: calc(100% + var(--mg-space-1)); inset-inline-start: 0; z-index: 20;
    min-width: 100%; max-width: calc(100vw - var(--mg-space-4));
    display: grid; gap: var(--mg-space-1);
    padding: var(--mg-space-2);
    background: var(--mg-vidrio-fondo-denso); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-selector-buscable__busca {
    width: 100%; min-height: var(--mg-control-min, 2.5rem);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control); border-radius: var(--mg-radius-sm);
    background: var(--mg-vidrio-velo-hundido); color: var(--mg-color-texto); font: inherit;
  }
  .mgui-selector-buscable__busca:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 0; border-color: var(--mg-color-foco);
  }
  .mgui-selector-buscable__lista { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; display: grid; gap: 0; }
  .mgui-selector-buscable__opcion {
    padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-sm); cursor: pointer; color: var(--mg-color-texto);
  }
  .mgui-selector-buscable__opcion.is-resaltada { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-selector-buscable__opcion.is-elegida { font-weight: var(--mg-weight-semibold); }
  .mgui-selector-buscable__opcion.is-elegida::before { content: '\2713\0020'; color: var(--mg-color-accion); }
  .mgui-selector-buscable__vacio { margin: 0; padding: var(--mg-space-2) var(--mg-space-3); color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }

  /*
   * Fase 6 porte VK · «Retiro de mercadería» (porte `RetiroMercaderia.jsx`): grilla de tres campos para el modo
   * «transporte» (empresa del catálogo + nombre libre) y agrupador vertical para el modo «tercero». Reusa clases
   * del emisor-grid; nada propio salvo el agrupador que forma una tarjeta sutil cuando el modo lo requiere.
   */
  .mgui-emitir-retiro-detalle {
    margin-block-start: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px dashed var(--mg-color-borde); border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-velo-hundido);
    display: grid; gap: var(--mg-space-2);
  }

  /*
   * Fase 6 porte VK · «Mapa del domicilio» (porte `MapaDomicilio.jsx`): un `<dialog>` ocupa casi la ventana entera
   * y contiene el mapa + el bloque de botones. Reusa `.mgui-dialog--modal`; agrega sólo la caja del mapa.
   */
  .mgui-emitir-mapa-dialog { width: min(96vw, 56rem); max-height: 92vh; }
  .mgui-emitir-mapa-dialog .mgui-dialog__cuerpo { display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-mapa { width: 100%; height: min(60vh, 28rem); border-radius: var(--mg-radius-md); background: var(--mg-color-fondo); border: 1px solid var(--mg-color-borde); }
  .mgui-emitir-mapa-dialog__donde { margin: 0; font-weight: var(--mg-weight-semibold); min-height: 1.4em; }
  .mgui-emisor-grid > .mgui-grow { flex: 1 1 auto; min-width: 0; }

  /*
   * Fase 10 (porte VK) · pulido.
   *
   * 10.5 · Pantalla final del resultado: el QR del enlace corto, con los botones «Copiar enlace» y
   * «Enviar por WhatsApp al cliente» debajo. El QR mide 180 px (grande para apuntar con el celular).
   */
  .mgui-emitir-final { display: flex; flex-direction: column; align-items: center; gap: var(--mg-space-3); }
  .mgui-emitir-final__qr { display: flex; align-items: center; justify-content: center; max-inline-size: 100%; }
  .mgui-emitir-final__qr svg { inline-size: auto; block-size: auto; max-inline-size: 100%; }

  /*
   * 7.6 · Chip excedente rotable (porte VK `TEXTOS_EXCEDENTE`): el chip de preventa/reserva/pre-orden/
   * nuevo se marca con `data-mg-chip-excedente` cuando queda rotable (click rota, alt+click prompt).
   * El cursor y el hover visten el affordance.
   */
  [data-mg-chip-excedente] { cursor: pointer; }
  [data-mg-chip-excedente]:hover { filter: brightness(0.96); }
  [data-mg-chip-excedente]:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset);
  }

  /*
   * Fase 4-5 porte VK · agregados a la biblioteca de «Emitir» para la cabecera (atajos de fecha), el bloque de
   * imputación entre cliente e ítems, y los enriquecidos del cuadro de Totales (impuestos individuales, acuerdo UCP
   * y marketing cooperativo). Sin color inventado: siempre tokens, con el mismo juego claro/oscuro del resto.
   */
  .mgui-emitir-fecha__atajos { margin-top: var(--mg-space-1); }
  .mgui-emitir-imputacion__modo { display: flex; gap: var(--mg-space-2) var(--mg-space-4); flex-wrap: wrap; }
  .mgui-emitir-imputacion__cuerpo { display: flex; flex-direction: column; gap: var(--mg-space-2); }
  .mgui-emitir-imputacion__sin-cliente p { margin: 0; }
  .mgui-emitir-imputacion__tabla { width: 100%; border-collapse: collapse; font-size: var(--mg-type-sm); }
  .mgui-emitir-imputacion__tabla th, .mgui-emitir-imputacion__tabla td {
    padding: var(--mg-space-1) var(--mg-space-2); border-bottom: 1px solid var(--mg-color-borde); text-align: left;
  }
  .mgui-emitir-imputacion__tabla th.mgui-nums, .mgui-emitir-imputacion__tabla td.mgui-nums { text-align: right; font-variant-numeric: tabular-nums; }
  .mgui-emitir-imputacion__pie { margin: 0; font-weight: var(--mg-weight-semibold); font-variant-numeric: tabular-nums; }
  .mgui-emitir-imputacion__excedente { margin: 0; }
  .mgui-emitir-totales__impuestos { display: contents; }
  .mgui-emitir-totales__acuerdo, .mgui-emitir-totales__marketing {
    display: flex; flex-direction: column; gap: var(--mg-space-1); padding-top: var(--mg-space-2);
    border-top: 1px solid var(--mg-color-borde);
  }
  .mgui-emitir-totales__acuerdo em, .mgui-emitir-totales__marketing em { font-style: italic; }

  /*
   * porte-vk · F5 (ventana ARCA) · el calendario de días habilitados del comprobante (`widgetFechaArca`,
   * `calendario-arca.js`). Se compone con lo que ya existe: la caja es `.mgui-field` (con `--md` de ancho); los días son
   * `.mgui-chip` (botones chicos del framework); el chip de la ventana vive en `.mgui-chips`; el aviso usa `.mgui-alert`.
   * Lo único propio es la fila de días y la fila de los dos atajos: separación y wrap. Si en un futuro R3 agrega un
   * componente «calendario» en el framework, se tira esto.
   */
  /* 31/10/2026 (pedido del titular) · con CAE los días habilitados van agrupados en una caja con el título «Fecha», como la
   * fecha en columna de Valkyrie (los días adentro del rectángulo); sin CAE la caja viaja `hidden` y queda el rótulo suelto
   * sobre el <input type="date">. `[hidden]` explícito: `.mgui-field__label` tiene display propio y R3 no trae `[hidden]`
   * global. */
  .mgui-fecha-arca__grupo { margin: 0; padding: var(--mg-space-2) var(--mg-space-3) var(--mg-space-3); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); min-inline-size: 0; }
  .mgui-fecha-arca__grupo > .mgui-emitir-leyenda { padding: 0 var(--mg-space-1); }
  .mgui-fecha-arca__grupo[hidden], [data-mg-fecha-arca] > .mgui-field__label[hidden] { display: none; }
  .mgui-fecha-arca__dias { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); margin-top: var(--mg-space-1); }
  .mgui-fecha-arca__dias [data-mg-dia][aria-pressed="true"] { outline: 2px solid var(--mg-color-accion); outline-offset: 1px; }
  .mgui-fecha-arca__atajos { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin: var(--mg-space-1) 0 0 0; padding: 0; }

  /* porte-vk · O11 (deuda A) · leyenda de los puntos de color por campo del receptor. 4 ítems inline,
   * puntos de 11 px prominentes al lado del texto. Los colores salen de los tokens de estado: info=arca,
   * complete=constancia, neutral=manual, warning=editado.
   *
   * porte-vk · O15 (fix 3) · leyenda más prominente: puntos 11 px (antes 8), fondo suave, texto normal
   * (antes atenuado), padding + border para que destaque como banner informativo entre el buscador y la
   * ficha del cliente. En móviles envuelve. */
  .mgui-emitir-referencia {
    display: flex; flex-wrap: wrap; gap: var(--mg-space-2) var(--mg-space-4);
    margin: 0 0 var(--mg-space-2) 0;
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-velo-hundido);
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto);
  }
  .mgui-emitir-referencia__item { display: inline-flex; gap: var(--mg-space-2); align-items: center; }
  .mgui-emitir-referencia__punto {
    inline-size: 11px; block-size: 11px; border-radius: 50%; display: inline-block;
    background: var(--mg-color-borde);
    box-shadow: 0 0 0 1px var(--mg-color-borde-control);
    flex: 0 0 auto;
  }
  .mgui-emitir-referencia__item[data-mg-ref="arca"] .mgui-emitir-referencia__punto { background: var(--mg-status-info-borde); }
  .mgui-emitir-referencia__item[data-mg-ref="constancia"] .mgui-emitir-referencia__punto { background: var(--mg-status-complete-borde); }
  .mgui-emitir-referencia__item[data-mg-ref="manual"] .mgui-emitir-referencia__punto { background: var(--mg-color-borde); }
  .mgui-emitir-referencia__item[data-mg-ref="editado"] .mgui-emitir-referencia__punto { background: var(--mg-status-warning-borde); }

  /* porte-vk · O11 (deuda A) · punto de origen dentro del rótulo de cada `.mgui-field` del receptor. El
   * atributo `data-mg-origen` lo pone el guion al elegir cliente y al editar un valor venido de ARCA; sin
   * atributo o `manual`, el punto no se dibuja (defecto neutro: no satura la pantalla con puntos grises). */
  .mgui-field[data-mg-origen="arca"] > .mgui-field__label::after,
  .mgui-field[data-mg-origen="constancia"] > .mgui-field__label::after,
  .mgui-field[data-mg-origen="editado"] > .mgui-field__label::after {
    content: ""; display: inline-block; inline-size: 6px; block-size: 6px; border-radius: 50%;
    margin-inline-start: var(--mg-space-1); vertical-align: middle;
  }
  .mgui-field[data-mg-origen="arca"] > .mgui-field__label::after { background: var(--mg-status-info-borde); }
  .mgui-field[data-mg-origen="constancia"] > .mgui-field__label::after { background: var(--mg-status-complete-borde); }
  .mgui-field[data-mg-origen="editado"] > .mgui-field__label::after { background: var(--mg-status-warning-borde); }

  /* porte-vk · O11 (deuda B) · lista inline de ediciones dentro del alert de ARCA. Compacta, mono para el
   * valor viejo/nuevo. */
  .mgui-emitir-ediciones {
    list-style: none; padding: 0; margin: var(--mg-space-2) 0 0 0;
    display: grid; gap: var(--mg-space-1); font-size: var(--mg-type-sm);
  }
  .mgui-emitir-ediciones li { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--mg-space-2); align-items: baseline; }
  .mgui-emitir-ediciones li > strong { font-weight: var(--mg-weight-semibold); }

  /* porte-vk · O11 (deuda B) · label en línea del checkbox «guardar también en la ficha». */
  .mgui-emitir-casilla__label {
    display: inline-flex; gap: var(--mg-space-2); align-items: center; margin-top: var(--mg-space-2);
    font-size: var(--mg-type-sm);
  }

  /* porte-vk · O15 (fix 4) · bloque colapsable del paso «Detalle del comprobante»: usa `<details>` nativo
   * (sin JS). Para los bloques técnicos de la moneda (invoice currency, exchange rate, tasas oficiales,
   * cotización oficial de hoy) que VK no muestra por omisión. Cerrados por defecto; se expanden a clic.
   * Flecha ▸/▾ compuesta con `::before` sobre el summary; `list-style: none` oculta el triángulo nativo. */
  .mgui-detalle-colapsado {
    margin-block-start: var(--mg-space-2);
    padding-block-start: var(--mg-space-2);
    border-block-start: 1px dashed var(--mg-color-borde);
  }
  .mgui-detalle-colapsado > summary {
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto-atenuado);
    list-style: none;
    display: inline-flex;
    gap: var(--mg-space-1);
    align-items: center;
    padding: var(--mg-space-1) 0;
  }
  .mgui-detalle-colapsado > summary::-webkit-details-marker { display: none; }
  .mgui-detalle-colapsado > summary::before {
    content: '\25B8';
    font-size: 0.8em;
    color: var(--mg-color-texto-atenuado);
    transition: transform var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-detalle-colapsado[open] > summary::before { content: '\25BE'; }
  .mgui-detalle-colapsado > summary:hover { color: var(--mg-color-accion); }
  .mgui-detalle-colapsado > summary:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
    border-radius: var(--mg-radius-sm);
  }
  .mgui-detalle-colapsado[open] { padding-block-end: var(--mg-space-2); }
  .mgui-detalle-colapsado[open] > summary { margin-block-end: var(--mg-space-2); }
  @media (prefers-reduced-motion: reduce) {
    .mgui-detalle-colapsado > summary::before { transition: none; }
  }

  /* porte-vk · repeater de domicilios del cliente (paso «Cliente» de /app/emitir), fila a fila: el fieldset, la grilla
   * de campos y la barra de acciones (chip de autoguardado, chip de confirmación del mapa, «Ver en mapa», «Que lo
   * confirme el cliente», «Quitar»). Reusa `.mgui-emisor-grid` para la grilla; agrega sólo el marco del fieldset y la
   * barra. Los chips reusan tonos del sistema (`--stock`/`--preventa`/`--neutral`). */
  /* porte-vk · patrón «Tributos manuales» · el agrupador del repeater de domicilios dentro del paso
   * Cliente (y del paso 4 Entrega) es un `<fieldset>` con borde fino + legend sobre el borde superior,
   * consistente con sus hermanos sub-grupo de la sección (`.mgui-emitir-tributos`, `.mgui-emitir-compra-como`,
   * `.mgui-emitir-impuestos-unificada`). Fondo TRANSPARENTE para no apilar vidrios encima del fondo
   * del paso (los temas cristal ya traen backdrop-filter en el paso). El `<legend>.mgui-emitir-leyenda`
   * aporta el peso de fuente y el padding horizontal corta visualmente el borde superior. */
  .mgui-emitir-domicilios {
    display: grid; gap: var(--mg-space-3);
    margin: 0; padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    background: transparent;
  }
  .mgui-emitir-domicilios > .mgui-emitir-leyenda {
    padding-inline: var(--mg-space-1);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-emitir-domicilios__ayuda { margin: 0; }
  .mgui-emitir-domicilios__lista { display: grid; gap: var(--mg-space-3); }
  .mgui-emitir-domicilios__pie { display: flex; justify-content: flex-start; }
  .mgui-emitir-domicilio {
    display: grid;
    gap: var(--mg-space-2);
    margin: 0;
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-velo-superficie);
  }
  .mgui-emitir-domicilio__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
  }
  .mgui-emitir-domicilio__acciones [data-mg-domicilio-chip],
  .mgui-emitir-domicilio__acciones [data-mg-domicilio-chip-confirmacion] { max-inline-size: 100%; white-space: normal; }
  .mgui-emitir-domicilio__acciones [data-mg-domicilio-quitar] { margin-inline-start: auto; }

  /*
   * porte-vk ola 34 (brecha 3) · grupo de chips multi-selección para el TIPO del domicilio (fiscal/real/legal/
   * comercial/entrega/pagos). Cada chip es un `<button class="mgui-chip">`; el guion togglea `aria-pressed` y
   * el modificador `is-activo` (visual accion-suave). «fiscal» es excluyente a nivel repeater (lo retira del
   * resto de las filas); el estado por fila viaja en el hidden `domicilio_i_tipos` (CSV).
   */
  .mgui-emitir-domicilio__tipos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-1);
    align-items: center;
  }
  .mgui-emitir-domicilio__tipos > .mgui-chip { cursor: pointer; user-select: none; }
  /* domicilio-emitir · el chip «Lo informó ARCA» de la fila que vino del padrón: informativo, no se toca. */
  .mgui-emitir-domicilio__arca { cursor: default; margin-inline-start: auto; }
  .mgui-emitir-domicilio__arca[hidden] { display: none; }

  /*
   * domicilio-emitir · paso Entrega · los domicilios del cliente que NO son de entrega, ofrecidos para «usarlos como
   * entrega» con un clic (Valkyrie `SeccionEntrega`: se marcan, no se copian). Una lista sin viñetas: la línea del
   * domicilio, sus tipos en un chip y el botón a la derecha (en teléfono baja a la línea siguiente).
   */
  .mgui-emitir-domicilios__otros { display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-domicilios__otros-titulo { margin: 0; }
  .mgui-emitir-domicilios__otros-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-domicilios__otro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px dashed var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
  }
  .mgui-emitir-domicilios__otro-texto { flex: 1 1 14rem; font-size: var(--mg-type-sm); }
  .mgui-emitir-domicilios__otro > .mgui-btn { margin-inline-start: auto; }
  /* domicilio-emitir · el estado del bloque mientras se repinta («Cargando…» / no se pudo), al lado del botón «Agregar». */
  .mgui-emitir-domicilios__pie { align-items: center; gap: var(--mg-space-3); flex-wrap: wrap; }
  .mgui-emitir-domicilios__estado { font-size: var(--mg-type-sm); }
  .mgui-emitir-domicilios__estado[hidden] { display: none; }

  /*
   * porte-vk ola 35a (brecha 9) · radio «el elegido» del paso 4 Entrega. Cada fila del repeater en modo
   * `modoRadio=true` lleva un `<label>` con un radio exclusivo (`name="domicilioEntregaId"`) que indica
   * «este domicilio es al que va este comprobante». El guion copia el texto en una línea del elegido al
   * hidden `domicilioEntrega` (compat con el servidor hasta la ola que migre el contrato a id).
   *
   * La cinta queda en el borde superior de la fila con un acento visual sobrio (fondo de superficie resaltada)
   * para que el usuario vea de un vistazo cuál eligió, sin robarle foco a los chips de tipo del paso 2
   * (donde esta cinta no se muestra: solo aparece en filas marcadas `.mgui-emitir-domicilio--elegible`).
   */
  .mgui-emitir-domicilio__elegido {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    padding: var(--mg-space-2) var(--mg-space-3);
    margin: calc(var(--mg-space-3) * -1) calc(var(--mg-space-3) * -1) 0;
    background: var(--mg-vidrio-velo-hundido);
    border-block-end: 1px solid var(--mg-color-borde);
    border-start-start-radius: var(--mg-radius-md);
    border-start-end-radius: var(--mg-radius-md);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-medium);
    cursor: pointer;
  }
  .mgui-emitir-domicilio__elegido-radio { accent-color: var(--mg-color-accion); margin: 0; }
  .mgui-emitir-domicilio__elegido-texto { color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-domicilio--elegible:has(.mgui-emitir-domicilio__elegido-radio:checked) {
    border-color: var(--mg-color-accion);
    box-shadow: 0 0 0 1px var(--mg-color-accion) inset;
  }
  .mgui-emitir-domicilio--elegible:has(.mgui-emitir-domicilio__elegido-radio:checked) .mgui-emitir-domicilio__elegido {
    background: color-mix(in oklab, var(--mg-color-accion) 8%, var(--mg-vidrio-velo-superficie));
  }
  .mgui-emitir-domicilio--elegible:has(.mgui-emitir-domicilio__elegido-radio:checked) .mgui-emitir-domicilio__elegido-texto {
    color: var(--mg-color-texto);
    font-weight: var(--mg-weight-semibold);
  }

  /*
   * porte-vk ola 34 (brechas 2+5+6+7) · panel INLINE del mapa por fila del repeater de domicilios. Hidden hasta
   * que el guion lo abra; dentro vive el buscador «otra dirección», el `<div data-mg-mapa-caja>` donde se monta
   * Leaflet, la línea «dónde quedó el pin», el textarea de indicaciones con chip de autoguardado y el botón
   * «Es acá». En viewports <640px el guion cae al `<dialog>` global (fallback), con el flujo viejo.
   */
  .mgui-mapa-panel {
    display: grid;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px dashed var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-velo-hundido);
  }
  .mgui-mapa-panel[hidden] { display: none; }
  .mgui-mapa-panel__donde { margin: 0; font-weight: var(--mg-weight-semibold); min-block-size: 1.4em; }
  .mgui-mapa-panel__donde:empty { display: none; }
  .mgui-mapa-panel__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-2);
    align-items: center;
  }

  /* Porte VK · Fase 7 (28/10) · panel de sugerencias del buscador de productos por renglón.
   *
   * Vive dentro de `.mgui-tabla-items__concepto` del renglón (abajo de la línea secundaria con el SKU y
   * el checkbox «nuevo»). Es `role="listbox"` con items `role="option"`. En teléfono entra pegado al
   * input (no absolute: la tabla ya se desplaza en celulares). En desktop quedaría absolute si se
   * usara fuera de la celda; dentro de la celda angosta mantener flujo normal da mejor layout.
   *
   * Cuando no hay resultados, muestra sólo el mensaje `__vacio` chico; con resultados, agrega una
   * línea de ayuda del teclado (flechas / Enter / Esc) arriba de la lista.
   */
  .mgui-renglon-sugerencias {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    margin-block-start: var(--mg-space-1);
    padding: var(--mg-space-2);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-fondo-denso);
    max-height: 320px;
    overflow: auto;
  }
  .mgui-renglon-sugerencias[hidden] { display: none; }
  .mgui-renglon-sugerencias__ayuda,
  .mgui-renglon-sugerencias__vacio {
    margin: 0;
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-renglon-sugerencias__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
  }
  .mgui-renglon-sugerencias__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: var(--mg-space-2);
    row-gap: 0;
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    cursor: pointer;
    align-items: center;
  }
  .mgui-renglon-sugerencias__item.is-activo,
  .mgui-renglon-sugerencias__item[aria-selected="true"] { background: var(--mg-color-accion-suave); }
  .mgui-renglon-sugerencias__item:hover { background: var(--mg-color-accion-suave); }
  .mgui-renglon-sugerencias__nombre {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-renglon-sugerencias__precio {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-variant-numeric: tabular-nums;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-renglon-sugerencias__sku,
  .mgui-renglon-sugerencias__stock {
    grid-row: 2 / 3;
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-renglon-sugerencias__sku { grid-column: 1 / 2; }
  .mgui-renglon-sugerencias__stock { grid-column: 2 / 3; text-align: end; }
  .mgui-renglon-sugerencias__item .mgui-emitir-chip {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    justify-self: start;
  }

  /* Porte VK · Fase 7 (28/10) · chips de precio por renglón (6 categorías: unidad, pack, caja, costo,
   * preventa, promoción). Viven en `[data-mg-chips-precio]` dentro de la celda `col-precio`, debajo
   * de los chips existentes (neto/final). Un chip = etiqueta + importe. Click = pisa el precio del
   * renglón con ese valor y marca el chip como `is-activo` (mismo patrón visual que los otros chips
   * del renglón, ver `.mgui-renglon-chip`). Si el usuario modifica el precio a mano, el guion
   * re-marca para que el chip activo refleje lo que hay en el campo. */
  .mgui-chips-precio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-1);
    margin-block-start: var(--mg-space-1);
  }
  .mgui-chips-precio[hidden] { display: none; }
  .mgui-chip-precio {
    /* Hereda `.mgui-renglon-chip`; sólo agregamos la disposición interna (etiqueta + valor en dos
     * líneas chicas, para que las 6 opciones entren sin desbordar). */
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--mg-space-1) var(--mg-space-2);
    line-height: 1.2;
  }
  .mgui-chip-precio__et {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-chip-precio__val {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-chip-precio.is-activo .mgui-chip-precio__val,
  .mgui-chip-precio[aria-pressed="true"] .mgui-chip-precio__val { color: inherit; }
  /* Variantes semánticas por categoría: un hilito de color a la izquierda. Es tenue para que la
   * decisión siga siendo la etiqueta, no el color. */
  .mgui-chip-precio--unidad    { border-inline-start-color: var(--mg-color-accion); }
  .mgui-chip-precio--pack      { border-inline-start-color: var(--mg-status-info-borde); }
  .mgui-chip-precio--caja      { border-inline-start-color: var(--mg-status-complete-borde); }
  .mgui-chip-precio--costo     { border-inline-start-color: var(--mg-color-texto-atenuado); }
  .mgui-chip-precio--preventa  { border-inline-start-color: var(--mg-status-warning-borde); }
  .mgui-chip-precio--promocion { border-inline-start-color: var(--mg-status-info-borde); }

  /*
   * ola 33 · porte VK · `CampoNombre` SSR + vanilla. Un rótulo + «caja» que al hover muestra dos inputs separados
   * (apellido / nombre) con chip separador y botón ↔ para invertir orden. Hover 250 ms de gracia; `focus-within`
   * también abre; al perder foco con guard, se cierra. El wrapper mantiene `.mgui-field` para que el chip de origen
   * (arca/constancia/manual/editado) y el listener de ediciones sigan funcionando sin cambios.
   */
  .mgui-emitir-nombre { position: relative; display: grid; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-emitir-nombre__rotulo {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2);
    min-block-size: 1.75rem; line-height: 1.25;
    font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold);
  }
  .mgui-emitir-nombre__rotulo :is(.mgui-chip, .mgui-btn) {
    min-block-size: 1.5rem; max-block-size: 1.75rem; padding-block: 0;
  }
  .mgui-emitir-nombre__texto {
    box-sizing: border-box;
    display: block; inline-size: 100%; text-align: start;
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control); border-radius: var(--mg-radius-sm);
    background: var(--mg-vidrio-fondo-denso); color: var(--mg-color-texto);
    font-size: var(--mg-type-base); min-height: 2.5rem; cursor: text;
  }
  .mgui-emitir-nombre__texto:empty::before { content: "PEREZ, JUAN CARLOS"; color: var(--mg-color-texto-atenuado); }
  .mgui-emitir-nombre__editor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1); }
  .mgui-emitir-nombre__editor > .mgui-field__control { flex: 1 1 10rem; min-inline-size: 0; }
  .mgui-emitir-nombre__sep, .mgui-emitir-nombre__swap { cursor: pointer; }
  .mgui-emitir-nombre.is-editando .mgui-emitir-nombre__texto { display: none; }
  .mgui-emitir-nombre:not(.is-editando) .mgui-emitir-nombre__editor { display: none; }

  /*
   * ola 33e · paso 3 Detalle del comprobante · dos rows nítidas
   *   row 1: Fecha · Pedido · Punto de venta · Depósito
   *   row 2: Vendedor · Lista · Condición · Entrega comprometida
   *   `<details>` plegable: Nro teórico · CUIT emisor · Vencimiento auto · Validez
   */
  .mgui-emitir-detalle-row {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: var(--mg-space-3) var(--mg-space-4);
    margin-block-end: var(--mg-space-3);
  }
  .mgui-emitir-detalle-row > .mgui-field { flex: 1 1 11rem; min-inline-size: 0; margin-block-end: 0; }
  /* 30/10/2026 · los modificadores fijan el ancho MÍNIMO (dónde se envuelve la fila), no el final: todos crecen y se
   * achican (`1 1 <base>`) y el sobrante del renglón se reparte entre sus campos. Con `0 0 / 0 1` la row 1 (fecha +
   * pedido + cuenta + depósito ≈ 50rem) dejaba el tercio derecho vacío en un escritorio de 1440 px. */
  .mgui-emitir-detalle-row > .mgui-field--xs   { flex: 1 1 7rem; }
  .mgui-emitir-detalle-row > .mgui-field--sm   { flex: 1 1 11rem; }
  .mgui-emitir-detalle-row > .mgui-field--md   { flex: 1 1 16rem; }
  .mgui-emitir-detalle-row > .mgui-field--auto { flex: 1 1 auto; width: max-content; max-width: 100%; }
  /* 31/10/2026 · el readonly del presupuesto o pedido de origen viaja `hidden` en los tipos sin origen (presupuesto, notas,
   * traslado) y el guion lo alterna al cambiar la pastilla del paso 1: `hidden` tiene que ganarle al `display: flex` de
   * `.mgui-field`. Acotado a la fila del detalle a propósito (no hay `[hidden]` global, ver utilidades.css). */
  .mgui-emitir-detalle-row > .mgui-field[hidden] { display: none; }
  .mgui-emitir-detalle-avanzado { margin-block-start: var(--mg-space-2); }
  .mgui-emitir-detalle-avanzado > summary {
    cursor: pointer;
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
    padding-block: var(--mg-space-1);
  }
  .mgui-field__control--readonly {
    background: var(--mg-vidrio-velo-hundido);
    color: var(--mg-color-texto);
    min-height: 2.5rem;
    display: flex; align-items: center;
  }
  /*
   * ola 33 · sub-bloque «2c · Presupuestos y pedidos» · tres tablas apiladas (vigentes / anteriores
   * plegables / pedidos), cada una con la tabla propia `.mgui-emitir-pyp__tabla` y chips de estado
   * reusados del catálogo. Vive al final del paso 2 Cliente, después del repeater de domicilios.
   * Reemplaza al viejo <select name="origen"> que vivía como sección aparte dentro del wizard.
   */
  .mgui-emitir-pyp {
    margin-block-start: var(--mg-space-3);
    display: grid; gap: var(--mg-space-3); padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-velo-superficie);
  }
  .mgui-emitir-pyp__bloque { display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-pyp__sub {
    margin: 0;
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-emitir-pyp__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mg-type-sm);
  }
  .mgui-emitir-pyp__tabla th,
  .mgui-emitir-pyp__tabla td {
    padding: var(--mg-space-2) var(--mg-space-3);
    border-bottom: 1px solid var(--mg-color-borde);
    text-align: start;
    vertical-align: middle;
  }
  .mgui-emitir-pyp__tabla th {
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-emitir-pyp__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mgui-emitir-pyp__acciones {
    display: flex; flex-wrap: wrap; gap: var(--mg-space-2); justify-content: flex-end;
  }
  .mgui-emitir-pyp__anteriores { display: grid; gap: var(--mg-space-2); }
  .mgui-emitir-pyp__anteriores > summary {
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto-atenuado);
    padding: var(--mg-space-1) 0;
  }
  .mgui-emitir-pyp__anteriores[open] > summary { color: var(--mg-color-texto); }

  /* Ola 17 · feedback visual inmediato al emitir y bloque configurable de envío/notificación del comprobante */
  .mgui-emitir-pie__emitir.is-enviando {
    opacity: 0.92;
    cursor: progress;
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-emitir-pie__estado-envio {
    flex: 1 1 100%;
    margin: var(--mg-space-2) 0 0;
    padding: var(--mg-space-2) var(--mg-space-3);
    border-radius: var(--mg-radius-md);
    border: 1px solid var(--mg-status-info-borde);
    background: var(--mg-status-info-suave);
    color: var(--mg-status-info-texto);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-emitir-entrega {
    margin-block-start: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-vidrio-velo-superficie);
  }
  .mgui-emitir-entrega__canales {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-3);
  }
  .mgui-emitir-entrega__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--mg-space-3);
  }
  .mgui-emitir-entrega__fila > .mgui-field {
    flex: 1 1 16rem;
    margin-block-end: 0;
  }

  /* ── web/r3/fuente/encabezado-avisos.css ── */
  /*
   * Frente A10 · los íconos y contadores del encabezado de la App (portada de Valkyrie: los satélites de `Pendientes.jsx`,
   * la campana de `Bandeja.jsx` y la barra de accesos de `BarraDerecha.jsx`). Sin JavaScript: la campana es un popover
   * declarativo, como el selector de idioma (Escape, el clic afuera y el regreso del foco los pone el navegador).
   *
   * El ícono es grande y el número chico, encima, como un satélite: primero se ve DE QUÉ se trata, después cuánto. El
   * color sale de la familia del contador: `urgente` (rojo: ya salió mal), `atencion` (ámbar: hay que hacer algo) y
   * `encurso` (azul: está pasando). El número va en blanco sobre el sólido del estado (contraste medido por el generador).
   */
  @keyframes mgui-bandeja-entrar { from { opacity: 0; translate: 0 -.25rem; } }

  .mgui-encabezado-avisos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mg-space-3);
    margin-inline-start: auto;
    min-inline-size: 0;
  }
  .mgui-encabezado-avisos__contadores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
  }

  /* ── El satélite: ícono + número ─────────────────────────────────────────────── */
  .mgui-satelite {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--mg-control-min);
    block-size: var(--mg-control-min);
    padding: 0;
    border: 0;
    border-radius: var(--mg-radius-md);
    background: transparent;
    color: var(--mg-color-texto);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .mgui-satelite:hover { background: var(--mg-color-accion-suave); }
  .mgui-satelite:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-satelite__icono { inline-size: 1.75rem; block-size: 1.75rem; flex: none; }
  .mgui-satelite--urgente { color: var(--mg-status-danger-texto); }
  .mgui-satelite--atencion { color: var(--mg-status-warning-texto); }
  .mgui-satelite--encurso { color: var(--mg-status-info-texto); }
  .mgui-satelite__n {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: var(--mg-space-1);
    border-radius: 999px;
    background: var(--mg-status-warning-solido);
    color: var(--mg-color-sobre-solido);
    box-shadow: 0 0 0 2px var(--mg-color-superficie);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .mgui-satelite--urgente .mgui-satelite__n { background: var(--mg-status-danger-solido); }
  .mgui-satelite--encurso .mgui-satelite__n { background: var(--mg-status-info-solido); }

  /* El globo: dibujado acá y no por el navegador (el `title` largo de Chrome no se lee), DEBAJO del ícono. */
  .mgui-satelite__globo {
    position: absolute;
    inset-block-start: calc(100% + var(--mg-space-1));
    inset-inline-end: 0;
    z-index: var(--mg-layer-tooltip);
    inline-size: max-content;
    max-inline-size: 16rem;
    padding-block: var(--mg-space-1);
    padding-inline: var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-medium);
    line-height: 1.3;
    text-align: start;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-satelite:hover .mgui-satelite__globo,
  .mgui-satelite:focus-visible .mgui-satelite__globo,
  .mgui-accesos__item:hover .mgui-satelite__globo,
  .mgui-accesos__item:focus-visible .mgui-satelite__globo { opacity: 1; visibility: visible; }
  .mgui-bandeja:has(.mgui-bandeja__panel:popover-open) .mgui-satelite__globo { visibility: hidden; }

  /* ── La campana ──────────────────────────────────────────────────────────────── */
  .mgui-bandeja { position: relative; display: inline-flex; }
  .mgui-bandeja__disparador { anchor-name: --mgui-bandeja; }
  .mgui-bandeja__panel {
    inset: auto;
    margin: 0;
    margin-block-start: var(--mg-space-1);
    padding: var(--mg-space-2);
    position-anchor: --mgui-bandeja;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-inline, flip-block;
    inline-size: min(24rem, calc(100vw - 2 * var(--mg-space-3)));
    max-block-size: min(32rem, calc(100dvh - 6rem));
    overflow: auto;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-2);
    font-size: var(--mg-type-sm);
  }
  .mgui-bandeja__panel:popover-open { animation: mgui-bandeja-entrar var(--mg-motion-fast) var(--mg-ease-out); }
  @supports not (position-area: block-end span-inline-start) {
    .mgui-bandeja__panel {
      position: fixed;
      inset-block: auto var(--mg-space-3);
      inset-inline: var(--mg-space-3);
      margin: 0;
      margin-inline-start: auto;
      max-block-size: calc(100dvh - 2 * var(--mg-space-3));
    }
  }
  .mgui-bandeja__lista { margin: 0; padding: 0; list-style: none; }
  .mgui-bandeja__item {
    display: grid;
    gap: var(--mg-space-2);
    padding: var(--mg-space-2);
    border-inline-start: 3px solid var(--mg-status-warning-borde);
    border-radius: var(--mg-radius-sm);
  }
  .mgui-bandeja__item + .mgui-bandeja__item { margin-block-start: var(--mg-space-2); }
  .mgui-bandeja__item--urgente {
    border-inline-start-color: var(--mg-status-danger-borde);
    background: var(--mg-status-danger-suave);
  }
  .mgui-bandeja__texto { display: flex; align-items: flex-start; gap: var(--mg-space-2); margin: 0; line-height: 1.4; }
  .mgui-bandeja__alerta { flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: .15em; color: var(--mg-status-danger-texto); }
  .mgui-bandeja__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mg-space-2); }
  .mgui-bandeja__flecha { inline-size: .875rem; block-size: .875rem; margin-inline-start: var(--mg-space-1); }
  .mgui-bandeja__form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1); margin: 0; }
  .mgui-bandeja__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    margin-block-start: var(--mg-space-2);
    padding-block-start: var(--mg-space-2);
    border-block-start: 1px solid var(--mg-color-borde);
  }
  .mgui-bandeja__ocultos { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-xs); }
  .mgui-bandeja__vacio { margin: 0; padding: var(--mg-space-2); color: var(--mg-color-texto-atenuado); }

  /* ── Los accesos rápidos ─────────────────────────────────────────────────────── */
  .mgui-accesos {
    display: flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding-inline-start: var(--mg-space-3);
    border-inline-start: 1px solid var(--mg-color-borde);
  }
  .mgui-accesos__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--mg-control-min);
    block-size: var(--mg-control-min);
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-texto-atenuado);
    text-decoration: none;
  }
  .mgui-accesos__item:hover { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-accesos__item:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-accesos__item[aria-current="page"] { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-accesos__icono { inline-size: 1.5rem; block-size: 1.5rem; }

  /* En el teléfono no van los accesos (ahí el atajo es el menú; en Valkyrie, la barra de abajo), salvo el de las
     notificaciones del dispositivo, que no está en el menú y es justo cosa del teléfono. */
  @media not all and (min-width: 768px) {
    .mgui-accesos__item:not(.mgui-accesos__item--siempre) { display: none; }
  }

  /* Movimiento reducido: lo resuelven los tokens (`--mg-motion-*` de R3), no un apagado en bloque. */

  /* Sin popover (motores viejos): el panel a la vista como tarjeta, a lo ancho, y sin disparador. */
  @supports not selector(:popover-open) {
    .mgui-bandeja { flex-basis: 100%; }
    .mgui-bandeja__disparador { display: none; }
    .mgui-bandeja__panel { position: static; inset: auto; inline-size: 100%; max-block-size: none; overflow: visible; }
  }

  @media print {
    .mgui-encabezado-avisos { display: none; }
  }

  /* En la barra de la App: los íconos empujan al logo del inquilino al final, y la barra envuelve en el teléfono. */
  .mgui-app-marcas:has(.mgui-encabezado-avisos) { flex-wrap: wrap; row-gap: var(--mg-space-2); }
  .mgui-encabezado-avisos + .mgui-app-marcas__tenant { margin-inline-start: 0; }
  /* La campana con todo oculto: sigue a mano (para volver a mostrar), sin color de estado. */
  .mgui-satelite--tranquilo { color: var(--mg-color-texto-atenuado); }

  /* ── web/r3/fuente/escena.css ── */
  /*
   * mgui-escena — la ESCENA decorativa de los cuatro temas «cristal-*» (CRISTAL V3, 31/10/2026): un host fijo al viewport,
   * detrás de todo, donde el módulo `/r3/escena/mg-isotipo-escena.js` cuelga el canvas WebGL con el isotipo 3D (GLB oficial:
   * bisel, clearcoat, transmisión, IOR) sobre un fondo procedural propio, y una imagen de respaldo del mismo render para
   * cuando no hay WebGL, el modelo no llega o la persona pidió colores forzados. Reemplaza al isotipo SVG en `body::before`
   * (`isotipo-fondo.css`) y a la malla + aurora en los pseudo del `<html>` (`liquid-glass.css`): UNA sola escena, sin copias
   * del isotipo, sin auroras CSS y sin canvases duplicados.
   *
   *   · El `<html>` pinta el fondo del tema y el `<body>` queda transparente, así el host (z-index -1, primer hijo del body,
   *     dibujado por `web/plantilla.ts` sólo en estos temas) queda ENTRE el fondo y el contenido; `.mgui-app` es transparente
   *     en los cuatro temas (`app-cascara.css`).
   *   · El fondo CSS del host usa LA MISMA paleta que el fondo WebGL (`--mg-escena-*`, hex por tema en `temas.js`): antes de
   *     que cargue el módulo, o sin él, la página ya tiene la escena de color; el módulo lee esos tokens con getComputedStyle.
   *   · Encuadre: `--mg-escena-x/-y` (centro del objeto como fracción del viewport), `--mg-escena-cobertura` (alto máximo como
   *     fracción) y `--mg-escena-max-px`; el teléfono los corre al centro. El objeto queda a la derecha del centro, debajo de la
   *     barra de arriba y lejos del lateral: la navegación (material «lente», más abierto) lee sobre el fondo procedural y
   *     el contenido (material de lectura, medido contra `--mg-escena-extremo`) es el que pasa por encima del isotipo.
   *   · Alpha global 1 SIEMPRE en el lienzo: la presencia se gradúa con encuadre, exposición (`--mg-escena-exposicion`, tone
   *     mapping AgX) y la densidad de las superficies de lectura. Encima del lienzo va el VELO DE LECTURA (`::after`): el fondo
   *     del tema al `--mg-escena-velo` (lo CALCULA el generador, `temas.js › tokensDeVidrio`, como el mínimo con el que el
   *     texto directo de la página —título, bajada, enlaces, botones silenciosos, sin vidrio debajo— lee ≥ 4,5:1 hasta sobre
   *     el píxel más oscuro (claro) o más claro (profundo) del isotipo, medidos en la App real el 31/10/2026). El objeto
   *     conserva cantos y reflejos (el velo es uniforme: no toca su contraste interno), más suave; «discreta» lo sube 15 puntos.
   *   · Nada de eventos de puntero, nada de foco, `aria-hidden`. Impresión y colores forzados: el host no se dibuja.
   */
  [data-mg-tema^="cristal-"] { background: var(--mg-color-fondo); }
  [data-mg-tema^="cristal-"] body { background: transparent; }

  .mgui-escena {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    background:
      radial-gradient(ellipse at 78% 37%, var(--mg-escena-azul), transparent 70%),
      radial-gradient(ellipse at 17% 17%, var(--mg-escena-turquesa), transparent 68%),
      radial-gradient(ellipse at 40% 88%, var(--mg-escena-bruma), transparent 70%),
      url("/r3/escena/fondo.jpg") center / cover no-repeat,
      var(--mg-escena-base);
  }
  .mgui-escena[hidden] { display: none; }
  .mgui-escena__lienzo,
  .mgui-escena__respaldo {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
  }
  /* El canvas se muestra recién cuando dibujó un cuadro; hasta entonces (y si la escena cae), el respaldo. */
  .mgui-escena__lienzo { visibility: hidden; }
  .mgui-escena__respaldo {
    object-fit: contain;
    inline-size: min(calc(var(--mg-escena-max-px) * 1px), 82vw);
    block-size: min(calc(var(--mg-escena-max-px) * 1px), calc(var(--mg-escena-cobertura) * 100vh));
    inset-inline-start: calc(var(--mg-escena-x) * 100%);
    inset-block-start: calc(var(--mg-escena-y) * 100%);
    transform: translate(-50%, -50%);
  }
  .mgui-escena[data-mg-escena-estado="listo"] .mgui-escena__lienzo { visibility: visible; }
  .mgui-escena[data-mg-escena-estado="listo"] .mgui-escena__respaldo { visibility: hidden; }
  /* El velo de lectura: una capa del fondo del tema sobre el lienzo y el respaldo (ver arriba). Es lo que el arnés mide como
   * «extremo» de la escena (`--mg-escena-extremo` = fondo al velo sobre el píxel crudo más desfavorable). */
  .mgui-escena::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 68% 60% at 76% 34%, color-mix(in oklab, var(--mg-escena-azul) 48%, transparent), transparent 72%),
      radial-gradient(ellipse 62% 56% at 18% 20%, color-mix(in oklab, var(--mg-escena-turquesa) 44%, transparent), transparent 70%),
      radial-gradient(ellipse 65% 55% at 44% 86%, color-mix(in oklab, var(--mg-escena-bruma) 45%, transparent), transparent 72%),
      color-mix(in srgb, var(--mg-color-fondo) var(--mg-escena-velo), transparent);
  }
  [data-mg-escena-presencia="discreta"] .mgui-escena::after {
    background:
      radial-gradient(ellipse 68% 60% at 76% 34%, color-mix(in oklab, var(--mg-escena-azul) 40%, transparent), transparent 72%),
      radial-gradient(ellipse 62% 56% at 18% 20%, color-mix(in oklab, var(--mg-escena-turquesa) 36%, transparent), transparent 70%),
      radial-gradient(ellipse 65% 55% at 44% 86%, color-mix(in oklab, var(--mg-escena-bruma) 38%, transparent), transparent 72%),
      color-mix(in srgb, var(--mg-color-fondo) calc(var(--mg-escena-velo) + 15%), transparent);
  }
  /* Teléfono: el objeto queda bajo la primera tarjeta y en profundo su cara especular es más clara que el píxel crudo de
   * escritorio; el velo del teléfono (`--mg-escena-velo-telefono`, temas.js › crudoTelefono) lo compensa. Antes que las reglas
   * de contraste alto, que mandan por venir después y por especificidad. */
  @media not all and (min-width: 681px) {
    .mgui-escena::after {
      background: color-mix(in srgb, var(--mg-color-fondo) var(--mg-escena-velo-telefono), transparent);
    }
    [data-mg-escena-presencia="discreta"] .mgui-escena::after {
      background: color-mix(in srgb, var(--mg-color-fondo) calc(var(--mg-escena-velo-telefono) + 15%), transparent);
    }
  }
  /* Contraste alto (de la App o del sistema): las superficies se vuelven sólidas (vidrio.css) y la escena queda apenas
   * insinuada detrás del fondo del tema. */
  [data-mg-contraste="alto"] .mgui-escena::after { background: color-mix(in srgb, var(--mg-color-fondo) 88%, transparent); }
  @media (prefers-contrast: more) {
    .mgui-escena::after { background: color-mix(in srgb, var(--mg-color-fondo) 88%, transparent); }
  }

  /* Teléfono y ventana angosta: el objeto al centro, un poco más chico (el lateral es un cajón que pasa por encima). */
  /* Medido en 390 × 844 (31/10/2026): centrado a media altura el objeto quedaba detrás del título, la bajada y el indicador
   * de pasos, que son texto directo sobre la escena. Más abajo y más chico: queda bajo la primera tarjeta (vidrio con blur)
   * y el espacio libre de abajo, y el encabezado lee sobre el fondo procedural. */
  @media not all and (min-width: 681px) {
    .mgui-escena {
      --mg-escena-x: 0.58;
      --mg-escena-y: 0.68;
      --mg-escena-cobertura: 0.5;
      --mg-escena-max-px: 340;
    }
  }

  /* Presencia del logo «discreta» (sistema de apariencia por página, `data-mg-escena-presencia` en <html>): el objeto más
   * chico y más abajo a la derecha; el módulo relee estos tokens al cambiar el atributo (MutationObserver del arranque). */
  [data-mg-escena-presencia="discreta"] .mgui-escena {
    --mg-escena-x: 0.72;
    --mg-escena-y: 0.6;
    --mg-escena-cobertura: 0.56;
    --mg-escena-max-px: 380;
  }

  /* Con menos transparencia pedida al sistema el contenido se vuelve sólido (vidrio.css); la escena queda como fondo quieto. */
  @media (prefers-reduced-transparency: reduce) {
    .mgui-escena__lienzo { visibility: hidden; }
    .mgui-escena[data-mg-escena-estado="listo"] .mgui-escena__respaldo { visibility: visible; }
  }

  @media print, (forced-colors: active) {
    .mgui-escena,
    .mgui-escena-patron,
    .mgui-escena-isotipo { display: none; }
    [data-mg-tema^="cristal-"] body { background: var(--mg-color-fondo); }
  }

  /* ── Configuración de Tamaño (`data-mg-escena-presencia`) y Velocidad (`data-mg-escena-efecto`) para todos los temas ── */
  [data-mg-escena-presencia="discreta"] {
    --mg-isotipo-solo-tam: clamp(11rem, 22vmin, 18rem);
    --mg-patron-escala: .78;
  }
  [data-mg-escena-presencia="normal"] {
    --mg-isotipo-solo-tam: clamp(18rem, 38vmin, 29rem);
    --mg-patron-escala: 1;
  }
  [data-mg-escena-presencia="grande"] {
    --mg-isotipo-solo-tam: clamp(26rem, 54vmin, 42rem);
    --mg-patron-escala: 1.26;
  }
  [data-mg-escena-efecto="luz"] {
    --mg-isotipo-duracion: 13s;
  }
  [data-mg-escena-efecto="movimiento"] {
    --mg-isotipo-duracion: 7s;
  }
  [data-mg-escena-efecto="rapido"] {
    --mg-isotipo-duracion: 3.4s;
  }

  @keyframes mg-isotipo-flotar {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    25% { transform: translate3d(0, calc(-1 * var(--mg-patron-flote-dist)), 0) rotate(calc(-1 * var(--mg-patron-flote-tilt))) scale(1.02); }
    50% { transform: translate3d(0, calc(-.35 * var(--mg-patron-flote-dist)), 0) rotate(calc(.65 * var(--mg-patron-flote-tilt))) scale(1.01); }
    75% { transform: translate3d(0, calc(.75 * var(--mg-patron-flote-dist)), 0) rotate(calc(-.35 * var(--mg-patron-flote-tilt))) scale(.992); }
  }

  @keyframes mg-isotipo-brillo {
    0%, 18% { transform: translate3d(-155%, 0, 0) rotate(24deg); opacity: 0; }
    28% { opacity: .65; }
    46% { transform: translate3d(175%, 0, 0) rotate(24deg); opacity: 0; }
    100% { transform: translate3d(175%, 0, 0) rotate(24deg); opacity: 0; }
  }

  /* ── Opción 1: «Isotipo logo solo» (`data-mg-fondo="isotipo-solo"`), disponible en todos los temas ── */
  [data-mg-fondo="isotipo-solo"] .mgui-escena__lienzo,
  [data-mg-fondo="isotipo-solo"] .mgui-escena__respaldo,
  [data-mg-fondo="patron-animado"] .mgui-escena__lienzo,
  [data-mg-fondo="patron-animado"] .mgui-escena__respaldo {
    display: none;
  }

  .mgui-escena-isotipo {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  .mgui-escena-isotipo__flote {
    position: relative;
    inline-size: var(--mg-isotipo-solo-tam);
    block-size: var(--mg-isotipo-solo-tam);
    margin-inline-start: 28vw;
    animation: mg-isotipo-flotar var(--mg-isotipo-duracion) ease-in-out infinite;
    will-change: transform;
  }
  .mgui-escena-isotipo__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    opacity: .88;
  }
  .mgui-escena-isotipo__brillo {
    position: absolute;
    inset: -12%;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--mg-color-superficie) 72%, transparent) 50%, transparent 60%, transparent 100%);
    mix-blend-mode: screen;
    animation: mg-isotipo-brillo calc(var(--mg-isotipo-duracion) * 1.15) ease-in-out infinite;
  }

  /* Respaldo CSS puro para vista previa en vivo de `isotipo-solo` cuando aún no se recargó el DOM */
  [data-mg-fondo="isotipo-solo"] body:not(:has(.mgui-escena-isotipo))::after {
    content: "";
    position: fixed;
    inset-block-start: 50%;
    inset-inline-end: 8vw;
    inline-size: var(--mg-isotipo-solo-tam);
    block-size: var(--mg-isotipo-solo-tam);
    margin-block-start: calc(-.5 * var(--mg-isotipo-solo-tam));
    z-index: 0;
    pointer-events: none;
    background: url("/r3/marca/isotipo-logo.png") center / contain no-repeat;
    opacity: .86;
    animation: mg-isotipo-flotar var(--mg-isotipo-duracion) ease-in-out infinite;
  }

  /* ── Opción 2: «Trama animada MG» (`data-mg-fondo="patron-animado"`, de mercadogestion-fondo-animado.zip) ── */
  .mgui-escena-patron {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background:
      radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--mg-color-superficie) 42%, transparent), transparent 34%),
      radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--mg-color-accion-suave) 38%, transparent), transparent 38%),
      url("/r3/escena/fondo.jpg") center / cover no-repeat,
      var(--mg-color-fondo);
  }
  [data-mg-tema$="-profundo"] .mgui-escena-patron,
  [data-mg-tema="oscuro"] .mgui-escena-patron,
  [data-mg-tema="carbon"] .mgui-escena-patron,
  [data-mg-tema="negro"] .mgui-escena-patron,
  [data-mg-tema="crepusculo"] .mgui-escena-patron {
    background:
      radial-gradient(circle at 18% 16%, var(--mg-escena-azul), transparent 44%),
      radial-gradient(circle at 82% 76%, var(--mg-escena-turquesa), transparent 44%),
      var(--mg-color-fondo);
  }
  .mgui-escena-patron__textos,
  .mgui-escena-patron__marcas {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .mgui-escena-patron__textos {
    background-image: url("/r3/escena/patron-texto-portrait.svg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .92;
  }
  @media (min-width: 48rem) {
    .mgui-escena-patron__textos {
      background-image: url("/r3/escena/patron-texto-desktop.svg");
    }
  }
  .mgui-escena-patron__slot {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 0;
    block-size: 0;
  }
  .mgui-escena-patron__rotacion {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--mg-patron-escala));
    transform-origin: center center;
  }
  .mgui-escena-patron__rotacion--a45 { transform: translate(-50%, -50%) rotate(45deg) scale(var(--mg-patron-escala)); }
  .mgui-escena-patron__rotacion--a225 { transform: translate(-50%, -50%) rotate(225deg) scale(var(--mg-patron-escala)); }
  .mgui-escena-patron__flote {
    will-change: transform;
    animation: mg-isotipo-flotar var(--mg-isotipo-duracion) ease-in-out infinite;
  }
  .mgui-escena-patron__isotipo {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
  }
  .mgui-escena-patron__slot--grande .mgui-escena-patron__isotipo {
    inline-size: clamp(4.25rem, 6.2vw, 7.625rem);
    block-size: clamp(4.25rem, 6.2vw, 7.625rem);
  }
  .mgui-escena-patron__slot--pequeno .mgui-escena-patron__isotipo {
    inline-size: clamp(2.875rem, 4.35vw, 5.375rem);
    block-size: clamp(2.875rem, 4.35vw, 5.375rem);
  }
  .mgui-escena-patron__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .mgui-escena-patron__brillo {
    position: absolute;
    inset: -14%;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--mg-color-superficie) 72%, transparent) 49%, transparent 60%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: mg-isotipo-brillo calc(var(--mg-isotipo-duracion) * 1.15) ease-in-out infinite;
  }

  /* Posiciones de los 24 slots diagonales */
  .mgui-escena-patron__slot--s01 { inset-inline-start: 92.65%; inset-block-start: -11.39%; }
  .mgui-escena-patron__slot--s02 { inset-inline-start: 10.67%; inset-block-start: -3.27%; }
  .mgui-escena-patron__slot--s03 { inset-inline-start: 33.42%; inset-block-start: 37.09%; }
  .mgui-escena-patron__slot--s04 { inset-inline-start: 56.17%; inset-block-start: 77.45%; }
  .mgui-escena-patron__slot--s05 { inset-inline-start: -4.46%; inset-block-start: 85.57%; }
  .mgui-escena-patron__slot--s06 { inset-inline-start: 78.91%; inset-block-start: 117.81%; }
  .mgui-escena-patron__slot--s07 { inset-inline-start: 71.15%; inset-block-start: -9.85%; }
  .mgui-escena-patron__slot--s08 { inset-inline-start: 87.23%; inset-block-start: 18.69%; }
  .mgui-escena-patron__slot--s09 { inset-inline-start: 103.32%; inset-block-start: 47.24%; }
  .mgui-escena-patron__slot--s10 { inset-inline-start: 5.56%; inset-block-start: 19.37%; }
  .mgui-escena-patron__slot--s11 { inset-inline-start: 21.65%; inset-block-start: 47.91%; }
  .mgui-escena-patron__slot--s12 { inset-inline-start: 37.73%; inset-block-start: 76.46%; }
  .mgui-escena-patron__slot--s13 { inset-inline-start: 53.82%; inset-block-start: 105%; }
  .mgui-escena-patron__slot--s14 { inset-inline-start: 47.62%; inset-block-start: -11.35%; }
  .mgui-escena-patron__slot--s15 { inset-inline-start: 70.37%; inset-block-start: 29.01%; }
  .mgui-escena-patron__slot--s16 { inset-inline-start: 93.12%; inset-block-start: 69.37%; }
  .mgui-escena-patron__slot--s17 { inset-inline-start: -13.02%; inset-block-start: 37.13%; }
  .mgui-escena-patron__slot--s18 { inset-inline-start: 9.73%; inset-block-start: 77.49%; }
  .mgui-escena-patron__slot--s19 { inset-inline-start: 32.47%; inset-block-start: 117.85%; }
  .mgui-escena-patron__slot--s20 { inset-inline-start: 29.38%; inset-block-start: -0.94%; }
  .mgui-escena-patron__slot--s21 { inset-inline-start: 45.47%; inset-block-start: 27.6%; }
  .mgui-escena-patron__slot--s22 { inset-inline-start: 61.55%; inset-block-start: 56.15%; }
  .mgui-escena-patron__slot--s23 { inset-inline-start: 77.64%; inset-block-start: 84.69%; }
  .mgui-escena-patron__slot--s24 { inset-inline-start: 93.72%; inset-block-start: 113.23%; }

  /* Desfases escalonados de animación */
  .mgui-escena-patron__slot--s01 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s01 .mgui-escena-patron__brillo { animation-delay: -0.2s; }
  .mgui-escena-patron__slot--s02 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s02 .mgui-escena-patron__brillo { animation-delay: -1.1s; }
  .mgui-escena-patron__slot--s03 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s03 .mgui-escena-patron__brillo { animation-delay: -2.4s; }
  .mgui-escena-patron__slot--s04 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s04 .mgui-escena-patron__brillo { animation-delay: -3.6s; }
  .mgui-escena-patron__slot--s05 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s05 .mgui-escena-patron__brillo { animation-delay: -4.8s; }
  .mgui-escena-patron__slot--s06 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s06 .mgui-escena-patron__brillo { animation-delay: -5.5s; }
  .mgui-escena-patron__slot--s07 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s07 .mgui-escena-patron__brillo { animation-delay: -0.7s; }
  .mgui-escena-patron__slot--s08 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s08 .mgui-escena-patron__brillo { animation-delay: -1.9s; }
  .mgui-escena-patron__slot--s09 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s09 .mgui-escena-patron__brillo { animation-delay: -3.1s; }
  .mgui-escena-patron__slot--s10 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s10 .mgui-escena-patron__brillo { animation-delay: -4.2s; }
  .mgui-escena-patron__slot--s11 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s11 .mgui-escena-patron__brillo { animation-delay: -5.4s; }
  .mgui-escena-patron__slot--s12 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s12 .mgui-escena-patron__brillo { animation-delay: -6.2s; }
  .mgui-escena-patron__slot--s13 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s13 .mgui-escena-patron__brillo { animation-delay: -0.5s; }
  .mgui-escena-patron__slot--s14 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s14 .mgui-escena-patron__brillo { animation-delay: -1.6s; }
  .mgui-escena-patron__slot--s15 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s15 .mgui-escena-patron__brillo { animation-delay: -2.8s; }
  .mgui-escena-patron__slot--s16 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s16 .mgui-escena-patron__brillo { animation-delay: -3.9s; }
  .mgui-escena-patron__slot--s17 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s17 .mgui-escena-patron__brillo { animation-delay: -5.1s; }
  .mgui-escena-patron__slot--s18 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s18 .mgui-escena-patron__brillo { animation-delay: -6.4s; }
  .mgui-escena-patron__slot--s19 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s19 .mgui-escena-patron__brillo { animation-delay: -0.9s; }
  .mgui-escena-patron__slot--s20 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s20 .mgui-escena-patron__brillo { animation-delay: -2.2s; }
  .mgui-escena-patron__slot--s21 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s21 .mgui-escena-patron__brillo { animation-delay: -3.4s; }
  .mgui-escena-patron__slot--s22 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s22 .mgui-escena-patron__brillo { animation-delay: -4.6s; }
  .mgui-escena-patron__slot--s23 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s23 .mgui-escena-patron__brillo { animation-delay: -5.8s; }
  .mgui-escena-patron__slot--s24 .mgui-escena-patron__flote, .mgui-escena-patron__slot--s24 .mgui-escena-patron__brillo { animation-delay: -6.7s; }

  /* Respaldo CSS puro para vista previa en vivo de `patron-animado` antes de recargar el DOM */
  [data-mg-fondo="patron-animado"] body:not(:has(.mgui-escena-patron))::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      url("/r3/escena/patron-texto-desktop.svg") center / 100% 100% no-repeat,
      url("/r3/escena/fondo.jpg") center / cover no-repeat;
    opacity: .92;
  }
  [data-mg-fondo="patron-animado"] body:not(:has(.mgui-escena-patron))::after {
    content: "";
    position: fixed;
    inset-block-start: 50%;
    inset-inline-end: 10vw;
    inline-size: var(--mg-isotipo-solo-tam);
    block-size: var(--mg-isotipo-solo-tam);
    margin-block-start: calc(-.5 * var(--mg-isotipo-solo-tam));
    z-index: 0;
    pointer-events: none;
    background: url("/r3/marca/isotipo-logo.png") center / contain no-repeat;
    animation: mg-isotipo-flotar var(--mg-isotipo-duracion) ease-in-out infinite;
  }

  /* Quieto / sin movimiento pausa las animaciones */
  [data-mg-escena-efecto="quieto"] .mgui-escena-isotipo__flote,
  [data-mg-escena-efecto="quieto"] .mgui-escena-isotipo__brillo,
  [data-mg-escena-efecto="quieto"] .mgui-escena-patron__flote,
  [data-mg-escena-efecto="quieto"] .mgui-escena-patron__brillo,
  [data-mg-escena-efecto="quieto"] body::after,
  [data-mg-movimiento="sin"] .mgui-escena-isotipo__flote,
  [data-mg-movimiento="sin"] .mgui-escena-isotipo__brillo,
  [data-mg-movimiento="sin"] .mgui-escena-patron__flote,
  [data-mg-movimiento="sin"] .mgui-escena-patron__brillo,
  [data-mg-movimiento="sin"] body::after {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    .mgui-escena-isotipo__flote,
    .mgui-escena-isotipo__brillo,
    .mgui-escena-patron__flote,
    .mgui-escena-patron__brillo {
      animation-play-state: paused;
    }
  }

  /* ── web/r3/fuente/estado.css ── */
  /* Estados de página: vacío, sin permiso, límite alcanzado. Explican el próximo paso. */
  .mgui-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mg-space-2);
    margin-bottom: var(--mg-space-4);
    padding: var(--mg-space-6);
    border: 1px dashed var(--mg-color-borde-control);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-state__title { margin: 0; font-size: var(--mg-type-lg); }
  .mgui-state__text { margin: 0; color: var(--mg-color-texto-atenuado); }
  .mgui-state__actions { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin-top: var(--mg-space-2); }
  .mgui-state--forbidden { border-style: solid; border-color: var(--mg-status-danger-borde); }
  .mgui-state--limit { border-style: solid; border-color: var(--mg-status-warning-borde); }
  .mgui-state__meter { width: 100%; max-width: 20rem; height: .75rem; }

  /* ── web/r3/fuente/formas-pago.css ── */
  /*
   * FP (1761) · «Formas de pago» (`/app/configuracion/formas-de-pago`, `server/src/web/r3-formas-pago.ts`): tabla con
   * isotipo, nombre, categoría, casilla «Habilitar» y selector de cuenta contable. Composición dentro de `.mgui-card`,
   * agrupando por categoría. Isotipo cuadrado de 32×32, centrado; sin bordes propios para no competir con el isotipo
   * SVG. Fila con `data-mg-categoria` para que un ajuste futuro pueda matizar por categoría sin tocar el marcado.
   */

  .mgui-formas-pago-wrap {
    overflow-x: auto;
    min-inline-size: 0;
  }

  .mgui-formas-pago-tabla {
    inline-size: 100%;
    border-collapse: collapse;
  }

  .mgui-formas-pago-th {
    text-align: start;
    padding: var(--mg-space-2) var(--mg-space-3);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto-sutil);
    border-block-end: 1px solid var(--mg-color-borde);
  }
  .mgui-formas-pago-th--iso {
    inline-size: 3rem;
  }
  .mgui-formas-pago-th--hab {
    inline-size: 5rem;
    text-align: center;
  }

  .mgui-formas-pago-fila {
    border-block-end: 1px solid var(--mg-color-borde-suave);
  }
  .mgui-formas-pago-fila:last-child {
    border-block-end: 0;
  }

  .mgui-formas-pago-celda {
    padding: var(--mg-space-2) var(--mg-space-3);
    vertical-align: middle;
  }
  .mgui-formas-pago-celda--iso {
    inline-size: 3rem;
    text-align: center;
  }
  .mgui-formas-pago-celda--hab {
    text-align: center;
  }
  .mgui-formas-pago-celda--nombre label {
    display: inline-flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    cursor: pointer;
  }

  .mgui-formas-pago-iso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--mg-radius-sm);
    overflow: hidden;
  }
  .mgui-formas-pago-iso svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }
  .mgui-formas-pago-iso--placeholder {
    background: var(--mg-color-fondo);
    border: 1px dashed var(--mg-color-borde);
  }

  .mgui-formas-pago-nombre {
    font-size: var(--mg-type-base);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
  }
  .mgui-formas-pago-cat {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-atenuado);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .mgui-formas-pago-select {
    inline-size: 100%;
    min-inline-size: 12rem;
  }

  .mgui-formas-pago-acciones {
    margin-block-start: var(--mg-space-4);
    justify-content: flex-end;
  }

  /* Isotipo al lado del nombre en el paso 6 de «Emitir» (una cadencia visual con la tabla de arriba). */
  .mgui-formas-pago-pastilla {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding-inline: var(--mg-space-1);
  }
  .mgui-formas-pago-pastilla .mgui-formas-pago-iso {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  @media not all and (min-width: 48rem) {
    .mgui-formas-pago-th--iso,
    .mgui-formas-pago-celda--iso {
      display: none;
    }
    .mgui-formas-pago-select {
      min-inline-size: 100%;
    }
  }

  /* ── web/r3/fuente/galeria.css ── */
  /* Galería de componentes (Control, /galeria). */
  .mgui-galeria__seccion { margin-bottom: var(--mg-space-12); }
  .mgui-galeria__nota { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-galeria__muestras { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--mg-space-4); align-items: start; }
  .mgui-galeria__muestra { padding: var(--mg-space-4); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie); }
  .mgui-galeria__rotulo { margin: 0 0 var(--mg-space-3); font-family: var(--mg-font-ui); font-size: var(--mg-type-xs); font-weight: var(--mg-weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--mg-color-texto-atenuado); }
  .mgui-galeria__indice { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin: 0 0 var(--mg-space-8); padding: 0; list-style: none; }
  /* F-VC · en la galería el aviso flotante se muestra en su lugar (en una pantalla flota abajo a la derecha). */
  .mgui-galeria__fijo .mgui-notificacion { position: static; inline-size: auto; box-shadow: var(--mg-elevation-1); }

  /* ── web/r3/fuente/grafico-cotizacion.css ── */
  /*
   * mgui-grafico-cotizacion — O21 · gráfico de cotización inline (patrón intradiario portado de
   * exportbrazil.org `IntradayChart.jsx` + `CommodityChart.jsx`, server-render SVG, 0 JS, CSP OK).
   *
   * Estructura:
   *   .mgui-grafico-cotizacion                   contenedor compacto (una tarjeta por moneda)
   *     .mgui-grafico-cotizacion__cabeza         fila: moneda · valorFinal · variación %
   *       .mgui-grafico-cotizacion__eyebrow      moneda (ISO 4217, p. ej. «USD»): mono, atenuado
   *       .mgui-grafico-cotizacion__valor        valor final: mono, grande, color texto
   *       .mgui-grafico-cotizacion__variacion    «+2,34 %» verde si subió, «-1,10 %» rojo si bajó
   *     .mgui-grafico-cotizacion__svg            el gráfico (viewBox responsivo)
   *       .mgui-grafico-cotizacion__ref          línea punteada horizontal (referencia = 1er valor)
   *       .mgui-grafico-cotizacion__area         polígono entre la curva y la referencia (fill)
   *       .mgui-grafico-cotizacion__linea        la polilínea
   *       .mgui-grafico-cotizacion__puntos       puntos en primer y último
   *     .mgui-grafico-cotizacion__nota           pie: fuente/regla · fecha
   *
   * Tokens nuevos: `--mg-chart-positive`, `--mg-chart-negative`, `--mg-chart-ref` (fallback a
   * `--mg-status-complete-borde`, `--mg-status-danger-borde` y `--mg-color-borde`).
   */
  .mgui-grafico-cotizacion {
    display: flex; flex-direction: column; gap: var(--mg-space-1);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-grafico-cotizacion__cabeza {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-1) var(--mg-space-2);
  }
  .mgui-grafico-cotizacion__eyebrow {
    font-family: var(--mg-font-numeric);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-grafico-cotizacion__valor {
    font-family: var(--mg-font-numeric);
    font-size: var(--mg-type-lg);
    font-weight: var(--mg-weight-bold);
    color: var(--mg-color-texto);
    font-variant-numeric: tabular-nums;
  }
  .mgui-grafico-cotizacion__variacion {
    font-family: var(--mg-font-numeric);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    font-variant-numeric: tabular-nums;
    margin-inline-start: auto;
  }
  .mgui-grafico-cotizacion__variacion--pos { color: var(--mg-status-complete-texto, var(--mg-status-complete-borde)); }
  .mgui-grafico-cotizacion__variacion--neg { color: var(--mg-status-danger-texto); }
  .mgui-grafico-cotizacion__svg {
    display: block;
    inline-size: 100%;
    block-size: 72px;
  }
  .mgui-grafico-cotizacion__ref {
    stroke: var(--mg-color-borde);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    fill: none;
  }
  .mgui-grafico-cotizacion__linea {
    stroke-width: 1.75;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .mgui-grafico-cotizacion__area { opacity: .18; }
  .mgui-grafico-cotizacion__puntos { fill: currentColor; }
  .mgui-grafico-cotizacion__linea--pos { color: var(--mg-status-complete-borde); stroke: currentColor; }
  .mgui-grafico-cotizacion__linea--pos .mgui-grafico-cotizacion__area { fill: currentColor; }
  .mgui-grafico-cotizacion__linea--neg { color: var(--mg-status-danger-borde); stroke: currentColor; }
  .mgui-grafico-cotizacion__linea--neg .mgui-grafico-cotizacion__area { fill: currentColor; }
  .mgui-grafico-cotizacion__nota { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-grafico-cotizacion__vacio { margin: var(--mg-space-1) 0 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); font-style: italic; }

  /* Lista de gráficos (una tarjeta por moneda): en el detalle plegable de cotizaciones del paso de
   * moneda, los armamos como grid responsive para que entren varios por fila (como las fichas de
   * commodity en exportbrazil.org). */
  .mgui-grafico-cotizacion-lista {
    display: grid;
    gap: var(--mg-space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }

  /* ── web/r3/fuente/grafito.css ── */
  /*
   * mgui · GRAFITO — la familia «Neutrales y capas precisas» (TEMAS-ADICIONALES del paquete Cristales V3, tercera prioridad):
   * `grafito-claro` y `grafito-profundo`. El selector `[data-mg-tema^="grafito-"]` acota TODAS las reglas: en otro tema este
   * archivo no pinta nada. Los valores salen de los tokens --mg-grafito-* que emite `core/familias.js` por tema (medidos).
   *
   * Inspiración: Carbon (IBM): neutros, tokens por función y capas que ACLARAN al elevarse en el tema profundo (capa-1 <
   * capa-2 < capa-3). Sin sombras: la profundidad la dan las capas y separadores finos y precisos; el azul de acción queda
   * concentrado en lo que importa (foco, fila/entrada seleccionada con una barra de 3 px, botón primario). Pensado para
   * inventario, conciliación, movimientos y vistas con muchos registros.
   *
   * Riesgo que evita (TEMAS-ADICIONALES §3): «aplanar todo en un gris» — cada capa se distingue de la de al lado (medido) y el
   * texto secundario conserva su contraste sobre todas.
   */

  /* ── Contenido: capa-1 plana con separadores; sin elevación ─────────────────────────────────────────────────────── */
  [data-mg-tema^="grafito-"] .mgui-card,
  [data-mg-tema^="grafito-"] .mgui-metric,
  [data-mg-tema^="grafito-"] .mgui-state,
  [data-mg-tema^="grafito-"] .mgui-skeleton--card,
  [data-mg-tema^="grafito-"] .mgui-tramite__actual,
  [data-mg-tema^="grafito-"] .mgui-emitir-paso,
  [data-mg-tema^="grafito-"] .mgui-table-wrap,
  [data-mg-tema^="grafito-"] .mgui-plegable,
  [data-mg-tema^="grafito-"] .mgui-filtros__panel {
    background: var(--mg-grafito-capa-1);
    border-color: var(--mg-grafito-separador);
    box-shadow: none;
  }
  /* Dentro de una capa, la siguiente (una tarjeta en una tarjeta, una tabla en un paso): capa-2. */
  [data-mg-tema^="grafito-"] :is(.mgui-card, .mgui-emitir-paso, .mgui-dialog) :is(.mgui-card:not(.mgui-emitir-seccion), .mgui-metric, .mgui-state, .mgui-table-wrap),
  [data-mg-tema^="grafito-"] .mgui-card--sunken { background: var(--mg-grafito-capa-2); }
  [data-mg-tema^="grafito-"] .mgui-card__footer { background: var(--mg-grafito-capa-2); border-color: var(--mg-grafito-separador); }

  /* ── Tablas densas: cabecera en capa-2, filas con línea fina, encabezado ordenado en texto pleno ─────────────────── */
  [data-mg-tema^="grafito-"] .mgui-table__head-cell { background: var(--mg-grafito-capa-2); border-bottom-color: var(--mg-grafito-separador); }
  [data-mg-tema^="grafito-"] .mgui-table__cell { border-bottom-color: var(--mg-grafito-separador); }
  [data-mg-tema^="grafito-"] .mgui-table tbody tr:hover > .mgui-table__cell { background: var(--mg-grafito-capa-2); }

  /* ── Lo que flota: capa elevada con separador (sin sombra) ─────────────────────────────────────────────────────── */
  [data-mg-tema^="grafito-"] .mgui-app-marcas,
  [data-mg-tema^="grafito-"] .mgui-cascara__barra,
  [data-mg-tema^="grafito-"] .mgui-emitir-pie,
  [data-mg-tema^="grafito-"] .mgui-app__accesos,
  [data-mg-tema^="grafito-"] .mgui-app__atajos,
  [data-mg-tema^="grafito-"] .mgui-app__tirador,
  [data-mg-tema^="grafito-"] .mgui-dialog,
  [data-mg-tema^="grafito-"] .mgui-paleta,
  [data-mg-tema^="grafito-"] .mgui-ayuda__cajon,
  [data-mg-tema^="grafito-"] .mgui-menu-acciones__panel,
  [data-mg-tema^="grafito-"] .mgui-idioma__panel,
  [data-mg-tema^="grafito-"] .mgui-bandeja__panel,
  [data-mg-tema^="grafito-"] .mgui-notificacion,
  [data-mg-tema^="grafito-"] .mgui-telefono__panel,
  [data-mg-tema^="grafito-"] .mgui-direccion__panel,
  [data-mg-tema^="grafito-"] .mgui-selector-buscable__panel,
  [data-mg-tema^="grafito-"] .mgui-apariencia-panel {
    background: var(--mg-grafito-elevada);
    border-color: var(--mg-grafito-separador);
    box-shadow: 0 0 0 1px var(--mg-grafito-separador);
  }
  [data-mg-tema^="grafito-"] .mgui-app-menu__lista--sub,
  [data-mg-tema^="grafito-"] .mgui-app-menu__sesion { border-color: var(--mg-grafito-separador); }
  /* La entrada activa del lateral: barra de 3 px en el azul de acción (además del fondo sólido de siempre). */
  [data-mg-tema^="grafito-"] .mgui-app-menu__enlace[aria-current="page"] { box-shadow: inset 3px 0 0 var(--mg-color-enlace); }

  /* ── Campos: capa-2 con el borde de control (medido) y foco de 2 px en el azul de acción ───────────────────────── */
  [data-mg-tema^="grafito-"] .mgui-field__control,
  [data-mg-tema^="grafito-"] .mgui-buscador__control,
  [data-mg-tema^="grafito-"] .mgui-telefono__pais,
  [data-mg-tema^="grafito-"] .mgui-selector-buscable__boton { background: var(--mg-grafito-capa-2); }
  [data-mg-tema^="grafito-"] .mgui-field__control:disabled,
  [data-mg-tema^="grafito-"] .mgui-field__control--readonly { background: var(--mg-grafito-capa-3); }
  [data-mg-tema^="grafito-"] .mgui-btn--secondary { background: var(--mg-grafito-capa-2); border-color: var(--mg-color-borde-control); color: var(--mg-color-texto); box-shadow: none; }
  [data-mg-tema^="grafito-"] .mgui-btn--secondary:hover { background: var(--mg-grafito-capa-3); }
  [data-mg-tema^="grafito-"] .mgui-btn:not(.mgui-btn--quiet) { box-shadow: none; }

  /* ── Chips, opciones y segmentados: capas, y la selección con barra ────────────────────────────────────────────── */
  [data-mg-tema^="grafito-"] .mgui-eleccion__chip,
  [data-mg-tema^="grafito-"] .mgui-opcion-pill__pastilla,
  [data-mg-tema^="grafito-"] .mgui-opcion__caja,
  [data-mg-tema^="grafito-"] .mgui-paginacion__enlace:not(.is-actual, .is-disabled),
  [data-mg-tema^="grafito-"] .mgui-accion:not(.mgui-accion--primaria),
  [data-mg-tema^="grafito-"] .mgui-paleta-pagina__opcion { background: var(--mg-grafito-capa-2); border-color: var(--mg-grafito-separador); }
  [data-mg-tema^="grafito-"] .mgui-segmentado__grupo { background: var(--mg-grafito-capa-2); border-color: var(--mg-grafito-separador); }
  [data-mg-tema^="grafito-"] .mgui-segmentado__control:checked + .mgui-segmentado__opcion,
  [data-mg-tema^="grafito-"] .mgui-segmentado__opcion.is-actual { background: var(--mg-grafito-capa-3); box-shadow: inset 0 -2px 0 var(--mg-color-accion); }
  [data-mg-tema^="grafito-"] .mgui-opcion__control:checked ~ .mgui-opcion__caja {
    background: var(--mg-grafito-capa-3);
    border-color: var(--mg-color-accion);
    box-shadow: inset 3px 0 0 var(--mg-color-accion);
  }
  [data-mg-tema^="grafito-"] .mgui-interruptor__pista,
  [data-mg-tema^="grafito-"] .mgui-badge:not(.mgui-badge--complete, .mgui-badge--warning, .mgui-badge--danger, .mgui-badge--info),
  [data-mg-tema^="grafito-"] .mgui-plegable__titulo,
  [data-mg-tema^="grafito-"] .mgui-opcion.is-disabled .mgui-opcion__caja,
  [data-mg-tema^="grafito-"] .mgui-paginacion__enlace.is-disabled { background: var(--mg-grafito-capa-3); }

  /* ── Impresión: la capa-1 plana ya imprime bien; se quitan las barras de selección ─────────────────────────────── */
  @media print {
    [data-mg-tema^="grafito-"] .mgui-opcion__control:checked ~ .mgui-opcion__caja,
    [data-mg-tema^="grafito-"] .mgui-app-menu__enlace[aria-current="page"] { box-shadow: none; }
  }

  /* ── web/r3/fuente/iconos.css ── */
  /*
   * Z-R · los ÍCONOS del menú lateral, del buscador (Ctrl+K) y de la barra de accesos de la App y de Control, como en
   * bo.valkyrie.ar: los trazos de Lucide 0.460.0 (los MISMOS de Valkyrie, copiados de lucide-react/dist/esm/icons sin tocar un
   * número; los arma tmp/agentes/z-r/bin/iconos.py). Son MÁSCARAS (`mask-image` con el trazo en un `data:`; CSP `img-src 'self'
   * data:`): el ícono toma el color del texto (`currentColor`), no agrega nodos ni bytes a cada pantalla (la hoja se guarda en
   * caché) y es siempre decorativo (`aria-hidden`; el nombre accesible lo da el rótulo). Con colores forzados (alto contraste
   * de Windows) se pinta con el color del texto del sistema.
   *
   * Licencia de los trazos de Lucide (ISC), como pide su aviso: ISC License. Copyright (c) for portions of Lucide are held by
   * Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
   * Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted,
   * provided that the above copyright notice and this permission notice appear in all copies. THE SOFTWARE IS PROVIDED "AS
   * IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE.
   */
  .mgui-ico {
    display: inline-block;
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    background-color: currentColor;
    -webkit-mask: var(--mgui-ico) center / contain no-repeat;
    mask: var(--mgui-ico) center / contain no-repeat;
  }
  .mgui-ico--sm { inline-size: 1rem; block-size: 1rem; }
  .mgui-ico--lg { inline-size: 1.5rem; block-size: 1.5rem; }
  @media (forced-colors: active) {
    .mgui-ico { forced-color-adjust: none; background-color: CanvasText; }
  }
  .mgui-ico--activity { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E"); }
  .mgui-ico--alarm-clock { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2'/%3E%3Cpath d='M5 3 2 6'/%3E%3Cpath d='m22 6-3-3'/%3E%3Cpath d='M6.38 18.7 4 21'/%3E%3Cpath d='M17.64 18.67 20 21'/%3E%3C/svg%3E"); }
  .mgui-ico--arrow-down { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); }
  .mgui-ico--arrow-up { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); }
  .mgui-ico--arrow-up-down { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E"); }
  .mgui-ico--badge-check { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
  .mgui-ico--badge-dollar-sign { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E"); }
  .mgui-ico--badge-percent { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M15 15h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--banknote { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--bar-chart-3 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); }
  .mgui-ico--blocks { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Cpath d='M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3'/%3E%3C/svg%3E"); }
  .mgui-ico--book-open { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); }
  .mgui-ico--boxes { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z'/%3E%3Cpath d='m7 16.5-4.74-2.85'/%3E%3Cpath d='m7 16.5 5-3'/%3E%3Cpath d='M7 16.5v5.17'/%3E%3Cpath d='M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z'/%3E%3Cpath d='m17 16.5-5-3'/%3E%3Cpath d='m17 16.5 4.74-2.85'/%3E%3Cpath d='M17 16.5v5.17'/%3E%3Cpath d='M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z'/%3E%3Cpath d='M12 8 7.26 5.15'/%3E%3Cpath d='m12 8 4.74-2.85'/%3E%3Cpath d='M12 13.5V8'/%3E%3C/svg%3E"); }
  .mgui-ico--building { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--building-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); }
  .mgui-ico--calculator { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--calendar-check-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m16 20 2 2 4-4'/%3E%3C/svg%3E"); }
  .mgui-ico--calendar-clock { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h5'/%3E%3Cpath d='M17.5 17.5 16 16.3V14'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E"); }
  .mgui-ico--calendar-range { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M17 14h-6'/%3E%3Cpath d='M13 18H7'/%3E%3Cpath d='M7 14h.01'/%3E%3Cpath d='M17 18h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--car { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
  .mgui-ico--chart-no-axes-column { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' x2='18' y1='20' y2='10'/%3E%3Cline x1='12' x2='12' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='14'/%3E%3C/svg%3E"); }
  .mgui-ico--check { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
  .mgui-ico--chevron-down { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  .mgui-ico--chevron-right { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
  .mgui-ico--circle-dollar-sign { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E"); }
  .mgui-ico--circle-help { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--clipboard-check { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
  .mgui-ico--clipboard-list { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--clipboard-signature { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-.5'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 1.73 1'/%3E%3Cpath d='M8 18h1'/%3E%3Cpath d='M21.378 12.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3C/svg%3E"); }
  .mgui-ico--coins { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3Cpath d='m16.71 13.88.7.71-2.82 2.82'/%3E%3C/svg%3E"); }
  .mgui-ico--contact { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 2v2'/%3E%3Cpath d='M7 22v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M8 2v2'/%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3C/svg%3E"); }
  .mgui-ico--container { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7.7c0-.6-.4-1.2-.8-1.5l-6.3-3.9a1.72 1.72 0 0 0-1.7 0l-10.3 6c-.5.2-.9.8-.9 1.4v6.6c0 .5.4 1.2.8 1.5l6.3 3.9a1.72 1.72 0 0 0 1.7 0l10.3-6c.5-.3.9-1 .9-1.5Z'/%3E%3Cpath d='M10 21.9V14L2.1 9.1'/%3E%3Cpath d='m10 14 11.9-6.9'/%3E%3Cpath d='M14 19.8v-8.1'/%3E%3Cpath d='M18 17.5V9.4'/%3E%3C/svg%3E"); }
  .mgui-ico--corner-down-left { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 10 4 15 9 20'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E"); }
  .mgui-ico--credit-card { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E"); }
  .mgui-ico--database-backup { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 12a9 3 0 0 0 5 2.69'/%3E%3Cpath d='M21 9.3V5'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 6.47 2.88'/%3E%3Cpath d='M12 12v4h4'/%3E%3Cpath d='M13 20a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L12 16'/%3E%3C/svg%3E"); }
  .mgui-ico--eye { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
  .mgui-ico--eye-off { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); }
  .mgui-ico--factory { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E"); }
  .mgui-ico--file-bar-chart { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M8 18v-2'/%3E%3Cpath d='M12 18v-4'/%3E%3Cpath d='M16 18v-6'/%3E%3C/svg%3E"); }
  .mgui-ico--file-check-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m3 15 2 2 4-4'/%3E%3C/svg%3E"); }
  .mgui-ico--file-plus-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M3 15h6'/%3E%3Cpath d='M6 12v6'/%3E%3C/svg%3E"); }
  .mgui-ico--file-search { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3'/%3E%3Cpath d='m9 18-1.5-1.5'/%3E%3Ccircle cx='5' cy='14' r='3'/%3E%3C/svg%3E"); }
  .mgui-ico--file-signature { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 5-2.414-2.414A2 2 0 0 0 14.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2'/%3E%3Cpath d='M21.378 12.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3Cpath d='M8 18h1'/%3E%3C/svg%3E"); }
  .mgui-ico--file-text { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
  .mgui-ico--file-up { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='m15 15-3-3-3 3'/%3E%3C/svg%3E"); }
  .mgui-ico--files { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-3a2 2 0 0 1-2-2V2'/%3E%3Cpath d='M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8'/%3E%3C/svg%3E"); }
  .mgui-ico--filter { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E"); }
  .mgui-ico--fingerprint { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4'/%3E%3Cpath d='M14 13.12c0 2.38 0 6.38-1 8.88'/%3E%3Cpath d='M17.29 21.02c.12-.6.43-2.3.5-3.02'/%3E%3Cpath d='M2 12a10 10 0 0 1 18-6'/%3E%3Cpath d='M2 16h.01'/%3E%3Cpath d='M21.8 16c.2-2 .131-5.354 0-6'/%3E%3Cpath d='M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2'/%3E%3Cpath d='M8.65 22c.21-.66.45-1.32.57-2'/%3E%3Cpath d='M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3C/svg%3E"); }
  .mgui-ico--flask-conical { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E"); }
  .mgui-ico--gauge { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E"); }
  .mgui-ico--git-branch { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='6' y1='3' y2='15'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E"); }
  .mgui-ico--git-compare { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M11 18H8a2 2 0 0 1-2-2V9'/%3E%3C/svg%3E"); }
  .mgui-ico--globe { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); }
  .mgui-ico--grip-vertical { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='5' r='1'/%3E%3Ccircle cx='9' cy='19' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Ccircle cx='15' cy='19' r='1'/%3E%3C/svg%3E"); }
  .mgui-ico--hand-coins { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17'/%3E%3Cpath d='m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9'/%3E%3Cpath d='m2 16 6 6'/%3E%3Ccircle cx='16' cy='9' r='2.9'/%3E%3Ccircle cx='6' cy='5' r='3'/%3E%3C/svg%3E"); }
  .mgui-ico--handshake { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E"); }
  .mgui-ico--hard-drive-download { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v8'/%3E%3Cpath d='m16 6-4 4-4-4'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2'/%3E%3Cpath d='M6 18h.01'/%3E%3Cpath d='M10 18h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--heart-pulse { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3Cpath d='M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27'/%3E%3C/svg%3E"); }
  .mgui-ico--house { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
  .mgui-ico--house-plus { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.22 2.416a2 2 0 0 0-2.511.057l-7 5.999A2 2 0 0 0 3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7.354'/%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M15 6h6'/%3E%3Cpath d='M18 3v6'/%3E%3C/svg%3E"); }
  .mgui-ico--info { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--key-round { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E"); }
  .mgui-ico--landmark { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' x2='21' y1='22' y2='22'/%3E%3Cline x1='6' x2='6' y1='18' y2='11'/%3E%3Cline x1='10' x2='10' y1='18' y2='11'/%3E%3Cline x1='14' x2='14' y1='18' y2='11'/%3E%3Cline x1='18' x2='18' y1='18' y2='11'/%3E%3Cpolygon points='12 2 20 7 4 7'/%3E%3C/svg%3E"); }
  .mgui-ico--languages { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E"); }
  .mgui-ico--layers { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
  .mgui-ico--layout-dashboard { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); }
  .mgui-ico--layout-template { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='7' x='3' y='3' rx='1'/%3E%3Crect width='9' height='7' x='3' y='14' rx='1'/%3E%3Crect width='5' height='7' x='16' y='14' rx='1'/%3E%3C/svg%3E"); }
  .mgui-ico--library { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 6 4 14'/%3E%3Cpath d='M12 6v14'/%3E%3Cpath d='M8 8v12'/%3E%3Cpath d='M4 4v16'/%3E%3C/svg%3E"); }
  .mgui-ico--life-buoy { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
  .mgui-ico--list-checks { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E"); }
  .mgui-ico--list-plus { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 12H3'/%3E%3Cpath d='M16 6H3'/%3E%3Cpath d='M16 18H3'/%3E%3Cpath d='M18 9v6'/%3E%3Cpath d='M21 12h-6'/%3E%3C/svg%3E"); }
  .mgui-ico--list-tree { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8'/%3E%3Cpath d='M21 6H8'/%3E%3Cpath d='M21 18h-8'/%3E%3Cpath d='M3 6v4c0 1.1.9 2 2 2h3'/%3E%3Cpath d='M3 10v6c0 1.1.9 2 2 2h3'/%3E%3C/svg%3E"); }
  .mgui-ico--loader-circle { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E"); }
  .mgui-ico--log-out { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E"); }
  .mgui-ico--map { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z'/%3E%3Cpath d='M15 5.764v15'/%3E%3Cpath d='M9 3.236v15'/%3E%3C/svg%3E"); }
  .mgui-ico--map-pin { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
  .mgui-ico--map-pinned { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712'/%3E%3C/svg%3E"); }
  .mgui-ico--menu { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3Cline x1='4' x2='20' y1='6' y2='6'/%3E%3Cline x1='4' x2='20' y1='18' y2='18'/%3E%3C/svg%3E"); }
  .mgui-ico--message-circle { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
  .mgui-ico--messages-square { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E"); }
  .mgui-ico--milestone { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M4 6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h13a2 2 0 0 0 1.152-.365l3.424-2.317a1 1 0 0 0 0-1.635l-3.424-2.318A2 2 0 0 0 17 6z'/%3E%3C/svg%3E"); }
  .mgui-ico--notebook-pen { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4'/%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Cpath d='M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3C/svg%3E"); }
  .mgui-ico--notebook-text { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M9.5 8h5'/%3E%3Cpath d='M9.5 12H16'/%3E%3Cpath d='M9.5 16H14'/%3E%3C/svg%3E"); }
  .mgui-ico--package { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E"); }
  .mgui-ico--package-check { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 2 2 4-4'/%3E%3Cpath d='M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cline x1='12' x2='12' y1='22' y2='12'/%3E%3C/svg%3E"); }
  .mgui-ico--package-open { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-9'/%3E%3Cpath d='M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z'/%3E%3Cpath d='M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13'/%3E%3Cpath d='M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z'/%3E%3C/svg%3E"); }
  .mgui-ico--package-plus { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16h6'/%3E%3Cpath d='M19 13v6'/%3E%3Cpath d='M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cline x1='12' x2='12' y1='22' y2='12'/%3E%3C/svg%3E"); }
  .mgui-ico--palette { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='black'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='black'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='black'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='black'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E"); }
  .mgui-ico--panel-left-close { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m16 15-3-3 3-3'/%3E%3C/svg%3E"); }
  .mgui-ico--panel-left-open { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m14 9 3 3-3 3'/%3E%3C/svg%3E"); }
  .mgui-ico--pencil { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }
  .mgui-ico--percent { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
  .mgui-ico--piggy-bank { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2V5z'/%3E%3Cpath d='M2 9v1c0 1.1.9 2 2 2h1'/%3E%3Cpath d='M16 11h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--pin { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
  .mgui-ico--plug { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z'/%3E%3C/svg%3E"); }
  .mgui-ico--plug-zap { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z'/%3E%3Cpath d='m2 22 3-3'/%3E%3Cpath d='M7.5 13.5 10 11'/%3E%3Cpath d='M10.5 16.5 13 14'/%3E%3Cpath d='m18 3-4 4h6l-4 4'/%3E%3C/svg%3E"); }
  .mgui-ico--plus { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
  .mgui-ico--qr-code { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1'/%3E%3Crect width='5' height='5' x='16' y='3' rx='1'/%3E%3Crect width='5' height='5' x='3' y='16' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 21v.01'/%3E%3Cpath d='M12 7v3a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M12 3h.01'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M16 12h1'/%3E%3Cpath d='M21 12v.01'/%3E%3Cpath d='M12 21v-1'/%3E%3C/svg%3E"); }
  .mgui-ico--receipt { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); }
  .mgui-ico--refresh-cw { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); }
  .mgui-ico--rocket { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"); }
  .mgui-ico--rotate-ccw { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
  .mgui-ico--route { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); }
  .mgui-ico--scale { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
  .mgui-ico--scan-barcode { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M8 7v10'/%3E%3Cpath d='M12 7v10'/%3E%3Cpath d='M17 7v10'/%3E%3C/svg%3E"); }
  .mgui-ico--scan-search { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m16 16-1.9-1.9'/%3E%3C/svg%3E"); }
  .mgui-ico--scroll-text { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12h-5'/%3E%3Cpath d='M15 8h-5'/%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E"); }
  .mgui-ico--search { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
  .mgui-ico--send { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E"); }
  .mgui-ico--server { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2' ry='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2' ry='2'/%3E%3Cline x1='6' x2='6.01' y1='6' y2='6'/%3E%3Cline x1='6' x2='6.01' y1='18' y2='18'/%3E%3C/svg%3E"); }
  .mgui-ico--settings { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
  .mgui-ico--settings-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-9'/%3E%3Cpath d='M14 17H5'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3C/svg%3E"); }
  .mgui-ico--share-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49'/%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49'/%3E%3C/svg%3E"); }
  .mgui-ico--shield { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
  .mgui-ico--shield-alert { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--shield-check { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
  .mgui-ico--ship { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1 .6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M19.38 20A11.6 11.6 0 0 0 21 14l-9-4-9 4c0 2.9.94 5.34 2.81 7.76'/%3E%3Cpath d='M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 2v3'/%3E%3C/svg%3E"); }
  .mgui-ico--shopping-bag { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
  .mgui-ico--shopping-basket { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 11-1 9'/%3E%3Cpath d='m19 11-4-7'/%3E%3Cpath d='M2 11h20'/%3E%3Cpath d='m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4'/%3E%3Cpath d='M4.5 15.5h15'/%3E%3Cpath d='m5 11 4-7'/%3E%3Cpath d='m9 11 1 9'/%3E%3C/svg%3E"); }
  .mgui-ico--shopping-cart { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E"); }
  .mgui-ico--sigma { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2'/%3E%3C/svg%3E"); }
  .mgui-ico--siren { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18v-6a5 5 0 1 1 10 0v6'/%3E%3Cpath d='M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z'/%3E%3Cpath d='M21 12h1'/%3E%3Cpath d='M18.5 4.5 18 5'/%3E%3Cpath d='M2 12h1'/%3E%3Cpath d='M12 2v1'/%3E%3Cpath d='m4.929 4.929.707.707'/%3E%3Cpath d='M12 12v6'/%3E%3C/svg%3E"); }
  .mgui-ico--sliders-horizontal { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E"); }
  .mgui-ico--smartphone { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--sparkles { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E"); }
  .mgui-ico--stamp { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M19.27 13.73A2.5 2.5 0 0 0 17.5 13h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1.5c0-.66-.26-1.3-.73-1.77Z'/%3E%3Cpath d='M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-3-3c-1.66 0-3 1-3 3s1 2 1 3.5V13'/%3E%3C/svg%3E"); }
  .mgui-ico--star { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); }
  .mgui-ico--store { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E"); }
  .mgui-ico--tag { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E"); }
  .mgui-ico--tags { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19'/%3E%3Cpath d='M9.586 5.586A2 2 0 0 0 8.172 5H3a1 1 0 0 0-1 1v5.172a2 2 0 0 0 .586 1.414L8.29 18.29a2.426 2.426 0 0 0 3.42 0l3.58-3.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='6.5' cy='9.5' r='.5' fill='black'/%3E%3C/svg%3E"); }
  .mgui-ico--ticket-percent { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='M15 15h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--trash-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' x2='10' y1='11' y2='17'/%3E%3Cline x1='14' x2='14' y1='11' y2='17'/%3E%3C/svg%3E"); }
  .mgui-ico--trending-up { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E"); }
  .mgui-ico--triangle-alert { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
  .mgui-ico--truck { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
  .mgui-ico--undo-2 { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E"); }
  .mgui-ico--upload { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' x2='12' y1='3' y2='15'/%3E%3C/svg%3E"); }
  .mgui-ico--user { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
  .mgui-ico--user-cog { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='15' r='3'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M10 15H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='m21.7 16.4-.9-.3'/%3E%3Cpath d='m15.2 13.9-.9-.3'/%3E%3Cpath d='m16.6 18.7.3-.9'/%3E%3Cpath d='m19.1 12.2.3-.9'/%3E%3Cpath d='m19.6 18.7-.4-1'/%3E%3Cpath d='m16.8 12.3-.4-1'/%3E%3Cpath d='m14.3 16.6 1-.4'/%3E%3Cpath d='m20.7 13.8 1-.4'/%3E%3C/svg%3E"); }
  .mgui-ico--user-plus { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E"); }
  .mgui-ico--users { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
  .mgui-ico--vault { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='black'/%3E%3Cpath d='m7.9 7.9 2.7 2.7'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5' fill='black'/%3E%3Cpath d='m13.4 10.6 2.7-2.7'/%3E%3Ccircle cx='7.5' cy='16.5' r='.5' fill='black'/%3E%3Cpath d='m7.9 16.1 2.7-2.7'/%3E%3Ccircle cx='16.5' cy='16.5' r='.5' fill='black'/%3E%3Cpath d='m13.4 13.4 2.7 2.7'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
  .mgui-ico--wallet { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }
  .mgui-ico--warehouse { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z'/%3E%3Cpath d='M6 18h12'/%3E%3Cpath d='M6 14h12'/%3E%3Crect width='12' height='12' x='6' y='10'/%3E%3C/svg%3E"); }
  .mgui-ico--x { --mgui-ico: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }

  /* ── web/r3/fuente/idioma.css ── */
  /*
   * Selector de idioma (DT-IDIOMA · docs/r3/MG-SELECTOR-IDIOMA-DISENO.md §2.5; SITIO · frente A). Sin JavaScript: el
   * panel es un popover declarativo (Escape, el clic afuera y el regreso del foco los pone el navegador). Propiedades
   * lógicas; sin colores crudos ni !important. Tres caminos, los tres con colores DECLARADOS (nunca un panel transparente
   * ni un `inherit` que pierda contraste): con anclaje (el panel bajo el disparador), sin anclaje (hoja inferior) y sin
   * popover (la lista a la vista, como tarjeta clara).
   */
  @keyframes mgui-idioma-entrar { from { opacity: 0; translate: 0 -.25rem; } }
  .mgui-idioma { display: inline-flex; align-items: center; }
  .mgui-idioma__disparador { anchor-name: --mgui-idioma; }
  .mgui-idioma__disparador::after {
    content: "";
    inline-size: .45em;
    block-size: .45em;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -.15em;
    transition: rotate var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-idioma:has(.mgui-idioma__panel:popover-open) .mgui-idioma__disparador::after { rotate: 225deg; translate: 0 .1em; }
  .mgui-idioma__emblema { flex: none; inline-size: 1.333em; block-size: 1em; }
  .mgui-idioma__panel {
    inset: auto;
    margin: 0;
    margin-block-start: var(--mg-space-1);
    padding-block: var(--mg-space-1);
    padding-inline: 0;
    position-anchor: --mgui-idioma;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-inline, flip-block;
    min-inline-size: 8.75rem;
    max-inline-size: calc(100vw - 2 * var(--mg-space-3));
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-2);
    font-size: var(--mg-type-sm);
  }
  .mgui-idioma__panel:popover-open { animation: mgui-idioma-entrar var(--mg-motion-fast) var(--mg-ease-out); }
  /* Sin anchor positioning (Safari < 26, Chrome < 129): hoja inferior, alineada al final. Nunca un tope calculado con la barra. */
  @supports not (position-area: block-end span-inline-start) {
    .mgui-idioma__panel {
      position: fixed;
      inset-block: auto var(--mg-space-3);
      inset-inline: var(--mg-space-3);
      margin: 0;
      margin-inline-start: auto;
      max-inline-size: min(20rem, calc(100vw - 2 * var(--mg-space-3)));
      max-block-size: calc(100dvh - 2 * var(--mg-space-3));
      overflow: auto;
    }
  }
  .mgui-idioma__lista { flex: 1 1 100%; margin: 0; padding: 0; list-style: none; }
  .mgui-idioma__opcion > a,
  .mgui-idioma__opcion > button {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-block: var(--mg-space-2);
    padding-inline: var(--mg-space-3);
    border: 0;
    background: transparent;
    color: var(--mg-color-texto);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .mgui-idioma__opcion > :hover { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-idioma__opcion > :focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: calc(-1 * var(--mg-focus-ring-width));
  }
  /* El actual: borde REAL (sobrevive a forced-colors) compensado con el relleno; las demás opciones NO llevan borde
     transparente, porque en alto contraste un borde transparente se pinta y la marca dejaría de distinguir. */
  .mgui-idioma__opcion > [aria-current="true"] {
    border-inline-start: 3px solid var(--mg-color-accion);
    padding-inline-start: calc(var(--mg-space-3) - 3px);
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-texto);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-idioma__elegido { margin-inline-start: auto; font-size: var(--mg-type-xs); font-weight: var(--mg-weight-semibold); }
  /* Un idioma en que la página no está: se dice (en ese idioma), con el color del texto, sin ofrecer un destino. */
  .mgui-idioma__nota {
    margin: 0;
    max-inline-size: 18rem;
    padding-block: var(--mg-space-1);
    padding-inline: var(--mg-space-3);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-xs);
  }
  .mgui-idioma__lista + .mgui-idioma__nota { margin-block-start: var(--mg-space-1); border-block-start: 1px solid var(--mg-color-borde); }
  .mgui-idioma--oscuro .mgui-idioma__disparador:focus-visible { outline-color: var(--mg-color-sobre-marca-profunda); }
  .mgui-idioma--lista .mgui-idioma__panel {
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    min-inline-size: 0;
  }
  .mgui-idioma--lista .mgui-idioma__lista { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); }
  .mgui-idioma--lista .mgui-idioma__opcion > a,
  .mgui-idioma--lista .mgui-idioma__opcion > button { inline-size: auto; }
  .mgui-idioma--lista.mgui-idioma--oscuro .mgui-idioma__opcion > :not([aria-current="true"], :hover) { color: var(--mg-color-sobre-marca-profunda); }
  .mgui-idioma--lista.mgui-idioma--oscuro .mgui-idioma__opcion > :focus-visible { outline-color: var(--mg-color-sobre-marca-profunda); }
  .mgui-idioma--muestra .mgui-idioma__disparador { anchor-name: none; }
  .mgui-idioma--muestra { flex-direction: column; align-items: flex-start; }
  .mgui-idioma--muestra .mgui-idioma__panel { position: static; margin: 0; margin-block-start: var(--mg-space-1); }
  @media (pointer: coarse) {
    .mgui-idioma__opcion > a,
    .mgui-idioma__opcion > button { min-block-size: var(--mg-control-min); }
  }
  /* Sin popover (p. ej. Firefox ESR 115): la lista a la vista, como TARJETA clara (conserva superficie y texto: A-03). Va
     al final para ganarle también a la hoja inferior. */
  @supports not selector(:popover-open) {
    .mgui-idioma__disparador { display: none; }
    .mgui-idioma__panel { position: static; inset: auto; margin: 0; max-block-size: none; overflow: visible; }
    .mgui-idioma__lista { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); }
    .mgui-idioma__opcion > a,
    .mgui-idioma__opcion > button { inline-size: auto; }
  }

  /* ── web/r3/fuente/importacion-portal.css ── */
  /*
   * IMPORTACIONES · ola I3 · la página del ENLACE DEL PASO (`/importacion/<token>`, `server/src/web/r3-importacion-portal.ts`) y el
   * PASO VISTO DESDE AFUERA (`server/src/web/r3-paso-externo.ts`, común con el portal de I3b). Reusa la grilla de carga de UN renglón
   * de las importaciones (`.mgui-emisor-grid.mgui-carga-tipos`); acá sólo lo propio: la cabecera del paso, los datos en dos columnas
   * que en el teléfono se apilan, el texto de una persona de afuera tal como lo escribió y la foto achicada antes de subirla. Sólo
   * tokens.
   */
  .mgui-enlace { display: flex; flex-direction: column; gap: var(--mg-space-4); min-inline-size: 0; }
  .mgui-enlace [hidden] { display: none; }

  /* La cabecera: de quién es el pedido, qué paso y hasta cuándo. */
  .mgui-enlace__cabecera { display: flex; flex-direction: column; gap: var(--mg-space-2); }
  .mgui-enlace__cabecera > p { margin: 0; }
  .mgui-enlace__para { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-enlace__paso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); font-weight: var(--mg-weight-semibold); }
  .mgui-enlace__estado {
    margin: 0; padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-md);
    background: var(--mg-status-info-suave); color: var(--mg-status-info-texto); font-size: var(--mg-type-sm);
  }
  .mgui-enlace__vigencia { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }

  /* Los idiomas de la página (sin sesión: enlaces con ?lang=). */
  .mgui-enlace__idiomas { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }

  /* Los datos de la carpeta y del pedido del camión: término y valor; en el teléfono, uno debajo del otro. */
  .mgui-datos-externos {
    display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--mg-space-1) var(--mg-space-3); margin: 0;
  }
  .mgui-datos-externos > div { display: contents; }
  .mgui-datos-externos dt { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-datos-externos dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
  @media not all and (min-width: 40rem) {
    .mgui-datos-externos { grid-template-columns: 1fr; }
    .mgui-datos-externos dd { margin-block-end: var(--mg-space-2); }
  }

  /* Lo que escribió una persona (un nombre, una descripción, una nota): tal cual, sin romper la tarjeta. */
  .mgui-dato-externo { overflow-wrap: anywhere; }
  .mgui-texto-externo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .mgui-notas-externas { margin: 0; padding: 0; list-style: none; }
  .mgui-notas-externas > li {
    padding: var(--mg-space-2) var(--mg-space-3); border: 1px solid var(--mg-color-borde-suave); border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-notas-externas > li > p { margin: 0; }

  /* El paso de afuera: las tarjetas apiladas; en el teléfono, los botones de subir a todo el ancho. */
  .mgui-paso-externo { min-inline-size: 0; }
  @media not all and (min-width: 40rem) {
    .mgui-paso-externo .mgui-carga__acciones { flex: 1 1 100%; }
    .mgui-paso-externo .mgui-carga__acciones > .mgui-btn { inline-size: 100%; }
  }

  /* La foto que el guion achica en el teléfono antes de subirla: cuánto pesa ahora (lo escribe el guion con textContent). */
  .mgui-archivo-externo__nota { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }

  /* El pie del enlace: personal, no se comparte. */
  .mgui-enlace__pie { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); text-align: center; }

  /* ── web/r3/fuente/importaciones.css ── */
  /*
   * IMPORTACIONES · los tipos de importación (`r3-importaciones-tipos.ts`) y, después, la carpeta por pasos: el formulario de UN
   * renglón (reusa `.mgui-emisor-grid.mgui-carga` de Emitir) y las tablas REORDENABLES (asa de arrastre, fila arrastrada, fila
   * destino, botones a la derecha). Sólo tokens: ningún color ni medida inventados.
   */

  /* Los datos del tipo: pares rótulo/valor en una grilla que se acomoda al ancho (en el teléfono, uno debajo del otro). */
  .mgui-datos-tipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--mg-space-3) var(--mg-space-4); margin: 0 0 var(--mg-space-3); }
  .mgui-datos-tipo__fila { min-inline-size: 0; }
  .mgui-datos-tipo dt { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-datos-tipo dd { margin: 0; overflow-wrap: anywhere; }

  /*
   * El formulario de UN renglón: en la pc entra entero en una fila (nombre, responsable, plazo, clase y el botón; el rol interno, sólo
   * con «el importador»); cuando no entra, envuelve. Con una clase más que `.mgui-emisor-grid > …` (emitir.css) para ganarle sin
   * depender del orden de las hojas.
   * Ola 13 · `align-items: flex-start` para que los subtítulos o ayudas debajo de un campo no empujen su input hacia arriba, y
   * `.mgui-carga__acciones` desplazado el alto del rótulo (`1.75rem + var(--mg-space-1)`) para quedar alineado con los inputs.
   */
  .mgui-carga-tipos { align-items: flex-start; }
  .mgui-carga-tipos > .mgui-field { margin-block-end: 0; }
  .mgui-carga-tipos > [data-mg-oculto] { display: none; }
  .mgui-emisor-grid.mgui-carga-tipos > .mgui-grow { flex: 2 1 10rem; }
  .mgui-emisor-grid.mgui-carga-tipos > .mgui-field--md { flex: 1 1 11rem; }
  .mgui-emisor-grid.mgui-carga-tipos > .mgui-field--sm { flex: 1 1 9rem; }
  .mgui-emisor-grid.mgui-carga-tipos > .mgui-field--xs { flex: 0 0 5.5rem; }
  .mgui-emisor-grid.mgui-carga-tipos > .mgui-carga__acciones {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }
  @media not all and (min-width: 481px) {
    .mgui-emisor-grid.mgui-carga-tipos > .mgui-carga__acciones { margin-block-start: 0; }
  }
  .mgui-carga__titulo { margin: var(--mg-space-3) 0 var(--mg-space-2); font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); }
  .mgui-tipos-acciones { margin-block-start: var(--mg-space-3); }

  /* 1860 · cada plantilla con lo que trae debajo del botón; el enlace del paso y lo que admite, en «Cambiar el paso» (un fieldset sin
     marco: el plegable ya lo enmarca). */
  .mgui-tipos-plantilla { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mg-space-1); }
  .mgui-tipos-plantilla > form { margin: 0; }
  .mgui-tipos-plantilla__resumen { font-size: var(--mg-type-xs); }
  .mgui-tipos-enlace { margin: var(--mg-space-3) 0 0; padding: 0; border: 0; min-inline-size: 0; }
  .mgui-tipos-enlace > legend { padding: 0; }

  /*
   * Las tablas que se reordenan. Los botones de la derecha van en UN renglón: el contenedor no usa `.mgui-cluster`, que vive en la
   * capa de utilidades (envuelve) y le ganaría a cualquier regla de esta capa.
   */
  .mgui-reordenable__acciones { white-space: nowrap; }
  .mgui-reordenable__botones { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--mg-space-1); justify-content: flex-end; }
  .mgui-reordenable__mover { display: inline-flex; margin: 0; }
  .mgui-reordenable__botones > form { margin: 0; }
  .mgui-reordenable__orden { width: 3rem; }
  /* El titular de la fila es UN bloque (nombre, insignia y nota uno debajo del otro): en la ficha del teléfono no se reparte. */
  .mgui-reordenable__titulo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-reordenable__nota { font-size: var(--mg-type-xs); font-weight: var(--mg-weight-normal); }
  .mgui-reordenable__asa { cursor: grab; touch-action: none; }
  .mgui-reordenable__asa[hidden] { display: none; }
  .mgui-reordenable__asa:active { cursor: grabbing; }
  .mgui-reordenable tr[data-mg-arrastrando] { opacity: .45; }
  .mgui-reordenable tr[data-mg-sobre] > td,
  .mgui-reordenable tr[data-mg-sobre] > th { box-shadow: inset 0 2px 0 0 var(--mg-color-accion); }
  .mgui-reordenable tr[aria-current="true"] > td,
  .mgui-reordenable tr[aria-current="true"] > th { background: var(--mg-color-accion-suave); }
  .mgui-reordenable__ayuda { font-size: var(--mg-type-xs); }
  .mgui-reordenable__ayuda[data-mg-error] { color: var(--mg-status-danger-texto); font-weight: var(--mg-weight-semibold); }
  @media not all and (min-width: 768px) {
    .mgui-reordenable__orden { width: auto; }
    /* En la ficha: el rótulo a la izquierda y el valor a la derecha, que envuelve sin empujar el ancho. */
    .mgui-reordenable .mgui-table__cell > span { min-inline-size: 0; overflow-wrap: anywhere; }
    .mgui-reordenable__acciones { white-space: normal; }
  }

  /* Ola I2 (1874) · la carpeta por pasos: un botón suelto dentro de una fila o de una acción (un formulario POST de un solo botón, sin
     el margen ni el ancho de un formulario de verdad), y la lista de lo que falta para completar un paso. */
  form.mgui-pasos-boton { display: inline-flex; margin: 0; }
  .mgui-pasos-faltan { margin: 0; padding-inline-start: var(--mg-space-4); }

  /* ── web/r3/fuente/importe.css ── */
  /* Importe. Tabular siempre; el verde de dinero sólo para un resultado económico favorable; negativo en rojo alerta. */
  .mgui-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mgui-amount--empty { color: var(--mg-color-texto-atenuado); }
  .mgui-amount--favorable { color: var(--mg-money-positive-texto); font-weight: var(--mg-weight-semibold); }
  .mgui-amount--negative,
  .mgui-numero-negativo,
  [data-mg-negativo="si"] {
    color: var(--mg-status-danger-texto);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-amount--negative { color: var(--mg-status-danger-texto); font-weight: var(--mg-weight-semibold); }

  /* ── web/r3/fuente/insignia.css ── */
  /* Insignia de estado: texto siempre, nunca sólo color. Sin tono «money»: un estado no es dinero. */
  .mgui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding: 0 var(--mg-space-2);
    border: 1px solid var(--mg-color-borde);
    border-radius: 999px;
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    line-height: 1.6;
    white-space: nowrap;
  }
  .mgui-badge--complete { background: var(--mg-status-complete-suave); border-color: var(--mg-status-complete-borde); color: var(--mg-status-complete-texto); }
  .mgui-badge--warning { background: var(--mg-status-warning-suave); border-color: var(--mg-status-warning-borde); color: var(--mg-status-warning-texto); }
  .mgui-badge--danger { background: var(--mg-status-danger-suave); border-color: var(--mg-status-danger-borde); color: var(--mg-status-danger-texto); }
  .mgui-badge--info { background: var(--mg-status-info-suave); border-color: var(--mg-status-info-borde); color: var(--mg-status-info-texto); }
  .mgui-badge--neutral { background: var(--mg-color-fondo); border-color: var(--mg-color-borde-control); color: var(--mg-color-texto-atenuado); }

  /* ── web/r3/fuente/interruptor.css ── */
  /*
   * F-VC · interruptor: `<input type="checkbox" role="switch">` oculto pero enfocable; la pista y la perilla las dibuja la hoja
   * por el estado de la casilla (`:checked +`). El estado se lee también en texto (Sí/No), no sólo en el color.
   */
  .mgui-interruptor { position: relative; margin-block-end: var(--mg-space-4); }
  .mgui-interruptor__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
  }
  .mgui-interruptor__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-3);
    min-block-size: 2.5rem;
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    cursor: pointer;
  }
  .mgui-interruptor__pista {
    position: relative;
    flex: none;
    inline-size: 2.75rem;
    block-size: 1.5rem;
    border: 1px solid var(--mg-color-borde-control);
    border-radius: 999px;
    background: var(--mg-color-fondo);
    transition: background-color var(--mg-motion-fast) var(--mg-ease-out), border-color var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-interruptor__perilla {
    position: absolute;
    inset-block-start: .125rem;
    inset-inline-start: .125rem;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: 999px;
    background: var(--mg-color-borde-control);
    transition: transform var(--mg-motion-fast) var(--mg-ease-out), background-color var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-interruptor__texto { min-inline-size: 0; }
  .mgui-interruptor__estado {
    min-inline-size: 1.75rem;
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-interruptor__estado--si { display: none; }
  .mgui-interruptor__control:checked + .mgui-interruptor__etiqueta .mgui-interruptor__pista {
    border-color: var(--mg-color-accion);
    background: var(--mg-color-accion);
  }
  .mgui-interruptor__control:checked + .mgui-interruptor__etiqueta .mgui-interruptor__perilla {
    transform: translateX(1.25rem);
    background: var(--mg-color-sobre-solido);
  }
  .mgui-interruptor__control:checked + .mgui-interruptor__etiqueta .mgui-interruptor__estado--si { display: inline; color: var(--mg-color-enlace); }
  .mgui-interruptor__control:checked + .mgui-interruptor__etiqueta .mgui-interruptor__estado--no { display: none; }
  .mgui-interruptor__control:focus-visible + .mgui-interruptor__etiqueta .mgui-interruptor__pista {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-interruptor__control:disabled + .mgui-interruptor__etiqueta { color: var(--mg-color-texto-atenuado); cursor: not-allowed; }
  .mgui-interruptor__control:disabled + .mgui-interruptor__etiqueta .mgui-interruptor__pista { border-style: dashed; }
  .mgui-interruptor__ayuda { margin-block-start: var(--mg-space-1); }
  :dir(rtl) .mgui-interruptor__control:checked + .mgui-interruptor__etiqueta .mgui-interruptor__perilla { transform: translateX(-1.25rem); }
  @media (prefers-reduced-motion: reduce) {
    .mgui-interruptor__pista,
    .mgui-interruptor__perilla { transition: none; }
  }
  @media (forced-colors: active) {
    .mgui-interruptor__perilla { forced-color-adjust: none; background: CanvasText; }
    .mgui-interruptor__control:checked + .mgui-interruptor__etiqueta .mgui-interruptor__perilla { background: Highlight; }
  }

  /* ── web/r3/fuente/kpi.css ── */
  /*
   * KPI (Key Performance Indicator). Un bloque con etiqueta chica arriba y un número grande abajo
   * para los paneles de resumen (importes del día, cantidad de operaciones, etc.). Lleva
   * `container-type: inline-size` así una grilla de KPIs en una tarjeta angosta puede, con
   * `@container`, reducir el tamaño del valor sin tocar media queries de la ventana.
   *
   * Composición típica dentro de una `mgui-card`:
   *   <div class="mgui-kpi">
   *     <span class="mgui-kpi__label">Facturado hoy</span>
   *     <span class="mgui-kpi__value">$ 1.284.900</span>
   *   </div>
   *
   * Los `--accent-*` matizan sólo el valor; la etiqueta se queda neutra. Un KPI «dinero favorable»
   * NO existe (prohibido pintar un estado de verde-dinero fuera de modificadores `--favorable`).
   */
  .mgui-kpi {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    min-inline-size: 0;
    flex: 1 1 auto;
  }
  .mgui-kpi__label {
    font-family: var(--mg-font-ui);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto-sutil);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: var(--mg-leading-ajustado);
  }
  .mgui-kpi__value {
    font-family: var(--mg-font-heading);
    font-size: clamp(var(--mg-type-lg), 2.2vw, var(--mg-type-2xl));
    font-weight: var(--mg-weight-bold);
    color: var(--mg-color-texto);
    line-height: var(--mg-leading-ajustado);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
  }
  .mgui-kpi__hint {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-sutil);
  }
  .mgui-kpi--accent-success .mgui-kpi__value { color: var(--mg-color-success-sobre-suave); }
  .mgui-kpi--accent-danger .mgui-kpi__value { color: var(--mg-color-danger-sobre-suave); }
  /* Cuando el contenedor queda angosto (ej. seis KPIs en una tarjeta de 40 rem), el valor baja de nivel sin partir el importe. */
  @container (max-width: 14rem) {
    .mgui-kpi__value { font-size: var(--mg-type-xl); }
  }
  @container (max-width: 10rem) {
    .mgui-kpi__value { font-size: var(--mg-type-lg); white-space: normal; overflow-wrap: anywhere; }
  }

  /* ── web/r3/fuente/lateral.css ── */
  /*
   * Z-R · el menú lateral COMPLETO de bo.valkyrie.ar en la App y en Control (la misma cáscara): íconos por entrada, el RIEL de
   * 56 px (plegado a íconos, con el rótulo como globo), el menú de 232 px, el BUSCADOR (Ctrl+K: el botón de la barra, el
   * `<dialog>` y su página sin guion), la barra de ACCESOS de la derecha y los íconos de la barra de atajos del teléfono.
   * Completa `app-cascara.css` y `app-cascara-barras.css` (App) y `cascara.css` (Control, `.mgui-cascara--lateral`).
   *
   * El corte del cajón es el de Valkyrie (`--mg-consulta-telefono` de su mg-gen): TELÉFONO si el ancho es de 560 px o menos, si
   * es de 768 px o menos con no más de 900 px de alto y sin dedo, o si tiene 520 px de alto o menos con dedo (un teléfono
   * acostado). La COMPUTADORA es su complemento exacto, escrito con `min-width` (una lista de cinco consultas): una tableta
   * parada (820 × 1180, con dedo) ya tiene el menú lateral, como en Valkyrie. El teléfono se escribe `not (…)` de esa misma
   * lista, así no queda ninguna banda de anchos fraccionarios sin regla.
   *
   * Sin colores crudos ni !important; sin guion hace falta (el guion de la cáscara sólo agrega el atajo, los gestos y el riel
   * sin recargar). Con movimiento reducido, sin transiciones.
   */

  /* ── Las entradas: ícono + rótulo ──────────────────────────────────────────────────────────────────────────────────── */
  .mgui-app-menu__rotulo { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
  .mgui-app-menu__enlace > .mgui-ico,
  .mgui-app-menu__titulo > .mgui-ico,
  .mgui-app-menu__subtitulo > .mgui-ico { color: var(--mg-lateral-atenuado); }
  .mgui-app-menu__enlace:hover > .mgui-ico,
  .mgui-app-menu__grupo--activo > .mgui-app-menu__titulo > .mgui-ico,
  details.mgui-app-menu__grupo[open] > summary.mgui-app-menu__titulo > .mgui-ico,
  .mgui-app-menu__subgrupo--activo > .mgui-app-menu__subtitulo > .mgui-ico { color: var(--mg-lateral-texto); }
  .mgui-app-menu__enlace[aria-current="page"] > .mgui-ico { color: var(--mg-lateral-sobre-activo); }
  .mgui-app-menu__titulo { gap: var(--mg-space-2); }
  details.mgui-app-menu__grupo > summary.mgui-app-menu__titulo > .mgui-app-menu__rotulo { flex: 1 1 auto; }
  .mgui-app-menu__sesion .mgui-btn { gap: var(--mg-space-2); }
  .mgui-app-menu__grupo--directo { gap: 0; }
  .mgui-app-menu__enlace--directo { font-weight: var(--mg-weight-semibold); }

  /* ── El botón del riel (sólo en la computadora): sobre el borde derecho, ícono grande + rótulo al pasar por encima ── */
  .mgui-app-menu__riel {
    display: none;
    justify-content: flex-end;
    margin: 0;
  }
  .mgui-app-menu__plegar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    min-block-size: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mg-radius-sm);
    background: transparent;
    color: var(--mg-lateral-atenuado);
    cursor: pointer;
    font: inherit;
    font-size: var(--mg-type-sm);
    text-align: center;
  }
  .mgui-app-menu__plegar > .mgui-ico { inline-size: 1.5rem; block-size: 1.5rem; }
  .mgui-app-menu__plegar > .mgui-app-menu__rotulo {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(100% + var(--mg-space-2));
    z-index: var(--mg-layer-tooltip);
    translate: 0 -50%;
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-medium);
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .mgui-app-menu__plegar:is(:hover, :focus-visible) > .mgui-app-menu__rotulo {
    opacity: 1;
    visibility: visible;
  }
  .mgui-app-menu__plegar:hover { background: color-mix(in oklab, var(--mg-lateral-texto) 10%, transparent); color: var(--mg-lateral-texto); }
  .mgui-app-menu__plegar:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-lateral-foco); outline-offset: var(--mg-focus-ring-offset); }

  /* ── Herramientas arriba del menú lateral: buscador en vivo (Ctrl+M, 2+ letras) y vistas A / B / C ────────────────── */
  .mgui-app-menu__herramientas {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
  }
  .mgui-app-menu__buscador {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    min-block-size: 2.125rem;
    padding: var(--mg-space-1) var(--mg-space-2);
    border: 1px solid var(--mg-lateral-borde);
    border-radius: var(--mg-radius-sm);
    background: color-mix(in oklab, var(--mg-lateral-texto) 6%, transparent);
    color: var(--mg-lateral-texto);
  }
  .mgui-app-menu__buscador:focus-within {
    border-color: var(--mg-lateral-foco);
    outline: var(--mg-focus-ring-width) solid var(--mg-lateral-foco);
    outline-offset: 0;
  }
  .mgui-app-menu__buscador > .mgui-ico { flex: none; color: var(--mg-lateral-atenuado); }
  .mgui-app-menu__filtro {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mg-lateral-texto);
    font: inherit;
    font-size: var(--mg-type-xs);
  }
  .mgui-app-menu__filtro::placeholder { color: var(--mg-lateral-atenuado); }
  .mgui-app-menu__filtro:focus { outline: none; }
  .mgui-app-menu__filtro::-webkit-search-cancel-button { display: none; }
  .mgui-app-menu__tecla {
    flex: none;
    padding: 0 var(--mg-space-1);
    border: 1px solid var(--mg-lateral-borde);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-lateral-atenuado);
    font-family: inherit;
    font-size: var(--mg-type-xs);
    line-height: 1.4;
    white-space: nowrap;
  }
  .mgui-app-menu__vistas { margin: 0; }
  .mgui-app-menu__vistas-botones {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    padding: var(--mg-space-1);
    border: 1px solid var(--mg-lateral-borde);
    border-radius: var(--mg-radius-md);
    background: color-mix(in oklab, var(--mg-lateral-texto) 5%, transparent);
  }
  .mgui-app-menu__vista-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.25rem;
    min-block-size: 2.25rem;
    padding: var(--mg-space-1);
    border: 1px solid var(--mg-lateral-borde);
    border-radius: var(--mg-radius-sm);
    background: transparent;
    color: var(--mg-lateral-atenuado);
    cursor: pointer;
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-lg);
    font-weight: var(--mg-weight-bold);
    line-height: 1;
    text-align: center;
    filter: grayscale(1);
  }
  .mgui-app-menu__vista-btn:hover:not([aria-pressed="true"]) {
    background: color-mix(in oklab, var(--mg-lateral-texto) 10%, transparent);
    color: var(--mg-lateral-texto);
  }
  .mgui-app-menu__vista-btn[aria-pressed="true"] {
    border-color: var(--mg-lateral-activo);
    background: var(--mg-lateral-activo);
    color: var(--mg-lateral-sobre-activo);
    box-shadow: var(--mg-elevation-1);
    filter: none;
  }
  .mgui-app-menu__vista-btn:focus-visible,
  .mgui-app-menu__vista-cfg:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-lateral-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-app-menu__vista-cfg {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--mg-lateral-borde);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-lateral-atenuado);
    text-decoration: none;
  }
  .mgui-app-menu__vista-cfg:hover {
    background: color-mix(in oklab, var(--mg-lateral-texto) 10%, transparent);
    color: var(--mg-lateral-texto);
  }
  .mgui-app-menu__filtro-vacio {
    margin: 0;
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-status-danger-borde);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-status-danger-suave);
    color: var(--mg-status-danger-texto);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-medium);
  }
  @media (pointer: coarse) {
    .mgui-app-menu__tecla { display: none; }
    .mgui-app-menu__vista-btn { min-block-size: 2.25rem; }
  }

  /* ── El botón «Buscar» de la barra ─────────────────────────────────────────────────────────────────────────────────── */
  .mgui-paleta-boton {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-2);
    min-block-size: 2.25rem;
    padding-inline: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-medium);
    text-decoration: none;
    white-space: nowrap;
  }
  .mgui-paleta-boton:hover { border-color: var(--mg-color-accion); color: var(--mg-color-enlace); }
  .mgui-paleta-boton__texto { white-space: nowrap; }
  .mgui-paleta-boton:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-paleta-boton__tecla {
    padding: 0 var(--mg-space-1);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto-atenuado);
    font-family: inherit;
    font-size: var(--mg-type-xs);
    line-height: 1.5;
  }
  .mgui-app-marcas .mgui-paleta-boton { margin-inline-start: auto; }
  .mgui-app-marcas .mgui-paleta-boton ~ .mgui-app-marcas__tenant { margin-inline-start: 0; }
  @media (pointer: coarse) {
    .mgui-paleta-boton { min-block-size: var(--mg-control-min); }
    .mgui-paleta-boton__tecla { display: none; }
  }

  /* ── El buscador (Ctrl+K): un `<dialog>` modal arriba y al centro ───────────────────────────────────────────────── */
  .mgui-paleta {
    inline-size: min(40rem, calc(100vw - 2 * var(--mg-space-4)));
    max-block-size: min(36rem, calc(100dvh - 4 * var(--mg-space-4)));
    margin: max(var(--mg-space-8), 8dvh) auto auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-3);
    font-family: var(--mg-font-ui);
  }
  .mgui-paleta[open] { display: flex; flex-direction: column; align-items: stretch; }
  .mgui-paleta::backdrop { background: color-mix(in oklab, var(--mg-color-marca-profunda) 45%, transparent); }
  .mgui-paleta__form { margin: 0; }
  .mgui-paleta__titulo,
  .mgui-paleta__rotulo { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mgui-paleta__fila {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3) var(--mg-space-4);
    border-block-end: 1px solid var(--mg-color-borde);
  }
  .mgui-paleta__fila > .mgui-ico { color: var(--mg-color-texto-atenuado); }
  .mgui-paleta__campo {
    flex: 1 1 auto;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--mg-type-md);
  }
  .mgui-paleta__campo:focus { outline: none; }
  .mgui-paleta__campo::-webkit-search-cancel-button { display: none; }
  .mgui-paleta__tecla {
    padding: 0 var(--mg-space-1);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto-atenuado);
    font-family: inherit;
    font-size: var(--mg-type-xs);
  }
  .mgui-paleta__lista { flex: 1 1 auto; min-block-size: 0; margin: 0; padding: var(--mg-space-1); overflow-y: auto; list-style: none; }
  .mgui-paleta__opcion {
    display: flex;
    align-items: center;
    gap: var(--mg-space-3);
    min-block-size: 2.75rem;
    padding: var(--mg-space-2) var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    text-decoration: none;
  }
  .mgui-paleta__opcion > .mgui-ico { color: var(--mg-color-texto-atenuado); }
  .mgui-paleta__opcion.is-activa,
  .mgui-paleta__opcion:hover { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-paleta__opcion.is-activa > .mgui-ico { color: var(--mg-color-accion); }
  .mgui-paleta__texto { flex: 1 1 auto; min-inline-size: 0; font-weight: var(--mg-weight-medium); overflow-wrap: anywhere; }
  .mgui-paleta__grupo { flex: none; max-inline-size: 45%; color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-xs); text-align: end; overflow-wrap: anywhere; }
  .mgui-paleta__vacio { margin: 0; padding: var(--mg-space-4); color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-paleta__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    margin: 0;
    padding: var(--mg-space-2) var(--mg-space-4);
    border-block-start: 1px solid var(--mg-color-borde);
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs);
  }
  .mgui-paleta__todo { color: var(--mg-color-enlace); }
  @media (pointer: coarse) {
    .mgui-paleta__tecla { display: none; }
  }

  /* ── La página del buscador sin guion (`/app/buscar`, `/buscar`) ───────────────────────────────────────────────── */
  .mgui-paleta-pagina { max-inline-size: none; }
  .mgui-paleta-pagina__lista { display: flex; flex-direction: column; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; }
  .mgui-paleta-pagina__opcion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-3);
    min-block-size: var(--mg-control-min);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    text-decoration: none;
  }
  .mgui-paleta-pagina__opcion:hover { border-color: var(--mg-color-accion); color: var(--mg-color-enlace); }
  .mgui-paleta-pagina__opcion > .mgui-ico { color: var(--mg-color-accion); }
  .mgui-paleta-pagina__texto { flex: 1 1 12rem; min-inline-size: 0; font-weight: var(--mg-weight-semibold); }
  .mgui-paleta-pagina__grupo { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }

  /* ── La barra de ACCESOS de la derecha (App, computadora de más de 900 px) ─────────────────────────────────────── */
  .mgui-app__accesos { display: none; }
  .mgui-app__accesos-lista {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mg-space-1);
    margin: 0;
    padding: var(--mg-space-3) 0;
    list-style: none;
  }
  .mgui-app__accesos-pie { margin-block-start: var(--mg-space-2); padding-block-start: var(--mg-space-2); border-block-start: 1px solid var(--mg-color-borde); }
  .mgui-app__acceso {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.875rem;
    block-size: 2.875rem;
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-texto-atenuado);
    text-decoration: none;
  }
  .mgui-app__acceso[data-mg-tono="1"] { color: var(--mg-categoria-1-texto); }
  .mgui-app__acceso[data-mg-tono="2"] { color: var(--mg-categoria-2-texto); }
  .mgui-app__acceso[data-mg-tono="3"] { color: var(--mg-categoria-3-texto); }
  .mgui-app__acceso[data-mg-tono="4"] { color: var(--mg-categoria-4-texto); }
  .mgui-app__acceso[data-mg-tono="5"] { color: var(--mg-categoria-5-texto); }
  .mgui-app__acceso[data-mg-tono="6"] { color: var(--mg-categoria-6-texto); }
  .mgui-app__acceso:hover { background: var(--mg-color-fondo); }
  .mgui-app__acceso[aria-current="page"] { background: var(--mg-color-accion-suave); }
  .mgui-app__acceso:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: calc(-1 * var(--mg-focus-ring-width)); }
  .mgui-app__acceso-rotulo,
  .mgui-app__acceso--elegir .mgui-app__acceso-rotulo {
    position: absolute;
    inset-inline-end: calc(100% + var(--mg-space-2));
    z-index: var(--mg-layer-tooltip);
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-medium);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--mg-motion-fast) var(--mg-ease-out), visibility var(--mg-motion-fast);
  }
  .mgui-app__acceso:is(:hover, :focus-visible) .mgui-app__acceso-rotulo { opacity: 1; visibility: visible; }

  /* ── La barra de atajos del teléfono: ícono arriba, rótulo abajo (bo.valkyrie.ar `mg-nav-inferior`) ──────────────── */
  .mgui-app__atajo { flex-direction: column; gap: .125rem; }
  .mgui-app__atajo > .mgui-ico { inline-size: 1.375rem; block-size: 1.375rem; }
  .mgui-app__atajo-texto { display: block; max-inline-size: 100%; overflow-wrap: anywhere; }

  /* ── Control: la misma cáscara (menú lateral con grupos, 232 px, riel, el corte de Valkyrie) ────────────────────── */
  .mgui-cascara--lateral {
    --mgui-lateral-ancho: 14.5rem;
    --mgui-movimiento: var(--mg-motion-base);
  }
  /* Control: el lateral con los mismos colores que el de la App (`--mg-lateral-*`), en la computadora y en el cajón. */
  .mgui-cascara--lateral > .mgui-cascara__nav { flex-direction: column; gap: var(--mg-space-2); padding: var(--mg-space-3); background: var(--mg-lateral-fondo); color: var(--mg-lateral-texto); }
  .mgui-cascara--lateral .mgui-app-menu__nav { gap: var(--mg-space-3); }
  .mgui-cascara--lateral > .mgui-cascara__barra { padding-block: var(--mg-space-2); row-gap: var(--mg-space-2); }
  [data-mg-surface="control"] .mgui-paleta-boton {
    border-color: var(--mg-color-sobre-marca-profunda);
    background: transparent;
    color: var(--mg-color-sobre-marca-profunda);
  }
  [data-mg-surface="control"] .mgui-paleta-boton__tecla { border-color: var(--mg-color-sobre-marca-profunda); color: var(--mg-color-sobre-marca-profunda); }
  @media (prefers-reduced-motion: reduce) {
    .mgui-cascara--lateral { --mgui-movimiento: 1ms; }
  }

  /* ── Computadora (complemento exacto del teléfono de Valkyrie) ───────────────────────────────────────────────────── */
  @media (min-width: 769px) and (min-height: 521px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none),
    (min-width: 561px) and (min-height: 901px), (min-width: 561px) and (min-height: 521px) and (pointer: coarse) {
    .mgui-app-menu__riel { display: flex; }
    /* Control: el menú lateral de 232 px a la izquierda, la barra arriba. */
    .mgui-cascara--lateral {
      grid-template-columns: var(--mgui-lateral-ancho) minmax(0, 1fr);
      grid-template-areas: "barra barra" "nav contenido";
      transition: grid-template-columns var(--mgui-movimiento) var(--mg-ease-out);
    }
    .mgui-cascara--lateral > .mgui-cascara__nav {
      display: flex;
      border-inline-end: 1px solid var(--mg-lateral-borde);
      border-block-end: 0;
    }
    .mgui-cascara--lateral > .mgui-cascara__interruptor { display: none; }
    .mgui-cascara--lateral .mgui-cascara__abrir { display: none; }
    .mgui-cascara--lateral > .mgui-cascara__contenido { padding-inline: var(--mg-space-8); }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] { --mgui-lateral-ancho: 3.5rem; }

    /* ── El RIEL de 56 px (App y Control): sólo los íconos; el rótulo, un globo al pasar por encima o con el foco ──── */
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] :is(.mgui-app__lateral, .mgui-cascara__nav) {
      padding-inline: var(--mg-space-1);
      overflow: visible;
    }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] .mgui-app-menu__riel { justify-content: center; }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] .mgui-app-menu__plegar { inline-size: 100%; }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] :is(.mgui-app-menu__enlace, .mgui-app-menu__titulo, .mgui-app-menu__subtitulo, .mgui-app-menu__plegar) {
      position: relative;
      justify-content: center;
      padding-inline: 0;
    }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] :is(.mgui-app-menu__enlace, .mgui-app-menu__titulo, .mgui-app-menu__plegar) > .mgui-ico { inline-size: 1.5rem; block-size: 1.5rem; }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] .mgui-app-menu__rotulo {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: calc(100% + var(--mg-space-2));
      inset-inline-end: auto;
      z-index: var(--mg-layer-tooltip);
      translate: 0 -50%;
      padding: var(--mg-space-1) var(--mg-space-2);
      border-radius: var(--mg-radius-sm);
      background: var(--mg-color-marca-profunda);
      color: var(--mg-color-sobre-marca-profunda);
      font-size: var(--mg-type-xs);
      font-weight: var(--mg-weight-medium);
      letter-spacing: normal;
      text-transform: none;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] :is(.mgui-app-menu__enlace, .mgui-app-menu__titulo, .mgui-app-menu__subtitulo, .mgui-app-menu__plegar):is(:hover, :focus-visible) > .mgui-app-menu__rotulo {
      opacity: 1;
      visibility: visible;
    }
    /* ola 35c · temas cristal: el globo del riel es navy translúcido (88 %, como los demás globos de vidrio.css). Va ACÁ,
     * dentro de la misma media query y bajo `[data-mg-riel="si"]`, porque fuera del riel el rótulo es el texto llano de la
     * entrada: suelto en vidrio.css ponía un rectángulo navy detrás de cada rótulo del lateral desplegado. */
    [data-mg-tema^="cristal-"] :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] .mgui-app-menu__rotulo {
      background: color-mix(in oklab, var(--mg-color-marca-profunda) 88%, transparent);
    }
    /* En el riel no hay lugar para la sangría, el chevrón, la insignia ni el título de «Sesión». */
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] :is(.mgui-app-menu__grupo > summary.mgui-app-menu__titulo, .mgui-app-menu__subtitulo)::after { display: none; }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] .mgui-app-menu__lista--sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] .mgui-app-menu__enlace > .mgui-badge { display: none; }
    .mgui-app[data-mg-riel="si"] .mgui-app-menu__herramientas,
    .mgui-app[data-mg-riel="si"] .mgui-app-menu__sesion > .mgui-app-menu__titulo,
    .mgui-app[data-mg-riel="si"] .mgui-app-menu__sesion > :not(form, .mgui-app-menu__personalizar) { display: none; }
    .mgui-app[data-mg-riel="si"] .mgui-app-menu__sesion .mgui-btn { position: relative; justify-content: center; inline-size: 100%; padding-inline: 0; }
    .mgui-app[data-mg-riel="si"] .mgui-app-menu__sesion .mgui-btn:is(:hover, :focus-visible) > .mgui-app-menu__rotulo { opacity: 1; visibility: visible; }
    /* En el riel el grupo activo es una columna de íconos sobre su fondo, sin relleno que le robe ancho a los 48 px. */
    :is(.mgui-app, .mgui-cascara--lateral)[data-mg-riel="si"] .mgui-app-menu__grupo { padding-inline: 0; }
  }

  /* ── Teléfono (Control): el cajón debajo de la barra, que abre «Menú» o el gesto desde el borde ─────────────────── */
  @media not (((min-width: 769px) and (min-height: 521px)) or ((min-width: 769px) and (pointer: fine)) or ((min-width: 769px) and (pointer: none))
    or ((min-width: 561px) and (min-height: 901px)) or ((min-width: 561px) and (min-height: 521px) and (pointer: coarse))) {
    .mgui-cascara--lateral { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barra" "nav" "contenido"; }
    .mgui-cascara--lateral > .mgui-cascara__nav { display: none; border-block-end: 1px solid var(--mg-lateral-borde); }
    .mgui-cascara--lateral > .mgui-cascara__interruptor { display: inline-block; }
    .mgui-cascara--lateral > .mgui-cascara__interruptor:checked ~ .mgui-cascara__nav { display: flex; }
    .mgui-cascara--lateral .mgui-cascara__abrir { display: inline-flex; }
  }

  /* La barra de accesos: con más de 900 px y sin ser un teléfono acostado (Valkyrie la saca en 900 px o menos). */
  @media (min-width: 901px) and (min-height: 521px), (min-width: 901px) and (pointer: fine), (min-width: 901px) and (pointer: none) {
    .mgui-app[data-mg-accesos="si"] { --mgui-accesos-ancho: 3.75rem; }
    .mgui-app__accesos {
      grid-area: accesos;
      display: block;
      position: sticky;
      inset-block-start: 0;
      align-self: start;
      max-block-size: 100dvh;
      border-inline-start: 1px solid var(--mg-color-borde);
      background: var(--mg-color-superficie);
    }
  }

  /* ── El editor del menú de la empresa (`/app/configuracion/menu`) ────────────────────────────────────────────────── */
  .mgui-menu-empresa { min-inline-size: 0; }
  .mgui-menu-empresa__fila { flex-wrap: wrap; }
  .mgui-interfaz__fila > .mgui-ico { color: var(--mg-color-texto-atenuado); }
  /* La barra de accesos elegida, en «Menú y barras»: un poco más de aire (son pocos y se reordenan). */
  .mgui-interfaz__accesos { gap: var(--mg-space-2); }
  .mgui-menu-empresa__rotulo,
  .mgui-menu-empresa__lugar { flex: 1 1 12rem; min-inline-size: 0; max-inline-size: 20rem; }

  /* ── web/r3/fuente/linea-de-tiempo.css ── */
  /* Línea de tiempo: <ol> con <time datetime>; el tono sale del código de estado. */
  .mgui-timeline { list-style: none; margin: 0 0 var(--mg-space-4); padding: 0; }
  .mgui-timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0 var(--mg-space-3);
    padding-bottom: var(--mg-space-4);
  }
  .mgui-timeline__step::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: .6875rem;
    width: 2px;
    background: var(--mg-color-borde);
  }
  .mgui-timeline__step:last-child::before { content: none; }
  .mgui-timeline__marker {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--mg-color-borde-control);
    border-radius: 50%;
    background: var(--mg-color-superficie);
  }
  .mgui-timeline__content { display: flex; flex-direction: column; gap: var(--mg-space-1); }
  .mgui-timeline__title { margin: 0; font-weight: var(--mg-weight-semibold); }
  .mgui-timeline__time,
  .mgui-timeline__detail { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-timeline__step--done .mgui-timeline__marker { border-color: var(--mg-status-complete-borde); background: var(--mg-status-complete-solido); }
  .mgui-timeline__step--current .mgui-timeline__marker { border-color: var(--mg-status-info-borde); background: var(--mg-status-info-suave); }
  .mgui-timeline__step--pending .mgui-timeline__marker { border-style: dashed; }
  .mgui-timeline__step--error .mgui-timeline__marker { border-color: var(--mg-status-danger-borde); background: var(--mg-status-danger-solido); }
  .mgui-timeline__step--blocked .mgui-timeline__marker { border-color: var(--mg-status-warning-borde); background: var(--mg-status-warning-suave); }

  /* ── web/r3/fuente/marca.css ── */
  /*
   * Marca: el maestro vectorial, `web/r3/marca/*.svg`, sin rótulo en ningún entorno (su expediente técnico es
   * docs/r3/marca/BRAND-G0.md). El nombre va como texto vivo en Plus Jakarta Sans y toma el color de su contenedor.
   */
  /* El isotipo se revela por piezas dentro de su SVG; el nombre entra en el último tramo (70 %→100 %) del mismo tiempo. */
  @keyframes mgui-revelar { 0%, 70% { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: none; } }
  .mgui-marca { display: inline-flex; align-items: center; gap: var(--mg-space-2); color: var(--mg-color-texto); text-decoration: none; }
  .mgui-marca--oscuro { color: inherit; }
  .mgui-marca__img { display: block; width: auto; height: 2rem; }
  .mgui-marca--horizontal .mgui-marca__img { height: 2.5rem; }
  .mgui-marca__nombre { font-family: var(--mg-font-heading); font-size: var(--mg-type-lg); font-weight: var(--mg-weight-bold); letter-spacing: -0.01em; white-space: nowrap; }
  .mgui-marca--revelar .mgui-marca__nombre { animation: mgui-revelar var(--mg-logo-reveal-duration) var(--mg-ease-out) both; }

  /* ── web/r3/fuente/metrica.css ── */
  /* Métrica con procedencia: período, fuente, actualización y definición (<details>, sin JS). */
  .mgui-metric {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-metric__label { margin: 0; font-family: var(--mg-font-ui); font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto-atenuado); }
  .mgui-metric__value { margin: 0; font-family: var(--mg-font-heading); font-size: var(--mg-type-2xl); font-weight: var(--mg-weight-bold); font-variant-numeric: tabular-nums; line-height: var(--mg-leading-ajustado); }
  .mgui-metric__meta { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--mg-space-2); font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-metric__meta dt { font-weight: var(--mg-weight-semibold); }
  .mgui-metric__partial { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0; font-size: var(--mg-type-sm); color: var(--mg-status-warning-texto); }
  .mgui-metric__details { font-size: var(--mg-type-sm); }
  .mgui-metric__details summary { cursor: pointer; color: var(--mg-color-enlace); }
  .mgui-metric__details p { margin: var(--mg-space-2) 0 0; color: var(--mg-color-texto); }
  .mgui-metric--partial { border-color: var(--mg-status-warning-borde); border-style: dashed; }

  /* ── web/r3/fuente/mineral.css ── */
  /*
   * mgui · MINERAL — la familia «Superficies mate y suaves» (TEMAS-ADICIONALES del paquete Cristales V3, primera prioridad):
   * `mineral-claro` y `mineral-profundo`. El selector `[data-mg-tema^="mineral-"]` acota TODAS las reglas: en otro tema este
   * archivo no pinta nada. Los valores salen de los tokens --mg-mate-* que emite `core/familias.js` por tema (medidos).
   *
   * Inspiración: Mica (Microsoft): un material OPACO para el fondo de la ventana con jerarquía entre base y contenido. Acá es
   * una adaptación web con CSS y la paleta propia: la BASE de la App es un degradé muy leve (un tinte cian y uno azul del
   * fondo del tema), el CONTENIDO va en capas opacas separadas por tono —capa-1 (tarjetas, pasos, tablas), capa-2 (barras,
   * lateral, menús, diálogos)—, un satinado de 1 px arriba y una sombra suave. Nada se desenfoca ni sigue al puntero: el
   * acabado es estable mientras se trabaja. La marca se reconoce por el tinte y los acentos, no por ver el logo.
   *
   * Riesgo que evita (TEMAS-ADICIONALES §1): «varias tarjetas grises indistinguibles» — base, contenido y lo superpuesto
   * tienen valores distintos a propósito (base-1/base-2 < capa-1 < capa-2 en el claro; al revés en el profundo).
   */

  /* ── Base de la ventana: el degradé mica, fijo (no se desplaza con la página) ─────────────────────────────────────── */
  [data-mg-tema^="mineral-"] .mgui-app,
  [data-mg-tema^="mineral-"][data-mg-surface] body {
    background: linear-gradient(160deg, var(--mg-mate-base-1) 0%, var(--mg-color-fondo) 48%, var(--mg-mate-base-2) 100%) fixed;
  }

  /* ── Capa 1: contenido (tarjetas, métricas, estados, pasos del wizard, tablas sueltas, plegables, filtros) ────────── */
  [data-mg-tema^="mineral-"] .mgui-card,
  [data-mg-tema^="mineral-"] .mgui-metric,
  [data-mg-tema^="mineral-"] .mgui-state,
  [data-mg-tema^="mineral-"] .mgui-skeleton--card,
  [data-mg-tema^="mineral-"] .mgui-tramite__actual,
  [data-mg-tema^="mineral-"] .mgui-emitir-paso,
  [data-mg-tema^="mineral-"] .mgui-table-wrap,
  [data-mg-tema^="mineral-"] .mgui-plegable,
  [data-mg-tema^="mineral-"] .mgui-filtros__panel,
  [data-mg-tema^="mineral-"] .mgui-grafico-cotizacion {
    background: var(--mg-mate-capa-1);
    border-color: var(--mg-mate-borde);
    box-shadow: inset 0 1px 0 var(--mg-mate-satinado), 0 1px 2px var(--mg-mate-sombra), 0 6px 16px var(--mg-mate-sombra);
  }
  /* Una tarjeta dentro de otra no vuelve a elevarse: se hunde apenas (capa hundida, sin sombra). */
  [data-mg-tema^="mineral-"] :is(.mgui-card, .mgui-emitir-paso, .mgui-dialog) :is(.mgui-card:not(.mgui-emitir-seccion), .mgui-metric, .mgui-state, .mgui-table-wrap),
  [data-mg-tema^="mineral-"] .mgui-card--sunken {
    background: var(--mg-mate-hundida);
    box-shadow: none;
  }
  [data-mg-tema^="mineral-"] .mgui-table__head-cell { background: var(--mg-mate-hundida); }
  [data-mg-tema^="mineral-"] .mgui-table__cell { border-bottom-color: var(--mg-mate-borde); }

  /* ── Capa 2: lo que flota sobre el contenido (barras, lateral, pie pegado, menús, diálogos, paleta, cajón, avisos) ── */
  [data-mg-tema^="mineral-"] .mgui-app-marcas,
  [data-mg-tema^="mineral-"] .mgui-app__lateral,
  [data-mg-tema^="mineral-"] .mgui-cascara__barra,
  [data-mg-tema^="mineral-"] .mgui-cascara__nav,
  [data-mg-tema^="mineral-"] .mgui-emitir-pie,
  [data-mg-tema^="mineral-"] .mgui-app__accesos,
  [data-mg-tema^="mineral-"] .mgui-app__atajos,
  [data-mg-tema^="mineral-"] .mgui-app__tirador,
  [data-mg-tema^="mineral-"] .mgui-dialog,
  [data-mg-tema^="mineral-"] .mgui-paleta,
  [data-mg-tema^="mineral-"] .mgui-ayuda__cajon,
  [data-mg-tema^="mineral-"] .mgui-menu-acciones__panel,
  [data-mg-tema^="mineral-"] .mgui-idioma__panel,
  [data-mg-tema^="mineral-"] .mgui-bandeja__panel,
  [data-mg-tema^="mineral-"] .mgui-notificacion,
  [data-mg-tema^="mineral-"] .mgui-telefono__panel,
  [data-mg-tema^="mineral-"] .mgui-direccion__panel,
  [data-mg-tema^="mineral-"] .mgui-selector-buscable__panel,
  [data-mg-tema^="mineral-"] .mgui-apariencia-panel {
    background: var(--mg-mate-capa-2);
    border-color: var(--mg-mate-borde);
  }
  [data-mg-tema^="mineral-"] .mgui-dialog,
  [data-mg-tema^="mineral-"] .mgui-paleta,
  [data-mg-tema^="mineral-"] .mgui-menu-acciones__panel,
  [data-mg-tema^="mineral-"] .mgui-idioma__panel,
  [data-mg-tema^="mineral-"] .mgui-bandeja__panel,
  [data-mg-tema^="mineral-"] .mgui-notificacion,
  [data-mg-tema^="mineral-"] .mgui-emitir-pie {
    box-shadow: inset 0 1px 0 var(--mg-mate-satinado), 0 2px 4px var(--mg-mate-sombra), 0 12px 32px var(--mg-mate-sombra);
  }
  /* El lateral conserva sus tonos (UX-LATERAL): sólo su línea de separación toma el borde mate. */
  [data-mg-tema^="mineral-"] .mgui-app__lateral { background: var(--mg-lateral-fondo); }
  [data-mg-tema^="mineral-"] .mgui-app-menu__lista--sub,
  [data-mg-tema^="mineral-"] .mgui-app-menu__sesion { border-color: var(--mg-mate-borde); }

  /* ── Campos y controles: sólidos, con el borde de control medido y el satinado ──────────────────────────────────── */
  [data-mg-tema^="mineral-"] .mgui-field__control,
  [data-mg-tema^="mineral-"] .mgui-buscador__control,
  [data-mg-tema^="mineral-"] .mgui-telefono__pais,
  [data-mg-tema^="mineral-"] .mgui-selector-buscable__boton {
    background: var(--mg-mate-capa-2);
    box-shadow: inset 0 1px 0 var(--mg-mate-satinado);
  }
  [data-mg-tema^="mineral-"] .mgui-field__control:disabled,
  [data-mg-tema^="mineral-"] .mgui-field__control--readonly { background: var(--mg-mate-hundida); box-shadow: none; }
  [data-mg-tema^="mineral-"] .mgui-btn--secondary { background: var(--mg-mate-capa-2); box-shadow: inset 0 1px 0 var(--mg-mate-satinado), 0 1px 2px var(--mg-mate-sombra); }
  [data-mg-tema^="mineral-"] .mgui-btn--primary { box-shadow: inset 0 1px 0 var(--mg-mate-satinado), 0 1px 2px var(--mg-mate-sombra); }

  /* ── Hijos que se levantan (velo mate) y que se hunden ─────────────────────────────────────────────────────────── */
  [data-mg-tema^="mineral-"] .mgui-eleccion__chip,
  [data-mg-tema^="mineral-"] .mgui-opcion-pill__pastilla,
  [data-mg-tema^="mineral-"] .mgui-opcion__caja,
  [data-mg-tema^="mineral-"] .mgui-paginacion__enlace:not(.is-actual, .is-disabled),
  [data-mg-tema^="mineral-"] .mgui-accion:not(.mgui-accion--primaria),
  [data-mg-tema^="mineral-"] .mgui-paleta-pagina__opcion,
  [data-mg-tema^="mineral-"] .mgui-segmentado__control:checked + .mgui-segmentado__opcion,
  [data-mg-tema^="mineral-"] .mgui-segmentado__opcion.is-actual {
    background: var(--mg-mate-capa-2);
    box-shadow: inset 0 1px 0 var(--mg-mate-satinado);
  }
  [data-mg-tema^="mineral-"] .mgui-segmentado__grupo,
  [data-mg-tema^="mineral-"] .mgui-interruptor__pista,
  [data-mg-tema^="mineral-"] .mgui-badge:not(.mgui-badge--complete, .mgui-badge--warning, .mgui-badge--danger, .mgui-badge--info),
  [data-mg-tema^="mineral-"] .mgui-plegable__titulo,
  [data-mg-tema^="mineral-"] .mgui-opcion.is-disabled .mgui-opcion__caja,
  [data-mg-tema^="mineral-"] .mgui-paginacion__enlace.is-disabled {
    background: var(--mg-mate-hundida);
  }
  /* La opción ELEGIDA conserva su tinte de acción (medido) y suma el satinado: se distingue de inmediato del mate. */
  [data-mg-tema^="mineral-"] .mgui-opcion__control:checked ~ .mgui-opcion__caja {
    background: var(--mg-color-accion-suave);
    box-shadow: inset 0 0 0 1px var(--mg-color-accion), inset 0 1px 0 var(--mg-mate-satinado);
  }

  /* ── Impresión: superficie plana, sin degradé ni sombras ────────────────────────────────────────────────────────── */
  @media print {
    [data-mg-tema^="mineral-"] .mgui-app,
    [data-mg-tema^="mineral-"][data-mg-surface] body { background: var(--mg-color-superficie); }
    [data-mg-tema^="mineral-"] .mgui-card,
    [data-mg-tema^="mineral-"] .mgui-emitir-paso,
    [data-mg-tema^="mineral-"] .mgui-table-wrap,
    [data-mg-tema^="mineral-"] .mgui-field__control { box-shadow: none; }
  }

  /* ── web/r3/fuente/mitades.css ── */
  /*
   * 9Y · PLACEHOLDER para la clase utilitaria `mgui-mitades` (grid 50/50 que la ola 9U va a agregar al framework
   * `mg-gen-r3`). Mientras esa integración no esté, esta regla mínima permite que la emisión arme el bloque
   * «Notas + Totales» (y, en el mismo paso, «Panel presupuestos + Imputación») en dos columnas de 1fr.
   *
   * Una vez que 9U sume `.mgui-mitades` al master `mg-gen-r3`, este archivo se borra: la clase pasa a vivir en
   * `/r3/generado/mg-r3.css` con su definición oficial (tokens de espacio y breakpoints del framework).
   */
  .mgui-mitades {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mg-space-4, 1rem);
    align-items: start;
  }

  @media not all and (min-width: 48.0625rem) {
    .mgui-mitades {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ── web/r3/fuente/ml-espejo.css ── */
  /*
   * PRODUCTOS · D (ml-espejo) · la tarjeta «Lo que informa Mercado Libre» de la ficha de una publicación (`web/r3-ml-espejo.ts`):
   * los datos del espejo como rótulo y valor a lo ancho de la tarjeta (`.mgui-totales` es un bloque angosto de totales, pegado a la
   * derecha: acá no corresponde). En el teléfono, el rótulo arriba de su valor. Sólo tokens: ningún color ni medida inventados.
   */
  .mgui-espejo-datos {
    display: grid; grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); gap: var(--mg-space-1) var(--mg-space-4);
    margin: 0; font-size: var(--mg-type-sm);
  }
  .mgui-espejo-datos > div { display: contents; }
  .mgui-espejo-datos dt { color: var(--mg-color-texto-atenuado); min-inline-size: 0; }
  .mgui-espejo-datos dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
  @media not all and (min-width: 48rem) {
    .mgui-espejo-datos { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mgui-espejo-datos dd { margin-block-end: var(--mg-space-2); }
  }

  /* ── web/r3/fuente/moneda.css ── */
  /*
   * F-VC · el selector de moneda con el ícono de cada una (Valkyrie: IconoMoneda y `.mg-moneda`), y el ícono suelto.
   * Un `<select>` de verdad: con `appearance: base-select` (Chromium 135+) cada opción dibuja su ícono, su nombre y su código;
   * sin eso, el navegador muestra el texto («US$ Dólar estadounidense · USD») y nada se rompe. Sin guion.
   */
  .mgui-moneda-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-inline-size: 1.75rem;
    block-size: 1.75rem;
    padding-inline: var(--mg-space-1);
    border-radius: 999px;
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.01em;
  }
  .mgui-moneda-icono--largo { font-size: .625rem; letter-spacing: 0; }
  .mgui-moneda__nombre { min-inline-size: 0; }
  .mgui-moneda__codigo {
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
  }

  @supports (appearance: base-select) {
    .mgui-moneda__control,
    .mgui-moneda__control::picker(select) { appearance: base-select; }
    .mgui-moneda__control {
      display: flex;
      align-items: center;
      gap: var(--mg-space-2);
      padding-block: var(--mg-space-1);
      cursor: pointer;
    }
    .mgui-moneda__control::picker-icon { color: var(--mg-color-texto-atenuado); transition: rotate var(--mg-motion-fast) var(--mg-ease-out); }
    .mgui-moneda__control:open::picker-icon { rotate: 180deg; }
    .mgui-moneda__boton { display: flex; align-items: center; flex: 1; min-inline-size: 0; }
    .mgui-moneda__control selectedcontent { display: flex; align-items: center; gap: var(--mg-space-2); min-inline-size: 0; }
    .mgui-moneda__control selectedcontent .mgui-moneda__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mgui-moneda__sep { display: none; }
    .mgui-moneda__control::picker(select) {
      max-block-size: min(22rem, 70vh);
      overflow-y: auto;
      padding: var(--mg-space-1);
      border: 1px solid var(--mg-color-borde);
      border-radius: var(--mg-radius-md);
      background: var(--mg-color-superficie);
      color: var(--mg-color-texto);
      box-shadow: var(--mg-elevation-2);
    }
    .mgui-moneda__control optgroup {
      padding-block-start: var(--mg-space-1);
      color: var(--mg-color-texto-atenuado);
      font-size: var(--mg-type-xs);
      font-weight: var(--mg-weight-semibold);
    }
    .mgui-moneda__control option {
      display: flex;
      align-items: center;
      gap: var(--mg-space-2);
      min-block-size: var(--mg-control-min);
      padding: var(--mg-space-1) var(--mg-space-2);
      border-radius: var(--mg-radius-sm);
      color: var(--mg-color-texto);
      font-size: var(--mg-type-sm);
      font-weight: var(--mg-weight-normal);
      cursor: pointer;
    }
    .mgui-moneda__control option .mgui-moneda__codigo { margin-inline-start: auto; }
    .mgui-moneda__control option:hover,
    .mgui-moneda__control option:focus-visible { background: var(--mg-color-accion-suave); outline: none; }
    .mgui-moneda__control option:focus-visible { box-shadow: inset 0 0 0 var(--mg-focus-ring-width) var(--mg-color-foco); }
    .mgui-moneda__control option:checked { font-weight: var(--mg-weight-semibold); }
    .mgui-moneda__control option::checkmark { order: 9; color: var(--mg-color-enlace); }
    .mgui-moneda__control option:checked .mgui-moneda-icono { background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  }

  @media (forced-colors: active) {
    .mgui-moneda-icono { border: 1px solid CanvasText; }
  }

  /* ── web/r3/fuente/navegacion.css ── */
  /*
   * F-VC · pestañas (enlaces con aria-current), migas, el menú de acciones de una fila (popover declarativo), la paginación y
   * los pasos de un trámite. Sin guion.
   */

  /* Pestañas */
  .mgui-pestanas { margin-block-end: var(--mg-space-4); border-block-end: 1px solid var(--mg-color-borde); overflow-x: auto; }
  .mgui-pestanas__lista { display: flex; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; }
  .mgui-pestanas__item { display: flex; flex: none; }
  .mgui-pestanas__pestana {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-2);
    min-block-size: var(--mg-control-min);
    padding: var(--mg-space-2) var(--mg-space-3);
    border-block-end: 2px solid transparent;
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
  }
  .mgui-pestanas__pestana:hover { color: var(--mg-color-texto); }
  .mgui-pestanas__pestana.is-actual { color: var(--mg-color-enlace); border-block-end-color: var(--mg-color-accion); }
  .mgui-pestanas__pestana:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: -2px; border-radius: var(--mg-radius-sm); }
  .mgui-pestanas__cuenta {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: .3rem;
    border-radius: 999px;
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-xs);
  }

  /* Z-R · la subnavegación de una sección de Control: «Qué falta», chico y pegado debajo de sus pestañas. */
  .mgui-subnav__falta { margin-block: calc(-1 * var(--mg-space-2)) var(--mg-space-4); color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-subnav__falta > summary { inline-size: fit-content; cursor: pointer; }
  .mgui-subnav__falta > ul { display: grid; gap: var(--mg-space-1); margin-block: var(--mg-space-2) 0; padding-inline-start: var(--mg-space-4); }

  /* Migas */
  .mgui-migas { margin-block-end: var(--mg-space-2); font-size: var(--mg-type-xs); }
  .mgui-migas__lista { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; color: var(--mg-color-texto-atenuado); }
  .mgui-migas__item { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  .mgui-migas__item + .mgui-migas__item::before { content: "/"; opacity: .6; }
  .mgui-migas__enlace { color: var(--mg-color-enlace); }
  .mgui-migas__actual { color: var(--mg-color-texto); font-weight: var(--mg-weight-semibold); }

  /* Menú de acciones (⋮) */
  .mgui-menu-acciones { position: relative; display: inline-flex; }
  .mgui-menu-acciones__boton {
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid transparent;
    border-radius: var(--mg-radius-sm);
    background: transparent;
    color: var(--mg-color-texto-atenuado);
    cursor: pointer;
  }
  .mgui-menu-acciones__boton:hover { background: var(--mg-color-fondo); color: var(--mg-color-texto); }
  .mgui-menu-acciones__boton:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-menu-acciones__svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .mgui-menu-acciones__panel {
    inset: auto;
    margin: var(--mg-space-1) 0 0;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block;
    min-inline-size: 12rem;
    max-inline-size: min(20rem, calc(100vw - 2 * var(--mg-space-3)));
    padding: var(--mg-space-1);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-menu-acciones__lista { margin: 0; padding: 0; list-style: none; }
  .mgui-menu-acciones__fila { display: block; }
  .mgui-menu-acciones__form { margin: 0; }
  .mgui-menu-acciones__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    inline-size: 100%;
    min-block-size: 2.5rem;
    justify-content: center;
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 0;
    border-radius: var(--mg-radius-sm);
    background: transparent;
    color: var(--mg-color-texto);
    font: inherit;
    font-size: var(--mg-type-sm);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .mgui-menu-acciones__item:hover { background: var(--mg-color-accion-suave); }
  .mgui-menu-acciones__item:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: -2px; }
  .mgui-menu-acciones__item--peligro { color: var(--mg-status-danger-texto); }
  .mgui-menu-acciones__item.is-disabled { color: var(--mg-color-texto-atenuado); cursor: not-allowed; background: transparent; }
  .mgui-menu-acciones__motivo { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  @supports not (position-area: block-end span-inline-start) {
    .mgui-menu-acciones__panel { inset-block: auto var(--mg-space-3); inset-inline: var(--mg-space-3); margin: 0; max-inline-size: none; }
  }
  @supports not selector(:popover-open) {
    .mgui-menu-acciones__boton { display: none; }
    .mgui-menu-acciones__panel { position: static; display: block; box-shadow: none; }
  }

  /* Paginación */
  .mgui-paginacion { margin-block: var(--mg-space-4); }
  .mgui-paginacion__lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; }
  .mgui-paginacion__item { display: flex; }
  .mgui-paginacion__enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mg-space-1);
    min-inline-size: 2.5rem;
    min-block-size: 2.5rem;
    padding-inline: var(--mg-space-2);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
  }
  .mgui-paginacion__enlace:hover { background: var(--mg-color-accion-suave); }
  .mgui-paginacion__enlace:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-paginacion__enlace.is-actual { border-color: var(--mg-color-accion); background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  .mgui-paginacion__enlace.is-disabled { color: var(--mg-color-texto-atenuado); background: var(--mg-color-fondo); cursor: not-allowed; }
  .mgui-paginacion__enlace--extremo { padding-inline: var(--mg-space-3); }
  .mgui-paginacion__salto { padding-inline: var(--mg-space-1); color: var(--mg-color-texto-atenuado); }
  .mgui-paginacion__svg { inline-size: 1rem; block-size: 1rem; }
  :dir(rtl) .mgui-paginacion__svg { transform: scaleX(-1); }

  /* Pasos */
  .mgui-pasos { margin-block-end: var(--mg-space-4); }
  .mgui-pasos__lista { display: flex; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
  .mgui-pasos__paso { position: relative; display: flex; flex: 1; min-inline-size: 0; }
  .mgui-pasos__paso:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(1rem - 1px);
    inset-inline: 2.5rem .25rem;
    block-size: 2px;
    border-radius: 1px;
    background: var(--mg-color-borde);
  }
  .mgui-pasos__paso--hecho:not(:last-child)::after { background: var(--mg-color-accion); }
  .mgui-pasos__enlace {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mg-space-1);
    min-inline-size: 0;
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    text-decoration: none;
  }
  a.mgui-pasos__enlace:hover .mgui-pasos__texto { text-decoration: underline; }
  a.mgui-pasos__enlace:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); border-radius: var(--mg-radius-sm); }
  .mgui-pasos__marca {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 2px solid var(--mg-color-borde-control);
    border-radius: 999px;
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-sm);
    font-variant-numeric: tabular-nums;
  }
  .mgui-pasos__svg { inline-size: 1rem; block-size: 1rem; stroke-width: 3; }
  .mgui-pasos__texto { overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
  .mgui-pasos__paso--hecho .mgui-pasos__marca { border-color: var(--mg-color-accion); background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  .mgui-pasos__paso--hecho .mgui-pasos__enlace { color: var(--mg-color-texto); }
  .mgui-pasos__paso--actual .mgui-pasos__marca { border-color: var(--mg-color-accion); color: var(--mg-color-enlace); box-shadow: 0 0 0 3px var(--mg-color-accion-suave); }
  .mgui-pasos__paso--actual .mgui-pasos__enlace { color: var(--mg-color-enlace); }
  .mgui-pasos__paso--pendiente .mgui-pasos__texto { font-weight: var(--mg-weight-normal); }
  .mgui-pasos__resumen { margin: var(--mg-space-2) 0 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  @media not all and (min-width: 480px) {
    .mgui-pasos__texto { display: none; }
    .mgui-pasos__paso--actual .mgui-pasos__texto { display: block; }
  }

  /* Sección plegable (VK VhSection plegable): la banda entera abre y cierra; el chevron gira. */
  .mgui-plegable { margin-block-end: var(--mg-space-4); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie); }
  .mgui-plegable__titulo {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    min-block-size: var(--mg-control-min);
    padding: var(--mg-space-2) var(--mg-space-4);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto);
    font-weight: var(--mg-weight-semibold);
    cursor: pointer;
    list-style: none;
  }
  .mgui-plegable__titulo::-webkit-details-marker { display: none; }
  .mgui-plegable__titulo:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 0; }
  .mgui-plegable__texto { flex: 1; min-inline-size: 0; }
  .mgui-plegable__resumen { display: inline-flex; align-items: center; gap: var(--mg-space-1); font-weight: var(--mg-weight-normal); color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-plegable__svg { inline-size: 1.125rem; block-size: 1.125rem; flex: none; color: var(--mg-color-texto-atenuado); transition: transform var(--mg-motion-fast) var(--mg-ease-out); }
  .mgui-plegable[open] > .mgui-plegable__titulo { border-end-start-radius: 0; border-end-end-radius: 0; border-block-end: 1px solid var(--mg-color-borde); }
  .mgui-plegable[open] > .mgui-plegable__titulo .mgui-plegable__svg { transform: rotate(180deg); }
  .mgui-plegable__cuerpo { padding: var(--mg-space-4); }
  @media (prefers-reduced-motion: reduce) {
    .mgui-plegable__svg { transition: none; }
  }

  /* ── web/r3/fuente/opcion.css ── */
  /*
   * F-VC · cards de opción (Valkyrie: `.mg-opcion` de SelectorPuntoVenta y `.mg-retiro__opcion--icono/--letra` del retiro):
   * radios o casillas de verdad, visualmente ocultos pero enfocables; el ÍCONO ocupa el lugar del círculo del radio y la card
   * se dibuja con selectores de hermanos (`:checked ~`, `:focus-visible ~`), que andan en todos los navegadores.
   */
  .mgui-opciones { margin: 0 0 var(--mg-space-4); padding: 0; border: 0; min-inline-size: 0; }
  .mgui-opciones__leyenda {
    margin-block-end: var(--mg-space-2);
    padding: 0;
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
  }
  .mgui-opciones > .mgui-field__help { margin-block-end: var(--mg-space-2); }
  .mgui-opciones__lista { display: flex; flex-direction: column; gap: var(--mg-space-2); }
  .mgui-opciones--lista .mgui-opciones__lista { max-inline-size: var(--mg-formulario-texto); }
  .mgui-opciones--grilla .mgui-opciones__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
  .mgui-opciones--invalida .mgui-opcion__caja { border-color: var(--mg-status-danger-borde); }

  .mgui-opcion {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--mg-space-3);
    padding: var(--mg-space-3);
    color: var(--mg-color-texto);
    cursor: pointer;
    isolation: isolate;
  }
  .mgui-opcion__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
  }
  .mgui-opcion__caja {
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    transition: border-color var(--mg-motion-fast) var(--mg-ease-out), background-color var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-opcion:hover .mgui-opcion__caja { border-color: var(--mg-color-borde-control); }
  .mgui-opcion__control:checked ~ .mgui-opcion__caja {
    border-color: var(--mg-color-accion);
    box-shadow: inset 0 0 0 1px var(--mg-color-accion);
    background: var(--mg-color-accion-suave);
  }
  .mgui-opcion__control:focus-visible ~ .mgui-opcion__caja {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-opcion__icono {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto-atenuado);
    transition: background-color var(--mg-motion-fast) var(--mg-ease-out), color var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-opcion__svg { inline-size: 1.375rem; block-size: 1.375rem; }
  .mgui-opcion__icono--letra { border: 1px solid var(--mg-color-borde-control); }
  .mgui-opcion__letra { font-family: var(--mg-font-heading); font-size: var(--mg-type-lg); font-weight: var(--mg-weight-bold); line-height: 1; }
  .mgui-opcion__control:checked ~ .mgui-opcion__icono { background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  .mgui-opcion__cuerpo { display: flex; flex-direction: column; gap: var(--mg-space-1); min-inline-size: 0; flex: 1; padding-block-start: .125rem; }
  .mgui-opcion__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); font-weight: var(--mg-weight-semibold); }
  .mgui-opcion__nota { font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-opcion__aviso { font-size: var(--mg-type-sm); color: var(--mg-status-warning-texto); }
  .mgui-opcion__marca {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 999px;
    background: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--mg-motion-fast) var(--mg-ease-out), transform var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-opcion__marca-svg { inline-size: .9rem; block-size: .9rem; stroke-width: 3; }
  .mgui-opcion__control:checked ~ .mgui-opcion__marca { opacity: 1; transform: none; }
  .mgui-opcion.is-disabled { cursor: not-allowed; color: var(--mg-color-texto-atenuado); }
  .mgui-opcion.is-disabled .mgui-opcion__caja { background: var(--mg-color-fondo); border-style: dashed; }
  @media (prefers-reduced-motion: reduce) {
    .mgui-opcion__caja,
    .mgui-opcion__icono,
    .mgui-opcion__marca { transition: none; }
  }
  @media (forced-colors: active) {
    .mgui-opcion__control:checked ~ .mgui-opcion__caja { border: 3px solid Highlight; }
    .mgui-opcion__control:checked ~ .mgui-opcion__marca { opacity: 1; forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }

  /* O8 · «plegable»: la nota de la card arranca oculta y un chevron a la derecha del título la despliega
     (pedido del titular en el paso 1 de `/app/emitir`, cuando la descripción + «pide» es larga). La `.mgui-opcion`
     es un `<label>`: el guion llama `stopPropagation()` para que el toque del chevron no toggle el radio. */
  .mgui-opcion__cabecera {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    inline-size: 100%;
  }
  .mgui-opcion__cabecera .mgui-opcion__titulo { flex: 1 1 auto; min-inline-size: 0; }
  .mgui-opcion__toggle {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--mg-space-1);
    margin: 0;
    cursor: pointer;
    color: var(--mg-color-texto-atenuado);
    border-radius: var(--mg-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--mg-motion-fast) var(--mg-ease-out), color var(--mg-motion-fast) var(--mg-ease-out), background-color var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-opcion__toggle:hover { background: var(--mg-color-accion-suave); color: var(--mg-color-accion); }
  .mgui-opcion__toggle:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-opcion__toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--mg-color-accion); }
  .mgui-opcion__toggle-svg { inline-size: 1rem; block-size: 1rem; }
  .mgui-opcion__detalle {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    margin-block-start: var(--mg-space-2);
  }
  @media (prefers-reduced-motion: reduce) {
    .mgui-opcion__toggle { transition: none; }
  }

  /* porte-vk · O15 (fix 1) · «pill»: pastillas horizontales compactas (estilo VK paso 1 de
   * `/emitir-comprobante`: «Presupuesto · Pedido · Factura · N.crédito · ...»). El contenedor envuelve
   * las pastillas con flex-wrap para que entren 8 en 1-2 filas; cada pastilla es un `<label>` oval
   * con sólo el título; el radio queda accesible pero oculto; el elegido se tiñe con
   * `:has(input:checked)` sin JS. Mantiene semántica (fieldset+radio) y teclado (flechas). */
  .mgui-opciones--pill .mgui-opciones__lista {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--mg-space-2);
    align-items: center;
  }
  .mgui-opcion-pill {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    isolation: isolate;
  }
  .mgui-opcion-pill__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
  }
  .mgui-opcion-pill__pastilla {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding: var(--mg-space-1) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: 999px;
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    line-height: 1.4;
    transition: border-color var(--mg-motion-fast) var(--mg-ease-out), background-color var(--mg-motion-fast) var(--mg-ease-out), color var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-opcion-pill:hover .mgui-opcion-pill__pastilla { border-color: var(--mg-color-borde-control); }
  /* CRISTAL V3 (auditoría 31/10/2026): el texto de la pastilla ELEGIDA iba en `--mg-color-accion` (el sólido, #2563EB) sobre el
   * tinte `-suave`, que en los temas oscuros es un azul marino: 2,24:1. El rol `--mg-color-brand-sobre-suave` es el texto de la
   * familia MEDIDO ≥ 4,5:1 sobre su `-suave` en cada tema (en los claros es prácticamente el mismo azul). */
  .mgui-opcion-pill__control:checked ~ .mgui-opcion-pill__pastilla {
    background: var(--mg-color-accion-suave);
    border-color: var(--mg-color-accion);
    color: var(--mg-color-brand-sobre-suave);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-opcion-pill__control:focus-visible ~ .mgui-opcion-pill__pastilla {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-opcion-pill.is-disabled { cursor: not-allowed; opacity: 0.6; }
  @media (prefers-reduced-motion: reduce) {
    .mgui-opcion-pill__pastilla { transition: none; }
  }
  @media (forced-colors: active) {
    .mgui-opcion-pill__control:checked ~ .mgui-opcion-pill__pastilla { border: 2px solid Highlight; }
  }

  /* ── web/r3/fuente/pagar.css ── */
  /*
   * PRODUCTOS · ola E1 (`prod-pagar`) · «Cuentas por pagar» y las órdenes de pago (`server/src/web/r3-pagar.ts` +
   * `web/r3/pagar/orden.js`): las tarjetas de arriba, la antigüedad con su barra (`<meter>`, sin anchos en línea), los filtros
   * en fila, la tabla de facturas con su importe a aplicar, los valores y retenciones de la orden y las cuentas que cuadran.
   * Sólo tokens: ningún color ni medida inventados. Las tablas ya se vuelven fichas en el teléfono (`mgui-table--fichas`).
   */
  .mgui-pagar { min-inline-size: 0; }
  /* `hidden` manda aunque el elemento lleve una clase con `display` (los datos del cheque, «Tildar todas» sin guion). */
  .mgui-pagar [hidden] { display: none; }

  /* Las secciones de la pantalla (lo que se debe · órdenes · nueva). */
  .mgui-pagar__secciones { margin: 0; }
  .mgui-pagar__seccion[aria-current="page"] { font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto); text-decoration: none; }

  /* Los filtros: en fila, alineados por arriba (`flex-start`) con las acciones a la altura de los inputs. */
  .mgui-pagar__filtros { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--mg-space-2) var(--mg-space-4); margin: 0; }
  .mgui-pagar__filtros > .mgui-field { flex: 1 1 12rem; margin-block-end: 0; min-inline-size: 0; }
  .mgui-pagar__filtros-acciones {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2);
    margin-block-start: calc(1.75rem + var(--mg-space-1)); min-block-size: 2.5rem;
  }
  @media not all and (min-width: 48rem) {
    .mgui-pagar__filtros-acciones { margin-block-start: 0; }
  }

  /* Las tarjetas de arriba: total, vencido, próximos siete días, proveedores. Fila elástica que cede ancho de cards cortas a las de importes largos. */
  .mgui-pagar__kpis {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--mg-space-3);
    margin: 0; padding: 0; list-style: none;
  }
  .mgui-pagar__kpi {
    flex: 1 1 auto; min-inline-size: min(9rem, 100%); padding: var(--mg-space-3) var(--mg-space-4);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie);
  }
  .mgui-pagar__kpi--alerta { border-color: var(--mg-status-danger-borde); }

  /* La antigüedad: la parte del total de cada tramo, con una barra nativa. */
  .mgui-pagar__parte { display: flex; align-items: center; gap: var(--mg-space-2); min-inline-size: 0; }
  .mgui-pagar__barra {
    flex: 1 1 6rem; min-inline-size: 3rem; max-inline-size: 12rem; block-size: .75rem;
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-sm); background: var(--mg-color-fondo);
  }
  .mgui-pagar__barra::-webkit-meter-bar { background: var(--mg-color-fondo); border: 0; border-radius: var(--mg-radius-sm); }
  .mgui-pagar__barra::-webkit-meter-optimum-value { background: var(--mg-status-info-solido); border-radius: var(--mg-radius-sm); }
  .mgui-pagar__barra::-moz-meter-bar { background: var(--mg-status-info-solido); }
  .mgui-pagar__barra--vencido::-webkit-meter-optimum-value { background: var(--mg-status-danger-solido); }
  .mgui-pagar__barra--vencido::-moz-meter-bar { background: var(--mg-status-danger-solido); }
  .mgui-pagar__porciento { flex: none; font-variant-numeric: tabular-nums; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-pagar__tramo--vencido { color: var(--mg-status-danger-texto); font-weight: var(--mg-weight-semibold); }

  /* Lo secundario debajo del nombre del proveedor (CUIT) y de la fecha (vencida). */
  .mgui-pagar__sub { display: block; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); font-weight: normal; }
  .mgui-pagar__vencida { color: var(--mg-status-danger-texto); font-weight: var(--mg-weight-semibold); }
  .mgui-pagar__divisa { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }

  /* La tabla de facturas de la orden: la casilla y el importe a aplicar. */
  .mgui-pagar__elegir { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--mg-color-accion); }
  .mgui-pagar__aplicar { inline-size: 100%; max-inline-size: var(--mg-campo-importe); text-align: end; font-variant-numeric: tabular-nums; }
  .mgui-pagar__fila-elegida { background: var(--mg-color-fondo); }

  /* Los valores y las retenciones: un grupo por renglón, los campos en fila. */
  .mgui-pagar__valores { display: flex; flex-direction: column; gap: var(--mg-space-3); margin: 0; }
  .mgui-pagar__valor {
    margin: 0; min-inline-size: 0; padding: var(--mg-space-3) var(--mg-space-4);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
  }
  .mgui-pagar__valor > legend { padding: 0 var(--mg-space-1); font-weight: var(--mg-weight-semibold); font-size: var(--mg-type-sm); }
  .mgui-pagar__campos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--mg-space-2) var(--mg-space-4); }
  .mgui-pagar__campos > .mgui-field { flex: 1 1 11rem; margin-block-end: 0; min-inline-size: 0; }
  .mgui-pagar__campos > .mgui-pagar__importe { flex: 0 1 11rem; }
  .mgui-pagar__cheque { margin-block-start: var(--mg-space-2); }
  .mgui-pagar__mas { margin: 0; min-inline-size: 0; }
  .mgui-pagar__mas > summary {
    cursor: pointer; list-style: none; display: inline-flex; gap: var(--mg-space-1); align-items: center;
    padding: var(--mg-space-1) 0; font-weight: var(--mg-weight-semibold); color: var(--mg-color-accion);
  }
  .mgui-pagar__mas > summary::-webkit-details-marker { display: none; }
  .mgui-pagar__mas > summary::before { content: '\25B8'; font-size: 0.8em; }
  .mgui-pagar__mas[open] > summary::before { content: '\25BE'; }
  .mgui-pagar__mas > .mgui-pagar__valores { margin-block-start: var(--mg-space-3); }

  /* Las cuentas de la orden: lo aplicado, lo pagado y la diferencia (la pinta el guion; el servidor, la primera vez). */
  .mgui-pagar__totales {
    display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: var(--mg-space-1) var(--mg-space-4);
    margin: 0; max-inline-size: 28rem; font-variant-numeric: tabular-nums;
  }
  .mgui-pagar__totales > div { display: contents; }
  .mgui-pagar__totales dt { color: var(--mg-color-texto-atenuado); min-inline-size: 0; }
  .mgui-pagar__totales dd { margin: 0; text-align: end; white-space: nowrap; font-weight: var(--mg-weight-semibold); }
  .mgui-pagar__cuadra { margin: var(--mg-space-2) 0 var(--mg-space-4); font-size: var(--mg-type-sm); }
  .mgui-pagar__cuadra--si { color: var(--mg-status-complete-texto); }
  .mgui-pagar__cuadra--no { color: var(--mg-status-danger-texto); }

  /* El detalle: los datos de la orden en dos columnas y la historia (quién y cuándo). */
  .mgui-pagar__datos {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--mg-space-1) var(--mg-space-4); margin: 0;
  }
  .mgui-pagar__datos > div { display: contents; }
  .mgui-pagar__datos dt { color: var(--mg-color-texto-atenuado); }
  .mgui-pagar__datos dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
  .mgui-pagar__historia { margin: 0; padding-inline-start: var(--mg-space-4); font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-pagar__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }

  /* En el teléfono: los datos en una columna; los importes ocupan el ancho. */
  @media not all and (min-width: 48rem) {
    .mgui-pagar__datos { grid-template-columns: minmax(0, 1fr); }
    .mgui-pagar__datos dt { margin-block-start: var(--mg-space-2); }
    .mgui-pagar__campos > .mgui-field, .mgui-pagar__campos > .mgui-pagar__importe { flex-basis: 100%; }
    .mgui-pagar__aplicar { max-inline-size: none; }
    .mgui-pagar__barra { max-inline-size: none; }
  }

  /* ── web/r3/fuente/paso-header.css ── */
  /*
   * mgui-paso-header — EMI-F · header full-width que arranca cada paso del formulario de emisión
   * (replica el patrón de `bo.valkyrie.ar/emitir-comprobante`). Vive en la biblioteca R3 porque lo
   * reusarán futuras pantallas con pasos (compras, cobranzas, remitos). No carga hex ni colores con
   * nombre: tokens y roles del generador.
   *
   * Estructura:
   *   .mgui-paso-header            fondo acentuado, borde superior fino, padding generoso
   *     .mgui-paso-header__linea   flex en línea: step-badge + texto del paso
   *     .mgui-paso-header__texto   «Paso N · Nombre del paso»
   *       .mgui-paso-header__ordinal   «Paso N» (ordinal numérico)
   *       .mgui-paso-header__nombre    «Nombre del paso»
   *     .mgui-paso-header__bajada  opcional, una línea corta de contexto bajo el título
   *
   * El step-badge («N» en pastilla) viene del componente `.mgui-step-badge` del propio generador.
   */
  /* O6-UX · punto 2 · encabezados uniformes: todos los pasos pintan en SÓLIDO (`--mg-color-accion`
   * sobre `--mg-color-sobre-solido`), como el que antes marcaba sólo el paso visible. El titular pidió
   * que el aspecto del paso 4 (el que estaba `.is-en-progreso` cuando miró el móvil) sea el DEFAULT
   * de todos. La variante `.is-en-progreso` queda definida pero sin diferenciación visual: el guion
   * (IntersectionObserver en `emitir.js`) sigue agregando la clase al paso visible, por si en el
   * futuro queremos reintroducir un indicador — y así no romper tests ni el observer. */
  .mgui-paso-header {
    display: flex; flex-direction: row; align-items: center; gap: var(--mg-space-2);
    flex-wrap: wrap;
    margin: 0; padding: var(--mg-space-3) var(--mg-space-4);
    background: var(--mg-color-accion);
    border-block-start: 1px solid var(--mg-color-borde);
    border-start-start-radius: var(--mg-radius-md);
    border-start-end-radius: var(--mg-radius-md);
    color: var(--mg-color-sobre-solido);
  }
  .mgui-paso-header__linea {
    display: inline-flex; align-items: center; gap: var(--mg-space-2);
    font-weight: var(--mg-weight-semibold); font-size: var(--mg-type-md);
    /*
     * ola 31 · el chevron de plegar/desplegar queda inmediatamente a continuación del nombre del paso
     * (como `bo.valkyrie.ar/emitir-comprobante`). Antes la línea tenía `flex: 1 1 auto` y crecía hasta
     * llenar el header entero, empujando al chevron contra el borde derecho. Con `flex: 0 1 auto` la
     * línea ocupa SÓLO el ancho del contenido (step-badge + nombre) y el `__toggle` queda pegado al
     * título por el gap del flex-row. El `__bajada` con `flex-basis: 100%` sigue cayendo en la
     * siguiente fila (`flex-wrap: wrap` del header lo permite).
     */
    flex: 0 1 auto;
  }

  /* porte-vk · O16 (fix 3) · botón «chevron» del paso: alterna plegado/desplegado del cuerpo. Rota el icono
   * cuando el paso está cerrado (mira a la derecha); abierto apunta hacia abajo. El fondo transparente deja
   * ver el azul del header; el hover le da un velo suave para marcar que es tocable. Área de 2.25rem para
   * dedo cómodo (target táctil ≥ 36 px). */
  .mgui-paso-header__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2.25rem; block-size: 2.25rem;
    padding: 0; margin: 0;
    /* O25 · pegado al titulo (margin-inline-start: 0): el titular pidio que el chevron
     * quede inmediatamente despues del titulo del paso, no empujado al borde derecho. */
    margin-inline-start: var(--mg-space-1);
    background: transparent; color: inherit;
    border: 0; border-radius: var(--mg-radius-sm);
    cursor: pointer; flex: 0 0 auto;
  }
  .mgui-paso-header__toggle:hover { background: color-mix(in oklab, var(--mg-color-sobre-solido) 12%, transparent); }
  .mgui-paso-header__toggle:focus-visible { background: color-mix(in oklab, var(--mg-color-sobre-solido) 12%, transparent); outline: none; }
  .mgui-paso-header__toggle .mgui-ico { background-color: var(--mg-color-sobre-solido); inline-size: 1.25rem; block-size: 1.25rem; transition: transform 160ms ease-out; }
  .mgui-paso-header__toggle[aria-expanded="false"] .mgui-ico { transform: rotate(-90deg); }
  .mgui-paso-header__bajada { flex-basis: 100%; }
  /* 31/10/2026 (pedido del titular) · lo que el paso muestra a la DERECHA del título («Emisor: Razón Social» en el detalle del
   * comprobante): `margin-inline-start: auto` lo pega al borde derecho; en una pantalla angosta cae a su propia fila y sigue
   * a la derecha. Hereda el color del header (sólido o vidrio). */
  .mgui-paso-header__derecha {
    margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--mg-space-2); min-inline-size: 0;
    font-size: var(--mg-type-sm); font-weight: var(--mg-weight-medium); color: inherit; opacity: 0.95;
  }
  .mgui-paso-header__texto { display: inline-flex; gap: var(--mg-space-2); align-items: baseline; flex-wrap: wrap; }
  .mgui-paso-header__ordinal { font-weight: var(--mg-weight-medium); color: var(--mg-color-sobre-solido); font-size: var(--mg-type-sm); opacity: 0.85; }
  .mgui-paso-header__nombre { font-weight: var(--mg-weight-semibold); font-size: var(--mg-type-md); }
  .mgui-paso-header__bajada { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-sobre-solido); opacity: 0.85; }

  /* La variante `.is-en-progreso` ahora es idempotente respecto del default (todos los headers están
   * ya en sólido): la clase se mantiene en el DOM para no romper el observer en `emitir.js`. */
  .mgui-paso-header.is-en-progreso { background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  .mgui-paso-header.is-en-progreso .mgui-paso-header__ordinal,
  .mgui-paso-header.is-en-progreso .mgui-paso-header__bajada { color: var(--mg-color-sobre-solido); }
  /* P4 (31/10/2026, ítem 30 · VK `VhSection`): toda la línea del header pliega/despliega (el guion delega el clic al
   * chevron), así que el header entero se ofrece como clickeable. Los controles que lleve adentro conservan el suyo. */
  .mgui-paso-header { cursor: pointer; }
  .mgui-paso-header :is(a, button, input, select, textarea, label) { cursor: auto; }
  .mgui-paso-header :is(a, button, label, .mgui-paso-header__toggle) { cursor: pointer; }

  /* ── web/r3/fuente/portal-participante.css ── */
  /*
   * Importaciones · ola P · el TELÉFONO de los participantes del portal (`server/src/web/r3-portal-dispositivo.ts` +
   * `web/r3/app-proveedor/portal.js`): el número, vincular este teléfono, los teléfonos vinculados, los avisos, instalar la
   * aplicación y «Entrar con este teléfono» en la puerta del portal; la columna del teléfono en la administración. Sólo tokens:
   * ningún color ni medida inventados. Las piezas que necesitan el guion nacen escondidas y el guion las muestra si sirven acá.
   */

  /* `hidden` manda aunque el elemento lleve una clase con `display` (botones, tarjetas). */
  [data-mg-portal-dispositivo] [hidden],
  .mgui-portal-llave[hidden],
  .mgui-portal-llave [hidden],
  [data-mg-pwa-instalar-tarjeta][hidden] { display: none; }

  /* El número, grande y legible (se dicta por teléfono). */
  .mgui-portal-telefono { margin: 0; font-size: var(--mg-type-lg); }

  /* «Cambiar el número»: plegado; abierto cuando volvió con un error para corregir. */
  .mgui-portal-cambiar > summary { cursor: pointer; color: var(--mg-color-accion); font-weight: 600; }
  .mgui-portal-cambiar[open] > summary { margin-block-end: var(--mg-space-3); }

  /* La columna «Teléfono» de la administración: el número, su estado y el enlace, apretados. */
  .mgui-portal-telefono-celda { gap: var(--mg-space-1); }

  /* «¿Ya vinculaste este teléfono?» en la puerta del portal: separado de la tarjeta del correo. */
  .mgui-portal-llave { margin-block: var(--mg-space-4); }

  /* ── web/r3/fuente/precios-masivo.css ── */
  /*
   * productos · C (`prod-precios`) · cambios masivos de precios de una lista (`server/src/web/r3-precios-masivo.ts`): el formulario
   * (operación, valor, redondeo y alcance con sus paneles), la selección a mano con su filtro, el estimado en vivo, el resumen de
   * la previa, las confirmaciones y el margen dentro de la tabla de precios de la lista. Composición sobre lo que ya hay
   * (`tarjeta`, `campo`, `tabla`, `campo-especial` para las casillas y su cuenta); sólo tokens, nada de colores sueltos.
   */

  /* ── Valores apilados en una celda numérica: costo de gestión y del lote, el margen de cada uno, el después con su
     diferencia. Una columna con dos renglones en vez de dos columnas: la tabla de precios entra en la pantalla. ── */
  .mgui-pmas__apilado {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--mg-space-1);
    white-space: nowrap;
  }
  .mgui-pmas__apilado > span {
    font-size: var(--mg-type-sm);
  }
  /* El margen: con la insignia «Bajo costo» debajo. */
  .mgui-pmas__margen {
    font-size: var(--mg-type-sm);
  }

  /* ── El alcance: un grupo de opciones sin el marco del navegador ── */
  .mgui-pmas__alcance {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
  }
  .mgui-pmas__alcance > .mgui-cluster {
    gap: var(--mg-space-2) var(--mg-space-4);
  }
  .mgui-pmas__opcion,
  .mgui-pmas__confirmar {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-2);
    cursor: pointer;
  }
  .mgui-pmas__opcion input,
  .mgui-pmas__confirmar input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    accent-color: var(--mg-color-accion);
    flex: none;
  }
  .mgui-pmas__confirmar {
    align-items: flex-start;
  }

  /* Cada panel del alcance. Sin guion se ven todos (cada uno con su título); con guion, sólo el elegido. */
  .mgui-pmas__panel {
    display: grid;
    gap: var(--mg-space-2);
  }
  .mgui-pmas__panel[hidden] {
    display: none;
  }
  .mgui-pmas__multiple {
    min-block-size: 7rem;
  }

  /* ── La selección a mano: la tabla se desplaza adentro y el filtro queda arriba ── */
  .mgui-pmas__filtro {
    max-inline-size: 24rem;
  }
  /* `position: relative`: las etiquetas ocultas de las casillas (`mgui-sr-only`, absolutas) quedan adentro del desplazamiento. */
  .mgui-pmas__seleccion {
    position: relative;
    max-block-size: 28rem;
    overflow: auto;
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-md);
  }
  .mgui-pmas__seleccion tr[hidden] {
    display: none;
  }

  /* ── El estimado en vivo, debajo del formulario ── */
  .mgui-pmas__estimado {
    margin: 0;
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto-sutil);
  }

  /* ── El resumen de la previa: rótulo arriba, número abajo, en una grilla que envuelve ── */
  .mgui-pmas__resumen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--mg-space-3);
    margin: 0;
  }
  .mgui-pmas__resumen > div {
    display: grid;
    gap: var(--mg-space-1);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-sm);
  }
  .mgui-pmas__resumen dt {
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto-sutil);
  }
  .mgui-pmas__resumen dd {
    margin: 0;
    font-weight: var(--mg-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  /* ── El detalle de un cambio en el historial ── */
  .mgui-pmas__detalle {
    display: block;
    margin-block-start: var(--mg-space-1);
    font-size: var(--mg-type-sm);
  }

  /* En el teléfono el margen y el resumen ocupan el ancho (la tabla ya se vuelve fichas). */
  @media not all and (min-width: 40rem) {
    .mgui-pmas__apilado {
      align-items: flex-start;
      white-space: normal;
    }
    .mgui-pmas__resumen {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mgui-pmas__seleccion {
      max-block-size: none;
    }
  }

  /* ── web/r3/fuente/producto-ficha.css ── */
  /*
   * PRODUCTO-FICHA (31/10/2026) · la ficha completa del producto (`web/r3-producto-ficha.ts` + `web/r3/productos/ficha.js`): las
   * secciones plegables (`<details>` nativo, como `.mgui-detalle-colapsado` de Emitir), la galería de imágenes, el desglose
   * del costo de importación y el contador de la descripción. Sólo tokens: ningún color ni medida inventados.
   */
  .mgui-ficha { min-inline-size: 0; }
  .mgui-ficha__seccion, .mgui-ficha__mas {
    margin: 0; padding: 0; min-inline-size: 0;
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie);
  }
  .mgui-ficha__titulo {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-2);
    padding: var(--mg-space-3) var(--mg-space-4); cursor: pointer; list-style: none;
    font-family: var(--mg-font-heading); font-weight: var(--mg-weight-semibold); font-size: var(--mg-type-md);
  }
  .mgui-ficha__titulo::-webkit-details-marker { display: none; }
  .mgui-ficha__titulo::before {
    content: '\25B8'; font-size: 0.8em; color: var(--mg-color-texto-atenuado);
    transition: transform var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-ficha__seccion[open] > .mgui-ficha__titulo::before, .mgui-ficha__mas[open] > .mgui-ficha__titulo::before { content: '\25BE'; }
  .mgui-ficha__titulo:hover { color: var(--mg-color-accion); }
  .mgui-ficha__titulo:focus-visible { outline: 2px solid var(--mg-color-accion); outline-offset: -2px; border-radius: var(--mg-radius-md); }
  .mgui-ficha__nombre { flex: 0 1 auto; min-inline-size: 0; }
  .mgui-ficha__resumen {
    flex: 1 1 10rem; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--mg-font-ui); font-weight: var(--mg-weight-normal); font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado);
  }
  .mgui-ficha__cuerpo { padding: 0 var(--mg-space-4) var(--mg-space-4); min-inline-size: 0; }
  .mgui-ficha__cuerpo > .mgui-stack > :first-child, .mgui-ficha__cuerpo > form > :first-child { margin-block-start: 0; }
  /* El detalle secundario dentro de una sección (el desglose del costo, el formulario del despacho): un pliegue chico. */
  .mgui-ficha__detalle { margin: 0; min-inline-size: 0; }
  .mgui-ficha__detalle > summary {
    cursor: pointer; list-style: none; display: inline-flex; gap: var(--mg-space-1); align-items: center;
    padding: var(--mg-space-1) 0; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); color: var(--mg-color-accion);
  }
  .mgui-ficha__detalle > summary::-webkit-details-marker { display: none; }
  .mgui-ficha__detalle > summary::before { content: '\25B8'; font-size: 0.8em; }
  .mgui-ficha__detalle[open] > summary::before { content: '\25BE'; }
  .mgui-ficha__detalle > form, .mgui-ficha__detalle > dl { margin-block-start: var(--mg-space-3); }
  /* El desglose del costo por unidad: rótulo a la izquierda, importe tabular a la derecha. */
  .mgui-ficha__desglose {
    display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: var(--mg-space-1) var(--mg-space-4);
    margin: 0; font-size: var(--mg-type-sm); font-variant-numeric: tabular-nums;
  }
  .mgui-ficha__desglose > div { display: contents; }
  .mgui-ficha__desglose dt { color: var(--mg-color-texto-atenuado); min-inline-size: 0; }
  .mgui-ficha__desglose dd { margin: 0; text-align: end; white-space: nowrap; }
  /* La galería: miniaturas cuadradas, la portada marcada, las acciones debajo. */
  .mgui-ficha__galeria {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--mg-space-3);
    margin: 0; padding: 0; list-style: none;
  }
  .mgui-ficha__foto {
    display: flex; flex-direction: column; gap: var(--mg-space-2); align-items: flex-start; min-inline-size: 0;
    padding: var(--mg-space-2); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
  }
  .mgui-ficha__miniatura {
    inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1; object-fit: contain;
    border-radius: var(--mg-radius-sm); background: var(--mg-color-fondo);
  }
  .mgui-ficha__foto-nombre { font-size: var(--mg-type-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
  .mgui-ficha__foto-acciones { gap: var(--mg-space-1); }
  /* El contador de la descripción larga (lo pinta el guion). */
  .mgui-ficha__contador { text-align: end; font-variant-numeric: tabular-nums; }
  .mgui-ficha__contador--pasado { color: var(--mg-status-danger-texto); }
  /* En el teléfono las tablas de la ficha ya se vuelven fichas (`mgui-table`); el resumen del pliegue baja de línea. */
  @media not all and (min-width: 48rem) {
    .mgui-ficha__resumen { flex-basis: 100%; white-space: normal; }
    .mgui-ficha__desglose { grid-template-columns: minmax(0, 1fr); }
    .mgui-ficha__desglose dd { text-align: start; }
  }

  /* ── web/r3/fuente/productos.css ── */
  /*
   * PRODUCTOS · ola A (31/10/2026) · la lista de productos R3 (`server/src/web/r3-productos.ts`) y los costos por planilla. Sólo lo
   * que no existe: la tabla es `mgui-table` (+ `tablaOrdenable`), los chips `mgui-chip`, los KPI `mgui-kpi`, la búsqueda y los
   * filtros `mgui-buscador` / `mgui-filtros`, el menú de cada fila `mgui-menu-acciones`. Sólo tokens.
   *
   * Las columnas se PLIEGAN por el ancho de la lista (consulta de contenedor, no de la ventana: el menú lateral abierto o
   * cerrado cambia el ancho útil): prioridad 4 por debajo de 90rem, la 3 por debajo de 72rem y la 2 por debajo de 56rem. Lo
   * plegado aparece en «Ver más» de cada fila (`mgui-prod-mas`), renglón por renglón, sólo cuando su columna no se ve. En el
   * teléfono la tabla ya se vuelve fichas (`mgui-table--fichas`, 768px).
   */
  .mgui-prod { min-inline-size: 0; }

  /* La cabecera: la acción principal y la exportación (un desplegable sin guion). */
  .mgui-prod-cabecera { align-items: center; }
  .mgui-prod-exportar { position: relative; }
  .mgui-prod-exportar > summary { list-style: none; cursor: pointer; }
  .mgui-prod-exportar > summary::-webkit-details-marker { display: none; }
  .mgui-prod-exportar__panel {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--mg-space-1)); z-index: var(--mg-layer-elevado);
    display: flex; flex-direction: column; min-inline-size: 11rem; padding: var(--mg-space-1);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-prod-exportar__opcion {
    display: flex; align-items: center; min-block-size: 2.5rem; padding: var(--mg-space-1) var(--mg-space-3);
    border-radius: var(--mg-radius-sm); color: var(--mg-color-texto); text-decoration: none; font-size: var(--mg-type-sm);
  }
  .mgui-prod-exportar__opcion:hover, .mgui-prod-exportar__opcion:focus-visible { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-prod-secundarias { gap: var(--mg-space-2); }

  /* El resumen del catálogo: cuatro KPI en una fila elástica que reparte el espacio según el contenido de cada card (las de datos cortos ceden ancho a las de importes largos). */
  .mgui-prod-resumen {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--mg-space-4); min-inline-size: 0;
  }
  .mgui-prod-resumen > .mgui-kpi {
    flex: 1 1 auto; min-inline-size: min(8.5rem, 100%);
  }
  .mgui-prod-kpi .mgui-kpi__hint a { color: var(--mg-color-enlace); }
  /* Un valorizado de ocho cifras no se sale de su KPI: la card crece con su contenido y, en pantallas chicas, baja un nivel. */
  .mgui-prod-kpi .mgui-kpi__value { white-space: nowrap; }
  @container (max-width: 12rem) {
    .mgui-prod-kpi .mgui-kpi__value { font-size: var(--mg-type-xl); white-space: normal; overflow-wrap: anywhere; }
  }

  /* La barra: la búsqueda (crece), las columnas (al lado) y los filtros (debajo, a lo ancho). */
  .mgui-prod-barra { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--mg-space-3); min-inline-size: 0; }
  .mgui-prod-barra > .mgui-buscador { flex: 1 1 18rem; margin: 0; max-inline-size: none; }
  .mgui-prod-barra > .mgui-filtros { flex: 1 1 100%; order: 3; margin: 0; min-inline-size: 0; }
  .mgui-prod-filtro-casilla { align-self: start; padding-block-start: calc(1.75rem + var(--mg-space-1)); }
  .mgui-prod-filtro-casilla .mgui-field__label { display: flex; gap: var(--mg-space-2); align-items: center; min-block-size: 2.5rem; font-weight: var(--mg-weight-normal); }

  .mgui-prod-columnas { position: relative; flex: 0 0 auto; }
  .mgui-prod-columnas__resumen {
    display: flex; align-items: center; gap: var(--mg-space-2); min-block-size: var(--mg-control-min); padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie);
    color: var(--mg-color-texto); font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); cursor: pointer; list-style: none;
  }
  .mgui-prod-columnas__resumen::-webkit-details-marker { display: none; }
  .mgui-prod-columnas__resumen:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 0; }
  .mgui-prod-columnas__cuenta { color: var(--mg-color-texto-sutil); font-weight: var(--mg-weight-normal); font-variant-numeric: tabular-nums; }
  .mgui-prod-columnas__formulario {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--mg-space-1)); z-index: var(--mg-layer-elevado);
    inline-size: min(30rem, calc(100vw - 2 * var(--mg-space-4))); padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-prod-columnas__lista { display: grid; gap: var(--mg-space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .mgui-prod-columnas__opcion { display: flex; gap: var(--mg-space-2); align-items: flex-start; font-size: var(--mg-type-sm); }
  .mgui-prod-columnas__nombre { font-weight: var(--mg-weight-semibold); }

  /* La cuenta y las filas por página. */
  .mgui-prod-pie-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-2) var(--mg-space-4); }
  .mgui-prod-cuenta { margin: 0; color: var(--mg-color-texto-sutil); font-size: var(--mg-type-sm); }
  .mgui-prod-por-pagina { display: flex; align-items: center; gap: var(--mg-space-2); margin: 0; }
  .mgui-prod-por-pagina .mgui-field__label { margin: 0; }
  .mgui-prod-por-pagina .mgui-field__control { inline-size: auto; min-inline-size: 5rem; }

  /* La lista: el contenedor de las consultas por ancho. */
  .mgui-prod-lista { container: mgui-prod / inline-size; min-inline-size: 0; }
  .mgui-prod-lista .mgui-table__cell { vertical-align: top; }
  /* Más columnas en el mismo ancho: la mitad del relleno lateral (en el teléfono manda el de las fichas, que viene después) y
     encabezados que envuelven («COSTO DE / GESTIÓN»): una columna no es más ancha que su número por culpa del rótulo. */
  .mgui-prod-lista .mgui-table__cell, .mgui-prod-lista .mgui-table__head-cell { padding-inline: var(--mg-space-2); }
  .mgui-prod-lista .mgui-table__head-cell { white-space: normal; }
  .mgui-prod-col--elegir { inline-size: 2.5rem; }
  .mgui-prod-col--producto { min-inline-size: 13rem; }
  /* Las columnas de control (elegir y el menú ⋮) no ensanchan la tabla con su rótulo: el texto sigue en el encabezado para el
     lector de pantalla, sin tamaño visible. */
  .mgui-prod-lista .mgui-table__head-cell.mgui-prod-col--elegir,
  .mgui-prod-lista .mgui-table__head-cell.mgui-prod-col--acciones { font-size: 0; letter-spacing: 0; padding-inline: var(--mg-space-1); }
  .mgui-prod-col--acciones { white-space: nowrap; }

  /* La celda del producto: foto (si hay), SKU con sus chips, nombre y los datos de la ficha. */
  .mgui-prod-producto { display: flex; gap: var(--mg-space-3); align-items: flex-start; min-inline-size: 0; text-align: start; }
  .mgui-prod-producto__foto {
    flex: none; inline-size: 2.5rem; block-size: 2.5rem; object-fit: contain;
    border: 1px solid var(--mg-color-borde-suave); border-radius: var(--mg-radius-sm); background: var(--mg-color-fondo);
  }
  .mgui-prod-producto__texto { display: flex; flex-direction: column; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-prod-producto__linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-2); min-inline-size: 0; }
  .mgui-prod-producto__sku { font-weight: var(--mg-weight-semibold); overflow-wrap: anywhere; }
  /* El color y el subrayado de enlace, sólo cuando el SKU lleva a la ficha: quien no la abre (el contador en sólo lectura) ve el SKU
     como texto (fix-postrescate · 5). */
  a.mgui-prod-producto__sku { color: var(--mg-color-enlace); text-decoration: none; }
  a.mgui-prod-producto__sku:hover { text-decoration: underline; }
  .mgui-prod-producto__chips { display: inline-flex; flex-wrap: wrap; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-prod-producto__nombre { color: var(--mg-color-texto); overflow-wrap: anywhere; }
  .mgui-prod-producto__meta { color: var(--mg-color-texto-sutil); font-size: var(--mg-type-xs); overflow-wrap: anywhere; }

  /* Números: rojo si no hay stock (como Valkyrie) o el margen es negativo; la nota debajo, chica. */
  .mgui-prod-num { font-variant-numeric: tabular-nums; }
  .mgui-prod-num--negativo { color: var(--mg-status-danger-texto); font-weight: var(--mg-weight-semibold); }
  .mgui-prod-nota { display: block; color: var(--mg-color-texto-sutil); font-size: var(--mg-type-xs); white-space: normal; }
  .mgui-prod-ml { display: inline-flex; flex-direction: column; align-items: flex-end; }
  .mgui-prod-acciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); align-items: center; justify-content: flex-end; }

  /* «Ver más»: sólo cuando hay columnas plegadas, y en él sólo los renglones de las plegadas. */
  .mgui-prod-mas { display: none; margin: 0; }
  .mgui-prod-mas__resumen {
    display: inline-flex; gap: var(--mg-space-1); align-items: center; cursor: pointer; list-style: none;
    color: var(--mg-color-enlace); font-size: var(--mg-type-xs); font-weight: var(--mg-weight-semibold);
  }
  .mgui-prod-mas__resumen::-webkit-details-marker { display: none; }
  .mgui-prod-mas__resumen::before { content: '\25B8'; font-size: 0.8em; }
  .mgui-prod-mas[open] > .mgui-prod-mas__resumen::before { content: '\25BE'; }
  .mgui-prod-mas__resumen:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 2px; border-radius: var(--mg-radius-sm); }
  .mgui-prod-mas__lista {
    display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--mg-space-1) var(--mg-space-3);
    margin: var(--mg-space-2) 0 0; font-size: var(--mg-type-sm);
  }
  .mgui-prod-mas__fila { display: none; }
  .mgui-prod-mas__lista dt { color: var(--mg-color-texto-sutil); }
  .mgui-prod-mas__lista dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
  .mgui-prod-mas__lista .mgui-prod-ml { align-items: flex-end; }
  /* Tres clases: la columna plegada le gana a `.mgui-table--fichas .mgui-table__cell { display: flex }` del teléfono. */
  @container mgui-prod (max-width: 89.99rem) {
    .mgui-prod-lista .mgui-table__cell.mgui-prod-col--p4,
    .mgui-prod-lista .mgui-table__head-cell.mgui-prod-col--p4 { display: none; }
    .mgui-prod-mas { display: block; }
    .mgui-prod-mas__fila--p4 { display: contents; }
  }
  @container mgui-prod (max-width: 71.99rem) {
    .mgui-prod-lista .mgui-table__cell.mgui-prod-col--p3,
    .mgui-prod-lista .mgui-table__head-cell.mgui-prod-col--p3 { display: none; }
    .mgui-prod-mas__fila--p3 { display: contents; }
    /* La acción principal de la fila se pliega: el SKU abre la ficha y el menú ⋮ la ofrece primero. */
    .mgui-prod-acciones > .mgui-btn { display: none; }
  }
  @container mgui-prod (max-width: 55.99rem) {
    .mgui-prod-lista .mgui-table__cell.mgui-prod-col--p2,
    .mgui-prod-lista .mgui-table__head-cell.mgui-prod-col--p2 { display: none; }
    .mgui-prod-mas__fila--p2 { display: contents; }
    .mgui-prod-col--producto { min-inline-size: 11rem; }
    /* La portada va arriba del SKU: al lado le come el ancho al texto (los chips no se parten) y la tabla se desplazaría. */
    .mgui-prod-producto { flex-direction: column; gap: var(--mg-space-1); }
  }

  /* Debajo de la tabla: de dónde sale cada número. */
  .mgui-prod-notas { display: grid; gap: var(--mg-space-1); margin: 0; padding-inline-start: var(--mg-space-4); color: var(--mg-color-texto-sutil); font-size: var(--mg-type-xs); }

  /* El alta rápida y el costo de a uno: dos campos lado a lado que bajan de a uno. */
  .mgui-prod-alta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); align-items: start; gap: 0 var(--mg-space-4); }

  /* La previa de la planilla: cuántos renglones en cada estado. */
  .mgui-prod-previa-resumen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--mg-space-2) var(--mg-space-4); margin: 0;
  }
  .mgui-prod-previa-resumen > div { display: flex; justify-content: space-between; gap: var(--mg-space-2); }
  .mgui-prod-previa-resumen dt { color: var(--mg-color-texto-sutil); }
  .mgui-prod-previa-resumen dd { margin: 0; font-weight: var(--mg-weight-semibold); font-variant-numeric: tabular-nums; }

  /* En el teléfono: la ficha de cada fila con el producto arriba; las acciones a la izquierda; la barra de a uno. */
  @media not all and (min-width: 768px) {
    .mgui-prod-col--producto { min-inline-size: 0; }
    /* En la ficha del teléfono hay ancho para la portada al lado del texto (gana a la regla de la lista angosta, que va antes). */
    .mgui-prod-producto { flex-direction: row; gap: var(--mg-space-3); }
    .mgui-prod-lista .mgui-table--fichas .mgui-prod-col--acciones { justify-content: flex-start; }
    .mgui-prod-lista .mgui-table--fichas .mgui-prod-col--acciones::before { content: none; }
    .mgui-prod-acciones { justify-content: flex-start; }
    .mgui-prod-columnas { flex: 1 1 100%; }
    .mgui-prod-columnas__formulario { position: static; inline-size: auto; margin-block-start: var(--mg-space-1); box-shadow: none; }
    .mgui-prod-exportar__panel { inset-inline-end: auto; inset-inline-start: 0; }
    .mgui-prod-mas__lista { grid-template-columns: minmax(0, 1fr) minmax(0, max-content); }
  }

  /* ── web/r3/fuente/publica.css ── */
  /*
   * Sitio público (SITIO · frente A; brief §6.3, `sitio/base.html` de la V2): la cáscara pública (`ui/cascara-publica.ts`)
   * y las piezas del sitio —héroe, vitrina, tarjetas 3/2/1, sección de banda, formulario de 32 rem y documento de 68ch—
   * con los tokens y roles de siempre (nada nuevo en mg.tokens). Propiedades lógicas, sin colores crudos ni !important.
   * Móvil primero: los cortes son 768 y 1024 px (--mg-bp-md, --mg-bp-lg) y el complemento va con «not all and».
   */

  /* ── Documento: pie abajo aunque el contenido sea corto ── */
  .mgui-publica { display: flex; flex-direction: column; }

  /* ── Encabezado: los botones del consumidor, la barra y la navegación ── */
  .mgui-publica__encabezado {
    display: flex;
    flex-direction: column;
    border-block-end: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
  }
  /* Los dos botones del consumidor: a la vista desde el primer acceso, a cualquier ancho, fuera de todo menú. */
  .mgui-publica__derechos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--mg-space-1) var(--mg-space-4);
    padding-block: var(--mg-space-1);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
    background: var(--mg-color-fondo);
    font-size: var(--mg-type-sm);
  }
  .mgui-publica__derecho {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    color: var(--mg-color-enlace);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-publica__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-3);
    padding-block: var(--mg-space-3);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
  }
  .mgui-publica__inicio { display: inline-flex; color: var(--mg-color-texto); text-decoration: none; }
  /* Idioma, «Ingresar», el llamado y «Menú» (o Volver y Ayuda) juntos, al final de la barra: nunca en renglones sueltos. */
  .mgui-publica__herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mg-space-2);
    margin-inline-start: auto;
  }
  /* El cajón sin JS (el patrón de la cáscara): la casilla, fuera de la vista y en el recorrido del tabulador. */
  .mgui-publica__interruptor { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .mgui-publica__abrir {
    display: none;
    align-items: center;
    min-block-size: var(--mg-control-min);
    padding-inline: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto);
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-publica__interruptor:focus-visible ~ .mgui-publica__barra .mgui-publica__abrir {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-publica__nav {
    padding-block: var(--mg-space-1);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
    border-block-start: 1px solid var(--mg-color-borde);
  }
  .mgui-publica__lista { display: flex; flex-wrap: wrap; gap: var(--mg-space-1) var(--mg-space-4); margin: 0; padding: 0; list-style: none; }
  .mgui-publica__enlace {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    color: var(--mg-color-texto);
    font-weight: var(--mg-weight-medium);
    text-decoration: none;
  }
  .mgui-publica__enlace:hover { color: var(--mg-color-enlace); text-decoration-line: underline; }
  .mgui-publica__enlace[aria-current="page"] {
    color: var(--mg-color-enlace);
    font-weight: var(--mg-weight-semibold);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
  }
  @media (min-width: 768px) {
    .mgui-publica__interruptor { display: none; }
  }
  @media not all and (min-width: 768px) {
    .mgui-publica__abrir { display: inline-flex; }
    .mgui-publica__nav { display: none; }
    .mgui-publica__interruptor:checked ~ .mgui-publica__nav { display: block; }
    .mgui-publica__nav .mgui-publica__lista { flex-direction: column; }
  }
  @media (pointer: coarse) {
    .mgui-publica__derecho,
    .mgui-publica__enlace { min-block-size: var(--mg-control-min); }
  }

  /* ── Contenido: una columna central y las bandas a todo el ancho (sin desbordar: nada de 100vw) ── */
  .mgui-publica__contenido {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns:
      [completo-inicio] minmax(var(--mg-space-4), 1fr)
      [centro-inicio] minmax(0, var(--mg-contenedor-max))
      [centro-fin] minmax(var(--mg-space-4), 1fr) [completo-fin];
    align-content: start;
    padding-block-end: var(--mg-space-12);
    scroll-margin-block-start: 22rem;
  }
  .mgui-publica__contenido:focus { outline: none; }
  .mgui-publica__contenido > * { grid-column: centro-inicio / centro-fin; min-inline-size: 0; }
  .mgui-publica__contenido > .mgui-seccion { grid-column: completo-inicio / completo-fin; }
  .mgui-publica--flujo .mgui-publica__contenido { padding-block-start: var(--mg-space-8); }

  /* ── El encabezado de la página que dibuja la cáscara (páginas de texto, flujos, legales y errores) ── */
  .mgui-publica__titular { display: flex; flex-direction: column; gap: var(--mg-space-2); padding-block: var(--mg-space-8) var(--mg-space-6); }
  .mgui-publica__titular > * { margin: 0; }
  .mgui-publica__titulo { font-size: var(--mg-type-2xl); }
  .mgui-publica__bajada { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-md); }
  .mgui-publica__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin-block-start: var(--mg-space-2); }

  /* ── Pie: banda profunda ── */
  .mgui-publica__pie {
    padding-block: var(--mg-space-8) var(--mg-space-12);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
    font-size: var(--mg-type-sm);
  }
  .mgui-publica__pie-interior { display: flex; flex-direction: column; gap: var(--mg-space-4); max-inline-size: var(--mg-contenedor-max); margin-inline: auto; }
  .mgui-publica__pie a,
  .mgui-publica__pie .mgui-publica__enlace { color: var(--mg-color-sobre-marca-profunda); }
  /* SITIO-H4: los derechos del pie, subrayados como en el encabezado (una sola regla para el selector). */
  .mgui-publica__pie .mgui-publica__derecho {
    color: var(--mg-color-sobre-marca-profunda);
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .mgui-publica__pie .mgui-publica__enlace { text-decoration-line: underline; }
  .mgui-publica__pie :focus-visible { outline-color: var(--mg-color-sobre-marca-profunda); }
  .mgui-publica__pie .mgui-publica__derechos { justify-content: flex-start; padding: 0; background: var(--mg-color-marca-profunda); }
  .mgui-publica__firma { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-4); margin: 0; }
  .mgui-publica__lema { font-family: var(--mg-font-heading); font-weight: var(--mg-weight-semibold); }
  .mgui-publica__nota { margin: 0; }

  /* ── Héroe: dos columnas desde 1024 px; en el teléfono, en el orden del documento (título, bajada, precio, llamado,
     condiciones y vitrina) ── */
  .mgui-heroe {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-8);
    align-items: center;
    padding-block: var(--mg-space-8) var(--mg-space-12);
  }
  .mgui-heroe__texto { display: flex; flex-direction: column; gap: var(--mg-space-3); }
  .mgui-heroe > :not(.mgui-heroe__texto, .mgui-heroe__figura),
  .mgui-heroe__texto > * { margin: 0; }
  @media (min-width: 1024px) {
    .mgui-heroe:has(> .mgui-heroe__figura) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--mg-space-12); }
  }
  .mgui-heroe__kicker {
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mgui-heroe h1,
  .mgui-heroe__titulo { font-size: var(--mg-type-3xl); font-weight: var(--mg-weight-bold); line-height: var(--mg-leading-ajustado); }
  .mgui-heroe__acento { display: block; color: var(--mg-color-enlace); }
  .mgui-heroe__bajada { color: var(--mg-color-texto); font-size: var(--mg-type-md); }
  .mgui-heroe__precio { font-size: var(--mg-type-md); }
  .mgui-heroe__precio strong { font-family: var(--mg-font-heading); font-size: var(--mg-type-2xl); }
  .mgui-heroe__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
  .mgui-heroe__micro,
  .mgui-heroe__chica { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-heroe__figura { margin: 0; }
  @media not all and (min-width: 768px) {
    .mgui-heroe__acciones > .mgui-btn--primary { inline-size: 100%; }
  }

  /* ── Vitrina: el marco de una pantalla con componentes reales y datos de ejemplo (sin capturas) ── */
  .mgui-vitrina {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-3);
  }
  .mgui-vitrina__cromo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-block-size: 2rem;
    padding-inline: var(--mg-space-3);
    border-block-end: 1px solid var(--mg-color-borde);
    background: var(--mg-color-fondo);
  }
  .mgui-vitrina__rotulo {
    padding-inline: var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-vitrina__pantalla { display: flex; flex-direction: column; gap: var(--mg-space-2); margin: 0; padding: var(--mg-space-4); }
  .mgui-vitrina > :is(table, ol, ul, dl, p):not(.mgui-vitrina__pantalla) { margin: var(--mg-space-4); }
  .mgui-vitrina > figcaption {
    padding-block: var(--mg-space-2) var(--mg-space-3);
    padding-inline: var(--mg-space-4);
    border-block-start: 1px solid var(--mg-color-borde);
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-sm);
  }

  /* ── Tarjetas: tres, dos o una columna (los planes y las fichas de perfil) ── */
  .mgui-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-4); align-items: stretch; }
  .mgui-tarjetas > .mgui-card { margin-block-end: 0; }
  @media (min-width: 768px) {
    .mgui-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ── Sección de banda: a todo el ancho, con su interior en la columna central ── */
  .mgui-seccion {
    padding-block: var(--mg-space-12);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
  }
  .mgui-seccion__interior { max-inline-size: var(--mg-contenedor-max); margin-inline: auto; }
  .mgui-seccion--superficie { background: var(--mg-color-superficie); }
  .mgui-seccion--profunda { background: var(--mg-color-marca-profunda); color: var(--mg-color-sobre-marca-profunda); }
  .mgui-seccion--profunda :is(h2, h3, h4, p, a, li, dt, dd) { color: var(--mg-color-sobre-marca-profunda); }
  .mgui-seccion--profunda :focus-visible { outline-color: var(--mg-color-sobre-marca-profunda); }

  /* ── Formulario (hasta 32 rem) y documento (unos 68 caracteres por renglón) ── */
  .mgui-formulario { max-inline-size: 32rem; }
  .mgui-documento { max-inline-size: var(--mg-measure); }
  .mgui-documento :is(h2, h3) { margin-block-start: var(--mg-space-8); }

  /* ── web/r3/fuente/puerta.css ── */
  /*
   * F-A5 · La PUERTA de la App (pedido del titular del 11/10/2026: «/ingreso se ve sin formato»): entrar, el alta desde la
   * computadora, la activación, el enlace de ingreso, la recuperación del acceso y la habilitación de la computadora desde
   * el celular. Es la cáscara de afuera de la App (`paginaSuelta()` en `web/plantilla.ts`) en R3: una barra con la marca,
   * una columna central angosta (la del formulario, 32 rem) y el selector de idioma al pie.
   *
   * No depende de `[data-mg-surface]`: las pantallas de afuera que todavía tienen contenido del legado (portal del fletero,
   * domicilio público, errores) usan la misma cáscara sin que la capa base les cambie el contenido. Las pantallas de
   * autenticación, que ya son R3 enteras, además llevan `data-mg-surface="app"` en `<html>` (tipografía y fondo de la base).
   *
   * Móvil primero; sin colores crudos ni !important; propiedades lógicas; los cortes van con «not all and».
   */
  .mgui-puerta {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto);
    font-family: var(--mg-font-ui);
    font-size: var(--mg-type-base);
    line-height: var(--mg-leading-base);
  }
  .mgui-puerta__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-3);
    padding-block: var(--mg-space-3);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
    border-block-end: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
  }
  .mgui-puerta__inicio { display: inline-flex; align-items: center; color: var(--mg-color-texto); text-decoration: none; }
  .mgui-puerta__barra .mgui-marca__img {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    content: url("/r3/marca/isotipo-logo.png");
  }
  .mgui-puerta__contenido {
    flex: 1 0 auto;
    inline-size: 100%;
    max-inline-size: calc(var(--mg-formulario-max) + 2 * var(--mg-space-4));
    margin-inline: auto;
    padding-block: var(--mg-space-8) var(--mg-space-12);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
  }
  .mgui-puerta__contenido:focus { outline: none; }
  /* Una pantalla de afuera con contenido del legado (tablas, el portal del fletero) puede pedir la columna ancha. */
  .mgui-puerta--ancha .mgui-puerta__contenido { max-inline-size: var(--mg-contenedor-max); }
  .mgui-puerta__titulo {
    margin-block: 0 var(--mg-space-2);
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-2xl);
    font-weight: var(--mg-weight-bold);
    line-height: var(--mg-leading-ajustado);
  }
  .mgui-puerta__bajada { margin-block: 0 var(--mg-space-6); color: var(--mg-color-texto-atenuado); }
  /* Los caminos secundarios bajo el formulario («No puedo entrar», «Entrar con un enlace»…): una lista, no párrafos sueltos. */
  .mgui-puerta__enlaces {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    margin-block: var(--mg-space-4) 0;
    margin-inline: 0;
    padding: 0;
    list-style: none;
    font-size: var(--mg-type-sm);
  }
  .mgui-puerta__enlaces a { display: inline-flex; align-items: center; min-block-size: 2rem; }
  /* «o»: separa dos caminos equivalentes (la llave de este dispositivo o el celular). */
  .mgui-puerta__separador {
    display: flex;
    align-items: center;
    gap: var(--mg-space-3);
    margin-block: var(--mg-space-4);
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-sm);
  }
  .mgui-puerta__separador::before,
  .mgui-puerta__separador::after { content: ""; flex: 1 1 0; border-block-start: 1px solid var(--mg-color-borde); }
  /* El número de dos cifras que la computadora muestra y el celular escribe. Grande y tabular: se lee de lejos. */
  .mgui-puerta__numero {
    display: block;
    margin-block: var(--mg-space-1) var(--mg-space-3);
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-3xl);
    font-weight: var(--mg-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    line-height: 1.1;
    text-align: center;
  }
  /* El código corto de respaldo del QR: en grupos, tabular, seleccionable entero. */
  .mgui-puerta__codigo {
    display: block;
    margin-block: var(--mg-space-1) var(--mg-space-3);
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-xl);
    font-weight: var(--mg-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
    text-align: center;
    user-select: all;
  }
  /* F-A6 · Los códigos de respaldo (se muestran una sola vez): una grilla que cede a una columna, tabulares, cada uno
     seleccionable entero. */
  .mgui-puerta__respaldo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
    gap: var(--mg-space-2) var(--mg-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mgui-puerta__respaldo > li {
    padding-block: var(--mg-space-2);
    padding-inline: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-md);
    font-weight: var(--mg-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    text-align: center;
    user-select: all;
  }
  .mgui-puerta__rotulo {
    display: block;
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
  }
  /* El QR para el celular: centrado, con su leyenda, y nunca más ancho que la columna. */
  .mgui-puerta__qr { display: flex; flex-direction: column; align-items: center; gap: var(--mg-space-2); margin: 0 0 var(--mg-space-4); }
  .mgui-puerta__qr svg { inline-size: min(12rem, 100%); block-size: auto; border-radius: var(--mg-radius-sm); }
  .mgui-puerta__qr figcaption { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); text-align: center; }
  /* Los pasos de un recorrido (alta: computadora → celular → listo), numerados y con el actual marcado. */
  .mgui-puerta__pasos {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    margin: 0 0 var(--mg-space-6);
    padding: 0;
    list-style: none;
    counter-reset: mgui-paso;
    font-size: var(--mg-type-sm);
  }
  .mgui-puerta__paso { display: flex; align-items: baseline; gap: var(--mg-space-2); color: var(--mg-color-texto-atenuado); counter-increment: mgui-paso; }
  .mgui-puerta__paso::before {
    content: counter(mgui-paso);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 1px solid var(--mg-color-borde-control);
    border-radius: 50%;
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
  }
  .mgui-puerta__paso[aria-current="step"] { color: var(--mg-color-texto); font-weight: var(--mg-weight-semibold); }
  .mgui-puerta__paso[aria-current="step"]::before { border-color: var(--mg-color-accion); background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  .mgui-puerta__pie {
    padding-block: var(--mg-space-4) var(--mg-space-6);
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
    border-block-start: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
  }
  .mgui-puerta__pie-interior { max-inline-size: calc(var(--mg-formulario-max) + 2 * var(--mg-space-4)); margin-inline: auto; }
  .mgui-puerta--ancha .mgui-puerta__pie-interior { max-inline-size: var(--mg-contenedor-max); }
  @media (min-width: 768px) {
    .mgui-puerta__contenido { padding-block-start: var(--mg-space-12); }
  }
  @media (pointer: coarse) {
    .mgui-puerta__enlaces a { min-block-size: var(--mg-control-min); }
  }

  /* ── Rediseño Glassmorphism de /ingreso (ejemplo.png + formulario.png + isotipo-logo.png en movimiento) ── */
  .mgui-puerta:has(.mgui-puerta__split) {
    position: relative;
    overflow-x: hidden;
    background-color: var(--mg-color-fondo);
    background-image:
      url("/r3/escena/patron-texto-desktop.svg"),
      url("/r3/escena/fondo.jpg");
    background-position: left center, center center;
    background-size: auto 100%, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, fixed;
  }
  .mgui-puerta:has(.mgui-puerta__split) .mgui-puerta__barra {
    background: color-mix(in srgb, var(--mg-color-superficie) 72%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-block-end: 1px solid color-mix(in srgb, var(--mg-color-superficie) 82%, var(--mg-color-borde));
  }
  .mgui-puerta:has(.mgui-puerta__split) .mgui-puerta__contenido {
    max-inline-size: min(74rem, 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--mg-space-6) var(--mg-space-8);
  }
  .mgui-puerta:has(.mgui-puerta__split) .mgui-puerta__pie {
    background: color-mix(in srgb, var(--mg-color-superficie) 58%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-start: 1px solid color-mix(in srgb, var(--mg-color-superficie) 70%, var(--mg-color-borde));
  }
  .mgui-puerta__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-8);
    align-items: center;
    inline-size: 100%;
  }
  .mgui-puerta__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mg-space-3);
  }
  .mgui-puerta__hero-titulo {
    margin: 0;
    font-family: var(--mg-font-heading);
    font-size: clamp(1.85rem, 3.6vw, 3.25rem);
    font-weight: var(--mg-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--mg-color-texto);
  }
  .mgui-puerta__hero-titulo > span {
    display: block;
  }
  .mgui-puerta__hero-bajada {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-puerta__hero-isotipo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(11rem, 26vw, 22rem);
    block-size: clamp(11rem, 26vw, 22rem);
    margin-block-start: var(--mg-space-2);
    overflow: hidden;
    border-radius: var(--mg-radius-xl);
    animation-name: mg-isotipo-flotar;
    animation-duration: 6.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
  }
  .mgui-puerta__hero-isotipo-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    filter: drop-shadow(0 22px 32px color-mix(in srgb, var(--mg-color-accion) 24%, transparent));
  }
  .mgui-puerta__hero-isotipo-brillo {
    position: absolute;
    inset: -15%;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 0%, transparent 42%, color-mix(in srgb, var(--mg-color-superficie) 72%, transparent) 50%, transparent 58%, transparent 100%);
    mix-blend-mode: screen;
    animation-name: mg-isotipo-brillo;
    animation-duration: 7.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  .mgui-puerta__columna-acceso {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
    inline-size: 100%;
    max-inline-size: 31rem;
    margin-inline: auto;
  }
  .mgui-puerta__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-radius: 1.5rem;
    border: 1.5px solid color-mix(in srgb, var(--mg-color-superficie) 88%, var(--mg-color-borde));
    background: linear-gradient(160deg, color-mix(in srgb, var(--mg-color-superficie) 86%, transparent) 0%, color-mix(in srgb, var(--mg-color-superficie) 74%, var(--mg-color-accion-suave)) 100%);
    backdrop-filter: blur(22px) saturate(1.45);
    -webkit-backdrop-filter: blur(22px) saturate(1.45);
    box-shadow:
      0 24px 54px -16px color-mix(in srgb, var(--mg-color-accion) 20%, transparent),
      0 4px 16px color-mix(in srgb, var(--mg-color-texto) 6%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--mg-color-superficie) 95%, transparent);
  }
  .mgui-puerta__sobretitulo {
    margin: 0 0 var(--mg-space-1);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mg-color-accion);
  }
  .mgui-puerta__panel .mgui-puerta__titulo {
    margin: 0 0 var(--mg-space-1);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -0.02em;
  }
  .mgui-puerta__panel .mgui-puerta__bajada {
    margin: 0 0 var(--mg-space-4);
    font-size: var(--mg-type-md);
  }
  .mgui-puerta__llave {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  .mgui-puerta__llave > .mgui-card__body {
    padding: 0;
    gap: var(--mg-space-2);
  }
  .mgui-puerta__boton-llave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mg-space-3);
    min-block-size: 3.35rem;
    padding-block: var(--mg-space-3);
    padding-inline: var(--mg-space-4);
    border-radius: 0.85rem;
    font-size: var(--mg-type-md);
    font-weight: var(--mg-weight-bold);
    background: linear-gradient(180deg, var(--mg-color-accion) 0%, var(--mg-color-accion-hover) 100%);
    color: var(--mg-color-sobre-solido);
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--mg-color-accion) 52%, transparent);
  }
  .mgui-puerta__boton-llave:disabled {
    opacity: 1;
    background: linear-gradient(180deg, var(--mg-color-accion) 0%, var(--mg-color-accion-hover) 100%);
    color: var(--mg-color-sobre-solido);
  }
  .mgui-puerta__svg-huella {
    inline-size: 1.65rem;
    block-size: 1.65rem;
    flex-shrink: 0;
  }
  .mgui-puerta__llave-ayuda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin: var(--mg-space-1) 0 0;
    text-align: center;
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-puerta__llave-ayuda > strong {
    color: var(--mg-color-texto);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-puerta__panel > .mgui-detalles {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 var(--mg-space-3);
  }
  .mgui-puerta__opcion {
    display: flex;
    align-items: center;
    gap: var(--mg-space-3);
    inline-size: 100%;
    padding: var(--mg-space-3) var(--mg-space-4);
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--mg-color-borde) 82%, transparent);
    background: color-mix(in srgb, var(--mg-color-superficie) 64%, transparent);
    color: var(--mg-color-texto);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }
  .mgui-puerta__opcion::-webkit-details-marker {
    display: none;
  }
  .mgui-puerta__opcion:hover {
    background: color-mix(in srgb, var(--mg-color-superficie) 88%, transparent);
    border-color: var(--mg-color-accion);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--mg-color-accion) 24%, transparent);
  }
  .mgui-puerta__opcion-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex-shrink: 0;
    color: var(--mg-color-accion);
  }
  .mgui-puerta__svg-opcion {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }
  .mgui-puerta__opcion-textos {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: start;
  }
  .mgui-puerta__opcion-titulo {
    font-size: var(--mg-type-md);
    font-weight: var(--mg-weight-bold);
    color: var(--mg-color-texto);
    line-height: 1.25;
  }
  .mgui-puerta__opcion-bajada {
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-normal);
    color: var(--mg-color-texto-atenuado);
    line-height: 1.35;
  }
  .mgui-puerta__opcion-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-puerta__svg-flecha {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
  .mgui-puerta__opcion-cuerpo {
    padding-block-start: var(--mg-space-3);
  }
  .mgui-puerta__correo-card {
    background: color-mix(in srgb, var(--mg-color-superficie) 82%, transparent);
    border-radius: 0.85rem;
  }
  .mgui-puerta__ayuda-pie {
    display: flex;
    justify-content: center;
    margin-block-start: var(--mg-space-4);
    padding-block-start: var(--mg-space-4);
    border-block-start: 1px solid color-mix(in srgb, var(--mg-color-borde) 72%, transparent);
  }
  .mgui-puerta__ayuda-enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-2);
    color: var(--mg-color-accion);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .mgui-puerta__svg-ayuda {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex-shrink: 0;
  }
  .mgui-puerta__alta-pie {
    margin: 0;
    text-align: center;
    font-size: var(--mg-type-md);
    color: var(--mg-color-texto);
  }
  .mgui-puerta__alta-enlace {
    color: var(--mg-color-accion);
    font-weight: var(--mg-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .mgui-puerta__seguridad-pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mg-space-2);
    margin: var(--mg-space-6) 0 0;
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-puerta__svg-candado {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
  }
  @media (min-width: 960px) {
    .mgui-puerta__split {
      grid-template-columns: minmax(0, 1fr) minmax(26rem, 30.5rem);
      gap: var(--mg-space-12);
    }
    .mgui-puerta__hero {
      align-items: flex-start;
      text-align: start;
      padding-inline-start: var(--mg-space-4);
    }
    .mgui-puerta__hero-isotipo {
      align-self: center;
      margin-inline-end: var(--mg-space-6);
    }
  }

  /* ── web/r3/fuente/rediseno.css ── */
  /*
   * emitir · frente C (31/10/2026) · La sección «El documento» del paso 8 de /app/emitir como la sección 9 de Valkyrie
   * (`DisenoDocumento.jsx` + `.mg-doc*` de `mg-admin.css` L1363-1770), en clases `.mgui-doc__*`: la barra con sus grupos, la
   * regla de ancho, el lienzo hundido con la hoja (el impreso real en SVG) y su capa de herramientas (SVG: el título de cada
   * columna, el borde entre columnas, el borde izquierdo de cada fila, las guías del gesto), el panel de herramientas (debajo
   * del lienzo, no flotando: sin estilos en línea no hay cómo posicionarlo al pie de la columna elegida), la grilla de nueve
   * posiciones de la alineación, el desplegable de versiones, el vacío y el «cargando».
   *
   * Todo son tokens del framework; las posiciones de la capa son ATRIBUTOS del SVG (`x`, `y`, `width`, `height`): nada en línea,
   * CSP estricta. Las nueve celdas de la alineación se posicionan por `data-mg-doc-alinear` / `data-mg-doc-valinear`.
   */

  /* ── La barra (VK `.mg-doc__barra`, `__grupo`, `__estado`) ──────────────────────────────────────────────────────────────── */
  .mgui-doc { display: flex; flex-direction: column; gap: var(--mg-space-3); min-inline-size: 0; }
  .mgui-doc__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-3); }
  .mgui-doc__barra[hidden] { display: none; }
  .mgui-doc__grupo { display: flex; align-items: center; gap: var(--mg-space-1); position: relative; flex-wrap: wrap; min-inline-size: 0; }
  .mgui-doc__grupo[hidden] { display: none; }
  .mgui-doc__grupo--derecha { margin-inline-start: auto; }
  .mgui-doc__estado { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); white-space: nowrap; }
  .mgui-doc__estado[hidden] { display: none; }
  /* impresion (31/10/2026) · la regla de ancho envuelve: «122,1 mm fijos de 194,3 útiles · 1 columna(s) flexible(s)» no entra en 358 px. */
  .mgui-doc__estado--regla { white-space: normal; min-inline-size: 0; }
  .mgui-doc__grupo > .mgui-btn { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  .mgui-doc__grupo > .mgui-btn[hidden] { display: none; }
  .mgui-doc__ayuda { font-size: var(--mg-type-xs); }
  .mgui-doc__ayuda:empty { display: none; }

  /* ── La regla de ancho (VK `.mg-doc__regla`): un `<meter>` fino, rojo cuando no entra ───────────────────────────────────── */
  .mgui-doc__regla { position: relative; flex: 1 1 10rem; max-inline-size: 16rem; min-inline-size: 7.5rem; block-size: 0.375rem; border-radius: 999px; background: var(--mg-color-fondo); overflow: hidden; }
  .mgui-doc__regla-barra { display: block; inline-size: 100%; block-size: 0.375rem; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--mg-color-fondo); }
  .mgui-doc__regla-barra::-webkit-meter-bar { background: var(--mg-color-fondo); border: 0; border-radius: 999px; }
  .mgui-doc__regla-barra::-webkit-meter-optimum-value { background: var(--mg-color-accion); }
  .mgui-doc__regla-barra::-moz-meter-bar { background: var(--mg-color-accion); }
  .mgui-doc__regla--excede .mgui-doc__regla-barra::-webkit-meter-optimum-value { background: var(--mg-status-danger-solido); }
  .mgui-doc__regla--excede .mgui-doc__regla-barra::-moz-meter-bar { background: var(--mg-status-danger-solido); }

  /* ── El lienzo (VK `.mg-doc__lienzo`, `__escena`, `__hoja`): hundido, con relleno; la hoja al ancho del zoom ─────────────── */
  .mgui-emitir-previa__paper.mgui-doc__lienzo {
    position: relative; min-block-size: 12rem; padding: var(--mg-space-4); overflow: auto;
    background: var(--mg-color-fondo); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md);
    touch-action: pan-x pan-y;
  }
  .mgui-doc__escena { display: flex; flex-direction: column; align-items: center; gap: var(--mg-space-4); min-inline-size: 0; }
  .mgui-doc__escena[hidden] { display: none; }
  .mgui-doc__hojas { display: contents; }
  .mgui-doc__hoja { position: relative; flex: none; line-height: 0; box-shadow: var(--mg-elevation-2); background: var(--mg-color-superficie); }
  .mgui-doc__papel { display: block; }
  .mgui-doc__vacio { margin: 0; padding: var(--mg-space-6); text-align: center; color: var(--mg-color-texto-atenuado); border: 1px dashed var(--mg-color-borde); border-radius: var(--mg-radius-md); font-size: var(--mg-type-sm); }
  .mgui-doc__vacio[hidden] { display: none; }
  .mgui-doc__cargando { position: absolute; inset-block-start: var(--mg-space-2); inset-inline-end: var(--mg-space-3); z-index: 2; display: inline-flex; }
  .mgui-doc__cargando[hidden] { display: none; }
  .mgui-doc__cargando .mgui-emitir-ocupable__giro { display: inline-block; animation: mgui-girar var(--mg-spinner-duration) linear infinite; }
  .mgui-doc__lienzo .mgui-emitir-previa__iframe[hidden] { display: none; }

  /* ── La capa de herramientas sobre la hoja (VK `.mg-doc__capa`, `__cabecera`, `__borde`, `__borde-fila`, `__guia`, `__valor`) ── */
  .mgui-doc__capa { position: absolute; inset: 0; display: block; overflow: visible; }
  .mgui-doc__cabecera { fill: transparent; stroke: transparent; stroke-width: 0.75; stroke-dasharray: 2 1.5; cursor: pointer; outline: none; }
  .mgui-doc__cabecera:hover, .mgui-doc__cabecera:focus-visible { stroke: var(--mg-color-accion); }
  .mgui-doc__cabecera--activa, .mgui-doc__cabecera--activa:hover { stroke: var(--mg-color-accion); stroke-dasharray: none; stroke-width: 1.25; fill: var(--mg-color-accion-suave); fill-opacity: 0.55; }
  .mgui-doc__borde { fill: transparent; cursor: col-resize; touch-action: none; }
  .mgui-doc__borde:hover, .mgui-doc__borde--activo { fill: var(--mg-color-accion-suave); fill-opacity: 0.7; }
  .mgui-doc__borde-fila { fill: transparent; cursor: row-resize; touch-action: none; }
  .mgui-doc__borde-fila:hover, .mgui-doc__borde-fila--activo { fill: var(--mg-color-accion-suave); fill-opacity: 0.7; }
  .mgui-doc__guia, .mgui-doc__guia-h { stroke: var(--mg-color-accion); stroke-width: 1.5; pointer-events: none; }
  .mgui-doc__guia--frenada { stroke: var(--mg-status-danger-solido); }
  .mgui-doc__valor { font-family: var(--mg-font-numeric); font-size: 7px; fill: var(--mg-color-accion); font-variant-numeric: tabular-nums; pointer-events: none; text-anchor: middle; }
  @media (pointer: coarse) {
    .mgui-doc__cabecera { stroke: var(--mg-color-borde-control); }
  }

  /* ── El panel de herramientas (VK `.mg-doc__herramientas`), debajo del lienzo ───────────────────────────────────────────── */
  .mgui-doc__herramientas {
    display: flex; flex-direction: column; gap: var(--mg-space-2); padding: var(--mg-space-3);
    inline-size: 100%; max-inline-size: 26rem; border-radius: var(--mg-radius-lg); border: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie); color: var(--mg-color-texto); box-shadow: var(--mg-elevation-2); font-size: var(--mg-type-sm);
  }
  .mgui-doc__herramientas[hidden] { display: none; }
  .mgui-doc__herramientas-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); }
  .mgui-doc__herramientas-fila { display: flex; align-items: center; gap: var(--mg-space-2); flex-wrap: wrap; }
  .mgui-doc__herramientas-fila > .mgui-btn { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  .mgui-doc__herramientas-fila > .mgui-btn[hidden] { display: none; }
  .mgui-doc__herramientas-rotulo { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); min-inline-size: 4rem; }
  .mgui-doc__herramientas .mgui-field__control { min-block-size: 1.875rem; padding-block: 0; padding-inline: var(--mg-space-2); font-size: var(--mg-type-sm); inline-size: auto; }
  .mgui-doc__mm { inline-size: 4.75rem; max-inline-size: 4.75rem; }
  .mgui-doc__titulo { flex: 1 1 8rem; }
  .mgui-doc__agregar { flex: 1 1 8rem; }
  .mgui-doc__bloqueado { font-size: var(--mg-type-xs); color: var(--mg-status-warning-texto); line-height: var(--mg-leading-ajustado); }
  .mgui-doc__bloqueado[hidden] { display: none; }
  .mgui-doc__quitar { color: var(--mg-status-danger-texto); }
  [data-mg-doc-panel-columna][hidden], [data-mg-doc-panel-fila][hidden] { display: none; }

  /* La alineación en nueve posiciones (VK `.mg-doc__alineacion`): el punto cae donde caería el texto. */
  .mgui-doc__alineacion { display: grid; grid-template-columns: repeat(3, 1.875rem); gap: 2px; }
  .mgui-doc__alineacion-celda { inline-size: 1.875rem; block-size: 1.5rem; display: flex; padding: 3px; border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-sm); background: var(--mg-color-superficie); cursor: pointer; justify-content: center; align-items: center; }
  .mgui-doc__alineacion-celda[data-mg-doc-alinear="left"] { justify-content: flex-start; }
  .mgui-doc__alineacion-celda[data-mg-doc-alinear="right"] { justify-content: flex-end; }
  .mgui-doc__alineacion-celda[data-mg-doc-valinear="top"] { align-items: flex-start; }
  .mgui-doc__alineacion-celda[data-mg-doc-valinear="bottom"] { align-items: flex-end; }
  .mgui-doc__alineacion-celda:hover { border-color: var(--mg-color-accion); }
  .mgui-doc__alineacion-celda--activa { background: var(--mg-color-accion); border-color: var(--mg-color-accion); }
  .mgui-doc__alineacion-punto { inline-size: 8px; block-size: 5px; border-radius: 1px; background: var(--mg-color-texto-atenuado); }
  .mgui-doc__alineacion-celda--activa .mgui-doc__alineacion-punto { background: var(--mg-color-sobre-solido); }

  /* ── Los requisitos de ARCA (VK `.mg-doc__requisitos`) ─────────────────────────────────────────────────────────────────── */
  .mgui-doc__requisitos { list-style: none; margin: var(--mg-space-2) 0 0; padding: 0; display: grid; gap: var(--mg-space-1); font-size: var(--mg-type-sm); }
  .mgui-doc__requisitos li { display: flex; align-items: flex-start; gap: var(--mg-space-2); }
  .mgui-doc__requisitos li .mgui-ico { margin-block-start: 0.125rem; flex: none; }
  .mgui-doc__requisitos li.is-mal { color: var(--mg-status-danger-texto); }
  .mgui-doc__requisitos small { color: var(--mg-color-texto-atenuado); }
  [data-mg-rediseno-requisitos][hidden], [data-mg-rediseno-letra][hidden] { display: none; }

  /* ── Las versiones (VK `.mg-doc__versiones`, `__version`): el desplegable a la derecha del botón de historial ───────────── */
  .mgui-doc__versiones {
    position: absolute; inset-inline-end: 0; inset-block-start: 100%; margin-block-start: var(--mg-space-1); z-index: 20;
    min-inline-size: 18rem; max-inline-size: calc(100vw - 2 * var(--mg-space-4)); padding: var(--mg-space-2); border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie); border: 1px solid var(--mg-color-borde); box-shadow: var(--mg-elevation-2);
    display: flex; flex-direction: column; gap: var(--mg-space-1); font-size: var(--mg-type-sm);
  }
  .mgui-doc__versiones[hidden] { display: none; }
  .mgui-doc__version { display: flex; align-items: center; gap: var(--mg-space-2); padding: var(--mg-space-1) var(--mg-space-2); border-radius: var(--mg-radius-sm); }
  .mgui-doc__version--vigente { background: var(--mg-color-accion-suave); font-weight: var(--mg-weight-semibold); }
  .mgui-doc__version-fecha { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); margin-inline-start: auto; white-space: nowrap; }
  .mgui-doc__version > .mgui-btn, .mgui-doc__version > .mgui-ico { margin-inline-start: auto; }
  .mgui-doc__version-fecha + .mgui-btn, .mgui-doc__version-fecha + .mgui-ico { margin-inline-start: 0; }
  .mgui-doc__versiones-nota { font-size: var(--mg-type-xs); }

  /* ── El teléfono: la barra envuelve y el lienzo sale a toda la pantalla (VK: «ocupa toda la pantalla») ───────────────────── */
  @media not all and (min-width: 48rem) {
    .mgui-doc__grupo--derecha { margin-inline-start: 0; }
    .mgui-emitir-documento .mgui-emitir-previa__paper.mgui-doc__lienzo { margin-inline: calc(-1 * var(--mg-space-4)); border-inline: 0; border-radius: 0; padding-inline: var(--mg-space-2); }
    .mgui-doc__herramientas { max-inline-size: none; }
    .mgui-doc__versiones { inset-inline-end: auto; inset-inline-start: 0; }
  }

  /* ── web/r3/fuente/segmentado.css ── */
  /*
   * F-VC · segmentado (Valkyrie: VhSegmented) y pestañas de la misma familia visual. En formulario son radios ocultos pero
   * enfocables (las flechas eligen); en navegación, enlaces con `aria-current`.
   */
  .mgui-segmentado { margin: 0 0 var(--mg-space-4); padding: 0; border: 0; min-inline-size: 0; }
  .mgui-segmentado--enlaces { margin-block-end: var(--mg-space-4); }
  .mgui-segmentado__leyenda { margin-block-end: var(--mg-space-2); padding: 0; font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); }
  .mgui-segmentado__grupo {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .125rem;
    margin: 0;
    padding: .1875rem;
    list-style: none;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
    max-inline-size: 100%;
  }
  .mgui-segmentado__item { position: relative; display: flex; }
  .mgui-segmentado__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
  }
  .mgui-segmentado__opcion {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    min-block-size: 2.25rem;
    padding: var(--mg-space-1) var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mg-motion-fast) var(--mg-ease-out), color var(--mg-motion-fast) var(--mg-ease-out);
  }
  .mgui-segmentado__opcion:hover { color: var(--mg-color-texto); background: var(--mg-color-superficie); }
  .mgui-segmentado__control:checked + .mgui-segmentado__opcion,
  .mgui-segmentado__opcion.is-actual {
    background: var(--mg-color-superficie);
    color: var(--mg-color-enlace);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-segmentado__control:focus-visible + .mgui-segmentado__opcion,
  .mgui-segmentado__opcion:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: 1px;
  }
  .mgui-segmentado__svg { inline-size: 1rem; block-size: 1rem; }
  @media (pointer: coarse) {
    .mgui-segmentado__opcion { min-block-size: var(--mg-control-min); }
  }
  @media (forced-colors: active) {
    .mgui-segmentado__control:checked + .mgui-segmentado__opcion,
    .mgui-segmentado__opcion.is-actual { outline: 2px solid Highlight; }
  }

  /* ── web/r3/fuente/senales.css ── */
  /*
   * F-VC · señales: la etiqueta de categoría (seis tonos que no jerarquizan, `--mg-categoria-*` del generador), el semáforo de
   * un servicio, el aviso flotante con destino, el dato con su nota, los totales y el ícono del medio de pago.
   */

  /* Etiqueta de categoría */
  .mgui-etiqueta {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    padding: 0 var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
  }
  .mgui-etiqueta--cat-1 { background: var(--mg-categoria-1-fondo); color: var(--mg-categoria-1-texto); }
  .mgui-etiqueta--cat-2 { background: var(--mg-categoria-2-fondo); color: var(--mg-categoria-2-texto); }
  .mgui-etiqueta--cat-3 { background: var(--mg-categoria-3-fondo); color: var(--mg-categoria-3-texto); }
  .mgui-etiqueta--cat-4 { background: var(--mg-categoria-4-fondo); color: var(--mg-categoria-4-texto); }
  .mgui-etiqueta--cat-5 { background: var(--mg-categoria-5-fondo); color: var(--mg-categoria-5-texto); }
  .mgui-etiqueta--cat-6 { background: var(--mg-categoria-6-fondo); color: var(--mg-categoria-6-texto); }

  /* Semáforo */
  .mgui-semaforo { display: inline-flex; align-items: center; gap: var(--mg-space-1); font-size: var(--mg-type-sm); color: var(--mg-color-texto); }
  .mgui-semaforo__luz { inline-size: .625rem; block-size: .625rem; border-radius: 999px; flex: none; }
  .mgui-semaforo__servicio { font-weight: var(--mg-weight-semibold); }
  .mgui-semaforo__detalle { color: var(--mg-color-texto-atenuado); }
  .mgui-semaforo--ok .mgui-semaforo__luz { background: var(--mg-status-complete-borde); box-shadow: 0 0 0 3px var(--mg-status-complete-suave); }
  .mgui-semaforo--ok .mgui-semaforo__estado { color: var(--mg-status-complete-texto); }
  .mgui-semaforo--atencion .mgui-semaforo__luz { background: var(--mg-status-warning-borde); box-shadow: 0 0 0 3px var(--mg-status-warning-suave); }
  .mgui-semaforo--atencion .mgui-semaforo__estado { color: var(--mg-status-warning-texto); }
  .mgui-semaforo--caido .mgui-semaforo__luz { background: var(--mg-status-danger-borde); box-shadow: 0 0 0 3px var(--mg-status-danger-suave); }
  .mgui-semaforo--caido .mgui-semaforo__estado { color: var(--mg-status-danger-texto); }

  /* Aviso flotante (notificación) */
  .mgui-notificacion {
    position: fixed;
    inset-block-end: var(--mg-space-4);
    inset-inline-end: var(--mg-space-4);
    z-index: var(--mg-layer-aviso);
    display: flex;
    align-items: flex-start;
    gap: var(--mg-space-3);
    inline-size: min(26rem, calc(100vw - 2 * var(--mg-space-4)));
    padding: var(--mg-space-3) var(--mg-space-3) var(--mg-space-3) var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-inline-start-width: 4px;
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    box-shadow: var(--mg-elevation-3);
    animation: mgui-notificacion-entrar var(--mg-motion-base) var(--mg-ease-out);
  }
  .mgui-notificacion:focus { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-notificacion--exito { border-inline-start-color: var(--mg-status-complete-borde); }
  .mgui-notificacion--info { border-inline-start-color: var(--mg-status-info-borde); }
  .mgui-notificacion--advertencia { border-inline-start-color: var(--mg-status-warning-borde); }
  .mgui-notificacion--peligro { border-inline-start-color: var(--mg-status-danger-borde); }
  .mgui-notificacion__icono { display: inline-flex; flex: none; padding-block-start: .125rem; }
  .mgui-notificacion__svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .mgui-notificacion--exito .mgui-notificacion__icono { color: var(--mg-status-complete-texto); }
  .mgui-notificacion--info .mgui-notificacion__icono { color: var(--mg-status-info-texto); }
  .mgui-notificacion--advertencia .mgui-notificacion__icono { color: var(--mg-status-warning-texto); }
  .mgui-notificacion--peligro .mgui-notificacion__icono { color: var(--mg-status-danger-texto); }
  .mgui-notificacion__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mg-space-1); flex: 1; min-inline-size: 0; }
  .mgui-notificacion__titulo { margin: 0; font-weight: var(--mg-weight-semibold); }
  .mgui-notificacion__texto { font-size: var(--mg-type-sm); color: var(--mg-color-texto); }
  .mgui-notificacion__destino { margin-block-start: var(--mg-space-1); }
  .mgui-notificacion__flecha { inline-size: 1rem; block-size: 1rem; }
  .mgui-notificacion__cerrar {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: var(--mg-radius-sm);
    background: transparent;
    color: var(--mg-color-texto-atenuado);
    cursor: pointer;
  }
  .mgui-notificacion__cerrar[hidden] { display: none; }
  .mgui-notificacion__cerrar:hover { background: var(--mg-color-fondo); color: var(--mg-color-texto); }
  .mgui-notificacion__cerrar:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: 0; }
  .mgui-notificacion__svg-cerrar { inline-size: 1rem; block-size: 1rem; }
  .mgui-notificacion.is-saliendo { animation: mgui-notificacion-salir var(--mg-motion-base) var(--mg-ease-out) forwards; }
  @keyframes mgui-notificacion-entrar { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
  @keyframes mgui-notificacion-salir { to { opacity: 0; transform: translateY(.75rem); } }
  @media not all and (min-width: 480px) {
    .mgui-notificacion { inset-inline: var(--mg-space-2); inset-block-end: var(--mg-space-2); inline-size: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mgui-notificacion,
    .mgui-notificacion.is-saliendo { animation-duration: 1ms; }
  }

  /* Dato con nota */
  .mgui-dato {
    position: relative;
    display: inline-flex;
    border-block-end: 1px dashed var(--mg-color-borde-control);
    cursor: help;
  }
  .mgui-dato__valor { font-variant-numeric: tabular-nums; }
  .mgui-dato:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); border-radius: var(--mg-radius-sm); }
  .mgui-dato__nota {
    position: absolute;
    inset-block-end: calc(100% + var(--mg-space-1));
    inset-inline-start: 0;
    z-index: var(--mg-layer-tooltip);
    inline-size: max-content;
    max-inline-size: min(18rem, 80vw);
    padding: var(--mg-space-2) var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-texto);
    color: var(--mg-color-superficie);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-normal);
    line-height: var(--mg-leading-base);
    white-space: normal;
    /* Oculta con display (no con visibility): una nota escondida no estira la página en el teléfono. */
    display: none;
    pointer-events: none;
  }
  .mgui-dato:hover .mgui-dato__nota,
  .mgui-dato:focus-within .mgui-dato__nota { display: block; }

  /* Totales */
  .mgui-totales { display: grid; gap: var(--mg-space-1); margin: 0; max-inline-size: 24rem; margin-inline-start: auto; }
  .mgui-totales__fila { display: flex; justify-content: space-between; gap: var(--mg-space-4); font-size: var(--mg-type-sm); }
  .mgui-totales__fila dt { color: var(--mg-color-texto-atenuado); }
  .mgui-totales__fila dd { margin: 0; font-variant-numeric: tabular-nums; text-align: end; }
  .mgui-totales__fila--total { margin-block-start: var(--mg-space-1); padding-block-start: var(--mg-space-2); border-block-start: 1px solid var(--mg-color-borde); font-size: var(--mg-type-md); font-weight: var(--mg-weight-bold); }
  .mgui-totales__fila--total dt { color: var(--mg-color-texto); }

  /* Ícono del medio de pago */
  .mgui-medio-icono { display: inline-flex; align-items: center; justify-content: center; color: var(--mg-color-texto-atenuado); }
  .mgui-medio-icono__svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .mgui-medio-icono--marca { color: var(--mg-color-texto); }

  /* ── web/r3/fuente/sitio-funciones.css ── */
  /*
   * F-Z (16/10/2026): el sitio comercial por FUNCIONES (portada y grilla de /planes). Sólo tokens y roles de MG (sin hex
   * ni funciones de color), propiedades lógicas, móvil primero (cortes 480, 768 y 1024 px). Propio del comercial R3: no
   * usa estilos en línea ni nada de EBCGG. Contraste: texto sobre superficie o sobre marca profunda con los pares de
   * tokens de la biblioteca (`texto`/`superficie`, `sobre-marca-profunda`/`marca-profunda`); el foco usa `color-foco`.
   */
  /* El encabezado queda fijo (sitio-v3.css) y la franja de derechos al pie: ningún ancla ni foco queda tapado. */
  html:has(.mgui-publica .mgui-publica__contenido > .mgui-fn) {
    scroll-behavior: smooth;
    scroll-padding-block: 6rem calc(var(--mgui-franja-alto, 6rem) + env(safe-area-inset-bottom, 0px));
  }
  @media (prefers-reduced-motion: reduce) {
    html:has(.mgui-publica .mgui-publica__contenido > .mgui-fn) { scroll-behavior: auto; }
  }
  html:has(.mgui-publica .mgui-publica__contenido > .mgui-fn) .mgui-publica__contenido { padding-block-end: 0; }
  .mgui-fn [id] { scroll-margin-block-start: 6rem; }
  .mgui-fn :is(h1, h2, h3, p, ul, ol, dl) { margin-block: 0; }

  .mgui-fn { min-inline-size: 0; overflow-wrap: anywhere; }
  .mgui-publica__contenido > .mgui-fn { grid-column: completo-inicio / completo-fin; }
  .mgui-fn__interior {
    max-inline-size: var(--mg-contenedor-max);
    margin-inline: auto;
    padding-inline: var(--mg-space-4);
  }
  .mgui-fn :focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-fn__hero :focus-visible, .mgui-fn__cierre :focus-visible { outline-color: var(--mg-color-sobre-marca-profunda); }

  /* ── Hero y cierre ── */
  .mgui-fn__hero, .mgui-fn__cierre {
    padding-block: var(--mg-space-12);
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
  }
  .mgui-fn__hero-grilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-6);
    align-items: center;
  }
  .mgui-fn__hero-figura {
    margin: 0;
    overflow: hidden;
    border-radius: var(--mg-radius-lg);
    border: 1px solid var(--mg-color-borde);
    box-shadow: var(--mg-elevation-2);
    background: var(--mg-color-superficie);
  }
  .mgui-fn__hero-img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
  .mgui-fn__kicker {
    margin: 0 0 var(--mg-space-2);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-fn__h1 {
    max-inline-size: 22ch;
    margin: 0 0 var(--mg-space-4);
    color: inherit;
    font-family: var(--mg-font-heading);
    font-size: clamp(var(--mg-type-2xl), 5vw, calc(var(--mg-type-2xl) * 1.7));
    line-height: var(--mg-leading-ajustado);
  }
  .mgui-fn__bajada-hero { max-inline-size: 60ch; margin: 0 0 var(--mg-space-6); font-size: var(--mg-type-md); }
  .mgui-fn__aviso { margin: 0 0 var(--mg-space-4); padding: var(--mg-space-3); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie); color: var(--mg-color-texto); }
  .mgui-fn__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-3); }
  .mgui-fn__cta { min-block-size: 2.75rem; padding: .6rem 1.25rem; font-weight: var(--mg-weight-bold); }
  .mgui-fn__enlace {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: var(--mg-space-2);
    color: inherit;
    font-weight: var(--mg-weight-semibold);
    text-decoration: underline;
  }
  .mgui-fn__sellos { display: flex; flex-wrap: wrap; gap: var(--mg-space-2) var(--mg-space-6); margin: var(--mg-space-6) 0 0; padding: 0; list-style: none; font-size: var(--mg-type-sm); }
  .mgui-fn__sellos li::before { content: "✓ "; font-weight: var(--mg-weight-bold); }
  .mgui-fn__atajos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-2);
    margin: 0 0 var(--mg-space-4);
    padding: 0;
    list-style: none;
  }
  .mgui-fn__atajo {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.25rem;
    padding: var(--mg-space-1) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    text-decoration: none;
  }
  .mgui-fn__atajo:hover {
    border-color: var(--mg-color-accion);
    background: var(--mg-color-accion-suave);
  }

  /* ── Secciones ── */
  .mgui-fn__seccion { padding-block: var(--mg-space-8); }
  .mgui-fn__seccion:nth-of-type(even) { background: var(--mg-color-fondo); }
  .mgui-fn__ancla { scroll-margin-block-start: var(--mg-space-16); padding-block-start: var(--mg-space-8); }
  .mgui-fn__titulo { margin: 0 0 var(--mg-space-2); font-family: var(--mg-font-heading); font-size: var(--mg-type-xl); line-height: var(--mg-leading-ajustado); }
  .mgui-fn__subtitulo { margin: var(--mg-space-6) 0 var(--mg-space-3); font-size: var(--mg-type-lg); font-weight: var(--mg-weight-semibold); }
  .mgui-fn__bajada { max-inline-size: 64ch; margin: 0 0 var(--mg-space-6); color: var(--mg-color-texto-atenuado); }

  .mgui-fn__pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-4); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
  .mgui-fn__pasos > li {
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie);
    counter-increment: paso;
  }
  .mgui-fn__pasos > li::before { content: counter(paso); display: block; margin-block-end: var(--mg-space-2); color: var(--mg-color-accion); font-size: var(--mg-type-xl); font-weight: var(--mg-weight-bold); }

  /* ── Funciones ── */
  .mgui-fn__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-4); margin: 0; padding: 0; list-style: none; }
  .mgui-fn__item {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-fn__item:hover {
    border-color: var(--mg-color-accion);
    box-shadow: var(--mg-elevation-2);
  }
  /* El lugar de la captura de cada función (F-Q: <img alt> dentro; ocupa el ancho de la tarjeta). */
  .mgui-fn__captura {
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-accion-suave);
  }
  .mgui-fn__captura img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  /* hotfix-fable · X-9 (DICTAMEN fix-d2e §5.b): mientras F-Q no puso la captura, el recuadro no se ve (el sitio, en versión final,
     no muestra ~57 cajas vacías); con su <img> adentro deja de estar vacío y aparece solo. */
  .mgui-fn__captura:empty { display: none; }
  .mgui-fn__nombre { margin: 0; font-size: var(--mg-type-base); font-weight: var(--mg-weight-bold); }
  .mgui-fn__texto { margin: 0; color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }

  .mgui-fn__glosario { margin-block-start: var(--mg-space-6); padding: var(--mg-space-4); border-radius: var(--mg-radius-lg); background: var(--mg-color-accion-suave); }
  .mgui-fn__glosario dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-3); margin: 0; }
  .mgui-fn__termino dt { font-weight: var(--mg-weight-bold); }
  .mgui-fn__termino dd { margin: 0; }

  /* ── Reseñas ── */
  .mgui-fn__resenas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-4); margin: 0; padding: 0; list-style: none; }
  .mgui-fn__resena { padding: var(--mg-space-4); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-lg); background: var(--mg-color-superficie); }
  .mgui-fn__resena blockquote { margin: 0 0 var(--mg-space-3); }
  .mgui-fn__puntaje { margin: 0 0 var(--mg-space-2); font-weight: var(--mg-weight-semibold); }
  .mgui-fn__firma { display: flex; align-items: center; gap: var(--mg-space-2); margin: 0; color: var(--mg-color-texto-atenuado); }
  .mgui-fn__logo { inline-size: 3rem; block-size: 3rem; object-fit: contain; border-radius: var(--mg-radius-sm); }

  /* ── Preguntas ── */
  .mgui-fn__faq { margin-block-end: var(--mg-space-2); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); background: var(--mg-color-superficie); }
  .mgui-fn__faq summary { min-block-size: 2.75rem; padding: var(--mg-space-3) var(--mg-space-4); font-weight: var(--mg-weight-semibold); cursor: pointer; }
  .mgui-fn__faq p { margin: 0; padding: 0 var(--mg-space-4) var(--mg-space-4); }

  .mgui-fn__cierre { text-align: center; }
  .mgui-fn__cierre .mgui-fn__interior { display: flex; flex-direction: column; align-items: center; gap: var(--mg-space-3); }

  /* ── Grilla de planes ── */
  .mgui-fn-grilla__marco { overflow-x: auto; margin-block: var(--mg-space-4); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); }
  .mgui-fn-grilla { inline-size: 100%; min-inline-size: 36rem; border-collapse: collapse; background: var(--mg-color-superficie); }
  .mgui-fn-grilla caption { padding: var(--mg-space-3); text-align: start; font-weight: var(--mg-weight-semibold); }
  .mgui-fn-grilla th, .mgui-fn-grilla td { padding: var(--mg-space-3); border-block-end: 1px solid var(--mg-color-borde); text-align: start; vertical-align: top; }
  .mgui-fn-grilla thead th { position: sticky; inset-block-start: 0; background: var(--mg-color-fondo); font-weight: var(--mg-weight-bold); }
  .mgui-fn-grilla tbody th[scope="row"], .mgui-fn-grilla tfoot th { font-weight: var(--mg-weight-medium); }
  .mgui-fn-grilla__rubro { background: var(--mg-color-accion-suave); font-weight: var(--mg-weight-bold); }
  .mgui-fn-grilla__celda, .mgui-fn-grilla td[data-mg-incluida] { text-align: center; }
  /* La celda de incluida / no incluida va sin clases (integ-fix-d2e: /planes dentro del tope de 60 KiB): el estilo sale del dato. */
  .mgui-fn-grilla td[data-mg-incluida="si"] { color: var(--mg-status-complete-texto); font-weight: var(--mg-weight-bold); }
  .mgui-fn-grilla td[data-mg-incluida="no"] { color: var(--mg-color-texto-atenuado); }
  .mgui-fn-grilla__leyenda { font-weight: var(--mg-weight-medium); font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-fn-grilla tfoot th, .mgui-fn-grilla tfoot td { background: var(--mg-color-fondo); }

  @media (min-width: 480px) {
    .mgui-fn__sellos { gap: var(--mg-space-2) var(--mg-space-8); }
  }
  @media (min-width: 768px) {
    .mgui-fn__interior { padding-inline: var(--mg-space-6); }
    .mgui-fn__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mgui-fn__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgui-fn__resenas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgui-fn__glosario dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgui-fn__seccion { padding-block: var(--mg-space-12); }
  }
  @media (min-width: 1024px) {
    .mgui-fn__hero-grilla { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--mg-space-8); }
    .mgui-fn__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mgui-fn__resenas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ── web/r3/fuente/sitio-hero.css ── */
  /*
   * MKT-HERO-4.
   * Etapas del negocio, sin órbitas ni posiciones absolutas.
   * Colores del sistema; controles nativos; pausa y movimiento reducido.
   */

  /* Encabezado público. Los flujos conservan su navegación reducida. */
  .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__encabezado {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--mg-layer-fijo);
    box-shadow: var(--mg-elevation-1);
    flex-shrink: 0;
  }
  .mgui-publica__encabezado .mgui-publica__derechos {
    gap: 0 var(--mg-space-4);
    padding-block: 0;
    border-block-end: 1px solid var(--mg-color-borde);
    background: var(--mg-color-fondo);
  }
  .mgui-publica__encabezado .mgui-publica__derecho {
    min-block-size: 1.75rem;
    font-size: .875rem;
    font-weight: var(--mg-weight-medium);
    color: var(--mg-color-marca-profunda);
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .mgui-publica__encabezado .mgui-publica__barra {
    max-inline-size: 84rem;
    inline-size: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }
  .mgui-publica__encabezado .mgui-marca__img {
    width: auto;
    height: 2.5rem;
    flex-shrink: 0;
  }
  .mgui-publica__encabezado .mgui-marca__nombre {
    font-size: 1.25rem;
  }
  .mgui-publica__herramientas > .mgui-btn--primary {
    min-block-size: 3rem;
    max-inline-size: 22rem;
    padding: .7rem 1rem;
    border: 2px solid var(--mg-color-marca-profunda);
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-marca-acento);
    font-size: 1rem;
    font-weight: var(--mg-weight-bold);
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }
  .mgui-publica__herramientas > .mgui-btn--primary:hover {
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
  }
  .mgui-publica__encabezado :focus-visible {
    outline: 3px solid var(--mg-color-marca-profunda);
    outline-offset: 3px;
  }
  /* El margen de desplazamiento de `.mgui-publica__contenido` mismo y el subrayado de los derechos del pie viven en sus
     reglas de publica.css (una sola regla por selector: selector-idioma-hoja.test.ts). */
  .mgui-publica__contenido [id],
  .mgui-publica__contenido :is(a, button, input, select, summary) {
    scroll-margin-block-start: 22rem;
  }

  /* Documento y primera pantalla. */
  .mgui-hero { overflow-wrap: anywhere; }
  .mgui-hero *,
  .mgui-hero *::before,
  .mgui-hero *::after { box-sizing: border-box; }
  .mgui-hero__shell {
    max-inline-size: 80rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  }
  .mgui-hero h1 {
    max-inline-size: 19ch;
    margin: 0;
    font-family: var(--mg-font-heading);
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -.035em;
  }
  .mgui-hero h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.2;
  }
  .mgui-hero h3,
  .mgui-hero h4 { line-height: 1.3; }
  .mgui-hero p { line-height: 1.55; }
  .mgui-hero__small { font-size: .875rem; line-height: 1.5; }
  .mgui-hero__lead { max-inline-size: 60ch; font-size: 1.125rem; }
  .mgui-hero :is(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--mg-color-foco);
    outline-offset: 4px;
  }
  .mgui-hero__intro {
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
  }
  .mgui-hero__opening { display: grid; gap: 2rem; }
  .mgui-hero__pitch,
  .mgui-hero__architecture { min-inline-size: 0; }
  .mgui-hero__intro h1,
  .mgui-hero__intro h2,
  .mgui-hero__intro strong { color: inherit; }
  .mgui-hero__intro a { color: var(--mg-color-sobre-marca-profunda); }
  .mgui-hero__intro :is(a, input):focus-visible {
    outline-color: var(--mg-color-marca-acento);
  }
  .mgui-hero__kicker {
    margin-block: 0 1rem;
    font-size: .875rem;
    font-weight: var(--mg-weight-bold);
    letter-spacing: .04em;
  }
  .mgui-hero__conversion { margin-block: 1.5rem .75rem; }
  .mgui-hero__jump {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mg-control-min);
    text-underline-offset: .25em;
    font-weight: var(--mg-weight-semibold);
  }

  /* Una misma jerarquía de acción en portada, selección, tarjetas y cierre. */
  .mgui-hero .mgui-hero__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3.25rem;
    max-inline-size: 100%;
    padding: .8rem 1.15rem;
    border: 2px solid var(--mg-color-marca-profunda);
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-marca-acento);
    font-size: 1rem;
    font-weight: var(--mg-weight-bold);
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    text-decoration: none;
  }
  .mgui-hero .mgui-hero__action:hover {
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
  }
  .mgui-hero__intro .mgui-hero__action:hover,
  .mgui-hero__closing .mgui-hero__action:hover {
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-superficie);
  }

  /* Selección del plan: GET, con estado accesible y sin guion. */
  .mgui-hero__plan-nav,
  .mgui-hero__period-nav,
  .mgui-hero__card-index,
  .mgui-hero__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
  }
  .mgui-hero__plan-nav { margin-block: 0 1.25rem; }
  .mgui-hero__plan-nav a,
  .mgui-hero__period-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--mg-control-min);
    padding: .6rem .8rem;
    border: 1px solid currentColor;
    border-radius: var(--mg-radius-sm);
    font-size: .875rem;
    line-height: 1.4;
    text-decoration: none;
  }
  .mgui-hero__plan-nav a[aria-current="true"] {
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-marca-acento);
    border-color: var(--mg-color-marca-acento);
    font-weight: var(--mg-weight-bold);
  }
  .mgui-hero__period-nav a[aria-current="true"] {
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
    border-color: var(--mg-color-accion);
    font-weight: var(--mg-weight-bold);
  }
  .mgui-hero__card-index a,
  .mgui-hero__links a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mg-control-min);
  }

  /* Arquitectura: una banda de plataforma y seis etapas en orden de lectura. */
  .mgui-hero__network-figure { margin: 0; }
  .mgui-hero__network-figure figcaption h2 {
    margin-block: 0 .5rem;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
  }
  .mgui-hero__network-figure figcaption p { margin-block: 0; }
  .mgui-hero__pause {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    vertical-align: middle;
    accent-color: var(--mg-color-marca-acento);
  }
  .mgui-hero__pause + label {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mg-control-min);
    padding-inline: .5rem;
    cursor: pointer;
    font-size: .875rem;
  }
  .mgui-hero__space { margin-block-start: .75rem; }
  .mgui-hero__core {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border: 1px solid var(--mg-color-marca-acento);
    border-radius: var(--mg-radius-md) var(--mg-radius-md) 0 0;
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-marca-acento);
  }
  .mgui-hero__core strong { font-size: 1.5rem; line-height: 1; }
  .mgui-hero__core span { font-size: .875rem; font-weight: var(--mg-weight-semibold); }
  .mgui-hero__network {
    counter-reset: mgui-etapa;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
  }
  .mgui-hero__stage {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding: 1rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-texto);
    background: var(--mg-color-superficie);
  }
  .mgui-hero__stage h3 {
    color: var(--mg-color-texto);
    margin-block: .25rem .75rem;
    font-size: 1rem;
  }
  /* El número de la etapa es un contador de CSS (antes un <p aria-hidden> por etapa); el `/ ""` lo saca del árbol
     accesible donde se entiende, igual que el aria-hidden: la lista ordenada ya numera. */
  .mgui-hero__stage::before {
    counter-increment: mgui-etapa;
    content: counter(mgui-etapa, decimal-leading-zero);
    content: counter(mgui-etapa, decimal-leading-zero) / "";
    margin: 0;
    color: var(--mg-color-enlace);
    font-size: .875rem;
    font-weight: var(--mg-weight-bold);
    letter-spacing: .08em;
  }
  .mgui-hero__node { min-inline-size: 0; }
  .mgui-hero__node a {
    display: grid;
    align-content: center;
    gap: .4rem;
    min-block-size: var(--mg-control-min);
    margin-block: .25rem;
    padding: .6rem .65rem;
    border-inline-start: 3px solid var(--mg-color-accion);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto);
    background: var(--mg-color-accion-suave);
    font-size: .875rem;
    line-height: 1.5;
    text-decoration: none;
  }
  .mgui-hero__node a strong { color: var(--mg-color-texto); }
  .mgui-hero__node a:hover { text-decoration: underline; }
  .mgui-hero__intro .mgui-hero__node a:focus-visible {
    outline-color: var(--mg-color-marca-profunda);
  }
  .mgui-hero__pending {
    margin-block: .75rem;
    padding-block-start: .65rem;
    border-block-start: 1px dashed var(--mg-color-borde-control);
    font-size: .8125rem;
  }
  .mgui-hero__transfer {
    margin-block: auto .25rem;
    padding-block-start: .5rem;
    font-size: .8125rem;
    font-weight: var(--mg-weight-semibold);
  }
  /* El riel es un trazo punteado de CSS (antes un <svg> por etapa: ~190 B cada uno, que /planes no podía pagar
     dentro de los 60 KB). Misma apariencia (trazo de 8, hueco de 5, 2 px, color de acción) y el mismo movimiento. */
  .mgui-hero__rail {
    display: block;
    inline-size: 100%;
    block-size: 2px;
    margin-block: .1875rem;
    background-image: repeating-linear-gradient(90deg, var(--mg-color-accion) 0 .5rem, transparent .5rem .8125rem);
  }
  .mgui-hero__transversal {
    display: grid;
    gap: .5rem;
    margin-block-start: .75rem;
    padding: .8rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-texto);
    background: var(--mg-color-superficie);
  }
  .mgui-hero__transversal > p { margin: 0; }

  /* Detalle y recursos existentes. */
  .mgui-hero__selected { display: grid; gap: 2rem; }
  .mgui-hero__selected > div { min-inline-size: 0; }
  .mgui-hero .mgui-mkt__precio { margin-block: .8rem; padding: 0; }
  .mgui-hero .mgui-mkt__precio > strong {
    display: block;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    line-height: 1.2;
  }
  .mgui-hero .mgui-mkt__precio p { margin-block: .4rem; }
  .mgui-hero__arca {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-md);
    padding: 1rem;
    margin-block-start: 1.5rem;
  }
  .mgui-hero__arca > div { flex: 1 1 18rem; }
  .mgui-hero__arca p { margin-block-end: 0; font-size: .875rem; }
  .mgui-hero__brand {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-weight: var(--mg-weight-bold);
  }
  .mgui-hero__brand img {
    inline-size: 6rem;
    block-size: 2rem;
    object-fit: contain;
    background: var(--mg-color-superficie);
  }

  /* Recomendador.
   * Ola 13 · `align-items: start` y bloques de campo en columna con rótulos de altura uniforme para que el subtítulo debajo de
   * `#mh-cuit` (`#mh-cuit-ayuda`) o un rótulo de dos líneas nunca desalinee los `<input>` y `<select>` que comparten fila. */
  .mgui-hero__form { display: grid; gap: 1rem; max-inline-size: 56rem; align-items: start; }
  .mgui-hero__form > div { display: flex; flex-direction: column; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-hero__form label {
    display: flex;
    align-items: center;
    min-block-size: var(--mg-control-min);
    line-height: 1.25;
    font-weight: var(--mg-weight-semibold);
    margin-block-end: 0;
  }
  .mgui-hero__form .mgui-hero__small { margin-block: 0; }
  .mgui-hero__form :is(input:not([type="hidden"]), select) {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--mg-control-min);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-sm);
    padding: .65rem;
    color: var(--mg-color-texto);
    background: var(--mg-color-superficie);
    font: inherit;
  }
  .mgui-hero__form button {
    justify-self: start;
    min-block-size: var(--mg-control-min);
    white-space: normal;
  }
  .mgui-hero__result {
    border-inline-start: 4px solid var(--mg-color-accion);
    padding: 1rem;
    background: var(--mg-color-superficie);
    margin-block: 1rem;
  }
  .mgui-hero__result summary { cursor: pointer; padding-block: .6rem; }

  /* Las tarjetas crecen con su contenido, sin áreas internas de desplazamiento. */
  .mgui-hero__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-block: 1.5rem;
    align-items: start;
  }
  .mgui-hero__card {
    min-inline-size: 0;
    padding: 1.25rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    block-size: auto;
    max-block-size: none;
    overflow: visible;
  }
  .mgui-hero__card h3 { margin-block: 0 .5rem; }
  .mgui-hero__card h4 { margin-block-end: .5rem; }
  .mgui-hero__card .mgui-hero__action { inline-size: 100%; }
  .mgui-hero__card[data-mg-recomendado="true"] {
    outline: 3px solid var(--mg-color-accion);
    outline-offset: 3px;
  }
  .mgui-hero__recommended { font-weight: var(--mg-weight-bold); }
  .mgui-hero .mgui-mkt__lista { padding-inline-start: 1.2rem; margin-block: .75rem; }
  .mgui-hero .mgui-mkt__lista li { margin-block: .5rem; }

  /* Recorrido ampliado: mismo lenguaje de etapas y alcance explícito. */
  .mgui-hero__stock { border-block-start: 1px solid var(--mg-color-borde); }
  .mgui-hero__stock-current,
  .mgui-hero__stock-future,
  .mgui-hero__stock-scope {
    min-inline-size: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    margin-block: 1.5rem;
    border-radius: var(--mg-radius-md);
  }
  .mgui-hero__stock-current {
    border: 2px solid var(--mg-color-accion);
    background: var(--mg-color-accion-suave);
  }
  .mgui-hero__stock-future {
    border: 1px dashed var(--mg-color-borde-control);
    background: var(--mg-color-superficie);
  }
  .mgui-hero__stock-scope {
    border-inline-start: 3px solid var(--mg-color-borde-control);
    background: var(--mg-color-fondo);
  }
  .mgui-hero__stock :is(h3, h4) { margin-block-start: 0; }
  .mgui-hero__stock-track {
    display: grid;
    gap: 1rem;
    list-style: none;
    padding: 0;
  }
  .mgui-hero__stock-track > li {
    min-inline-size: 0;
    padding: 1rem;
    border-block-start: 3px solid var(--mg-color-accion);
    background: var(--mg-color-superficie);
    border-radius: var(--mg-radius-sm);
  }
  .mgui-hero__stock-track ul { padding-inline-start: 1.1rem; }
  .mgui-hero__stock-track li li,
  .mgui-hero__stock-scope li { margin-block: .5rem; line-height: 1.5; }
  .mgui-hero__stock-route {
    display: grid;
    gap: 1.5rem;
    padding-inline-start: 1.5rem;
  }
  .mgui-hero__stock-route > li {
    min-inline-size: 0;
    padding-inline-start: .3rem;
    border-block-start: 1px dashed var(--mg-color-borde-control);
    padding-block-start: .75rem;
  }
  .mgui-hero__stock-route p { margin-block-end: 0; }
  .mgui-hero__channels {
    display: grid;
    gap: 1rem;
    list-style: none;
    padding: 0;
  }
  .mgui-hero__channels > li {
    display: grid;
    align-content: start;
    gap: .5rem;
    min-inline-size: 0;
  }
  .mgui-hero__channels > li > span:last-child {
    font-size: .875rem;
    color: var(--mg-color-texto);
  }
  .mgui-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 0;
    list-style: none;
  }
  .mgui-hero__trust a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mg-control-min);
  }
  .mgui-hero__closing {
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
    border-radius: var(--mg-radius-md);
  }
  .mgui-hero__closing h2,
  .mgui-hero__closing strong { color: inherit; }
  .mgui-hero__closing a:focus-visible {
    outline-color: var(--mg-color-marca-acento);
  }

  /* Accesos desde la cuenta: sólo navegación al flujo público existente. */
  .mgui-cuenta-derechos {
    margin-block: var(--mg-space-6);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-texto);
    background: var(--mg-color-superficie);
  }
  .mgui-cuenta-derechos__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
  }
  .mgui-cuenta-derechos__enlaces a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mg-control-min);
    color: var(--mg-color-enlace);
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .mgui-cuenta-derechos a:focus-visible {
    outline: 3px solid var(--mg-color-foco);
    outline-offset: 3px;
  }

  /* Movimiento sobrio, siempre controlable. */
  @keyframes mgui-hero-flujo {
    from { background-position-x: 0; }
    to { background-position-x: 13rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .mgui-hero__rail {
      animation: mgui-hero-flujo calc(var(--mg-motion-slow) * 25) linear infinite;
    }
  }
  .mgui-hero__pause:checked ~ .mgui-hero__space * {
    animation-play-state: paused;
  }
  /* Con movimiento reducido no hay animación: sólo se declara bajo no-preference (nada la apaga en bloque, GEN R3-2). */

  @media (min-width: 40rem) {
    .mgui-hero__network,
    .mgui-hero__cards,
    .mgui-hero__selected,
    .mgui-hero__form,
    .mgui-hero__stock-track,
    .mgui-hero__stock-route,
    .mgui-hero__channels {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .mgui-publica__encabezado .mgui-marca__img { height: 3.5rem; }
    .mgui-publica__encabezado .mgui-marca__nombre { font-size: 1.65rem; }
    .mgui-hero__opening {
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: 2rem;
      align-items: start;
    }
    .mgui-hero__network { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mgui-hero__stage { padding: .8rem; }
    .mgui-hero__stock-route,
    .mgui-hero__channels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 70rem) {
    .mgui-hero__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mgui-hero__stock-track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
  @media not all and (min-width: 768px) {
    .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__barra {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: .5rem;
      padding-block: .5rem;
    }
    .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__inicio {
      grid-column: 1;
      grid-row: 1;
      min-inline-size: 0;
    }
    .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__herramientas {
      display: contents;
    }
    .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__herramientas > .mgui-btn--primary {
      grid-column: 2 / 4;
      grid-row: 1;
      max-inline-size: 11rem;
      padding: .55rem .65rem;
      font-size: .875rem;
    }
    /* El selector de idioma, sin nombrar su clase: la última regla del idioma tiene que ser su respaldo sin popover
       (selector-idioma-hoja.test.ts, SI-13). */
    .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__herramientas > :not(.mgui-btn, .mgui-publica__abrir) {
      grid-column: 1;
      grid-row: 2;
      justify-self: start;
    }
    .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__herramientas > .mgui-btn--quiet {
      grid-column: 2;
      grid-row: 2;
    }
    .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__abrir {
      grid-column: 3;
      grid-row: 2;
    }
    .mgui-publica__encabezado .mgui-marca__img { height: 1.9rem; }
    .mgui-publica__encabezado .mgui-marca__nombre {
      white-space: normal;
      font-size: .95rem;
      line-height: 1.2;
    }
    .mgui-publica__encabezado .mgui-publica__derechos {
      justify-content: flex-start;
      gap: 0 .75rem;
    }
    .mgui-hero__conversion .mgui-hero__action { inline-size: 100%; }
  }
  @media (pointer: coarse) {
    .mgui-publica__encabezado .mgui-publica__derecho {
      min-block-size: var(--mg-control-min);
    }
  }
  @media (forced-colors: active) {
    .mgui-hero__intro,
    .mgui-hero__closing,
    .mgui-hero__core,
    .mgui-hero__stage,
    .mgui-hero__transversal,
    .mgui-hero__node a,
    .mgui-hero__stock-current,
    .mgui-hero__stock-future,
    .mgui-hero__stock-scope,
    .mgui-hero__stock-track > li {
      color: CanvasText;
      background: Canvas;
      border-color: CanvasText;
    }
    .mgui-hero .mgui-hero__action,
    .mgui-publica__herramientas > .mgui-btn--primary {
      color: ButtonText;
      background: ButtonFace;
      border-color: ButtonText;
    }
    .mgui-hero__rail {
      forced-color-adjust: none;
      background-image: repeating-linear-gradient(90deg, CanvasText 0 .5rem, transparent .5rem .8125rem);
    }
    .mgui-hero :focus-visible,
    .mgui-publica__encabezado :focus-visible {
      outline-color: Highlight;
    }
  }

  /* ── web/r3/fuente/sitio-hero5.css ── */
  /*
   * MKT-HERO-5 final.
   * Se carga después de sitio-hero.css dentro de mg.components.
   * Oferta estática, tokens existentes y controles nativos.
   */

  .mgui-publica__oferta {
    display: grid;
    gap: .15rem;
    min-inline-size: 0;
    max-inline-size: 19rem;
    margin: 0;
    padding: .45rem .75rem;
    border-inline-start: 3px solid var(--mg-color-marca-acento);
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-accion-suave);
    font-size: .8125rem;
    line-height: 1.35;
    text-align: start;
    overflow-wrap: anywhere;
  }

  .mgui-publica__oferta > * {
    min-inline-size: 0;
  }

  .mgui-publica__oferta > strong {
    color: var(--mg-color-marca-profunda);
    font-size: 1.125rem;
    font-weight: var(--mg-weight-bold);
    font-variant-numeric: tabular-nums;
  }

  .mgui-publica.mgui-publica--oferta .mgui-publica__inicio .mgui-marca__img {
    block-size: 3rem;
    inline-size: auto;
  }

  .mgui-publica.mgui-publica--oferta .mgui-publica__inicio .mgui-marca__nombre {
    font-size: 1.125rem;
    white-space: normal;
    line-height: 1.2;
  }

  .mgui-publica.mgui-publica--oferta .mgui-publica__herramientas {
    min-inline-size: 0;
  }

  .mgui-publica.mgui-publica--oferta .mgui-publica__herramientas > .mgui-btn--primary {
    max-inline-size: 16rem;
    min-block-size: var(--mg-control-min);
    overflow-wrap: anywhere;
  }

  .mgui-publica.mgui-publica--oferta .mgui-publica__contenido > .mgui-hero {
    grid-column: completo-inicio / completo-fin;
  }

  .mgui-hero--cinco .mgui-hero__intro {
    color: var(--mg-color-texto);
    background: var(--mg-color-fondo);
    border-block-end: 1px solid var(--mg-color-borde);
  }

  .mgui-hero--cinco .mgui-hero__intro h1,
  .mgui-hero--cinco .mgui-hero__intro h2,
  .mgui-hero--cinco .mgui-hero__kicker {
    color: var(--mg-color-marca-profunda);
  }

  .mgui-hero--cinco .mgui-hero__intro a:not(.mgui-hero__action) {
    color: var(--mg-color-marca-profunda);
  }

  .mgui-hero--cinco .mgui-hero__intro :is(a, button):focus-visible {
    outline-color: var(--mg-color-foco);
  }

  .mgui-hero--cinco .mgui-hero__opening {
    align-items: start;
    gap: 1.5rem;
  }

  .mgui-hero--cinco .mgui-hero__pitch {
    align-self: center;
  }

  .mgui-hero--cinco .mgui-hero__pitch h1 {
    max-inline-size: 18ch;
    font-size: clamp(2rem, 4.1vw, 3.75rem);
    line-height: 1.08;
  }

  .mgui-hero--cinco .mgui-hero__lead {
    max-inline-size: 48ch;
    margin-block: 1rem;
    line-height: 1.6;
  }

  .mgui-hero--cinco .mgui-hero__plan-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .5rem;
    margin-block: 0 1rem;
  }

  .mgui-hero--cinco .mgui-hero__plan-nav a {
    min-inline-size: 0;
    min-block-size: var(--mg-control-min);
    border-color: var(--mg-color-borde-control);
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-superficie);
    text-align: center;
  }

  .mgui-hero--cinco .mgui-hero__plan-nav a[aria-current="true"] {
    border: 2px solid var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
    font-weight: var(--mg-weight-bold);
  }

  .mgui-hero5__offer {
    padding: clamp(1rem, 2.2vw, 1.75rem);
    border: 1px solid var(--mg-color-borde-control);
    border-block-start: .25rem solid var(--mg-color-marca-profunda);
    border-radius: var(--mg-radius-lg);
    color: var(--mg-color-texto);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-hero5__offer > p:first-child {
    margin-block: 0 .35rem;
  }

  .mgui-hero5__offer h2 {
    margin-block: 0 1rem;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  }

  .mgui-hero--cinco .mgui-hero5__offer .mgui-mkt__precio > strong {
    color: var(--mg-color-marca-profunda);
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    font-variant-numeric: tabular-nums;
  }

  .mgui-hero--cinco .mgui-hero5__offer .mgui-hero__action {
    inline-size: 100%;
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-marca-acento);
  }

  .mgui-hero--cinco .mgui-hero5__offer .mgui-hero__action:hover {
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
  }

  .mgui-hero--cinco .mgui-hero5__offer .mgui-hero__period-nav a[aria-current="true"] {
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
  }

  .mgui-hero5__offer .mgui-hero__links {
    margin-block-end: 0;
  }

  .mgui-hero5__workflow {
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
  }

  .mgui-hero5__workflow .mgui-hero__network-figure > figcaption h2,
  .mgui-hero5__workflow .mgui-hero__network-figure > figcaption strong {
    color: var(--mg-color-sobre-marca-profunda);
  }

  .mgui-hero5__workflow .mgui-hero__pause:focus-visible {
    outline: 3px solid var(--mg-color-marca-acento);
    outline-offset: 3px;
  }

  .mgui-hero--cinco .mgui-hero__selected {
    border-block-end: 1px solid var(--mg-color-borde);
  }

  .mgui-publica.mgui-publica--oferta .mgui-publica__contenido,
  .mgui-publica.mgui-publica--oferta .mgui-publica__contenido [id],
  .mgui-publica.mgui-publica--oferta .mgui-publica__contenido :is(a, button, input, select, summary) {
    scroll-margin-block-start: 24rem;
  }

  @media (min-width: 64rem) {
    .mgui-publica.mgui-publica--oferta .mgui-publica__inicio .mgui-marca__img {
      block-size: 3.5rem;
    }

    .mgui-publica.mgui-publica--oferta .mgui-publica__inicio .mgui-marca__nombre {
      font-size: 1.65rem;
    }

    .mgui-hero--cinco .mgui-hero__opening {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: 3rem;
    }

    .mgui-hero--cinco .mgui-hero__plan-nav {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /*
   * En móvil se conservan las herramientas como hijos de la grilla de la barra.
   * Primera fila: marca. Segunda: idioma, acceso y menú.
   * Tercera: precio y acción juntos, sin una banda adicional.
   */
  @media not all and (min-width: 768px) {
    .mgui-publica.mgui-publica--oferta .mgui-publica__barra {
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: .5rem;
    }

    .mgui-publica.mgui-publica--oferta .mgui-publica__inicio {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .mgui-publica.mgui-publica--oferta .mgui-publica__herramientas > .mgui-publica__oferta {
      grid-column: 1;
      grid-row: 3;
      justify-self: stretch;
      max-inline-size: none;
      padding: .4rem .5rem;
    }

    .mgui-publica.mgui-publica--oferta .mgui-publica__herramientas > .mgui-btn--primary {
      grid-column: 2 / 4;
      grid-row: 3;
      align-self: center;
      max-inline-size: 11rem;
      padding: .6rem .7rem;
      font-size: .875rem;
    }

    .mgui-publica.mgui-publica--oferta .mgui-publica__oferta > strong {
      font-size: 1rem;
    }

    .mgui-hero--cinco .mgui-hero__opening {
      gap: 1rem;
    }
  }

  /* El menú abierto debe poder desplazarse aunque su contenido supere la ventana. */
  @media not all and (min-width: 768px) {
    .mgui-publica.mgui-publica--oferta .mgui-publica__encabezado:has(.mgui-publica__interruptor:checked) {
      position: static;
    }

    .mgui-publica.mgui-publica--oferta:has(.mgui-publica__interruptor:checked) .mgui-publica__contenido,
    .mgui-publica.mgui-publica--oferta:has(.mgui-publica__interruptor:checked) .mgui-publica__contenido [id],
    .mgui-publica.mgui-publica--oferta:has(.mgui-publica__interruptor:checked) .mgui-publica__contenido :is(a, button, input, select, summary) {
      scroll-margin-block-start: 1rem;
    }
  }

  /* Zoom, teclado o ventana baja: el encabezado deja libre el documento. */
  @media (max-height: 40rem) {
    .mgui-publica.mgui-publica--oferta .mgui-publica__encabezado {
      position: static;
    }

    .mgui-publica.mgui-publica--oferta .mgui-publica__contenido,
    .mgui-publica.mgui-publica--oferta .mgui-publica__contenido [id],
    .mgui-publica.mgui-publica--oferta .mgui-publica__contenido :is(a, button, input, select, summary) {
      scroll-margin-block-start: 1rem;
    }
  }

  /* El respaldo del selector muestra una lista; no se fija una cabecera de altura abierta. */
  @supports not selector(:popover-open) {
    .mgui-publica.mgui-publica--oferta .mgui-publica__encabezado {
      position: static;
    }

    .mgui-publica.mgui-publica--oferta .mgui-publica__contenido,
    .mgui-publica.mgui-publica--oferta .mgui-publica__contenido [id],
    .mgui-publica.mgui-publica--oferta .mgui-publica__contenido :is(a, button, input, select, summary) {
      scroll-margin-block-start: 1rem;
    }
  }

  /*
   * No se agregan animaciones. Las del recorrido siguen condicionadas a
   * prefers-reduced-motion: no-preference y conservan su control de pausa.
   */
  @media (forced-colors: active) {
    .mgui-publica__oferta,
    .mgui-publica__oferta > strong,
    .mgui-hero--cinco .mgui-hero__intro,
    .mgui-hero5__offer,
    .mgui-hero5__workflow {
      color: CanvasText;
      background: Canvas;
      border-color: CanvasText;
    }

    .mgui-hero--cinco .mgui-hero__intro h1,
    .mgui-hero--cinco .mgui-hero__intro h2,
    .mgui-hero--cinco .mgui-hero__kicker,
    .mgui-hero--cinco .mgui-hero5__offer .mgui-mkt__precio > strong,
    .mgui-hero5__workflow .mgui-hero__network-figure > figcaption h2,
    .mgui-hero5__workflow .mgui-hero__network-figure > figcaption strong,
    .mgui-publica.mgui-publica--oferta .mgui-publica__oferta > strong {
      color: CanvasText;
    }

    .mgui-hero--cinco .mgui-hero__plan-nav a,
    .mgui-hero--cinco .mgui-hero__plan-nav a[aria-current="true"],
    .mgui-hero--cinco .mgui-hero5__offer .mgui-hero__action,
    .mgui-hero--cinco .mgui-hero5__offer .mgui-hero__action:hover,
    .mgui-hero--cinco .mgui-hero5__offer .mgui-hero__period-nav a[aria-current="true"],
    .mgui-publica.mgui-publica--oferta .mgui-publica__herramientas > .mgui-btn--primary {
      color: ButtonText;
      background: ButtonFace;
      border-color: ButtonText;
    }

    .mgui-hero--cinco :focus-visible,
    .mgui-hero5__workflow .mgui-hero__pause:focus-visible {
      outline-color: Highlight;
    }
  }

  /* ── web/r3/fuente/sitio-hero6.css ── */
  /*
   * MKT-HERO-6.
   * Se incorpora automáticamente después de sitio-hero5.css en mg.components.
   * Conserva la autoridad de tokens, fuentes locales, controles nativos y guardas SSR.
   * Sin alturas de texto fijas, sin colores literales, sin scripts ni recursos de terceros.
   */

  /* Derechos visibles y legibles también cuando tienen traducción. */
  .mgui-publica .mgui-publica__encabezado .mgui-publica__derecho {
    min-block-size: var(--mg-control-min);
    min-inline-size: 0;
    max-inline-size: 100%;
    flex-wrap: wrap;
    align-content: center;
    column-gap: .3em;
    padding-block: .25rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .mgui-publica.mgui-publica--oferta .mgui-publica__herramientas > .mgui-btn--primary {
    border-color: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
    box-shadow: none;
  }

  .mgui-publica.mgui-publica--oferta .mgui-publica__herramientas > .mgui-btn--primary:hover {
    background: var(--mg-color-accion-hover);
    border-color: var(--mg-color-accion-hover);
  }

  .mgui-publica--oferta .mgui-publica__oferta {
    background: var(--mg-color-fondo);
    border-inline-start-color: var(--mg-color-borde);
  }

  /* Apertura: una propuesta, una muestra y una oferta cercana. */
  .mgui-hero.mgui-hero--seis {
    color: var(--mg-color-texto);
    background: var(--mg-color-superficie);
  }

  .mgui-hero--seis .mgui-hero__shell {
    max-inline-size: 80rem;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1.5rem, 3vw, 3rem);
  }

  .mgui-hero--seis .mgui-hero__intro {
    background: var(--mg-color-fondo);
    border-block-end: 1px solid var(--mg-color-borde);
  }

  .mgui-hero--seis .mgui-hero__opening {
    gap: 1.5rem;
    align-items: center;
    padding-block-end: 1rem;
  }

  .mgui-hero--seis .mgui-hero__pitch h1 {
    max-inline-size: 20ch;
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .mgui-hero--seis .mgui-hero__kicker {
    color: var(--mg-color-enlace);
    margin-block-end: .8rem;
  }

  .mgui-hero--seis .mgui-hero__lead {
    max-inline-size: 52ch;
    margin-block: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .mgui-hero--seis .mgui-hero__links {
    gap: .25rem 1rem;
    margin-block: .5rem 0;
  }

  .mgui-hero--seis .mgui-hero__conversion {
    margin-block: 1.25rem .5rem;
  }

  .mgui-hero--seis .mgui-hero__action,
  .mgui-hero--seis .mgui-hero5__offer .mgui-hero__action {
    border: 1px solid var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
    border-radius: var(--mg-radius-md);
    box-shadow: none;
  }

  .mgui-hero--seis .mgui-hero__action:hover,
  .mgui-hero--seis .mgui-hero5__offer .mgui-hero__action:hover {
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion-hover);
    border-color: var(--mg-color-accion-hover);
  }

  .mgui-hero6__preview {
    min-inline-size: 0;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-xl);
    color: var(--mg-color-texto);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-hero6__preview > img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--mg-radius-md);
  }

  .mgui-hero6__eyebrow {
    margin: .25rem .5rem .75rem;
    font-weight: var(--mg-weight-semibold);
  }

  .mgui-hero6__preview > .mgui-hero__small {
    margin: .75rem .5rem .25rem;
  }

  .mgui-hero--seis .mgui-hero__architecture {
    padding-block-start: .75rem;
  }

  .mgui-hero--seis .mgui-hero__plan-nav {
    gap: .5rem;
  }

  .mgui-hero--seis .mgui-hero__plan-nav a {
    border: 1px solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-sm);
  }

  .mgui-hero--seis .mgui-hero5__offer {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--mg-color-borde);
    border-block-start: 3px solid var(--mg-color-marca-acento);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-hero6__offer-title,
  .mgui-hero6__offer-action,
  .mgui-hero--seis .mgui-hero5__offer .mgui-mkt__precio {
    min-inline-size: 0;
  }

  .mgui-hero6__offer-title > p {
    margin-block: 0 .35rem;
  }

  .mgui-hero--seis .mgui-hero5__offer h2 {
    margin-block: 0 .75rem;
  }

  .mgui-hero--seis .mgui-hero5__offer .mgui-mkt__precio {
    margin: 0;
    padding-block: 1rem;
    border-block: 1px solid var(--mg-color-borde);
  }

  .mgui-hero--seis .mgui-hero5__offer .mgui-mkt__precio > strong {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  }

  .mgui-hero--seis .mgui-hero__period-nav {
    gap: .5rem;
    margin-block: .5rem 0;
  }

  .mgui-hero--seis .mgui-hero__period-nav a {
    min-block-size: var(--mg-control-min);
  }

  .mgui-hero6__offer-action .mgui-hero__small {
    margin-block: .6rem;
  }

  .mgui-hero--seis .mgui-hero__selected {
    gap: 1rem;
    border-block-end: 1px solid var(--mg-color-borde);
  }

  .mgui-hero--seis .mgui-hero__selected .mgui-mkt__lista > li {
    margin-block: 0;
  }

  .mgui-hero6__product > details {
    margin-block-start: 1.5rem;
  }

  .mgui-hero--seis .mgui-hero__selected h2,
  .mgui-hero--seis .mgui-hero__selected h3 {
    margin-block-start: 0;
  }

  /* Confianza verificable: texto y enlaces, sin sellos ni estadísticas inventadas. */
  .mgui-hero6__trust-grid {
    display: grid;
    gap: 1.5rem;
    margin-block-start: 1.5rem;
  }

  .mgui-hero6__trust-grid > article {
    min-inline-size: 0;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--mg-color-borde);
  }

  .mgui-hero6__trust-grid h3 {
    margin-block: .75rem .5rem;
    font-size: 1.125rem;
  }

  .mgui-hero6__trust-grid p {
    margin-block: .5rem;
  }

  .mgui-hero6__icon {
    display: block;
    color: var(--mg-color-enlace);
  }

  .mgui-hero6__trust-grid a,
  .mgui-hero6__sample-copy > a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mg-control-min);
    text-underline-offset: .2em;
  }

  /* Pantallas: texto accesible fuera de la imagen y enlace a tamaño completo. */
  .mgui-hero6__product {
    border-block-start: 1px solid var(--mg-color-borde);
  }

  .mgui-hero6__samples {
    display: grid;
    gap: 1.5rem;
    margin-block-start: 2rem;
  }

  .mgui-hero6__sample {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-fondo);
  }

  .mgui-hero6__sample-copy {
    min-inline-size: 0;
  }

  .mgui-hero6__sample-copy h3 {
    margin-block: .6rem;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
  }

  .mgui-hero6__sample img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    min-inline-size: 0;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }

  .mgui-hero6__status {
    margin: 0;
    font-size: .875rem;
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
  }

  .mgui-hero6__photo-grid {
    display: grid;
    gap: 1.5rem;
    margin-block-start: 1.5rem;
  }

  .mgui-hero6__photo-grid article {
    min-inline-size: 0;
  }

  .mgui-hero6__photo-grid img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border-radius: var(--mg-radius-lg);
  }

  .mgui-hero6__photo-grid h3 {
    margin-block: .8rem .25rem;
  }

  .mgui-hero6__photo-grid p {
    margin-block: .25rem;
  }

  /* El alcance técnico conserva su contenido y baja su peso visual. */
  .mgui-hero--seis .mgui-hero5__workflow {
    color: var(--mg-color-texto);
    background: var(--mg-color-fondo);
    border-block: 1px solid var(--mg-color-borde);
  }

  .mgui-hero--seis .mgui-hero5__workflow .mgui-hero__network-figure > figcaption h2,
  .mgui-hero--seis .mgui-hero5__workflow .mgui-hero__network-figure > figcaption strong {
    color: var(--mg-color-texto);
  }

  .mgui-hero--seis .mgui-hero__core {
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
  }

  .mgui-hero--seis .mgui-hero__stage {
    border-color: var(--mg-color-borde);
    box-shadow: none;
  }

  .mgui-hero--seis .mgui-hero__pending {
    border-block-start-style: solid;
  }

  .mgui-hero--seis .mgui-hero__brand img {
    inline-size: 6rem;
    block-size: 2rem;
    object-fit: contain;
  }

  .mgui-hero6__future {
    padding: 1.25rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
  }

  .mgui-hero6__future summary {
    min-block-size: var(--mg-control-min);
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
  }

  .mgui-hero6__future li {
    margin-block: .75rem;
  }

  .mgui-hero--seis .mgui-hero__closing {
    margin-block: 1rem 3rem;
    border-radius: var(--mg-radius-lg);
  }

  /* No se anima con prefers-reduced-motion: reduce. Nada depende del movimiento. */
  @keyframes mgui-hero6-entrada {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .mgui-hero6__preview {
      animation: mgui-hero6-entrada var(--mg-motion-slow) ease-out both;
    }

    .mgui-hero--seis .mgui-hero__action,
    .mgui-hero--seis .mgui-hero__plan-nav a {
      transition: background-color var(--mg-motion-base), border-color var(--mg-motion-base);
    }

    /* Conserva los keyframes y la pausa existentes; termina tras una sola pasada. */
    .mgui-hero--seis .mgui-hero__rail {
      animation-iteration-count: 1;
    }
  }

  @media (min-width: 768px) {
    .mgui-hero6__trust-grid,
    .mgui-hero6__photo-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mgui-hero6__sample {
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }
  }

  @media (min-width: 1024px) {
    .mgui-hero--seis .mgui-hero__opening {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: 2.5rem;
    }

    /* /planes: la apertura va sin muestra; la oferta con precio y acción la sigue a todo el ancho. */
    .mgui-hero--seis .mgui-hero6__opening--planes {
      grid-template-columns: minmax(0, 1fr);
    }

    .mgui-hero--seis .mgui-hero__plan-nav {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .mgui-hero--seis .mgui-hero5__offer {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 1.5rem;
      align-items: start;
    }

    .mgui-hero--seis .mgui-hero5__offer .mgui-mkt__precio {
      padding: 0 1.5rem;
      border-block: 0;
      border-inline: 1px solid var(--mg-color-borde);
    }

    .mgui-hero6__trust-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 768px) {
    .mgui-publica .mgui-publica__encabezado .mgui-publica__derechos {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .25rem .75rem;
      padding-block: .25rem;
    }

    .mgui-publica .mgui-publica__encabezado .mgui-publica__derecho {
      display: block;
      align-content: center;
      font-size: .8125rem;
    }

    .mgui-publica .mgui-publica__encabezado .mgui-publica__derecho > span[lang] {
      display: block;
    }

    .mgui-hero6__preview {
      padding: .5rem;
    }

    .mgui-hero--seis .mgui-hero__opening {
      gap: 1.25rem;
    }

    .mgui-hero--seis .mgui-hero__links {
      display: flex;
      flex-wrap: wrap;
    }

    .mgui-hero--seis .mgui-hero__plan-nav {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Refuerza el reflujo del encabezado sin cambiar los escapes de ventana baja de HERO-5. */
  @media (forced-colors: active) {
    .mgui-hero.mgui-hero--seis,
    .mgui-hero--seis .mgui-hero5__workflow,
    .mgui-hero6__preview,
    .mgui-hero6__sample,
    .mgui-hero6__future {
      color: CanvasText;
      background: Canvas;
      border-color: CanvasText;
    }

    .mgui-hero--seis .mgui-hero__action,
    .mgui-hero--seis .mgui-hero5__offer .mgui-hero__action,
    .mgui-publica.mgui-publica--oferta .mgui-publica__herramientas > .mgui-btn--primary {
      color: ButtonText;
      background: ButtonFace;
      border-color: ButtonText;
    }

    .mgui-hero6__icon {
      color: CanvasText;
    }
  }

  /* ── web/r3/fuente/sitio-marketing.css ── */
  /*
   * Presentación comercial. El generador incorpora esta fuente automáticamente.
   * Roles semánticos y componentes mgui, sin cambios en App o Control.
   * La secuencia se reproduce por una acción del visitante, una sola vez.
   */

  .mgui-mkt {
    overflow-wrap: anywhere;
    padding-block: clamp(2.75rem, 6vw, 5.5rem);
  }
  .mgui-mkt :is(h2, h3, p, li, dd) { text-wrap: pretty; }
  .mgui-mkt h2 {
    max-inline-size: 25ch;
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -.035em;
  }
  .mgui-mkt h3 { line-height: 1.25; }
  .mgui-mkt :is(a, button, summary) { -webkit-tap-highlight-color: transparent; }
  .mgui-mkt :is(a, button, summary, [tabindex="-1"]):focus-visible {
    outline: 3px solid var(--mg-color-foco);
    outline-offset: 4px;
  }
  .mgui-mkt .mgui-btn {
    min-block-size: 2.75rem;
    padding: .875rem 1.125rem;
    font-size: 1rem;
    text-align: center;
    white-space: normal;
    text-decoration: none;
  }
  .mgui-mkt .mgui-btn--primary {
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
  }
  .mgui-mkt .mgui-btn--primary:hover { background: var(--mg-color-accion-hover); }
  .mgui-mkt .mgui-btn--secondary {
    color: var(--mg-color-enlace);
    background: var(--mg-color-superficie);
  }
  .mgui-mkt .mgui-btn--secondary:hover { background: var(--mg-color-accion-suave); }
  .mgui-mkt__eyebrow {
    margin-block-end: .875rem;
    color: var(--mg-color-enlace);
    font-size: .8125rem;
    font-weight: var(--mg-weight-bold);
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .mgui-mkt__micro {
    color: var(--mg-color-texto);
    font-size: .875rem;
    line-height: 1.55;
  }
  .mgui-mkt__bajada { font-size: 1.125rem; line-height: 1.6; }
  .mgui-mkt__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-block: 1.5rem 1rem;
  }
  .mgui-mkt__dos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
  }
  .mgui-mkt__dos > * { min-inline-size: 0; }
  .mgui-mkt__seccion-titular { margin-block-end: 2rem; }
  .mgui-mkt__seccion-titular p { max-inline-size: 60ch; }
  .mgui-mkt--suave { background: var(--mg-color-superficie); }

  .mgui-mkt--apertura {
    padding-block: 1rem 3.5rem;
    background:
      radial-gradient(ellipse at 95% 10%, color-mix(in srgb, var(--mg-color-marca-acento) 13%, transparent), transparent 58%),
      linear-gradient(180deg, var(--mg-color-superficie), var(--mg-color-fondo));
  }
  .mgui-mkt--apertura .mgui-heroe { padding-block: 2rem 0; }
  .mgui-mkt--apertura .mgui-heroe__texto { gap: .625rem; }
  .mgui-mkt .mgui-mkt__titulo {
    max-inline-size: 18ch;
    font-size: clamp(2.25rem, 4.4vw, 3.875rem);
    font-weight: var(--mg-weight-bold);
    line-height: 1.075;
    letter-spacing: -.055em;
    text-wrap: balance;
  }
  .mgui-mkt__titulo > span { display: block; }
  .mgui-mkt__acento { color: var(--mg-color-enlace); }
  .mgui-mkt__entrada {
    margin-block-start: 1rem;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--mg-color-marca-acento);
  }
  .mgui-mkt__entrada > p { margin-block-end: .25rem; }
  .mgui-mkt__entrada .mgui-mkt__precio { margin: 0; padding: 0; border: 0; }
  .mgui-mkt__entrada .mgui-mkt__precio > strong { font-size: 1.5rem; }
  .mgui-mkt__ver-ejemplo {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }
  .mgui-mkt--planes { padding-block-end: 1.5rem; }
  .mgui-mkt--planes .mgui-heroe__texto { max-inline-size: 60rem; }
  .mgui-mkt--planes .mgui-mkt__titulo { max-inline-size: 28ch; }
  .mgui-mkt--planes + .mgui-mkt { padding-block-start: 1.5rem; }

  .mgui-mkt__vitrina {
    position: relative;
    margin: 0;
    min-inline-size: 0;
    scroll-margin-block-start: 1rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: 1.25rem;
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-3);
  }
  .mgui-mkt__vitrina-cabecera {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1.5rem;
    border-radius: 1.1875rem 1.1875rem 0 0;
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
  }
  .mgui-mkt__vitrina-cabecera p {
    margin: 0;
    font-family: var(--mg-font-heading);
    font-size: 1.25rem;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-mkt__marca {
    display: grid;
    place-items: center;
    flex: 0 0 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--mg-color-marca-acento);
    border-radius: .75rem;
    font-weight: var(--mg-weight-bold);
  }
  .mgui-mkt__secuencia {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1.5rem;
    list-style: none;
  }
  .mgui-mkt__secuencia > li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem;
    align-items: start;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: .875rem;
    background: var(--mg-color-fondo);
  }
  .mgui-mkt__secuencia strong { display: block; margin-block-end: .25rem; }
  .mgui-mkt__secuencia p { margin: 0; font-size: .875rem; }
  .mgui-mkt__paso-numero {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    font-weight: var(--mg-weight-bold);
    font-size: .8125rem;
  }
  .mgui-mkt__check { color: var(--mg-color-enlace); font-weight: var(--mg-weight-bold); }
  .mgui-mkt__vitrina-cierre {
    margin: 0;
    padding: 0 1.5rem 1.25rem;
    font-weight: var(--mg-weight-medium);
  }
  .mgui-mkt__vitrina figcaption {
    padding: 1rem 1.5rem;
    border-block-start: 1px solid var(--mg-color-borde);
    font-size: .8125rem;
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-mkt__demostracion {
    max-inline-size: 42rem;
    margin-block-start: 1.5rem;
  }
  .mgui-mkt__demostracion > .mgui-mkt__vitrina { margin-block-end: 1.5rem; }

  .mgui-mkt--mono {
    background: var(--mg-color-superficie);
    border-block: 1px solid var(--mg-color-borde);
  }
  .mgui-mkt__cuaderno {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--mg-color-borde);
    border-radius: 1.25rem;
    background: var(--mg-color-fondo);
  }
  .mgui-mkt__lista {
    display: grid;
    gap: .875rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mgui-mkt__lista > li {
    position: relative;
    padding-inline-start: 1.25rem;
  }
  .mgui-mkt__lista > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .55em;
    inline-size: .375rem;
    block-size: .375rem;
    border-radius: 50%;
    background: var(--mg-color-enlace);
  }
  .mgui-mkt__tarea {
    margin-block: 1.5rem 1rem;
    padding: 1rem;
    border-inline-start: 3px solid var(--mg-color-marca-acento);
    background: var(--mg-color-superficie);
  }
  .mgui-mkt__tarea p { margin: .5rem 0 0; }
  .mgui-mkt__exclusion {
    font-size: .875rem;
    font-weight: var(--mg-weight-medium);
    line-height: 1.55;
  }

  .mgui-mkt__modalidad {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block-end: 1rem;
  }
  .mgui-mkt__indice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-block: 1.5rem;
  }
  .mgui-mkt__indice a {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    min-inline-size: 0;
    padding: .75rem;
    border: 1px solid var(--mg-color-borde-control);
    border-radius: .5rem;
    background: var(--mg-color-superficie);
    font-size: .875rem;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-mkt__indice a:hover { background: var(--mg-color-accion-suave); }
  .mgui-mkt__tarjetas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-block-start: 2rem;
  }
  .mgui-mkt__tarjeta {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    gap: 1.125rem;
    padding: 1.5rem;
    scroll-margin-block-start: 1rem;
    border: 1px solid var(--mg-color-borde);
    border-block-start: 4px solid var(--mg-color-borde);
    border-radius: 1rem;
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-mkt__tarjeta:first-child {
    border-block-start-color: var(--mg-color-accion);
    background: linear-gradient(180deg, var(--mg-color-accion-suave), var(--mg-color-superficie) 16rem);
  }
  .mgui-mkt__tarjeta:focus-within,
  .mgui-mkt__tarjeta:target,
  .mgui-mkt__tarjeta:hover {
    border-color: var(--mg-color-enlace);
    box-shadow: var(--mg-elevation-3);
  }
  .mgui-mkt__tarjeta p { margin-block-end: 0; }
  .mgui-mkt__tarjeta h3 { margin-block: .5rem 1rem; font-size: 1.625rem; }
  .mgui-mkt__tarjeta-cabecera .mgui-mkt__eyebrow { margin-block-start: .75rem; }
  .mgui-mkt__numero {
    font-family: var(--mg-font-heading);
    font-size: 1.125rem;
    font-weight: var(--mg-weight-bold);
    color: var(--mg-color-enlace);
  }
  .mgui-mkt__beneficio { margin-block-end: .75rem; font-weight: var(--mg-weight-bold); }
  .mgui-mkt__tarjeta-cabecera .mgui-mkt__beneficio { margin-block-end: .75rem; }
  .mgui-mkt__tarjeta .mgui-mkt__lista { font-size: .9375rem; }
  .mgui-mkt__precio {
    margin-block-start: 0;
    padding-block: 1.25rem;
    border-block-start: 1px solid var(--mg-color-borde);
  }
  .mgui-mkt__precio > strong {
    display: block;
    margin-block: .375rem;
    font-family: var(--mg-font-heading);
    font-size: clamp(1.5rem, 2vw, 1.875rem);
    line-height: 1.25;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
  }
  .mgui-mkt__precio p { margin-block: .375rem 0; }
  .mgui-mkt__ahorro { font-size: .875rem; color: var(--mg-color-enlace); }
  .mgui-mkt__limites { display: grid; gap: .5rem; font-size: .875rem; }
  .mgui-mkt__limites > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
  }
  .mgui-mkt__limites dd { text-align: end; font-weight: var(--mg-weight-semibold); }
  .mgui-mkt__tarjeta-pie,
  .mgui-mkt__tarjeta-detalle { display: grid; gap: .75rem; }
  .mgui-mkt__tarjeta-pie > .mgui-btn { inline-size: 100%; }
  .mgui-mkt__tarjeta-detalle { margin-block-start: auto; }
  .mgui-mkt__debajo { display: grid; gap: .75rem; margin-block-start: 2rem; }
  .mgui-mkt__debajo p { margin: 0; }
  .mgui-mkt__nota { padding: 1rem 0; border-block-start: 1px solid var(--mg-color-borde); }
  .mgui-mkt__comparar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-block: 1.5rem; }
  .mgui-mkt__comparar > * { min-inline-size: 0; max-inline-size: 100%; }
  .mgui-mkt__catalogo { min-inline-size: 0; overflow-x: auto; padding-block: 1rem; }
  .mgui-mkt__catalogo .mgui-card { min-inline-size: 0; overflow-wrap: anywhere; }

  .mgui-mkt--profunda {
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
  }
  .mgui-mkt--profunda :is(h2, h3, p, a) { color: var(--mg-color-sobre-marca-profunda); }
  .mgui-mkt--profunda :is(a, button, summary, [tabindex="-1"]):focus-visible {
    outline-color: var(--mg-color-marca-acento);
  }
  .mgui-mkt--profunda .mgui-mkt__numero { color: var(--mg-color-marca-acento); }
  .mgui-mkt--profunda .mgui-mkt__nota { border-color: var(--mg-color-sobre-marca-profunda); }
  .mgui-mkt__pasos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin: 2.5rem 0;
    padding: 0;
    list-style: none;
  }
  .mgui-mkt__pasos h3 { margin-block: .75rem; }
  .mgui-mkt__pasos p { margin: 0; }
  .mgui-mkt__niveles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-block: 2rem;
  }
  .mgui-mkt__niveles > div {
    padding-block-start: 1rem;
    border-block-start: 3px solid var(--mg-color-marca-acento);
  }
  .mgui-mkt__niveles dt { margin-block-end: .75rem; font-weight: var(--mg-weight-bold); font-size: 1.25rem; }
  .mgui-mkt__enlaces {
    display: grid;
    gap: .75rem;
    margin-block: 2rem 3rem;
  }
  .mgui-mkt__enlaces a {
    display: flex;
    align-items: center;
    min-block-size: 3.5rem;
    padding: 1rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: .75rem;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-mkt__enlaces a:hover { background: var(--mg-color-accion-suave); }
  .mgui-mkt__faq { max-inline-size: 52rem; }
  .mgui-mkt__desplegable { border-block-end: 1px solid var(--mg-color-borde); }
  .mgui-mkt__desplegable summary {
    min-block-size: 3.5rem;
    padding-block: 1.125rem;
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-mkt__desplegable > p { margin-block: 0 1.5rem; }
  .mgui-mkt__desplegable[open] summary { color: var(--mg-color-enlace); }
  .mgui-mkt--cierre { background: var(--mg-color-accion-suave); }
  .mgui-mkt__condiciones {
    padding: 1.5rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: 1rem;
    background: var(--mg-color-superficie);
    font-size: .9375rem;
  }
  .mgui-mkt__condiciones > :last-child { margin-block-end: 0; }

  :is([data-mg-pagina="inicio"], [data-mg-pagina="inicio-traducido"], [data-mg-pagina="planes"], [data-mg-pagina="planes-traducido"]) .mgui-publica__herramientas .mgui-btn {
    min-block-size: 2.75rem;
  }
  :is([data-mg-pagina="inicio"], [data-mg-pagina="inicio-traducido"], [data-mg-pagina="planes"], [data-mg-pagina="planes-traducido"]) .mgui-publica__derecho {
    min-block-size: 2.75rem;
  }

  @media (min-width: 768px) {
    .mgui-mkt__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgui-mkt__indice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mgui-mkt__dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
    .mgui-mkt__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgui-mkt__niveles,
    .mgui-mkt__enlaces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-mkt__tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mgui-mkt__indice { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .mgui-mkt__pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mgui-mkt--apertura .mgui-heroe { gap: 3rem; }
  }
  @media not all and (min-width: 768px) {
    .mgui-mkt--apertura .mgui-heroe { padding-block-start: 1rem; }
    .mgui-mkt .mgui-mkt__titulo { font-size: 2rem; letter-spacing: -.035em; }
    .mgui-mkt__acciones > .mgui-btn { inline-size: 100%; }
    .mgui-mkt__vitrina-cabecera,
    .mgui-mkt__secuencia { padding: 1rem; }
    .mgui-mkt__secuencia > li { padding: .75rem; gap: .5rem; }
    .mgui-mkt__tarjeta { padding: 1.25rem; }
  }

  @keyframes mgui-mkt-secuencia {
    0% { border-color: var(--mg-color-borde); background: var(--mg-color-fondo); }
    50% { border-color: var(--mg-color-enlace); background: var(--mg-color-accion-suave); }
    100% { border-color: var(--mg-color-borde); background: var(--mg-color-fondo); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .mgui-mkt__vitrina:target .mgui-mkt__secuencia > li,
    .mgui-mkt__demostracion[open] .mgui-mkt__secuencia > li {
      animation: mgui-mkt-secuencia 700ms ease-out 1;
    }
    .mgui-mkt__vitrina:target .mgui-mkt__secuencia > li:nth-child(2),
    .mgui-mkt__demostracion[open] .mgui-mkt__secuencia > li:nth-child(2) {
      animation-delay: 500ms;
    }
    .mgui-mkt__vitrina:target .mgui-mkt__secuencia > li:nth-child(3),
    .mgui-mkt__demostracion[open] .mgui-mkt__secuencia > li:nth-child(3) {
      animation-delay: 1000ms;
    }
    .mgui-mkt__tarjeta {
      transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
    }
    .mgui-mkt__tarjeta:hover { transform: translateY(-.1875rem); }
  }
  /* Con movimiento reducido no se declaran las animaciones anteriores. */
  @media print {
    .mgui-mkt__vitrina,
    .mgui-mkt__tarjeta { box-shadow: none; }
    .mgui-mkt__tarjeta { break-inside: avoid; }
  }

  /* ── web/r3/fuente/sitio-ops.css ── */
  /*
   * MG-WEB-OPS-CONVERSION-01.
   * Fuente de mg.components, incorporada por mg-gen-r3 en orden alfabético.
   * Variante comercial: hero navy, beneficios condicionados, catálogo desplegable y FAQ nativa.
   * Reutiliza los tokens y las interacciones existentes. No requiere JavaScript.
   */

  .mgui-hero.mgui-hero--ops {
    overflow-wrap: anywhere;
  }

  .mgui-hero--ops .mgui-hero__shell {
    padding-block: clamp(1.5rem, 3vw, 3rem);
  }

  .mgui-hero--ops .mgui-hero__intro {
    color: var(--mg-color-sobre-marca-profunda);
    background: linear-gradient(
      125deg,
      var(--mg-color-marca-profunda) 65%,
      color-mix(in oklab, var(--mg-color-marca-profunda) 85%, var(--mg-color-marca-acento))
    );
    border-block-end: 0;
  }

  .mgui-hero.mgui-hero--ops .mgui-hero__pitch h1 {
    max-inline-size: 16ch;
    color: var(--mg-color-sobre-marca-profunda);
    font-size: clamp(2.25rem, 3.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .mgui-hero.mgui-hero--ops .mgui-hero__pitch .mgui-hero__kicker {
    color: var(--mg-color-marca-acento);
  }

  .mgui-hero.mgui-hero--ops .mgui-hero__pitch .mgui-hero__lead {
    max-inline-size: 46ch;
    color: var(--mg-color-sobre-marca-profunda);
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .mgui-hero.mgui-hero--ops .mgui-hero__pitch .mgui-hero__small,
  .mgui-hero.mgui-hero--ops .mgui-hero__pitch a.mgui-hero__jump {
    color: var(--mg-color-sobre-marca-profunda);
  }

  .mgui-hero--ops .mgui-hero__opening {
    padding-block: 2rem 1rem;
    gap: 1.5rem;
  }

  .mgui-hero--ops .mgui-hero6__opening--planes h1 {
    max-inline-size: 28ch;
  }

  .mgui-hero--ops .mgui-hero__conversion {
    margin-block: 1rem .25rem;
  }

  .mgui-hero--ops .mgui-hero__conversion > .mgui-hero__small {
    margin-block: .5rem;
  }

  .mgui-hero.mgui-hero--ops .mgui-hero__conversion .mgui-hero__action,
  .mgui-hero.mgui-hero--ops .mgui-hero__closing .mgui-hero__action {
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-marca-acento);
    border-color: var(--mg-color-marca-acento);
  }

  .mgui-hero.mgui-hero--ops .mgui-hero__conversion .mgui-hero__action:hover,
  .mgui-hero.mgui-hero--ops .mgui-hero__closing .mgui-hero__action:hover {
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-superficie);
    border-color: var(--mg-color-superficie);
  }

  .mgui-hero.mgui-hero--ops .mgui-hero__pitch :focus-visible {
    outline-color: var(--mg-color-marca-acento);
  }

  .mgui-hero--ops .mgui-hero6__preview {
    padding: .75rem;
    border: .35rem solid var(--mg-color-borde-control);
    border-radius: var(--mg-radius-xl);
    box-shadow: var(--mg-elevation-3);
  }

  .mgui-hero--ops .mgui-hero6__eyebrow {
    color: var(--mg-color-marca-profunda);
  }

  .mgui-hero--ops .mgui-hero__architecture {
    padding-block: .75rem 2rem;
  }

  .mgui-hero--ops .mgui-hero__intro .mgui-hero__plan-nav a {
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-superficie);
  }

  .mgui-hero--ops .mgui-hero__intro .mgui-hero__plan-nav a[aria-current="true"] {
    color: var(--mg-color-marca-profunda);
    background: var(--mg-color-marca-acento);
    border-color: var(--mg-color-marca-acento);
    font-weight: var(--mg-weight-bold);
  }

  .mgui-hero--ops .mgui-hero5__offer {
    border-block-start-color: var(--mg-color-marca-acento);
    box-shadow: var(--mg-elevation-2);
  }

  .mgui-hero--ops .mgui-hero5__offer h2 {
    color: var(--mg-color-marca-profunda);
  }

  .mgui-ops__benefits,
  .mgui-ops__tools,
  .mgui-ops__faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .mgui-ops__benefit {
    min-inline-size: 0;
    padding: 1.25rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-fondo);
  }

  .mgui-ops__benefit .mgui-hero6__icon {
    box-sizing: content-box;
    padding: .65rem;
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-enlace);
    background: var(--mg-color-accion-suave);
  }

  .mgui-ops__benefit h3 {
    margin-block: 1rem .5rem;
    font-size: var(--mg-type-lg);
    line-height: var(--mg-leading-ajustado);
  }

  .mgui-ops__benefit p {
    margin-block: 0;
    line-height: var(--mg-leading-base);
  }

  .mgui-hero--ops .mgui-hero__selected {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    border-block: 1px solid var(--mg-color-borde);
    background: var(--mg-color-fondo);
  }

  .mgui-hero--ops .mgui-hero__selected > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1.5rem;
  }

  .mgui-hero--ops .mgui-hero__selected .mgui-mkt__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem 1.5rem;
    padding-inline-start: 0;
  }

  .mgui-hero--ops .mgui-hero__selected .mgui-mkt__lista > li {
    padding-inline-start: 1.125rem;
    line-height: var(--mg-leading-base);
  }

  .mgui-hero--ops .mgui-hero__arca {
    margin-block-start: 1rem;
    background: var(--mg-color-superficie);
    border-color: var(--mg-color-borde);
  }

  .mgui-hero--ops .mgui-hero6__samples {
    margin-block-start: 1.25rem;
  }

  .mgui-hero--ops .mgui-hero6__sample {
    min-inline-size: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 1rem;
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-hero--ops .mgui-hero6__sample-copy h3 {
    font-size: var(--mg-type-xl);
  }

  .mgui-hero--ops .mgui-hero5__workflow {
    background: var(--mg-color-fondo);
  }

  .mgui-ops__tools {
    margin-block: 1rem;
  }

  .mgui-hero--ops .mgui-hero__cards {
    align-items: stretch;
    gap: 1rem;
  }

  .mgui-hero--ops .mgui-hero__card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-hero--ops .mgui-hero__card .mgui-mkt__precio {
    padding-block: .75rem;
    border-block: 1px solid var(--mg-color-borde);
  }

  .mgui-hero--ops .mgui-hero__card > .mgui-hero__links {
    margin-block-start: auto;
    padding-block-start: .75rem;
  }

  .mgui-ops__summary {
    margin-block: 1rem .5rem;
    font-size: var(--mg-type-sm);
    line-height: var(--mg-leading-base);
  }

  .mgui-ops__features {
    margin-block: .5rem 1rem;
    border-block-start: 1px solid var(--mg-color-borde);
  }

  .mgui-ops__features > summary,
  .mgui-ops__faq summary {
    min-block-size: var(--mg-control-min);
    padding-block: .65rem;
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
  }

  .mgui-ops__features[open] > summary,
  .mgui-ops__faq details[open] > summary {
    color: var(--mg-color-enlace);
  }

  .mgui-ops__faq details {
    min-inline-size: 0;
    padding: .5rem 1.25rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-fondo);
  }

  .mgui-ops__faq p {
    line-height: var(--mg-leading-base);
  }

  .mgui-ops__faq a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mg-control-min);
    text-underline-offset: .2em;
  }

  .mgui-hero--ops .mgui-hero6__trust-grid > article {
    padding: 1.25rem;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
  }

  .mgui-hero--ops .mgui-hero__closing {
    max-inline-size: 75rem;
    margin-inline: max(1rem, calc((100% - 75rem) / 2));
    background: var(--mg-color-marca-profunda);
    box-shadow: var(--mg-elevation-2);
  }

  /* Los derechos permanecen en el documento y fuera de cualquier desplegable. */
  .mgui-publica .mgui-publica__pie .mgui-publica__derecho {
    min-block-size: var(--mg-control-min);
    min-inline-size: 0;
    max-inline-size: 100%;
    flex-wrap: wrap;
    align-content: center;
    gap: .25rem;
    padding-block: .5rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  @media (min-width: 768px) {
    .mgui-ops__benefits,
    .mgui-ops__tools,
    .mgui-hero--ops .mgui-hero__selected .mgui-mkt__lista,
    .mgui-hero--ops .mgui-hero6__samples {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mgui-hero--ops .mgui-hero6__samples:has(> :only-child) {
      grid-template-columns: minmax(0, 1fr);
    }

    .mgui-hero--ops .mgui-hero6__sample:only-child {
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }
  }

  @media (min-width: 1024px) {
    .mgui-ops__benefits,
    .mgui-ops__tools {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mgui-hero--ops .mgui-hero__opening {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap: 2rem;
    }

    .mgui-hero--ops .mgui-hero6__opening--planes {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media not all and (min-width: 768px) {
    .mgui-hero--ops .mgui-hero__conversion .mgui-hero__action {
      inline-size: 100%;
    }

    .mgui-hero--ops .mgui-hero6__preview {
      padding: .5rem;
      border-width: .2rem;
    }

    .mgui-publica .mgui-publica__pie .mgui-publica__derechos {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: .25rem;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .mgui-ops__benefit {
      transition: transform var(--mg-motion-base) var(--mg-ease-out),
        box-shadow var(--mg-motion-base) var(--mg-ease-out);
    }

    .mgui-ops__benefit:hover {
      transform: translateY(-.125rem);
      box-shadow: var(--mg-elevation-2);
    }
  }

  @media (forced-colors: active) {
    .mgui-hero.mgui-hero--ops .mgui-hero__intro,
    .mgui-hero--ops .mgui-hero__closing,
    .mgui-ops__benefit,
    .mgui-ops__benefit .mgui-hero6__icon,
    .mgui-ops__faq details {
      color: CanvasText;
      background: Canvas;
      border-color: CanvasText;
    }

    .mgui-hero.mgui-hero--ops .mgui-hero__pitch h1,
    .mgui-hero.mgui-hero--ops .mgui-hero__pitch .mgui-hero__kicker,
    .mgui-hero.mgui-hero--ops .mgui-hero__pitch .mgui-hero__lead,
    .mgui-hero.mgui-hero--ops .mgui-hero__pitch .mgui-hero__small,
    .mgui-hero.mgui-hero--ops .mgui-hero__pitch a.mgui-hero__jump {
      color: CanvasText;
    }

    .mgui-hero.mgui-hero--ops .mgui-hero__conversion .mgui-hero__action,
    .mgui-hero.mgui-hero--ops .mgui-hero__closing .mgui-hero__action,
    .mgui-hero--ops .mgui-hero__intro .mgui-hero__plan-nav a,
    .mgui-hero--ops .mgui-hero__intro .mgui-hero__plan-nav a[aria-current="true"] {
      color: ButtonText;
      background: ButtonFace;
      border-color: ButtonText;
    }

    .mgui-hero.mgui-hero--ops .mgui-hero__pitch :focus-visible {
      outline-color: Highlight;
    }
  }

  /* ── web/r3/fuente/sitio-pie-fijo.css ── */
  /*
   * Decisión del titular (30/9/2026): la baja de servicio y el arrepentimiento van en el PIE, pero VISIBLES SIEMPRE.
   * Los dos enlaces existentes (`.mgui-publica__derechos` del pie) forman una franja fina FIJA al borde inferior de la
   * pantalla; el pie reserva su alto para que nunca tape contenido y la franja respeta la zona segura del móvil.
   * Sólo el pie de la cáscara pública: la muestra de la galería (`data-mg-derechos="muestra"`) sigue en el flujo.
   * Incorporada por mg-gen-r3 en orden alfabético (después de sitio-ops.css, que fija el tamaño táctil de cada enlace).
   */

  .mgui-publica {
    --mgui-franja-alto: 6rem;
  }

  @media (min-width: 768px) {
    .mgui-publica {
      --mgui-franja-alto: 3.5rem;
    }
  }

  /* El pie reserva la franja (más la zona segura) debajo de su contenido. */
  .mgui-publica .mgui-publica__pie {
    padding-block-end: calc(var(--mg-space-8) + var(--mgui-franja-alto) + env(safe-area-inset-bottom, 0px));
  }

  /* Un foco de teclado nunca queda oculto tras la franja (WCAG 2.4.11). */
  html:has(.mgui-publica__pie .mgui-publica__derechos[data-mg-derechos="pie"]) {
    scroll-padding-block-end: calc(var(--mgui-franja-alto) + env(safe-area-inset-bottom, 0px));
  }

  .mgui-publica .mgui-publica__pie .mgui-publica__derechos[data-mg-derechos="pie"] {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 40;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding-block: 0 env(safe-area-inset-bottom, 0px);
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
    border-block-start: 1px solid color-mix(in oklab, var(--mg-color-sobre-marca-profunda) 35%, transparent);
    background: var(--mg-color-marca-profunda);
    font-size: var(--mg-type-xs);
    line-height: 1.25;
  }

  .mgui-publica .mgui-publica__pie .mgui-publica__derechos[data-mg-derechos="pie"] .mgui-publica__derecho {
    flex: 1 1 50%;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-block: .25rem;
    padding-inline: var(--mg-space-2);
    text-align: center;
  }

  @media (min-width: 768px) {
    .mgui-publica .mgui-publica__pie .mgui-publica__derechos[data-mg-derechos="pie"] {
      gap: var(--mg-space-8);
      font-size: var(--mg-type-sm);
    }

    .mgui-publica .mgui-publica__pie .mgui-publica__derechos[data-mg-derechos="pie"] .mgui-publica__derecho {
      flex: 0 1 auto;
      padding-inline: var(--mg-space-4);
    }
  }

  /* Impresión: la franja fija no se repite en cada hoja; vuelve al flujo del pie. */
  @media print {
    .mgui-publica .mgui-publica__pie .mgui-publica__derechos[data-mg-derechos="pie"] {
      position: static;
    }

    .mgui-publica .mgui-publica__pie {
      padding-block-end: var(--mg-space-8);
    }
  }

  /* ── web/r3/fuente/sitio-v2.css ── */
  /* V2-09: composición sin medios. Tokens MG, sin tema ni movimiento propios. */
  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v2) {
    scroll-padding-block: var(--mg-space-4) calc(10rem + env(safe-area-inset-bottom, 0px));
  }

  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v2) .mgui-publica__encabezado {
    position: static;
  }

  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v2) .mgui-publica__contenido {
    padding-block-end: 0;
    scroll-margin-block-start: var(--mg-space-4);
  }

  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v2) .mgui-publica__contenido > .mgui-v2 {
    grid-column: completo-inicio / completo-fin;
  }

  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v2) .mgui-publica__pie {
    padding-block-end: calc(var(--mg-space-8) + 10rem + env(safe-area-inset-bottom, 0px));
  }

  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v2) :is(a, summary, [tabindex]) {
    scroll-margin-block: var(--mg-space-4) calc(10rem + env(safe-area-inset-bottom, 0px));
  }

  .mgui-v2 {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .mgui-v2__interior,
  .mgui-v2__revision {
    max-inline-size: var(--mg-contenedor-max);
    margin-inline: auto;
    padding-inline: var(--mg-space-4);
  }

  .mgui-v2__revision {
    padding-block: var(--mg-space-4);
  }

  .mgui-v2__hero,
  .mgui-v2__seccion {
    padding-block: var(--mg-space-12);
  }

  .mgui-v2__hero {
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
  }

  .mgui-v2__hero h1 {
    max-inline-size: 22ch;
    color: inherit;
    font-size: clamp(var(--mg-type-2xl), 4vw, calc(var(--mg-type-2xl) * 1.7));
    line-height: var(--mg-leading-ajustado);
  }

  .mgui-v2__hero a:not(.mgui-btn) {
    color: inherit;
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .mgui-v2__hero :focus-visible {
    outline-color: var(--mg-color-sobre-marca-profunda);
  }

  .mgui-v2__seccion--suave {
    background: var(--mg-color-fondo);
  }

  .mgui-v2__grid,
  .mgui-v2__columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-6);
  }

  .mgui-v2__grid > *,
  .mgui-v2__columnas > *,
  .mgui-v2 .mgui-cluster > * {
    min-inline-size: 0;
  }

  .mgui-v2__grid {
    margin-block: var(--mg-space-6);
    align-items: start;
  }

  .mgui-v2 .mgui-amount {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mgui-v2 li + li {
    margin-block-start: var(--mg-space-2);
  }

  .mgui-v2 li > a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

  @media (min-width: 768px) {
    .mgui-v2__grid,
    .mgui-v2__columnas {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .mgui-v2__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (forced-colors: active) {
    .mgui-v2__hero :focus-visible {
      outline-color: Highlight;
    }
  }

  @media print {
    html:has(.mgui-publica .mgui-publica__contenido > .mgui-v2) .mgui-publica__pie {
      padding-block-end: var(--mg-space-8);
    }
  }

  /* V2-PULIDO: jerarquía comercial con los roles y controles de MG. */
  .mgui-v2__hero {
    padding-block: clamp(3rem, 7vw, 7rem);
  }
  .mgui-v2__hero h1 {
    max-inline-size: 23ch;
    font-size: clamp(2.25rem, 5vw, 4rem);
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .mgui-v2__hero h1 span {
    display: block;
    color: var(--mg-color-marca-acento);
  }
  .mgui-v2__antetitulo {
    color: var(--mg-color-marca-acento);
    font-weight: var(--mg-weight-semibold);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .mgui-v2__bajada {
    max-inline-size: 62ch;
    font-size: var(--mg-type-lg);
  }
  .mgui-v2__hero .mgui-cluster {
    margin-block-start: var(--mg-space-6);
  }
  .mgui-v2__hero .mgui-btn--primary,
  .mgui-v2__cierre .mgui-btn--primary {
    background: var(--mg-color-marca-acento);
    border-color: var(--mg-color-marca-acento);
    color: var(--mg-color-marca-profunda);
  }
  .mgui-v2__seccion {
    padding-block: clamp(2.5rem, 5vw, 5rem);
    background: var(--mg-color-superficie);
  }
  .mgui-v2__seccion--suave {
    background: var(--mg-color-fondo);
  }
  .mgui-v2__seccion h2 {
    max-inline-size: 30ch;
    margin-block-end: var(--mg-space-4);
    text-wrap: balance;
  }
  .mgui-v2__pasos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-6);
    margin-block: var(--mg-space-8) 0;
    padding: 0;
    list-style-position: inside;
  }
  .mgui-v2__pasos li {
    min-inline-size: 0;
    margin: 0;
    padding-block-start: var(--mg-space-4);
    border-block-start: 1px solid var(--mg-color-borde);
  }
  .mgui-v2__pasos li::marker {
    color: var(--mg-color-enlace);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-v2__pasos h3,
  .mgui-v2__pasos p {
    margin-block-start: var(--mg-space-3);
  }
  .mgui-v2__grupo {
    margin-block-start: var(--mg-space-8);
  }
  .mgui-v2__grupo .mgui-v2__grid {
    align-items: stretch;
  }
  .mgui-v2__grupo .mgui-card > a {
    margin-block-start: auto;
    min-block-size: var(--mg-control-min);
    display: inline-flex;
    align-items: center;
  }
  .mgui-v2__pregunta {
    border-block-end: 1px solid var(--mg-color-borde);
    padding-block: var(--mg-space-4);
  }
  .mgui-v2__pregunta summary {
    min-block-size: var(--mg-control-min);
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-v2__pregunta p,
  .mgui-v2__pregunta .mgui-v2__columnas {
    margin-block: var(--mg-space-4);
    max-inline-size: 75ch;
  }
  .mgui-v2__cierre {
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
  }
  .mgui-v2__cierre h2 {
    color: inherit;
  }
  .mgui-v2__cierre :focus-visible {
    outline-color: var(--mg-color-sobre-marca-profunda);
  }
  @media (min-width: 768px) {
    .mgui-v2__pasos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .mgui-v2__pasos {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* ── web/r3/fuente/sitio-v3.css ── */
  /*
   * SITIO-V3 (4/10/2026, referencia Imagen3 del titular): la portada nueva, el encabezado y las fichas de /planes.
   * Sólo tokens y roles de MG (sin hex ni funciones de color), propiedades lógicas, móvil primero (cortes 480, 768, 1024
   * y 1280 px; los complementos van con «not all and»). Va después de sitio-v2.css (orden alfabético del generador):
   * a igual especificidad, gana.
   */

  /* ── Encabezado compartido del sitio: logo, navegación, idioma, «Ingresar» y el llamado en UNA fila desde 1024 px ── */
  .mgui-publica:not(.mgui-publica--flujo) > .mgui-publica__encabezado {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--mg-layer-fijo);
    border-block-end: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-publica .mgui-publica__herramientas > .mgui-btn--primary {
    min-block-size: 2.75rem;
    padding: .6rem 1.1rem;
    border: 0;
    border-radius: var(--mg-radius-md);
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-bold);
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-publica .mgui-publica__herramientas > .mgui-btn--primary:hover {
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion-hover);
  }
  .mgui-publica .mgui-publica__herramientas > .mgui-btn--quiet { font-weight: var(--mg-weight-semibold); }
  .mgui-publica__encabezado .mgui-publica__enlace { font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); }
  @media (min-width: 1024px) {
    .mgui-publica:not(.mgui-publica--flujo) .mgui-publica__encabezado:has(.mgui-publica__nav) {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: var(--mg-space-6);
      padding-inline: max(var(--mg-space-6), calc((100% - 84rem) / 2));
    }
    .mgui-publica__encabezado:has(.mgui-publica__nav) .mgui-publica__barra { display: contents; }
    .mgui-publica__encabezado:has(.mgui-publica__nav) .mgui-publica__inicio { grid-column: 1; grid-row: 1; padding-block: var(--mg-space-3); }
    .mgui-publica__encabezado:has(.mgui-publica__nav) .mgui-publica__herramientas { grid-column: 3; grid-row: 1; }
    .mgui-publica__encabezado .mgui-publica__nav {
      grid-column: 2;
      grid-row: 1;
      padding: 0;
      border: 0;
    }
    .mgui-publica__encabezado .mgui-publica__nav .mgui-publica__lista { justify-content: center; gap: var(--mg-space-1) var(--mg-space-6); }
  }

  /* ── La portada: a todo el ancho, con su interior centrado ── */
  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3) {
    scroll-padding-block: 6rem calc(4rem + env(safe-area-inset-bottom, 0px));
  }
  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3) .mgui-publica__contenido {
    padding-block-end: 0;
    scroll-margin-block-start: 6rem;
  }
  .mgui-publica__contenido > .mgui-v3 { grid-column: completo-inicio / completo-fin; }
  .mgui-v3 [id],
  .mgui-v3 :is(a, summary) { scroll-margin-block-start: 6rem; }
  .mgui-v3 {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    color: var(--mg-color-texto);
  }
  .mgui-v3 :is(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
  .mgui-v3__interior {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 78rem;
    margin-inline: auto;
    padding-inline: max(var(--mg-space-4), env(safe-area-inset-left)) max(var(--mg-space-4), env(safe-area-inset-right));
  }
  @media (min-width: 768px) {
    .mgui-v3__interior { padding-inline: var(--mg-space-8); }
  }
  .mgui-v3__kicker {
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .mgui-v3__titulo {
    font-family: var(--mg-font-heading);
    font-size: clamp(var(--mg-type-2xl), 3.6vw, 2.75rem);
    font-weight: var(--mg-weight-bold);
    line-height: 1.15;
    letter-spacing: -.02em;
  }
  .mgui-v3__titulo--md { font-size: clamp(var(--mg-type-xl), 2.6vw, var(--mg-type-3xl)); }
  .mgui-v3__titulo--sm { font-size: clamp(var(--mg-type-lg), 2vw, var(--mg-type-2xl)); }
  .mgui-v3__resalte { color: var(--mg-color-enlace); }
  .mgui-v3__bajada { color: var(--mg-color-texto-atenuado); }
  .mgui-v3__icono {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mgui-v3__icono--chico { inline-size: 1.1rem; block-size: 1.1rem; }
  .mgui-v3__icono--burbuja {
    box-sizing: content-box;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: .7rem;
    border-radius: 50%;
    color: var(--mg-color-enlace);
    background: var(--mg-color-accion-suave);
  }
  .mgui-v3__chip {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 999px;
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
  }
  .mgui-v3__mas {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    min-block-size: 2.75rem;
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    text-decoration: none;
  }
  .mgui-v3__mas:hover { text-decoration: underline; }
  .mgui-v3__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mg-space-2);
    min-block-size: 3rem;
    padding-inline: var(--mg-space-6);
    border-radius: var(--mg-radius-md);
    font-weight: var(--mg-weight-bold);
  }
  .mgui-v3__cta.mgui-btn--primary { box-shadow: var(--mg-elevation-2); }
  .mgui-v3__checks,
  .mgui-v3__sellos {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: 0;
    list-style: none;
  }
  .mgui-v3__checks li,
  .mgui-v3__sellos li { display: flex; align-items: flex-start; gap: var(--mg-space-2); font-size: var(--mg-type-sm); }
  .mgui-v3__checks .mgui-v3__icono,
  .mgui-v3__sellos .mgui-v3__icono { margin-block-start: .1rem; color: var(--mg-status-complete-texto); }
  .mgui-v3__sellos { flex-direction: row; flex-wrap: wrap; gap: var(--mg-space-2) var(--mg-space-6); }
  .mgui-v3__sellos li { align-items: center; font-weight: var(--mg-weight-medium); }
  .mgui-v3__sellos--oscuro li,
  .mgui-v3__sellos--oscuro .mgui-v3__icono { color: var(--mg-color-sobre-marca-profunda); }
  .mgui-v3__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-2);
    align-self: flex-start;
    padding: .35rem .8rem;
    border: 1px solid var(--mg-status-complete-borde);
    border-radius: 999px;
    color: var(--mg-status-complete-texto);
    background: var(--mg-status-complete-suave);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-v3__estado[data-mg-v3-beta="pronto"] {
    border-color: var(--mg-brand-blue-borde);
    color: var(--mg-color-enlace);
    background: var(--mg-color-accion-suave);
  }

  /* ── Apertura: dos columnas desde 1024 px ── */
  .mgui-v3-hero {
    padding-block: var(--mg-space-8) var(--mg-space-12);
    background:
      radial-gradient(60rem 30rem at 85% 10%, var(--mg-color-accion-suave), transparent 70%),
      linear-gradient(180deg, var(--mg-color-superficie), var(--mg-color-fondo));
  }
  .mgui-v3-hero__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-8); align-items: center; }
  .mgui-v3-hero__texto { display: flex; flex-direction: column; gap: var(--mg-space-4); }
  .mgui-v3-hero__titulo {
    font-family: var(--mg-font-heading);
    font-size: clamp(2.25rem, 6vw, 3.9rem);
    font-weight: var(--mg-weight-bold);
    line-height: 1.04;
    letter-spacing: -.03em;
  }
  .mgui-v3__linea { display: block; }
  .mgui-v3-hero__bajada { max-inline-size: 36rem; color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-md); line-height: var(--mg-leading-base); }
  .mgui-v3-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-3); }
  .mgui-v3-hero__acciones .mgui-btn--secondary { background: var(--mg-color-superficie); }
  @media not all and (min-width: 480px) {
    .mgui-v3-hero__acciones .mgui-v3__cta { inline-size: 100%; }
  }
  @media (min-width: 1024px) {
    .mgui-v3-hero { padding-block: var(--mg-space-12) var(--mg-space-16); }
    .mgui-v3-hero__grilla { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: var(--mg-space-8); }
  }

  /* ── La ilustración del producto (cifras de ejemplo, rotulada) ── */
  .mgui-v3-demo { display: flex; flex-direction: column; gap: var(--mg-space-2); margin: 0; min-inline-size: 0; }
  .mgui-v3-demo__escena {
    position: relative;
    padding-inline-end: 13%;
    padding-block-end: 4%;
    font-family: var(--mg-font-ui);
    font-size: clamp(.4rem, 1.6vw, .7rem);
    line-height: 1.3;
  }
  @media (min-width: 1024px) {
    .mgui-v3-demo__escena { font-size: clamp(.45rem, .72vw, .72rem); }
  }
  .mgui-v3-demo__escena :is(ul, p) { margin: 0; padding: 0; list-style: none; }
  .mgui-v3-demo__laptop {
    padding: 2.2% 2.2% 2.6%;
    border-radius: 1em 1em .4em .4em;
    background: var(--mg-color-marca-profunda);
    box-shadow: var(--mg-elevation-3);
  }
  .mgui-v3-demo__pantalla {
    display: grid;
    grid-template-columns: 22% minmax(0, 1fr);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: .35em;
    background: var(--mg-color-fondo);
  }
  .mgui-v3-demo__base {
    block-size: .9em;
    margin-inline: -4% 12%;
    border-radius: 0 0 1.4em 1.4em;
    background: var(--mg-color-borde);
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-v3-demo__lateral {
    display: flex;
    flex-direction: column;
    gap: .8em;
    padding: 1em .8em;
    color: var(--mg-color-sobre-marca-profunda);
    background: var(--mg-color-marca-profunda);
  }
  .mgui-v3-demo__lateral ul { display: flex; flex-direction: column; gap: .35em; }
  .mgui-v3-demo__lateral li { padding: .4em .6em; border-radius: .35em; opacity: .8; }
  .mgui-v3-demo__lateral .mgui-v3-demo__activo { background: var(--mg-color-accion); opacity: 1; }
  .mgui-v3-demo__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-inline-size: 2.4em;
    min-block-size: 2.4em;
    border-radius: .45em;
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
    font-family: var(--mg-font-heading);
    font-weight: var(--mg-weight-bold);
  }
  .mgui-v3-demo__tablero { display: flex; flex-direction: column; gap: .9em; min-inline-size: 0; padding: 1em 1.2em; }
  .mgui-v3-demo__barra { display: flex; justify-content: space-between; gap: 1em; }
  .mgui-v3-demo__hola { display: flex; flex-direction: column; }
  .mgui-v3-demo__hola strong { font-family: var(--mg-font-heading); font-size: 1.5em; }
  .mgui-v3-demo__hola span { color: var(--mg-color-texto-atenuado); }
  .mgui-v3-demo__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; }
  .mgui-v3-demo__kpi {
    display: flex;
    flex-direction: column;
    gap: .2em;
    padding: .7em .8em;
    border: 1px solid var(--mg-color-borde);
    border-radius: .5em;
    background: var(--mg-color-superficie);
  }
  .mgui-v3-demo__kpi span { color: var(--mg-color-texto-atenuado); }
  .mgui-v3-demo__kpi strong { font-size: 1.25em; white-space: nowrap; }
  .mgui-v3-demo__kpi em { color: var(--mg-status-complete-texto); font-style: normal; font-weight: var(--mg-weight-semibold); }
  .mgui-v3-demo__paneles { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .7em; flex: 1; }
  .mgui-v3-demo__panel {
    display: flex;
    flex-direction: column;
    gap: .6em;
    padding: .8em;
    border: 1px solid var(--mg-color-borde);
    border-radius: .5em;
    background: var(--mg-color-superficie);
  }
  .mgui-v3-demo__titulo { font-weight: var(--mg-weight-bold); }
  .mgui-v3-demo__celular {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 21%;
    padding: 1.4%;
    border-radius: 1.6em;
    background: var(--mg-color-marca-profunda);
    box-shadow: var(--mg-elevation-3);
  }
  .mgui-v3-demo__movil {
    display: flex;
    flex-direction: column;
    gap: .7em;
    aspect-ratio: 9 / 18;
    padding: 1.1em .9em;
    overflow: hidden;
    border-radius: 1.2em;
    background: var(--mg-color-superficie);
  }
  .mgui-v3-demo__acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; }
  .mgui-v3-demo__acciones span {
    overflow: hidden;
    font-size: .8em;
    padding: .45em 0;
    border-radius: .4em;
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
    font-weight: var(--mg-weight-semibold);
    text-align: center;
  }
  .mgui-v3-demo__cola {
    padding: .4em .5em;
    border-radius: .4em;
    color: var(--mg-status-warning-texto);
    background: var(--mg-status-warning-suave);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-v3-demo__rotulo {
    align-self: flex-end;
    padding: .2rem .6rem;
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto-atenuado);
    background: var(--mg-color-superficie);
    font-size: var(--mg-type-xs);
  }
  @media not all and (min-width: 480px) {
    .mgui-v3-demo__lateral { display: none; }
    .mgui-v3-demo__pantalla { grid-template-columns: minmax(0, 1fr); }
    .mgui-v3-demo__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgui-v3-demo__pantalla { aspect-ratio: auto; }
    .mgui-v3-demo__movil { aspect-ratio: auto; }
  }

  /* SITIO3-02: hero compacto y pantallas reales; altura libre para no recortar contenido. */
  .mgui-v3-hero { padding-block: var(--mg-space-8); }
  .mgui-v3-hero__grilla { gap: var(--mg-space-6); }
  .mgui-v3-hero__texto { min-inline-size: 0; gap: var(--mg-space-3); }
  /* Cada frase del titular cabe en UNA línea (la más larga, «Tu margen a la vista.», mide 21 letras): tamaños 14 % menores. */
  .mgui-v3-hero__titulo { font-size: clamp(1.6rem, 7.2vw, 2.8rem); line-height: 1.08; }
  .mgui-v3-hero__bajada { font-size: var(--mg-type-base); }
  .mgui-v3-hero__entrada { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-v3-hero .mgui-v3__sellos { gap: var(--mg-space-2) var(--mg-space-3); }
  .mgui-v3-hero .mgui-v3__sellos li { gap: var(--mg-space-2); font-size: var(--mg-type-xs); }
  .mgui-v3-demo { inline-size: 100%; max-inline-size: 48rem; margin-inline: auto; }
  .mgui-v3-demo__escena { display: grid; padding: 0; font-size: .75rem; line-height: 1.35; }
  .mgui-v3-demo__pantalla { aspect-ratio: auto; overflow: visible; min-block-size: 22em; }
  .mgui-v3-demo__tablero { gap: .65em; padding: .85em; }
  .mgui-v3-demo__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
  .mgui-v3-demo__kpi { min-inline-size: 0; padding: .6em .5em; }
  .mgui-v3-demo__kpi span { min-block-size: 2.7em; }
  .mgui-v3-demo__kpi strong { font-size: 1.05em; }
  .mgui-v3-demo__paneles { grid-template-columns: minmax(0, 1fr); gap: .6em; }
  .mgui-v3-demo__panel { min-inline-size: 0; padding: .65em; }
  .mgui-v3-demo__margen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
  .mgui-v3-demo__margen > div { display: flex; flex-direction: column; gap: .2em; min-inline-size: 0; }
  .mgui-v3-demo__margen span { color: var(--mg-color-texto-atenuado); }
  .mgui-v3-demo__margen strong { white-space: nowrap; }
  .mgui-v3-demo__tabla { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font: inherit; }
  .mgui-v3-demo__tabla :is(th, td) { padding: .45em .15em; border-block-end: 1px solid var(--mg-color-borde); text-align: end; vertical-align: top; }
  .mgui-v3-demo__tabla :is(th, td):first-child { inline-size: 40%; text-align: start; }
  .mgui-v3-demo__tabla :is(th, td):nth-child(2) { inline-size: 20%; }
  .mgui-v3-demo__tabla td:last-child { white-space: nowrap; }
  .mgui-v3-demo__base { margin-inline: 0; }
  .mgui-v3-demo__celular { box-sizing: border-box; position: static; inline-size: min(100%, 15rem); justify-self: center; margin-block-start: var(--mg-space-4); padding: .5em; font-size: .875rem; }
  .mgui-v3-demo__movil { aspect-ratio: auto; overflow: visible; gap: .7em; padding: .9em .8em; }
  .mgui-v3-demo__cabecera { display: flex; align-items: center; gap: .6em; }
  .mgui-v3-demo__cabecera > strong { min-inline-size: 0; }
  .mgui-v3-demo__movil .mgui-v3-demo__cola { display: flex; flex-direction: column; gap: .2em; }
  .mgui-v3-demo__acciones { grid-template-columns: minmax(0, 1fr); gap: .4em; }
  .mgui-v3-demo__acciones span { display: flex; align-items: center; justify-content: center; gap: .5em; overflow: visible; padding: .55em; font-size: 1em; }
  .mgui-v3-demo__acciones .mgui-v3__icono { inline-size: 1.1em; block-size: 1.1em; }
  .mgui-v3-demo__turno { display: flex; flex-direction: column; gap: .3em; padding: .6em; border: 1px solid var(--mg-color-borde); border-radius: .5em; }
  .mgui-v3-demo__rotulo { align-self: center; text-align: center; }
  @media (min-width: 768px) {
    .mgui-v3-demo__paneles { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .mgui-v3-demo__margen { grid-template-columns: minmax(0, 1fr); }
  }
  @media (min-width: 1024px) {
    .mgui-v3-hero__grilla { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .mgui-v3-hero__titulo { font-size: clamp(1.95rem, 3.14vw, 2.8rem); }
    .mgui-v3-hero__acciones .mgui-v3__cta { padding-inline: var(--mg-space-4); }
    .mgui-v3-demo__escena { padding-inline-end: 24%; padding-block-end: 1em; font-size: .7rem; }
    .mgui-v3-demo__pantalla { grid-template-columns: 18% minmax(0, 1fr); }
    .mgui-v3-demo__lateral { padding: .85em .45em; }
    .mgui-v3-demo__lateral li { padding: .4em .2em; }
    .mgui-v3-demo__celular { position: absolute; inset-block-end: .6em; inset-inline-end: 0; inline-size: 23%; margin-block-start: 0; font-size: .75rem; }
  }

  /* ── Franja de datos verdaderos ── */
  .mgui-v3-franja {
    border-block: 1px solid var(--mg-color-borde);
    background: var(--mg-color-superficie);
  }
  .mgui-v3-franja__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-4);
    margin-block: 0;
    padding-block: var(--mg-space-6);
    list-style: none;
  }
  .mgui-v3-franja__lista li { display: flex; align-items: center; gap: var(--mg-space-3); }
  .mgui-v3-franja__lista .mgui-v3__icono { color: var(--mg-color-enlace); }
  .mgui-v3-franja__lista span { display: flex; flex-direction: column; color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-v3-franja__lista strong { color: var(--mg-color-texto); font-size: var(--mg-type-base); }
  @media (min-width: 480px) {
    .mgui-v3-franja__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-v3-franja__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .mgui-v3-franja__lista li + li { padding-inline-start: var(--mg-space-4); border-inline-start: 1px solid var(--mg-color-borde); }
  }

  /* ── Secciones ── */
  .mgui-v3-seccion { padding-block: var(--mg-space-12); }
  .mgui-v3-seccion--suave { background: var(--mg-color-fondo); }
  @media (min-width: 1024px) {
    .mgui-v3-seccion { padding-block: var(--mg-space-16); }
  }
  .mgui-v3__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--mg-space-3); margin-block-end: var(--mg-space-8); }
  .mgui-v3__cabecera > div { display: flex; flex-direction: column; gap: var(--mg-space-2); }
  .mgui-v3__prosa { display: flex; flex-direction: column; gap: var(--mg-space-3); max-inline-size: 52rem; }

  .mgui-v3-areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-4); padding: 0; list-style: none; }
  .mgui-v3-area {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-6);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie);
    transition: box-shadow var(--mg-motion-base) var(--mg-ease-out), transform var(--mg-motion-base) var(--mg-ease-out);
  }
  .mgui-v3-area:hover { box-shadow: var(--mg-elevation-2); transform: translateY(-2px); }
  .mgui-v3-area .mgui-v3__icono--burbuja { align-self: flex-start; margin-block-end: var(--mg-space-2); }
  @media not all and (min-width: 480px) {
    .mgui-v3-area { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--mg-space-4); padding: var(--mg-space-4); }
    .mgui-v3-area .mgui-v3__icono--burbuja { grid-row: span 2; margin: 0; }
  }
  .mgui-v3-area h3 { font-family: var(--mg-font-heading); font-size: var(--mg-type-md); }
  .mgui-v3-area p { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  @media (min-width: 480px) {
    .mgui-v3-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-v3-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 1280px) {
    .mgui-v3-areas:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .mgui-v3-areas:has(> :nth-child(6):last-child) .mgui-v3-area { padding: var(--mg-space-4); border: 0; background: transparent; }
  }

  /* ── Proceso ── */
  .mgui-v3-proceso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-6); }
  .mgui-v3-proceso__principal {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-6);
    border-radius: var(--mg-radius-xl);
    background: var(--mg-color-accion-suave);
  }
  .mgui-v3-pasos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-4);
    margin-block-start: var(--mg-space-4);
    padding: 0;
    list-style: none;
    counter-reset: paso;
  }
  .mgui-v3-paso { position: relative; display: flex; align-items: flex-start; gap: var(--mg-space-3); counter-increment: paso; }
  .mgui-v3-paso::before {
    content: counter(paso);
    position: absolute;
    inset-block-start: -.35rem;
    inset-inline-start: -.35rem;
    display: grid;
    place-items: center;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-radius: 50%;
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
  }
  .mgui-v3-paso .mgui-v3__icono--burbuja { background: var(--mg-color-superficie); }
  .mgui-v3-paso h3 { font-size: var(--mg-type-base); }
  .mgui-v3-paso p { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-v3-proceso__lado {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-6);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-xl);
    background: var(--mg-color-superficie);
  }
  .mgui-v3-proceso__lado strong { font-family: var(--mg-font-heading); font-size: var(--mg-type-lg); }
  .mgui-v3-proceso__lado p:not(:has(strong)) { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-v3-proceso__barras { align-self: flex-end; inline-size: 8rem; block-size: auto; margin-block-start: auto; fill: var(--mg-status-complete-borde); }
  @media (min-width: 768px) {
    .mgui-v3-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-v3-proceso { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
    .mgui-v3-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mgui-v3-paso { flex-direction: column; }
    /* La flecha va dentro de la caja del paso (en su relleno final): fuera de ella ensanchaba el renglón. */
    .mgui-v3-paso:not(:last-child) { padding-inline-end: 1.25rem; }
    .mgui-v3-paso:not(:last-child)::after {
      /* Decorativa y sin texto: un trazo dibujado por la hoja, no el carácter «→», para que ningún lector (con o sin
         soporte del texto alternativo en `content`) anuncie «flecha a la derecha». */
      content: "";
      position: absolute;
      inset-block-start: 1rem;
      inset-inline-end: .25rem;
      inline-size: .5rem;
      block-size: .5rem;
      border-block-start: .14rem solid var(--mg-color-texto-atenuado);
      border-inline-end: .14rem solid var(--mg-color-texto-atenuado);
      transform: rotate(45deg);
    }
  }

  /* ── Antes / después, integraciones y sincronización ── */
  .mgui-v3-tres { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-8); }
  .mgui-v3-antes,
  .mgui-v3-integraciones { display: flex; flex-direction: column; gap: var(--mg-space-3); }
  .mgui-v3-antes__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-3); margin-block-start: var(--mg-space-2); }
  .mgui-v3-antes__col {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
  }
  .mgui-v3-antes__col h3 { display: flex; align-items: center; gap: var(--mg-space-2); font-size: var(--mg-type-base); }
  .mgui-v3-antes__col--antes { border-color: var(--mg-status-danger-borde); background: var(--mg-status-danger-suave); }
  .mgui-v3-antes__col--antes :is(h3, .mgui-v3__icono) { color: var(--mg-status-danger-texto); }
  .mgui-v3-antes__col--despues { border-color: var(--mg-status-complete-borde); background: var(--mg-status-complete-suave); }
  .mgui-v3-antes__col--despues h3 { color: var(--mg-status-complete-texto); }
  .mgui-v3-integraciones__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-2); padding: 0; list-style: none; }
  .mgui-v3-integraciones__lista li {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-v3-integraciones__lista .mgui-v3__icono { color: var(--mg-color-enlace); }
  .mgui-v3-integraciones__lista span { display: flex; flex-direction: column; color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-xs); }
  .mgui-v3-integraciones__lista strong { color: var(--mg-color-texto); font-size: var(--mg-type-sm); }
  .mgui-v3-sincro {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
    padding: var(--mg-space-6);
    border-radius: var(--mg-radius-xl);
    background: var(--mg-color-accion-suave);
  }
  .mgui-v3-sincro > p { font-family: var(--mg-font-heading); font-size: var(--mg-type-md); }
  @media (min-width: 768px) {
    .mgui-v3-antes__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgui-v3-integraciones__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-v3-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-8); }
    .mgui-v3-integraciones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgui-v3-sincro { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .mgui-v3-sincro .mgui-v3__checks { flex-direction: row; flex-wrap: wrap; gap: var(--mg-space-2) var(--mg-space-6); }
  }

  /* ── Planes de la portada y prueba ── */
  .mgui-v3-oferta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-6); }
  .mgui-v3-oferta__principal { display: flex; flex-direction: column; gap: var(--mg-space-3); min-inline-size: 0; }
  /* Radios nativos: el período sólo cambia la presentación de los precios de cada tarjeta. */
  .mgui-v3-periodos { min-inline-size: 0; }
  .mgui-v3-periodos__selector { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .mgui-v3-periodos__selector > legend { padding: 0; margin-block-end: var(--mg-space-2); font-weight: var(--mg-weight-semibold); }
  .mgui-v3-periodos__selector > input { inline-size: 1rem; block-size: 1rem; margin-inline-end: var(--mg-space-1); accent-color: var(--mg-color-accion); }
  .mgui-v3-periodos__selector > label { display: inline-flex; align-items: center; min-block-size: var(--mg-control-min); padding-inline: var(--mg-space-3); margin-inline-end: var(--mg-space-2); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-md); cursor: pointer; }
  .mgui-v3-periodos__selector > input:checked + label { color: var(--mg-color-sobre-solido); background: var(--mg-color-accion); border-color: var(--mg-color-accion); }
  .mgui-v3-periodos__selector > input:focus-visible { outline: 2px solid var(--mg-color-foco); outline-offset: 3px; }
  .mgui-v3-periodos__contenido { min-inline-size: 0; margin-block-start: var(--mg-space-3); }
  .mgui-v3-periodos:has(input[value="mensual"]:checked) .mgui-v3-periodos__contenido [data-mg-periodo="anual"],
  .mgui-v3-periodos:has(input[value="anual"]:checked) .mgui-v3-periodos__contenido [data-mg-periodo="mensual"] { display: none; }
  .mgui-v3-plan__limites { margin: 0; padding-inline-start: var(--mg-space-4); color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); overflow-wrap: anywhere; }
  .mgui-v3-plan__ahorro { padding: var(--mg-space-2); border-radius: var(--mg-radius-sm); color: var(--mg-status-complete-texto); background: var(--mg-status-complete-suave); font-size: var(--mg-type-sm); overflow-wrap: anywhere; }
  .mgui-v3-planes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-4);
    margin-block-start: var(--mg-space-4);
  }
  @media (min-width: 768px) {
    .mgui-v3-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-v3-planes { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
  }
  .mgui-v3-plan {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-6);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-v3-plan--destacado { border: 2px solid var(--mg-color-accion); box-shadow: var(--mg-elevation-3); }
  .mgui-v3-plan__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-2); }
  .mgui-v3-plan__cabeza h3 { font-family: var(--mg-font-heading); font-size: var(--mg-type-lg); }
  .mgui-v3-plan__desc,
  .mgui-v3-plan__nota,
  .mgui-v3-plan__otro { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-v3-plan__nota { color: var(--mg-status-complete-texto); font-size: var(--mg-type-xs); font-weight: var(--mg-weight-semibold); }
  .mgui-v3-plan__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-1); }
  .mgui-v3-plan__precio strong,
  .mgui-v3-plan__precio .mgui-amount { color: var(--mg-color-texto); font-family: var(--mg-font-heading); font-size: var(--mg-type-xl); font-weight: var(--mg-weight-bold); letter-spacing: -.02em; }
  .mgui-v3-plan__otro .mgui-amount { color: var(--mg-color-texto); font-weight: var(--mg-weight-semibold); }
  .mgui-v3-plan__precio span { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-v3-plan .mgui-v3__checks { flex: 1; }
  /* Viñetas decorativas sin repetir SVG en cada renglón: capacidades del catálogo y listas de control de la portada
     (SITIO3B-02, presupuesto de 60 kB). Una lista que todavía trae su ícono (la vitrina) no recibe la marca. */
  .mgui-v3__checks > li:not(:has(> svg))::before {
    content: "";
    box-sizing: border-box;
    flex-shrink: 0;
    inline-size: .8rem;
    block-size: .45rem;
    margin-block: .25rem 0;
    margin-inline: .15rem;
    border-inline-start: .1rem solid var(--mg-status-complete-texto);
    border-block-end: .1rem solid var(--mg-status-complete-texto);
    transform: rotate(-45deg);
  }
  .mgui-v3-plan__accion { justify-content: center; min-block-size: var(--mg-control-min); text-align: center; }
  .mgui-v3-plan__detalle { align-self: center; color: var(--mg-color-enlace); font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); }
  .mgui-v3-pronto,
  .mgui-v3-prueba {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-6);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-xl);
    background: var(--mg-color-superficie);
  }
  .mgui-v3-pronto { align-items: flex-start; margin-block-start: var(--mg-space-4); }
  .mgui-v3-prueba { box-shadow: var(--mg-elevation-2); }
  .mgui-v3-prueba h3 { font-family: var(--mg-font-heading); font-size: var(--mg-type-xl); line-height: var(--mg-leading-ajustado); }
  .mgui-v3-prueba .mgui-v3__icono--burbuja { align-self: flex-start; color: var(--mg-status-complete-texto); background: var(--mg-status-complete-suave); }
  /* SITIO3B-02: el texto de la prueba va en su propio contenedor; antes eran seis hijos en cuatro columnas y la columna
     automática tomaba el ancho del párrafo: el título y el llamado quedaban de una letra de ancho a 1024 px y más.
     En franja, una fila flexible con bases en rem: con el texto ampliado los bloques bajan de renglón en lugar de
     estrangularse. */
  .mgui-v3-prueba__texto { display: flex; flex-direction: column; gap: var(--mg-space-2); min-inline-size: 0; }
  .mgui-v3-prueba h4 { font-size: var(--mg-type-base); }
  @media (min-width: 1024px) {
    .mgui-v3-prueba {
      flex-flow: row wrap;
      align-items: center;
      gap: var(--mg-space-6);
    }
    .mgui-v3-prueba .mgui-v3__icono--burbuja { align-self: center; }
    .mgui-v3-prueba > .mgui-v3__icono { flex: none; }
    .mgui-v3-prueba > .mgui-v3-prueba__texto { flex: 3 1 18rem; }
    .mgui-v3-prueba > .mgui-v3__checks { flex: 2 1 12rem; }
    .mgui-v3-prueba > .mgui-v3__cta { flex: none; margin-inline-start: auto; }
  }

  /* ── Vitrina de reserva (cinco planes) y paquetes instalables ── */
  @media (min-width: 1280px) {
    .mgui-v3-planes--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mg-space-3); }
    .mgui-v3-planes--cinco .mgui-v3-plan { padding: var(--mg-space-4); }
  }
  .mgui-v3-paquetes {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    margin-block-start: var(--mg-space-4);
    padding: var(--mg-space-6);
    border: 1px dashed var(--mg-color-borde);
    border-radius: var(--mg-radius-xl);
    background: var(--mg-color-superficie);
  }
  .mgui-v3-paquetes h3 { font-family: var(--mg-font-heading); font-size: var(--mg-type-lg); }
  .mgui-v3-paquetes > p { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-sm); }
  .mgui-v3-paquetes__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mgui-v3-paquetes__lista li {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    padding: var(--mg-space-3) var(--mg-space-4);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-accion-suave);
  }
  .mgui-v3-paquetes__lista li[data-mg-en-camino] { background: var(--mg-color-fondo); }
  .mgui-v3-paquetes__lista strong { font-size: var(--mg-type-sm); }
  .mgui-v3-paquetes__lista span { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-xs); }
  @media (min-width: 640px) {
    .mgui-v3-paquetes__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-v3-paquetes__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ── Testimonios (sólo con testimonios reales cargados desde Control) ── */
  .mgui-v3-testimonios { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-4); margin-block-start: var(--mg-space-6); padding: 0; list-style: none; }
  .mgui-v3-testimonios li { display: flex; flex-direction: column; gap: var(--mg-space-3); padding: var(--mg-space-6); border: 1px solid var(--mg-color-borde); border-radius: var(--mg-radius-lg); }
  .mgui-v3-testimonios blockquote { margin: 0; font-style: italic; }
  .mgui-v3-testimonios__autor { font-weight: var(--mg-weight-bold); }
  @media (min-width: 1024px) {
    .mgui-v3-testimonios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ── Preguntas frecuentes ── */
  .mgui-v3-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-6); }
  .mgui-v3-faq > div:first-child { display: flex; flex-direction: column; gap: var(--mg-space-2); }
  .mgui-v3-faq__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-3); align-items: start; }
  .mgui-v3-faq__item {
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-v3-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-3);
    min-block-size: var(--mg-control-min);
    padding: var(--mg-space-3) var(--mg-space-4);
    cursor: pointer;
    font-weight: var(--mg-weight-semibold);
    list-style: none;
  }
  .mgui-v3-faq__item summary::-webkit-details-marker { display: none; }
  .mgui-v3-faq__item summary::after { content: "+" / ""; color: var(--mg-color-enlace); font-size: var(--mg-type-lg); }
  .mgui-v3-faq__item[open] summary::after { content: "−" / ""; }
  .mgui-v3-faq__item > :not(summary) { margin: 0; padding: 0 var(--mg-space-4) var(--mg-space-4); color: var(--mg-color-texto-atenuado); }
  .mgui-v3-faq__docs { display: flex; flex-direction: column; gap: var(--mg-space-2); font-size: var(--mg-type-sm); }
  .mgui-v3-faq__docs h3 { font-size: var(--mg-type-base); }
  @media (min-width: 1024px) {
    .mgui-v3-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
    .mgui-v3-faq__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ── Cierre: banda profunda ── */
  .mgui-v3-cierre {
    padding-block: var(--mg-space-12);
    color: var(--mg-color-sobre-marca-profunda);
    background:
      radial-gradient(40rem 20rem at 90% 100%, var(--mg-color-accion), transparent 70%),
      var(--mg-color-marca-profunda);
  }
  .mgui-v3-cierre__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-6); align-items: center; }
  .mgui-v3-cierre__grilla > div { display: flex; flex-direction: column; gap: var(--mg-space-2); }
  .mgui-v3-cierre__titulo { color: var(--mg-color-sobre-marca-profunda); font-family: var(--mg-font-heading); font-size: clamp(var(--mg-type-2xl), 3vw, 2.5rem); }
  .mgui-v3-cierre p { color: var(--mg-color-sobre-marca-profunda); }
  /* SITIO3B-02: la base pinta h2–h4 con el color de texto oscuro: un título editorial en un cierre adicional quedaba
     oscuro sobre la banda profunda (razón 1:1 medida con la propuesta de Control y piezas optativas). */
  .mgui-v3-cierre :is(h2, h3, h4) { color: var(--mg-color-sobre-marca-profunda); }
  .mgui-v3-cierre .mgui-v3__checks > li:not(:has(> svg))::before { border-color: currentColor; }
  .mgui-v3-cierre :focus-visible { outline-color: var(--mg-color-sobre-marca-profunda); }
  @media (min-width: 1024px) {
    .mgui-v3-cierre__grilla { grid-template-columns: minmax(0, 1fr) auto; }
    .mgui-v3-cierre__grilla > .mgui-v3__sellos { grid-column: 1 / -1; }
  }

  /* /planes conserva la clase V2: esta regla vence al encabezado estático heredado. */
  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3-planes-pagina) {
    scroll-padding-block-start: 14rem;
  }
  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3-planes-pagina) .mgui-publica__encabezado {
    position: sticky;
  }
  html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3-planes-pagina) .mgui-v3-planes-pagina :is([id], a, button, input, select, summary) {
    scroll-margin-block-start: var(--mg-space-4);
  }
  /* El menú abierto y la ventana baja dejan desplazarse todo el encabezado. */
  @media not all and (min-width: 768px) {
    html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3-planes-pagina):has(.mgui-publica__interruptor:checked) {
      scroll-padding-block-start: var(--mg-space-4);
    }
    html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3-planes-pagina):has(.mgui-publica__interruptor:checked) .mgui-publica__encabezado {
      position: static;
    }
  }
  @media (max-height: 40rem) {
    html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3-planes-pagina) {
      scroll-padding-block-start: var(--mg-space-4);
    }
    html:has(.mgui-publica .mgui-publica__contenido > .mgui-v3-planes-pagina) .mgui-publica__encabezado {
      position: static;
    }
  }

  /* ── /planes: apertura clara y fichas en grilla ── */
  .mgui-v2 .mgui-v3-planes-hero {
    color: var(--mg-color-texto);
    background:
      radial-gradient(50rem 24rem at 85% 0%, var(--mg-color-accion-suave), transparent 70%),
      linear-gradient(180deg, var(--mg-color-superficie), var(--mg-color-fondo));
  }
  .mgui-v2 .mgui-v3-planes-hero h1 {
    max-inline-size: 22ch;
    color: var(--mg-color-texto);
    font-family: var(--mg-font-heading);
    font-size: clamp(var(--mg-type-3xl), 5vw, 3.25rem);
    letter-spacing: -.03em;
  }
  .mgui-v2 .mgui-v3-planes-hero a:not(.mgui-btn) { color: var(--mg-color-enlace); }
  .mgui-v2 .mgui-v3-planes-hero .mgui-btn--primary {
    border-color: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
    background: var(--mg-color-accion);
  }
  .mgui-v2 .mgui-v3-planes-hero .mgui-btn--primary:hover { background: var(--mg-color-accion-hover); }
  .mgui-v2 .mgui-v3-planes-hero .mgui-btn--secondary { background: var(--mg-color-superficie); }
  .mgui-v2 .mgui-v3-planes-hero :focus-visible { outline-color: var(--mg-color-foco); }
  .mgui-v2 .mgui-v3-planes-hero .mgui-v3__sellos li + li { margin: 0; }
  /* Las fichas de /planes son `.mgui-grid` (capa mg.utilities, que vence a esta capa): la hoja pública sólo fija la
     variable que esa utilidad lee, y sólo bajo la página pública. La vista previa de Control usa el mismo marcado y
     conserva la grilla de la utilidad (sin `.mgui-v3-planes-pagina` la variable no existe). */
  .mgui-v3-planes-pagina .mgui-grid[data-mg-componente="planes-sitio"] { --mgui-grid-columnas: minmax(0, 1fr); }
  @media (min-width: 768px) {
    .mgui-v3-planes-pagina .mgui-grid[data-mg-componente="planes-sitio"] { --mgui-grid-columnas: repeat(auto-fit, minmax(max(12rem, 45%), 1fr)); }
  }
  @media (min-width: 1024px) {
    /* 5 → 3 + 2 · 6 → 3 + 3 · 4 → 4 (o 2 + 2 con el texto ampliado) */
    .mgui-v3-planes-pagina .mgui-grid[data-mg-componente="planes-sitio"] { --mgui-grid-columnas: repeat(auto-fit, minmax(max(12rem, 30%), 1fr)); }
    .mgui-v3-planes-pagina .mgui-grid[data-mg-planes="4"] { --mgui-grid-columnas: repeat(auto-fit, minmax(max(12rem, 22%), 1fr)); }
  }
  @media (min-width: 1280px) {
    /* Cinco en una fila con texto normal; el mínimo en rem las reparte en 3 + 2 con el texto al 200 %. */
    .mgui-v3-planes-pagina .mgui-grid[data-mg-planes="5"] { --mgui-grid-columnas: repeat(auto-fit, minmax(max(11rem, 18%), 1fr)); }
  }
  .mgui-v3-ficha {
    gap: var(--mg-space-3);
    padding: var(--mg-space-6);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-v3-ficha--destacada { border: 2px solid var(--mg-color-accion); box-shadow: var(--mg-elevation-3); }
  .mgui-v3-ficha .mgui-card__title { font-family: var(--mg-font-heading); font-size: var(--mg-type-lg); }
  .mgui-v3-ficha > .mgui-v3__chip { align-self: flex-start; }
  .mgui-v3-ficha__precio strong,
  .mgui-v3-ficha__precio .mgui-amount { color: var(--mg-color-texto); font-family: var(--mg-font-heading); font-size: var(--mg-type-xl); font-weight: var(--mg-weight-bold); letter-spacing: -.02em; }
  .mgui-v3-ficha dl { font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); }
  .mgui-v3-ficha [data-mg-accion="plan"] .mgui-btn--primary { inline-size: 100%; justify-content: center; }
  @media (prefers-reduced-motion: reduce) {
    .mgui-v3-area { transition: none; }
    .mgui-v3-area:hover { transform: none; }
  }

  /* ── Sprite de íconos (un símbolo por ícono usado) y desglose de precios de la portada ── */
  .mgui-v3__sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  .mgui-v3-plan__bloque { display: flex; flex-direction: column; gap: var(--mg-space-1); }
  .mgui-v3-plan__desglose,
  .mgui-v3-plan__legal { color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-xs); }
  .mgui-v3-plan__desglose dl { display: flex; flex-direction: column; gap: 0; margin: 0; padding-block-start: var(--mg-space-1); border-block-start: 1px solid var(--mg-color-borde); }
  .mgui-v3-plan__desglose dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mg-space-1); }
  .mgui-v3-plan__desglose :is(dt, dd) { margin: 0; }
  .mgui-v3-plan__desglose .mgui-amount { font-size: inherit; }
  .mgui-v3__enlaces { display: flex; flex-wrap: wrap; gap: var(--mg-space-1) var(--mg-space-4); }
  .mgui-v3-cierre .mgui-v3__mas { color: var(--mg-color-sobre-marca-profunda); }
  .mgui-v3-cierre .mgui-btn--primary { justify-self: start; border-color: var(--mg-color-superficie); color: var(--mg-color-texto); background: var(--mg-color-superficie); }
  .mgui-v3-cierre .mgui-btn--primary:hover { color: var(--mg-color-texto); background: var(--mg-color-accion-suave); }
  .mgui-v3-ficha [data-precio] { gap: var(--mg-space-1); }
  .mgui-v3-ficha [data-precio] > p:not(.mgui-v3-ficha__precio),
  .mgui-v3-ficha [data-precio] dl { margin: 0; color: var(--mg-color-texto-atenuado); font-size: var(--mg-type-xs); }
  .mgui-v3-ficha [data-precio] dl > div { gap: var(--mg-space-1); }
  @media not all and (min-width: 480px) {
    .mgui-publica .mgui-publica__herramientas > .mgui-btn--primary { padding-inline: var(--mg-space-3); font-size: var(--mg-type-xs); }
  }

  /* SITIO3B-01: texto legible también en precios, condiciones y superficies suaves. */
  :is(.mgui-v3, .mgui-v3-planes-pagina) {
    --mg-color-texto-atenuado: var(--mg-color-texto);
  }

  /* Reserva compartida y flujo normal, exclusivamente en portada y planes V3. */
  html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)) {
    --mgui-franja-alto: 10rem;
    scroll-padding-block-end: calc(var(--mgui-franja-alto) + env(safe-area-inset-bottom, 0px));
  }
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) {
    --mgui-franja-alto: inherit;
  }
  html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)) .mgui-publica__contenido {
    display: flow-root;
    min-inline-size: 0;
  }
  html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)) .mgui-publica__pie {
    padding-block-end: calc(var(--mg-space-8) + var(--mgui-franja-alto) + env(safe-area-inset-bottom, 0px));
    overflow-wrap: anywhere;
  }
  /* La marca del pie también debe admitir texto ampliado sin ensanchar la página. */
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__pie .mgui-marca {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__pie .mgui-marca__nombre {
    min-inline-size: 0;
    white-space: normal;
  }
  /* Los importes de ejemplo se ajustan a su celda, conservando todas sus cifras. */
  .mgui-v3 .mgui-v3-demo__kpi strong,
  .mgui-v3 .mgui-v3-demo__margen strong,
  .mgui-v3 .mgui-v3-demo__tabla td:last-child {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* El mínimo de producto se conserva también con teclado y puntero fino. */
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) :is(
    .mgui-saltar,
    .mgui-publica__inicio,
    .mgui-publica__contenido a,
    .mgui-publica__pie a,
    .mgui-publica__nav a,
    [popover] a,
    label[for]:not(.mgui-publica__abrir)
  ) {
    display: inline-flex;
    align-items: center;
    min-inline-size: var(--mg-control-min);
    min-block-size: var(--mg-control-min);
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* El rótulo «Menú» no entra en la regla anterior: su `display` (publica.css) lo oculta desde 768 px, donde el
     cajón sin JS no existe. Antes `label[for]` lo mostraba siempre y quedaba un control visible sin función. En
     teléfono conserva el mínimo de producto y el texto ampliado. */
  @media not all and (min-width: 768px) {
    .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__abrir {
      min-inline-size: var(--mg-control-min);
      min-block-size: var(--mg-control-min);
      max-inline-size: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }
  /* El salto reserva su propia fila al recibir foco y admite texto ampliado. */
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) > .mgui-saltar {
    max-inline-size: calc(100% - 2 * var(--mg-space-2));
  }
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) > .mgui-saltar:focus {
    position: static;
    align-self: flex-start;
    margin: var(--mg-space-2);
  }
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__contenido :is(
    button, select, textarea, input:not([type="radio"], [type="checkbox"], [type="hidden"]), summary
  ) {
    min-inline-size: var(--mg-control-min);
    min-block-size: var(--mg-control-min);
  }
  .mgui-v3-periodos__selector > input:focus-visible + label {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) [data-mg-derechos="pie"] a:focus-visible {
    outline-offset: calc(-1 * var(--mg-focus-ring-width));
  }
  /* El foco del idioma queda dentro de la opción, separado de su borde de selección.
     Así no lo recorta el popover ni se confunde con la marca del idioma actual. */
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) :is(
    .mgui-publica__encabezado, .mgui-publica__pie
  ) [role="group"] a:focus-visible {
    outline-width: var(--mg-focus-ring-width);
    outline-offset: calc(-1 * (var(--mg-focus-ring-width) + var(--mg-space-1)));
  }
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__pie [role="group"] :is(
    [aria-current="true"], a:hover
  ):focus-visible {
    outline-color: var(--mg-color-foco);
  }

  @media not all and (min-width: 768px) {
    html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)) {
      scroll-padding-block-start: 14rem;
    }
    html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)) .mgui-publica :is(
      a, button, input, select, summary, [tabindex]
    ) {
      scroll-margin-block-start: var(--mg-space-4);
      /* sitio-v2.css reserva 10rem de margen inferior en CADA enlace además del relleno de la raíz: con texto al
         200 % sumaban 640 px y un enlace alto (el de Defensa del Consumidor, 294 px) no cabía: quedaba cortado
         arriba. La franja ya se reserva una sola vez, en scroll-padding-block-end. */
      scroll-margin-block-end: var(--mg-space-4);
    }
    html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)):has(.mgui-publica__interruptor:checked) {
      scroll-padding-block-start: var(--mg-space-4);
    }
    html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)):has(.mgui-publica__interruptor:checked) .mgui-publica__encabezado {
      position: static;
    }
    /* Texto ampliado (raíz > 125 %): con el encabezado en varias filas, un encabezado pegado tapa el foco y el
       contenido (WCAG 1.4.10, 2.4.7). --mgui-texto-ampliado vale 0 o 1px: un «interruptor» sin JavaScript ni
       consulta de medios, porque estas no ven el tamaño de letra del documento. El encabezado conserva sticky, pero
       con un desplazamiento negativo inalcanzable (-9999999px: se comporta como estático), y el relleno de
       desplazamiento deja de reservar su alto. */
    html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)) {
      --mgui-texto-ampliado: clamp(0px, (1rem - 20px) * 9999, 1px);
    }
    .mgui-publica:not(.mgui-publica--flujo) > .mgui-publica__encabezado {
      inset-block-start: calc(-9999999 * var(--mgui-texto-ampliado, 0px));
    }
    html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)) {
      scroll-padding-block-start: max(var(--mg-space-4), calc(14rem - 9999 * var(--mgui-texto-ampliado, 0px)));
    }
  }
  @media print {
    html:has(.mgui-publica .mgui-publica__contenido > :is(.mgui-v3, .mgui-v3-planes-pagina)) .mgui-publica__pie {
      padding-block-end: var(--mg-space-8);
    }
  }

  /* Rescate selectivo de la fila envolvente: vence al display: contents móvil heredado. */
  @media not all and (min-width: 768px) {
    .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__barra {
      display: flex;
      flex-wrap: wrap;
    }
    .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__inicio {
      flex: 1 1 100%;
      min-inline-size: 0;
      max-inline-size: 100%;
    }
    .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__herramientas {
      display: flex;
      flex: 1 1 100%;
      flex-wrap: wrap;
      justify-content: flex-start;
      min-inline-size: 0;
      max-inline-size: 100%;
      margin-inline-start: 0;
    }
    .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-publica__herramientas > .mgui-btn {
      min-inline-size: 0;
      max-inline-size: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    /* Llamados dentro de tarjetas (prueba gratis): con texto al 200 % el relleno lateral de la tarjeta (space-6) más el
       del botón (space-6) dejaba ~60 px al rótulo («Teste grátis por 15 dias» a 320 px medía 672 px de alto y no
       cabía en la ventana). Relleno menor y el botón ocupa el ancho útil. */
    .mgui-v3-prueba { padding: var(--mg-space-4); }
    .mgui-v3-prueba .mgui-v3__cta { align-self: stretch; padding-inline: var(--mg-space-3); text-align: center; }
  }

  /* SITIO3B-01: contraste del foco medido de verdad. */
  /* El anillo de foco de los campos va separado del borde: pegado (offset 0) se mezclaba con el borde azul del propio
     campo en las esquinas redondeadas y el indicador medía 2,4:1 (menos de 3:1). */
  .mgui-publica:has(.mgui-v3, .mgui-v3-planes-pagina) .mgui-field__control:focus-visible {
    outline-offset: var(--mg-focus-ring-offset);
  }

  /* ── SITIO3B-02: composición de Imagen3, acotada a la portada y a /planes ── */
  /* La cruz de «Antes»: dos trazos del color de peligro, girados (sin SVG por renglón). */
  .mgui-v3__checks--cruz > li:not(:has(> svg))::before {
    inline-size: .7rem;
    block-size: .7rem;
    margin-block: .3rem 0;
    border: 0;
    background:
      linear-gradient(var(--mg-status-danger-texto) 0 0) center / 100% .12rem no-repeat,
      linear-gradient(var(--mg-status-danger-texto) 0 0) center / .12rem 100% no-repeat;
    transform: rotate(45deg);
  }
  /* La flecha de los llamados principales y de los enlaces «Ver…»: un trazo de la hoja, no un SVG por enlace. Un enlace
     que trae su propio ícono (la charla de «Escribinos») no la recibe. */
  .mgui-v3__mas:not(:has(> svg))::after,
  .mgui-v3__cta.mgui-btn--primary:not(:has(> svg))::after {
    content: "";
    flex-shrink: 0;
    inline-size: .45em;
    block-size: .45em;
    margin-inline: .1em .2em;
    border-block-start: .14em solid currentColor;
    border-inline-end: .14em solid currentColor;
    transform: rotate(45deg);
  }
  /* Tarjetas de una misma fila con el llamado al pie: lo que cambia entre planes queda arriba. En las fichas de
     /planes las acciones van antes del alcance (V2-11): se empuja al pie el tramo acciones + alcance plegado + detalle,
     que mide lo mismo en todas las fichas, y los llamados quedan alineados. */
  .mgui-v3-plan .mgui-v3__checks { flex: none; }
  .mgui-v3-plan__accion { margin-block-start: auto; }
  .mgui-v3-planes-pagina .mgui-v3-ficha > [data-mg-accion="plan"] { margin-block-start: auto; }
  @media (min-width: 768px) {
    /* Cinco o seis tarjetas en filas parejas (3 + 2, 3 + 3) en lugar de una tarjeta suelta. Las fichas de /planes
       siguen la utilidad compartida `.mgui-grid` (capa mg.utilities: vence a esta capa y la comparten App y Control). */
    .mgui-v3-planes--cinco,
    .mgui-v3-planes[data-mg-planes-v3="6"] { grid-template-columns: repeat(auto-fit, minmax(max(12rem, 30%), 1fr)); }
  }
  @media (min-width: 1024px) {
    /* Los cuatro pasos en fila con texto normal; con el texto ampliado el mínimo en rem los pasa a dos por fila. */
    .mgui-v3-pasos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
  }
  @media (min-width: 1280px) {
    /* Cinco por fila con texto normal (18 % de mínimo: nunca seis); con el texto ampliado, el mínimo en rem baja a tres. */
    .mgui-v3-planes--cinco { grid-template-columns: repeat(auto-fit, minmax(max(10rem, 18%), 1fr)); }
    /* Antes/después, integraciones y sincronización en una sola fila. */
    .mgui-v3-tres { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--mg-space-6); }
    .mgui-v3-sincro { grid-column: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; }
    .mgui-v3-sincro .mgui-v3__checks { flex-direction: column; }
    /* Con cuatro planes, la prueba acompaña a la oferta al costado; con cinco o seis, queda en la franja de abajo. */
    .mgui-v3-oferta:has([data-mg-planes-v3="4"]) {
      grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
      align-items: start;
    }
    /* Cuatro por fila con texto normal; el mínimo en rem las apila cuando el texto está ampliado. */
    .mgui-v3-oferta:has([data-mg-planes-v3="4"]) .mgui-v3-planes {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
      gap: var(--mg-space-3);
    }
    .mgui-v3-oferta:has([data-mg-planes-v3="4"]) .mgui-v3-plan { padding: var(--mg-space-4); }
    /* En las filas compactas (cuatro con la prueba al costado, cinco por fila) el importe entra en un renglón. */
    :is(.mgui-v3-oferta:has([data-mg-planes-v3="4"]), .mgui-v3-planes--cinco) .mgui-v3-plan__precio :is(strong, .mgui-amount) {
      font-size: var(--mg-type-lg);
    }
    .mgui-v3-oferta:has([data-mg-planes-v3="4"]) .mgui-v3-prueba {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--mg-space-4);
    }
    .mgui-v3-oferta:has([data-mg-planes-v3="4"]) .mgui-v3-prueba > * { flex: none; margin-inline-start: 0; }
    .mgui-v3-oferta:has([data-mg-planes-v3="4"]) .mgui-v3-prueba .mgui-v3__icono--burbuja { align-self: flex-start; }
    .mgui-v3-oferta:has([data-mg-planes-v3="4"]) .mgui-v3-prueba > .mgui-v3__cta { padding-inline: var(--mg-space-4); }
  }
  /* Texto ampliado (WCAG 1.4.4): las piezas con ícono al costado pasan el texto debajo cuando no le quedan ~9 rem, y las
     listas de integraciones usan columnas con mínimo en rem. Sin esto, a 320 px con el texto al 200 % el texto de cada
     área o paso quedaba en una columna de 2 a 4 letras. */
  @media not all and (min-width: 1024px) {
    .mgui-v3-paso { flex-wrap: wrap; }
    .mgui-v3-paso > div { flex: 1 1 9rem; min-inline-size: 0; }
  }
  .mgui-v3-integraciones__lista { grid-template-columns: repeat(auto-fill, minmax(max(8rem, 45%), 1fr)); }
  @media (min-width: 768px) {
    .mgui-v3-integraciones__lista { grid-template-columns: repeat(auto-fill, minmax(max(8rem, 30%), 1fr)); }
  }
  @media (min-width: 1024px) {
    .mgui-v3-integraciones__lista { grid-template-columns: repeat(auto-fill, minmax(max(8rem, 45%), 1fr)); }
  }
  @media not all and (min-width: 480px) {
    .mgui-v3-area { display: flex; flex-flow: row wrap; align-items: center; column-gap: var(--mg-space-4); }
    .mgui-v3-area > h3 { flex: 1 1 8rem; min-inline-size: 0; }
    .mgui-v3-area > :not(svg, h3) { flex: 1 1 100%; }
    .mgui-v3-proceso__principal,
    .mgui-v3-proceso__lado,
    .mgui-v3-sincro,
    .mgui-v3-paquetes { padding: var(--mg-space-4); }
  }
  /* La ilustración es UNA imagen (role="img", interior decorativo): su texto se dibuja como parte del dibujo y no
     crece con el texto ampliado del documento —a 320 px con el texto al 200 % los indicadores quedaban de dos letras
     de ancho—. Con el tamaño normal mide lo mismo que antes (12 px en el teléfono, 11,2 px en escritorio). */
  .mgui-v3-demo__escena { font-size: max(min(.75rem, 3.75vw), .5rem); }
  .mgui-v3-demo__celular { font-size: max(min(.875rem, 4.375vw), .5625rem); }
  @media (min-width: 1024px) {
    .mgui-v3-demo__escena { font-size: max(min(.7rem, 1.1vw), .45rem); }
    .mgui-v3-demo__celular { font-size: max(min(.75rem, 1.18vw), .5rem); }
  }

  /* ── web/r3/fuente/step-badge.css ── */
  /*
   * Insignia de paso. Un círculo de 2 rem con el número (o un check cuando el paso ya cerró).
   * Usada por `mgui-progress-stepper` y por listas de pasos en formularios largos.
   *
   * Estados (data-attr o modificador BEM):
   *   --pendiente     tinte suave con texto tenue; el paso aún no se tocó
   *   --en-progreso   fondo sólido de acción con texto blanco encima; el paso actual
   *   --completo      fondo sólido de complete y check SVG dentro (del lado del markup)
   *
   * El tamaño es rem (2 rem = 32 px con la raíz en 16 px), así que escala con el usuario y con el
   * selector `data-mg-escala`.
   */
  .mgui-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-texto-tenue);
    font-family: var(--mg-font-ui);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    user-select: none;
    flex: none;
  }
  .mgui-step-badge__svg { inline-size: 1rem; block-size: 1rem; stroke-width: 2.5; }
  .mgui-step-badge--pendiente {
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-texto-tenue);
  }
  .mgui-step-badge--en-progreso {
    background: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
  }
  .mgui-step-badge--completo {
    background: var(--mg-status-complete-solido);
    color: var(--mg-color-sobre-solido);
  }
  /* El número del paso se oculta cuando el paso cerró: el markup pone el check al lado. */
  .mgui-step-badge--completo .mgui-step-badge__num { display: none; }
  .mgui-step-badge--completo .mgui-step-badge__svg { display: inline-block; }
  .mgui-step-badge__num { display: inline-block; }
  .mgui-step-badge:not(.mgui-step-badge--completo) .mgui-step-badge__svg { display: none; }

  /* ── web/r3/fuente/stock.css ── */
  /*
   * productos · B (prod-stock) · el stock R3 «como Valkyrie» (`server/src/web/r3-stock.ts` + `web/r3/stock/stock.js`): las
   * posiciones por estado y depósito, el kardex con sus lotes, los formularios de ajuste / cambio de estado / baja / traslado,
   * el inventario por depósito y los depósitos como tarjetas. Compone sobre las piezas de siempre (tarjeta, tabla, campo, kpi,
   * chip, filtros, tabla-orden): acá sólo lo que esas piezas no traen. Sólo tokens: ningún color ni medida inventados.
   */
  .mgui-stock { min-inline-size: 0; }

  /* Lo que quedó en negativo se ve como lo que es: hay que cargar la entrada que falta. */
  .mgui-stock__negativo { color: var(--mg-status-danger-texto); font-weight: var(--mg-weight-semibold); }

  /* Las acciones de la pantalla: las que cambian el stock y, aparte, los enlaces a lo relacionado. */
  .mgui-stock__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2) var(--mg-space-4);
    min-inline-size: 0;
  }

  /* Los KPI de la cabecera (VK `ProductoDetalle.jsx`): una fila elástica donde las cards de datos cortos ceden ancho a las de importes largos sin desbordar. */
  .mgui-stock__kpis {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--mg-space-3);
    min-inline-size: 0;
  }
  .mgui-stock__kpi {
    flex: 1 1 auto;
    min-inline-size: min(8.5rem, 100%);
    padding: var(--mg-space-3) var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  /* Un importe largo («$ 3.171.003,00») toma el ancho disponible de las cards vecinas y no se parte salvo en contenedor muy angosto. */
  .mgui-stock__kpi .mgui-kpi__value { white-space: nowrap; }
  @container (max-width: 12rem) {
    .mgui-stock__kpi .mgui-kpi__value { font-size: var(--mg-type-xl); white-space: normal; overflow-wrap: anywhere; }
  }

  /* Las tablas anchas (cinco estados, el kardex) se desplazan dentro de su caja en el escritorio; en el teléfono son fichas. */
  .mgui-stock__tabla { min-inline-size: 0; }
  /*
   * La caja de la tabla es el bloque contenedor de lo que va posicionado adentro (los rótulos para el lector de los encabezados que
   * ordenan, el «Más acciones» de cada fila): si no, quedan fuera del desplazamiento de la tabla y estiran la página a lo ancho.
   */
  .mgui-stock .mgui-table-wrap { position: relative; }
  .mgui-stock__tabla .mgui-table-wrap { margin-bottom: 0; }

  /* Dos o tres campos lado a lado en el escritorio; uno debajo del otro cuando no entran. */
  .mgui-stock__fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--mg-space-3);
    align-items: start;
    min-inline-size: 0;
  }
  .mgui-stock__formulario { max-inline-size: none; }

  /* Un formulario GET en línea (el buscador del inventario, los filtros del kardex): los campos alineados por arriba (`flex-start`)
   * y el botón a la altura de los inputs (`1.75rem + var(--mg-space-1)`). */
  .mgui-stock__buscar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mg-space-3);
    min-inline-size: 0;
  }
  .mgui-stock__buscar > .mgui-field { flex: 1 1 12rem; min-inline-size: 0; margin-bottom: 0; }
  .mgui-stock__buscar > .mgui-btn {
    flex: none;
    margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }
  @media not all and (min-width: 481px) {
    .mgui-stock__buscar > .mgui-btn { margin-block-start: 0; }
  }

  .mgui-stock__titulo {
    margin: 0;
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-lg);
    font-weight: var(--mg-weight-semibold);
  }

  /* Los datos de una tarjeta (un depósito, un lote): rótulo y valor, en una grilla que se acomoda al ancho. */
  .mgui-stock__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--mg-space-2) var(--mg-space-4);
    margin: 0 0 var(--mg-space-3);
  }
  .mgui-stock__datos > div { min-inline-size: 0; }
  .mgui-stock__datos dt {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto-atenuado);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .mgui-stock__datos dd { margin: 0; overflow-wrap: anywhere; }
  .mgui-stock__notas { white-space: pre-line; }

  /* El lote de un movimiento del kardex: número · vencimiento, sin partirse a la mitad. */
  .mgui-stock__lote { white-space: nowrap; }

  /* Los depósitos como tarjetas (VK `Depositos.jsx`): la grilla de siempre, cada tarjeta a su altura. */
  .mgui-stock__depositos { align-items: start; }
  .mgui-stock__depositos > .mgui-card { margin-bottom: 0; min-inline-size: 0; }

  /*
   * El guion de los formularios muestra sólo lo que corresponde al sentido elegido (el costo de una suma, el estado de una
   * resta). Sin guion se ve todo (y el servidor valida): `hidden` lo pone el guion, que es quien sabe qué está elegido.
   */
  .mgui-stock [data-mg-stock-solo][hidden],
  .mgui-stock [data-mg-stock-ayuda-sentido][hidden] { display: none; }

  /* ── web/r3/fuente/tabla-orden.css ── */
  /*
   * Z-R · P2-10 · la tabla con orden de varios niveles y totales (`ui/tabla-ordenable.ts`; Valkyrie ColumnaOrdenable +
   * PilaDeOrden): el número de nivel junto a la flecha, la pila «Ordenado por» y el pie con los totales.
   */
  .mgui-tabla-orden { min-inline-size: 0; }
  .mgui-tabla-orden__cabecera { display: inline-flex; align-items: center; gap: var(--mg-space-1); }
  .mgui-tabla-orden__cabecera .mgui-ico { color: var(--mg-color-texto-atenuado); }
  .mgui-tabla-orden__cabecera.is-activo .mgui-ico { color: var(--mg-color-enlace); }
  .mgui-tabla-orden__cabecera.is-lleno { cursor: not-allowed; }
  .mgui-tabla-orden__nivel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.125rem;
    block-size: 1.125rem;
    padding-inline: .25rem;
    border-radius: 999px;
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    font-variant-numeric: tabular-nums;
  }
  .mgui-tabla-orden__pila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0; }
  .mgui-tabla-orden__chip { text-decoration: none; }
  .mgui-tabla-orden__chip:hover { border-color: var(--mg-color-enlace); color: var(--mg-color-enlace); }
  .mgui-tabla-orden__pie .mgui-table__cell { font-weight: var(--mg-weight-semibold); border-block-start: 2px solid var(--mg-color-borde); }
  /* En el teléfono la tabla son fichas sin encabezado: el orden se elige con estos enlaces (complemento exacto de 768 px). */
  .mgui-tabla-orden__movil { display: none; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0; }
  @media not all and (min-width: 768px) {
    .mgui-tabla-orden__movil { display: flex; }
  }

  /* ── web/r3/fuente/tabla.css ── */
  /* Tabla: aria-sort en el encabezado, números tabulares, fichas con data-etiqueta en el teléfono. */
  .mgui-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-table { width: 100%; border-collapse: collapse; font-size: var(--mg-type-sm); }
  .mgui-table__caption {
    padding: var(--mg-space-3) var(--mg-space-4);
    text-align: left;
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
  }
  .mgui-table__head-cell {
    padding: var(--mg-space-2) var(--mg-space-4);
    border-bottom: 1px solid var(--mg-color-borde);
    text-align: left;
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mg-color-texto-atenuado);
    white-space: nowrap;
  }
  .mgui-table__cell { padding: var(--mg-space-3) var(--mg-space-4); border-bottom: 1px solid var(--mg-color-borde); vertical-align: top; }
  /* La titular es el encabezado de su fila (`<th scope="row">`): sin el centrado ni la negrita del navegador. */
  .mgui-table__cell--titular { text-align: left; font-weight: var(--mg-weight-normal); }
  .mgui-table__cell--num,
  .mgui-table__head-cell--num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mgui-col-acciones-derecha { text-align: right; white-space: nowrap; }
  .mgui-acciones-derecha { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mg-space-1); }
  .mgui-miniatura-producto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
    border: 1px solid var(--mg-color-borde-suave);
    overflow: hidden;
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-miniatura-producto__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Miniatura cuadrada reutilizable de producto (primera columna en tablas de productos, canales y ventas). */
  .mgui-col-foto { width: 3rem; text-align: center; vertical-align: middle; }
  .mgui-prod-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
    border: 1px solid var(--mg-color-borde-suave);
    overflow: hidden;
    flex-shrink: 0;
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-prod-thumb--icono {
    background: color-mix(in srgb, var(--mg-color-fondo) 85%, var(--mg-color-borde-suave));
  }
  .mgui-prod-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mgui-prod-thumb__svg { width: 1.25rem; height: 1.25rem; display: block; color: var(--mg-color-texto-atenuado); }
  /* Ícono B → A (refacturación de comprobante B a Factura A) y encabezado del trámite. */
  .mgui-icono-b-a { display: inline-block; vertical-align: middle; flex-shrink: 0; }
  .mgui-refacturar-encabezado { display: flex; align-items: center; gap: var(--mg-space-3); }
  .mgui-refacturar-encabezado__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-accion-suave);
    border: 1px solid var(--mg-color-borde-suave);
    flex-shrink: 0;
  }
  /* Menú contextual SSR de acciones de venta (⋮ en la última columna derecha). */
  .mgui-venta-acciones { position: relative; display: inline-block; text-align: left; }
  .mgui-venta-acciones__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .mgui-venta-acciones__boton::-webkit-details-marker { display: none; }
  .mgui-venta-acciones__boton:hover {
    background: var(--mg-color-accion-suave);
    border-color: var(--mg-color-accion);
    color: var(--mg-color-enlace);
  }
  .mgui-venta-acciones__boton:focus-visible {
    outline: var(--mg-focus-ring-width) solid var(--mg-color-foco);
    outline-offset: var(--mg-focus-ring-offset);
  }
  .mgui-venta-acciones__icono-puntos { display: block; flex-shrink: 0; }
  .mgui-venta-acciones__popup {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + var(--mg-space-1));
    z-index: var(--mg-layer-panel);
    min-width: 17.5rem;
    max-width: 22rem;
    padding: var(--mg-space-1);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mgui-venta-acciones__item {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    padding: var(--mg-space-2) var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-medium);
    text-decoration: none;
    white-space: normal;
    line-height: var(--mg-leading-ajustado);
  }
  .mgui-venta-acciones__item:hover {
    background: var(--mg-color-fondo);
    color: var(--mg-color-enlace);
    text-decoration: none;
  }
  .mgui-venta-acciones__item--primario {
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-enlace);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-venta-acciones__item--primario:hover {
    background: color-mix(in srgb, var(--mg-color-accion-suave) 75%, var(--mg-color-accion));
    color: var(--mg-color-enlace);
  }
  .mgui-venta-acciones__item--refacturar {
    background: color-mix(in srgb, var(--mg-status-danger-suave) 45%, var(--mg-color-accion-suave));
    border: 1px solid var(--mg-color-borde-suave);
    font-weight: var(--mg-weight-semibold);
  }
  .mgui-venta-acciones__item--refacturar:hover {
    background: color-mix(in srgb, var(--mg-status-danger-suave) 60%, var(--mg-color-accion-suave));
  }
  .mgui-venta-acciones__item--detalle {
    border-top: 1px solid var(--mg-color-borde-suave);
    margin-top: 2px;
    padding-top: var(--mg-space-2);
    color: var(--mg-color-texto-atenuado);
  }
  .mgui-venta-acciones__item-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--mg-color-enlace);
  }
  .mgui-venta-acciones__item-texto { flex: 1; min-width: 0; }
  .mgui-table__sort { color: inherit; text-decoration: none; }
  .mgui-table__sort:hover { color: var(--mg-color-enlace); text-decoration: underline; }
  .mgui-table__sort-icon { color: var(--mg-color-texto-atenuado); }
  .mgui-table__head-cell[aria-sort="ascending"],
  .mgui-table__head-cell[aria-sort="descending"] { color: var(--mg-color-texto); }
  /* Complemento exacto del escritorio (sin la banda 767–768 px de `max-width: 767px`). */
  @media not all and (min-width: 768px) {
    .mgui-table--fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .mgui-table--fichas,
    .mgui-table--fichas tbody,
    .mgui-table--fichas tr,
    .mgui-table--fichas .mgui-table__cell { display: block; }
    .mgui-table--fichas tr { padding: var(--mg-space-2) 0; border-bottom: 1px solid var(--mg-color-borde); }
    .mgui-table--fichas .mgui-table__cell { display: flex; justify-content: space-between; gap: var(--mg-space-3); padding: var(--mg-space-1) var(--mg-space-4); border-bottom: 0; text-align: right; }
    .mgui-table--fichas .mgui-table__cell::before {
      content: attr(data-etiqueta);
      text-align: left;
      font-weight: var(--mg-weight-semibold);
      color: var(--mg-color-texto-atenuado);
    }
    .mgui-table--fichas .mgui-table__cell--titular { font-weight: var(--mg-weight-semibold); text-align: left; }
    .mgui-table--fichas .mgui-table__cell--titular::before { content: none; }
  }

  /* ── web/r3/fuente/tarjeta.css ── */
  /*
   * Tarjeta. Elevation base (`--mg-elevation-1`) + borde con cuerpo (`--mg-color-borde`, ≥ 3:1
   * sobre superficie): la tarjeta se despega del fondo sin pelearse con el peso del borde. Las
   * sub-partes (__header, __body, __footer) traen el padding; el root sólo trae caja.
   */
  .mgui-card {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-card__header { padding: var(--mg-space-4) var(--mg-space-4) 0; }
  .mgui-card__title { margin: 0; font-size: var(--mg-type-lg); }
  .mgui-card__body { padding: var(--mg-space-4); }
  .mgui-card__body > :last-child { margin-bottom: 0; }
  .mgui-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3) var(--mg-space-4);
    border-top: 1px solid var(--mg-color-borde);
  }

  /*
   * Ola 1 · variantes de énfasis (inspiradas en Valkyrie VhCard; mantienen la identidad R3).
   *
   *   --raised   subida de un escalón (elevation-2): paneles de resumen, "destacado"
   *   --sunken   fondo hundido, sin sombra ni acento: zonas de lectura dentro de otra tarjeta
   *   --flush    sin padding en las sub-partes: cuando el contenido ya trae su caja (ej. tabla)
   *   --stack    los hijos directos del __body se apilan con gap uniforme (atajo de layout)
   *   --accent-* una franja de 4 px a la izquierda con el borde de la familia (ESTADO, nunca dinero)
   *
   * Los `--acento-*` en castellano (abajo) quedan como alias legado de los `--accent-*`.
   */
  .mgui-card--raised { box-shadow: var(--mg-elevation-2); }
  .mgui-card--sunken { background: var(--mg-color-fondo); box-shadow: none; }
  .mgui-card--flush > .mgui-card__header,
  .mgui-card--flush > .mgui-card__body,
  .mgui-card--flush > .mgui-card__footer { padding: 0; }
  .mgui-card--stack > .mgui-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
  }
  .mgui-card--accent-brand { border-inline-start: 4px solid var(--mg-brand-blue-borde); }
  .mgui-card--accent-success { border-inline-start: 4px solid var(--mg-status-complete-borde); }
  .mgui-card--accent-warning { border-inline-start: 4px solid var(--mg-status-warning-borde); }
  .mgui-card--accent-danger { border-inline-start: 4px solid var(--mg-status-danger-borde); }
  .mgui-card--accent-info { border-inline-start: 4px solid var(--mg-status-info-borde); }

  /* F-VC · la franja de acento (Valkyrie `VhCard accent` / `.mg-card--accent-*`): un estado, nunca dinero. */
  .mgui-card--acento-info { border-inline-start: 4px solid var(--mg-status-info-borde); }
  .mgui-card--acento-complete { border-inline-start: 4px solid var(--mg-status-complete-borde); }
  .mgui-card--acento-warning { border-inline-start: 4px solid var(--mg-status-warning-borde); }
  .mgui-card--acento-danger { border-inline-start: 4px solid var(--mg-status-danger-borde); }

  /* Tono semántico contextual en tarjetas sin foto de fondo (según urgencia/prioridad, preservando el efecto vidrio en temas cristal-*). */
  .mgui-card--tono-info,
  .mgui-card[data-mg-card-tono="info"] {
    border-inline-start: 4px solid var(--mg-status-info-borde);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--mg-status-info-suave) 36%, var(--mg-color-superficie)), var(--mg-color-superficie));
  }
  .mgui-card--tono-complete,
  .mgui-card[data-mg-card-tono="complete"] {
    border-inline-start: 4px solid var(--mg-status-complete-borde);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--mg-status-complete-suave) 36%, var(--mg-color-superficie)), var(--mg-color-superficie));
  }
  .mgui-card--tono-warning,
  .mgui-card[data-mg-card-tono="warning"] {
    border-inline-start: 4px solid var(--mg-status-warning-borde);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--mg-status-warning-suave) 40%, var(--mg-color-superficie)), var(--mg-color-superficie));
  }
  .mgui-card--tono-danger,
  .mgui-card[data-mg-card-tono="danger"] {
    border-inline-start: 4px solid var(--mg-status-danger-borde);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--mg-status-danger-suave) 42%, var(--mg-color-superficie)), var(--mg-color-superficie));
  }
  [data-mg-tema^="cristal-"] .mgui-card--tono-info,
  [data-mg-tema^="cristal-"] .mgui-card[data-mg-card-tono="info"] {
    background-image: linear-gradient(var(--mg-vidrio-luz-angulo), color-mix(in srgb, var(--mg-status-info-suave) 28%, var(--mg-vidrio-canto-suave)), var(--mg-vidrio-fondo-base));
  }
  [data-mg-tema^="cristal-"] .mgui-card--tono-complete,
  [data-mg-tema^="cristal-"] .mgui-card[data-mg-card-tono="complete"] {
    background-image: linear-gradient(var(--mg-vidrio-luz-angulo), color-mix(in srgb, var(--mg-status-complete-suave) 28%, var(--mg-vidrio-canto-suave)), var(--mg-vidrio-fondo-base));
  }
  [data-mg-tema^="cristal-"] .mgui-card--tono-warning,
  [data-mg-tema^="cristal-"] .mgui-card[data-mg-card-tono="warning"] {
    background-image: linear-gradient(var(--mg-vidrio-luz-angulo), color-mix(in srgb, var(--mg-status-warning-suave) 32%, var(--mg-vidrio-canto-suave)), var(--mg-vidrio-fondo-base));
  }
  [data-mg-tema^="cristal-"] .mgui-card--tono-danger,
  [data-mg-tema^="cristal-"] .mgui-card[data-mg-card-tono="danger"] {
    background-image: linear-gradient(var(--mg-vidrio-luz-angulo), color-mix(in srgb, var(--mg-status-danger-suave) 34%, var(--mg-vidrio-canto-suave)), var(--mg-vidrio-fondo-base));
  }

  /* Tarjeta desplegable (`<details class="mgui-card">`): padding simétrico en el encabezado `<summary>` y en el cuerpo desplegado. */
  details.mgui-card > summary.mgui-card__title {
    padding: var(--mg-space-4);
    cursor: pointer;
    list-style-position: inside;
    font-weight: var(--mg-weight-semibold);
  }
  details.mgui-card[open] > summary.mgui-card__title {
    border-block-end: 1px solid var(--mg-color-borde);
  }
  details.mgui-card > :not(summary):not(.mgui-card__header):not(.mgui-card__body):not(.mgui-card__footer) {
    padding: var(--mg-space-4);
  }

  /* ── web/r3/fuente/tonal.css ── */
  /*
   * mgui · TONAL — la familia «Color organizado y claro» (TEMAS-ADICIONALES del paquete Cristales V3, segunda prioridad):
   * `tonal-claro` y `tonal-profundo`. El selector `[data-mg-tema^="tonal-"]` acota TODAS las reglas: en otro tema este archivo
   * no pinta nada. Los valores salen de los tokens --mg-tonal-* que emite `core/familias.js` por tema (cada contenedor con el
   * texto que se lee sobre él, medido ≥ 4,5:1).
   *
   * Inspiración: el sistema de color de Material y sus parejas contenedor/contenido. Las superficies se colorean POR FUNCIÓN,
   * sin simular un material físico: la VARIANTE para cabeceras (de tarjeta, de tabla, de grupo), el PRIMARIO (azul de acción,
   * tenue) para la selección y la agrupación, el SECUNDARIO (cian, con moderación) para acentos y el botón secundario, la
   * ELEVADA (superficie apenas teñida) para menús, diálogos y la barra de acciones. El error, la advertencia y la
   * confirmación conservan su significado de siempre (los tintes `-suave` de estado no se tocan).
   *
   * Riesgo que evita (TEMAS-ADICIONALES §2): «colorear demasiado» — el color orienta la atención; el cuerpo de las tarjetas y
   * los campos siguen en la superficie del tema.
   */

  /* ── Cabeceras y agrupaciones: la variante, con su texto ────────────────────────────────────────────────────────── */
  [data-mg-tema^="tonal-"] .mgui-card__header,
  [data-mg-tema^="tonal-"] .mgui-table__head-cell,
  [data-mg-tema^="tonal-"] .mgui-plegable__titulo {
    background: var(--mg-tonal-variante);
    color: var(--mg-tonal-sobre-variante);
  }
  [data-mg-tema^="tonal-"] .mgui-card__header { padding-block-end: var(--mg-space-3); border-start-start-radius: inherit; border-start-end-radius: inherit; }
  [data-mg-tema^="tonal-"] .mgui-card__title { color: var(--mg-color-texto); }
  [data-mg-tema^="tonal-"] .mgui-table__head-cell[aria-sort="ascending"],
  [data-mg-tema^="tonal-"] .mgui-table__head-cell[aria-sort="descending"] { color: var(--mg-color-texto); }

  /* ── Contenedores: borde (contorno medido ≥ 3:1) sin sombra; la jerarquía la da el color, no la elevación ────────── */
  [data-mg-tema^="tonal-"] .mgui-card,
  [data-mg-tema^="tonal-"] .mgui-metric,
  [data-mg-tema^="tonal-"] .mgui-state,
  [data-mg-tema^="tonal-"] .mgui-emitir-paso,
  [data-mg-tema^="tonal-"] .mgui-table-wrap,
  [data-mg-tema^="tonal-"] .mgui-plegable,
  [data-mg-tema^="tonal-"] .mgui-filtros__panel {
    border-color: var(--mg-tonal-contorno);
    box-shadow: none;
  }
  [data-mg-tema^="tonal-"] .mgui-card--sunken,
  [data-mg-tema^="tonal-"] :is(.mgui-card, .mgui-emitir-paso) :is(.mgui-card:not(.mgui-emitir-seccion), .mgui-metric, .mgui-state) { background: var(--mg-tonal-variante); }

  /* ── Lo que flota (menús, diálogos, paleta, cajón, avisos, pie de acciones, barras): la superficie elevada ───────── */
  [data-mg-tema^="tonal-"] .mgui-app-marcas,
  [data-mg-tema^="tonal-"] .mgui-cascara__barra,
  [data-mg-tema^="tonal-"] .mgui-emitir-pie,
  [data-mg-tema^="tonal-"] .mgui-app__accesos,
  [data-mg-tema^="tonal-"] .mgui-app__atajos,
  [data-mg-tema^="tonal-"] .mgui-app__tirador,
  [data-mg-tema^="tonal-"] .mgui-dialog,
  [data-mg-tema^="tonal-"] .mgui-paleta,
  [data-mg-tema^="tonal-"] .mgui-ayuda__cajon,
  [data-mg-tema^="tonal-"] .mgui-menu-acciones__panel,
  [data-mg-tema^="tonal-"] .mgui-idioma__panel,
  [data-mg-tema^="tonal-"] .mgui-bandeja__panel,
  [data-mg-tema^="tonal-"] .mgui-notificacion,
  [data-mg-tema^="tonal-"] .mgui-telefono__panel,
  [data-mg-tema^="tonal-"] .mgui-direccion__panel,
  [data-mg-tema^="tonal-"] .mgui-selector-buscable__panel,
  [data-mg-tema^="tonal-"] .mgui-apariencia-panel {
    background: var(--mg-tonal-elevada);
    border-color: var(--mg-tonal-contorno);
  }
  /* La barra de acciones de la emisión lleva su rol explícito: una línea primaria arriba. */
  [data-mg-tema^="tonal-"] .mgui-emitir-pie { border-block-start: 2px solid var(--mg-color-accion); }
  [data-mg-tema^="tonal-"] .mgui-app-menu__lista--sub,
  [data-mg-tema^="tonal-"] .mgui-app-menu__sesion { border-color: var(--mg-tonal-contorno); }

  /* ── Campos: superficie con el contorno; el foco, como siempre ─────────────────────────────────────────────────── */
  [data-mg-tema^="tonal-"] .mgui-field__control,
  [data-mg-tema^="tonal-"] .mgui-buscador__control,
  [data-mg-tema^="tonal-"] .mgui-telefono__pais,
  [data-mg-tema^="tonal-"] .mgui-selector-buscable__boton { border-color: var(--mg-tonal-contorno); }
  [data-mg-tema^="tonal-"] .mgui-field__control:disabled,
  [data-mg-tema^="tonal-"] .mgui-field__control--readonly { background: var(--mg-tonal-variante); }

  /* ── Selección y agrupación: el primario con su texto (señal de color + borde de acción) ───────────────────────── */
  [data-mg-tema^="tonal-"] .mgui-opcion__control:checked ~ .mgui-opcion__caja {
    background: var(--mg-tonal-primario);
    border-color: var(--mg-color-accion);
    box-shadow: inset 0 0 0 1px var(--mg-color-accion);
  }
  [data-mg-tema^="tonal-"] .mgui-opcion__control:checked ~ .mgui-opcion__cuerpo { color: var(--mg-tonal-sobre-primario); }
  [data-mg-tema^="tonal-"] .mgui-segmentado__grupo { background: var(--mg-tonal-variante); border-color: var(--mg-tonal-contorno); }
  [data-mg-tema^="tonal-"] .mgui-segmentado__control:checked + .mgui-segmentado__opcion,
  [data-mg-tema^="tonal-"] .mgui-segmentado__opcion.is-actual { background: var(--mg-tonal-primario); color: var(--mg-tonal-sobre-primario); box-shadow: none; }
  [data-mg-tema^="tonal-"] .mgui-app-menu__grupo--activo { background: var(--mg-tonal-primario); }
  [data-mg-tema^="tonal-"] .mgui-app-menu__grupo--activo > summary.mgui-app-menu__titulo { color: var(--mg-tonal-sobre-primario); }
  [data-mg-tema^="tonal-"] .mgui-paginacion__enlace.is-actual { background: var(--mg-color-accion); }

  /* ── Acentos secundarios: el botón secundario y los chips neutros, en cian tenue con su texto ───────────────────── */
  [data-mg-tema^="tonal-"] .mgui-btn--secondary {
    background: var(--mg-tonal-secundario);
    border-color: var(--mg-tonal-secundario);
    color: var(--mg-tonal-sobre-secundario);
    box-shadow: none;
  }
  [data-mg-tema^="tonal-"] .mgui-btn--secondary:hover { background: color-mix(in oklab, var(--mg-tonal-secundario) 80%, var(--mg-tonal-sobre-secundario) 20%); }
  [data-mg-tema^="tonal-"] .mgui-chip:not(.mgui-chip--info, .mgui-chip--complete, .mgui-chip--warning, .mgui-chip--danger, .mgui-chip--accion, .mgui-chip--consulta, .mgui-chip--corregir, .mgui-chip--stock, .mgui-chip--preventa, .mgui-chip--operar, .mgui-chip--nuevo, .mgui-chip--primera, .mgui-chip--cat-1, .mgui-chip--cat-2, .mgui-chip--cat-3, .mgui-chip--cat-4, .mgui-chip--cat-5, .mgui-chip--cat-6) {
    background: var(--mg-tonal-variante);
    border-color: var(--mg-tonal-contorno);
  }
  [data-mg-tema^="tonal-"] .mgui-badge:not(.mgui-badge--complete, .mgui-badge--warning, .mgui-badge--danger, .mgui-badge--info) { background: var(--mg-tonal-variante); }

  /* ── Impresión: sin color de agrupación detrás de los datos ────────────────────────────────────────────────────── */
  @media print {
    [data-mg-tema^="tonal-"] .mgui-card__header,
    [data-mg-tema^="tonal-"] .mgui-table__head-cell,
    [data-mg-tema^="tonal-"] .mgui-emitir-pie { background: var(--mg-color-superficie); color: var(--mg-color-texto); }
  }

  /* ── web/r3/fuente/traduccion.css ── */
  /*
   * C2 · COMUNICACIONES · la traducción de la conversación (`server/src/web/r3-traduccion.ts` + `web/r3/conversacion/traduccion.js`):
   * la traducción dentro de la burbuja con «Traducido del portugués · Ver original» (un `<details>`), las dos versiones una abajo de
   * la otra, el estado («Traduciendo…», baja confianza, por qué no salió), «Traducir» y «Reportar traducción»; la barra de arriba
   * (en qué idioma se lee, «Mostrar ambos») y la tarjeta de la configuración del negocio (uso, reportes y glosario). Sólo tokens:
   * ningún color ni medida inventados.
   */
  .mgui-traduccion { display: flex; flex-direction: column; gap: var(--mg-space-1); min-inline-size: 0; }
  .mgui-traduccion > p { margin: 0; }
  /* «Traducido del portugués · Ver original»: una línea chica y atenuada; lo que se toca, con el color del enlace. */
  .mgui-traduccion__linea {
    margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado);
  }
  .mgui-traduccion__ver > summary { cursor: pointer; list-style: none; }
  .mgui-traduccion__ver > summary::-webkit-details-marker { display: none; }
  .mgui-traduccion__ver[open] > summary { margin-block-end: var(--mg-space-1); }
  .mgui-traduccion__accion { color: var(--mg-color-enlace); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  /* El original, debajo de la traducción: el mismo texto, separado por una raya y atenuado (se lee igual, no compite). */
  .mgui-traduccion__original {
    padding-inline-start: var(--mg-space-2); border-inline-start: 2px solid var(--mg-color-borde); color: var(--mg-color-texto-atenuado);
  }
  .mgui-traduccion--ambos > .mgui-traduccion__linea { margin-block-start: var(--mg-space-1); }
  /* El estado: «Traduciendo…», la baja confianza o por qué no salió (el original se ve igual). */
  .mgui-traduccion__aviso { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-traduccion--ambos > .mgui-traduccion__aviso {
    padding: var(--mg-space-1) var(--mg-space-2); border-radius: var(--mg-radius-md);
    background: var(--mg-status-warning-suave); color: var(--mg-status-warning-texto);
  }
  .mgui-traduccion__aviso--fallida { color: var(--mg-status-warning-texto); }
  .mgui-traduccion__pedir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0; }
  /* «Reportar traducción»: plegado, chico; al abrirse, el motivo y enviar en un renglón que se acomoda. */
  .mgui-traduccion__reporte { font-size: var(--mg-type-xs); }
  .mgui-traduccion__reporte > summary { cursor: pointer; list-style: none; color: var(--mg-color-texto-atenuado); }
  .mgui-traduccion__reporte > summary::-webkit-details-marker { display: none; }
  .mgui-traduccion__formulario {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: var(--mg-space-1) 0 0;
  }
  .mgui-traduccion__formulario > select { inline-size: auto; max-inline-size: 100%; }
  /* Una nota de un paso traducida (I2): la misma presentación, sin burbuja. */
  .mgui-traduccion--nota { margin-block-start: var(--mg-space-1); }

  /* La barra de arriba de los mensajes: en qué idioma se lee y «Mostrar ambos». */
  .mgui-traduccion-barra {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-1) var(--mg-space-3);
    margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado);
  }
  .mgui-traduccion-barra__texto { margin: 0; }
  .mgui-traduccion-barra__acciones { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin: 0; }

  /* La tarjeta de la configuración: subtítulos, listas y el glosario con su «Quitar». */
  .mgui-traduccion-config__titulo { margin: var(--mg-space-3) 0 var(--mg-space-1); font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); }
  .mgui-traduccion-config__lista { display: flex; flex-direction: column; gap: var(--mg-space-1); margin: 0; padding-inline-start: var(--mg-space-4); }
  .mgui-traduccion-config__termino { overflow-wrap: anywhere; }
  .mgui-traduccion-config__quitar { display: inline-flex; margin: 0; }

  @media not all and (min-width: 40rem) {
    .mgui-traduccion-barra { flex-direction: column; align-items: flex-start; }
    .mgui-traduccion__formulario > select { inline-size: 100%; }
  }

  /* ── web/r3/fuente/tramite.css ── */
  /* UX-APP · el trámite de varios pasos, de a UN paso por vez (ui/tramite.ts): el indicador «Paso 2 de 5 · …» con su barra,
     las líneas tildadas de lo hecho, el paso actual con su acción y «Ver detalles». Celular primero. */
  .mgui-tramite { display: flex; flex-direction: column; gap: var(--mg-space-3); margin-block-end: var(--mg-space-4); }
  .mgui-tramite__cabeza { display: flex; flex-direction: column; gap: var(--mg-space-2); }
  .mgui-tramite__indicador { margin: 0; font-size: var(--mg-type-sm); color: var(--mg-color-texto-atenuado); overflow-wrap: anywhere; }
  .mgui-tramite__cuenta { font-weight: var(--mg-weight-semibold); color: var(--mg-color-texto); font-variant-numeric: tabular-nums; }
  .mgui-tramite__nombre { font-weight: var(--mg-weight-semibold); color: var(--mg-color-enlace); }
  .mgui-tramite__mirando { color: var(--mg-color-texto-atenuado); }
  .mgui-tramite__barra { display: flex; gap: var(--mg-space-1); margin: 0; padding: 0; list-style: none; }
  .mgui-tramite__segmento { flex: 1; min-inline-size: 0; block-size: .375rem; border-radius: 999px; background: var(--mg-color-borde); }
  .mgui-tramite__segmento--hecho { background: var(--mg-color-accion); }
  /* Lo que no hace falta: hueco (no se confunde con lo hecho ni con lo que falta). */
  .mgui-tramite__segmento--omitido { background: transparent; box-shadow: inset 0 0 0 1px var(--mg-color-borde-control); }
  .mgui-tramite__segmento--actual { background: var(--mg-color-accion-suave); box-shadow: inset 0 0 0 1px var(--mg-color-accion); }
  .mgui-tramite__despues { margin: 0; font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); overflow-wrap: anywhere; }
  .mgui-tramite__despues-rotulo { font-weight: var(--mg-weight-semibold); }
  .mgui-tramite__hechos { display: flex; flex-direction: column; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
  .mgui-tramite__hecho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2) var(--mg-space-3);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    font-size: var(--mg-type-sm);
  }
  .mgui-tramite__tilde {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 999px;
    background: var(--mg-status-complete-suave);
    color: var(--mg-status-complete-texto);
  }
  .mgui-tramite__hecho--omitido .mgui-tramite__tilde { background: var(--mg-color-fondo); color: var(--mg-color-texto-atenuado); }
  .mgui-tramite__tilde-svg { inline-size: .875rem; block-size: .875rem; stroke-width: 3; }
  .mgui-tramite__resumen { flex: 1 1 12rem; min-inline-size: 0; overflow-wrap: anywhere; }
  .mgui-tramite__resumen-texto { color: var(--mg-color-texto-atenuado); }
  .mgui-tramite__cambiar { flex: none; color: var(--mg-color-enlace); font-weight: var(--mg-weight-semibold); }
  .mgui-tramite__cambiar:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); border-radius: var(--mg-radius-sm); }
  .mgui-tramite__actual {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }
  .mgui-tramite__titulo { margin: 0; font-size: var(--mg-type-lg); }
  .mgui-tramite__cuerpo { display: flex; flex-direction: column; gap: var(--mg-space-3); min-inline-size: 0; }
  .mgui-tramite__cuerpo > * { margin-block: 0; }
  .mgui-tramite__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
    padding-block-start: var(--mg-space-3);
    border-block-start: 1px solid var(--mg-color-borde);
  }
  .mgui-tramite__atras { gap: var(--mg-space-1); }
  .mgui-tramite__atras-svg { inline-size: 1rem; block-size: 1rem; }

  /* «Ver detalles»: lo técnico plegado (un enlace que abre; el chevron gira). */
  .mgui-detalles { min-inline-size: 0; }
  .mgui-detalles__titulo {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    min-block-size: var(--mg-control-min);
    color: var(--mg-color-enlace);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    cursor: pointer;
    list-style: none;
  }
  .mgui-detalles__titulo::-webkit-details-marker { display: none; }
  .mgui-detalles__titulo:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); border-radius: var(--mg-radius-sm); }
  .mgui-detalles__svg { inline-size: 1rem; block-size: 1rem; transition: transform var(--mg-motion-fast) var(--mg-ease-out); }
  .mgui-detalles[open] > .mgui-detalles__titulo .mgui-detalles__svg { transform: rotate(90deg); }
  .mgui-detalles__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-3) 0 var(--mg-space-2);
    min-inline-size: 0;
    font-size: var(--mg-type-sm);
    overflow-wrap: anywhere;
  }
  .mgui-detalles__cuerpo > * { margin-block: 0; }
  @media (prefers-reduced-motion: reduce) {
    .mgui-detalles__svg { transition: none; }
  }

  /* UX-APP · una tarjeta por organismo con su estado y UNA acción (el panel de «Presentar con tu clave fiscal»). Va acá, después de
     tarjeta.css: la tarjeta es un `.mgui-card` compacto que además es un enlace. */
  .mgui-organismos { margin-block-end: var(--mg-space-1); }
  .mgui-organismos__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
  .mgui-organismos__item { display: flex; min-inline-size: 0; }
  .mgui-organismos__tarjeta {
    flex: 1;
    align-items: flex-start;
    gap: var(--mg-space-1);
    min-inline-size: 0;
    margin: 0;
    padding: var(--mg-space-3);
    box-shadow: none;
    color: var(--mg-color-texto);
    text-decoration: none;
  }
  .mgui-organismos__tarjeta:hover { border-color: var(--mg-color-accion); }
  .mgui-organismos__tarjeta:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-organismos__tarjeta.is-actual { border-color: var(--mg-color-accion); box-shadow: inset 0 0 0 1px var(--mg-color-accion); }
  .mgui-organismos__nombre { font-weight: var(--mg-weight-bold); overflow-wrap: anywhere; }
  .mgui-organismos__clave { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-organismos__accion { margin-block-start: auto; padding-block-start: var(--mg-space-1); color: var(--mg-color-enlace); font-size: var(--mg-type-sm); font-weight: var(--mg-weight-semibold); }
  .mgui-organismos__tarjeta.is-actual .mgui-organismos__accion { color: var(--mg-color-texto-atenuado); }

  /* Dentro del paso y de «Ver detalles», los párrafos de una pila no suman su margen al espacio de la pila (quedaba el doble). */
  .mgui-tramite__cuerpo .mgui-stack > p,
  .mgui-detalles__cuerpo .mgui-stack > p { margin-block: 0; }

  /* ── web/r3/fuente/ux-arca.css ── */
  /* UX-APP · «Conectar con ARCA» simple (titular 17/10): la promesa de arriba con su candado y la barra de avance que se mueve sola. */
  .mgui-arca-promesa {
    display: flex;
    align-items: flex-start;
    gap: var(--mg-space-2);
    margin: 0;
    padding: var(--mg-space-3) var(--mg-space-4);
    border: 1px solid var(--mg-status-complete-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-status-complete-suave);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    max-inline-size: none;
  }
  .mgui-arca-promesa__svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .0625rem; color: var(--mg-status-complete-texto); }
  .mgui-avance {
    inline-size: 100%;
    block-size: .75rem;
    border: 0;
    border-radius: 999px;
    background: var(--mg-color-borde);
    overflow: hidden;
    appearance: none;
  }
  .mgui-avance::-webkit-progress-bar { background: var(--mg-color-borde); border-radius: 999px; }
  .mgui-avance::-webkit-progress-value { background: var(--mg-color-accion); border-radius: 999px; transition: inline-size var(--mg-motion-base) var(--mg-ease-out); }
  .mgui-avance::-moz-progress-bar { background: var(--mg-color-accion); border-radius: 999px; }
  @media (prefers-reduced-motion: reduce) {
    .mgui-avance::-webkit-progress-value { transition: none; }
  }
  /* «¿Con qué CUIT vas a facturar?»: la empresa preseleccionada (o la lista de ARCA), como opciones con su tilde. */
  .mgui-arca-empresa { display: flex; flex-direction: column; gap: var(--mg-space-2); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .mgui-arca-empresa__opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-accion);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-accion-suave);
    font-weight: var(--mg-weight-semibold);
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  .mgui-arca-empresa__opcion > input { flex: none; margin-block-start: .2rem; inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--mg-color-accion); }

  /* ── web/r3/fuente/ux-datos.css ── */
  /* UX-APP · sub-frente «datos»: elegir UNA de dos opciones (una diferencia de «Valores de cálculo»: mantener el valor propio o
     tomar lo nuevo). Cada opción es una tarjeta (`mgui-card`, dentro de un `mgui-grid`: una debajo de la otra en el celular, lado a
     lado en la computadora); la tarjeta entera es el rótulo de su opción y la elegida se marca con el borde de la acción. */
  .mgui-elegir__opcion { cursor: pointer; }
  .mgui-elegir__opcion:has(.mgui-elegir__radio:checked) { border-color: var(--mg-color-accion); box-shadow: inset 0 0 0 1px var(--mg-color-accion); }
  .mgui-elegir__opcion:has(.mgui-elegir__radio:focus-visible) { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); }
  .mgui-elegir__rotulo { display: flex; align-items: center; gap: var(--mg-space-2); cursor: pointer; font-weight: var(--mg-weight-semibold); }
  .mgui-elegir__radio { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--mg-color-accion); }

  /* Tarjeta de presentación / publicidad de cada canal en /app/canales y encabezado de /app/canales/canal/:canal */
  .mgui-canal-promo {
    overflow: hidden;
    margin-block-end: 0;
    min-inline-size: 0;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
  }
  .mgui-canal-promo:hover {
    box-shadow: var(--mg-elevation-2);
  }
  .mgui-canal-promo__media {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 320 / 144;
    overflow: hidden;
    background: var(--mg-color-fondo);
    border-block-end: 1px solid var(--mg-color-borde-suave);
  }
  .mgui-canal-promo__media > a {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  .mgui-canal-promo__foto {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .mgui-canal-promo__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    margin-block-start: auto;
    padding-block-start: var(--mg-space-2);
    border-block-start: 1px solid var(--mg-color-borde-suave);
  }
  .mgui-canal-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-4);
    align-items: center;
  }
  .mgui-canal-hero__banner {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 320 / 144;
    object-fit: contain;
    overflow: hidden;
    border-radius: var(--mg-radius-md);
    border: 1px solid var(--mg-color-borde-suave);
  }
  @media (min-width: 48rem) {
    .mgui-canal-hero {
      grid-template-columns: minmax(0, 1.3fr) minmax(14rem, 1fr);
    }
  }

  /* ── web/r3/fuente/ux-fiscal.css ── */
  /* UX-APP · sub-frente FISCAL (ui/tramite.ts en «Configuración fiscal», «Emitir comprobante», «Facturación en lote» y
     «Refacturar B como A»). Sólo lo que el trámite y la biblioteca no traen; sólo tokens. */

  /* «Emitir comprobante»: lo que el guion de la pantalla oculta (las secciones que no son del tipo elegido, la constancia, los
     botones que esperan su momento, los totales vacíos) se oculta de verdad. `.mgui-stack`, `.mgui-btn` y las cajas de la pantalla
     ponen su propio `display` y le ganaban a `[hidden]`: con la factura elegida se veían también el comprobante asociado de una
     nota de crédito y el depósito de destino de un movimiento. */
  .mgui-emitir [hidden] { display: none; }
  /* Las secciones y los totales llevan su pila acá (no con `.mgui-stack`, de la capa de utilidades: ésa le gana a `[hidden]`). */
  .mgui-emitir-seccion,
  .mgui-emitir-totales { display: flex; flex-direction: column; gap: var(--mg-space-4); }

  /* El tipo de documento de la primera factura, en una línea (las tarjetas de los demás tipos, plegadas). */
  .mgui-emitir-tipo-elegido { margin: 0; font-weight: var(--mg-weight-semibold); }

  /* ── web/r3/fuente/ux-inicio.css ── */
  /* UX-APP · inicio: «Para empezar» de a UN paso (server/src/web/r3-inicio-pasos.ts). El paso usa las piezas del trámite
     (tramite.css); acá, el título de la sección y la lista completa de la puesta en marcha, con sus tildes, que va plegada en
     «Ver los N pasos». Celular primero. */
  .mgui-inicio-pasos__titulo { margin: 0; font-size: var(--mg-type-md); }
  .mgui-inicio-pasos__lista { display: flex; flex-direction: column; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
  .mgui-inicio-pasos__item {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: start;
    gap: var(--mg-space-1) var(--mg-space-3);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }
  .mgui-inicio-pasos__item--actual { border-color: var(--mg-color-accion); box-shadow: inset 0 0 0 1px var(--mg-color-accion); }
  .mgui-inicio-pasos__marca {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 999px;
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto-atenuado);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    font-variant-numeric: tabular-nums;
  }
  .mgui-inicio-pasos__item--hecho .mgui-inicio-pasos__marca { background: var(--mg-status-complete-suave); color: var(--mg-status-complete-texto); }
  .mgui-inicio-pasos__item--actual .mgui-inicio-pasos__marca { background: var(--mg-color-accion-suave); color: var(--mg-color-enlace); }
  .mgui-inicio-pasos__svg { inline-size: .875rem; block-size: .875rem; stroke-width: 3; }
  .mgui-inicio-pasos__cuerpo { display: flex; flex-direction: column; gap: var(--mg-space-1); min-inline-size: 0; overflow-wrap: anywhere; }
  .mgui-inicio-pasos__cuerpo > * { margin-block: 0; }
  .mgui-inicio-pasos__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-1) var(--mg-space-2); }
  .mgui-inicio-pasos__estado { font-size: var(--mg-type-xs); color: var(--mg-color-texto-atenuado); }
  .mgui-inicio-pasos__porque { color: var(--mg-color-texto-atenuado); }
  .mgui-inicio-pasos__cambiar { color: var(--mg-color-enlace); font-weight: var(--mg-weight-semibold); }
  .mgui-inicio-pasos__cambiar:focus-visible { outline: var(--mg-focus-ring-width) solid var(--mg-color-foco); outline-offset: var(--mg-focus-ring-offset); border-radius: var(--mg-radius-sm); }

  /* UX-APP · la bienvenida, las llaves y el segundo factor de a UN paso (server/src/web/bienvenida.ts, http.ts): la tarjeta de
     siempre (¿Dónde vendés?, la facturación, los avisos, la llave, los códigos) es el CONTENIDO del paso del trámite, que ya tiene marco y título: adentro del paso, sin su marco ni su título
     (el del paso dice lo mismo, también para el lector). En «Ver detalles» las tarjetas se ven como siempre. */
  [data-mg-tramite="mg-bienvenida"] .mgui-tramite__cuerpo > .mgui-card,
  [data-mg-tramite="mg-llaves"] .mgui-tramite__cuerpo > .mgui-card,
  [data-mg-tramite="mg-segundo-factor"] .mgui-tramite__cuerpo > .mgui-card { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  [data-mg-tramite="mg-bienvenida"] .mgui-tramite__cuerpo > .mgui-card > .mgui-card__header,
  [data-mg-tramite="mg-llaves"] .mgui-tramite__cuerpo > .mgui-card > .mgui-card__header,
  [data-mg-tramite="mg-segundo-factor"] .mgui-tramite__cuerpo > .mgui-card > .mgui-card__header { display: none; }
  [data-mg-tramite="mg-bienvenida"] .mgui-tramite__cuerpo > .mgui-card > .mgui-card__body,
  [data-mg-tramite="mg-llaves"] .mgui-tramite__cuerpo > .mgui-card > .mgui-card__body,
  [data-mg-tramite="mg-segundo-factor"] .mgui-tramite__cuerpo > .mgui-card > .mgui-card__body { padding: 0; }

  /* UX-APP · el recorrido de la puerta (server/src/web/ux-recorrido.ts): el indicador compacto con su barra, arriba de la tarjeta
     del paso (en lugar de la lista numerada, que queda plegada debajo). */
  .mgui-inicio-recorrido { margin-block-end: var(--mg-space-4); }

  /* UX-APP · «Ver detalles» al final de una pantalla de la App (la bienvenida, las llaves): aire debajo, para que la barra de
     atajos del teléfono no tape su último renglón. */
  .mgui-inicio-mas { margin-block-end: var(--mg-space-8); }

  /* UX-APP · tarjetas de acceso por tarea en /app/ (`server/src/web/r3-app.ts` › `tarjetasDeInicio` y `r3-inicio-negocio.ts`):
     grilla responsiva y foto de fondo decorativa sugerente en cada tarjeta, con fundido suave hacia el texto para preservar
     el contraste en temas claros y oscuros. */
  :is(.mgui-tareas, [data-mg-inicio-tarjetas] > .mgui-grid, [data-mg-inicio-negocio] > .mgui-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: var(--mg-space-4);
    margin-block-end: var(--mg-space-6);
  }
  :is(.mgui-tareas, [data-mg-inicio-tarjetas] > .mgui-grid, [data-mg-inicio-negocio] > .mgui-grid) > .mgui-card {
    margin-bottom: 0;
    min-block-size: 7.75rem;
  }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio]) {
    position: relative;
    isolation: isolate;
    transition: transform var(--mg-motion-fast) var(--mg-ease-out), box-shadow var(--mg-motion-fast) var(--mg-ease-out);
  }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio]):hover {
    transform: translateY(-2px);
    box-shadow: var(--mg-elevation-3);
  }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio]) > .mgui-card__header,
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio]) > .mgui-card__body,
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio]) > .mgui-card__footer {
    position: relative;
    z-index: 1;
  }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image: url("/r3/escena/tarea-negocio.jpg");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    opacity: .56;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, var(--mg-color-texto) 48%, var(--mg-color-texto) 100%);
    mask-image: linear-gradient(90deg, transparent 4%, var(--mg-color-texto) 48%, var(--mg-color-texto) 100%);
  }
  [data-mg-tema$="-profundo"] :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio])::before,
  [data-mg-tema="oscuro"] :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio])::before,
  [data-mg-tema="carbon"] :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio])::before,
  [data-mg-tema="negro"] :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card[data-mg-tarea], [data-mg-inicio-negocio] .mgui-card[data-mg-tarjeta-negocio])::before {
    opacity: .34;
    mix-blend-mode: screen;
  }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="vender"]::before { background-image: url("/r3/escena/tarea-vender.jpg"); }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="mercadolibre"]::before { background-image: url("/r3/escena/tarea-mercadolibre.jpg"); }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="productos"]::before { background-image: url("/r3/escena/tarea-productos.jpg"); }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="cobrar"]::before { background-image: url("/r3/escena/tarea-cobrar.jpg"); }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="envios"]::before { background-image: url("/r3/escena/tarea-envios.jpg"); }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="compras"]::before { background-image: url("/r3/escena/tarea-compras.jpg"); }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="impuestos"]::before { background-image: url("/r3/escena/tarea-impuestos.jpg"); }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="analizar"]::before { background-image: url("/r3/escena/tarea-analizar.jpg"); }
  :is(.mgui-tareas__tarjeta, [data-mg-inicio-tarjetas] .mgui-card)[data-mg-tarea="configuracion"]::before { background-image: url("/r3/escena/tarea-configuracion.jpg"); }

  /* ── web/r3/fuente/mercadoventas.css ── */
  /* Frentes Públicos y Panel MercadoVentas (`r3-mercadoventas-publico.ts` y `r3-mercadoventas-panel.ts`) */

  .mgui-vd {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-6);
    color: var(--mg-color-texto);
  }

  /* 1. Cabecera de 2 filas estilo Mercado Libre mejorado con identidad MercadoVentas */
  .mgui-vd-header {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: color-mix(in srgb, var(--mg-color-accion-suave) 45%, var(--mg-color-superficie));
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-header-top,
  .mgui-vd-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-3);
  }

  .mgui-vd-header__brand {
    display: flex;
    align-items: center;
    gap: var(--mg-space-3);
    text-decoration: none;
    color: var(--mg-color-texto);
  }

  .mgui-vd-header__logo {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    padding: var(--mg-space-1);
    border: 1px solid var(--mg-color-borde-suave);
  }

  .mgui-vd-header__titulo {
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-xl);
    font-weight: var(--mg-weight-bold);
    line-height: var(--mg-leading-ajustado);
    color: var(--mg-color-texto);
    margin: var(--mg-space-0);
  }

  .mgui-vd-header__sub {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-brand-sobre-suave);
  }

  .mgui-vd-header__buscador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
    flex: 1 1 24rem;
  }

  .mgui-vd-header__input {
    flex: 2 1 14rem;
    min-height: var(--mg-control-min);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    font-size: var(--mg-type-base);
  }

  .mgui-vd-cp-pill,
  .mgui-vd-header__cp {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding: var(--mg-space-1) var(--mg-space-2);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-tenue);
  }

  .mgui-vd-header__cp-input {
    width: 5rem;
    padding: var(--mg-space-1) var(--mg-space-2);
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
    color: var(--mg-color-texto);
    font-weight: var(--mg-weight-semibold);
    font-size: var(--mg-type-xs);
  }

  .mgui-vd-nav-row,
  .mgui-vd-header__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    padding-top: var(--mg-space-2);
    border-top: 1px solid var(--mg-color-borde-suave);
  }

  .mgui-vd-header__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
  }

  .mgui-vd-header__link {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding: var(--mg-space-1) var(--mg-space-3);
    border-radius: var(--mg-radius-sm);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
    text-decoration: none;
    background: color-mix(in srgb, var(--mg-color-superficie) 75%, transparent);
    border: 1px solid var(--mg-color-borde-suave);
  }

  .mgui-vd-header__link--activo {
    background: var(--mg-color-accion);
    color: var(--mg-color-sobre-solido);
    border-color: var(--mg-color-accion);
  }

  /* Sello de Transparencia 0,5% Comisión + Escrow */
  .mgui-vd-sello {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-3);
    padding: var(--mg-space-3) var(--mg-space-4);
    border: 1px solid var(--mg-status-complete-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-status-complete-suave);
    color: var(--mg-status-complete-texto);
  }

  .mgui-vd-sello__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    flex: 1 1 20rem;
  }

  .mgui-vd-sello__titulo {
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-bold);
    color: var(--mg-status-complete-texto);
    margin: var(--mg-space-0);
  }

  .mgui-vd-sello__texto {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto);
    margin: var(--mg-space-0);
  }

  .mgui-vd-sello__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-2);
  }

  .mgui-vd-sello__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: 999px;
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    background: var(--mg-color-superficie);
    color: var(--mg-status-complete-texto);
    border: 1px solid var(--mg-status-complete-borde);
  }

  /* Banner de Vista Previa Exclusiva del Dueño (Moderación EN_REVISION) */
  .mgui-vd-preview-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-3);
    padding: var(--mg-space-3) var(--mg-space-4);
    border: 2px solid var(--mg-status-warning-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-status-warning-suave);
    color: var(--mg-status-warning-texto);
  }

  .mgui-vd-preview-banner__titulo {
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-bold);
    margin: var(--mg-space-0);
  }

  .mgui-vd-preview-banner__texto {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto);
    margin: var(--mg-space-0);
  }

  /* 2. Slider Exhibitor Full-Width (ML Exhibitor) */
  .mgui-vd-exhibitor {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
    padding: var(--mg-space-6);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--mg-color-accion-suave) 68%, var(--mg-color-superficie)),
      var(--mg-color-superficie)
    );
    box-shadow: var(--mg-elevation-2);
  }

  .mgui-vd-slides-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-4);
  }

  @media (min-width: 1024px) {
    .mgui-vd-slides-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .mgui-vd-slide-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mg-space-3);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-slide-card__img {
    width: 100%;
    height: 8.5rem;
    object-fit: cover;
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-color-borde-suave);
    background: var(--mg-color-fondo);
  }

  /* 3. Tira de 6 Tarjetas de Acceso Rápido Dinámico (ML Dynamic Access) */
  .mgui-vd-dyn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--mg-space-3);
  }

  .mgui-vd-dyn-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3) var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
    text-decoration: none;
    color: var(--mg-color-texto);
    transition: transform var(--mg-motion-fast) var(--mg-ease-out), box-shadow var(--mg-motion-fast) var(--mg-ease-out);
  }

  .mgui-vd-dyn-card:hover {
    box-shadow: var(--mg-elevation-2);
  }

  .mgui-vd-dyn-card__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-brand-sobre-suave);
    font-size: var(--mg-type-lg);
  }

  .mgui-vd-dyn-card__titulo {
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-bold);
    color: var(--mg-color-texto);
    margin: var(--mg-space-0);
  }

  .mgui-vd-dyn-card__texto {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-tenue);
    margin: var(--mg-space-0);
  }

  .mgui-vd-dyn-card__cta {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-enlace);
  }

  /* 4. Tira Horizontal de Medios de Pago y Financiación (ML Payment Strip) */
  .mgui-vd-pay-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: var(--mg-space-3);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-pay-item {
    display: flex;
    align-items: center;
    gap: var(--mg-space-3);
    padding: var(--mg-space-2);
    border-right: 1px solid var(--mg-color-borde-suave);
  }

  .mgui-vd-pay-item__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--mg-color-borde-suave);
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-brand-sobre-suave);
    font-size: var(--mg-type-md);
    flex-shrink: 0;
  }

  /* 5. Bloque Dividido: Oferta del Día + Carrusel Ofertas Relámpago */
  .mgui-vd-ofertas-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-4);
    align-items: stretch;
  }

  @media (min-width: 1024px) {
    .mgui-vd-ofertas-split {
      grid-template-columns: 21rem 1fr;
    }
  }

  .mgui-vd-oferta-dia {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mg-space-3);
    padding: var(--mg-space-4);
    border: 2px solid var(--mg-color-accion);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-stock-bar {
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--mg-color-borde-suave);
    overflow: hidden;
  }

  .mgui-vd-stock-fill {
    height: 100%;
    width: 72%;
    border-radius: 999px;
    background: var(--mg-status-warning-solido);
  }

  /* 7. Banners Dobles de Descubrimiento 50% / 50% (ML Discovery Split) */
  .mgui-vd-discovery-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-4);
  }

  @media (min-width: 768px) {
    .mgui-vd-discovery-duo {
      grid-template-columns: 1fr 1fr;
    }
  }

  .mgui-vd-discovery-banner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--mg-space-3);
    align-items: center;
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: color-mix(in srgb, var(--mg-color-accion-suave) 28%, var(--mg-color-superficie));
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-discovery-banner__img {
    width: 100%;
    height: 9rem;
    object-fit: cover;
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-color-borde-suave);
    background: var(--mg-color-fondo);
  }

  /* 9. Vitrina de Tiendas Oficiales (Portada + Avatar Circular + 3 Miniaturas) */
  .mgui-vd-stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: var(--mg-space-4);
  }

  .mgui-vd-store-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    overflow: hidden;
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-store-cover {
    height: 5.5rem;
    background: linear-gradient(
      120deg,
      var(--mg-color-marca-profunda),
      var(--mg-color-accion)
    );
    position: relative;
  }

  .mgui-vd-store-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    border: 3px solid var(--mg-color-superficie);
    background: var(--mg-color-superficie);
    object-fit: contain;
    margin-top: -2rem;
    margin-inline: auto;
    box-shadow: var(--mg-elevation-1);
    position: relative;
  }

  .mgui-vd-store-cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3) var(--mg-space-4) var(--mg-space-4);
  }

  .mgui-vd-store-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mg-space-2);
    width: 100%;
    padding-top: var(--mg-space-2);
  }

  .mgui-vd-store-thumb {
    width: 100%;
    height: 4.25rem;
    object-fit: cover;
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-color-borde-suave);
    background: var(--mg-color-fondo);
  }

  /* 10. Colección Temática en Grilla Asimétrica (ML Bento Exhibitor) */
  .mgui-vd-bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-4);
  }

  @media (min-width: 1024px) {
    .mgui-vd-bento-grid {
      grid-template-columns: 20rem 1fr;
    }
  }

  .mgui-vd-bento-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mg-space-3);
    padding: var(--mg-space-6);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
  }

  /* 13. Carrusel de Videos Cortos / Clips de Producto (9:16) */
  .mgui-vd-clips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: var(--mg-space-3);
  }

  .mgui-vd-clip-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: color-mix(in srgb, var(--mg-color-marca-profunda) 8%, var(--mg-color-superficie));
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-clip-card__media {
    position: relative;
    width: 100%;
    height: 15rem;
    border-radius: var(--mg-radius-sm);
    overflow: hidden;
    background: var(--mg-color-fondo);
    border: 1px solid var(--mg-color-borde-suave);
  }

  /* 15. Layout de Búsqueda de 2 Columnas con Sidebar Izquierdo de Filtros Facetados (`280px`) */
  .mgui-vd-search-layout,
  .mgui-vd-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-6);
    align-items: start;
  }

  @media (min-width: 1024px) {
    .mgui-vd-search-layout,
    .mgui-vd-layout {
      grid-template-columns: 17.5rem 1fr;
    }
  }

  .mgui-vd-filter-sidebar,
  .mgui-vd-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }

  .mgui-vd-filter-group,
  .mgui-vd-sidebar__bloque {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding-bottom: var(--mg-space-3);
    border-bottom: 1px solid var(--mg-color-borde-suave);
  }

  .mgui-vd-filter-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
    text-decoration: none;
    color: var(--mg-color-texto);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
  }

  .mgui-vd-filter-switch--activo {
    border-color: var(--mg-color-accion);
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-brand-sobre-suave);
  }

  .mgui-vd-active-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
  }

  .mgui-vd-active-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding: var(--mg-space-1) var(--mg-space-3);
    border-radius: 999px;
    border: 1px solid var(--mg-color-accion);
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-brand-sobre-suave);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    text-decoration: none;
  }

  .mgui-vd-sidebar__titulo {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mg-color-texto-tenue);
    margin: var(--mg-space-0);
  }

  .mgui-vd-sidebar__lista {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    list-style: none;
    padding: var(--mg-space-0);
    margin: var(--mg-space-0);
  }

  .mgui-vd-sidebar__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto);
    text-decoration: none;
  }

  .mgui-vd-sidebar__item--activo {
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-brand-sobre-suave);
    font-weight: var(--mg-weight-semibold);
  }

  .mgui-vd-sidebar__contador {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-sutil);
    font-family: var(--mg-font-numeric);
  }

  /* Grilla de Publicaciones y Vista Lista Horizontal */
  .mgui-vd-grid-productos,
  .mgui-vd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--mg-space-4);
  }

  .mgui-vd-list-productos {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
  }

  .mgui-vd-row-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-4);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
    align-items: center;
  }

  @media (min-width: 768px) {
    .mgui-vd-row-card {
      grid-template-columns: 12rem 1fr 14rem;
    }
  }

  .mgui-vd-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    overflow: hidden;
    box-shadow: var(--mg-elevation-1);
    transition: transform var(--mg-motion-fast) var(--mg-ease-out), box-shadow var(--mg-motion-fast) var(--mg-ease-out);
  }

  .mgui-vd-card:hover {
    box-shadow: var(--mg-elevation-2);
  }

  .mgui-vd-card--revision {
    border: 2px dashed var(--mg-status-warning-borde);
    background: color-mix(in srgb, var(--mg-status-warning-suave) 25%, var(--mg-color-superficie));
  }

  .mgui-vd-card__media {
    position: relative;
    width: 100%;
    height: 12.5rem;
    background: var(--mg-color-fondo);
    border-bottom: 1px solid var(--mg-color-borde-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .mgui-vd-card__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mgui-vd-card__badges {
    position: absolute;
    top: var(--mg-space-2);
    left: var(--mg-space-2);
    right: var(--mg-space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-1);
  }

  .mgui-vd-card__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    background: var(--mg-color-superficie);
    color: var(--mg-color-texto);
    border: 1px solid var(--mg-color-borde);
  }

  .mgui-vd-card__badge--oferta {
    background: var(--mg-status-danger-suave);
    color: var(--mg-status-danger-texto);
    border-color: var(--mg-status-danger-borde);
  }

  .mgui-vd-card__badge--revision {
    background: var(--mg-status-warning-suave);
    color: var(--mg-status-warning-texto);
    border-color: var(--mg-status-warning-borde);
  }

  .mgui-vd-card__badge--b2b {
    background: var(--mg-status-info-suave);
    color: var(--mg-status-info-texto);
    border-color: var(--mg-status-info-borde);
  }

  .mgui-vd-card__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-4);
    flex: 1;
  }

  .mgui-vd-card__categoria {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-sutil);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .mgui-vd-card__titulo {
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
    text-decoration: none;
    line-height: var(--mg-leading-ajustado);
  }

  .mgui-vd-card__precio-bloque {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
  }

  .mgui-vd-card__precio-tachado {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-sutil);
    text-decoration: line-through;
    font-family: var(--mg-font-numeric);
  }

  .mgui-vd-card__precio {
    font-size: var(--mg-type-xl);
    font-weight: var(--mg-weight-bold);
    color: var(--mg-color-texto);
    font-family: var(--mg-font-numeric);
    line-height: var(--mg-leading-ajustado);
  }

  .mgui-vd-card__ahorro--favorable {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-money-positive-texto);
  }

  .mgui-vd-card__b2b {
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-accion-suave);
    color: var(--mg-color-brand-sobre-suave);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-medium);
  }

  .mgui-vd-card__envio {
    font-size: var(--mg-type-xs);
    color: var(--mg-status-complete-texto);
    font-weight: var(--mg-weight-semibold);
  }

  .mgui-vd-card__vendedor {
    margin-top: auto;
    padding-top: var(--mg-space-2);
    border-top: 1px solid var(--mg-color-borde-suave);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-tenue);
  }

  /* PDP — Página de Ficha de Producto de 3 Columnas estilo Mercado Libre (`ui-pdp`) */
  .mgui-vd-pdp-3col,
  .mgui-vd-pdp {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-6);
    align-items: start;
  }

  @media (min-width: 1024px) {
    .mgui-vd-pdp-3col,
    .mgui-vd-pdp {
      grid-template-columns: 1.15fr 1.2fr 0.95fr;
    }
  }

  .mgui-vd-pdp__galeria {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }

  .mgui-vd-gallery-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-3);
    align-items: start;
  }

  @media (min-width: 768px) {
    .mgui-vd-gallery-rail {
      grid-template-columns: 4.5rem 1fr;
    }
  }

  .mgui-vd-pdp__foto-principal {
    width: 100%;
    max-height: 24rem;
    object-fit: contain;
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
    border: 1px solid var(--mg-color-borde-suave);
  }

  .mgui-vd-pdp__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-2);
  }

  .mgui-vd-pdp__thumb {
    width: 4.25rem;
    height: 4.25rem;
    object-fit: cover;
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-color-borde);
    background: var(--mg-color-fondo);
  }

  .mgui-vd-pdp__centro {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }

  .mgui-vd-pdp__meta {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-sutil);
  }

  .mgui-vd-pdp__titulo {
    font-family: var(--mg-font-heading);
    font-size: var(--mg-type-xl);
    font-weight: var(--mg-weight-bold);
    color: var(--mg-color-texto);
    margin: var(--mg-space-0);
  }

  .mgui-vd-pdp__precio-grande {
    font-size: var(--mg-type-3xl);
    font-weight: var(--mg-weight-bold);
    font-family: var(--mg-font-numeric);
    color: var(--mg-color-texto);
    line-height: var(--mg-leading-ajustado);
  }

  .mgui-vd-pdp__comparador {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-status-complete-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-status-complete-suave);
    font-size: var(--mg-type-xs);
  }

  /* Escala Mayorista B2B */
  .mgui-vd-escala {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: color-mix(in srgb, var(--mg-color-accion-suave) 30%, var(--mg-color-superficie));
  }

  .mgui-vd-escala__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--mg-space-2);
  }

  .mgui-vd-escala__item {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    padding: var(--mg-space-2);
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    font-size: var(--mg-type-xs);
    text-decoration: none;
    color: var(--mg-color-texto);
  }

  .mgui-vd-escala__precio {
    font-size: var(--mg-type-md);
    font-weight: var(--mg-weight-bold);
    font-family: var(--mg-font-numeric);
    color: var(--mg-color-texto);
  }

  .mgui-vd-escala__descuento--favorable {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-bold);
    color: var(--mg-money-positive-texto);
  }

  /* Tabla Cebra de Especificaciones Técnicas (`ui-pdp-specs__table`) */
  .mgui-vd-specs-zebra {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    overflow: hidden;
  }

  .mgui-vd-specs-zebra__fila {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--mg-space-3);
    padding: var(--mg-space-3) var(--mg-space-4);
    border-bottom: 1px solid var(--mg-color-borde-suave);
    font-size: var(--mg-type-sm);
    background: var(--mg-color-superficie);
  }

  .mgui-vd-specs-zebra__fila--par {
    background: var(--mg-color-fondo);
  }

  /* Ficha técnica de atributos */
  .mgui-vd-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--mg-space-2);
  }

  .mgui-vd-ficha__item {
    display: flex;
    flex-direction: column;
    padding: var(--mg-space-2) var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
  }

  .mgui-vd-ficha__clave {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-sutil);
  }

  .mgui-vd-ficha__valor {
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
  }

  /* Caja de Compra (Buy Box) y Desglose Multi-Tramo */
  .mgui-vd-buybox {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-buybox__envio {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
  }

  .mgui-vd-buybox__tramos {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    font-size: var(--mg-type-xs);
  }

  .mgui-vd-buybox__tramo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    padding: var(--mg-space-1) var(--mg-space-0);
    border-bottom: 1px dashed var(--mg-color-borde-suave);
  }

  .mgui-vd-thermometer,
  .mgui-vd-buybox__termometro {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--mg-space-1);
    height: 0.5rem;
  }

  .mgui-vd-buybox__nivel {
    border-radius: 999px;
    background: var(--mg-color-borde-suave);
  }

  .mgui-vd-buybox__nivel--activo {
    background: var(--mg-status-complete-solido);
  }

  /* Preguntas y Respuestas */
  .mgui-vd-qa {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
  }

  .mgui-vd-qa__item {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }

  .mgui-vd-qa__pregunta {
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
    margin: var(--mg-space-0);
  }

  .mgui-vd-qa__respuesta {
    padding-left: var(--mg-space-3);
    border-left: 3px solid var(--mg-color-accion);
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto-tenue);
    margin: var(--mg-space-0);
  }

  /* Seguimiento de Orden, Custodia Escrow y PIN/QR */
  .mgui-vd-orden {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
  }

  .mgui-vd-orden__pin-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-4);
    padding: var(--mg-space-4);
    border: 2px solid var(--mg-color-accion);
    border-radius: var(--mg-radius-md);
    background: color-mix(in srgb, var(--mg-color-accion-suave) 35%, var(--mg-color-superficie));
  }

  .mgui-vd-orden__pin-codigo {
    font-family: var(--mg-font-numeric);
    font-size: var(--mg-type-2xl);
    font-weight: var(--mg-weight-bold);
    letter-spacing: 0.12em;
    padding: var(--mg-space-2) var(--mg-space-4);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-superficie);
    border: 1px solid var(--mg-color-borde);
    color: var(--mg-color-accion);
  }

  .mgui-vd-orden__split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--mg-space-3);
  }

  .mgui-vd-orden__split-card {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }

  /* Sitio Ecommerce Propio de cada Tenant (Constructor Visual Wix / Ecwid) */
  .mgui-vd-tienda {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-6);
  }

  .mgui-vd-tienda__anuncio {
    padding: var(--mg-space-2) var(--mg-space-4);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    text-align: center;
  }

  .mgui-vd-tienda__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-4);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-1);
  }

  .mgui-vd-tienda__marca {
    display: flex;
    align-items: center;
    gap: var(--mg-space-3);
  }

  .mgui-vd-tienda__logo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: var(--mg-radius-md);
    border: 1px solid var(--mg-color-borde-suave);
    background: var(--mg-color-fondo);
    padding: var(--mg-space-1);
  }

  .mgui-vd-tienda__casillas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-space-2);
  }

  .mgui-vd-tienda__casilla {
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    padding: var(--mg-space-1) var(--mg-space-2);
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-color-borde-suave);
    background: var(--mg-color-fondo);
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-tenue);
    text-decoration: none;
  }

  .mgui-vd-tienda__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mg-space-4);
    padding: var(--mg-space-6);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-lg);
    background: color-mix(in srgb, var(--mg-color-accion-suave) 40%, var(--mg-color-superficie));
    align-items: center;
  }

  @media (min-width: 768px) {
    .mgui-vd-tienda__hero {
      grid-template-columns: 1.2fr 1fr;
    }
  }

  .mgui-vd-tienda__hero-img {
    width: 100%;
    max-height: 16rem;
    object-fit: cover;
    border-radius: var(--mg-radius-md);
    border: 1px solid var(--mg-color-borde);
  }

  .mgui-vd-tienda__seccion {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    padding: var(--mg-space-4);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: var(--mg-color-superficie);
  }

  /* ── web/r3/fuente/vidrio.css ── */
  /*
   * mgui-vidrio — los MATERIALES de los cuatro temas de vidrio (CRISTAL V3, 31/10/2026): `cristal-claro`, `cristal-profundo`
   * (familia A, CRISTAL / esmerilado) y `cristal-liquido-claro`, `cristal-liquido-profundo` (familia B, CRISTAL LÍQUIDO /
   * lente). Todas las reglas van dentro de `[data-mg-tema^="cristal-"]` (los cuatro) o `[data-mg-tema^="cristal-liquido-"]`
   * (sólo la lente): en cualquier otro tema este archivo no pinta nada. Los valores salen de los tokens --mg-vidrio-* que
   * emite `herramientas/mg-gen-r3/core/temas.js › tokensDeVidrio` por tema (con el alfa de lectura MEDIDO contra el extremo
   * de la escena); acá sólo se aplican. La escena de fondo (isotipo 3D + fondo procedural) es `escena.css` + `web/r3/escena/`.
   *
   * DOS FAMILIAS que se reconocen por el MATERIAL (misma paleta, mismo fondo, misma pantalla):
   *   A. CRISTAL: vidrio esmerilado. El fondo se transmite como manchas de color difundidas (blur 16 px, saturate 1,36);
   *      la superficie tiene espesor (realce de 1 px arriba, contraborde de 1 px abajo), un borde de luz fino y una sombra
   *      suave y ancha que la separa del plano de abajo. Un solo blur por pila; sin banda ni reflejo localizado.
   *   B. CRISTAL LÍQUIDO: lente pulida. El centro es relativamente más claro (blur 6 px en la navegación, 9 px en las
   *      superficies de lectura, relleno menor); el perímetro lleva una BANDA óptica de 10 px (tinte propio: cambia la lectura
   *      del fondo cerca del contorno, y en la cáscara —barra, lateral, riel— es un filtro HERMANO del centro, con
   *      su propio muestreo del fondo: blur 1,3 px + saturate 1,75, sobre un área complementaria, no un blur encadenado), un
   *      reflejo especular LOCALIZADO orientado a una fuente de luz común (arriba a la izquierda: `--mg-vidrio-luz-angulo`,
   *      `--mg-reflejo-x/-y`; en punteros finos el guion `reflejo-cursor.js` lo corre con el puntero sobre la superficie, por una
   *      regla CSSOM, nunca un `style=`), un contraborde oscuro abajo (cantos finos y direccionales, no almohadilla) y una
   *      sombra de contacto más una de elevación. Nada de aura, nada de brillo plástico generalizado.
   *
   * ROLES (uno por superficie, los mismos para `.mgui-*` y para los `.mg-*` del puente legacy —`puente-legacy.css`—):
   *   escena        el fondo (`escena.css`): html pinta `--mg-color-fondo`, body y `.mgui-app` transparentes.
   *   base          superficie de CONTENIDO: tarjetas, pasos del asistente, métricas, estados (texto directo → ≥ 5:1 medido).
   *   lente         NAVEGACIÓN: barra de arriba, lateral, riel de accesos (tienen la escena detrás; el efecto más expresivo vive
   *                 acá: Apple reserva el material a la capa funcional). Lo que flota sobre contenido es densa con canto de lente.
   *   densa         LECTURA DENSA y lo que FLOTA: tablas, popovers, diálogos, cajón, desplegables, toast.
   *   campo         lo que se ESCRIBE: controles, selector, buscador (respaldo local estable, sin blur propio).
   *   velos         hijos de una raíz de vidrio: se levantan (superficie) o se hunden (fondo), sin blur propio.
   *   selección     el estado ELEGIDO: color de acción sólido con blanco encima (pastilla «Factura», chip, entrada del menú).
   *   texto/foco    tinta del tema (medida) y anillo de foco con halo de superficie.
   *   borde/reflejo el canto translúcido del tema (`--mg-color-borde` ya apunta a él) y los realces interiores.
   *
   * RENDIMIENTO: blur ≤ 20 px, un blur por pila (vidrio dentro de vidrio = velo), una sombra ancha por superficie, sin
   * `will-change`, sin filtros encadenados, sin animación sobre las superficies. La banda hermana sólo en los 5 hosts de la
   * cáscara; en las superficies de contenido la banda es una sombra interior (sin segundo muestreo del fondo).
   *
   * DEGRADACIÓN: sin `backdrop-filter` → fondo denso sin blur; sin `mask-composite` → la banda hermana no se dibuja (queda el
   * canto por sombra); `prefers-reduced-transparency`, `prefers-contrast: more` o `data-mg-contraste="alto"` → superficies
   * sólidas; colores forzados → nativo; impresión → sin efectos.
   */

  /* ══ 1 · BASE: superficie de contenido ═══════════════════════════════════════════════════════════════════════════════ */
  [data-mg-tema^="cristal-"] .mgui-card,
  [data-mg-tema^="cristal-"] .mgui-metric,
  [data-mg-tema^="cristal-"] .mgui-state,
  [data-mg-tema^="cristal-"] .mgui-skeleton--card,
  [data-mg-tema^="cristal-"] .mgui-tramite__actual,
  [data-mg-tema^="cristal-"] .mgui-emitir-paso {
    background-color: var(--mg-vidrio-fondo-base);
    background-image: linear-gradient(var(--mg-vidrio-luz-angulo), var(--mg-vidrio-canto-suave), var(--mg-vidrio-fondo-base));
    backdrop-filter: blur(var(--mg-vidrio-desenfoque-base)) saturate(var(--mg-vidrio-saturacion));
    -webkit-backdrop-filter: blur(var(--mg-vidrio-desenfoque-base)) saturate(var(--mg-vidrio-saturacion));
    border-color: var(--mg-vidrio-borde-fuerte);
    border-block-end-color: var(--mg-vidrio-canto-sombra);
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-vidrio-sombra);
  }
  /* El paso del asistente: su borde pasa del azul de acción al canto fuerte del vidrio (la cabeza ya no es un bloque azul). */
  [data-mg-tema^="cristal-"] .mgui-emitir-paso { border-color: var(--mg-vidrio-borde-fuerte); border-block-end-color: var(--mg-vidrio-canto-sombra); }
  /* Una raíz ADENTRO de otra raíz (tarjeta en tarjeta, métrica en tarjeta, tarjeta en el paso actual): velo, sin segundo
   * vidrio. Las secciones del asistente (`.mgui-emitir-seccion`) quedan afuera: las pinta emitir.css (sólo borde). */
  [data-mg-tema^="cristal-"] :is(.mgui-card, .mgui-emitir-paso, .mgui-tramite__actual, .mgui-dialog, .mgui-metric, .mgui-state) :is(.mgui-card:not(.mgui-emitir-seccion), .mgui-metric, .mgui-state, .mgui-skeleton--card),
  [data-mg-tema^="cristal-"] .mgui-card--sunken {
    background: var(--mg-vidrio-velo-superficie);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--mg-vidrio-borde-color);
    box-shadow: none;
  }
  [data-mg-tema^="cristal-"] .mgui-card--sunken { background: var(--mg-vidrio-velo-hundido); }

  /* ══ 2 · LENTE: navegación y acciones ════════════════════════════════════════════════════════════════════════════════ */
  /* La lente queda para lo que tiene DETRÁS la escena (barra, lateral, riel): lo que flota sobre CONTENIDO (pie de emisión,
   * paleta Ctrl+K, diálogos) es lectura densa —medido 31/10/2026: una paleta al .14 transparentaba el texto de la tarjeta de
   * atrás— y lleva los indicios de lente sólo en el canto (sección 7). */
  [data-mg-tema^="cristal-"] .mgui-app-marcas,
  [data-mg-tema^="cristal-"] .mgui-app__lateral,
  [data-mg-tema^="cristal-"] .mgui-app__accesos,
  [data-mg-tema^="cristal-"] .mgui-cascara__barra,
  [data-mg-tema^="cristal-"] .mgui-cascara__nav {
    background: var(--mg-vidrio-fondo-lente);
    backdrop-filter: blur(var(--mg-vidrio-desenfoque-lente)) saturate(var(--mg-vidrio-saturacion));
    -webkit-backdrop-filter: blur(var(--mg-vidrio-desenfoque-lente)) saturate(var(--mg-vidrio-saturacion));
    border-color: var(--mg-vidrio-borde-color);
    box-shadow: var(--mg-vidrio-iluminacion), 0 1px 3px var(--mg-vidrio-contacto);
  }
  /* El pie pegado de emisión: flota sobre el formulario que se desplaza debajo → denso con blur fuerte, canto fuerte, sombra. */
  [data-mg-tema^="cristal-"] .mgui-emitir-pie {
    background: var(--mg-vidrio-fondo-denso);
    backdrop-filter: blur(var(--mg-vidrio-desenfoque-fuerte)) saturate(var(--mg-vidrio-saturacion));
    -webkit-backdrop-filter: blur(var(--mg-vidrio-desenfoque-fuerte)) saturate(var(--mg-vidrio-saturacion));
    border-color: var(--mg-vidrio-borde-fuerte);
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-vidrio-espesor), var(--mg-vidrio-sombra);
  }
  /* El texto ATENUADO del lateral (títulos de grupo, «Plegar el menú», subgrupos) sobre la lente se lee encima de la escena, no
   * del fondo opaco del lateral: toma el atenuado del tema, que el generador mide contra el compuesto del vidrio (ola 35b / V3).
   * Medido 31/10/2026: con el atenuado del lateral daba 3,4–3,9:1 en los temas claros. */
  [data-mg-tema^="cristal-"] .mgui-app__lateral,
  [data-mg-tema^="cristal-"] .mgui-cascara__nav { --mg-lateral-atenuado: var(--mg-color-texto-atenuado); }
  /* ola 35c · `backdrop-filter` crea un contexto de apilamiento: sin un orden explícito, los globos que cuelgan de la barra
   * (satélites) y del lateral (los rótulos del riel) quedaban DEBAJO de las tarjetas de vidrio del contenido. Son ítems de la
   * grilla, así que `z-index` aplica sin posicionarlos: barra por encima del lateral, lateral por encima del contenido. */
  [data-mg-tema^="cristal-"] .mgui-app-marcas,
  [data-mg-tema^="cristal-"] .mgui-cascara__barra { z-index: var(--mg-layer-fijo); }
  [data-mg-tema^="cristal-"] .mgui-app__lateral,
  [data-mg-tema^="cristal-"] .mgui-cascara__nav { z-index: var(--mg-layer-elevado); }
  /* El cajón del teléfono pasa POR ENCIMA del isotipo: se lee encima → denso. */
  [data-mg-tema^="cristal-"] .mgui-app__interruptor:checked ~ .mgui-app__lateral { background: var(--mg-vidrio-fondo-denso); }
  [data-mg-tema^="cristal-"] .mgui-app__interruptor:checked ~ .mgui-app__lateral .mgui-app-menu__cerrar { background: var(--mg-vidrio-velo-superficie); }
  /* La CABEZA del paso vive adentro del paso (ya vidrio): velo de lente, sin blur propio; deja de ser un bloque azul sólido
   * (referencia V3): tinta del tema, ordinal y bajada atenuados, chevrón en la tinta. El número (`.mgui-step-badge`) sigue
   * en su pastilla tintada (emitir.css, medida). Incluye `.is-en-progreso` (la clase que sigue poniendo el guion). */
  [data-mg-tema^="cristal-"] .mgui-paso-header,
  [data-mg-tema^="cristal-"] .mgui-paso-header.is-en-progreso {
    background: var(--mg-vidrio-velo-superficie);
    color: var(--mg-color-texto);
    border-block-start-color: var(--mg-vidrio-borde-color);
    box-shadow: var(--mg-vidrio-iluminacion), inset 0 -1px 0 var(--mg-vidrio-borde-suave);
  }
  [data-mg-tema^="cristal-"] .mgui-paso-header .mgui-paso-header__ordinal,
  [data-mg-tema^="cristal-"] .mgui-paso-header .mgui-paso-header__bajada { color: var(--mg-color-texto-atenuado); opacity: 1; }
  [data-mg-tema^="cristal-"] .mgui-paso-header__toggle .mgui-ico { background-color: var(--mg-color-texto); }
  [data-mg-tema^="cristal-"] .mgui-paso-header__toggle:hover,
  [data-mg-tema^="cristal-"] .mgui-paso-header__toggle:focus-visible { background: var(--mg-vidrio-velo-hundido); }
  /* El riel de la derecha, la barra de atajos del teléfono y el tirador: sin blur (ya hay uno en la pila o la GPU es chica). */
  [data-mg-tema^="cristal-"] .mgui-app__atajos,
  [data-mg-tema^="cristal-"] .mgui-app__tirador {
    background: var(--mg-vidrio-fondo-denso);
    border-color: var(--mg-vidrio-borde-fuerte);
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-vidrio-sombra);
  }
  /* Botones de la cáscara (Menú, Cerrar el menú, Buscar): velo, como todo hijo de una barra de vidrio. */
  [data-mg-tema^="cristal-"] .mgui-app__abrir,
  [data-mg-tema^="cristal-"] .mgui-cascara__abrir,
  [data-mg-tema^="cristal-"] .mgui-app-menu__cerrar,
  [data-mg-tema^="cristal-"] .mgui-paleta-boton { background: var(--mg-vidrio-velo-superficie); }
  /* ola 35c · el menú lateral ES la capa de vidrio: sus hijos no llevan fondo propio. Grupos abierto/seleccionado con un velo
   * leve de su tono; el nombre del grupo sin fondo; el hover un velo de la tinta; la ENTRADA activa = selección translúcida
   * de la acción + barra de 3 px en el color del enlace (≥ 4,5:1 sobre el compuesto base, temas.js) + ícono en ese color. */
  [data-mg-tema^="cristal-"] .mgui-app-menu__grupo--activo { background: color-mix(in oklab, var(--mg-lateral-grupo) 45%, transparent); }
  [data-mg-tema^="cristal-"] details.mgui-app-menu__grupo[open]:not(.mgui-app-menu__grupo--activo) { background: color-mix(in oklab, var(--mg-lateral-abierto) 45%, transparent); }
  [data-mg-tema^="cristal-"] .mgui-app-menu__grupo--activo > summary.mgui-app-menu__titulo,
  [data-mg-tema^="cristal-"] details.mgui-app-menu__grupo[open]:not(.mgui-app-menu__grupo--activo) > summary.mgui-app-menu__titulo { background: transparent; }
  [data-mg-tema^="cristal-"] .mgui-app-menu__grupo.mgui-app-menu__grupo--activo > summary.mgui-app-menu__titulo:hover,
  [data-mg-tema^="cristal-"] details.mgui-app-menu__grupo[open]:not(.mgui-app-menu__grupo--activo) > summary.mgui-app-menu__titulo:hover { background: color-mix(in oklab, var(--mg-lateral-texto) 10%, transparent); }
  [data-mg-tema^="cristal-"] .mgui-app-menu__enlace[aria-current="page"] {
    background: color-mix(in oklab, var(--mg-vidrio-seleccion) 14%, transparent);
    color: var(--mg-lateral-texto);
    box-shadow: inset 3px 0 0 var(--mg-color-enlace);
  }
  [data-mg-tema^="cristal-"] .mgui-app-menu__enlace[aria-current="page"] > .mgui-ico { color: var(--mg-color-enlace); }
  [data-mg-tema^="cristal-"] .mgui-app-menu__lista--sub,
  [data-mg-tema^="cristal-"] .mgui-app-menu__sesion { border-color: var(--mg-vidrio-borde-color); }

  /* ══ 3 · DENSA: lectura densa y lo que flota ═════════════════════════════════════════════════════════════════════════ */
  /* Tablas: un plano de lectura estable siempre (sueltas, con blur base; dentro de una raíz, sin blur). */
  [data-mg-tema^="cristal-"] .mgui-table-wrap {
    background: var(--mg-vidrio-fondo-denso);
    backdrop-filter: blur(var(--mg-vidrio-desenfoque-base)) saturate(var(--mg-vidrio-saturacion));
    -webkit-backdrop-filter: blur(var(--mg-vidrio-desenfoque-base)) saturate(var(--mg-vidrio-saturacion));
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-vidrio-espesor), var(--mg-vidrio-sombra);
  }
  [data-mg-tema^="cristal-"] :is(.mgui-card, .mgui-emitir-paso, .mgui-dialog, .mgui-paleta, .mgui-ayuda__cajon) .mgui-table-wrap {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* Diálogos modales, el cajón de ayuda: se LEE encima → densa, con blur (uno a la vez, en la capa superior). */
  [data-mg-tema^="cristal-"] .mgui-dialog,
  [data-mg-tema^="cristal-"] .mgui-paleta,
  [data-mg-tema^="cristal-"] .mgui-ayuda__cajon {
    background: var(--mg-vidrio-fondo-denso);
    backdrop-filter: blur(var(--mg-vidrio-desenfoque-fuerte)) saturate(var(--mg-vidrio-saturacion));
    -webkit-backdrop-filter: blur(var(--mg-vidrio-desenfoque-fuerte)) saturate(var(--mg-vidrio-saturacion));
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-vidrio-espesor), var(--mg-vidrio-sombra);
  }
  [data-mg-tema^="cristal-"] .mgui-paleta,
  [data-mg-tema^="cristal-"] .mgui-ayuda__cajon { border-color: var(--mg-vidrio-borde-fuerte); }
  [data-mg-tema^="cristal-"] .mgui-ayuda__cabeza { background: var(--mg-vidrio-fondo-denso); }
  /* Popovers (menú ⋮, idioma, campana) y el toast: flotantes; el blur se enciende sólo con el popover ABIERTO (capa superior). */
  [data-mg-tema^="cristal-"] .mgui-menu-acciones__panel,
  [data-mg-tema^="cristal-"] .mgui-idioma__panel,
  [data-mg-tema^="cristal-"] .mgui-bandeja__panel,
  [data-mg-tema^="cristal-"] .mgui-notificacion {
    background: var(--mg-vidrio-fondo-flotante);
    border-color: var(--mg-vidrio-borde-fuerte);
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-vidrio-sombra);
  }
  [data-mg-tema^="cristal-"] .mgui-notificacion,
  [data-mg-tema^="cristal-"] .mgui-menu-acciones__panel:popover-open,
  [data-mg-tema^="cristal-"] .mgui-idioma__panel:popover-open,
  [data-mg-tema^="cristal-"] .mgui-bandeja__panel:popover-open {
    backdrop-filter: blur(var(--mg-vidrio-desenfoque-lente)) saturate(var(--mg-vidrio-saturacion));
    -webkit-backdrop-filter: blur(var(--mg-vidrio-desenfoque-lente)) saturate(var(--mg-vidrio-saturacion));
  }
  /* Desplegables ANIDADOS en un campo (país del teléfono, direcciones, selector buscable): flotantes sin blur adicional. */
  [data-mg-tema^="cristal-"] .mgui-telefono__panel,
  [data-mg-tema^="cristal-"] .mgui-direccion__panel,
  [data-mg-tema^="cristal-"] .mgui-selector-buscable__panel {
    background: var(--mg-vidrio-fondo-flotante);
    border-color: var(--mg-vidrio-borde-fuerte);
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-vidrio-sombra);
  }
  /* El desplegable del <select> personalizable (Chromium 135+); en motores sin `::picker` la regla se descarta entera. */
  [data-mg-tema^="cristal-"] :is(.mgui-moneda__control, .mgui-field__control--iconos)::picker(select) {
    background: var(--mg-vidrio-fondo-flotante);
    border-color: var(--mg-vidrio-borde-fuerte);
  }
  /* Globos (tooltips) invertidos: marca profunda al 88 % (texto claro ≥ 10:1). El rótulo del riel vive en lateral.css. */
  [data-mg-tema^="cristal-"] .mgui-satelite__globo,
  [data-mg-tema^="cristal-"] .mgui-app__acceso-rotulo { background: color-mix(in oklab, var(--mg-color-marca-profunda) 88%, transparent); }
  [data-mg-tema^="cristal-"] .mgui-ayuda__corta,
  [data-mg-tema^="cristal-"] .mgui-dato__nota { background: color-mix(in oklab, var(--mg-color-texto) 88%, transparent); }
  /* Avisos neutros: densos (suelen vivir dentro de un paso). Los de tono conservan su `-suave` y su borde semántico, con realce fino. */
  [data-mg-tema^="cristal-"] .mgui-alert:not(.mgui-alert--danger, .mgui-alert--warning, .mgui-alert--info, .mgui-alert--complete) { background: var(--mg-vidrio-fondo-denso); }
  [data-mg-tema^="cristal-"] .mgui-alert { box-shadow: var(--mg-vidrio-iluminacion), 0 2px 5px var(--mg-vidrio-contacto); }

  /* ══ 4 · CAMPO: lo que se escribe (respaldo local estable, sin blur propio) ══════════════════════════════════════════ */
  /* El control conserva su borde de control opaco (≥ 3:1, WCAG 1.4.11) y suma el realce interior (1 px arriba). */
  [data-mg-tema^="cristal-"] .mgui-field__control,
  [data-mg-tema^="cristal-"] .mgui-buscador__control,
  [data-mg-tema^="cristal-"] .mgui-telefono__pais,
  [data-mg-tema^="cristal-"] .mgui-selector-buscable__boton {
    background: var(--mg-vidrio-fondo-campo);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--mg-vidrio-iluminacion), 0 1px 2px var(--mg-vidrio-contacto);
  }
  [data-mg-tema^="cristal-"] .mgui-telefono__panel-buscar,
  [data-mg-tema^="cristal-"] .mgui-selector-buscable__busca,
  [data-mg-tema^="cristal-"] .mgui-field__control--readonly { background: var(--mg-vidrio-velo-hundido); }
  [data-mg-tema^="cristal-"] .mgui-field__control:disabled,
  [data-mg-tema^="cristal-"] .mgui-telefono__pais:disabled { background: var(--mg-vidrio-velo-hundido); box-shadow: none; }
  /* Foco: halo de 2 px de superficie entre el control y el anillo (sobre el turquesa del isotipo el anillo solo llegaba a 1:1). */
  [data-mg-tema^="cristal-"] :is(.mgui-field__control, .mgui-buscador__control, .mgui-telefono__pais, .mgui-selector-buscable__busca):focus-visible {
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--mg-color-superficie);
  }
  [data-mg-tema^="cristal-"] .mgui-telefono__panel-buscar:focus-within { outline-offset: 2px; box-shadow: 0 0 0 2px var(--mg-color-superficie); }
  /* Botones: el primario tintado como siempre (texto blanco medido) con la luz del canto; el secundario, campo con el canto
   * teñido de acción; el deshabilitado, hundido. */
  [data-mg-tema^="cristal-"] .mgui-btn--primary { box-shadow: var(--mg-vidrio-iluminacion), var(--mg-elevation-1); }
  [data-mg-tema^="cristal-"] .mgui-btn--secondary {
    background: var(--mg-vidrio-fondo-campo);
    border-color: color-mix(in oklab, var(--mg-color-accion) 45%, transparent);
    box-shadow: var(--mg-vidrio-iluminacion), var(--mg-elevation-1);
  }
  [data-mg-tema^="cristal-"] .mgui-btn--secondary:hover { background: color-mix(in oklab, var(--mg-color-accion-suave) 85%, var(--mg-color-accion) 15%); }
  [data-mg-tema^="cristal-"] .mgui-btn:is(:disabled, .is-disabled, [aria-disabled="true"]) { background: var(--mg-vidrio-velo-hundido); }

  /* ══ 5 · SELECCIÓN: el estado elegido se distingue del vidrio y se lee de inmediato ═════════════════════════════════ */
  /* La pastilla elegida («Factura»): acción sólida con blanco encima (antes: azul sobre tinte, 2,24:1 en los profundos). */
  [data-mg-tema^="cristal-"] .mgui-opcion-pill__control:checked ~ .mgui-opcion-pill__pastilla {
    background: var(--mg-vidrio-seleccion);
    border-color: var(--mg-vidrio-seleccion);
    color: var(--mg-vidrio-sobre-seleccion);
    box-shadow: var(--mg-vidrio-iluminacion);
  }
  /* La option-card elegida: velo tintado + borde de acción (la tinta sigue siendo la del tema). */
  [data-mg-tema^="cristal-"] .mgui-opcion__control:checked ~ .mgui-opcion__caja {
    background: color-mix(in oklab, var(--mg-vidrio-seleccion) 14%, var(--mg-vidrio-velo-superficie));
  }

  /* ══ 6 · VELOS: hijos que se levantan (superficie) o se hunden (fondo), sin blur propio ═════════════════════════════ */
  [data-mg-tema^="cristal-"] .mgui-chip:not(.mgui-chip--info, .mgui-chip--complete, .mgui-chip--warning, .mgui-chip--danger, .mgui-chip--accion, .mgui-chip--consulta, .mgui-chip--corregir, .mgui-chip--stock, .mgui-chip--preventa, .mgui-chip--operar, .mgui-chip--nuevo, .mgui-chip--primera, .mgui-chip--cat-1, .mgui-chip--cat-2, .mgui-chip--cat-3, .mgui-chip--cat-4, .mgui-chip--cat-5, .mgui-chip--cat-6),
  [data-mg-tema^="cristal-"] .mgui-eleccion__chip,
  [data-mg-tema^="cristal-"] .mgui-opcion-pill__pastilla,
  [data-mg-tema^="cristal-"] .mgui-opcion__caja,
  [data-mg-tema^="cristal-"] .mgui-pasos__paso:not(.mgui-pasos__paso--hecho) .mgui-pasos__marca,
  [data-mg-tema^="cristal-"] .mgui-timeline__marker,
  [data-mg-tema^="cristal-"] .mgui-paginacion__enlace:not(.is-actual, .is-disabled),
  [data-mg-tema^="cristal-"] .mgui-plegable,
  [data-mg-tema^="cristal-"] .mgui-filtros__panel,
  [data-mg-tema^="cristal-"] .mgui-accion:not(.mgui-accion--primaria),
  [data-mg-tema^="cristal-"] .mgui-tramite__hecho,
  [data-mg-tema^="cristal-"] .mgui-grafico-cotizacion,
  [data-mg-tema^="cristal-"] .mgui-paleta-pagina__opcion,
  [data-mg-tema^="cristal-"] .mgui-rediseno-barra,
  [data-mg-tema^="cristal-"] .mgui-rediseno-historial,
  [data-mg-tema^="cristal-"] .mgui-puerta__respaldo > li {
    background: var(--mg-vidrio-velo-superficie);
  }
  /* Las pastillas e insignias translúcidas llevan el filete de luz del canto (espesor), nunca un halo. */
  [data-mg-tema^="cristal-"] .mgui-opcion-pill__pastilla,
  [data-mg-tema^="cristal-"] .mgui-eleccion__chip { box-shadow: var(--mg-vidrio-iluminacion); }
  [data-mg-tema^="cristal-"] .mgui-timeline__step--done .mgui-timeline__marker { background: var(--mg-status-complete-solido); }
  [data-mg-tema^="cristal-"] .mgui-timeline__step--current .mgui-timeline__marker { background: var(--mg-status-info-suave); }
  [data-mg-tema^="cristal-"] .mgui-timeline__step--error .mgui-timeline__marker { background: var(--mg-status-danger-solido); }
  [data-mg-tema^="cristal-"] .mgui-timeline__step--blocked .mgui-timeline__marker { background: var(--mg-status-warning-suave); }
  [data-mg-tema^="cristal-"] .mgui-segmentado__grupo { background: var(--mg-vidrio-velo-hundido); }
  [data-mg-tema^="cristal-"] .mgui-segmentado__opcion:hover,
  [data-mg-tema^="cristal-"] .mgui-segmentado__opcion.is-actual,
  [data-mg-tema^="cristal-"] .mgui-segmentado__control:checked + .mgui-segmentado__opcion { background: var(--mg-vidrio-velo-superficie); }
  [data-mg-tema^="cristal-"] .mgui-eleccion__control:not(:checked) + .mgui-eleccion__chip:hover,
  [data-mg-tema^="cristal-"] .mgui-telefono__pais:hover { background: var(--mg-vidrio-velo-hundido); }
  [data-mg-tema^="cristal-"] .mgui-paginacion__enlace:not(.is-actual, .is-disabled):hover { background: var(--mg-color-accion-suave); }
  [data-mg-tema^="cristal-"] .mgui-badge:not(.mgui-badge--complete, .mgui-badge--warning, .mgui-badge--danger, .mgui-badge--info),
  [data-mg-tema^="cristal-"] .mgui-interruptor__pista,
  [data-mg-tema^="cristal-"] .mgui-opcion__icono,
  [data-mg-tema^="cristal-"] .mgui-opcion.is-disabled .mgui-opcion__caja,
  [data-mg-tema^="cristal-"] .mgui-plegable__titulo,
  [data-mg-tema^="cristal-"] .mgui-pestanas__cuenta,
  [data-mg-tema^="cristal-"] .mgui-masivas,
  [data-mg-tema^="cristal-"] .mgui-paginacion__enlace.is-disabled,
  [data-mg-tema^="cristal-"] .mgui-tramite__hecho--omitido .mgui-tramite__tilde,
  [data-mg-tema^="cristal-"] .mgui-formas-pago-iso--placeholder,
  [data-mg-tema^="cristal-"] .mgui-rediseno-agregar,
  [data-mg-tema^="cristal-"] .mgui-rediseno-historial__fila,
  [data-mg-tema^="cristal-"] [data-mg-rediseno-previa],
  [data-mg-tema^="cristal-"] .mgui-menu-acciones__boton:hover,
  [data-mg-tema^="cristal-"] .mgui-app__acceso:hover,
  [data-mg-tema^="cristal-"] .mgui-notificacion__cerrar:hover,
  [data-mg-tema^="cristal-"] .mgui-chip__quitar:hover {
    background: var(--mg-vidrio-velo-hundido);
  }

  /* ══ 7 · CRISTAL LÍQUIDO: la lente (sólo `cristal-liquido-*`) ═══════════════════════════════════════════════════════ */
  /* Superficies de contenido: la banda óptica como sombra interior (10 px con su tinte), un reflejo interior suave desde la
   * luz, y el reflejo localizado (radial hacia `--mg-reflejo-x/-y`: quieto hacia la luz; con puntero fino lo mueve el guion
   * sobre la superficie). Compuesto como capa de `background-image` sobre el mismo relleno: misma caja, mismo blur. */
  [data-mg-tema^="cristal-liquido-"] .mgui-card,
  [data-mg-tema^="cristal-liquido-"] .mgui-metric,
  [data-mg-tema^="cristal-liquido-"] .mgui-state,
  [data-mg-tema^="cristal-liquido-"] .mgui-emitir-paso {
    box-shadow:
      var(--mg-vidrio-iluminacion),
      inset 0 0 0 var(--mg-vidrio-banda) var(--mg-vidrio-fondo-banda),
      var(--mg-vidrio-sombra);
  }
  [data-mg-tema^="cristal-liquido-"] .mgui-card:not(.mgui-emitir-seccion),
  [data-mg-tema^="cristal-liquido-"] .mgui-emitir-paso {
    background-image:
      radial-gradient(circle 160px at var(--mg-reflejo-x) var(--mg-reflejo-y), var(--mg-vidrio-caustica), transparent 72%),
      linear-gradient(var(--mg-vidrio-luz-angulo), var(--mg-vidrio-canto-suave), var(--mg-vidrio-fondo-base));
  }
  /* Las raíces anidadas (velo) no repiten el reflejo. */
  [data-mg-tema^="cristal-liquido-"] :is(.mgui-card, .mgui-emitir-paso, .mgui-tramite__actual, .mgui-dialog, .mgui-metric, .mgui-state) :is(.mgui-card:not(.mgui-emitir-seccion), .mgui-metric, .mgui-state) { background-image: none; box-shadow: none; }
  /* Campos, pastillas, botones secundarios: el canto fino y direccional (realce arriba), sin banda. */
  [data-mg-tema^="cristal-liquido-"] .mgui-field__control,
  [data-mg-tema^="cristal-liquido-"] .mgui-buscador__control,
  [data-mg-tema^="cristal-liquido-"] .mgui-telefono__pais,
  [data-mg-tema^="cristal-liquido-"] .mgui-selector-buscable__boton,
  [data-mg-tema^="cristal-liquido-"] .mgui-opcion-pill__pastilla,
  [data-mg-tema^="cristal-liquido-"] .mgui-eleccion__chip { box-shadow: var(--mg-vidrio-iluminacion), 0 1px 2px var(--mg-vidrio-contacto); }
  [data-mg-tema^="cristal-liquido-"] .mgui-btn--secondary { box-shadow: var(--mg-vidrio-iluminacion), 0 1px 2px var(--mg-vidrio-contacto); }
  [data-mg-tema^="cristal-liquido-"] .mgui-btn--primary,
  [data-mg-tema^="cristal-liquido-"] .mgui-opcion-pill__control:checked ~ .mgui-opcion-pill__pastilla { box-shadow: var(--mg-vidrio-iluminacion), 0 1px 2px var(--mg-vidrio-contacto), 0 3px 9px color-mix(in oklab, var(--mg-vidrio-seleccion) 18%, transparent); }

  /* Los HOSTS de la cáscara con la ESCENA detrás (barra, lateral, riel): centro y banda como filtros HERMANOS sobre áreas
   * complementarias. El host queda transparente y sin blur; `::before` es el centro (inset = banda, blur de lente) y
   * `::after` la banda (anillo por máscara, reflejo diagonal hacia la luz, sin halo cian). Los dos quedan detrás del contenido
   * del host (z-index -1 dentro de su contexto). */
  [data-mg-tema^="cristal-liquido-"] .mgui-app-marcas,
  [data-mg-tema^="cristal-liquido-"] .mgui-app__lateral,
  [data-mg-tema^="cristal-liquido-"] .mgui-app__accesos {
    --mgui-lente-radio: 0px;
    isolation: isolate;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-mg-tema^="cristal-liquido-"] .mgui-app-marcas,
  [data-mg-tema^="cristal-liquido-"] .mgui-app__lateral { position: relative; }
  /* Lo que flota sobre contenido (pie, paleta, diálogo) conserva su relleno denso y recibe los indicios de la lente por
   * sombra interior discreta. */
  [data-mg-tema^="cristal-liquido-"] .mgui-emitir-pie,
  [data-mg-tema^="cristal-liquido-"] .mgui-paleta,
  [data-mg-tema^="cristal-liquido-"] .mgui-dialog {
    box-shadow:
      var(--mg-vidrio-iluminacion),
      inset 0 0 0 var(--mg-vidrio-banda) var(--mg-vidrio-fondo-banda),
      var(--mg-vidrio-sombra);
  }
  [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::before,
  [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::after {
    content: "";
    position: absolute;
    z-index: -1;
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
  }
  [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::before {
    inset: var(--mg-vidrio-banda);
    border-radius: max(0px, calc(var(--mgui-lente-radio) - var(--mg-vidrio-banda)));
    background: var(--mg-vidrio-fondo-lente);
    backdrop-filter: blur(var(--mg-vidrio-desenfoque-lente)) saturate(var(--mg-vidrio-saturacion));
    -webkit-backdrop-filter: blur(var(--mg-vidrio-desenfoque-lente)) saturate(var(--mg-vidrio-saturacion));
  }
  [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::after {
    inset: 0;
    padding: var(--mg-vidrio-banda);
    border-radius: var(--mgui-lente-radio);
    -webkit-mask: linear-gradient(var(--mg-color-texto) 0 0) content-box, linear-gradient(var(--mg-color-texto) 0 0);
    mask: linear-gradient(var(--mg-color-texto) 0 0) content-box, linear-gradient(var(--mg-color-texto) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background:
      linear-gradient(var(--mg-vidrio-luz-angulo), var(--mg-vidrio-canto), transparent 40%, var(--mg-vidrio-caustica)),
      var(--mg-vidrio-fondo-banda),
      var(--mg-vidrio-fondo-lente);
    box-shadow: var(--mg-vidrio-iluminacion);
  }
  /* El cajón del teléfono y el lateral pegado: densos, sin la lente (pasan por encima del isotipo). */
  [data-mg-tema^="cristal-liquido-"] .mgui-app__interruptor:checked ~ .mgui-app__lateral { background: var(--mg-vidrio-fondo-denso); }
  [data-mg-tema^="cristal-liquido-"] .mgui-app__interruptor:checked ~ .mgui-app__lateral::before,
  [data-mg-tema^="cristal-liquido-"] .mgui-app__interruptor:checked ~ .mgui-app__lateral::after { content: none; }

  /* ══ 8 · DEGRADACIÓN Y PREFERENCIAS ══════════════════════════════════════════════════════════════════════════════════ */
  /* Sin `backdrop-filter` (Firefox < 103, kioscos viejos): las raíces caen al fondo denso sin blur; la lente, a su centro. */
  @supports not (backdrop-filter: blur(1px)) {
    [data-mg-tema^="cristal-"] .mgui-card,
    [data-mg-tema^="cristal-"] .mgui-metric,
    [data-mg-tema^="cristal-"] .mgui-state,
    [data-mg-tema^="cristal-"] .mgui-skeleton--card,
    [data-mg-tema^="cristal-"] .mgui-tramite__actual,
    [data-mg-tema^="cristal-"] .mgui-emitir-paso,
    [data-mg-tema^="cristal-"] .mgui-table-wrap,
    [data-mg-tema^="cristal-"] .mgui-emitir-pie,
    [data-mg-tema^="cristal-"] .mgui-app-marcas,
    [data-mg-tema^="cristal-"] .mgui-app__lateral,
    [data-mg-tema^="cristal-"] .mgui-app__accesos,
    [data-mg-tema^="cristal-"] .mgui-cascara__nav,
    [data-mg-tema^="cristal-"] .mgui-cascara__barra,
    [data-mg-tema^="cristal-"] .mgui-paleta,
    [data-mg-tema^="cristal-"] .mgui-dialog,
    [data-mg-tema^="cristal-"] .mgui-ayuda__cajon,
    [data-mg-tema^="cristal-"] .mgui-menu-acciones__panel,
    [data-mg-tema^="cristal-"] .mgui-idioma__panel,
    [data-mg-tema^="cristal-"] .mgui-bandeja__panel,
    [data-mg-tema^="cristal-"] .mgui-notificacion {
      background: var(--mg-vidrio-fondo-denso);
    }
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::before,
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::after { content: none; }
  }
  /* Sin `mask-composite`: la banda hermana no se dibuja (queda el canto por sombra del host) y el centro cubre todo. */
  @supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::before { inset: 0; border-radius: var(--mgui-lente-radio); }
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::after { content: none; }
  }
  /* Menos transparencia, más contraste (del sistema o de la preferencia «Contraste: alto» de la App): superficies sólidas,
   * sin blur, sin banda ni reflejo; la escena queda quieta detrás (escena.css). La tinta y los bordes siguen medidos. */
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    [data-mg-tema^="cristal-"] :is(.mgui-card, .mgui-metric, .mgui-state, .mgui-skeleton--card, .mgui-tramite__actual, .mgui-emitir-paso, .mgui-table-wrap, .mgui-emitir-pie, .mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos, .mgui-cascara__nav, .mgui-cascara__barra, .mgui-paleta, .mgui-dialog, .mgui-ayuda__cajon, .mgui-menu-acciones__panel, .mgui-idioma__panel, .mgui-bandeja__panel, .mgui-notificacion, .mgui-field__control, .mgui-buscador__control, .mgui-btn--secondary, .mgui-paso-header) {
      background: var(--mg-color-superficie);
      background-image: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: var(--mg-elevation-1);
    }
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::before,
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::after { content: none; }
  }
  [data-mg-tema^="cristal-"][data-mg-contraste="alto"] :is(.mgui-card, .mgui-metric, .mgui-state, .mgui-skeleton--card, .mgui-tramite__actual, .mgui-emitir-paso, .mgui-table-wrap, .mgui-emitir-pie, .mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos, .mgui-cascara__nav, .mgui-cascara__barra, .mgui-paleta, .mgui-dialog, .mgui-ayuda__cajon, .mgui-menu-acciones__panel, .mgui-idioma__panel, .mgui-bandeja__panel, .mgui-notificacion, .mgui-field__control, .mgui-buscador__control, .mgui-btn--secondary, .mgui-paso-header) {
    background: var(--mg-color-superficie);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--mg-elevation-1);
  }
  [data-mg-tema^="cristal-liquido-"][data-mg-contraste="alto"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::before,
  [data-mg-tema^="cristal-liquido-"][data-mg-contraste="alto"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::after { content: none; }
  /* Colores forzados: el navegador pinta sus colores del sistema; sin blur ni sombras. */
  @media (forced-colors: active) {
    [data-mg-tema^="cristal-"] * { backdrop-filter: none; -webkit-backdrop-filter: none; }
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::before,
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::after { content: none; }
  }
  /* Impresión: ningún efecto decorativo; superficie sólida, bordes y sombra planos. */
  @media print {
    [data-mg-tema^="cristal-"] :is(.mgui-card, .mgui-metric, .mgui-state, .mgui-tramite__actual, .mgui-emitir-paso, .mgui-emitir-pie, .mgui-table-wrap, .mgui-field__control, .mgui-btn--primary, .mgui-btn--secondary, .mgui-dialog, .mgui-alert, .mgui-app-marcas, .mgui-app__lateral, .mgui-paso-header) {
      background: var(--mg-color-superficie);
      background-image: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
    }
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::before,
    [data-mg-tema^="cristal-liquido-"] :is(.mgui-app-marcas, .mgui-app__lateral, .mgui-app__accesos)::after { content: none; }
  }

  /* ── web/r3/fuente/whatsapp-campanas.css ── */
  /* WhatsApp Campañas y Editor de Plantillas Meta (`r3-whatsapp-campanas.ts`) */

  .mgui-wa-media-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-3);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: color-mix(in srgb, var(--mg-color-superficie) 92%, var(--mg-color-fondo));
  }

  .mgui-wa-media-preview__marco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 4rem;
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-color-fondo);
    overflow: hidden;
    flex-shrink: 0;
  }

  .mgui-wa-media-preview__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mgui-wa-media-preview__info {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    min-width: 12rem;
    flex: 1 1 14rem;
  }

  .mgui-wa-media-preview__estado {
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
  }

  .mgui-wa-media-preview__url {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-tenue);
    word-break: break-all;
  }

  .mgui-wa-media-preview__ayuda {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-sutil);
  }

  .mgui-wa-tipos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--mg-space-3);
  }

  .mgui-wa-tipo-card {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde-suave);
    border-radius: var(--mg-radius-md);
    background: color-mix(in srgb, var(--mg-color-accion-suave) 35%, var(--mg-color-superficie));
  }

  .mgui-wa-tipo-card__titulo {
    font-size: var(--mg-type-sm);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-texto);
  }

  .mgui-wa-tipo-card__texto {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-tenue);
  }

  .mgui-wa-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--mg-space-3);
    align-items: start;
  }

  .mgui-wa-burbuja {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding: var(--mg-space-3);
    border: 1px solid var(--mg-color-borde);
    border-radius: var(--mg-radius-md);
    background: color-mix(in srgb, var(--mg-color-accion-suave) 22%, var(--mg-color-superficie));
  }

  .mgui-wa-burbuja__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-2);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-brand-sobre-suave);
  }

  .mgui-wa-burbuja__media {
    width: 100%;
    max-height: 7.5rem;
    object-fit: cover;
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-color-borde-suave);
    background: var(--mg-color-fondo);
  }

  .mgui-wa-burbuja__cuerpo {
    font-size: var(--mg-type-sm);
    color: var(--mg-color-texto);
    white-space: pre-wrap;
  }

  .mgui-wa-burbuja__pie {
    font-size: var(--mg-type-xs);
    color: var(--mg-color-texto-sutil);
  }

  .mgui-wa-burbuja__cta {
    padding-top: var(--mg-space-2);
    border-top: 1px solid var(--mg-color-borde-suave);
    font-size: var(--mg-type-xs);
    font-weight: var(--mg-weight-semibold);
    color: var(--mg-color-enlace);
    text-align: center;
  }

  .mgui-wa-fila-compacta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mg-space-3);
  }

  .mgui-wa-fila-compacta .mgui-field {
    margin-bottom: 0;
  }

  .mgui-wa-fila-compacta .mgui-field__label {
    block-size: 2.25rem;
    min-block-size: 2.25rem;
    max-block-size: 2.25rem;
    align-items: flex-end;
    overflow: hidden;
  }

  .mgui-wa-fila-compacta .mgui-field__control,
  .mgui-wa-fila-compacta textarea.mgui-field__control {
    block-size: 2.5rem;
    min-block-size: 2.5rem;
    max-block-size: 2.5rem;
    resize: none;
  }

  .mgui-wa-fila-compacta__campo {
    flex: 1 1 9.5rem;
    min-width: 8.5rem;
  }

  .mgui-wa-fila-compacta__campo--largo {
    flex: 2 1 15rem;
    min-width: 13rem;
  }

  .mgui-wa-fila-compacta__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mg-space-2);
    margin-block-start: calc(2.25rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }

  .mgui-wa-fila-compacta__cta .mgui-btn {
    min-block-size: 2.5rem;
  }

  .mgui-wa-plantilla-thumb {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-color-borde-suave);
    background: var(--mg-color-fondo);
    display: block;
  }

  .mgui-wa-acciones-derecha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mg-space-1);
    margin-left: auto;
    text-align: right;
  }

  .mgui-wa-form-inline {
    display: inline-flex;
    margin: var(--mg-space-0);
  }
}

@layer mg.surface {
  /* ── web/r3/fuente/superficie.css ── */
  /*
   * Capa mg.surface: lo que cambia entre superficies. La biblioteca es una; el layout no.
   *   comercial  navegación arriba, contenido centrado
   *   app        menú lateral claro
   *   control    menú lateral + banda de identidad profunda (se sabe que es el sitio interno)
   */
  @media (min-width: 768px) {
    /* Z-R: la cáscara con el menú lateral completo (`.mgui-cascara--lateral`, Control con sesión) tiene su grilla y su corte
       (los de bo.valkyrie.ar) en `lateral.css`. */
    [data-mg-surface="app"] .mgui-cascara:not(.mgui-cascara--lateral),
    [data-mg-surface="control"] .mgui-cascara:not(.mgui-cascara--lateral) {
      grid-template-columns: 16rem minmax(0, 1fr);
      grid-template-areas: "barra barra" "nav contenido";
    }
    [data-mg-surface="app"] .mgui-cascara__nav,
    [data-mg-surface="control"] .mgui-cascara__nav {
      border-right: 1px solid var(--mg-lateral-borde);
    }
    /* ola 35b · temas cristal: la línea que separa el lateral del contenido es el canto de vidrio. */
    [data-mg-tema^="cristal-"][data-mg-surface="app"] .mgui-cascara__nav,
    [data-mg-tema^="cristal-"][data-mg-surface="control"] .mgui-cascara__nav {
      border-right-color: var(--mg-vidrio-borde-color);
    }
    [data-mg-surface="comercial"] .mgui-cascara {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "barra nav" "contenido contenido";
      border-bottom: 0;
    }
    [data-mg-surface="comercial"] .mgui-cascara__barra { border-bottom: 1px solid var(--mg-color-borde); }
    [data-mg-surface="comercial"] .mgui-cascara__nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: var(--mg-space-2) var(--mg-space-4);
      border-bottom: 1px solid var(--mg-color-borde);
    }
    [data-mg-surface="comercial"] .mgui-cascara__lista { flex-direction: row; flex-wrap: wrap; }
    [data-mg-surface="comercial"] .mgui-cascara__enlace[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--mg-color-accion); }
    [data-mg-surface="comercial"] .mgui-cascara__contenido { justify-self: center; }
  }
  [data-mg-surface="control"] .mgui-cascara__barra {
    background: var(--mg-color-marca-profunda);
    color: var(--mg-color-sobre-marca-profunda);
    border-bottom-color: var(--mg-color-marca-profunda);
  }
  [data-mg-surface="control"] .mgui-cascara__inicio { color: var(--mg-color-sobre-marca-profunda); }
  [data-mg-surface="control"] .mgui-cascara__superficie { border: 1px solid var(--mg-color-marca-acento); color: var(--mg-color-sobre-marca-profunda); }
  [data-mg-surface="control"] .mgui-cascara__rol { color: var(--mg-color-sobre-marca-profunda); }
  [data-mg-surface="control"] .mgui-cascara__abrir { border-color: var(--mg-color-sobre-marca-profunda); color: var(--mg-color-sobre-marca-profunda); }
  [data-mg-surface="control"] .mgui-cascara__barra .mgui-btn--quiet { color: var(--mg-color-sobre-marca-profunda); }
  [data-mg-surface="control"] .mgui-cascara__barra .mgui-btn--quiet:hover { background: transparent; text-decoration: underline; }
  [data-mg-surface="app"] .mgui-cascara__superficie { border: 1px solid var(--mg-color-borde); color: var(--mg-color-texto-atenuado); }
  [data-mg-surface="comercial"] .mgui-cascara__superficie { display: none; }
  /* DT-IDIOMA: en Comercial de escritorio la barra se estira y el idioma queda al final, pegado a la navegación (DV-6). */
  @media (min-width: 768px) {
    [data-mg-surface="comercial"] .mgui-cascara:has(.mgui-cascara__herramientas) { grid-template-columns: minmax(0, 1fr) auto; }
  }

  /* UX-LATERAL: la lista simple (Control sin menú lateral completo) con los mismos colores: la página donde se está parado, sólida. */
  [data-mg-surface="app"] .mgui-cascara:not(.mgui-cascara--lateral) > .mgui-cascara__nav,
  [data-mg-surface="control"] .mgui-cascara:not(.mgui-cascara--lateral) > .mgui-cascara__nav {
    background: var(--mg-lateral-fondo);
    color: var(--mg-lateral-texto);
  }
  /*
   * ola 35b · temas cristal («full glassy»): esta capa (mg.surface) le gana al vidrio flotante que `vidrio.css` pinta en
   * mg.components, así que acá el lateral/nav simple de App y Control vuelve a tomar el fondo flotante del vidrio (el
   * blur y el canto ya vienen de vidrio.css: acá sólo el fondo). Ambos atributos viven en `<html>`; los temas sólidos no
   * cambian porque `[data-mg-tema^="cristal-"]` no los alcanza. La banda de identidad de Control (`.mgui-cascara__barra`,
   * marca profunda) queda opaca a propósito: es la señal de «sitio interno».
   */
  [data-mg-tema^="cristal-"][data-mg-surface="app"] .mgui-cascara:not(.mgui-cascara--lateral) > .mgui-cascara__nav,
  [data-mg-tema^="cristal-"][data-mg-surface="control"] .mgui-cascara:not(.mgui-cascara--lateral) > .mgui-cascara__nav {
    background: var(--mg-vidrio-fondo-flotante);
  }
  [data-mg-surface="app"] .mgui-cascara:not(.mgui-cascara--lateral) .mgui-cascara__enlace,
  [data-mg-surface="control"] .mgui-cascara:not(.mgui-cascara--lateral) .mgui-cascara__enlace { color: var(--mg-lateral-texto); }
  [data-mg-surface="app"] .mgui-cascara:not(.mgui-cascara--lateral) .mgui-cascara__enlace--pendiente,
  [data-mg-surface="control"] .mgui-cascara:not(.mgui-cascara--lateral) .mgui-cascara__enlace--pendiente { color: var(--mg-lateral-atenuado); }
  [data-mg-surface="app"] .mgui-cascara:not(.mgui-cascara--lateral) a.mgui-cascara__enlace:hover:not([aria-current="page"]),
  [data-mg-surface="control"] .mgui-cascara:not(.mgui-cascara--lateral) a.mgui-cascara__enlace:hover:not([aria-current="page"]) {
    background: color-mix(in oklab, var(--mg-lateral-texto) 10%, transparent);
  }
  [data-mg-surface="app"] .mgui-cascara:not(.mgui-cascara--lateral) .mgui-cascara__enlace[aria-current="page"],
  [data-mg-surface="control"] .mgui-cascara:not(.mgui-cascara--lateral) .mgui-cascara__enlace[aria-current="page"] {
    background: var(--mg-lateral-activo);
    color: var(--mg-lateral-sobre-activo);
    box-shadow: none;
  }
}

@layer mg.utilities {
  /* ── web/r3/fuente/utilidades.css ── */
  /* Capa mg.utilities: pocas y con propósito. */
  .mgui-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .mgui-num { font-variant-numeric: tabular-nums; }
  /*
   * Variante «fuerte» de la columna numérica: tabular-nums + "tnum" explicito. En una lista de
   * importes del libro, cada cifra ocupa el mismo ancho que la de arriba — alineación visual sin
   * tabular-figures a mano. Compone con la monoespaciada del sistema cuando se pide por tipografía.
   */
  .mgui-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
  .mgui-nums--mono { font-family: var(--mg-font-numeric); }
  /*
   * 9U · identificadores fiscales (CUIT, CAE, número de comprobante, código de operación): un número
   * que la gente LEE y a veces TIPEA; se muestra en la monoespaciada numérica con tabular-nums para que
   * dos CUIT uno debajo del otro queden alineados dígito a dígito. Un leve `letter-spacing` evita que
   * los grupos de dos cifras se peguen al imprimir.
   */
  .mgui-ident { font-family: var(--mg-font-numeric); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
  .mgui-stack { display: flex; flex-direction: column; gap: var(--mg-space-4); }
  .mgui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
  /* Ola 13 · cuando `.mgui-cluster` actúa como fila de campos (`.mgui-field`), se alinea por arriba (`flex-start`) para que un
   * subtítulo / ayuda debajo de alguno de los inputs no empuje ese input hacia arriba respecto de sus vecinos. Los botones directos
   * de la fila bajan exactamente el alto del rótulo (`1.75rem + var(--mg-space-1)`) para quedar alineados con los `<input>`. */
  .mgui-cluster:has(> .mgui-field) { align-items: flex-start; }
  .mgui-cluster:has(> .mgui-field) > .mgui-field { margin-block-end: 0; }
  .mgui-cluster:has(> .mgui-field > .mgui-field__label) > .mgui-btn {
    margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }
  /* Z-R: una lista en racimo (las pestañas de una sección de Control, los filtros de una lista) no lleva viñetas ni sangría. */
  :is(ul, ol).mgui-cluster { margin-block: 0; padding-inline-start: 0; list-style: none; }
  /*
   * Z-R (coordinador, 17/10): una NAVEGACIÓN armada con `mgui-cluster` (las secciones de una pantalla: «Planes · Importaciones»,
   * «Postventa · Garantías»…) va en UN renglón que se desplaza en horizontal cuando no entra, como las pestañas: sin viñetas, sin
   * saltos de renglón raros y sin desalinear. El aire de arriba y abajo es para que el anillo de foco no quede recortado.
   */
  nav > :is(ul, ol).mgui-cluster {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: var(--mg-focus-ring-offset);
    padding-inline: var(--mg-focus-ring-offset);
    scrollbar-width: thin;
  }
  nav > :is(ul, ol).mgui-cluster > li { flex: none; }
  /* min(16rem, 100%): en un contenedor más angosto que 16rem (320 px con texto al 200 %: 16rem = 512 px) la pista cede
     en vez de desbordar la página. En contenedores anchos es idéntica a minmax(16rem, 1fr). */
  /* `--mgui-grid-columnas` es el gancho de la hoja pública (fichas de /planes); sin ella, el valor de siempre. */
  .mgui-grid { display: grid; grid-template-columns: var(--mgui-grid-columnas, repeat(auto-fit, minmax(min(16rem, 100%), 1fr))); gap: var(--mg-space-4); }
  /* Ola 17 · las filas de cards KPI (`.mgui-grid[data-mg-kpis]`, `.mgui-grid:has(> .mgui-kpi)`) reparten el ancho de forma
   * inteligente: las cards con un dato corto se acortan al espacio necesario y ceden el espacio disponible a las cards con
   * importes largos para evitar el desbordamiento de los montos. */
  .mgui-grid[data-mg-kpis],
  .mgui-grid:has(> .mgui-kpi) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .mgui-grid[data-mg-kpis] > *,
  .mgui-grid:has(> .mgui-kpi) > .mgui-kpi {
    flex: 1 1 auto;
    min-inline-size: min(8.5rem, 100%);
  }
  .mgui-grid:has(> .mgui-field) { align-items: start; }
  .mgui-grid:has(> .mgui-field) > .mgui-field { margin-block-end: 0; }
  .mgui-grid:has(> .mgui-field > .mgui-field__label) > .mgui-btn {
    margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }
  .mgui-muted { color: var(--mg-color-texto-atenuado); }
  /*
   * APARIENCIA POR PÁGINA · «Sin movimiento» ELEGIDO por la persona (`data-mg-movimiento="sin"` en `<html>`, lo emite el
   * resolutor): además de los tiempos del movimiento reducido (bloque de tokens del generador), toda animación y transición
   * de la interfaz corre una sola vez y en un instante (la técnica C39 de WCAG), así nada se mueve aunque el sistema no haya
   * pedido reducirlo. Vive acá porque es la única capa que admite `!important` (sin él, las reglas de cada componente le
   * ganarían por orden). Los indicadores de espera quedan afuera: R3 los quiere más lentos, no detenidos (sus tokens ya bajan).
   * La escena 3D del isotipo lee el mismo atributo por su cuenta (es un lienzo, no CSS).
   */
  /*
   * APARIENCIA POR PÁGINA · dentro del panel y de la página de ajustes, `hidden` MANDA aunque el elemento lleve `mgui-stack`
   * (display: flex, de esta misma capa, que le gana al `display: none` del navegador y a cualquier regla de componentes): el
   * alcance que no está activo, la vista previa del general y los controles de escena que un estilo no admite se esconden de
   * verdad. Acotado a esos dos contenedores a propósito: un `[hidden]` global cambiaría pantallas que hoy se ven por accidente.
   */
  .mgui-apariencia-panel [hidden],
  .mgui-apariencia-pagina [hidden] { display: none !important; }
  [data-mg-movimiento="sin"] :where(*, *::before, *::after):not(.mgui-spinner, .mgui-btn__spinner) {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /*
   * ola 34 · un campo que ocupa la FILA entera de su contenedor (la fecha del comprobante con sus días habilitados en
   * `/app/emitir`). Vive acá y no junto a los `mgui-field--sm/md` de `emitir.css` porque tiene que ganarle al tope por campo
   * de FORMS-ANCHO (`max-inline-size: var(--mg-formulario-texto)`, de esta misma capa) y a los `flex` por contenedor de la capa
   * de componentes: desde `mg.components` no se puede (capa anterior, y `!important` sólo se admite acá).
   */
  .mgui-field--fila { flex: 1 1 100%; min-inline-size: 0; max-inline-size: none; grid-column: 1 / -1; }

  /* FORMS-ANCHO INICIO */
  /*
   * Distribución compartida de formularios R3.
   *
   * Se aplica también a los componentes R3 dentro de la cáscara antigua de App,
   * que no declara data-mg-surface. Los controles del legado viven en el puente.
   *
   * Los formularios con tablas conservan su ancho. Los filtros en cluster y el
   * comparador comercial conservan su distribución horizontal. Los marcadores
   * permiten comparar en navegador la geometría móvil anterior y posterior.
   *
   * Cortes del sistema: --mg-bp-md = 768px, --mg-bp-lg = 1024px.
   * Las variables CSS no se pueden usar como condiciones de @media.
   */
  @media (min-width: 768px) {
    form:where(.mgui-stack, .mgui-formulario, :has(.mgui-field))
      :where(fieldset) {
      min-inline-size: 0;
      max-inline-size: 100%;
    }

    form:where(.mgui-stack, .mgui-formulario, :has(.mgui-field))
      :where(.mgui-field) {
      min-inline-size: 0;
      max-inline-size: var(--mg-formulario-texto);
    }

    /*
     * 30/10/2026 · «Emitir comprobante» (`form.mgui-emitir`): el titular pidió que cada renglón tome todo el ancho
     * visible. El tope de lectura por campo de arriba (40rem) frenaba al único campo elástico de la fila (el nombre
     * `--span-2`, el correo) y el resto del renglón quedaba vacío a la derecha. En el asistente no corre: sus filas
     * (`.mgui-emisor-grid`, `.mgui-emitir-detalle-row`, emitir.css) reparten el sobrante entre sus campos. El tope del
     * formulario tampoco: hoy lo esquiva por `:not(:has(table))` y el ancho de la pantalla no debe depender de que
     * haya una tabla. `--acotado` queda como está (es el recorte pedido campo por campo). Vive acá, en la misma capa
     * `mg.utilities` y con más especificidad: desde `mg.components` ninguna regla le ganaría sin `!important`.
     */
    form.mgui-emitir { max-inline-size: none; }
    form.mgui-emitir .mgui-field:not(.mgui-field--acotado) { max-inline-size: none; }
    /*
     * 1810 · el formulario de UN renglón fuera de Emitir (`form.mgui-form-renglon`: los pasos y los documentos de un tipo de
     * importación, `r3-importaciones-tipos.ts`). Mismo motivo que el de arriba: su fila (`.mgui-emisor-grid`) reparte el ancho
     * entre sus campos y el tope del formulario (32rem) la partía en dos o tres renglones en la pc.
     */
    form.mgui-form-renglon { max-inline-size: none; }
    form.mgui-form-renglon .mgui-field:not(.mgui-field--acotado) { max-inline-size: none; }

    form:where(.mgui-stack, .mgui-formulario, :has(.mgui-field)):not(:where(.mgui-cluster, .mgui-mkt__comparar)):not(:has(table)) {
      min-inline-size: 0;
      max-inline-size: var(--mg-formulario-max);
    }

    form:where(.mgui-stack, .mgui-formulario, :has(.mgui-field)):not(:where(.mgui-cluster, .mgui-mkt__comparar)):not(:has(table)):has(textarea) {
      max-inline-size: var(--mg-formulario-texto);
    }

    /* En la cáscara de la App, las tarjetas (<form class="mgui-card">), los filtros/buscadores,
       los formularios con grillas propias y los formularios dentro de tarjetas ocupan todo el ancho
       disponible de su contenedor sin truncarse a mitad de pantalla. */
    :is(
      .mgui-app__contenido form:is(
        .mgui-card,
        .mgui-pagar__filtros,
        .mgui-stock__buscar,
        .mgui-prod-columnas__formulario,
        .mgui-prod-por-pagina,
        [method="get"],
        [role="search"],
        :has(.mgui-grid, .mgui-emisor-grid, .mgui-stock__fila)
      ),
      .mgui-app__contenido .mgui-card form
    ) {
      max-inline-size: none;
    }

    :is(
      .mgui-app__contenido form:is(
        .mgui-card,
        .mgui-pagar__filtros,
        .mgui-stock__buscar,
        .mgui-prod-columnas__formulario,
        .mgui-prod-por-pagina,
        [method="get"],
        [role="search"],
        :has(.mgui-grid, .mgui-emisor-grid, .mgui-stock__fila)
      ),
      .mgui-app__contenido .mgui-card form
    ) .mgui-field:not(.mgui-field--acotado) {
      max-inline-size: none;
    }

    .mgui-field__control {
      min-inline-size: 0;
      max-inline-size: 100%;
    }

    /* Se limita el control, no la etiqueta ni la explicación del campo. */
    :is(.mgui-field__control, .mgui-hero__form input):is(
      [type="date"],
      [type="number"],
      [inputmode="numeric"],
      [name="codigo"],
      [name="cuit"],
      [name^="cuit_"],
      [name="documento"],
      [name="doc_nro"],
      [name="doc"]
    ) {
      max-inline-size: min(100%, var(--mg-campo-corto));
    }

    /* F-VC: la moneda ya no se escribe (tres letras): es el selector de la lista oficial con su ícono, su nombre y su código. */
    .mgui-field__control.mgui-moneda__control {
      max-inline-size: min(100%, var(--mg-formulario-columna));
    }

    :is(.mgui-field__control, .mgui-hero__form input)[inputmode="decimal"] {
      max-inline-size: min(100%, var(--mg-campo-importe));
    }

    :is(.mgui-field__control, .mgui-hero__form input)[autocomplete="one-time-code"] {
      max-inline-size: min(100%, var(--mg-campo-codigo));
    }

    form .mgui-btn {
      inline-size: fit-content;
      max-inline-size: 100%;
      justify-self: start;
      white-space: normal;
      overflow-wrap: normal;
    }
    form :is(table, .mgui-cluster) .mgui-btn {
      white-space: nowrap;
    }
    /*
     * productos · G (1871) · los botones de las filas del sub-bloque 2c de Emitir («Ver», «Facturar», «Emitir pedido», «Clonar») no
     * se parten a mitad de palabra: con `overflow-wrap: anywhere` su ancho mínimo es una letra y la tabla angostaba la columna de
     * las acciones hasta «Factur/ar» (más con el chip de la reserva en «Estado»). Misma capa y mismo motivo que `form.mgui-emitir`.
     */
    form.mgui-emitir .mgui-emitir-pyp__acciones > .mgui-btn { white-space: nowrap; overflow-wrap: normal; }

    /* El gap de stack ya separa campos; no se suma otro margen inferior. */
    form.mgui-stack .mgui-field {
      margin-block-end: 0;
    }

    .mgui-hero__form > .mgui-btn {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 1024px) {
    /*
     * Cuatro o más campos hermanos: grilla por orden del documento.
     * Los hidden no cuentan y nunca se cambia su display.
     * Las contraseñas mantienen el recorrido de una columna.
     * El mínimo de columna evita comprimir formularios dentro de tarjetas angostas.
     * Con máximo 64rem y mínimo 24rem nunca aparecen tres columnas.
     */
    form.mgui-stack:has(> .mgui-field ~ .mgui-field ~ .mgui-field ~ .mgui-field):not(:has(table, input[type="password"])) {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mg-formulario-columna)), 1fr));
      align-items: start;
      gap: var(--mg-space-6);
      max-inline-size: var(--mg-formulario-grilla);
    }

    :is(
      .mgui-app__contenido form.mgui-stack.mgui-card,
      .mgui-app__contenido .mgui-card form.mgui-stack
    ):has(> .mgui-field ~ .mgui-field ~ .mgui-field ~ .mgui-field):not(:has(table, input[type="password"])) {
      max-inline-size: none;
    }

    form.mgui-stack:has(> .mgui-field ~ .mgui-field ~ .mgui-field ~ .mgui-field):not(:has(table, input[type="password"])) > * {
      min-inline-size: 0;
      grid-column: 1 / -1;
    }

    form.mgui-stack:has(> .mgui-field ~ .mgui-field ~ .mgui-field ~ .mgui-field):not(:has(table, input[type="password"])) > .mgui-field:has(> .mgui-field__control) {
      grid-column: auto;
    }

    form.mgui-stack:has(> .mgui-field ~ .mgui-field ~ .mgui-field ~ .mgui-field):not(:has(table, input[type="password"])) > .mgui-field:has(
      textarea,
      [name="domicilio"],
      [autocomplete="street-address"],
      [autocomplete="one-time-code"]
    ) {
      grid-column: 1 / -1;
    }
  }
  /* FORMS-ANCHO FIN */
}

/*
 * F-VC · los temas por persona y la escala por dispositivo. SIGUEN en la capa mg.tokens: es un segundo bloque de la
 * misma capa (el orden de capas lo fijó la primera línea), aparte del :root de R3 para no mezclar sus valores literales.
 */
@layer mg.tokens {
  /* ── F-VC · temas por persona (Valkyrie L9): los roles y las derivadas medidos contra cada tema ── */
  /* tema «blanco» (claro, 1 de 20) */
  [data-mg-tema="blanco"] {
    color-scheme: light;
    --mg-color-fondo: #F7FAFF;
    --mg-color-superficie: #FFFFFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #64748B;
    --mg-color-borde: #DCE2E9;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #DCE2E9;
    --mg-color-esqueleto-brillo: #FFFFFF;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #2563EB;
    --mg-money-positive-texto: #007E56;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #00A471;
    --mg-status-complete-texto: #007C6F;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #9A6100;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #CA8100;
    --mg-status-danger-texto: #D4252D;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #2169DA;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2563EB;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
  }

  /* tema «claro» (claro, 2 de 20) */
  [data-mg-tema="claro"] {
    color-scheme: light;
    --mg-color-fondo: #F8FAFC;
    --mg-color-superficie: #FFFFFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #64748B;
    --mg-color-borde: #E2E8F0;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #E2E8F0;
    --mg-color-esqueleto-brillo: #F8FAFC;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #2563EB;
    --mg-money-positive-texto: #007E56;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #00A975;
    --mg-status-complete-texto: #007C6F;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #9A6100;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #CE8400;
    --mg-status-danger-texto: #D4252D;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #2169DA;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2563EB;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
  }

  /* tema «perla» (claro, 3 de 20) */
  [data-mg-tema="perla"] {
    color-scheme: light;
    --mg-color-fondo: #ECF2F9;
    --mg-color-superficie: #FAFCFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #5E6E85;
    --mg-color-borde: #D4D9E1;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #D4D9E1;
    --mg-color-esqueleto-brillo: #FAFCFF;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #2563EB;
    --mg-money-positive-texto: #007E56;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #009F6E;
    --mg-status-complete-texto: #007C6F;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #039C8C;
    --mg-status-warning-texto: #9A6100;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #C27C00;
    --mg-status-danger-texto: #D4252D;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #2169DA;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2563EB;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
  }

  /* tema «arena» (claro, 4 de 20) */
  [data-mg-tema="arena"] {
    color-scheme: light;
    --mg-color-fondo: #F3EEE4;
    --mg-color-superficie: #FDFAF4;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #5D6D83;
    --mg-color-borde: #DBD5CC;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #DBD5CC;
    --mg-color-esqueleto-brillo: #FDFAF4;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #E9F1FF;
    --mg-color-enlace: #2461E9;
    --mg-money-positive-texto: #007B54;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #D9F9E8;
    --mg-money-positive-borde: #009D6C;
    --mg-status-complete-texto: #007A6E;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #D9F8F2;
    --mg-status-complete-borde: #009A8A;
    --mg-status-warning-texto: #986000;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEDD9;
    --mg-status-warning-borde: #C07A00;
    --mg-status-danger-texto: #D2222B;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEBE9;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #1F67D9;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #E8F1FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2461E9;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #E9F1FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
  }

  /* tema «mercadolibre» (claro, 5 de 20) */
  [data-mg-tema="mercadolibre"] {
    color-scheme: light;
    --mg-color-fondo: #E8EDF5;
    --mg-color-superficie: #FFFFFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #5C6B82;
    --mg-color-borde: #CFD5DC;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #4480F4;
    --mg-color-marca-profunda: #FFE64B;
    --mg-color-sobre-marca-profunda: #0B1F44;
    --mg-color-esqueleto: #CFD5DC;
    --mg-color-esqueleto-brillo: #FFFFFF;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #3570E3;
    --mg-color-accion-hover: #2660D2;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #2B65D7;
    --mg-money-positive-texto: #007B54;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #009B6B;
    --mg-status-complete-texto: #00796C;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #009989;
    --mg-status-warning-texto: #975F00;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #BE7900;
    --mg-status-danger-texto: #D01F2A;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #1E65D7;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2B65D7;
    --mg-brand-blue-solido: #3570E3;
    --mg-brand-blue-solido-hover: #2660D2;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #4480F4;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #3570E3;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #002472;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
  }

  /* tema «gris» (claro, 6 de 20) */
  [data-mg-tema="gris"] {
    color-scheme: light;
    --mg-color-fondo: #DBE0E8;
    --mg-color-superficie: #EFF2F7;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #55647B;
    --mg-color-borde: #C2C8CF;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #C2C8CF;
    --mg-color-esqueleto-brillo: #EFF2F7;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #DCE8FF;
    --mg-color-enlace: #1A57DF;
    --mg-money-positive-texto: #00714D;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #D1F1E0;
    --mg-money-positive-borde: #009164;
    --mg-status-complete-texto: #006F63;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #D1F0EA;
    --mg-status-complete-borde: #008E80;
    --mg-status-warning-texto: #8B5700;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FAE4CC;
    --mg-status-warning-borde: #B27100;
    --mg-status-danger-texto: #C70F22;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFDFDC;
    --mg-status-danger-borde: #EA3E3F;
    --mg-status-info-texto: #125CCD;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #DBE9FF;
    --mg-status-info-borde: #337AED;
    --mg-brand-blue-texto: #1A57DF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #DCE8FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
  }

  /* tema «crepusculo» (oscuro, 7 de 20) */
  [data-mg-tema="crepusculo"] {
    color-scheme: dark;
    --mg-color-fondo: #2A2E34;
    --mg-color-superficie: #363B42;
    --mg-color-texto: #EFF2F6;
    --mg-color-texto-atenuado: #A3ACB8;
    --mg-color-borde: #4E535A;
    --mg-color-borde-control: #8B939F;
    --mg-color-deshabilitado: #6E7277;
    --mg-color-foco: #407DFF;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #4E535A;
    --mg-color-esqueleto-brillo: #43484F;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #3C4D6E;
    --mg-color-enlace: #9CBEFF;
    --mg-money-positive-texto: #47D89E;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #2C5743;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #5AD2C1;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #30554F;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #FFAA32;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #624727;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #FFA49C;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #6A403C;
    --mg-status-danger-borde: #F14646;
    --mg-status-info-texto: #96BEFF;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #394D6E;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #9CBEFF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #3C4D6E;
    --mg-brand-blue-borde: #407DFF;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #ABC8FF;
    --mg-categoria-1-fondo: #3D556D;
    --mg-categoria-1-texto: #99CBFE;
    --mg-categoria-2-fondo: #2E5B5D;
    --mg-categoria-2-texto: #78D7DC;
    --mg-categoria-3-fondo: #3E5B44;
    --mg-categoria-3-texto: #9AD6A5;
    --mg-categoria-4-fondo: #5F5132;
    --mg-categoria-4-texto: #E0C281;
    --mg-categoria-5-fondo: #6C4842;
    --mg-categoria-5-texto: #FCB2A4;
    --mg-categoria-6-fondo: #594C69;
    --mg-categoria-6-texto: #D5B9F7;
    --mg-elevation-color: oklch(0 0 0 / .45);
  }

  /* tema «oscuro» (oscuro, 8 de 20) */
  [data-mg-tema="oscuro"] {
    color-scheme: dark;
    --mg-color-fondo: #15191E;
    --mg-color-superficie: #20242B;
    --mg-color-texto: #EFF2F6;
    --mg-color-texto-atenuado: #A3ACB8;
    --mg-color-borde: #393D45;
    --mg-color-borde-control: #6D7580;
    --mg-color-deshabilitado: #55585E;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #393D45;
    --mg-color-esqueleto-brillo: #2C3138;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #253554;
    --mg-color-enlace: #6A9CFF;
    --mg-money-positive-texto: #10B981;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #123F2C;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #33B2A1;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #173D37;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #F59E0B;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #492F0E;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #FF6C65;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #502825;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #609CFF;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #233554;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #6A9CFF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #253554;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #A9C6FF;
    --mg-categoria-1-fondo: #263C54;
    --mg-categoria-1-texto: #91C3F6;
    --mg-categoria-2-fondo: #134245;
    --mg-categoria-2-texto: #71D0D5;
    --mg-categoria-3-fondo: #27422C;
    --mg-categoria-3-texto: #94CF9F;
    --mg-categoria-4-fondo: #46381A;
    --mg-categoria-4-texto: #D8BA79;
    --mg-categoria-5-fondo: #52302B;
    --mg-categoria-5-texto: #F2A89B;
    --mg-categoria-6-fondo: #413450;
    --mg-categoria-6-texto: #CBAFED;
    --mg-elevation-color: oklch(0 0 0 / .45);
  }

  /* tema «carbon» (oscuro, 9 de 20) */
  [data-mg-tema="carbon"] {
    color-scheme: dark;
    --mg-color-fondo: #05070C;
    --mg-color-superficie: #0E1218;
    --mg-color-texto: #EFF2F6;
    --mg-color-texto-atenuado: #A3ACB8;
    --mg-color-borde: #252930;
    --mg-color-borde-control: #5A616C;
    --mg-color-deshabilitado: #3F4348;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #252930;
    --mg-color-esqueleto-brillo: #191D24;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #12203E;
    --mg-color-enlace: #4883FF;
    --mg-money-positive-texto: #10B981;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #00291A;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #0F9F8F;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #002823;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #F59E0B;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #321C00;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #F34847;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #3A1412;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #3E85F9;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #0F213E;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #4883FF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #12203E;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #A9C6FF;
    --mg-categoria-1-fondo: #12283E;
    --mg-categoria-1-texto: #91C3F6;
    --mg-categoria-2-fondo: #002D2F;
    --mg-categoria-2-texto: #71D0D5;
    --mg-categoria-3-fondo: #122D19;
    --mg-categoria-3-texto: #94CF9F;
    --mg-categoria-4-fondo: #322405;
    --mg-categoria-4-texto: #D8BA79;
    --mg-categoria-5-fondo: #3B1C17;
    --mg-categoria-5-texto: #F2A89B;
    --mg-categoria-6-fondo: #2C203A;
    --mg-categoria-6-texto: #CBAFED;
    --mg-elevation-color: oklch(0 0 0 / .45);
  }

  /* tema «negro» (oscuro, 10 de 20) */
  [data-mg-tema="negro"] {
    color-scheme: dark;
    --mg-color-fondo: #000102;
    --mg-color-superficie: #020307;
    --mg-color-texto: #EFF2F6;
    --mg-color-texto-atenuado: #A3ACB8;
    --mg-color-borde: #252930;
    --mg-color-borde-control: #626A75;
    --mg-color-deshabilitado: #2B2E33;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #252930;
    --mg-color-esqueleto-brillo: #080B11;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #030D29;
    --mg-color-enlace: #3272FB;
    --mg-money-positive-texto: #10B981;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #00140A;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #0F9F8F;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #001410;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #F59E0B;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #190C00;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #EF4444;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #240203;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #3B82F6;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #010E29;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #3272FB;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #030D29;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #A9C6FF;
    --mg-categoria-1-fondo: #011429;
    --mg-categoria-1-texto: #91C3F6;
    --mg-categoria-2-fondo: #001819;
    --mg-categoria-2-texto: #71D0D5;
    --mg-categoria-3-fondo: #011A07;
    --mg-categoria-3-texto: #94CF9F;
    --mg-categoria-4-fondo: #1C1200;
    --mg-categoria-4-texto: #D8BA79;
    --mg-categoria-5-fondo: #260906;
    --mg-categoria-5-texto: #F2A89B;
    --mg-categoria-6-fondo: #190D25;
    --mg-categoria-6-texto: #CBAFED;
    --mg-elevation-color: oklch(0 0 0 / .45);
  }

  /* tema «cristal-claro» (claro, 11 de 20) */
  [data-mg-tema="cristal-claro"] {
    color-scheme: light;
    --mg-color-fondo: #EFF5F9;
    --mg-color-superficie: #FEFFFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #313F54;
    --mg-color-borde: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 14%, transparent);
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #D7DDE0;
    --mg-color-esqueleto-brillo: #FEFFFF;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #0031A2;
    --mg-money-positive-texto: #004830;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #00A16F;
    --mg-status-complete-texto: #00473F;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #099D8D;
    --mg-status-warning-texto: #5A3600;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #C47D00;
    --mg-status-danger-texto: #820010;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #00398E;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #0031A2;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
    --mg-vidrio-transparencia-base: 0.58;
    --mg-vidrio-transparencia-lente: 0.80;
    --mg-vidrio-transparencia-campo: 0.93;
    --mg-vidrio-transparencia-densa: 0.94;
    --mg-vidrio-fondo-base: color-mix(in oklab, var(--mg-color-superficie) 58%, transparent);
    --mg-vidrio-fondo-lente: color-mix(in oklab, var(--mg-color-superficie) 80%, transparent);
    --mg-vidrio-fondo-campo: color-mix(in oklab, var(--mg-color-superficie) 93%, transparent);
    --mg-vidrio-fondo-denso: color-mix(in oklab, var(--mg-color-superficie) 94%, transparent);
    --mg-vidrio-fondo-flotante: color-mix(in oklab, var(--mg-color-superficie) 96%, transparent);
    --mg-vidrio-velo-superficie: color-mix(in oklab, var(--mg-color-superficie) 46%, transparent);
    --mg-vidrio-velo-hundido: color-mix(in oklab, var(--mg-color-fondo) 72%, transparent);
    --mg-vidrio-desenfoque-base: 18px;
    --mg-vidrio-desenfoque-lente: 15px;
    --mg-vidrio-desenfoque-fuerte: 20px;
    --mg-vidrio-saturacion: 1.15;
    --mg-vidrio-banda: 0px;
    --mg-vidrio-fondo-banda: transparent;
    --mg-vidrio-borde-color: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 14%, transparent);
    --mg-vidrio-borde-fuerte: color-mix(in oklab, var(--mg-neutral-white) 72%, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 10%);
    --mg-vidrio-borde-suave: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 8%, transparent);
    --mg-vidrio-canto: color-mix(in oklab, var(--mg-neutral-white) 75%, transparent);
    --mg-vidrio-canto-suave: color-mix(in oklab, var(--mg-color-superficie) 64%, transparent);
    --mg-vidrio-canto-sombra: color-mix(in oklab, var(--mg-neutral-white) 35%, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 14%);
    --mg-vidrio-caustica: color-mix(in oklab, var(--mg-neutral-white) 28%, transparent);
    --mg-vidrio-iluminacion: inset 0 1px 0 color-mix(in oklab, var(--mg-neutral-white) 75%, transparent);
    --mg-vidrio-espesor: inset 0 -1px 0 color-mix(in oklab, var(--mg-neutral-white) 35%, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 14%);
    --mg-vidrio-sombra: 0 12px 32px color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 10%, transparent), 0 2px 5px color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 5%, transparent);
    --mg-vidrio-contacto: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 5%, transparent);
    --mg-vidrio-luz-angulo: 135deg;
    --mg-vidrio-seleccion: var(--mg-color-accion);
    --mg-vidrio-sobre-seleccion: var(--mg-color-sobre-solido);
    --mg-escena-base: #EBF2F6;
    --mg-escena-azul: #BCDAF4;
    --mg-escena-turquesa: #BFE3E0;
    --mg-escena-bruma: #DCDEF2;
    --mg-escena-extremo: #A0AAB7;
    --mg-escena-velo: 67%;
    --mg-escena-velo-telefono: 67%;
    --mg-escena-exposicion: 0.81;
    --mg-color-borde-suave: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 8%, transparent);
  }

  /* tema «cristal-profundo» (oscuro, 12 de 20) */
  [data-mg-tema="cristal-profundo"] {
    color-scheme: dark;
    --mg-color-fondo: #05161E;
    --mg-color-superficie: #171F23;
    --mg-color-texto: #EEF3F5;
    --mg-color-texto-atenuado: #B2C0C8;
    --mg-color-borde: color-mix(in oklab, var(--mg-neutral-white) 18%, transparent);
    --mg-color-borde-control: #627077;
    --mg-color-deshabilitado: #4C5256;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #30383D;
    --mg-color-esqueleto-brillo: #232C30;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #1F2E4D;
    --mg-color-enlace: #9CBEFF;
    --mg-money-positive-texto: #43D59B;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #093826;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #57CFBE;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #103631;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #FFAD3C;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #422906;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #FFA69E;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #49221F;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #96BEFF;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #1C2F4D;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #9CBEFF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #1F2E4D;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #A9C6FF;
    --mg-categoria-1-fondo: #1F364D;
    --mg-categoria-1-texto: #91C3F6;
    --mg-categoria-2-fondo: #0A3C3E;
    --mg-categoria-2-texto: #71D0D5;
    --mg-categoria-3-fondo: #203B26;
    --mg-categoria-3-texto: #94CF9F;
    --mg-categoria-4-fondo: #403213;
    --mg-categoria-4-texto: #D8BA79;
    --mg-categoria-5-fondo: #4B2A25;
    --mg-categoria-5-texto: #F2A89B;
    --mg-categoria-6-fondo: #3A2D49;
    --mg-categoria-6-texto: #CBAFED;
    --mg-elevation-color: oklch(0 0 0 / .45);
    --mg-vidrio-transparencia-base: 0.33;
    --mg-vidrio-transparencia-lente: 0.32;
    --mg-vidrio-transparencia-campo: 0.64;
    --mg-vidrio-transparencia-densa: 0.88;
    --mg-vidrio-fondo-base: color-mix(in oklab, var(--mg-color-superficie) 33%, transparent);
    --mg-vidrio-fondo-lente: color-mix(in oklab, var(--mg-color-superficie) 32%, transparent);
    --mg-vidrio-fondo-campo: color-mix(in oklab, var(--mg-color-superficie) 64%, transparent);
    --mg-vidrio-fondo-denso: color-mix(in oklab, var(--mg-color-superficie) 88%, transparent);
    --mg-vidrio-fondo-flotante: color-mix(in oklab, var(--mg-color-superficie) 88%, transparent);
    --mg-vidrio-velo-superficie: color-mix(in oklab, var(--mg-color-superficie) 28%, transparent);
    --mg-vidrio-velo-hundido: color-mix(in oklab, var(--mg-color-fondo) 38%, transparent);
    --mg-vidrio-desenfoque-base: 16px;
    --mg-vidrio-desenfoque-lente: 20px;
    --mg-vidrio-desenfoque-fuerte: 20px;
    --mg-vidrio-saturacion: 1.36;
    --mg-vidrio-banda: 0px;
    --mg-vidrio-fondo-banda: transparent;
    --mg-vidrio-borde-color: color-mix(in oklab, var(--mg-neutral-white) 18%, transparent);
    --mg-vidrio-borde-fuerte: color-mix(in oklab, var(--mg-neutral-white) 28%, transparent);
    --mg-vidrio-borde-suave: color-mix(in oklab, var(--mg-neutral-white) 10%, transparent);
    --mg-vidrio-canto: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 85%, var(--mg-brand-cyan) 15%) 35%, transparent);
    --mg-vidrio-canto-suave: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 60%, var(--mg-brand-electric) 40%) 28%, transparent);
    --mg-vidrio-canto-sombra: color-mix(in oklab, var(--mg-brand-navy) 45%, transparent);
    --mg-vidrio-caustica: color-mix(in oklab, var(--mg-brand-cyan) 20%, transparent);
    --mg-vidrio-iluminacion: inset 0 1px 0 color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 85%, var(--mg-brand-cyan) 15%) 35%, transparent);
    --mg-vidrio-espesor: inset 0 -1px 0 color-mix(in oklab, var(--mg-brand-navy) 45%, transparent);
    --mg-vidrio-sombra: 0 12px 32px oklch(0 0 0 / .32);
    --mg-vidrio-contacto: oklch(0 0 0 / .34);
    --mg-vidrio-luz-angulo: 135deg;
    --mg-vidrio-seleccion: var(--mg-color-accion);
    --mg-vidrio-sobre-seleccion: var(--mg-color-sobre-solido);
    --mg-escena-base: #0C1C2A;
    --mg-escena-azul: #003B61;
    --mg-escena-turquesa: #003E40;
    --mg-escena-bruma: #1C293F;
    --mg-escena-extremo: #414E59;
    --mg-escena-velo: 61%;
    --mg-escena-velo-telefono: 74%;
    --mg-escena-exposicion: 0.62;
    --mg-color-borde-suave: color-mix(in oklab, var(--mg-neutral-white) 10%, transparent);
  }

  /* tema «cristal-liquido-claro» (claro, 13 de 20) */
  [data-mg-tema="cristal-liquido-claro"] {
    color-scheme: light;
    --mg-color-fondo: #ECF4F8;
    --mg-color-superficie: #FDFEFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #2F3E52;
    --mg-color-borde: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 14%, transparent);
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #D4DBDF;
    --mg-color-esqueleto-brillo: #FDFEFF;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #00309F;
    --mg-money-positive-texto: #00472F;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #009F6E;
    --mg-status-complete-texto: #00453E;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #099D8D;
    --mg-status-warning-texto: #583500;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #C47D00;
    --mg-status-danger-texto: #80000F;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #00388B;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #00309F;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
    --mg-vidrio-transparencia-base: 0.54;
    --mg-vidrio-transparencia-lente: 0.76;
    --mg-vidrio-transparencia-campo: 0.93;
    --mg-vidrio-transparencia-densa: 0.94;
    --mg-vidrio-fondo-base: color-mix(in oklab, var(--mg-color-superficie) 54%, transparent);
    --mg-vidrio-fondo-lente: color-mix(in oklab, var(--mg-color-superficie) 76%, transparent);
    --mg-vidrio-fondo-campo: color-mix(in oklab, var(--mg-color-superficie) 93%, transparent);
    --mg-vidrio-fondo-denso: color-mix(in oklab, var(--mg-color-superficie) 94%, transparent);
    --mg-vidrio-fondo-flotante: color-mix(in oklab, var(--mg-color-superficie) 96%, transparent);
    --mg-vidrio-velo-superficie: color-mix(in oklab, var(--mg-color-superficie) 46%, transparent);
    --mg-vidrio-velo-hundido: color-mix(in oklab, var(--mg-color-fondo) 72%, transparent);
    --mg-vidrio-desenfoque-base: 16px;
    --mg-vidrio-desenfoque-lente: 14px;
    --mg-vidrio-desenfoque-fuerte: 18px;
    --mg-vidrio-saturacion: 1.18;
    --mg-vidrio-banda: 1px;
    --mg-vidrio-fondo-banda: color-mix(in oklab, var(--mg-neutral-white) 22%, transparent);
    --mg-vidrio-borde-color: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 14%, transparent);
    --mg-vidrio-borde-fuerte: color-mix(in oklab, var(--mg-neutral-white) 72%, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 10%);
    --mg-vidrio-borde-suave: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 8%, transparent);
    --mg-vidrio-canto: color-mix(in oklab, var(--mg-neutral-white) 80%, transparent);
    --mg-vidrio-canto-suave: color-mix(in oklab, var(--mg-color-superficie) 62%, transparent);
    --mg-vidrio-canto-sombra: color-mix(in oklab, var(--mg-neutral-white) 35%, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 14%);
    --mg-vidrio-caustica: color-mix(in oklab, var(--mg-neutral-white) 28%, transparent);
    --mg-vidrio-iluminacion: inset 0 1px 0 color-mix(in oklab, var(--mg-neutral-white) 80%, transparent);
    --mg-vidrio-espesor: inset 0 -1px 0 color-mix(in oklab, var(--mg-neutral-white) 35%, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 14%);
    --mg-vidrio-sombra: 0 12px 32px color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 10%, transparent), 0 2px 5px color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 5%, transparent);
    --mg-vidrio-contacto: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 5%, transparent);
    --mg-vidrio-luz-angulo: 135deg;
    --mg-vidrio-seleccion: var(--mg-color-accion);
    --mg-vidrio-sobre-seleccion: var(--mg-color-sobre-solido);
    --mg-escena-base: #EBF2F6;
    --mg-escena-azul: #BCDAF4;
    --mg-escena-turquesa: #BFE3E0;
    --mg-escena-bruma: #DCDEF2;
    --mg-escena-extremo: #9EA9B6;
    --mg-escena-velo: 67%;
    --mg-escena-velo-telefono: 67%;
    --mg-escena-exposicion: 0.81;
    --mg-color-borde-suave: color-mix(in oklab, color-mix(in oklab, var(--mg-brand-navy) 78%, var(--mg-brand-blue) 22%) 8%, transparent);
  }

  /* tema «cristal-liquido-profundo» (oscuro, 14 de 20) */
  [data-mg-tema="cristal-liquido-profundo"] {
    color-scheme: dark;
    --mg-color-fondo: #061D2B;
    --mg-color-superficie: #22292E;
    --mg-color-texto: #EEF2F5;
    --mg-color-texto-atenuado: #B3C0C9;
    --mg-color-borde: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 70%, var(--mg-brand-cyan) 30%) 24%, transparent);
    --mg-color-borde-control: #6F7B84;
    --mg-color-deshabilitado: #575D61;
    --mg-color-foco: #2968F0;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #3B4248;
    --mg-color-esqueleto-brillo: #2E353B;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #283958;
    --mg-color-enlace: #9CBEFF;
    --mg-money-positive-texto: #43D59B;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #164330;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #59D1BF;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #1B413B;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #FFAD3C;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #4D3312;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #FFA9A1;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #542C29;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #99C0FF;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #263958;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #9CBEFF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #283958;
    --mg-brand-blue-borde: #2968F0;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #ABC8FF;
    --mg-categoria-1-fondo: #2A4058;
    --mg-categoria-1-texto: #91C3F6;
    --mg-categoria-2-fondo: #184649;
    --mg-categoria-2-texto: #71D0D5;
    --mg-categoria-3-fondo: #2B4630;
    --mg-categoria-3-texto: #94CF9F;
    --mg-categoria-4-fondo: #4B3C1E;
    --mg-categoria-4-texto: #D8BA79;
    --mg-categoria-5-fondo: #56342F;
    --mg-categoria-5-texto: #F2A89B;
    --mg-categoria-6-fondo: #443854;
    --mg-categoria-6-texto: #CBAFED;
    --mg-elevation-color: oklch(0 0 0 / .45);
    --mg-vidrio-transparencia-base: 0.30;
    --mg-vidrio-transparencia-lente: 0.36;
    --mg-vidrio-transparencia-campo: 0.64;
    --mg-vidrio-transparencia-densa: 0.88;
    --mg-vidrio-fondo-base: color-mix(in oklab, var(--mg-color-superficie) 30%, transparent);
    --mg-vidrio-fondo-lente: color-mix(in oklab, var(--mg-color-superficie) 36%, transparent);
    --mg-vidrio-fondo-campo: color-mix(in oklab, var(--mg-color-superficie) 64%, transparent);
    --mg-vidrio-fondo-denso: color-mix(in oklab, var(--mg-color-superficie) 88%, transparent);
    --mg-vidrio-fondo-flotante: color-mix(in oklab, var(--mg-color-superficie) 88%, transparent);
    --mg-vidrio-velo-superficie: color-mix(in oklab, var(--mg-color-superficie) 25%, transparent);
    --mg-vidrio-velo-hundido: color-mix(in oklab, var(--mg-color-fondo) 35%, transparent);
    --mg-vidrio-desenfoque-base: 10px;
    --mg-vidrio-desenfoque-lente: 12px;
    --mg-vidrio-desenfoque-fuerte: 14px;
    --mg-vidrio-saturacion: 1.26;
    --mg-vidrio-banda: 6px;
    --mg-vidrio-fondo-banda: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 55%, var(--mg-brand-electric) 45%) 10%, transparent);
    --mg-vidrio-borde-color: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 70%, var(--mg-brand-cyan) 30%) 24%, transparent);
    --mg-vidrio-borde-fuerte: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 70%, var(--mg-brand-cyan) 30%) 34%, transparent);
    --mg-vidrio-borde-suave: color-mix(in oklab, var(--mg-neutral-white) 10%, transparent);
    --mg-vidrio-canto: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 85%, var(--mg-brand-cyan) 15%) 45%, transparent);
    --mg-vidrio-canto-suave: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 60%, var(--mg-brand-electric) 40%) 36%, transparent);
    --mg-vidrio-canto-sombra: color-mix(in oklab, var(--mg-brand-navy) 65%, transparent);
    --mg-vidrio-caustica: color-mix(in oklab, var(--mg-brand-cyan) 20%, transparent);
    --mg-vidrio-iluminacion: inset 0 1px 0 color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 85%, var(--mg-brand-cyan) 15%) 45%, transparent);
    --mg-vidrio-espesor: inset 0 -1px 0 color-mix(in oklab, var(--mg-brand-navy) 65%, transparent);
    --mg-vidrio-sombra: 0 2px 4px oklch(0 0 0 / .34), 0 18px 38px oklch(0 0 0 / .32);
    --mg-vidrio-contacto: oklch(0 0 0 / .34);
    --mg-vidrio-luz-angulo: 135deg;
    --mg-vidrio-seleccion: var(--mg-color-accion);
    --mg-vidrio-sobre-seleccion: var(--mg-color-sobre-solido);
    --mg-escena-base: #0C1C2A;
    --mg-escena-azul: #003B61;
    --mg-escena-turquesa: #003E40;
    --mg-escena-bruma: #1C293F;
    --mg-escena-extremo: #3F4F5E;
    --mg-escena-velo: 63%;
    --mg-escena-velo-telefono: 76%;
    --mg-escena-exposicion: 0.62;
    --mg-color-borde-suave: color-mix(in oklab, var(--mg-neutral-white) 10%, transparent);
  }

  /* tema «mineral-claro» (claro, 15 de 20) */
  [data-mg-tema="mineral-claro"] {
    color-scheme: light;
    --mg-color-fondo: #E5F3F7;
    --mg-color-superficie: #F6FDFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #5E6E85;
    --mg-color-borde: #CCDADE;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #CCDADE;
    --mg-color-esqueleto-brillo: #F6FDFF;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #2563EB;
    --mg-money-positive-texto: #007D55;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #009D6C;
    --mg-status-complete-texto: #007A6E;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #039C8C;
    --mg-status-warning-texto: #9A6100;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #C07A00;
    --mg-status-danger-texto: #D4252D;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #2169DA;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2563EB;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
    --mg-mate-base-1: #E4FBF8;
    --mg-mate-base-2: #E2EAF9;
    --mg-mate-capa-1: #F6FDFF;
    --mg-mate-capa-2: #FFFFFF;
    --mg-mate-hundida: #E1EFF3;
    --mg-mate-borde: #D1DDE0;
    --mg-mate-sombra: color-mix(in oklab, var(--mg-brand-navy) 10%, transparent);
    --mg-mate-satinado: color-mix(in oklab, var(--mg-neutral-white) 90%, transparent);
    --mg-surface-2: var(--mg-mate-hundida);
    --mg-shadow-sm: inset 0 1px 0 var(--mg-mate-satinado), 0 1px 2px var(--mg-mate-sombra);
    --mg-shadow-md: inset 0 1px 0 var(--mg-mate-satinado), 0 6px 16px var(--mg-mate-sombra);
  }

  /* tema «mineral-profundo» (oscuro, 16 de 20) */
  [data-mg-tema="mineral-profundo"] {
    color-scheme: dark;
    --mg-color-fondo: #0D1C20;
    --mg-color-superficie: #1E2729;
    --mg-color-texto: #EDF3F4;
    --mg-color-texto-atenuado: #9DAEB3;
    --mg-color-borde: #364043;
    --mg-color-borde-control: #69797D;
    --mg-color-deshabilitado: #535B5D;
    --mg-color-foco: #2665ED;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #364043;
    --mg-color-esqueleto-brillo: #2A3436;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #263656;
    --mg-color-enlace: #6C9DFF;
    --mg-money-positive-texto: #10B981;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #13402D;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #35B4A3;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #183E38;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #F59E0B;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #4A310F;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #FF6F68;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #512926;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #66A0FF;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #243755;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #6C9DFF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #263656;
    --mg-brand-blue-borde: #2665ED;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #A9C7FF;
    --mg-categoria-1-fondo: #273E55;
    --mg-categoria-1-texto: #91C3F6;
    --mg-categoria-2-fondo: #144446;
    --mg-categoria-2-texto: #71D0D5;
    --mg-categoria-3-fondo: #28432E;
    --mg-categoria-3-texto: #94CF9F;
    --mg-categoria-4-fondo: #483A1B;
    --mg-categoria-4-texto: #D8BA79;
    --mg-categoria-5-fondo: #53322C;
    --mg-categoria-5-texto: #F2A89B;
    --mg-categoria-6-fondo: #423551;
    --mg-categoria-6-texto: #CBAFED;
    --mg-elevation-color: oklch(0 0 0 / .45);
    --mg-mate-base-1: #0B2321;
    --mg-mate-base-2: #0F1623;
    --mg-mate-capa-1: #1E2729;
    --mg-mate-capa-2: #2B3336;
    --mg-mate-hundida: #171E21;
    --mg-mate-borde: #3E484B;
    --mg-mate-sombra: oklch(0 0 0 / .5);
    --mg-mate-satinado: color-mix(in oklab, var(--mg-neutral-white) 6%, transparent);
    --mg-surface-2: var(--mg-mate-hundida);
    --mg-shadow-sm: inset 0 1px 0 var(--mg-mate-satinado), 0 1px 2px var(--mg-mate-sombra);
    --mg-shadow-md: inset 0 1px 0 var(--mg-mate-satinado), 0 6px 16px var(--mg-mate-sombra);
  }

  /* tema «tonal-claro» (claro, 17 de 20) */
  [data-mg-tema="tonal-claro"] {
    color-scheme: light;
    --mg-color-fondo: #F1F7FF;
    --mg-color-superficie: #FFFFFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #617188;
    --mg-color-borde: #D6DFEA;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #D6DFEA;
    --mg-color-esqueleto-brillo: #FFFFFF;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #2563EB;
    --mg-money-positive-texto: #007E56;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #00A270;
    --mg-status-complete-texto: #007C6F;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #9A6100;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #C67E00;
    --mg-status-danger-texto: #D4252D;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #2169DA;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2563EB;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
    --mg-tonal-primario: #D7E5FF;
    --mg-tonal-sobre-primario: #163578;
    --mg-tonal-secundario: #C3F3EF;
    --mg-tonal-sobre-secundario: #004441;
    --mg-tonal-variante: #E9F0FE;
    --mg-tonal-sobre-variante: #5E6E85;
    --mg-tonal-contorno: #888E9B;
    --mg-tonal-elevada: #FFFFFF;
    --mg-surface-2: var(--mg-tonal-variante);
  }

  /* tema «tonal-profundo» (oscuro, 18 de 20) */
  [data-mg-tema="tonal-profundo"] {
    color-scheme: dark;
    --mg-color-fondo: #0C1724;
    --mg-color-superficie: #1D2228;
    --mg-color-texto: #EFF2F6;
    --mg-color-texto-atenuado: #A3ACB8;
    --mg-color-borde: #363B42;
    --mg-color-borde-control: #6A727D;
    --mg-color-deshabilitado: #52565B;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #363B42;
    --mg-color-esqueleto-brillo: #292E35;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #223251;
    --mg-color-enlace: #6598FF;
    --mg-money-positive-texto: #10B981;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #0E3C2A;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #2EAF9E;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #143A35;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #F59E0B;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #462D0B;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #FF655F;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #4D2623;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #5D9AFF;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #203351;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #6598FF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #223251;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #A9C6FF;
    --mg-categoria-1-fondo: #233A51;
    --mg-categoria-1-texto: #91C3F6;
    --mg-categoria-2-fondo: #104042;
    --mg-categoria-2-texto: #71D0D5;
    --mg-categoria-3-fondo: #243F2A;
    --mg-categoria-3-texto: #94CF9F;
    --mg-categoria-4-fondo: #443617;
    --mg-categoria-4-texto: #D8BA79;
    --mg-categoria-5-fondo: #4F2E28;
    --mg-categoria-5-texto: #F2A89B;
    --mg-categoria-6-fondo: #3E314D;
    --mg-categoria-6-texto: #CBAFED;
    --mg-elevation-color: oklch(0 0 0 / .45);
    --mg-tonal-primario: #273757;
    --mg-tonal-sobre-primario: #CDDFFF;
    --mg-tonal-secundario: #0A3B38;
    --mg-tonal-sobre-secundario: #B1EBE6;
    --mg-tonal-variante: #282E38;
    --mg-tonal-sobre-variante: #A3ACB8;
    --mg-tonal-contorno: #656C78;
    --mg-tonal-elevada: #283040;
    --mg-surface-2: var(--mg-tonal-variante);
  }

  /* tema «grafito-claro» (claro, 19 de 20) */
  [data-mg-tema="grafito-claro"] {
    color-scheme: light;
    --mg-color-fondo: #EDEFF1;
    --mg-color-superficie: #FCFDFF;
    --mg-color-texto: #0B1F44;
    --mg-color-texto-atenuado: #5E6E85;
    --mg-color-borde: #D4D6D8;
    --mg-color-borde-control: #64748B;
    --mg-color-deshabilitado: #94A3B8;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #D4D6D8;
    --mg-color-esqueleto-brillo: #FCFDFF;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #EBF2FF;
    --mg-color-enlace: #2461E9;
    --mg-money-positive-texto: #007B54;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #DBFBEA;
    --mg-money-positive-borde: #009D6C;
    --mg-status-complete-texto: #007A6E;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #DBFAF3;
    --mg-status-complete-borde: #009A8A;
    --mg-status-warning-texto: #986000;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #FFEFDD;
    --mg-status-warning-borde: #C07A00;
    --mg-status-danger-texto: #D2222B;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #FFEDEB;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #1F67D9;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #EAF2FF;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #2461E9;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #EBF2FF;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #F8FAFE;
    --mg-lateral-abierto: #DBEEFF;
    --mg-lateral-abierto-titulo: #BFE1FF;
    --mg-lateral-grupo: #D8EDFF;
    --mg-lateral-grupo-titulo: #B9DEFF;
    --mg-lateral-borde: #D7D9DD;
    --mg-lateral-texto: #212326;
    --mg-lateral-atenuado: #5D5F62;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #001B64;
    --mg-categoria-1-fondo: #E2F0FF;
    --mg-categoria-1-texto: #2C6194;
    --mg-categoria-2-fondo: #D4F6F8;
    --mg-categoria-2-texto: #006B70;
    --mg-categoria-3-fondo: #DFF6E2;
    --mg-categoria-3-texto: #2C6D3E;
    --mg-categoria-4-fondo: #F9EDD5;
    --mg-categoria-4-texto: #775800;
    --mg-categoria-5-fondo: #FFE9E5;
    --mg-categoria-5-texto: #8D453B;
    --mg-categoria-6-fondo: #F3EAFF;
    --mg-categoria-6-texto: #6B4E8B;
    --mg-elevation-color: color-mix(in oklab, var(--mg-brand-navy) 12%, transparent);
    --mg-grafito-capa-1: #FCFDFF;
    --mg-grafito-capa-2: #F0F2F3;
    --mg-grafito-capa-3: #E4E6E8;
    --mg-grafito-separador: #CDCFD1;
    --mg-grafito-elevada: #FCFDFF;
    --mg-surface-2: var(--mg-grafito-capa-2);
    --mg-shadow-sm: none;
    --mg-shadow-md: 0 0 0 1px var(--mg-grafito-separador);
  }

  /* tema «grafito-profundo» (oscuro, 20 de 20) */
  [data-mg-tema="grafito-profundo"] {
    color-scheme: dark;
    --mg-color-fondo: #0F0F11;
    --mg-color-superficie: #1A1E25;
    --mg-color-texto: #EFF2F6;
    --mg-color-texto-atenuado: #A3ACB8;
    --mg-color-borde: #31363D;
    --mg-color-borde-control: #7F8792;
    --mg-color-deshabilitado: #4E5157;
    --mg-color-foco: #2563EB;
    --mg-color-marca-profunda: #0B1F44;
    --mg-color-sobre-marca-profunda: #F8FAFC;
    --mg-color-esqueleto: #31363D;
    --mg-color-esqueleto-brillo: #262A31;
    --mg-color-sobre-solido: #FFFFFF;
    --mg-color-accion: #2563EB;
    --mg-color-accion-hover: #1652DA;
    --mg-color-accion-suave: #1F2E4D;
    --mg-color-enlace: #5D92FF;
    --mg-money-positive-texto: #10B981;
    --mg-money-positive-solido: #00875C;
    --mg-money-positive-solido-hover: #007650;
    --mg-money-positive-suave: #093826;
    --mg-money-positive-borde: #10B981;
    --mg-status-complete-texto: #27AA9A;
    --mg-status-complete-solido: #008477;
    --mg-status-complete-solido-hover: #007468;
    --mg-status-complete-suave: #103631;
    --mg-status-complete-borde: #0F9F8F;
    --mg-status-warning-texto: #F59E0B;
    --mg-status-warning-solido: #A66900;
    --mg-status-warning-solido-hover: #935C00;
    --mg-status-warning-suave: #422906;
    --mg-status-warning-borde: #F59E0B;
    --mg-status-danger-texto: #FF5D59;
    --mg-status-danger-solido: #DF3236;
    --mg-status-danger-solido-hover: #CD1926;
    --mg-status-danger-suave: #49221F;
    --mg-status-danger-borde: #EF4444;
    --mg-status-info-texto: #5595FF;
    --mg-status-info-solido: #2B72E5;
    --mg-status-info-solido-hover: #1A62D4;
    --mg-status-info-suave: #1C2F4D;
    --mg-status-info-borde: #3B82F6;
    --mg-brand-blue-texto: #5D92FF;
    --mg-brand-blue-solido: #2563EB;
    --mg-brand-blue-solido-hover: #1652DA;
    --mg-brand-blue-suave: #1F2E4D;
    --mg-brand-blue-borde: #2563EB;
    --mg-lateral-fondo: #0A0B0E;
    --mg-lateral-abierto: #071D2F;
    --mg-lateral-abierto-titulo: #002B49;
    --mg-lateral-grupo: #062034;
    --mg-lateral-grupo-titulo: #002F4F;
    --mg-lateral-borde: #36383B;
    --mg-lateral-texto: #EEF0F4;
    --mg-lateral-atenuado: #A7A9AD;
    --mg-lateral-activo: #2563EB;
    --mg-lateral-sobre-activo: #FFFFFF;
    --mg-lateral-foco: #A9C6FF;
    --mg-categoria-1-fondo: #1F364D;
    --mg-categoria-1-texto: #91C3F6;
    --mg-categoria-2-fondo: #0A3C3E;
    --mg-categoria-2-texto: #71D0D5;
    --mg-categoria-3-fondo: #203B26;
    --mg-categoria-3-texto: #94CF9F;
    --mg-categoria-4-fondo: #403213;
    --mg-categoria-4-texto: #D8BA79;
    --mg-categoria-5-fondo: #4B2A25;
    --mg-categoria-5-texto: #F2A89B;
    --mg-categoria-6-fondo: #3A2D49;
    --mg-categoria-6-texto: #CBAFED;
    --mg-elevation-color: oklch(0 0 0 / .45);
    --mg-grafito-capa-1: #1A1E25;
    --mg-grafito-capa-2: #2B2B2D;
    --mg-grafito-capa-3: #39393A;
    --mg-grafito-separador: #48484A;
    --mg-grafito-elevada: #2B2B2D;
    --mg-surface-2: var(--mg-grafito-capa-2);
    --mg-shadow-sm: none;
    --mg-shadow-md: 0 0 0 1px var(--mg-grafito-separador);
  }

  /* ── F-VC · escala por dispositivo (Valkyrie lib/escala.js): todo R3 está en rem ── */
  :root[data-mg-escala="90"] { font-size: 90%; }
  :root[data-mg-escala="95"] { font-size: 95%; }
  :root[data-mg-escala="105"] { font-size: 105%; }
  :root[data-mg-escala="110"] { font-size: 110%; }
  :root[data-mg-escala="115"] { font-size: 115%; }
  :root[data-mg-escala="120"] { font-size: 120%; }
  :root[data-mg-escala="125"] { font-size: 125%; }
  :root[data-mg-escala="130"] { font-size: 130%; }
  :root[data-mg-escala="135"] { font-size: 135%; }
  :root[data-mg-escala="140"] { font-size: 140%; }
  :root[data-mg-escala="145"] { font-size: 145%; }
  :root[data-mg-escala="150"] { font-size: 150%; }

  /* ── APARIENCIA POR PÁGINA · aspecto Automático (data-mg-tono="auto"): el profundo de cada familia por prefers-color-scheme ── */
  /* tono automático: «claro» pasa a «oscuro» si el dispositivo prefiere oscuro */
  @media (prefers-color-scheme: dark) {
    [data-mg-tema="claro"][data-mg-tono="auto"] {
      color-scheme: dark;
      --mg-color-fondo: #15191E;
      --mg-color-superficie: #20242B;
      --mg-color-texto: #EFF2F6;
      --mg-color-texto-atenuado: #A3ACB8;
      --mg-color-borde: #393D45;
      --mg-color-borde-control: #6D7580;
      --mg-color-deshabilitado: #55585E;
      --mg-color-foco: #2563EB;
      --mg-color-marca-profunda: #0B1F44;
      --mg-color-sobre-marca-profunda: #F8FAFC;
      --mg-color-esqueleto: #393D45;
      --mg-color-esqueleto-brillo: #2C3138;
      --mg-color-sobre-solido: #FFFFFF;
      --mg-color-accion: #2563EB;
      --mg-color-accion-hover: #1652DA;
      --mg-color-accion-suave: #253554;
      --mg-color-enlace: #6A9CFF;
      --mg-money-positive-texto: #10B981;
      --mg-money-positive-solido: #00875C;
      --mg-money-positive-solido-hover: #007650;
      --mg-money-positive-suave: #123F2C;
      --mg-money-positive-borde: #10B981;
      --mg-status-complete-texto: #33B2A1;
      --mg-status-complete-solido: #008477;
      --mg-status-complete-solido-hover: #007468;
      --mg-status-complete-suave: #173D37;
      --mg-status-complete-borde: #0F9F8F;
      --mg-status-warning-texto: #F59E0B;
      --mg-status-warning-solido: #A66900;
      --mg-status-warning-solido-hover: #935C00;
      --mg-status-warning-suave: #492F0E;
      --mg-status-warning-borde: #F59E0B;
      --mg-status-danger-texto: #FF6C65;
      --mg-status-danger-solido: #DF3236;
      --mg-status-danger-solido-hover: #CD1926;
      --mg-status-danger-suave: #502825;
      --mg-status-danger-borde: #EF4444;
      --mg-status-info-texto: #609CFF;
      --mg-status-info-solido: #2B72E5;
      --mg-status-info-solido-hover: #1A62D4;
      --mg-status-info-suave: #233554;
      --mg-status-info-borde: #3B82F6;
      --mg-brand-blue-texto: #6A9CFF;
      --mg-brand-blue-solido: #2563EB;
      --mg-brand-blue-solido-hover: #1652DA;
      --mg-brand-blue-suave: #253554;
      --mg-brand-blue-borde: #2563EB;
      --mg-lateral-fondo: #0A0B0E;
      --mg-lateral-abierto: #071D2F;
      --mg-lateral-abierto-titulo: #002B49;
      --mg-lateral-grupo: #062034;
      --mg-lateral-grupo-titulo: #002F4F;
      --mg-lateral-borde: #36383B;
      --mg-lateral-texto: #EEF0F4;
      --mg-lateral-atenuado: #A7A9AD;
      --mg-lateral-activo: #2563EB;
      --mg-lateral-sobre-activo: #FFFFFF;
      --mg-lateral-foco: #A9C6FF;
      --mg-categoria-1-fondo: #263C54;
      --mg-categoria-1-texto: #91C3F6;
      --mg-categoria-2-fondo: #134245;
      --mg-categoria-2-texto: #71D0D5;
      --mg-categoria-3-fondo: #27422C;
      --mg-categoria-3-texto: #94CF9F;
      --mg-categoria-4-fondo: #46381A;
      --mg-categoria-4-texto: #D8BA79;
      --mg-categoria-5-fondo: #52302B;
      --mg-categoria-5-texto: #F2A89B;
      --mg-categoria-6-fondo: #413450;
      --mg-categoria-6-texto: #CBAFED;
      --mg-elevation-color: oklch(0 0 0 / .45);
    }
  }

  /* tono automático: «cristal-claro» pasa a «cristal-profundo» si el dispositivo prefiere oscuro */
  @media (prefers-color-scheme: dark) {
    [data-mg-tema="cristal-claro"][data-mg-tono="auto"] {
      color-scheme: dark;
      --mg-color-fondo: #05161E;
      --mg-color-superficie: #171F23;
      --mg-color-texto: #EEF3F5;
      --mg-color-texto-atenuado: #B2C0C8;
      --mg-color-borde: color-mix(in oklab, var(--mg-neutral-white) 18%, transparent);
      --mg-color-borde-control: #627077;
      --mg-color-deshabilitado: #4C5256;
      --mg-color-foco: #2563EB;
      --mg-color-marca-profunda: #0B1F44;
      --mg-color-sobre-marca-profunda: #F8FAFC;
      --mg-color-esqueleto: #30383D;
      --mg-color-esqueleto-brillo: #232C30;
      --mg-color-sobre-solido: #FFFFFF;
      --mg-color-accion: #2563EB;
      --mg-color-accion-hover: #1652DA;
      --mg-color-accion-suave: #1F2E4D;
      --mg-color-enlace: #9CBEFF;
      --mg-money-positive-texto: #43D59B;
      --mg-money-positive-solido: #00875C;
      --mg-money-positive-solido-hover: #007650;
      --mg-money-positive-suave: #093826;
      --mg-money-positive-borde: #10B981;
      --mg-status-complete-texto: #57CFBE;
      --mg-status-complete-solido: #008477;
      --mg-status-complete-solido-hover: #007468;
      --mg-status-complete-suave: #103631;
      --mg-status-complete-borde: #0F9F8F;
      --mg-status-warning-texto: #FFAD3C;
      --mg-status-warning-solido: #A66900;
      --mg-status-warning-solido-hover: #935C00;
      --mg-status-warning-suave: #422906;
      --mg-status-warning-borde: #F59E0B;
      --mg-status-danger-texto: #FFA69E;
      --mg-status-danger-solido: #DF3236;
      --mg-status-danger-solido-hover: #CD1926;
      --mg-status-danger-suave: #49221F;
      --mg-status-danger-borde: #EF4444;
      --mg-status-info-texto: #96BEFF;
      --mg-status-info-solido: #2B72E5;
      --mg-status-info-solido-hover: #1A62D4;
      --mg-status-info-suave: #1C2F4D;
      --mg-status-info-borde: #3B82F6;
      --mg-brand-blue-texto: #9CBEFF;
      --mg-brand-blue-solido: #2563EB;
      --mg-brand-blue-solido-hover: #1652DA;
      --mg-brand-blue-suave: #1F2E4D;
      --mg-brand-blue-borde: #2563EB;
      --mg-lateral-fondo: #0A0B0E;
      --mg-lateral-abierto: #071D2F;
      --mg-lateral-abierto-titulo: #002B49;
      --mg-lateral-grupo: #062034;
      --mg-lateral-grupo-titulo: #002F4F;
      --mg-lateral-borde: #36383B;
      --mg-lateral-texto: #EEF0F4;
      --mg-lateral-atenuado: #A7A9AD;
      --mg-lateral-activo: #2563EB;
      --mg-lateral-sobre-activo: #FFFFFF;
      --mg-lateral-foco: #A9C6FF;
      --mg-categoria-1-fondo: #1F364D;
      --mg-categoria-1-texto: #91C3F6;
      --mg-categoria-2-fondo: #0A3C3E;
      --mg-categoria-2-texto: #71D0D5;
      --mg-categoria-3-fondo: #203B26;
      --mg-categoria-3-texto: #94CF9F;
      --mg-categoria-4-fondo: #403213;
      --mg-categoria-4-texto: #D8BA79;
      --mg-categoria-5-fondo: #4B2A25;
      --mg-categoria-5-texto: #F2A89B;
      --mg-categoria-6-fondo: #3A2D49;
      --mg-categoria-6-texto: #CBAFED;
      --mg-elevation-color: oklch(0 0 0 / .45);
      --mg-vidrio-transparencia-base: 0.33;
      --mg-vidrio-transparencia-lente: 0.32;
      --mg-vidrio-transparencia-campo: 0.64;
      --mg-vidrio-transparencia-densa: 0.88;
      --mg-vidrio-fondo-base: color-mix(in oklab, var(--mg-color-superficie) 33%, transparent);
      --mg-vidrio-fondo-lente: color-mix(in oklab, var(--mg-color-superficie) 32%, transparent);
      --mg-vidrio-fondo-campo: color-mix(in oklab, var(--mg-color-superficie) 64%, transparent);
      --mg-vidrio-fondo-denso: color-mix(in oklab, var(--mg-color-superficie) 88%, transparent);
      --mg-vidrio-fondo-flotante: color-mix(in oklab, var(--mg-color-superficie) 88%, transparent);
      --mg-vidrio-velo-superficie: color-mix(in oklab, var(--mg-color-superficie) 28%, transparent);
      --mg-vidrio-velo-hundido: color-mix(in oklab, var(--mg-color-fondo) 38%, transparent);
      --mg-vidrio-desenfoque-base: 16px;
      --mg-vidrio-desenfoque-lente: 20px;
      --mg-vidrio-desenfoque-fuerte: 20px;
      --mg-vidrio-saturacion: 1.36;
      --mg-vidrio-banda: 0px;
      --mg-vidrio-fondo-banda: transparent;
      --mg-vidrio-borde-color: color-mix(in oklab, var(--mg-neutral-white) 18%, transparent);
      --mg-vidrio-borde-fuerte: color-mix(in oklab, var(--mg-neutral-white) 28%, transparent);
      --mg-vidrio-borde-suave: color-mix(in oklab, var(--mg-neutral-white) 10%, transparent);
      --mg-vidrio-canto: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 85%, var(--mg-brand-cyan) 15%) 35%, transparent);
      --mg-vidrio-canto-suave: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 60%, var(--mg-brand-electric) 40%) 28%, transparent);
      --mg-vidrio-canto-sombra: color-mix(in oklab, var(--mg-brand-navy) 45%, transparent);
      --mg-vidrio-caustica: color-mix(in oklab, var(--mg-brand-cyan) 20%, transparent);
      --mg-vidrio-iluminacion: inset 0 1px 0 color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 85%, var(--mg-brand-cyan) 15%) 35%, transparent);
      --mg-vidrio-espesor: inset 0 -1px 0 color-mix(in oklab, var(--mg-brand-navy) 45%, transparent);
      --mg-vidrio-sombra: 0 12px 32px oklch(0 0 0 / .32);
      --mg-vidrio-contacto: oklch(0 0 0 / .34);
      --mg-vidrio-luz-angulo: 135deg;
      --mg-vidrio-seleccion: var(--mg-color-accion);
      --mg-vidrio-sobre-seleccion: var(--mg-color-sobre-solido);
      --mg-escena-base: #0C1C2A;
      --mg-escena-azul: #003B61;
      --mg-escena-turquesa: #003E40;
      --mg-escena-bruma: #1C293F;
      --mg-escena-extremo: #414E59;
      --mg-escena-velo: 61%;
      --mg-escena-velo-telefono: 74%;
      --mg-escena-exposicion: 0.62;
      --mg-color-borde-suave: color-mix(in oklab, var(--mg-neutral-white) 10%, transparent);
    }
  }

  /* tono automático: «cristal-liquido-claro» pasa a «cristal-liquido-profundo» si el dispositivo prefiere oscuro */
  @media (prefers-color-scheme: dark) {
    [data-mg-tema="cristal-liquido-claro"][data-mg-tono="auto"] {
      color-scheme: dark;
      --mg-color-fondo: #061D2B;
      --mg-color-superficie: #22292E;
      --mg-color-texto: #EEF2F5;
      --mg-color-texto-atenuado: #B3C0C9;
      --mg-color-borde: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 70%, var(--mg-brand-cyan) 30%) 24%, transparent);
      --mg-color-borde-control: #6F7B84;
      --mg-color-deshabilitado: #575D61;
      --mg-color-foco: #2968F0;
      --mg-color-marca-profunda: #0B1F44;
      --mg-color-sobre-marca-profunda: #F8FAFC;
      --mg-color-esqueleto: #3B4248;
      --mg-color-esqueleto-brillo: #2E353B;
      --mg-color-sobre-solido: #FFFFFF;
      --mg-color-accion: #2563EB;
      --mg-color-accion-hover: #1652DA;
      --mg-color-accion-suave: #283958;
      --mg-color-enlace: #9CBEFF;
      --mg-money-positive-texto: #43D59B;
      --mg-money-positive-solido: #00875C;
      --mg-money-positive-solido-hover: #007650;
      --mg-money-positive-suave: #164330;
      --mg-money-positive-borde: #10B981;
      --mg-status-complete-texto: #59D1BF;
      --mg-status-complete-solido: #008477;
      --mg-status-complete-solido-hover: #007468;
      --mg-status-complete-suave: #1B413B;
      --mg-status-complete-borde: #0F9F8F;
      --mg-status-warning-texto: #FFAD3C;
      --mg-status-warning-solido: #A66900;
      --mg-status-warning-solido-hover: #935C00;
      --mg-status-warning-suave: #4D3312;
      --mg-status-warning-borde: #F59E0B;
      --mg-status-danger-texto: #FFA9A1;
      --mg-status-danger-solido: #DF3236;
      --mg-status-danger-solido-hover: #CD1926;
      --mg-status-danger-suave: #542C29;
      --mg-status-danger-borde: #EF4444;
      --mg-status-info-texto: #99C0FF;
      --mg-status-info-solido: #2B72E5;
      --mg-status-info-solido-hover: #1A62D4;
      --mg-status-info-suave: #263958;
      --mg-status-info-borde: #3B82F6;
      --mg-brand-blue-texto: #9CBEFF;
      --mg-brand-blue-solido: #2563EB;
      --mg-brand-blue-solido-hover: #1652DA;
      --mg-brand-blue-suave: #283958;
      --mg-brand-blue-borde: #2968F0;
      --mg-lateral-fondo: #0A0B0E;
      --mg-lateral-abierto: #071D2F;
      --mg-lateral-abierto-titulo: #002B49;
      --mg-lateral-grupo: #062034;
      --mg-lateral-grupo-titulo: #002F4F;
      --mg-lateral-borde: #36383B;
      --mg-lateral-texto: #EEF0F4;
      --mg-lateral-atenuado: #A7A9AD;
      --mg-lateral-activo: #2563EB;
      --mg-lateral-sobre-activo: #FFFFFF;
      --mg-lateral-foco: #ABC8FF;
      --mg-categoria-1-fondo: #2A4058;
      --mg-categoria-1-texto: #91C3F6;
      --mg-categoria-2-fondo: #184649;
      --mg-categoria-2-texto: #71D0D5;
      --mg-categoria-3-fondo: #2B4630;
      --mg-categoria-3-texto: #94CF9F;
      --mg-categoria-4-fondo: #4B3C1E;
      --mg-categoria-4-texto: #D8BA79;
      --mg-categoria-5-fondo: #56342F;
      --mg-categoria-5-texto: #F2A89B;
      --mg-categoria-6-fondo: #443854;
      --mg-categoria-6-texto: #CBAFED;
      --mg-elevation-color: oklch(0 0 0 / .45);
      --mg-vidrio-transparencia-base: 0.30;
      --mg-vidrio-transparencia-lente: 0.36;
      --mg-vidrio-transparencia-campo: 0.64;
      --mg-vidrio-transparencia-densa: 0.88;
      --mg-vidrio-fondo-base: color-mix(in oklab, var(--mg-color-superficie) 30%, transparent);
      --mg-vidrio-fondo-lente: color-mix(in oklab, var(--mg-color-superficie) 36%, transparent);
      --mg-vidrio-fondo-campo: color-mix(in oklab, var(--mg-color-superficie) 64%, transparent);
      --mg-vidrio-fondo-denso: color-mix(in oklab, var(--mg-color-superficie) 88%, transparent);
      --mg-vidrio-fondo-flotante: color-mix(in oklab, var(--mg-color-superficie) 88%, transparent);
      --mg-vidrio-velo-superficie: color-mix(in oklab, var(--mg-color-superficie) 25%, transparent);
      --mg-vidrio-velo-hundido: color-mix(in oklab, var(--mg-color-fondo) 35%, transparent);
      --mg-vidrio-desenfoque-base: 10px;
      --mg-vidrio-desenfoque-lente: 12px;
      --mg-vidrio-desenfoque-fuerte: 14px;
      --mg-vidrio-saturacion: 1.26;
      --mg-vidrio-banda: 6px;
      --mg-vidrio-fondo-banda: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 55%, var(--mg-brand-electric) 45%) 10%, transparent);
      --mg-vidrio-borde-color: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 70%, var(--mg-brand-cyan) 30%) 24%, transparent);
      --mg-vidrio-borde-fuerte: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 70%, var(--mg-brand-cyan) 30%) 34%, transparent);
      --mg-vidrio-borde-suave: color-mix(in oklab, var(--mg-neutral-white) 10%, transparent);
      --mg-vidrio-canto: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 85%, var(--mg-brand-cyan) 15%) 45%, transparent);
      --mg-vidrio-canto-suave: color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 60%, var(--mg-brand-electric) 40%) 36%, transparent);
      --mg-vidrio-canto-sombra: color-mix(in oklab, var(--mg-brand-navy) 65%, transparent);
      --mg-vidrio-caustica: color-mix(in oklab, var(--mg-brand-cyan) 20%, transparent);
      --mg-vidrio-iluminacion: inset 0 1px 0 color-mix(in oklab, color-mix(in oklab, var(--mg-neutral-white) 85%, var(--mg-brand-cyan) 15%) 45%, transparent);
      --mg-vidrio-espesor: inset 0 -1px 0 color-mix(in oklab, var(--mg-brand-navy) 65%, transparent);
      --mg-vidrio-sombra: 0 2px 4px oklch(0 0 0 / .34), 0 18px 38px oklch(0 0 0 / .32);
      --mg-vidrio-contacto: oklch(0 0 0 / .34);
      --mg-vidrio-luz-angulo: 135deg;
      --mg-vidrio-seleccion: var(--mg-color-accion);
      --mg-vidrio-sobre-seleccion: var(--mg-color-sobre-solido);
      --mg-escena-base: #0C1C2A;
      --mg-escena-azul: #003B61;
      --mg-escena-turquesa: #003E40;
      --mg-escena-bruma: #1C293F;
      --mg-escena-extremo: #3F4F5E;
      --mg-escena-velo: 63%;
      --mg-escena-velo-telefono: 76%;
      --mg-escena-exposicion: 0.62;
      --mg-color-borde-suave: color-mix(in oklab, var(--mg-neutral-white) 10%, transparent);
    }
  }

  /* tono automático: «mineral-claro» pasa a «mineral-profundo» si el dispositivo prefiere oscuro */
  @media (prefers-color-scheme: dark) {
    [data-mg-tema="mineral-claro"][data-mg-tono="auto"] {
      color-scheme: dark;
      --mg-color-fondo: #0D1C20;
      --mg-color-superficie: #1E2729;
      --mg-color-texto: #EDF3F4;
      --mg-color-texto-atenuado: #9DAEB3;
      --mg-color-borde: #364043;
      --mg-color-borde-control: #69797D;
      --mg-color-deshabilitado: #535B5D;
      --mg-color-foco: #2665ED;
      --mg-color-marca-profunda: #0B1F44;
      --mg-color-sobre-marca-profunda: #F8FAFC;
      --mg-color-esqueleto: #364043;
      --mg-color-esqueleto-brillo: #2A3436;
      --mg-color-sobre-solido: #FFFFFF;
      --mg-color-accion: #2563EB;
      --mg-color-accion-hover: #1652DA;
      --mg-color-accion-suave: #263656;
      --mg-color-enlace: #6C9DFF;
      --mg-money-positive-texto: #10B981;
      --mg-money-positive-solido: #00875C;
      --mg-money-positive-solido-hover: #007650;
      --mg-money-positive-suave: #13402D;
      --mg-money-positive-borde: #10B981;
      --mg-status-complete-texto: #35B4A3;
      --mg-status-complete-solido: #008477;
      --mg-status-complete-solido-hover: #007468;
      --mg-status-complete-suave: #183E38;
      --mg-status-complete-borde: #0F9F8F;
      --mg-status-warning-texto: #F59E0B;
      --mg-status-warning-solido: #A66900;
      --mg-status-warning-solido-hover: #935C00;
      --mg-status-warning-suave: #4A310F;
      --mg-status-warning-borde: #F59E0B;
      --mg-status-danger-texto: #FF6F68;
      --mg-status-danger-solido: #DF3236;
      --mg-status-danger-solido-hover: #CD1926;
      --mg-status-danger-suave: #512926;
      --mg-status-danger-borde: #EF4444;
      --mg-status-info-texto: #66A0FF;
      --mg-status-info-solido: #2B72E5;
      --mg-status-info-solido-hover: #1A62D4;
      --mg-status-info-suave: #243755;
      --mg-status-info-borde: #3B82F6;
      --mg-brand-blue-texto: #6C9DFF;
      --mg-brand-blue-solido: #2563EB;
      --mg-brand-blue-solido-hover: #1652DA;
      --mg-brand-blue-suave: #263656;
      --mg-brand-blue-borde: #2665ED;
      --mg-lateral-fondo: #0A0B0E;
      --mg-lateral-abierto: #071D2F;
      --mg-lateral-abierto-titulo: #002B49;
      --mg-lateral-grupo: #062034;
      --mg-lateral-grupo-titulo: #002F4F;
      --mg-lateral-borde: #36383B;
      --mg-lateral-texto: #EEF0F4;
      --mg-lateral-atenuado: #A7A9AD;
      --mg-lateral-activo: #2563EB;
      --mg-lateral-sobre-activo: #FFFFFF;
      --mg-lateral-foco: #A9C7FF;
      --mg-categoria-1-fondo: #273E55;
      --mg-categoria-1-texto: #91C3F6;
      --mg-categoria-2-fondo: #144446;
      --mg-categoria-2-texto: #71D0D5;
      --mg-categoria-3-fondo: #28432E;
      --mg-categoria-3-texto: #94CF9F;
      --mg-categoria-4-fondo: #483A1B;
      --mg-categoria-4-texto: #D8BA79;
      --mg-categoria-5-fondo: #53322C;
      --mg-categoria-5-texto: #F2A89B;
      --mg-categoria-6-fondo: #423551;
      --mg-categoria-6-texto: #CBAFED;
      --mg-elevation-color: oklch(0 0 0 / .45);
      --mg-mate-base-1: #0B2321;
      --mg-mate-base-2: #0F1623;
      --mg-mate-capa-1: #1E2729;
      --mg-mate-capa-2: #2B3336;
      --mg-mate-hundida: #171E21;
      --mg-mate-borde: #3E484B;
      --mg-mate-sombra: oklch(0 0 0 / .5);
      --mg-mate-satinado: color-mix(in oklab, var(--mg-neutral-white) 6%, transparent);
      --mg-surface-2: var(--mg-mate-hundida);
      --mg-shadow-sm: inset 0 1px 0 var(--mg-mate-satinado), 0 1px 2px var(--mg-mate-sombra);
      --mg-shadow-md: inset 0 1px 0 var(--mg-mate-satinado), 0 6px 16px var(--mg-mate-sombra);
    }
  }

  /* tono automático: «tonal-claro» pasa a «tonal-profundo» si el dispositivo prefiere oscuro */
  @media (prefers-color-scheme: dark) {
    [data-mg-tema="tonal-claro"][data-mg-tono="auto"] {
      color-scheme: dark;
      --mg-color-fondo: #0C1724;
      --mg-color-superficie: #1D2228;
      --mg-color-texto: #EFF2F6;
      --mg-color-texto-atenuado: #A3ACB8;
      --mg-color-borde: #363B42;
      --mg-color-borde-control: #6A727D;
      --mg-color-deshabilitado: #52565B;
      --mg-color-foco: #2563EB;
      --mg-color-marca-profunda: #0B1F44;
      --mg-color-sobre-marca-profunda: #F8FAFC;
      --mg-color-esqueleto: #363B42;
      --mg-color-esqueleto-brillo: #292E35;
      --mg-color-sobre-solido: #FFFFFF;
      --mg-color-accion: #2563EB;
      --mg-color-accion-hover: #1652DA;
      --mg-color-accion-suave: #223251;
      --mg-color-enlace: #6598FF;
      --mg-money-positive-texto: #10B981;
      --mg-money-positive-solido: #00875C;
      --mg-money-positive-solido-hover: #007650;
      --mg-money-positive-suave: #0E3C2A;
      --mg-money-positive-borde: #10B981;
      --mg-status-complete-texto: #2EAF9E;
      --mg-status-complete-solido: #008477;
      --mg-status-complete-solido-hover: #007468;
      --mg-status-complete-suave: #143A35;
      --mg-status-complete-borde: #0F9F8F;
      --mg-status-warning-texto: #F59E0B;
      --mg-status-warning-solido: #A66900;
      --mg-status-warning-solido-hover: #935C00;
      --mg-status-warning-suave: #462D0B;
      --mg-status-warning-borde: #F59E0B;
      --mg-status-danger-texto: #FF655F;
      --mg-status-danger-solido: #DF3236;
      --mg-status-danger-solido-hover: #CD1926;
      --mg-status-danger-suave: #4D2623;
      --mg-status-danger-borde: #EF4444;
      --mg-status-info-texto: #5D9AFF;
      --mg-status-info-solido: #2B72E5;
      --mg-status-info-solido-hover: #1A62D4;
      --mg-status-info-suave: #203351;
      --mg-status-info-borde: #3B82F6;
      --mg-brand-blue-texto: #6598FF;
      --mg-brand-blue-solido: #2563EB;
      --mg-brand-blue-solido-hover: #1652DA;
      --mg-brand-blue-suave: #223251;
      --mg-brand-blue-borde: #2563EB;
      --mg-lateral-fondo: #0A0B0E;
      --mg-lateral-abierto: #071D2F;
      --mg-lateral-abierto-titulo: #002B49;
      --mg-lateral-grupo: #062034;
      --mg-lateral-grupo-titulo: #002F4F;
      --mg-lateral-borde: #36383B;
      --mg-lateral-texto: #EEF0F4;
      --mg-lateral-atenuado: #A7A9AD;
      --mg-lateral-activo: #2563EB;
      --mg-lateral-sobre-activo: #FFFFFF;
      --mg-lateral-foco: #A9C6FF;
      --mg-categoria-1-fondo: #233A51;
      --mg-categoria-1-texto: #91C3F6;
      --mg-categoria-2-fondo: #104042;
      --mg-categoria-2-texto: #71D0D5;
      --mg-categoria-3-fondo: #243F2A;
      --mg-categoria-3-texto: #94CF9F;
      --mg-categoria-4-fondo: #443617;
      --mg-categoria-4-texto: #D8BA79;
      --mg-categoria-5-fondo: #4F2E28;
      --mg-categoria-5-texto: #F2A89B;
      --mg-categoria-6-fondo: #3E314D;
      --mg-categoria-6-texto: #CBAFED;
      --mg-elevation-color: oklch(0 0 0 / .45);
      --mg-tonal-primario: #273757;
      --mg-tonal-sobre-primario: #CDDFFF;
      --mg-tonal-secundario: #0A3B38;
      --mg-tonal-sobre-secundario: #B1EBE6;
      --mg-tonal-variante: #282E38;
      --mg-tonal-sobre-variante: #A3ACB8;
      --mg-tonal-contorno: #656C78;
      --mg-tonal-elevada: #283040;
      --mg-surface-2: var(--mg-tonal-variante);
    }
  }

  /* tono automático: «grafito-claro» pasa a «grafito-profundo» si el dispositivo prefiere oscuro */
  @media (prefers-color-scheme: dark) {
    [data-mg-tema="grafito-claro"][data-mg-tono="auto"] {
      color-scheme: dark;
      --mg-color-fondo: #0F0F11;
      --mg-color-superficie: #1A1E25;
      --mg-color-texto: #EFF2F6;
      --mg-color-texto-atenuado: #A3ACB8;
      --mg-color-borde: #31363D;
      --mg-color-borde-control: #7F8792;
      --mg-color-deshabilitado: #4E5157;
      --mg-color-foco: #2563EB;
      --mg-color-marca-profunda: #0B1F44;
      --mg-color-sobre-marca-profunda: #F8FAFC;
      --mg-color-esqueleto: #31363D;
      --mg-color-esqueleto-brillo: #262A31;
      --mg-color-sobre-solido: #FFFFFF;
      --mg-color-accion: #2563EB;
      --mg-color-accion-hover: #1652DA;
      --mg-color-accion-suave: #1F2E4D;
      --mg-color-enlace: #5D92FF;
      --mg-money-positive-texto: #10B981;
      --mg-money-positive-solido: #00875C;
      --mg-money-positive-solido-hover: #007650;
      --mg-money-positive-suave: #093826;
      --mg-money-positive-borde: #10B981;
      --mg-status-complete-texto: #27AA9A;
      --mg-status-complete-solido: #008477;
      --mg-status-complete-solido-hover: #007468;
      --mg-status-complete-suave: #103631;
      --mg-status-complete-borde: #0F9F8F;
      --mg-status-warning-texto: #F59E0B;
      --mg-status-warning-solido: #A66900;
      --mg-status-warning-solido-hover: #935C00;
      --mg-status-warning-suave: #422906;
      --mg-status-warning-borde: #F59E0B;
      --mg-status-danger-texto: #FF5D59;
      --mg-status-danger-solido: #DF3236;
      --mg-status-danger-solido-hover: #CD1926;
      --mg-status-danger-suave: #49221F;
      --mg-status-danger-borde: #EF4444;
      --mg-status-info-texto: #5595FF;
      --mg-status-info-solido: #2B72E5;
      --mg-status-info-solido-hover: #1A62D4;
      --mg-status-info-suave: #1C2F4D;
      --mg-status-info-borde: #3B82F6;
      --mg-brand-blue-texto: #5D92FF;
      --mg-brand-blue-solido: #2563EB;
      --mg-brand-blue-solido-hover: #1652DA;
      --mg-brand-blue-suave: #1F2E4D;
      --mg-brand-blue-borde: #2563EB;
      --mg-lateral-fondo: #0A0B0E;
      --mg-lateral-abierto: #071D2F;
      --mg-lateral-abierto-titulo: #002B49;
      --mg-lateral-grupo: #062034;
      --mg-lateral-grupo-titulo: #002F4F;
      --mg-lateral-borde: #36383B;
      --mg-lateral-texto: #EEF0F4;
      --mg-lateral-atenuado: #A7A9AD;
      --mg-lateral-activo: #2563EB;
      --mg-lateral-sobre-activo: #FFFFFF;
      --mg-lateral-foco: #A9C6FF;
      --mg-categoria-1-fondo: #1F364D;
      --mg-categoria-1-texto: #91C3F6;
      --mg-categoria-2-fondo: #0A3C3E;
      --mg-categoria-2-texto: #71D0D5;
      --mg-categoria-3-fondo: #203B26;
      --mg-categoria-3-texto: #94CF9F;
      --mg-categoria-4-fondo: #403213;
      --mg-categoria-4-texto: #D8BA79;
      --mg-categoria-5-fondo: #4B2A25;
      --mg-categoria-5-texto: #F2A89B;
      --mg-categoria-6-fondo: #3A2D49;
      --mg-categoria-6-texto: #CBAFED;
      --mg-elevation-color: oklch(0 0 0 / .45);
      --mg-grafito-capa-1: #1A1E25;
      --mg-grafito-capa-2: #2B2B2D;
      --mg-grafito-capa-3: #39393A;
      --mg-grafito-separador: #48484A;
      --mg-grafito-elevada: #2B2B2D;
      --mg-surface-2: var(--mg-grafito-capa-2);
      --mg-shadow-sm: none;
      --mg-shadow-md: 0 0 0 1px var(--mg-grafito-separador);
    }
  }

  /* ── APARIENCIA POR PÁGINA · «Sin movimiento» (data-mg-movimiento="sin"): los mismos tiempos que el movimiento reducido del sistema ── */
  [data-mg-movimiento="sin"] {
    --mg-motion-fast: 1ms;
    --mg-motion-base: 1ms;
    --mg-motion-slow: 1ms;
    --mg-spinner-duration: 1400ms;
    --mg-shimmer-duration: 1ms;
    --mg-logo-reveal-duration: 1ms;
  }
}