/* ============================================================================
   NDH Mobile 2.0 — token foundation + shared primitives
   ============================================================================

   Autoridad: docs/design/mobile-2.0-tokens.md (Fase 0).

   Los valores salen del prototipo V3 YA RESUELTO, es decir, después de aplicar
   sus tres bloques <style> en cascada. El primer bloque del prototipo es un
   borrador descartado (fondo cálido #0B0A09, resplandores naranjas); el segundo
   —"V2 RESTRAINT PASS"— lo sustituye entero. Leer solo el primer :root del
   prototipo da la paleta equivocada.

   DOS REGLAS QUE SOSTIENEN ESTE ARCHIVO
   -------------------------------------
   1. Nada de aquí toca los tokens existentes. `--bg`, `--bg-card`,
      `--accent`, `--text-main`… siguen exactamente como estaban. Este archivo
      SOLO añade tokens con prefijo `--ndh-`, que hoy no lee ningún componente
      antiguo.

   2. La relación entre fondo y tarjeta está INVERTIDA respecto a NDH clásico.
      Hoy `--bg-card: #020617` es más OSCURO que `--bg: #0f172a`: las tarjetas
      se hunden. En Mobile 2.0 `--ndh-surface: #131315` es más CLARO que
      `--ndh-bg: #0A0A0B`: las tarjetas se elevan. Por eso todos los
      componentes viven bajo `.ndh-m2` y ninguna página antigua puede heredar
      la inversión por accidente. No mezclar ambos sistemas en una pantalla.

   Fase 1 crea la base. Ningún módulo se migra todavía.
   ============================================================================ */

:root {
    /* ---- Paleta Mobile 2.0 --------------------------------------------- */
    /* Acento propio de Mobile 2.0. NO sustituye a `--accent: #f97316`, que
       sigue intacto. Medición de la Fase 0: `var(--accent)` se lee 30 veces,
       pero #f97316 está escrito a mano 56 veces y #FF5705 otras 32 —y esas 32
       ya viven casi todas en los shells móviles. Este token formaliza lo que
       la capa móvil ya hacía; converger el resto es limpieza aparte. */
    --ndh-accent: #FF5705;
    --ndh-accent-soft: rgba(255, 87, 5, 0.10);
    --ndh-accent-line: rgba(255, 87, 5, 0.28);

    --ndh-pos: #35C08C;
    --ndh-neg: #EC5A72;
    --ndh-warn: #E9A23B;
    --ndh-info: #7C9BFF;

    /* ---- Superficies (ver regla 2 arriba) ------------------------------ */
    --ndh-bg: #0A0A0B;
    --ndh-surface: #131315;
    --ndh-surface-2: #1A1A1D;
    --ndh-surface-3: #232327;

    /* Los bordes son blanco translúcido, no hex opaco: se adaptan a lo que
       tengan detrás en vez de pelearse con ello. */
    --ndh-line: rgba(255, 255, 255, 0.06);
    --ndh-line-strong: rgba(255, 255, 255, 0.11);

    /* Jerarquía de texto de TRES niveles. NDH clásico solo tiene dos
       (`--text-main`, `--text-muted`); V3 usa el tercero constantemente. */
    --ndh-text: #F3F3F4;
    --ndh-muted: #8D8D94;
    --ndh-faint: #5A5A61;

    /* ---- Tipografía ----------------------------------------------------- */
    /* Sin dependencias externas. El prototipo carga Bricolage Grotesque,
       Instrument Sans e IBM Plex Mono desde Google Fonts; NDH no sirve ninguna
       fuente web y añadir tres familias es una decisión de hosting, licencia,
       privacidad y PWA sin conexión, no de tokens.

       `--ndh-display` existe como ALIAS para que los componentes lo consuman
       desde hoy. Adoptar una tipografía de display de verdad más adelante es
       cambiar esta línea, sin tocar ni un componente. */
    --ndh-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ndh-display: var(--ndh-sans);
    --ndh-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Escala de 9 pasos. El prototipo usa 30 tamaños distintos, muchos
       separados por 0,5px (12 / 12,5 / 13 / 13,5…): eso es deriva, no escala. */
    --ndh-fs-micro: 10.5px;
    --ndh-fs-caption: 12px;
    --ndh-fs-body-sm: 13.5px;
    --ndh-fs-body: 14.5px;
    --ndh-fs-body-lg: 15.5px;
    --ndh-fs-title: 17px;
    --ndh-fs-heading: 21px;
    --ndh-fs-display: 26px;
    --ndh-fs-hero: 44px;

    --ndh-fw-body: 400;
    --ndh-fw-label: 500;
    --ndh-fw-emphasis: 600;
    --ndh-fw-display: 700;

    /* ---- Espaciado ------------------------------------------------------ */
    --ndh-sp-1: 4px;
    --ndh-sp-2: 8px;
    --ndh-sp-3: 12px;
    --ndh-sp-4: 16px;
    --ndh-sp-5: 20px;
    --ndh-sp-6: 24px;
    --ndh-sp-7: 32px;
    --ndh-sp-8: 40px;
    --ndh-gutter: 20px;

    /* ---- Radios --------------------------------------------------------- */
    /* Valores resueltos: el bloque 2 del prototipo redefine .card a 22px,
       .btn a 15px y .hero a 26px, que NO coinciden con sus variables --r-*. */
    --ndh-r-xs: 8px;
    --ndh-r-sm: 11px;
    --ndh-r-input: 14px;
    --ndh-r-md: 15px;
    --ndh-r-nav: 18px;
    --ndh-r-cta: 19px;
    --ndh-r-lg: 20px;
    --ndh-r-card: 22px;
    --ndh-r-xl: 26px;
    --ndh-r-sheet: 28px;
    --ndh-r-pill: 99px;

    /* ---- Elevación ------------------------------------------------------ */
    /* Sistema de línea fina: la profundidad la dan bordes y escalones de
       superficie, no sombras. El bloque 2 apaga a propósito todos los
       resplandores del bloque 1. */
    --ndh-elev-card: 0 12px 28px -20px rgba(0, 0, 0, 0.85);
    --ndh-elev-accent: 0 8px 22px -18px rgba(255, 87, 5, 0.9);

    /* ---- Métricas de layout --------------------------------------------- */
    /* 58px de ítem + 8px de padding inferior. El único valor declarado hoy en
       producción es `--ndh-bottom-nav-height: 112px` (solo Préstamos): 1,7x
       más alto. Mobile 2.0 recupera ~46px verticales en cada pantalla. */
    --ndh-nav-item-height: 58px;
    --ndh-nav-height: 66px;
    --ndh-safe-bottom: calc(var(--ndh-nav-height) + env(safe-area-inset-bottom));

    /* Hueco que debe reservar el contenido de pagina por debajo, SIN contar el
       area segura: los cuatro modulos ya la suman en su propio `calc()`.

       Existe porque cada modulo arrastraba su constante heredada, calibrada
       para la barra flotante antigua (~92px de alto): 152px en Retail y
       Servicios, 154px en Finanzas Personales y 112px en Prestamos. Con la
       barra compartida —66px— eso dejaba entre 45 y 90px de vacio inexplicable
       al final de cada pagina.

       Se deriva de la altura de la barra en vez de repetir un numero: si la
       barra cambia de alto, el hueco la sigue. Los 16px son aire intencionado,
       no holgura de seguridad. */
    --ndh-m2-content-pad: calc(var(--ndh-nav-height) + var(--ndh-sp-4));
    --ndh-topbar-pad-top: calc(env(safe-area-inset-top) + 18px);
    --ndh-scroll-pad-bottom: 140px;

    /* Área táctil mínima. V3 baja a 38px (.icon-btn), 40px (.chip) y 30px
       (.stepper); NDH ya garantiza 44px globalmente en ndh-base.css y esa
       garantía manda. */
    --ndh-touch-min: 44px;

    /* Izquierda/derecha: V3 nunca las usa porque nunca consideró apaisado.
       Los cuatro shells actuales sí, y se conservan. */
    --ndh-safe-left: max(var(--ndh-gutter), env(safe-area-inset-left));
    --ndh-safe-right: max(var(--ndh-gutter), env(safe-area-inset-right));

    /* ---- Capas ---------------------------------------------------------- */
    /* La escala cruda de V3 (20-60) es inservible aquí: una hoja en z-50
       quedaría DEBAJO del FAB del Asistente (8200), de los drawers existentes
       (9000-10000) y del modal de confirmación (3000). Se conserva el ORDEN de
       V3 y se recalculan los valores dentro de los huecos que ya existen.
       Ningún componente actual se renumera. */
    --ndh-z-sticky-sub: 5;
    --ndh-z-topbar: 1150;
    --ndh-z-bottom-nav: 1300;
    --ndh-z-sticky-cta: 1300;
    --ndh-z-scrim: 2000;   /* por debajo del confirm modal (3000), a propósito */
    --ndh-z-sheet: 2100;   /* una confirmación lanzada desde una hoja va encima */
    --ndh-z-toast: 9997;   /* encima del centro de notificaciones (9995),
                              debajo del selector de fecha (9999) */

    /* ---- Movimiento ------------------------------------------------------ */
    --ndh-dur-press: 0.12s;
    --ndh-dur-fast: 0.15s;
    --ndh-dur-base: 0.22s;
    --ndh-dur-enter: 0.26s;
    --ndh-dur-sheet: 0.32s;
    --ndh-ease-standard: cubic-bezier(0.2, 0.8, 0.3, 1);
    --ndh-ease-sheet: cubic-bezier(0.22, 0.8, 0.28, 1);
    --ndh-ease-arrive: cubic-bezier(0.2, 0.75, 0.3, 1);
}

