/* Mye.Ui — piel de los componentes data-vivos .mye (port de mxe-ui.css de MxApp, clases mxe-* → mye-*).
   Se sirve como static web asset: _content/MxLite.FModules.MyEF.Core.Ui/mye-ui.css (lo linkea el host).
   TEMA: superficies/bordes/texto con tokens --mx-* (cx-themes.css, mismo kit) → sigue claro/oscuro/custom.

   ═══ LA DEUDA DE ESCALA, PAGADA (2026-08-25) ════════════════════════════════════════════════════
   Este archivo usaba CERO tokens de la escala tipográfica y traía 55 tamaños px distintos en 410 usos.
   Como carga último y sin @layer, GANABA: por eso una sola barra del aplicativo mostraba cinco tamaños
   de fuente, y por eso una marca podía re-teñir la app pero NO re-escalarla — la mitad de lo que un
   tema promete.

   Hoy son 65 usos de `var(--mx-text-*)` y quedan CINCO literales (9px ×1 · 15px ×3 · 19px ×1), que son
   los únicos a más de 1px de un escalón: redondearlos sería cambiar la pantalla a ciegas, y este
   archivo no tiene UNA sola prueba que lo cubra (el Studio no tiene proyecto de pruebas).

   ⚠ NO SE PUDO PAGAR SIN TOCAR LA ESCALA, y ése fue el hallazgo. Los tamaños más usados eran 12px (12
   usos) y 12.5px (7): caían en el HUECO entre `xs:11` y `sm:13`. Y no era vicio de esta hoja — medido
   sobre todo el repo, 99 declaraciones escriben un literal en ese hueco, incluidas 17 de `base-ui`, que
   por lo demás usa la escala 122 veces. Cuando hasta el kit que CUMPLE estira la mano al 12px, el
   problema es la escala. Se agregaron dos escalones —`2xs:10` y `xsm:12`— SIN mover ninguno de los
   existentes: renombrar habría movido 217 declaraciones de tamaño sin que nadie las revise.

   LO QUE SIGUE PENDIENTE: los `--mx-space-*`. Los paddings y gaps de acá siguen siendo literales, y el
   dial de densidad (DialesForma) los reescribe — o sea que hoy el dial mueve las filas de la tabla y
   casi nada más.

   Regla para el próximo que edite: ninguna regla de este archivo debería poder escribir un color o un
   tamaño que el tema no pueda alcanzar. */

/* El card vive en columnas flex → width:100% obligatorio (un flex-item sin width se encoge al contenido). */
.mye-card { border: 1px solid var(--mx-color-border); border-radius: 12px; padding: var(--mx-space-4) 18px; background: var(--mx-color-surface); color: var(--mx-color-text); width: 100%; box-sizing: border-box; max-width: 1280px; margin-inline: auto; font-family: var(--mx-font-sans, system-ui), sans-serif; }
.mye-card.mye-form { max-width: 1060px; width: 100%; }
.mye-card--err { border-color: var(--mx-color-danger-light); background: color-mix(in srgb, var(--mx-color-danger) 8%, var(--mx-color-surface)); color: var(--mx-color-danger-text, var(--mx-color-danger)); }
.mye-card__title { font: 700 15px/1.2 system-ui, sans-serif; }
.mye-muted { color: var(--mx-color-text-muted); font-weight: 500; font-size: var(--mx-text-xsm); }

/* Form autogenerado: secciones (fieldset por group) + grilla responsive de campos. Los CAMPOS componen Cf. */
.mye-form__actions { display: flex; gap: var(--mx-space-2); margin-top: var(--mx-space-3); align-items: center; }
/* BORRAR AL OTRO EXTREMO, y no es estética: «Guardar» es el botón que la mano busca sin mirar, y lo
   que no se puede deshacer no puede estar a un pixel de él. El `auto` los separa tanto como dé la
   barra, en vez de fijar una distancia que en pantalla angosta desaparece. */
.mye-form__actions-end { margin-left: auto; display: inline-flex; }
@media (max-width: 520px) {
    /* En una barra que ya envuelve, `margin-left:auto` no separa nada — deja el botón pegado abajo del
       anterior. Se manda a su propio renglón para que la distancia siga existiendo. */
    .mye-form__actions { flex-wrap: wrap; }
    .mye-form__actions-end { margin-left: 0; width: 100%; margin-top: var(--mx-space-2); }
}
.mye-form__group { border: 1px solid var(--mx-color-border); border-radius: 10px; padding: var(--mx-space-1-5) var(--mx-space-4) var(--mx-space-3-5); margin: var(--mx-space-3-5) 0 0; }
.mye-form__legend { font: 700 var(--mx-text-xsm)/1 system-ui, sans-serif; color: var(--mx-color-primary); text-transform: uppercase; letter-spacing: .04em; padding: 0 var(--mx-space-1-5); }
.mye-form__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--mx-space-1) 20px; align-items: start; }
.mye-form__fields > * { min-width: 0; }
.mye-field--wide { grid-column: 1 / -1; }

/* LA COLECCIÓN HIJA PLEGABLE (<details>). El <summary> conserva la pinta del <legend> que reemplaza:
   lo que cambia es que ahora se puede cerrar, y que la vacía nace cerrada. */
details.mye-childgrid > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--mx-space-2); padding: var(--mx-space-1) var(--mx-space-1-5); border-radius: 6px; }
details.mye-childgrid > summary::-webkit-details-marker { display: none; }
details.mye-childgrid > summary::before { content: "▸"; font-size: var(--mx-text-2xs); opacity: .55; transition: transform .12s; }
details.mye-childgrid[open] > summary::before { transform: rotate(90deg); }
details.mye-childgrid > summary:hover { background: color-mix(in srgb, var(--mx-color-primary) 6%, transparent); }
/* el contador es EL DATO de una sección plegada: sin él, cerrada no dice nada */
.mye-childgrid__n { font: 600 var(--mx-text-xs)/1 system-ui, sans-serif; color: var(--mx-color-text-muted); background: var(--mx-color-surface-2, rgba(0,0,0,.05)); border-radius: 999px; padding: 3px var(--mx-space-2); letter-spacing: 0; text-transform: none; }
details.mye-childgrid:not([open]) { padding-bottom: var(--mx-space-1-5); }

/* LA AYUDA A DEMANDA. El botón es discreto (no compite con el campo) pero legible, y el modal
   respeta los saltos del texto: los `help` de esta casa vienen en párrafos, no en una línea. */
.mye-field__ayuda { appearance: none; background: transparent; border: 0; padding: var(--mx-space-0-5) 0 0; margin: 0; cursor: pointer; font: 500 var(--mx-text-xsm)/1.3 var(--mx-font-sans, system-ui), sans-serif; color: var(--mx-color-primary); text-decoration: underline; text-underline-offset: 2px; opacity: .8; }
.mye-field__ayuda:hover { opacity: 1; }
.mye-ayuda { font: 400 15px/1.65 var(--mx-font-sans, system-ui), sans-serif; color: var(--mx-color-text); white-space: pre-wrap; max-width: 62ch; max-height: 65vh; overflow: auto; }

/* layout:"tabs" — barra de pestañas por group (solo el grupo activo se muestra). Tokens --mx-* → sigue el tema. */
.mye-form__tabs { display: flex; flex-wrap: wrap; gap: var(--mx-space-0-5); margin: var(--mx-space-4) 0 0; border-bottom: 1px solid var(--mx-color-border); }
.mye-form__tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--mx-space-2) var(--mx-space-3-5); font: 600 var(--mx-text-sm)/1.2 var(--mx-font-sans, system-ui), sans-serif; color: var(--mx-color-text-muted); cursor: pointer; border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: 7px; transition: color .12s, border-color .12s, background .12s; }
.mye-form__tab:hover { color: var(--mx-color-text); background: color-mix(in srgb, var(--mx-color-primary) 6%, transparent); }
.mye-form__tab.is-active { color: var(--mx-color-primary); border-bottom-color: var(--mx-color-primary); }
.mye-form__tab.has-error { color: var(--mx-color-danger); }
.mye-form__tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mx-color-danger); display: inline-block; flex: none; }
.mye-form__tabs + .mye-form__fields { margin-top: var(--mx-space-4); }

