/*
 * puente-legacy.css — el mg.css viejo de App, dentro de la capa mg.legacy, con sus variables
 * apuntadas a los tokens R3. Se escribe a mano (no lo emite el generador) y NO lleva hex.
 *
 * Carga en App, DESPUÉS de /r3/generado/mg-r3.css:
 *
 *   <link rel="stylesheet" href="/r3/generado/mg-r3.css">
 *   <link rel="stylesheet" href="/r3/puente-legacy.css">
 *
 * Por qué así:
 *   · Sin capa, el legado le ganaría a TODAS las capas R3 (lo que no está en capa gana siempre).
 *     Importado en `mg.legacy`, que es la primera capa del orden declarado, cualquier regla R3 le gana.
 *   · Los nombres que R3 y el legado comparten (`--mg-space-*`, `--mg-radius-*`) los resuelve la
 *     capa: vale el de R3. Espaciado coincide en píxeles; los radios cambian (4/8/12/18 → 6/12/16/24).
 *     Es la deriva aceptada en el mapa de reuso (§4.3).
 *   · El resto de las variables del legado se reapuntan acá, en la misma capa y después del import,
 *     así que le ganan a las del mg.css por orden. Las clases viejas (`mg-btn`, `mg-card`, …) siguen
 *     funcionando mientras se migra a `mgui-*`.
 *
 * Nunca se cargan las hojas de Valkyrie (`mg-core.css`, `mg-admin.css`).
 */
@layer mg.legacy, mg.tokens, mg.base, mg.components, mg.surface, mg.utilities;

@import url("/framework/mg.css") layer(mg.legacy);