/* ============================================================================
   PRIMITIVAS
   ============================================================================
   Todo cuelga de `.ndh-m2`. Sin esa clase en un ancestro, nada de lo de abajo
   aplica y ninguna página existente cambia.
   ============================================================================ */

.ndh-m2 {
    background: var(--ndh-bg);
    color: var(--ndh-text);
    font-family: var(--ndh-sans);
    font-size: var(--ndh-fs-body);
    line-height: 1.5;
}

/* ---- Superficies ------------------------------------------------------- */

.ndh-m2-card {
    background: var(--ndh-surface);
    border: 1px solid var(--ndh-line);
    border-radius: var(--ndh-r-card);
    padding: var(--ndh-sp-5);
    box-shadow: var(--ndh-elev-card);
}

.ndh-m2-card--tight {
    padding: var(--ndh-sp-4);
}

.ndh-m2-card--flat {
    box-shadow: none;
}

.ndh-m2-surface {
    background: var(--ndh-surface-2);
    border: 1px solid var(--ndh-line);
    border-radius: var(--ndh-r-lg);
}

.ndh-m2-surface--raised {
    background: var(--ndh-surface-3);
}

/* ---- Tipografía / datos ------------------------------------------------ */

.ndh-m2-eyebrow {
    font-family: var(--ndh-mono);
    font-size: var(--ndh-fs-micro);
    letter-spacing: 0.1em;
    color: var(--ndh-muted);
}