/* widget:"color" — el picker nativo + la escotilla para el estado "heredar" (vacío), que el <input type=color> no expresa. */
.mye-color-widget { display: flex; align-items: flex-end; gap: var(--mx-space-2-5); flex-wrap: wrap; }
.mye-color-widget > :first-child { flex: 1 1 auto; min-width: 0; }
.mye-color-widget__clear { appearance: none; background: transparent; border: 1px solid var(--mx-color-border); border-radius: 8px; padding: var(--mx-space-1-5) var(--mx-space-2-5); font: 500 var(--mx-text-xsm)/1 var(--mx-font-sans, system-ui), sans-serif; color: var(--mx-color-text-muted); cursor: pointer; white-space: nowrap; margin-bottom: var(--mx-space-0-5); }
.mye-color-widget__clear:hover { color: var(--mx-color-text); border-color: var(--mx-color-text-muted); }
.mye-color-widget__hint { white-space: nowrap; margin-bottom: var(--mx-space-2); }

/* Panel de confirmación post-guardado (MyeSubmit): éxito + siguiente paso del proceso + alta nueva + documento. */
.mye-saved { display: flex; flex-direction: column; gap: var(--mx-space-3); margin-top: var(--mx-space-3-5); }
.mye-saved__ic { display: inline-flex; color: var(--mx-color-success); }
.mye-saved__msg strong { font-weight: 700; }
.mye-saved__state { margin-left: var(--mx-space-2); padding: var(--mx-space-0-5) 9px; border-radius: 999px; background: color-mix(in srgb, var(--mx-color-text) 8%, var(--mx-color-surface)); color: var(--mx-color-text-muted); font: 700 var(--mx-text-xs) system-ui, sans-serif; }
.mye-saved__next { display: flex; align-items: center; gap: var(--mx-space-2); flex-wrap: wrap; }
.mye-saved__nextlbl { font: 700 var(--mx-text-2xs) system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--mx-color-text-muted); }
.mye-saved__new { align-self: flex-start; }
.mye-saved__doc { display: flex; align-items: center; gap: var(--mx-space-2-5); flex-wrap: wrap; padding-top: var(--mx-space-1); border-top: 1px dashed color-mix(in srgb, var(--mx-color-success) 30%, var(--mx-color-border)); }
.mye-saved__docok { display: inline-flex; align-items: center; gap: 5px; font: 600 var(--mx-text-xsm) system-ui, sans-serif; color: var(--mx-color-success); }
.mye-saved__docerr { margin-top: var(--mx-space-1-5); }

/* Ref como combobox: búsqueda (typeahead) + crear-inline gateado por rol. */
.mye-refpicker { position: relative; }
.mye-refpicker__clear { position: absolute; right: 6px; top: 7px; border: none; background: none; cursor: pointer; color: var(--mx-color-text-muted); font-size: var(--mx-text-sm); line-height: 1; }
.mye-refpicker__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: var(--mx-space-1); list-style: none; max-height: 240px; overflow: auto; background: var(--mx-color-surface); border: 1px solid var(--mx-color-border); border-radius: 8px; box-shadow: var(--mx-shadow-md, 0 8px 24px rgba(15,23,42,.12)); }
.mye-refpicker__opt { padding: var(--mx-space-1-5) var(--mx-space-2-5); border-radius: 6px; cursor: pointer; font: 500 var(--mx-text-sm) system-ui, sans-serif; color: var(--mx-color-text); }
.mye-refpicker__opt:hover, .mye-refpicker__opt.is-sel { background: var(--mx-color-surface-hover); }
.mye-refpicker__create { padding: 7px var(--mx-space-2-5); margin-top: var(--mx-space-0-5); border-top: 1px solid var(--mx-color-border); color: var(--mx-color-primary); font: 600 var(--mx-text-sm) system-ui, sans-serif; cursor: pointer; }
.mye-refpicker__create:hover { background: var(--mx-color-surface-hover); }
.mye-refpicker__inline { margin-top: var(--mx-space-2); padding: var(--mx-space-2-5); border: 1px dashed var(--mx-color-primary); border-radius: 8px; background: var(--mx-color-surface-2); }