@layer mg.legacy {
  :root {
    /* texto */
    --mg-ink: var(--mg-color-texto);
    --mg-ink-2: var(--mg-color-texto-atenuado);
    --mg-ink-3: var(--mg-color-texto-atenuado);

    /* acción: el petróleo viejo pasa al azul de acción de R3 */
    --mg-primary: var(--mg-color-enlace);
    --mg-primary-hover: var(--mg-color-accion-hover);
    --mg-primary-soft: var(--mg-color-accion-suave);
    --mg-on-primary: var(--mg-color-sobre-solido);

    /* dinero: sólo resultado económico favorable */
    --mg-money: var(--mg-money-positive-borde);
    --mg-money-txt: var(--mg-money-positive-texto);
    --mg-money-soft: var(--mg-money-positive-suave);
    --mg-money-claro: var(--mg-money-positive-borde);

    /* eventos / avisos → pendiente/advertencia */
    --mg-event: var(--mg-status-warning-borde);
    --mg-event-txt: var(--mg-status-warning-texto);
    --mg-event-soft: var(--mg-status-warning-suave);

    /* peligro */
    --mg-danger: var(--mg-status-danger-texto);
    --mg-danger-txt: var(--mg-status-danger-texto);
    --mg-danger-soft: var(--mg-status-danger-suave);

    /* superficies */
    --mg-bg: var(--mg-color-fondo);
    --mg-surface: var(--mg-color-superficie);
    --mg-surface-2: color-mix(in oklab, var(--mg-color-borde) 50%, var(--mg-color-superficie));
    --mg-border: var(--mg-color-borde);

    /* banda profunda (menú lateral, héroe) → navy de marca */
    --mg-deep: var(--mg-color-marca-profunda);
    --mg-deep-2: color-mix(in oklab, var(--mg-color-marca-profunda) 85%, var(--mg-color-accion));
    --mg-on-deep: var(--mg-color-sobre-marca-profunda);
    --mg-on-deep-2: var(--mg-color-deshabilitado);
    --mg-border-deep: color-mix(in oklab, var(--mg-color-marca-profunda) 70%, var(--mg-color-texto-atenuado));

    /* tipografía: Inter para la interfaz; los números siguen en la mono del legado (decisión UI-G0) */
    --mg-font: var(--mg-font-ui);

    /* sombras del legado, con la tinta de R3 y sin rgba() */
    --mg-shadow-sm: var(--mg-elevation-1);
    --mg-shadow-md: var(--mg-elevation-2);
    --mg-shadow-lg: var(--mg-elevation-3);
  }

  /*
   * Deprecación puntual: el botón primario del legado era VERDE DINERO (`--mg-money-txt`), y R3
   * reserva ese verde para resultados económicos. El primario es la acción, en azul.
   */
  .mg-btn-primary { background: var(--mg-color-accion); color: var(--mg-color-sobre-solido); }
  .mg-btn-primary:hover { background: var(--mg-color-accion-hover); }

  /*
   * Z-R · Z-R0 (auditoría temprana P2-5): las clases del legado que las pantallas usan y NINGUNA hoja definía (`mg-h3` en 79
   * lugares, `mg-p-3`, `mg-mt-3`, `mg-num`, `mg-mb-1`, `mg-btn-secondary`, `mg-cluster`, `mg-mb-3`, `mg-h4`, `mg-inline`): sin
   * esto, un título «h2 con cara de h3» salía con el tamaño de un h2, una cifra sin alinear y un botón sin borde. Quedan en la
   * capa del legado (cualquier clase R3 les gana) y con tokens R3.
   */
  .mg-h3 { margin: var(--mg-space-6) 0 var(--mg-space-3); font-size: var(--mg-type-lg); font-weight: var(--mg-weight-semibold); line-height: var(--mg-leading-ajustado); }
  .mg-h4 { margin: var(--mg-space-4) 0 var(--mg-space-2); font-size: var(--mg-type-md); font-weight: var(--mg-weight-semibold); line-height: var(--mg-leading-ajustado); }
  .mg-p-3 { padding: var(--mg-space-3); }
  .mg-mt-3 { margin-top: var(--mg-space-3); }
  .mg-mb-1 { margin-bottom: var(--mg-space-1); }
  .mg-mb-3 { margin-bottom: var(--mg-space-3); }
  .mg-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .mg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
  .mg-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0; }
  /* Ola 13 · alineación vertical de controles en filas del legado (`.mg-grid`, `.mg-cluster`, `.mg-filtros`):
   * `.mg-field` en columna con rótulos `.mg-label` de `min-block-size: 1.75rem`, controles de `min-block-size: 2.5rem` y
   * contenedores de fila alineados por arriba (`start` / `flex-start`) para que los subtítulos `.mg-help` o íconos en
   * el título nunca desalineen los `<input>` y `<select>`. */
  .mg-field { display: flex; flex-direction: column; gap: var(--mg-space-1); min-inline-size: 0; }
  .mg-label {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1);
    min-block-size: 1.75rem; line-height: 1.25; margin-bottom: 0;
  }
  .mg-input:not(textarea), .mg-select { box-sizing: border-box; min-block-size: 2.5rem; }
  .mg-help { margin: 0; }
  .mg-grid:has(> .mg-field, > .mgui-field) { align-items: start; }
  .mg-grid:has(> .mg-field > .mg-label, > .mgui-field > .mgui-field__label) > :is(.mg-btn, .mgui-btn) {
    margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }
  .mg-cluster:has(> .mg-field, > .mgui-field) { align-items: flex-start; }
  .mg-cluster:has(> .mg-field, > .mgui-field) > :is(.mg-field, .mgui-field) { margin-bottom: 0; }
  .mg-cluster:has(> .mg-field > .mg-label, > .mgui-field > .mgui-field__label) > :is(.mg-btn, .mgui-btn) {
    margin-block-start: calc(1.75rem + var(--mg-space-1));
    min-block-size: 2.5rem;
  }
  .mg-btn-secondary { background: var(--mg-color-superficie); color: var(--mg-color-enlace); border-color: var(--mg-color-borde-control); }
  .mg-btn-secondary:hover { border-color: var(--mg-color-accion); background: var(--mg-color-accion-suave); }
  /*
   * Z-R · el botón «claro» del legado (texto blanco translúcido) era para la banda profunda del menú viejo, que ya no existe:
   * sobre el contenido claro de la App salía blanco sobre blanco (Cobranzas › «Cheques en cartera» y «Caja móvil», Tesorería,
   * la caja móvil). Pasa a ser el botón secundario.
   */
  .mg-btn-light { background: var(--mg-color-superficie); color: var(--mg-color-enlace); border-color: var(--mg-color-borde-control); }
  .mg-btn-light:hover { border-color: var(--mg-color-accion); background: var(--mg-color-accion-suave); }

  /*
   * UNIFICACIÓN FRAMEWORK CSS · Reglas de módulos satélite (lector QR celular, mapas, logística, portal chofer y caja personal)
   * consolidadas en la capa `mg.legacy` con tokens semánticos R3 (cero hex literales y cero inline-styles).
   */
  .mg-emitir-video { width: 100%; max-height: 60vh; border-radius: var(--mg-radius-md); background: var(--mg-color-texto); }
  .mg-mapa { height: 360px; width: 100%; border-radius: var(--mg-radius-sm); overflow: hidden; margin: var(--mg-space-3) 0; }
  .mg-mapa-donde { min-height: 1.3rem; font-weight: var(--mg-weight-semibold); margin: var(--mg-space-1) 0 var(--mg-space-3); }
  @media not all and (min-width: 481px) { .mg-mapa { height: 280px; } }
  .mg-mapa-sugerencias { list-style: none; padding: 0; margin: var(--mg-space-1) 0 0; max-height: 240px; overflow-y: auto; }
  .mg-mapa-sugerencias li { margin: 0.125rem 0; }
  .mg-mapa-paradas { height: 380px; width: 100%; border-radius: var(--mg-radius-sm); overflow: hidden; }
  @media not all and (min-width: 481px) { .mg-mapa-paradas { height: 300px; } }
  .mg-mapa-paradas[hidden] + .mg-mapa-atribucion { display: none; }
  .mg-mapa-pin {
    display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--mg-color-marca-profunda); color: var(--mg-color-sobre-solido); border: 2px solid var(--mg-color-superficie);
    box-shadow: var(--mg-elevation-2); font: 700 13px/1 var(--mg-font-ui);
  }
  .mg-mapa-pin--origen { background: var(--mg-color-texto-atenuado); }
  .mg-mapa-pin--entregada { background: var(--mg-status-complete-solido); }
  .mg-mapa-pin--fallida, .mg-mapa-pin--reprogramada { background: var(--mg-status-danger-solido); }
  .mg-mapa-pin--llegada { background: var(--mg-color-accion); }
  #mg-rol[hidden], #mg-rol-cola[hidden], #mg-rol-instalar[hidden] { display: none; }
  #mg-rol .mgui-btn { min-height: var(--mg-control-min); }
  #mg-rol form[data-mg-cola] .mgui-btn--primary { width: 100%; }
  #mg-rol-cola { border-left: 4px solid var(--mg-status-warning-borde); }
  [data-mg-terminos] dt { margin-top: var(--mg-space-2); }
  [data-mg-terminos] dd { margin: 0 0 var(--mg-space-1); }
  [data-mg-carga] .mg-codigo-receptor { font-size: 3rem; }
  [data-mg-escaner-resultado="ok"], [data-mg-cola-estado][data-mg-escaner-resultado="ok"] { color: var(--mg-status-complete-texto); font-weight: var(--mg-weight-semibold); }
  [data-mg-escaner-resultado="error"], [data-mg-cola-estado][data-mg-escaner-resultado="error"] { color: var(--mg-status-danger-texto); font-weight: var(--mg-weight-semibold); }
  .mg-firma { width: 100%; height: 12rem; border: 1px dashed var(--mg-color-borde-control); border-radius: var(--mg-radius-sm); background: var(--mg-color-superficie); touch-action: none; display: block; }
  .mg-codigo-receptor { font-size: 2.6rem; letter-spacing: .3rem; font-weight: var(--mg-weight-bold); text-align: center; margin: .4rem 0; }
  [data-mg-con-guion] [data-mg-sin-guion] { display: none; }
  .mg-escaner-video { width: 100%; max-height: 18rem; border-radius: var(--mg-radius-sm); background: var(--mg-color-marca-profunda); object-fit: cover; display: block; }
  .mg-escaner-video[hidden], [data-mg-camara][hidden], [data-mg-avisos-activar][hidden] { display: none; }
  .mg-personal-banda {
    margin: 0; padding: var(--mg-space-3) var(--mg-space-4);
    border-inline-start: 4px solid var(--mg-categoria-5-texto); border-radius: var(--mg-radius-sm);
    background: var(--mg-categoria-5-fondo); color: var(--mg-categoria-5-texto);
  }
  .mg-personal-banda strong { color: var(--mg-categoria-5-texto); }
  .mg-personal-casilla { display: flex; gap: var(--mg-space-2); align-items: center; }
  [data-mg-reino="personal"] [data-mg-pendientes-cola] { border-inline-start: 4px solid var(--mg-categoria-5-texto); padding-inline-start: var(--mg-space-3); }
  .mg-viaje-chofer { max-width: 42rem; margin: 0 auto; padding: var(--mg-space-4); }
  .mg-viaje-idiomas { display: inline-flex; gap: var(--mg-space-2); flex-wrap: wrap; font-size: var(--mg-type-sm); }
  .mg-viaje-idioma--activo { text-decoration: underline; }
  .mg-viaje-banda-ubicacion { border-left: 4px solid var(--mg-color-accion); }
  .mg-viaje-banda-ubicacion[data-ubicacion="compartida"][data-en-ventana="1"] { border-left-color: var(--mg-status-complete-borde); }
  .mg-viaje-banda-offline { padding: var(--mg-space-3) var(--mg-space-4); border-radius: var(--mg-radius-sm); background: var(--mg-status-warning-suave); color: var(--mg-status-warning-texto); font-weight: var(--mg-weight-semibold); }
  .mg-viaje-consentimiento { border: 2px solid var(--mg-color-accion); }
  .mg-viaje-consentimiento__lista { padding-left: 1.25rem; margin: var(--mg-space-2) 0; }
  .mg-viaje-consentimiento__botones { display: flex; flex-wrap: wrap; gap: var(--mg-space-3); }
  .mg-viaje-paso-principal .mg-button--primary { width: 100%; min-height: 3.25rem; font-size: var(--mg-type-md); font-weight: var(--mg-weight-bold); }
  .mg-viaje-lugar { padding: var(--mg-space-3); border-radius: var(--mg-radius-sm); border: 1px solid var(--mg-color-borde); }
  .mg-viaje-lugar__cabecera { display: flex; gap: var(--mg-space-2); flex-wrap: wrap; }
  .mg-viaje-lugar__direccion { margin: var(--mg-space-1) 0; }
  .mg-viaje-lugar__nav { display: flex; flex-direction: column; gap: var(--mg-space-1); margin-top: var(--mg-space-2); }
  .mg-viaje-lugar__aviso-nav { font-size: var(--mg-type-xs); }
  .mg-mapa-viaje { width: 100%; height: 18rem; border-radius: var(--mg-radius-sm); overflow: hidden; }
  .mg-mapa-viaje[hidden] + .mg-mapa-atribucion { display: none; }
  .mg-viaje-ptt-aviso { padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-sm); background: var(--mg-status-danger-suave); color: var(--mg-status-danger-texto); font-weight: var(--mg-weight-semibold); }
  [data-mg-conversacion-viaje][data-mg-ptt-bloqueado="1"] { opacity: 0.85; }
  .mg-viaje-qr-caja { display: inline-block; padding: var(--mg-space-3); background: var(--mg-color-superficie); border-radius: var(--mg-radius-sm); }

  /*
   * CRISTAL V3 · las pantallas del legado (Ventas con sus filtros `.mg-filtros.mg-card`, Cobranzas, Stock…) toman los MISMOS
   * roles de material que los componentes `mgui-*` (`web/r3/fuente/vidrio.css`): la tarjeta es superficie de contenido
   * (relleno base + blur), la tabla y la tarjeta anidada son lectura densa, los controles son campo, los botones claros son
   * campo con canto. Tokens `--mg-vidrio-*` del tema; en los temas sólidos no cambian nada (no-op). Antes `.mg-filtros`
   * quedaba opaco (rgb(34,41,46) en cristal líquido profundo, sin blur): era la única pantalla sin material.
   */
  [data-mg-tema^="cristal-"] {
    --mg-surface: var(--mg-vidrio-fondo-base);
    --mg-surface-2: var(--mg-vidrio-velo-superficie);
    --mg-bg: var(--mg-vidrio-velo-hundido);
    --mg-border: var(--mg-vidrio-borde-color);
  }
  [data-mg-tema^="cristal-"] .mg-card {
    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-"] .mg-card .mg-card {
    background: var(--mg-vidrio-velo-superficie);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  [data-mg-tema^="cristal-"] .mg-tabla-envoltura,
  [data-mg-tema^="cristal-"] .mg-table { background: var(--mg-vidrio-fondo-denso); }
  [data-mg-tema^="cristal-"] .mg-card-flush .mg-tabla-envoltura { background: transparent; }
  [data-mg-tema^="cristal-"] .mg-input,
  [data-mg-tema^="cristal-"] .mg-select { background: var(--mg-vidrio-fondo-campo); box-shadow: var(--mg-vidrio-iluminacion); }
  [data-mg-tema^="cristal-"] .mg-btn-ghost,
  [data-mg-tema^="cristal-"] .mg-btn-secondary,
  [data-mg-tema^="cristal-"] .mg-btn-light { background: var(--mg-vidrio-fondo-campo); box-shadow: var(--mg-vidrio-iluminacion); }
  [data-mg-tema^="cristal-liquido-"] .mg-card {
    box-shadow:
      var(--mg-vidrio-iluminacion),
      var(--mg-vidrio-espesor),
      inset 0 0 0 var(--mg-vidrio-banda) var(--mg-vidrio-fondo-banda),
      inset 0 14px 22px -16px var(--mg-vidrio-canto-suave),
      var(--mg-vidrio-sombra);
  }
  @supports not (backdrop-filter: blur(1px)) {
    [data-mg-tema^="cristal-"] .mg-card { background: var(--mg-vidrio-fondo-denso); }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    [data-mg-tema^="cristal-"] .mg-card,
    [data-mg-tema^="cristal-"] .mg-input,
    [data-mg-tema^="cristal-"] .mg-select { background: var(--mg-color-superficie); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--mg-elevation-1); }
  }
  [data-mg-tema^="cristal-"][data-mg-contraste="alto"] .mg-card,
  [data-mg-tema^="cristal-"][data-mg-contraste="alto"] .mg-input,
  [data-mg-tema^="cristal-"][data-mg-contraste="alto"] .mg-select { background: var(--mg-color-superficie); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--mg-elevation-1); }
  @media print {
    [data-mg-tema^="cristal-"] .mg-card,
    [data-mg-tema^="cristal-"] .mg-tabla-envoltura,
    [data-mg-tema^="cristal-"] .mg-table,
    [data-mg-tema^="cristal-"] .mg-input,
    [data-mg-tema^="cristal-"] .mg-select { background: var(--mg-color-superficie); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  }
}