.ndh-m2-title {
    font-family: var(--ndh-display);
    font-size: var(--ndh-fs-title);
    font-weight: var(--ndh-fw-display);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.ndh-m2-muted {
    color: var(--ndh-muted);
}

.ndh-m2-faint {
    color: var(--ndh-faint);
}

/* Cifras alineadas en columna. NDH no usa tabular-nums en ningún sitio hoy;
   V3 lo aplica a todo importe, hora y métrica. Helper reutilizable para no
   repetir la declaración en cada componente. */
.ndh-m2-num {
    font-variant-numeric: tabular-nums;
}

.ndh-m2-amount {
    font-family: var(--ndh-display);
    font-weight: var(--ndh-fw-display);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.ndh-m2-amount--hero {
    font-size: var(--ndh-fs-hero);
    letter-spacing: -0.045em;
    line-height: 1;
}

/* ---- Barra superior ---------------------------------------------------- */

.ndh-m2-topbar {
    position: relative;
    z-index: var(--ndh-z-topbar);
    display: flex;
    align-items: center;
    gap: var(--ndh-sp-3);
    padding: var(--ndh-topbar-pad-top) var(--ndh-gutter) 14px;
    background: var(--ndh-bg);
}

.ndh-m2-topbar__grow {
    flex: 1;
}

.ndh-m2-topbar__title {
    font-family: var(--ndh-display);
    font-size: 16.5px;
    font-weight: var(--ndh-fw-display);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.ndh-m2-topbar__sub {
    font-size: var(--ndh-fs-caption);
    color: var(--ndh-muted);
    margin-top: 2px;
}

/* ---- Botones ------------------------------------------------------------ */

/* 44px, no los 38px de V3: la garantía de accesibilidad de ndh-base.css manda.
   El recuadro pintado puede parecer menor mediante padding, pero el objetivo
   táctil nunca baja de --ndh-touch-min. */
.ndh-m2-icon-btn {
    width: var(--ndh-touch-min);
    height: var(--ndh-touch-min);
    min-height: var(--ndh-touch-min);
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--ndh-surface-2);
    border: 1px solid var(--ndh-line);
    color: var(--ndh-text);
    transition: transform var(--ndh-dur-fast) var(--ndh-ease-standard),
                background var(--ndh-dur-fast) var(--ndh-ease-standard);
}

.ndh-m2-icon-btn:active {
    transform: scale(0.92);
}

.ndh-m2-icon-btn--accent {
    background: var(--ndh-accent);
    border-color: transparent;
    color: #fff;
}

.ndh-m2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ndh-sp-2);
    min-height: 52px;
    padding: 15px 18px;
    border-radius: var(--ndh-r-md);
    font-size: var(--ndh-fs-body-lg);
    font-weight: var(--ndh-fw-label);
    background: var(--ndh-surface-2);
    border: 1px solid var(--ndh-line);
    color: var(--ndh-text);
    transition: transform var(--ndh-dur-press) var(--ndh-ease-standard);
}

.ndh-m2-btn:active {
    transform: scale(0.97);
}

.ndh-m2-btn--primary {
    background: var(--ndh-accent);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ndh-elev-accent);
}

.ndh-m2-btn--secondary {
    background: var(--ndh-surface-3);
}

.ndh-m2-btn--discreet {
    background: transparent;
}

/* V3 usa 40px aquí; se sube a 44px por la misma razón que arriba. */
.ndh-m2-btn--sm {
    min-height: var(--ndh-touch-min);
    padding: 11px 14px;
    font-size: var(--ndh-fs-body-sm);
    border-radius: var(--ndh-r-sm);
}

/* ---- Chips -------------------------------------------------------------- */

.ndh-m2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--ndh-touch-min);
    padding: 8px 14px;
    border-radius: var(--ndh-r-pill);
    background: var(--ndh-surface-2);
    border: 1px solid var(--ndh-line);
    font-size: var(--ndh-fs-body-sm);
    color: var(--ndh-muted);
    white-space: nowrap;
}

.ndh-m2-chip[aria-pressed="true"],
.ndh-m2-chip.is-on {
    background: var(--ndh-accent-soft);
    border-color: var(--ndh-accent-line);
    color: #FF8B4D;
}

/* ---- Píldoras de estado ------------------------------------------------- */

/* Regla explícita del prototipo: el estado NUNCA se comunica solo con color.
   Cada píldora lleva glifo + texto, de modo que sigue siendo legible en
   escala de grises y para daltonismo. Las variantes solo tiñen. */
.ndh-m2-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--ndh-r-pill);
    border: 1px solid var(--ndh-line-strong);
    font-size: 11.5px;
    color: var(--ndh-muted);
    white-space: nowrap;
}

.ndh-m2-status__glyph {
    font-size: 10px;
    line-height: 1;
}

.ndh-m2-status--info {
    color: #8FB4FF;
    border-color: rgba(124, 155, 255, 0.32);
}

.ndh-m2-status--live {
    color: var(--ndh-accent);
    border-color: var(--ndh-accent-line);
}

.ndh-m2-status--warn {
    color: var(--ndh-warn);
    border-color: rgba(233, 162, 59, 0.34);
}

.ndh-m2-status--ok {
    color: #6FD6AE;
    border-color: rgba(53, 192, 140, 0.32);
}

.ndh-m2-status--bad {
    color: #F58AA0;
    border-color: rgba(236, 90, 114, 0.32);
}

.ndh-m2-status--off {
    color: var(--ndh-faint);
}

/* ---- Navegación inferior ------------------------------------------------ */

/* Geometría alineada con V3: shell compacto (~66px + área segura), máximo
   cinco destinos, destino activo marcado con una barra de 2px ARRIBA.
   Fase 1 solo define la primitiva; ningún módulo cambia todavía su nav. */
.ndh-m2-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ndh-z-bottom-nav);
    display: flex;
    background: #101012;
    border-top: 1px solid var(--ndh-line-strong);
    padding: 0 6px calc(env(safe-area-inset-bottom) + 8px);
}

.ndh-m2-nav__item {
    flex: 1;
    min-height: var(--ndh-nav-item-height);
    padding: 11px 2px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    background: none;
    border: 0;
    color: var(--ndh-faint);
    text-decoration: none;
}

.ndh-m2-nav__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--ndh-accent);
    transform: translateX(-50%) scaleX(0);
    transition: transform var(--ndh-dur-base) var(--ndh-ease-standard);
}

.ndh-m2-nav__item[aria-current="page"] {
    color: var(--ndh-text);
}

.ndh-m2-nav__item[aria-current="page"]::before {
    transform: translateX(-50%) scaleX(1);
}

.ndh-m2-nav__item[aria-current="page"] svg {
    color: var(--ndh-accent);
}

.ndh-m2-nav__item:active {
    background: rgba(255, 255, 255, 0.03);
}

.ndh-m2-nav__label {
    font-size: var(--ndh-fs-micro);
    font-weight: var(--ndh-fw-label);
}