/* Modo CATÁLOGO del ref (picker:catalog): modal del kit; acá el LAYOUT del catálogo. Alto FIJO (≈5 filas). */
.mye-catalog__scroll { height: 240px; overflow-y: auto; margin-top: var(--mx-space-2-5); border: 1px solid var(--mx-color-border); border-radius: 8px; }
.mye-catalog { margin: 0; }
.mye-catalog__ctx { display: flex; align-items: center; gap: var(--mx-space-2); margin-bottom: var(--mx-space-2-5); flex-wrap: wrap; }
.mye-catalog__ctxlbl { display: inline-flex; align-items: center; gap: var(--mx-space-1); font: 700 var(--mx-text-2xs) system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--mx-color-text-muted); }
.mye-catalog__ctxcount { margin-left: auto; font: 600 var(--mx-text-xs) system-ui, sans-serif; color: var(--mx-color-text-muted); }
.mye-catalog thead th { position: sticky; top: 0; background: var(--mx-color-surface); }
.mye-catalog__starcol { width: 30px; text-align: center; }
.mye-catalog__sub { font-size: var(--mx-text-xs); line-height: 1.35; color: var(--mx-color-text-muted); margin-top: var(--mx-space-0-5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mye-catalog__star { border: none; background: none; cursor: pointer; font-size: var(--mx-text-base); color: var(--mx-color-border); line-height: 1; }
.mye-catalog__star.is-on { color: #f59e0b; }
.mye-catalog__favs { display: flex; flex-wrap: wrap; gap: var(--mx-space-1-5); align-items: center; margin-top: var(--mx-space-3); }
.mye-catalog__favs-lbl { font: 700 var(--mx-text-xs) system-ui, sans-serif; color: #f59e0b; margin-right: var(--mx-space-0-5); }

/* Master-detail MODO ROWS: editor de la colección hija embebido en el form (CxSimpleTable pone el chrome). */
.mye-detail { border: 1px solid var(--mx-color-border); border-radius: 10px; padding: var(--mx-space-2); overflow-x: auto; }
.mye-detail__add { margin-top: var(--mx-space-2); }

/* Grilla autogenerada (CyDataTable pone la tabla; acá la barra y el chevron del badge de estado). */
.mye-grid__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mx-space-3); }
.mye-statuspick__chev { font-size: 9px; opacity: .6; }
.mye-page { display: flex; flex-direction: column; gap: var(--mx-space-3-5); }
.mye-page__back { margin-bottom: var(--mx-space-2-5); }

/* Ficha del ref elegido (MyeRefCard — CxCard pone el chrome). */
.mye-refcard__empty { display: flex; align-items: center; gap: var(--mx-space-2); color: var(--mx-color-text-muted); font: 500 var(--mx-text-xsm) system-ui, sans-serif; }

/* Upload de Image/File (attachments del motor). */
.mye-upload { display: flex; align-items: center; gap: var(--mx-space-2); flex-wrap: wrap; }

/* MyeAppShell — badge de identidad en el topbar + auto-dashboard (secciones de KPIs). */
.mye-shell__user { padding: 3px var(--mx-space-2-5); border-radius: 999px; background: color-mix(in srgb, var(--mx-color-text) 8%, var(--mx-color-surface)); color: var(--mx-color-primary); font: 600 var(--mx-text-xs) system-ui, sans-serif; }
/* EL CONTEXTO DEL ENCABEZADO — sobre qué nodo del árbol se está trabajando (`.japp` → `contexto`).
   Va DESPUÉS de las migas y separado por una línea: las migas dicen dónde estoy DENTRO del aplicativo,
   esto dice sobre QUÉ. Pegarlos sin separación los leería como una sola ruta, que es justo lo que no
   son. El nombre pesa y el path no: el path es la coordenada del motor, útil para confirmar, no para
   leer de corrido. */
.mye-shell__ctx {
  display: inline-flex; align-items: baseline; gap: 7px; min-width: 0;
  margin-left: var(--mx-space-3); padding-left: var(--mx-space-3);
  border-left: 1px solid color-mix(in srgb, var(--mx-color-text) 14%, transparent);
}
.mye-shell__ctx-nom {
  font: 600 var(--mx-text-xsm)/1.2 var(--mx-font-sans, system-ui, sans-serif);
  color: var(--mx-color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mye-shell__ctx-nodo {
  font: 400 var(--mx-text-2xs)/1.2 var(--mx-font-mono, ui-monospace, Consolas, monospace);
  color: color-mix(in srgb, var(--mx-color-text) 52%, transparent);
  white-space: nowrap;
}
/* En pantalla angosta el path se va y queda el nombre: de los dos, el que se entiende sin saber cómo
   funciona el motor. */
@media (max-width: 720px) { .mye-shell__ctx-nodo { display: none; } }

.mye-dash__sec { margin-bottom: 20px; }
.mye-dash__h { font: 700 var(--mx-text-sm) system-ui, sans-serif; margin-bottom: var(--mx-space-2-5); color: var(--mx-color-text); }

/* Errores sueltos (fuera de un form del kit). */
.mye-err { padding: var(--mx-space-2) var(--mx-space-3); border-radius: 8px; background: color-mix(in srgb, var(--mx-color-danger) 10%, var(--mx-color-surface)); color: var(--mx-color-danger-text, var(--mx-color-danger)); margin-bottom: var(--mx-space-2); }

/* Modal de transición rica (confirm/capture — MyeCaptureDialog). */
.mye-confirm-back { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 50; }
.mye-confirm { background: var(--mx-color-surface, #fff); color: var(--mx-color-text, #1a1a1a); padding: 18px 20px; border-radius: 12px; width: min(400px, 92vw); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.mye-confirm__text { margin: 0 0 var(--mx-space-2-5); font: 600 var(--mx-text-base)/1.4 system-ui, sans-serif; }
.mye-confirm__campo { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--mx-space-2); }
.mye-confirm__campo > span { font-size: var(--mx-text-xsm); opacity: .8; }
.mye-confirm-acc { display: flex; gap: var(--mx-space-2); justify-content: flex-end; margin-top: var(--mx-space-3); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   E0 (2026-07-18) · LA PIEL DEL KIT INTERACTIVO, REPATRIADA DESDE EL KERNEL.
   Estas clases vivían en kernel/0-core/ui/MxLite.Core.UI.Theming/wwwroot/mx-skin.css — una inversión
   de dependencia (el skin del kernel conocía el vocabulario BEM de un addon) y, peor, un DEFECTO VIVO:
   el único host que corre el kit (el Studio) no enlaza mx-skin.css, así que el picker de transiciones,
   el modal de acciones de fila y el menú de configuración se rendían SIN ESTILO en /portal y /run.
   Verificado antes de mover: ningún consumidor fuera de MxLite.MyEF.* usa una sola de estas clases.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ===== Cambiar-estado (MyeGrid) · el picker de transiciones EN MODAL, botones estilizados por acción ===== */
.mye-statepill { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* Acciones de fila (2026-08-27): EDITAR/VER es un botón propio en la celda, y el ⋮ —cuando hay más
   opciones— abre un MODAL (portal, sin los recortes que la tabla le hacía a un menú absolute).
   El slot los alinea y les da un respiro entre sí; `justify-content:flex-end` los ancla al borde
   derecho de la celda, que es donde la vista los busca en una tabla. */
.mye-rowacts__slot { display: inline-flex; align-items: center; gap: var(--mx-space-1); justify-content: flex-end; }
.mye-rowacts__trigger {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 1px solid transparent; background: transparent; color: var(--mx-color-text-muted);
    border-radius: var(--mx-radius-md, 8px); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.mye-rowacts__trigger:hover { background: var(--mx-color-surface-2); color: var(--mx-color-text); border-color: var(--mx-color-border); }
.mye-rowacts__trigger:focus-visible { outline: 2px solid var(--mx-color-primary); outline-offset: 1px; }
.mye-rowacts { display: flex; flex-direction: column; gap: var(--mx-space-1-5); min-width: 260px; }
.mye-rowacts__item {
    display: flex; align-items: center; gap: var(--mx-space-3); width: 100%; padding: var(--mx-space-3) var(--mx-space-3-5);
    border: 1px solid var(--mx-color-border); background: var(--mx-color-surface); color: var(--mx-color-text);
    border-radius: var(--mx-radius-md, 8px); font: 600 var(--mx-text-base)/1.2 var(--mx-font-sans); cursor: pointer; text-align: left;
    transition: background .12s, border-color .12s;
}
.mye-rowacts__item:hover:not(:disabled) { background: var(--mx-color-surface-2); border-color: var(--mx-color-primary); }
.mye-rowacts__item:disabled { opacity: .5; cursor: not-allowed; }
.mye-rowacts__ic { display: inline-flex; color: var(--mx-color-text-muted); }
.mye-rowacts__item:hover:not(:disabled) .mye-rowacts__ic { color: var(--mx-color-primary); }
.mye-rowacts__item--danger { color: var(--mx-color-danger); }
.mye-rowacts__item--danger .mye-rowacts__ic { color: var(--mx-color-danger); }
.mye-rowacts__item--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-color-danger) 10%, var(--mx-color-surface)); border-color: color-mix(in srgb, var(--mx-color-danger) 45%, var(--mx-color-border)); }
.mye-stpick { display: flex; flex-direction: column; gap: var(--mx-space-3-5); min-width: 260px; }
.mye-stpick__cur { font-size: var(--mx-text-sm); color: var(--mx-color-text-muted); display: flex; align-items: center; gap: var(--mx-space-2); }
.mye-stpick__opts { display: flex; flex-direction: column; gap: var(--mx-space-2); }
.mye-stpick__opt {
    display: flex; align-items: center; gap: var(--mx-space-3); width: 100%; padding: var(--mx-space-3) var(--mx-space-3-5);
    border-radius: var(--mx-radius-md, 8px); border: 1.5px solid var(--mx-color-border);
    background: var(--mx-color-surface); color: var(--mx-color-text);
    font: 600 var(--mx-text-base)/1.2 var(--mx-font-sans); cursor: pointer; text-align: left;
    transition: background .12s, border-color .12s, transform .06s;
}
.mye-stpick__opt:hover:not(:disabled) { transform: translateY(-1px); }
.mye-stpick__opt:disabled { opacity: .5; cursor: not-allowed; }
.mye-stpick__ic { flex: 0 0 auto; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
    border-radius: 50%; background: color-mix(in srgb, currentColor 15%, transparent); }
.mye-stpick__lbl { flex: 1 1 auto; }
/* tono por acción: color de texto/ícono + borde/fondo teñido al hover */
.mye-stpick__opt--success { color: var(--mx-color-success); border-color: color-mix(in srgb, var(--mx-color-success) 45%, var(--mx-color-border)); }
.mye-stpick__opt--success:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-color-success) 12%, var(--mx-color-surface)); }
.mye-stpick__opt--danger  { color: var(--mx-color-danger); border-color: color-mix(in srgb, var(--mx-color-danger) 45%, var(--mx-color-border)); }
.mye-stpick__opt--danger:hover:not(:disabled)  { background: color-mix(in srgb, var(--mx-color-danger) 12%, var(--mx-color-surface)); }
.mye-stpick__opt--warn    { color: var(--mx-color-warn); border-color: color-mix(in srgb, var(--mx-color-warn) 45%, var(--mx-color-border)); }
.mye-stpick__opt--warn:hover:not(:disabled)    { background: color-mix(in srgb, var(--mx-color-warn) 12%, var(--mx-color-surface)); }
.mye-stpick__opt--info,.mye-stpick__opt--primary,.mye-stpick__opt--default { color: var(--mx-color-text); }

/* ===== Footer del rail + ⚙ Configuración (MyeSettingsMenu) ===== */
.az-sidebar__footer { flex: 0 0 auto; padding: var(--mx-space-1) 0; margin-top: auto; }
.mye-settings__gear {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 13px; margin: 1px var(--mx-space-2-5);
    border: 0; background: transparent; color: var(--mx-color-sidebar-fg); border-radius: var(--mx-radius-md, 8px);
    font: 500 var(--mx-text-sm)/1.45 var(--mx-font-sans); cursor: pointer; text-align: left; transition: background .15s;
}
.mye-settings__gear:hover { background: var(--mx-color-sidebar-hover); }
.mye-settings__gear .cx-icon { flex: 0 0 auto; opacity: .85; }
/* en icon-rail / colapsado: solo el ícono, centrado (igual que los nav-item) */
.az-shell--collapsed .mye-settings__gear-lbl { display: none; }
.az-shell--collapsed .mye-settings__gear { justify-content: center; padding: 9px 0; margin: var(--mx-space-0-5) var(--mx-space-2); }
@container (min-width: 641px) and (max-width: 1024px) {
    .mye-settings__gear-lbl { display: none; }
    .mye-settings__gear { justify-content: center; padding: 9px 0; margin: var(--mx-space-0-5) var(--mx-space-2); }
}

/* Configuración = panel MAESTRO-DETALLE: nav de secciones (izq) + panel de la sección (der). Así no queda
   todo AMONTONADO en un scroll largo — cada sección (y los sub-items de seguridad) se navega aparte. */
.mye-settings { display: flex; gap: 0; min-width: 500px; height: min(58vh, 430px); }
.mye-settings__nav {
    flex: 0 0 174px; display: flex; flex-direction: column; gap: var(--mx-space-0-5);
    padding-right: var(--mx-space-3); border-right: 1px solid var(--mx-color-border); overflow-y: auto;
}
.mye-settings__navitem {
    display: flex; align-items: center; gap: var(--mx-space-2-5); width: 100%; padding: 9px 11px;
    border: 0; background: transparent; color: var(--mx-color-text); border-radius: var(--mx-radius-md, 8px);
    font: 500 var(--mx-text-sm)/1.2 var(--mx-font-sans); cursor: pointer; text-align: left; transition: background .12s, color .12s;
}
.mye-settings__navitem .cx-icon { color: var(--mx-color-text-muted); transition: color .12s; }
.mye-settings__navitem:hover { background: var(--mx-color-surface-2); }
.mye-settings__navitem--active { background: color-mix(in srgb, var(--mx-color-primary) 12%, transparent); color: var(--mx-color-primary); font-weight: 600; }
.mye-settings__navitem--active .cx-icon { color: var(--mx-color-primary); }
.mye-settings__navgroup { padding: 13px 11px var(--mx-space-1); font-size: var(--mx-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mx-color-text-subtle); }
.mye-settings__navfoot { margin-top: auto; padding-top: var(--mx-space-2-5); }

.mye-settings__pane { flex: 1; min-width: 0; overflow-y: auto; padding-left: 18px; display: flex; flex-direction: column; gap: var(--mx-space-3); align-items: flex-start; }
.mye-settings__paneh { margin: 0; font-size: 15px; font-weight: 700; color: var(--mx-color-text); }
.mye-settings__paneh2 { margin: var(--mx-space-2-5) 0 0; font-size: var(--mx-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mx-color-text-muted); align-self: stretch; padding-bottom: var(--mx-space-1); border-bottom: 1px solid var(--mx-color-border); }
.mye-settings__sub { font-size: var(--mx-text-xsm); color: var(--mx-color-text-muted); margin: 0; }

/* Cerrar sesión = ítem del nav, en tono destructivo. */
.mye-settings__logout { display: inline-flex; align-items: center; gap: var(--mx-space-2-5); width: 100%; justify-content: flex-start; padding: 9px 11px; border: 0; background: transparent; color: var(--mx-color-danger); border-radius: var(--mx-radius-md, 8px); font: 600 var(--mx-text-sm)/1.2 var(--mx-font-sans); cursor: pointer; transition: background .12s; }
.mye-settings__logout:hover { background: color-mix(in srgb, var(--mx-color-danger) 10%, var(--mx-color-surface)); }

@media (max-width: 560px) {
    .mye-settings { flex-direction: column; height: auto; min-width: 0; }
    .mye-settings__nav { flex: none; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--mx-color-border); padding: 0 0 var(--mx-space-2-5); }
    .mye-settings__navfoot { margin: 0; padding: 0; }
    .mye-settings__pane { padding-left: 0; padding-top: var(--mx-space-3); }
}

/* Botón Buscar (Ctrl+K) del topbar del shell (abre AwCommandPalette) */
.mye-shell__search { display: inline-flex; align-items: center; gap: var(--mx-space-2-5); padding: 9px var(--mx-space-4); min-width: 300px; border: 1px solid var(--mx-color-border); background: var(--mx-color-surface); color: var(--mx-color-text-muted); border-radius: 999px; font: 500 var(--mx-text-base)/1 var(--mx-font-sans); cursor: pointer; transition: border-color .12s, color .12s, box-shadow .12s; }
.mye-shell__search:hover { border-color: var(--mx-color-primary); color: var(--mx-color-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-color-primary) 12%, transparent); }
.mye-shell__search-lbl { flex: 1; text-align: left; }
@media (max-width: 900px) { .mye-shell__search { min-width: 0; } }
.mye-shell__kbd { font-size: var(--mx-text-2xs); font-weight: 600; padding: var(--mx-space-0-5) 5px; border-radius: 5px; background: var(--mx-color-surface-2); color: var(--mx-color-text-subtle); border: 1px solid var(--mx-color-border); }
@media (max-width: 720px) { .mye-shell__search-lbl, .mye-shell__kbd { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   DENSIDAD + PIEL DE TABLA DEL APLICATIVO (2026-07-19)

   EL PROBLEMA. La grilla del backoffice se veía "muy clara": CyDataTable trae 45 líneas de CSS scoped
   —lo mínimo para que sea una tabla— y nadie ponía la piel encima. Sin separadores ni zebra, seguir una
   fila larga con la vista obliga a usar el dedo en la pantalla; y con ~44px por fila entraban 11 filas
   donde caben 18. En una herramienta que se opera todo el día eso se paga en cada consulta.

   SCOPE. Todo cuelga de [data-mye-densidad], que RunMsol pone en su wrapper. Ese selector hace dos
   trabajos a la vez: elige la densidad y encierra la piel dentro del aplicativo, para no tocar el
   chrome del IDE (frontera docs/css/06 — chrome --ztk-*, producto --mx-*). Los colores salen TODOS de
   --mx-*, así que esto sigue al tema resuelto y al modo oscuro sin una sola regla propia de color.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Las tres densidades. Sólo cambian métricas — ningún color depende del modo. */
[data-mye-densidad="comoda"]   { --mye-fila: 46px; --mye-celda-y: 12px; --mye-celda-x: 14px; --mye-fs: 14px; }
[data-mye-densidad="compacta"] { --mye-fila: 36px; --mye-celda-y: 7px;  --mye-celda-x: 12px; --mye-fs: 13.5px; }
[data-mye-densidad="ultra"]    { --mye-fila: 29px; --mye-celda-y: 3px;  --mye-celda-x: 10px; --mye-fs: 13px; }

[data-mye-densidad] .cy-datatable { font-size: var(--mye-fs); border-collapse: separate; border-spacing: 0; }

/* CABECERA — pegajosa: al scrollear 200 filas, saber qué columna se está mirando no debería costar
   volver arriba. El peso y el tamaño bajan a propósito: el encabezado ORIENTA, no compite con el dato. */
[data-mye-densidad] .cy-datatable thead th {
  position: sticky; top: 0; z-index: 2;
  /* el fondo y el peso vienen de la maqueta (antes vivían en una copia 300 líneas abajo) */
  background: var(--mx-color-bg);
  font: var(--mx-font-weight-bold) var(--mx-text-xs)/1.2 var(--mx-font-sans); letter-spacing: .05em;
  border-bottom: 1px solid var(--mx-color-border-strong, var(--mx-color-border));
  color: var(--mx-color-text-muted);
  font: 600 var(--mx-text-xsm)/1.2 var(--mx-font-sans); letter-spacing: .04em; text-transform: uppercase;
  padding: 9px var(--mye-celda-x); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--mx-color-border);
}

/* FILAS — la hairline es lo que deja seguir una fila larga sin perder el renglón. La zebra va MUY
   sutil (2.5%) y encima de la hairline, no en su lugar: juntas dan ritmo sin ensuciar. */
[data-mye-densidad] .cy-datatable tbody td {
  height: var(--mye-fila);
  padding: var(--mye-celda-y) var(--mye-celda-x);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-color-border) 60%, transparent);
  color: var(--mx-color-text); vertical-align: middle;
}
[data-mye-densidad] .cy-datatable tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--mx-color-text) 2.5%, transparent);
}
[data-mye-densidad] .cy-datatable tbody tr:hover td {
  background: color-mix(in srgb, var(--mx-color-primary) 5%, transparent);
}