/*
 * La marca R3 (`ui/marca.ts`) dentro de las cáscaras del legado de App (revisión W4): va en `.mg-logo`,
 * sobre la banda profunda (menú lateral y barra de las pantallas sueltas). `.mgui-marca` pinta el nombre
 * con el texto de superficie clara (capa mg.components); acá, en mg.surface, pasa al texto sobre la
 * marca profunda. El rótulo DEV trae su propio fondo y puede bajar de renglón; con él, la barra de
 * 60 px de las pantallas sueltas crece en vez de desbordar.
 */
@layer mg.surface {
  .mg-logo .mgui-marca { color: var(--mg-color-sobre-marca-profunda); flex-wrap: wrap; }
  .mg-nav-inner:has(.mgui-marca__rotulo) { height: auto; min-height: 60px; padding-block: var(--mg-space-2); }
}

/* FORMS-ANCHO INICIO */
/*
 * Formularios del legado: sólo dentro del contenido de App.
 * F-A5: el contenido de la cáscara R3 (`.mgui-app__contenido`, `.mgui-puerta__contenido`) es el mismo lugar que el
 * `.mg-app-main` / `.mg-section` de antes; los dos nombres quedan mientras haya pantallas del legado.
 * R3 se distribuye desde utilidades.css. No se limita un formulario que contiene
 * una tabla, ni se modifica el menú, el selector de idioma o la vista impresa.
 */