/* ---- Velo y hoja inferior ------------------------------------------------ */

.ndh-m2-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--ndh-z-scrim);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ndh-dur-base) var(--ndh-ease-standard);
}

.ndh-m2-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ndh-m2-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ndh-z-sheet);
    max-height: 86%;
    overflow-y: auto;
    background: var(--ndh-surface-2);
    border-top: 1px solid var(--ndh-line-strong);
    border-radius: var(--ndh-r-sheet) var(--ndh-r-sheet) 0 0;
    padding: 10px var(--ndh-gutter) calc(env(safe-area-inset-bottom) + var(--ndh-sp-5));
    transform: translateY(102%);
    transition: transform var(--ndh-dur-sheet) var(--ndh-ease-sheet);
}

.ndh-m2-sheet.is-open {
    transform: none;
}

.ndh-m2-sheet--tall {
    max-height: 92%;
}

.ndh-m2-sheet__grab {
    width: 38px;
    height: 4px;
    border-radius: var(--ndh-r-pill);
    background: var(--ndh-surface-3);
    margin: 6px auto 14px;
}

/* ---- CTA fijo ------------------------------------------------------------ */

.ndh-m2-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ndh-z-sticky-cta);
    padding: var(--ndh-sp-3) var(--ndh-gutter) calc(env(safe-area-inset-bottom) + 14px);
    background: linear-gradient(rgba(10, 10, 11, 0), var(--ndh-bg) 40%);
}

.ndh-m2-cta {
    width: 100%;
    min-height: 56px;
    padding: 17px;
    border-radius: var(--ndh-r-cta);
    background: var(--ndh-accent);
    color: #fff;
    font-family: var(--ndh-display);
    font-weight: var(--ndh-fw-display);
    font-size: var(--ndh-fs-body-lg);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ndh-sp-3);
    border: 0;
    box-shadow: var(--ndh-elev-accent);
}

.ndh-m2-cta[disabled] {
    background: var(--ndh-surface-2);
    color: var(--ndh-faint);
    box-shadow: none;
}

/* ---- Toast ---------------------------------------------------------------- */

.ndh-m2-toast {
    position: fixed;
    left: var(--ndh-sp-4);
    right: var(--ndh-sp-4);
    bottom: calc(var(--ndh-safe-bottom) + var(--ndh-sp-4));
    z-index: var(--ndh-z-toast);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--ndh-r-input);
    background: var(--ndh-surface-3);
    border: 1px solid var(--ndh-line-strong);
    box-shadow: var(--ndh-elev-card);
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--ndh-dur-base) var(--ndh-ease-standard),
                opacity var(--ndh-dur-base) var(--ndh-ease-standard);
}

.ndh-m2-toast.is-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.ndh-m2-toast__title {
    font-size: var(--ndh-fs-body-sm);
    font-weight: var(--ndh-fw-label);
}

.ndh-m2-toast__sub {
    font-size: 11.5px;
    color: var(--ndh-muted);
}

/* ---- Cinta de contexto ---------------------------------------------------- */

/* Refuerzo del espacio activo en flujos de escritura de riesgo. El nombre del
   negocio es dato persistido: se muestra tal cual, nunca traducido. */
.ndh-m2-ribbon {
    display: inline-flex;
    align-items: center;
    gap: var(--ndh-sp-2);
    padding: 6px 13px 6px 7px;
    border-radius: var(--ndh-r-pill);
    background: var(--ndh-surface-2);
    border: 1px solid var(--ndh-line);
    font-size: var(--ndh-fs-caption);
    color: var(--ndh-muted);
}

.ndh-m2-ribbon__mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--ndh-surface-3);
    display: grid;
    place-items: center;
    font-size: 11px;
}

.ndh-m2-ribbon__name {
    color: var(--ndh-text);
    font-weight: var(--ndh-fw-emphasis);
}

/* ---- Ayudas de área segura ------------------------------------------------ */

.ndh-m2-safe-x {
    padding-left: var(--ndh-safe-left);
    padding-right: var(--ndh-safe-right);
}

.ndh-m2-safe-bottom {
    padding-bottom: calc(var(--ndh-safe-bottom) + var(--ndh-sp-3));
}

.ndh-m2-scroll {
    padding-bottom: calc(var(--ndh-scroll-pad-bottom) + env(safe-area-inset-bottom));
}

/* ---- Movimiento reducido --------------------------------------------------- */

/* El prototipo usa un interruptor global `*{animation:none!important}`. Eso es
   demasiado ancho para producción: mata también transiciones de las que
   depende un cambio de estado. Aquí se limita a las primitivas y solo anula
   duración, no el estado final. */