/* ⚠ LA ZEBRA ERA INVISIBLE: la copia de abajo la fijaba en el literal #FAFCFA, que contra el blanco de
   la superficie da 1.02:1 — o sea, nada. Y como literal, ningún tema podía alcanzarla ni invertirla en
   oscuro. Se conserva la razón que traía (PLANA y no alfa: sobre una fila marcada o resaltada el alfa
   se acumulaba y la franja par salía más oscura) pero derivada del tema: mezcla contra la SUPERFICIE,
   no contra transparente. */
[data-mye-densidad] .cy-datatable tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--mx-color-text) 3%, var(--mx-color-surface));
}

/* La PRIMERA columna es el identificador de la fila: gana peso para que el ojo la use de ancla al
   barrer verticalmente. Es la jerarquía que faltaba — antes toda la fila pesaba igual. */
[data-mye-densidad] .cy-datatable tbody td:first-child { font-weight: 600; }

/* NÚMEROS a la derecha y con cifras tabulares: alineados, las magnitudes se comparan de un vistazo
   (los dígitos ocupan lo mismo, así que las unidades caen en la misma columna óptica). */
[data-mye-densidad] .cy-datatable .cy-datatable__cell--end,
[data-mye-densidad] .cy-datatable td[class*="--end"] { font-variant-numeric: tabular-nums; }