@layer mg.utilities {
  @media (min-width: 768px) {
    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form:not(:has(table, .mgui-field)):has(
      input:not([type="hidden"]),
      select,
      textarea
    ) {
      min-inline-size: 0;
      max-inline-size: var(--mg-formulario-max);
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form:not(:has(table, .mgui-field)):has(textarea) {
      max-inline-size: var(--mg-formulario-texto);
    }

    /* Las grillas existentes y los filtros disponen de espacio para sus columnas. */
    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form:not(:has(table, .mgui-field)):has(.mg-grid) {
      max-inline-size: var(--mg-formulario-grilla);
    }

    /* En la cáscara de la App, las tarjetas (<form class="mg-card"> / <form class="mgui-card">),
       los filtros (<form class="mg-filtros">, method="get", role="search", .mgui-cluster)
       y los formularios dentro de tarjetas o con grillas .mg-grid toman todo el ancho disponible de la ventana. */
    :is(
      .mgui-app__contenido form:is(.mg-card, .mgui-card, .mg-filtros, .mgui-cluster, [method="get"], [role="search"], :has(.mg-grid):has(.mgui-field)),
      .mgui-app__contenido :where(.mg-card, .mgui-card) form
    ) {
      max-inline-size: none;
    }

    :is(
      .mgui-app__contenido form:is(.mg-card, .mg-filtros, :has(.mg-grid)),
      .mgui-app__contenido .mg-card form
    ) .mgui-field:not(.mgui-field--acotado) {
      max-inline-size: none;
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form .mg-field {
      min-inline-size: 0;
      max-inline-size: var(--mg-formulario-texto);
    }

    .mgui-app__contenido :is(.mg-grid, .mg-filtros, form[method="get"], form[role="search"]) .mg-field {
      max-inline-size: none;
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form :is(.mg-input, .mg-select) {
      min-inline-size: 0;
      max-inline-size: 100%;
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form fieldset {
      min-inline-size: 0;
      max-inline-size: 100%;
    }

    /*
     * Algunas pantallas usan label > input/select/textarea sin mg-field.
     * Se conserva la asociación nativa y se ordena la etiqueta sobre el control.
     * Las casillas y radios conservan su presentación en línea.
     */
    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) :where(form label):has(> :is(
      input:not([type="hidden"], [type="checkbox"], [type="radio"]),
      select,
      textarea
    )) {
      display: flex;
      flex-direction: column;
      gap: var(--mg-space-1);
      min-inline-size: 0;
      max-inline-size: var(--mg-formulario-texto);
      margin-block-end: var(--mg-space-4);
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) :where(form label) > :where(
      input:not([type="hidden"], [type="checkbox"], [type="radio"]),
      select,
      textarea
    ) {
      inline-size: 100%;
      min-inline-size: 0;
      max-inline-size: 100%;
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form input:is(
      [type="date"],
      [type="number"],
      [inputmode="numeric"],
      [name="codigo"],
      [name="cuit"],
      [name^="cuit_"],
      [name="documento"],
      [name="doc_nro"],
      [name="doc"],
      [name="moneda"]
    ) {
      max-inline-size: min(100%, var(--mg-campo-corto));
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form input[inputmode="decimal"] {
      max-inline-size: min(100%, var(--mg-campo-importe));
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form input[autocomplete="one-time-code"] {
      max-inline-size: min(100%, var(--mg-campo-codigo));
    }

    /* En los filtros y grillas de consulta de la App (p. ej. /app/ventas), los campos de fecha y monto llenan su columna. */
    .mgui-app__contenido form:is(.mg-filtros, [method="get"], [role="search"]) .mg-grid input:is([type="date"], [type="number"], [inputmode="numeric"]) {
      max-inline-size: 100%;
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form :is(.mg-btn, button:not([class])) {
      inline-size: fit-content;
      max-inline-size: 100%;
      justify-self: start;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  @media (min-width: 1024px) {
    /*
     * Formularios planos del legado, incluyendo los controles nativos.
     * Hidden, títulos, ayudas, fieldsets y acciones no cuentan como campos.
     * No se convierten los formularios tabulares ni los de contraseñas.
     */
    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form:has(> :is(label, .mg-field) ~ :is(label, .mg-field) ~ :is(label, .mg-field) ~ :is(label, .mg-field)):not(:has(table, .mgui-field, input[type="password"])):not(:where(td form, th form)) {
      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);
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form:has(> :is(label, .mg-field) ~ :is(label, .mg-field) ~ :is(label, .mg-field) ~ :is(label, .mg-field)):not(:has(table, .mgui-field, input[type="password"])):not(:where(td form, th form)) > * {
      min-inline-size: 0;
      grid-column: 1 / -1;
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form:has(> :is(label, .mg-field) ~ :is(label, .mg-field) ~ :is(label, .mg-field) ~ :is(label, .mg-field)):not(:has(table, .mgui-field, input[type="password"])):not(:where(td form, th form)) > :is(label, .mg-field) {
      grid-column: auto;
      margin-block-end: 0;
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form:has(> :is(label, .mg-field) ~ :is(label, .mg-field) ~ :is(label, .mg-field) ~ :is(label, .mg-field)):not(:has(table, .mgui-field, input[type="password"])):not(:where(td form, th form)) > :is(label, .mg-field):has(
      textarea,
      [type="checkbox"],
      [type="radio"],
      [autocomplete="street-address"],
      [autocomplete="one-time-code"]
    ) {
      grid-column: 1 / -1;
    }

    /*
     * Las grillas de edición existentes pasan a un máximo de dos columnas.
     * Los GET de filtros y las grillas dentro de tarjetas en la App conservan su composición previa.
     */
    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form[method="post"]:not(:has(table)):not(:where(.mgui-app__contenido :is(form.mg-card, form.mgui-card, .mg-card form, .mgui-card form))) > .mg-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mg-formulario-columna)), 1fr));
      gap: var(--mg-space-6);
      min-inline-size: 0;
    }

    :where(.mg-app-main, .mg-section, .mgui-app__contenido, .mgui-puerta__contenido) form[method="post"]:not(:has(table)):not(:where(.mgui-app__contenido :is(form.mg-card, form.mgui-card, .mg-card form, .mgui-card form))) > .mg-grid > .mg-field:has(textarea) {
      grid-column: 1 / -1;
    }

    :is(
      .mgui-app__contenido form.mgui-stack.mg-card,
      .mgui-app__contenido .mg-card form.mgui-stack
    ):has(> .mgui-field ~ .mgui-field ~ .mgui-field ~ .mgui-field):not(:has(table, input[type="password"])) {
      max-inline-size: none;
    }
  }
}
/* FORMS-ANCHO FIN */