@media (prefers-reduced-motion: reduce) {
    .ndh-m2 *,
    .ndh-m2-scrim,
    .ndh-m2-sheet,
    .ndh-m2-toast,
    .ndh-m2-nav__item::before {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================================
   CINTA DE CONTEXTO DE ALTO RIESGO (Fase 5)
   ============================================================================
   Variante de la primitiva `.ndh-m2-ribbon` que la Fase 1 dejo reservada para
   esto. No se redefine la primitiva: se le añade un modificador, porque la
   pastilla en linea sirve para reforzar el espacio dentro de una tarjeta,
   mientras que aqui hace falta otra cosa —una banda de ancho completo con el
   NOMBRE DEL NEGOCIO como elemento dominante—, que es el dato que evita
   confirmar una venta en el sitio equivocado.

   Va en FLUJO NORMAL, nunca fija. Dos razones: el cajon de pago de Prestamos
   cuelga de un ancestro con `transform`, donde `position: fixed` deja de
   referirse a la ventana; y una cinta pegada taparia el formulario justo
   mientras se rellena.

   Es contexto, no una alarma: superficie grafito, borde sutil y el acento solo
   en la marca lateral. Sin rojo — no hay ningun error que comunicar.

   Solo movil. Por encima de 1024px estas pantallas ya muestran el negocio en
   su cabecera y en la barra lateral, y una cinta mas seria ruido.
   ============================================================================ */

.ndh-m2-ribbon--context {
    display: none;
}

@media (max-width: 1024px) {
    .ndh-m2-ribbon--context {
        display: flex;
        align-items: center;
        gap: var(--ndh-sp-3);
        width: 100%;
        margin: 0 0 var(--ndh-sp-3);
        padding: 10px 12px;
        border-radius: var(--ndh-r-md);
        background: var(--ndh-surface);
        font-size: inherit;
    }

    /* Unico uso del acento: una marca estrecha que ancla la vista sin gritar.
       Sustituye a la caja de 22px de la primitiva. */
    .ndh-m2-ribbon--context .ndh-m2-ribbon__mark {
        width: 3px;
        height: auto;
        align-self: stretch;
        min-height: 30px;
        border-radius: var(--ndh-r-pill);
        background: var(--ndh-accent);
    }

    .ndh-m2-ribbon--context .ndh-m2-ribbon__copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ndh-m2-ribbon--context .ndh-m2-ribbon__meta {
        font-family: var(--ndh-mono);
        font-size: var(--ndh-fs-micro);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ndh-muted);
    }

    .ndh-m2-ribbon--context .ndh-m2-ribbon__lead {
        min-width: 0;
        font-size: var(--ndh-fs-body-sm);
        color: var(--ndh-muted);
    }

    /* El nombre del negocio es lo dominante. Se recorta antes que romper la
       fila: los nombres largos son la norma, no la excepcion. */
    .ndh-m2-ribbon--context .ndh-m2-ribbon__name {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--ndh-display);
        font-size: var(--ndh-fs-body-lg);
        font-weight: var(--ndh-fw-display);
        letter-spacing: -0.01em;
        color: var(--ndh-text);
    }
}

/* ============================================================================
   SHELL MÓVIL COMPARTIDO (Fase 3A)
   ============================================================================

   Geometría del shell que antes vivía duplicada en los cuatro archivos
   `*-mobile-shell.css`. Aquí solo va lo COMPARTIDO: el contenedor exterior y
   las reglas de página (relleno inferior, ocultar la cabecera global) siguen
   en el CSS del módulo, porque de ellas depende el layout de sus páginas.

   Todo cuelga de `.ndh-m2-shell`, que solo existe en los módulos ya migrados.
   Un módulo sin migrar no ve ni una regla de este bloque.
   ============================================================================ */

.ndh-m2-shell {
    display: none;
}