/* Las ACCIONES no compiten con el dato: aparecen al pasar por la fila y quedan siempre accesibles por
   teclado (:focus-within) — ocultarlas del todo las haría inalcanzables sin mouse. */
[data-mye-densidad] .cy-datatable tbody .mye-rowacts__trigger { opacity: .45; transition: opacity .12s; }
[data-mye-densidad] .cy-datatable tbody tr:hover .mye-rowacts__trigger,
[data-mye-densidad] .cy-datatable tbody tr:focus-within .mye-rowacts__trigger { opacity: 1; }

/* El card que envuelve la grilla: el borde y el radio los pone .mye-card; acá sólo se recorta la tabla
   para que la cabecera pegajosa no se derrame sobre la esquina redondeada. */
[data-mye-densidad] .mye-grid { padding: 0; overflow: hidden; }
[data-mye-densidad] .mye-grid__bar { padding: var(--mx-space-3) var(--mx-space-4); margin-bottom: 0; border-bottom: 1px solid var(--mx-color-border); }

/* ── El pill de estado: la FORMA lleva el dato, no sólo el color ──────────────────────────────────
   El punto no es decoración: quien no distingue rojo de verde igual lee el estado por el texto, y el
   punto le da un ancla visual a la misma altura. Los tonos semánticos (success/warn/danger) son
   DISTINTOS del acento de marca a propósito: si el estado usara el verde de la marca, "es nuestro" y
   "está bien" se verían igual. */
[data-mye-densidad] .mye-statepill {
  display: inline-flex; align-items: center; gap: var(--mx-space-1-5);
  padding: var(--mx-space-0-5) 9px var(--mx-space-0-5) 7px; border-radius: 999px;
  font: 600 var(--mx-text-xsm)/1.6 var(--mx-font-sans); white-space: nowrap;
  background: color-mix(in srgb, var(--mx-color-text) 7%, transparent);
  color: var(--mx-color-text-muted);
  border: 1px solid color-mix(in srgb, var(--mx-color-text) 10%, transparent);
}
[data-mye-densidad] .mye-statepill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
[data-mye-densidad] .mye-statepill:hover { border-color: var(--mx-color-primary); }

/* ── ⚙ Apariencia · el selector de densidad ──────────────────────────────────────────────────────
   Se elige mirando, no leyendo: cada opción MUESTRA su proporción con rayitas del alto proporcional
   a sus filas. Una lista de tres palabras («Cómoda / Compacta / Ultra») no dice nada hasta probarla. */
.mye-densidad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mx-space-2); margin-top: var(--mx-space-2); }
.mye-densidad__op {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--mx-space-1-5);
  padding: var(--mx-space-2-5) var(--mx-space-3); cursor: pointer; text-align: left;
  border: 1px solid var(--mx-color-border); border-radius: 10px;
  background: var(--mx-color-surface); color: var(--mx-color-text);
  font: inherit; transition: border-color .12s, background .12s;
}
.mye-densidad__op:hover { border-color: var(--mx-color-primary); }
.mye-densidad__op:focus-visible { outline: 2px solid var(--mx-color-primary); outline-offset: 2px; }
.mye-densidad__op.is-on {
  border-color: var(--mx-color-primary);
  background: color-mix(in srgb, var(--mx-color-primary) 8%, var(--mx-color-surface));
  box-shadow: inset 0 0 0 1px var(--mx-color-primary);
}
.mye-densidad__muestra { display: flex; flex-direction: column; gap: var(--mx-space-0-5); width: 100%; }
.mye-densidad__muestra i {
  display: block; width: 100%; border-radius: 2px;
  background: color-mix(in srgb, var(--mx-color-text) 18%, transparent);
}
.mye-densidad__op.is-on .mye-densidad__muestra i { background: color-mix(in srgb, var(--mx-color-primary) 55%, transparent); }
.mye-densidad__lbl { font: 600 var(--mx-text-sm)/1.2 var(--mx-font-sans); }
.mye-densidad__hint { font: 400 var(--mx-text-xs)/1.3 var(--mx-font-sans); color: var(--mx-color-text-subtle); }
.mye-settings__paneh2 { font: 600 var(--mx-text-xsm)/1 var(--mx-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--mx-color-text-subtle); margin: 18px 0 var(--mx-space-0-5); }

@media (max-width: 560px) { .mye-densidad { grid-template-columns: 1fr; } }

/* Respeta a quien pidió menos movimiento: las transiciones de arriba son cosméticas, no informan nada. */
@media (prefers-reduced-motion: reduce) {
  [data-mye-densidad] .mye-rowacts__trigger, .mye-densidad__op { transition: none; }
}

/* ── Filtro rápido por estado (MyeGrid · chips) ──────────────────────────────────────────────────
   Derivado de los estados DECLARADOS del .myef. Vive entre la barra y la tabla: es el contexto de lo
   que estás viendo, así que va pegado a lo que filtra y no en un menú aparte. */
.mye-chips { display: flex; flex-wrap: wrap; gap: var(--mx-space-1-5); padding: var(--mx-space-2-5) var(--mx-space-4); border-bottom: 1px solid var(--mx-color-border); }
.mye-chips__c {
  display: inline-flex; align-items: center; gap: var(--mx-space-1-5);
  padding: var(--mx-space-1) var(--mx-space-2-5); border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mx-color-border); background: var(--mx-color-surface);
  color: var(--mx-color-text-muted); font: 500 var(--mx-text-xsm)/1.5 var(--mx-font-sans);
  transition: border-color .12s, color .12s;
}
.mye-chips__c:hover { border-color: var(--mx-color-primary); color: var(--mx-color-text); }
.mye-chips__c:focus-visible { outline: 2px solid var(--mx-color-primary); outline-offset: 1px; }
/* El chip activo se marca con FONDO además del borde: sobre una fila de pares, el borde solo se pierde. */
.mye-chips__c.is-on {
  background: color-mix(in srgb, var(--mx-color-primary) 12%, var(--mx-color-surface));
  border-color: var(--mx-color-primary); color: var(--mx-color-primary-text, var(--mx-color-text)); font-weight: 600;
}
.mye-chips__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
/* El conteo va atenuado y con cifras tabulares: acompaña la etiqueta, no compite con ella. */
.mye-chips__n { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mye-chips__c { transition: none; } }

/* ── Identidad en el pie del rail (MyeIdentityChip) ──────────────────────────────────────────────
   El rail usa tokens propios (--mx-color-sidebar-*) que caen a los generales si el tema no los pisa:
   así el pie sigue al sidebar cuando la marca lo tiñe aparte, y al tema cuando no. */
.mye-idchip {
  display: block;   /* el chip pasó a ser cabecera + desplegable: ya no es una fila */
  padding: 0; margin-bottom: var(--mx-space-1-5); border-radius: 10px;
  background: color-mix(in srgb, var(--mx-color-sidebar-fg, var(--mx-color-text)) 6%, transparent);
  min-width: 0;   /* sin esto el flex-item no deja que el texto se recorte y desborda el rail */
}
/* La cabecera es un <button>: se abre con teclado y lo anuncia con aria-expanded. Hereda tipografía
   y color del rail — un botón que se vea «de formulario» acá rompería la línea del sidebar. */
.mye-idchip__cab {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: var(--mx-space-2) var(--mx-space-2-5); background: none; border: 0; border-radius: 10px;
  color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0;
}
.mye-idchip__cab:hover { background: color-mix(in srgb, var(--mx-color-sidebar-fg, var(--mx-color-text)) 7%, transparent); }
.mye-idchip__chev { flex: none; font-size: var(--mx-text-2xs); opacity: .5; }
/* La lista de capacidades: monoespaciada porque son IDENTIFICADORES, no prosa — y con su propio
   scroll, que un gestor con nueve capacidades no puede empujar el ⚙ fuera de la pantalla. */
.mye-idchip__subs {
  margin: 0; padding: 0 var(--mx-space-2-5) 9px var(--mx-space-3); list-style: none;
  max-height: 30vh; overflow: auto;
  border-top: 1px solid color-mix(in srgb, var(--mx-color-sidebar-fg, var(--mx-color-text)) 10%, transparent);
}
.mye-idchip__subs li {
  font: 400 var(--mx-text-2xs)/1.6 var(--mx-font-mono, ui-monospace, Consolas, monospace);
  color: color-mix(in srgb, var(--mx-color-sidebar-fg, var(--mx-color-text)) 62%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-top: 5px;
}
.mye-idchip__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
/* El nombre se recorta con puntos suspensivos: un email largo no puede ensanchar el rail. */
.mye-idchip__nom {
  font: 600 var(--mx-text-xsm)/1.3 var(--mx-font-sans);
  color: var(--mx-color-sidebar-fg, var(--mx-color-text));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mye-idchip__rol {
  font: 500 var(--mx-text-xs)/1.3 var(--mx-font-sans);
  color: color-mix(in srgb, var(--mx-color-sidebar-fg, var(--mx-color-text)) 65%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* En icon-rail (colapsado) el chip DESAPARECE entero. Antes quedaba el avatar; ahora no hay avatar
   —se fue con el correo— y un rango recortado a dos letras no dice nada. El rol sigue en el tooltip
   del ⚙ y en el menú de usuario: esconder algo que no cabe es mejor que insinuarlo. */
.az-sidebar--rail .mye-idchip { display: none; }

/* ── Celda apilada (hint `under`) ────────────────────────────────────────────────────────────────
   Título + subtítulo en una sola celda. line-height ajustado para que dos renglones entren en la
   altura de fila de la densidad compacta sin empujarla. */
.mye-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mye-stack__t { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
/* METADATO DEL MOTOR en una celda (el campo de scope). Es la MISMA receta que .mye-shell__ctx-nodo
   —mono, atenuado, una línea— porque es el mismo dato: una coordenada del motor, no prosa. El span es
   obligatorio: el `td` fuerza `color: var(--mx-color-text)`, así que desde la celda no se puede bajar. */
.mye-meta { font: 400 var(--mx-text-2xs)/1.3 var(--mx-font-mono, ui-monospace, Consolas, monospace); color: var(--mx-color-text-subtle, var(--mx-color-text-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 22ch; vertical-align: middle; }

.mye-stack__s {
  font: 400 var(--mx-text-xsm)/1.3 var(--mx-font-mono, ui-monospace, monospace);
  color: var(--mx-color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* En ultra no entran dos renglones: el subtítulo se esconde. Sigue en el tooltip y en la ficha —
   la densidad extrema es una decisión de "quiero ver más filas", y esto es lo que cuesta. */
[data-mye-densidad="ultra"] .mye-stack__s { display: none; }

/* ── Filtros por campo (hint `filter`) ───────────────────────────────────────────────────────────
   Un <select> nativo con la piel del tema: el sistema ya lo pinta bien en móvil, con teclado y con
   lector de pantalla. Reemplazarlo por un menú propio era gastar en volver a resolver eso. */
.mye-chips__g { display: inline-flex; flex-wrap: wrap; gap: var(--mx-space-1-5); }
.mye-filtro {
  display: inline-flex; align-items: center; gap: var(--mx-space-1-5);
  padding: 3px var(--mx-space-1-5) 3px var(--mx-space-2-5); border-radius: 999px;
  border: 1px solid var(--mx-color-border); background: var(--mx-color-surface);
  font: 500 var(--mx-text-xsm)/1.5 var(--mx-font-sans); color: var(--mx-color-text-muted);
}
.mye-filtro:focus-within { border-color: var(--mx-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-color-primary) 12%, transparent); }
.mye-filtro.is-on { border-color: var(--mx-color-primary); background: color-mix(in srgb, var(--mx-color-primary) 10%, var(--mx-color-surface)); color: var(--mx-color-text); }
.mye-filtro__lbl { white-space: nowrap; }
.mye-filtro__sel {
  border: 0; background: none; color: inherit; font: 600 var(--mx-text-xsm)/1.5 var(--mx-font-sans);
  padding: 1px var(--mx-space-0-5); cursor: pointer; max-width: 160px;
}
.mye-filtro__sel:focus { outline: none; }   /* el anillo lo pinta el contenedor (:focus-within) */

/* ── El buscador de la grilla (2026-08-26) ───────────────────────────────────────────────────────
   Misma píldora que los filtros de campo, con un <input type="search"> nativo adentro: trae su
   propia cruz para vaciarlo y el Escape que el usuario ya tiene en los dedos. Es MÁS ANCHO que un
   filtro porque acá se escribe, no se elige — un campo de texto del ancho de un combo invita a
   escribir tres letras y rendirse. */
.mye-filtro--buscar { padding-left: var(--mx-space-2); min-width: 15rem; }
.mye-filtro--buscar > svg { flex: none; opacity: .6; }
.mye-filtro__buscar {
  border: 0; background: none; color: inherit; font: 500 var(--mx-text-xsm)/1.5 var(--mx-font-sans);
  padding: 1px var(--mx-space-0-5); flex: 1 1 auto; min-width: 0;
}
.mye-filtro__buscar:focus { outline: none; }   /* el anillo lo pinta el contenedor (:focus-within) */
.mye-filtro__buscar::placeholder { color: var(--mx-color-text-muted); opacity: .8; }
/* Chrome pinta su propia cruz sólo con este appearance; sin esto el campo se vacía únicamente
   seleccionando y borrando, que es el gesto que nadie hace. */
.mye-filtro__buscar::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; cursor: pointer; }

/* La escotilla para deshacer todo de una: con filtros combinados es fácil olvidarse uno activo y
   creer que no hay datos. Se pinta como acción de texto, no como botón — es una salida, no un destino. */
.mye-chips__clr {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--mx-color-primary); font: 600 var(--mx-text-xsm)/1.5 var(--mx-font-sans);
  padding: var(--mx-space-1) var(--mx-space-2); border-radius: 6px;
}
.mye-chips__clr:hover { background: color-mix(in srgb, var(--mx-color-primary) 10%, transparent); }
.mye-chips__clr:focus-visible { outline: 2px solid var(--mx-color-primary); outline-offset: 1px; }

/* El espaciador empuja las acciones al extremo derecho de la barra, dejando el título anclado a la
   izquierda. Es lo que hace que la barra se lea como "qué estás viendo … qué podés hacer". */
.mye-grid__sp { flex: 1 1 auto; }
.mye-grid__bar { gap: var(--mx-space-2); }

/* Columna de selección: angosta y con la casilla centrada. El ancho fijo evita que la columna baile
   cuando cambia el contenido de la fila. */
[data-mye-densidad] .cy-datatable__selh,
[data-mye-densidad] .cy-datatable__sel { width: 36px; padding-left: var(--mx-space-3); padding-right: 0; text-align: center; }
[data-mye-densidad] .cy-datatable__selh input,
[data-mye-densidad] .cy-datatable__sel input { cursor: pointer; accent-color: var(--mx-color-primary); }
/* La fila marcada se tiñe: sin esto, con la casilla fuera del campo visual al scrollear
   horizontalmente, no hay forma de saber qué está seleccionado. */
[data-mye-densidad] .cy-datatable tbody tr:has(.cy-datatable__sel input:checked) td {
  background: color-mix(in srgb, var(--mx-color-primary) 10%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   CLON DE LA MAQUETA · formas, tamaños y tipografía (2026-07-19)

   Los COLORES no están acá: viven en mxthemes/plaza-mercado/base.jthm como deltas sparse del tema, que
   es el mecanismo que el motor ya tenía para esto. Acá va sólo lo que es GEOMETRÍA — anchos, paddings,
   tamaños de letra— porque eso no es un token de marca sino la forma de este shell.

   TODO cuelga de [data-mye-densidad], el wrapper del aplicativo: el chrome del IDE comparte estos
   mismos componentes Az y no se toca (frontera docs/css/06).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── El rail ─────────────────────────────────────────────────────────────────────────────────────── */
[data-mye-densidad] .az-shell { --az-rail-w: 232px; --az-rail-collapsed-w: 62px; }
[data-mye-densidad] .az-sidebar { padding: 0 0 var(--mx-space-3-5); }

/* La marca: cuadrito con la inicial + nombre + workspace en mono. */
/* hueco del PIN (2026-07-20): el pin va absoluto en la esquina de esta fila; sin este padding un
   nombre largo («Backoffice de ciudad») le corre por debajo. Va acá y no en el CSS scoped porque
   mye-ui.css es SIN CAPA y su `padding` shorthand le gana a cualquier padding-right capado. */
[data-mye-densidad] .az-sidebar__brand {
  display: flex; align-items: center; gap: var(--mx-space-2-5); padding: 15px 38px 13px var(--mx-space-3-5);
  border-bottom: 1px solid rgb(255 255 255 / .07); margin: 0;
}
.mye-brand__mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--mx-color-primary); color: var(--mx-color-on-primary, #fff);
  font: 800 var(--mx-text-base)/1 var(--mx-font-sans);
}
.mye-brand__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mye-brand__name {
  font: 660 var(--mx-text-base)/1.25 var(--mx-font-sans); letter-spacing: -.01em;
  color: var(--mx-color-sidebar-fg, var(--mx-color-text));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El workspace en MONO: es un identificador de sistema, no una etiqueta humana — la mono lo dice sin
   necesidad de explicarlo, y de paso lo separa visualmente del nombre del aplicativo. */
.mye-brand__ws {
  font: 400 var(--mx-text-2xs)/1.3 var(--mx-font-mono);
  color: var(--mx-color-sidebar-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Encabezado de sección del menú. */
[data-mye-densidad] .az-nav-section__label {
  font: 700 var(--mx-text-2xs)/1 var(--mx-font-sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mx-color-sidebar-muted); padding: var(--mx-space-4) var(--mx-space-3-5) var(--mx-space-1-5); margin: 0;
}

/* El ítem. La barra de acento pasa de box-shadow a border-left: en la maqueta el borde OCUPA espacio y
   empuja el contenido, y ese desplazamiento de 3px al activar es parte de cómo se lee el estado. Un
   box-shadow inset se pinta encima sin mover nada, y el ítem activo queda sutilmente desalineado. */
[data-mye-densidad] .az-nav-item {
  gap: var(--mx-space-2-5); padding: 7px var(--mx-space-3-5); border-radius: 0;
  border-left: 3px solid transparent;
  font-size: var(--mx-text-sm); line-height: 1.4;
  color: var(--mx-color-sidebar-fg, var(--mx-color-text));
}
[data-mye-densidad] .az-nav-item:hover { background: rgb(255 255 255 / .06); }
[data-mye-densidad] .az-nav-item--active {
  background: var(--mx-color-sidebar-active-bg);
  border-left-color: var(--mx-color-primary);
  box-shadow: none;                       /* la barra ahora es el border-left */
  font-weight: 620;
  color: var(--mx-color-sidebar-fg, var(--mx-color-text));
}
/* El ícono va atenuado en reposo y toma el color del texto al activarse o al pasar por encima: es lo
   que hace que la fila activa se lea como UNA cosa y no como ícono + etiqueta sueltos. */
[data-mye-densidad] .az-nav-item__icon { color: var(--mx-color-sidebar-muted); flex: none; display: grid; place-items: center; }
[data-mye-densidad] .az-nav-item--active .az-nav-item__icon,
[data-mye-densidad] .az-nav-item:hover .az-nav-item__icon { color: inherit; }

/* El contador: a la derecha del todo, atenuado y con cifras tabulares para que las unidades caigan en
   la misma columna óptica al recorrer el menú de arriba abajo. */
[data-mye-densidad] .az-nav-item__badge {
  margin-left: auto; font: 400 var(--mx-text-xs)/1 var(--mx-font-sans);
  color: var(--mx-color-sidebar-muted); font-variant-numeric: tabular-nums;
  background: none; padding: 0; border: 0; min-width: 0;
}

/* El pie del rail. */
[data-mye-densidad] .az-sidebar__footer {
  margin-top: auto; padding: var(--mx-space-3) var(--mx-space-3-5) 0;
  border-top: 1px solid rgb(255 255 255 / .07);
}
[data-mye-densidad] .mye-idchip { background: none; padding: 0 0 var(--mx-space-2); margin: 0; gap: 9px; font-size: var(--mx-text-xsm); }
[data-mye-densidad] .mye-idchip__nom { font: 400 var(--mx-text-xsm)/1.3 var(--mx-font-sans); color: var(--mx-color-sidebar-fg); }
[data-mye-densidad] .mye-idchip__rol { font: 400 var(--mx-text-2xs)/1.3 var(--mx-font-sans); color: var(--mx-color-sidebar-muted); }

/* ── La tabla ────────────────────────────────────────────────────────────────────────────────────
   ⚠ ACÁ HABÍA CUATRO REGLAS QUE YA ESTABAN DEFINIDAS 300 LÍNEAS MÁS ARRIBA (fusionadas 2026-08-25).
   Misma especificidad, así que ganaba ESTA copia y la de arriba —la que usaba tokens y traía su razón
   escrita— quedaba muerta sin que nada lo señalara. El criterio de la fusión: gana el valor VIGENTE
   (el que hoy se ve en pantalla), salvo donde la versión de arriba tenía un ARGUMENTO escrito — ahí
   gana el argumento, porque una decisión razonada no se revierte en silencio. Ver el bloque único en
   la sección de la tabla, más arriba. */

/* ═══ CLON · TANDA 2: lo que el barrido por zonas encontró y el primer pase no ═══════════════════════
   Contexto de cascada (verificado): el host del Studio carga mye-ui.css como <link> SIN @layer, así que
   este archivo gana sobre az.css (layer lib) y sobre los scoped. Y NO carga mx-skin.css — varias reglas
   que en el preview corrigen al shell acá no existen, por eso hay que repetirlas.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* El rail era GLASS: 88% de opacidad + blur(14px). Sobre un fondo claro eso lava el #14201B y el verde
   oscuro nunca llegaba a verse. La maqueta lo quiere plano y opaco. */
[data-mye-densidad] .az-shell__rail {
  background: var(--mx-color-sidebar-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* EL RAIL VA DE PUNTA A PUNTA. El shell arma "topbar topbar" / "rail main", o sea la barra superior
   cruza por encima del rail. En la maqueta el rail es una columna completa —la marca es lo primero de
   la página— y el topbar vive sólo sobre el contenido. */
@container (min-width: 641px) {
  [data-mye-densidad] .az-shell { grid-template-areas: "rail topbar" "rail main"; }
}
[data-mye-densidad] .az-shell__topbar { background: var(--mx-color-surface); }

/* Los ítems van a sangre: sin margen ni radio, para que la barra de acento pueda pegarse al borde. */
[data-mye-densidad] .az-nav-item { margin: 0; width: 100%; }

/* El activo mantiene el texto CLARO — lo que se tiñe de verde es sólo el ícono. Con el texto en
   var(--mx-color-primary) quedaba verde oscuro sobre casi negro: ilegible. */
[data-mye-densidad] .az-nav-item--active { color: var(--mx-color-sidebar-fg); }
[data-mye-densidad] .az-nav-item--active .az-nav-item__icon { color: var(--mx-color-primary); }

/* El contador era una PÍLDORA LLENA verde con texto blanco: gritaba más que la etiqueta del ítem.
   En la maqueta es texto plano atenuado — informa sin competir. */
[data-mye-densidad] .az-nav-item__badge {
  background: none; border: 0; padding: 0; min-width: 0; border-radius: 0;
  color: var(--mx-color-sidebar-muted); font-weight: 400;
}

/* ── Tabla ──────────────────────────────────────────────────────────────────────────────────────── */
/* .cx-table declara su propio font-size, que gana a la herencia del div de densidad: las tres
   densidades cambiaban el alto de fila pero NO el tamaño del texto. */
[data-mye-densidad] .cx-table { font-size: var(--mye-fs); }
[data-mye-densidad="comoda"]   { --mye-fs: 14px; }
[data-mye-densidad="ultra"]    { --mye-fs: 12.5px; }

/* La tabla va a sangre dentro de la card: el marco propio (borde + radio + sombra) daba una caja
   dentro de otra caja. */
[data-mye-densidad] .cx-table {
  border: 0; border-radius: 0; box-shadow: none; background: none;
}

/* Los pills de estado usaban los tonos -light de la paleta (#ADF3B9 menta, #FFE16B amarillo pleno):
   saturados como una alerta. La maqueta usa lavados, que es lo que corresponde a un fondo de etiqueta. */
[data-mye-densidad] .cx-badge--success { background: var(--mx-color-success-surface); color: var(--mx-color-success); }
[data-mye-densidad] .cx-badge--warn    { background: var(--mx-color-warn-surface);    color: var(--mx-color-warn); }
[data-mye-densidad] .cx-badge--danger  { background: var(--mx-color-danger-surface);  color: var(--mx-color-danger); }
/* El pill de transición envolvía al badge en una SEGUNDA cápsula gris: dos cápsulas concéntricas. */
[data-mye-densidad] .mye-statepill { background: none; border: 0; padding: 0; }

/* El pie de la grilla no tenía separador ni respiro. */
[data-mye-densidad] .cy-datatable__foot {
  border-top: 1px solid var(--mx-color-border); padding: var(--mx-space-2-5) 18px;
  font-size: var(--mx-text-xsm); color: var(--mx-color-text-muted);
}

/* ── Cabecera y topbar ──────────────────────────────────────────────────────────────────────────── */
[data-mye-densidad] .mye-card__title { font-size: 19px; font-weight: 700; }
/* El conteo pasa a ser una cápsula con borde: se lee como un dato, no como texto suelto al lado. */
[data-mye-densidad] .mye-card__title .mye-muted {
  display: inline-block; margin-left: var(--mx-space-2); padding: var(--mx-space-0-5) 9px; border-radius: 999px;
  background: var(--mx-color-bg); border: 1px solid var(--mx-color-border);
  font: 500 var(--mx-text-xsm)/1.5 var(--mx-font-sans); vertical-align: middle;
}
/* Los chips son rectángulos redondeados (7px), no píldoras: se distinguen de los pills de ESTADO,
   que sí son cápsulas. Formas distintas para cosas distintas. */
[data-mye-densidad] .mye-chips__c, [data-mye-densidad] .mye-filtro { border-radius: 7px; }
[data-mye-densidad] .cx-btn { border-radius: 8px; }

/* El buscador era una píldora de 300px con letra de 14.5px. */
[data-mye-densidad] .mye-shell__search {
  border-radius: 8px; min-width: 180px; font: 400 var(--mx-text-xsm)/1.5 var(--mx-font-sans);
}
[data-mye-densidad] .aw-breadcrumb { font-size: var(--mx-text-xsm); }
[data-mye-densidad] .aw-breadcrumb__step, [data-mye-densidad] .aw-breadcrumb__link { color: var(--mx-color-text-subtle); }
/* La campana era un botón de 36px con borde; en la maqueta es sólo el ícono. */
[data-mye-densidad] .aw-notif__trigger {
  width: auto; height: auto; border: 0; border-radius: 0; background: none;
  color: var(--mx-color-text-muted);
}

/* ═══ LA GRILLA QUE NO ENTRA (2026-08-27) ═══════════════════════════════════════════════════════
   Tres arreglos que se complementan. Dos viven en C# (las columnas de valor único suben al
   encabezado, y los booleanos se funden en «Papeles»); acá va el tercero y el chrome del primero. */

/* A · LO QUE TODAS LAS FILAS COMPARTEN, dicho una vez. No es un filtro ni un chip: es el encabezado
   de lo que estás mirando, así que va pegado al título y con menos peso que él. */
.mye-grid__ctx {
    display: flex; flex-wrap: wrap; gap: var(--mx-space-1) var(--mx-space-4);
    padding: 0 var(--mx-space-1) var(--mx-space-2);
    border-bottom: 1px solid var(--mx-color-border);
    margin-bottom: var(--mx-space-2);
}
.mye-grid__ctx-par { display: inline-flex; align-items: baseline; gap: var(--mx-space-1-5); }
.mye-grid__ctx-k {
    font: 700 var(--mx-text-xsm)/1.4 var(--mx-font-sans); text-transform: uppercase;
    letter-spacing: .05em; color: var(--mx-color-text-muted);
}
.mye-grid__ctx-v { font: 600 var(--mx-text-sm)/1.4 var(--mx-font-sans); color: var(--mx-color-text); }

/* C · LA PRIMERA COLUMNA NO SE VA CON EL SCROLL.
   Cuando la tabla igual no entra —y con quince columnas no va a entrar nunca— lo que no se puede
   perder es DE QUIÉN es la fila: sin el nombre a la vista, las celdas de la derecha son números
   sueltos. El `left: 0` ancla contra el contenedor que scrollea, no contra la ventana.
   ⚠ VA CON FONDO OPACO SÍ O SÍ: una celda sticky transparente deja pasar por debajo el texto que se
   desplaza, y el resultado se lee peor que sin fijar nada. */
/* ⚠ Y ANTES QUE NADA, QUE HAYA SCROLL. `.mye-card` lleva `overflow: hidden` —lo necesita para que
   el contenido respete sus esquinas redondeadas— y eso hacía que una tabla más ancha que la card
   NO se desplazara: se RECORTABA. Las columnas de la derecha no quedaban "más allá", quedaban
   inalcanzables, sin barra y sin ninguna señal de que faltaba algo. Se descubrió midiendo el DOM
   para comprobar el sticky: `overflow-x: hidden` en la card y `scrollWidth == clientWidth`.
   El `auto` va en el hijo, no en la card, para no romperle las esquinas. */
.mye-grid .cy-datatable { overflow-x: auto; }
/* ⚠ EL z-index TIENE QUE GANARLE A SUS HERMANOS, no sólo al contenido. `cx-tables.css` ya pone
   `thead th { position: sticky; top: 0 }` para el encabezado vertical, así que las celdas de la
   primera columna quedan sticky en DOS ejes — bien— pero con el MISMO z-index que las demás. Y con
   z-index igual gana el que viene DESPUÉS en el DOM: al desplazarse, «Qué es» se metía debajo y se
   pintaba ENCIMA de «Nombre». Medido: `Nombre` en x=87 y `Qué es` en x=85, los dos con z=2.
   Por eso 3 y no 2: tiene que estar por encima de la fila entera, no del fondo. */
.mye-grid .cy-datatable table th:first-child,
.mye-grid .cy-datatable table td:first-child {
    position: sticky; left: 0; z-index: 3;
    background: var(--mx-color-surface);
    box-shadow: 1px 0 0 var(--mx-color-border);
}
/* El encabezado de esa columna cruza los dos ejes: se queda al scrollear a lo ancho Y a lo largo. */
.mye-grid .cy-datatable table thead th:first-child { z-index: 4; }
/* La fila con hover cambia de fondo: la celda fija tiene que acompañar, o queda un rectángulo del
   color viejo flotando sobre una fila resaltada. */
.mye-grid .cy-datatable table tbody tr:hover td:first-child { background: var(--mx-color-surface-2); }

/* ═══ LA FICHA (2026-08-27) — la pantalla de VER un registro ═══════════════════════════════════
   Cabecera con quién-es + qué-se-puede-hacer, los datos clave en dos columnas, y lo relacionado
   como chips-contador que abren UNA colección a la vez. El form quedó detrás del gesto «Editar». */

.mye-ficha { display: flex; flex-direction: column; gap: 16px; }

.mye-ficha__cab {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 16px 18px;
    background: var(--mx-color-surface);
    border: 1px solid var(--mx-color-border);
    border-radius: var(--mx-radius-lg, 12px);
}
.mye-ficha__quien { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mye-ficha__titulo { margin: 0; font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.mye-ficha__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.mye-ficha__datos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 24px;
    margin: 0; padding: 16px 18px;
    background: var(--mx-color-surface);
    border: 1px solid var(--mx-color-border);
    border-radius: var(--mx-radius-lg, 12px);
}
.mye-ficha__dato dt { font-size: .78rem; opacity: .65; text-transform: uppercase; letter-spacing: .03em; }
.mye-ficha__dato dd { margin: 2px 0 0; font-size: .95rem; overflow-wrap: anywhere; }

.mye-ficha__vertodo {
    align-self: flex-start;
    background: none; border: none; cursor: pointer;
    color: var(--mx-color-primary); font-size: .85rem; padding: 0 4px;
}

/* los chips-contador: el número GRANDE es el dato; el rótulo debajo. El abierto se marca con el
   borde primario — es una pestaña, no un botón de acción. */
.mye-ficha__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mye-ficha__chip {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 108px; padding: 10px 14px;
    background: var(--mx-color-surface);
    border: 1px solid var(--mx-color-border);
    border-radius: var(--mx-radius-lg, 12px);
    cursor: pointer; color: inherit; font: inherit;
}
.mye-ficha__chip:hover { border-color: var(--mx-color-primary); }
.mye-ficha__chip.is-abierto {
    border-color: var(--mx-color-primary);
    box-shadow: inset 0 -3px 0 var(--mx-color-primary);
}
.mye-ficha__chip-n { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.mye-ficha__chip-l { font-size: .78rem; opacity: .75; text-align: center; }