@media (max-width: 1024px) {
    .ndh-m2-shell {
        display: block;
    }

    /* ---- Barra superior ------------------------------------------------ */

    .ndh-m2-shell .ndh-m2-topbar {
        position: relative;
        z-index: var(--ndh-z-topbar);
        display: block;
        padding: var(--ndh-topbar-pad-top) var(--ndh-safe-right) 14px var(--ndh-safe-left);
        background: var(--ndh-bg);
        border-bottom: 1px solid var(--ndh-line);
    }

    /* GRID, no flex. Con `minmax(0, 1fr) auto` la identidad recibe justo el
       espacio sobrante y las acciones conservan el suyo: es imposible que un
       nombre de negocio largo empuje el control de cuenta fuera de la
       pantalla. Con flex, `flex: 0 0 auto` en las acciones dejaba que el
       ancho intrínseco del texto del botón desbordara la fila —que es
       exactamente lo que se vio en el dispositivo. */
    .ndh-m2-shell .ndh-m2-topbar__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--ndh-sp-3);
    }

    .ndh-m2-shell .ndh-m2-topbar__actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--ndh-sp-2);
        min-width: 0;
    }

    /* ---- Identidad del espacio activo ---------------------------------- */

    .ndh-m2-shell .ndh-m2-ctx {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: var(--ndh-touch-min);
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .ndh-m2-shell .ndh-m2-ctx__idn {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        border-radius: 13px;
        display: grid;
        place-items: center;
        background: var(--ndh-surface-2);
        border: 1px solid var(--ndh-line-strong);
        color: var(--ndh-accent);
        font-family: var(--ndh-display);
        font-weight: var(--ndh-fw-display);
        font-size: 15px;
    }

    .ndh-m2-shell .ndh-m2-ctx__copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .ndh-m2-shell .ndh-m2-ctx__kicker {
        font-family: var(--ndh-mono);
        font-size: var(--ndh-fs-micro);
        letter-spacing: 0.1em;
        color: var(--ndh-muted);
    }

    /* El nombre del negocio puede ser largo: se recorta con puntos suspensivos
       en vez de romper la fila o empujar las acciones fuera de pantalla. */
    .ndh-m2-shell .ndh-m2-ctx__name {
        font-family: var(--ndh-display);
        font-size: var(--ndh-fs-title);
        font-weight: var(--ndh-fw-display);
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin-top: 1px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ndh-m2-shell .ndh-m2-ctx__sub {
        font-size: var(--ndh-fs-caption);
        color: var(--ndh-muted);
        margin-top: 2px;
    }

    .ndh-m2-shell .ndh-m2-demo-flag {
        font-size: 10.5px;
    }

    /* ---- Cuenta / idioma ------------------------------------------------ */

    .ndh-m2-shell .ndh-m2-account {
        position: relative;
    }

    .ndh-m2-shell .ndh-m2-account__btn {
        display: grid;
        place-items: center;
        width: var(--ndh-touch-min);
        height: var(--ndh-touch-min);
        min-width: var(--ndh-touch-min);
        min-height: var(--ndh-touch-min);
        flex: 0 0 auto;
        padding: 0;
        border-radius: var(--ndh-r-pill);
        background: var(--ndh-surface-2);
        border: 1px solid var(--ndh-line);
        color: var(--ndh-text);
        cursor: pointer;
        list-style: none;
    }

    .ndh-m2-shell .ndh-m2-account__btn::-webkit-details-marker {
        display: none;
    }

    .ndh-m2-shell .ndh-m2-account__label {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .ndh-m2-shell .ndh-m2-account__label strong {
        font-size: var(--ndh-fs-body-sm);
        font-weight: var(--ndh-fw-emphasis);
    }

    .ndh-m2-shell .ndh-m2-account__label small {
        font-size: 10.5px;
        color: var(--ndh-muted);
    }

    .ndh-m2-shell .ndh-m2-account__sheet {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        z-index: var(--ndh-z-sheet);
        min-width: 246px;
        padding: var(--ndh-sp-2);
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: var(--ndh-surface-2);
        border: 1px solid var(--ndh-line-strong);
        border-radius: var(--ndh-r-lg);
        box-shadow: var(--ndh-elev-card);
    }

    .ndh-m2-shell .ndh-m2-account__link {
        display: flex;
        align-items: center;
        gap: var(--ndh-sp-3);
        min-height: var(--ndh-touch-min);
        padding: 10px 12px;
        border-radius: var(--ndh-r-md);
        color: var(--ndh-text);
        text-decoration: none;
    }

    .ndh-m2-shell .ndh-m2-account__link:hover {
        background: var(--ndh-surface-3);
        text-decoration: none;
    }

    .ndh-m2-shell .ndh-m2-account__link.is-danger strong {
        color: var(--ndh-neg);
    }

    .ndh-m2-shell .ndh-m2-account__text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .ndh-m2-shell .ndh-m2-account__text strong {
        font-size: var(--ndh-fs-body);
        font-weight: var(--ndh-fw-label);
    }

    .ndh-m2-shell .ndh-m2-account__text small {
        font-size: 11px;
        color: var(--ndh-muted);
    }

    .ndh-m2-shell .ndh-m2-account__lang {
        padding: 8px 12px;
        border-top: 1px solid var(--ndh-line);
        border-bottom: 1px solid var(--ndh-line);
        margin: 2px 0;
    }

    /* ---- Navegación inferior -------------------------------------------- */

    .ndh-m2-shell .ndh-m2-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--ndh-z-bottom-nav);
        display: flex;
        background: #101012;
        border-top: 1px solid var(--ndh-line-strong);
        padding: 0 6px calc(env(safe-area-inset-bottom) + 8px);
    }

    .ndh-m2-shell .ndh-m2-nav__item {
        flex: 1;
        min-width: 0;
        min-height: var(--ndh-nav-item-height);
        padding: 11px 2px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        position: relative;
        background: none;
        border: 0;
        color: var(--ndh-faint);
        text-decoration: none;
        cursor: pointer;
        list-style: none;
    }

    .ndh-m2-shell .ndh-m2-nav__item::-webkit-details-marker {
        display: none;
    }

    .ndh-m2-shell .ndh-m2-nav__item:hover {
        text-decoration: none;
    }

    /* Marca del destino actual: barra de 2px arriba. Es una señal de FORMA, no
       solo de color, así que sigue siendo legible sin distinguir el naranja.
       El peso del texto refuerza lo mismo. */
    .ndh-m2-shell .ndh-m2-nav__item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 26px;
        height: 2px;
        border-radius: 0 0 3px 3px;
        background: var(--ndh-accent);
        transform: translateX(-50%) scaleX(0);
        transition: transform var(--ndh-dur-base) var(--ndh-ease-standard);
    }

    .ndh-m2-shell .ndh-m2-nav__item.is-current {
        color: var(--ndh-text);
    }

    .ndh-m2-shell .ndh-m2-nav__item.is-current::before {
        transform: translateX(-50%) scaleX(1);
    }

    .ndh-m2-shell .ndh-m2-nav__item.is-current .ndh-m2-nav__icon {
        color: var(--ndh-accent);
    }

    .ndh-m2-shell .ndh-m2-nav__item.is-current .ndh-m2-nav__label {
        font-weight: var(--ndh-fw-emphasis);
    }

    .ndh-m2-shell .ndh-m2-nav__item:active {
        background: rgba(255, 255, 255, 0.03);
    }

    .ndh-m2-shell .ndh-m2-nav__icon {
        display: grid;
        place-items: center;
    }

    .ndh-m2-shell .ndh-m2-nav__label {
        font-size: var(--ndh-fs-micro);
        font-weight: var(--ndh-fw-label);
        line-height: 1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---- Hoja "Más" ------------------------------------------------------ */

    .ndh-m2-shell .ndh-m2-more {
        flex: 1;
        display: flex;
    }

    .ndh-m2-shell .ndh-m2-more > summary {
        flex: 1;
    }

    .ndh-m2-shell .ndh-m2-more__sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--ndh-nav-height) + env(safe-area-inset-bottom));
        z-index: var(--ndh-z-sheet);
        max-height: 60vh;
        overflow-y: auto;
        padding: var(--ndh-sp-3) var(--ndh-safe-right) var(--ndh-sp-4) var(--ndh-safe-left);
        background: var(--ndh-surface-2);
        border-top: 1px solid var(--ndh-line-strong);
        border-radius: var(--ndh-r-sheet) var(--ndh-r-sheet) 0 0;
        box-shadow: var(--ndh-elev-card);
    }

    .ndh-m2-shell .ndh-m2-more__stack {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ndh-m2-shell .ndh-m2-more__link {
        display: flex;
        align-items: center;
        gap: var(--ndh-sp-3);
        min-height: var(--ndh-touch-min);
        padding: 12px 14px;
        border-radius: var(--ndh-r-md);
        background: var(--ndh-surface);
        border: 1px solid var(--ndh-line);
        color: var(--ndh-text);
        font-size: var(--ndh-fs-body);
        text-decoration: none;
    }

    .ndh-m2-shell .ndh-m2-more__link:hover {
        border-color: var(--ndh-line-strong);
        text-decoration: none;
    }

    /* ---- Grupos plegables dentro de "Más" ------------------------------
       Retail es el unico modulo con jerarquia en su navegacion secundaria:
       once destinos que aplanados dan una hoja sin estructura. El grupo es un
       <details> nativo, asi que abre y cierra sin JavaScript y el lector de
       pantalla ya anuncia su estado. */

    .ndh-m2-shell .ndh-m2-more__group > summary {
        list-style: none;
        cursor: pointer;
    }

    .ndh-m2-shell .ndh-m2-more__group > summary::-webkit-details-marker {
        display: none;
    }

    .ndh-m2-shell .ndh-m2-more__group-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ndh-sp-3);
        min-height: var(--ndh-touch-min);
        padding: 12px 14px;
        border-radius: var(--ndh-r-md);
        background: var(--ndh-surface);
        border: 1px solid var(--ndh-line);
        color: var(--ndh-text);
    }

    /* Abierto: el acento marca la rama activa. No es solo color — el chevron
       tambien gira, para que la diferencia no dependa de la vista. */
    .ndh-m2-shell .ndh-m2-more__group[open] > .ndh-m2-more__group-summary {
        border-color: var(--ndh-accent-line);
        background: var(--ndh-accent-soft);
    }

    .ndh-m2-shell .ndh-m2-more__group-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .ndh-m2-shell .ndh-m2-more__group-copy strong {
        font-size: var(--ndh-fs-body);
        font-weight: var(--ndh-fw-emphasis);
        line-height: 1.15;
    }

    .ndh-m2-shell .ndh-m2-more__group-copy small {
        font-size: var(--ndh-fs-caption);
        line-height: 1.2;
        color: var(--ndh-muted);
    }

    .ndh-m2-shell .ndh-m2-more__group-chevron {
        flex: 0 0 auto;
        color: var(--ndh-muted);
        transition: transform var(--ndh-dur-fast) var(--ndh-ease-standard);
    }

    .ndh-m2-shell .ndh-m2-more__group[open] > .ndh-m2-more__group-summary
    .ndh-m2-more__group-chevron {
        transform: rotate(180deg);
    }

    .ndh-m2-shell .ndh-m2-more__group-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 4px 0 0 var(--ndh-sp-4);
    }

    .ndh-m2-shell .ndh-m2-more__link--child {
        min-height: 50px;
        padding: 10px 12px;
        font-size: var(--ndh-fs-body-sm);
    }

    /* ---- `+` contextual (Fase 4) ---------------------------------------
       Flota SOBRE la barra, no dentro. Meterlo en la fila habria robado ancho
       a los cinco destinos y "Movimientos" o "Inventario" habrian empezado a
       recortarse; el prototipo lo pone junto a la barra por la misma razon.

       A la IZQUIERDA a proposito: el FAB del Asistente vive fijo abajo a la
       derecha y en telefono sube a 5.25rem, justo encima de la barra. Ese
       hueco esta ocupado. Con el `+` a la izquierda los dos son alcanzables
       sin solaparse y sin tocar la posicion del Asistente, que es un
       componente global usado tambien fuera de estos shells. */

    .ndh-m2-shell .ndh-m2-create {
        position: fixed;
        left: var(--ndh-safe-left);
        bottom: calc(var(--ndh-nav-height) + env(safe-area-inset-bottom) + 12px);
        z-index: var(--ndh-z-bottom-nav);
        width: 54px;
        height: 54px;
        border-radius: 19px;
        display: grid;
        place-items: center;
        background: linear-gradient(160deg, #2A2521, #171512);
        border: 1px solid var(--ndh-accent-line);
        color: var(--ndh-accent);
        box-shadow: 0 14px 30px -14px #000;
        cursor: pointer;
        transition: transform var(--ndh-dur-press) var(--ndh-ease-standard);
    }

    .ndh-m2-shell .ndh-m2-create:active {
        transform: scale(0.93);
    }

    /* ---- Hoja de acciones ---------------------------------------------- */

    .ndh-m2-actions__head {
        display: flex;
        align-items: center;
        gap: var(--ndh-sp-3);
        margin-bottom: var(--ndh-sp-4);
    }

    .ndh-m2-actions__title {
        margin: 0;
        font-family: var(--ndh-display);
        font-size: 19px;
        font-weight: var(--ndh-fw-display);
        letter-spacing: -0.02em;
    }

    .ndh-m2-actions__close {
        margin-left: auto;
        width: var(--ndh-touch-min);
        height: var(--ndh-touch-min);
        border-radius: var(--ndh-r-sm);
        background: var(--ndh-surface-3);
        border: 0;
        color: var(--ndh-muted);
        font-size: 15px;
        cursor: pointer;
    }

    /* Rejilla de dos columnas: con tres a seis acciones cabe todo sin
       desplazar, y cada celda conserva holgura para el toque. */
    .ndh-m2-actions__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ndh-m2-actions__item {
        display: flex;
        align-items: center;
        gap: var(--ndh-sp-3);
        min-height: 58px;
        padding: 12px 14px;
        border-radius: var(--ndh-r-md);
        background: var(--ndh-surface);
        border: 1px solid var(--ndh-line);
        color: var(--ndh-text);
        font-size: var(--ndh-fs-body-sm);
        font-weight: var(--ndh-fw-label);
        text-decoration: none;
    }

    .ndh-m2-actions__item:hover {
        border-color: var(--ndh-accent-line);
        background: var(--ndh-accent-soft);
        text-decoration: none;
    }

    .ndh-m2-actions__icon {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        color: var(--ndh-accent);
    }

    .ndh-m2-actions__label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Foco visible en todo lo interactivo del shell. */
    .ndh-m2-shell a:focus-visible,
    .ndh-m2-shell summary:focus-visible,
    .ndh-m2-shell button:focus-visible {
        outline: 2px solid var(--ndh-accent);
        outline-offset: 2px;
        border-radius: var(--ndh-r-xs);
    }
}

/* Por encima del breakpoint móvil no existe: manda la barra lateral. */
@media (min-width: 1025px) {
    .ndh-m2-shell {
        display: none !important;
    }
}

/* ============================================================================
   CONMUTADOR GLOBAL DE ESPACIOS (Fase 3B)
   ============================================================================
   Hoja inferior con lenguaje Mobile 2.0: grafito, línea fina, naranja
   contenido. Nada de tarjetas naranjas grandes ni resplandores.
   ============================================================================ */

body.ndh-m2-sheet-open {
    overflow: hidden;
}

@media (max-width: 1024px) {

    /* ---- Disparador en la barra superior --------------------------------- */

    .ndh-m2-shell .ndh-m2-ctx--trigger {
        background: none;
        border: 0;
        padding: 4px 6px 4px 0;
        margin: 0;
        text-align: left;
        cursor: pointer;
        border-radius: var(--ndh-r-md);
        color: inherit;
        font: inherit;
    }

    .ndh-m2-shell .ndh-m2-ctx--trigger:active {
        background: rgba(255, 255, 255, 0.04);
    }

    .ndh-m2-shell .ndh-m2-ctx__chevron {
        margin-left: 2px;
        color: var(--ndh-muted);
        font-size: 14px;
        line-height: 1;
        flex: 0 0 auto;
        transition: transform var(--ndh-dur-base) var(--ndh-ease-standard);
    }

    .ndh-m2-shell .ndh-m2-ctx--trigger[aria-expanded="true"] .ndh-m2-ctx__chevron {
        transform: rotate(180deg);
    }

    /* ---- Hoja -------------------------------------------------------------- */

    .ndh-m2-switcher {
        max-height: 88%;
    }

    .ndh-m2-switcher__head {
        display: flex;
        align-items: center;
        gap: var(--ndh-sp-3);
        margin-bottom: var(--ndh-sp-4);
    }

    .ndh-m2-switcher__title {
        margin: 0;
        font-family: var(--ndh-display);
        font-size: 19px;
        font-weight: var(--ndh-fw-display);
        letter-spacing: -0.02em;
    }

    .ndh-m2-switcher__close {
        margin-left: auto;
        width: var(--ndh-touch-min);
        height: var(--ndh-touch-min);
        border-radius: var(--ndh-r-sm);
        background: var(--ndh-surface-3);
        border: 0;
        color: var(--ndh-muted);
        font-size: 15px;
        cursor: pointer;
    }

    .ndh-m2-switcher__body {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .ndh-m2-switcher__label {
        font-family: var(--ndh-mono);
        font-size: var(--ndh-fs-micro);
        letter-spacing: 0.12em;
        color: var(--ndh-faint);
        margin: var(--ndh-sp-4) 2px var(--ndh-sp-2);
    }

    .ndh-m2-switcher__label:first-child {
        margin-top: 0;
    }

    /* ---- Fila de espacio ---------------------------------------------------- */

    .ndh-m2-sp__form {
        margin: 0;
    }

    .ndh-m2-sp {
        display: flex;
        align-items: center;
        gap: var(--ndh-sp-3);
        width: 100%;
        min-height: 66px;
        padding: 13px 12px;
        border-radius: var(--ndh-r-nav);
        border: 1px solid transparent;
        background: none;
        color: var(--ndh-text);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        font: inherit;
        transition: background var(--ndh-dur-fast) var(--ndh-ease-standard),
                    border-color var(--ndh-dur-fast) var(--ndh-ease-standard);
    }

    .ndh-m2-sp:hover {
        text-decoration: none;
    }

    .ndh-m2-sp:active,
    .ndh-m2-sp.is-arming {
        background: var(--ndh-surface-3);
    }

    /* El espacio actual se marca con superficie + borde + la etiqueta "Aquí",
       no solo con color: sigue siendo distinguible en escala de grises. */
    .ndh-m2-sp.is-current {
        background: var(--ndh-surface);
        border-color: var(--ndh-line-strong);
    }

    .ndh-m2-sp[disabled] {
        opacity: 0.45;
        cursor: default;
    }

    .ndh-m2-sp.is-locked {
        opacity: 0.7;
    }

    .ndh-m2-sp__idn {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        border-radius: 13px;
        display: grid;
        place-items: center;
        background: var(--ndh-surface-3);
        font-family: var(--ndh-display);
        font-weight: var(--ndh-fw-display);
        font-size: 15px;
        color: var(--ndh-muted);
    }

    .ndh-m2-sp.is-current .ndh-m2-sp__idn {
        color: var(--ndh-accent);
    }

    .ndh-m2-sp__copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    /* El nombre del negocio puede ser largo: se recorta, no rompe la fila. */
    .ndh-m2-sp__name {
        font-size: var(--ndh-fs-body);
        font-weight: var(--ndh-fw-emphasis);
        letter-spacing: -0.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ndh-m2-sp__meta {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        font-size: var(--ndh-fs-caption);
        color: var(--ndh-muted);
    }

    /* El rol es metadato secundario, nunca una insignia dominante. */
    .ndh-m2-sp__role {
        font-family: var(--ndh-mono);
        font-size: 9.5px;
        letter-spacing: 0.06em;
        color: var(--ndh-faint);
        border: 1px solid var(--ndh-line-strong);
        border-radius: 5px;
        padding: 1px 5px;
    }

    .ndh-m2-sp__tag {
        font-family: var(--ndh-mono);
        font-size: 9.5px;
        letter-spacing: 0.06em;
        color: var(--ndh-muted);
        border: 1px solid var(--ndh-line-strong);
        border-radius: 5px;
        padding: 1px 5px;
    }

    .ndh-m2-sp__tag--demo {
        color: var(--ndh-warn);
        border-color: rgba(233, 162, 59, 0.34);
    }

    .ndh-m2-sp__right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--ndh-sp-2);
        flex: 0 0 auto;
    }

    .ndh-m2-sp__current {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: var(--ndh-accent);
    }

    .ndh-m2-sp__dot {
        width: 8px;
        height: 8px;
        border-radius: var(--ndh-r-pill);
        background: var(--ndh-accent);
    }

    .ndh-m2-sp__spin {
        width: 16px;
        height: 16px;
        display: none;
    }

    .ndh-m2-sp.is-arming .ndh-m2-sp__spin {
        display: block;
        border: 2px solid rgba(255, 255, 255, 0.25);
        border-top-color: #fff;
        border-radius: var(--ndh-r-pill);
        animation: ndh-m2-spin 0.7s linear infinite;
    }

    @keyframes ndh-m2-spin {
        to { transform: rotate(360deg); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .ndh-m2-sp.is-arming .ndh-m2-sp__spin {
        animation: none;
    }
}