/**
 * SHOYO — Mobile UX (sesión 2/5: MobileLauncher)
 * SPEC: docs/specs/SPEC_MOBILE_UX.md §3.1, §3.3, §4.1, §5, §8.
 *
 * Convenciones:
 *   - Namespace `.mobile-launcher__*` reservado al Launcher (esta sesión).
 *   - Namespace `.mobile-shell` reservado al wrapper que aplica el modo móvil.
 *   - Solo se utilizan CSS variables ya declaradas en theme.css. Sin literales
 *     de color (DP-039 — todo color del proyecto pasa por --accent-*/--bg-*/--text-*).
 *   - Activo SOLO bajo `<600px`. Tablet (≥600) y desktop (≥1024) no se ven
 *     afectados — el sidebar/dashboard actuales siguen funcionando.
 *   - Tap targets ≥48px (SPEC §8.2 / Material).
 *   - Respeta `prefers-reduced-motion`.
 */

/* =====================================================
   Activación condicional — viewport <600px o handheld Android (Sunmi L3)
   Bug 4 (sesión fix tpv,core,docs 2026-04-29): el Sunmi L3 reporta ~720px
   pero es un handheld táctil. Coherente con _isMobileViewport() en app.js.
   ===================================================== */
@media (max-width: 599px),
       (max-width: 820px) and (pointer: coarse) {

    /* Cuando #appView lleva data-mobile-shell="launcher", ocultamos el sidebar
       y el header del ERP — el Launcher ocupa todo el viewport. */
    #appView.app[data-mobile-shell="launcher"] > .sidebar,
    #appView.app[data-mobile-shell="launcher"] > .main > .header,
    #appView.app[data-mobile-shell="launcher"] > .main > .mobile-module-tabs,
    #appView.app[data-mobile-shell="launcher"] > .main > .content {
        display: none !important;
    }

    /* El contenedor principal pasa a ser el Launcher dentro de .main */
    #appView.app[data-mobile-shell="launcher"] > .main {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        background: var(--bg-primary);
    }

    /* Defensa global anti-overflow horizontal en handhelds Android.
     * Algunos WebView Android calculan 100vw incluyendo la scrollbar y
     * provocan desbordamiento horizontal de 16-20px. */
    html, body { overflow-x: hidden; max-width: 100vw; }
}

/* =====================================================
   Mobile shell — contenedor del Launcher
   Estilos siempre cargados: el componente puede haberse renderizado
   y luego el viewport haber pasado a tablet (mobile-launcher.js
   destruye el contenido en ese caso, pero por seguridad mantenemos
   los estilos válidos para cualquier tamaño).
   ===================================================== */
.mobile-launcher {
    width: 100%;
    min-height: 100dvh;          /* dvh para que el address-bar de Chrome no recorte */
    min-height: 100vh;            /* fallback para WebView que no soporten dvh */
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* ── Cabecera ── */
.mobile-launcher__header {
    padding: 32px 20px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mobile-launcher__brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.mobile-launcher__greeting {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mobile-launcher__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-launcher__user-btn {
    /* Salida del Launcher (logout / volver al holding) — SPEC §4.1: cerrar sesión
       es la única salida cuando el usuario tiene 0 o 1 módulo de negocio. */
    appearance: none;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 44px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

.mobile-launcher__user-btn:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ── Grid 3×N ── */
.mobile-launcher__grid {
    flex: 1;
    padding: 16px 16px 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
    row-gap: 24px;
    align-content: start;
    overflow-y: auto;            /* SPEC §4.1: scroll vertical si >9 módulos */
    -webkit-overflow-scrolling: touch;
}

/* Caso 2-3 módulos — centrado horizontalmente. SPEC §4.1.
   Aplicado vía data-attr en el JS — evita renderizar markup distinto. */
.mobile-launcher__grid[data-count="1"],
.mobile-launcher__grid[data-count="2"],
.mobile-launcher__grid[data-count="3"] {
    grid-template-columns: repeat(var(--mobile-launcher-cols, 3), 88px);
    justify-content: center;
}
.mobile-launcher__grid[data-count="1"] { --mobile-launcher-cols: 1; }
.mobile-launcher__grid[data-count="2"] { --mobile-launcher-cols: 2; }
.mobile-launcher__grid[data-count="3"] { --mobile-launcher-cols: 3; }

/* ── Tarjeta de módulo ── */
.mobile-launcher__module {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Tap target real ≥48px (icono 72 + label) — supera el mínimo Material 48dp. */
    min-height: 48px;
}

.mobile-launcher__module:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 4px;
    border-radius: var(--radius-lg);
}

.mobile-launcher__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s var(--ease-out);
}

.mobile-launcher__icon > svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 2;
}

.mobile-launcher__module:active .mobile-launcher__icon {
    transform: scale(0.96);
}

.mobile-launcher__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Diferenciación cromática por módulo ──
   Usa --accent-* del proyecto (SPEC §5). Coincide con el mockup launcher.html. */
.mobile-launcher__icon[data-color="primary"]   { background: var(--accent-primary); }
.mobile-launcher__icon[data-color="blue"]      { background: var(--accent-blue); }
.mobile-launcher__icon[data-color="green"]     { background: var(--accent-green); }
.mobile-launcher__icon[data-color="orange"]    { background: var(--accent-orange); }
.mobile-launcher__icon[data-color="red"]       { background: var(--accent-red); }
.mobile-launcher__icon[data-color="purple"]    { background: var(--accent-purple); }
.mobile-launcher__icon[data-color="indigo"]    { background: var(--accent-indigo); }
.mobile-launcher__icon[data-color="cyan"]      { background: var(--accent-cyan); }
.mobile-launcher__icon[data-color="gradient"]  { background: var(--accent-gradient); }
.mobile-launcher__icon[data-color="bluegrad"]  { background: linear-gradient(135deg, var(--accent-blue), var(--accent-primary)); }
.mobile-launcher__icon[data-color="orangegrad"]{ background: linear-gradient(135deg, var(--accent-orange), var(--accent-red)); }
.mobile-launcher__icon[data-color="greengrad"] { background: linear-gradient(135deg, var(--accent-green), var(--accent-blue)); }

/* ── Empty state — 0 módulos permitidos. SPEC §4.1. ── */
.mobile-launcher__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 24px;
    text-align: center;
}

.mobile-launcher__empty-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.mobile-launcher__empty-icon > svg {
    width: 28px;
    height: 28px;
}

.mobile-launcher__empty-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-launcher__empty-text {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 280px;
}

.mobile-launcher__empty-action {
    appearance: none;
    background: var(--accent-primary);
    color: #ffffff;
    border: 0;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    margin-top: 8px;
}

.mobile-launcher__empty-action:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ── prefers-reduced-motion: anular transformaciones. SPEC §8.4 ── */
@media (prefers-reduced-motion: reduce) {
    .mobile-launcher__icon,
    .mobile-launcher__module:active .mobile-launcher__icon {
        transition: none;
        transform: none;
    }
}

/* =====================================================
   Mobile slide-down — sesión 3/5 (gesto + contenedor del panel)
   SPEC: docs/specs/SPEC_MOBILE_UX.md §3.2, §4.2, §4.3, §6.1, §8.4.
   Namespace `.mobile-slidedown__*` reservado al slide-down.
   El componente vive sobre <body> (fixed) — no depende del shell del
   Launcher (que ocupa #appView). Se activa solo cuando hay módulo.
   ===================================================== */

.mobile-slidedown {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;        /* el root no captura mientras está cerrado */
}

.mobile-slidedown.is-open,
.mobile-slidedown.is-closing {
    pointer-events: auto;
}

/* ── Backdrop --bg-overlay (SPEC §4.3) ── */
.mobile-slidedown__backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-overlay);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mobile-slidedown.is-open .mobile-slidedown__backdrop  { opacity: 1; }
.mobile-slidedown.is-closing .mobile-slidedown__backdrop { opacity: 0; }

/* ── Panel: ancho 92%, top 8pt, radius 18pt, fondo --bg-primary ── */
.mobile-slidedown__panel {
    position: absolute;
    top: 8px;
    left: 4%;
    right: 4%;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    padding: 16px 14px 10px;
    display: flex;
    flex-direction: column;
    /* Estado base: oculto arriba — slide-down 300ms (SPEC §4.3, §8.4). */
    transform: translateY(-110%);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.mobile-slidedown.is-open .mobile-slidedown__panel    { transform: translateY(0); }
.mobile-slidedown.is-closing .mobile-slidedown__panel { transform: translateY(-110%); }

/* ── Título "Acciones {módulo}" — 14px medium ── */
.mobile-slidedown__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 12px;
    text-align: left;
}

/* ── Grid 2×3 de atajos (66×66pt cada uno) ── */
.mobile-slidedown__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
}

.mobile-slidedown__action {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;            /* tap target Material */
}
.mobile-slidedown__action:hover { background: var(--bg-hover); }
.mobile-slidedown__action:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.mobile-slidedown__tile {
    width: 66px;
    height: 66px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}
.mobile-slidedown__tile > svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2; }

/* Variantes cromáticas (opcional `color` del shortcut; default = bg-tertiary) */
.mobile-slidedown__tile[data-color="blue"]    { background: var(--accent-blue);    border-color: transparent; color: #fff; }
.mobile-slidedown__tile[data-color="primary"] { background: var(--accent-primary); border-color: transparent; color: #fff; }
.mobile-slidedown__tile[data-color="green"]   { background: var(--accent-green);   border-color: transparent; color: #fff; }
.mobile-slidedown__tile[data-color="orange"]  { background: var(--accent-orange);  border-color: transparent; color: #fff; }
.mobile-slidedown__tile[data-color="red"]     { background: var(--accent-red);     border-color: transparent; color: #fff; }
.mobile-slidedown__tile[data-color="gradient"]{ background: var(--accent-gradient); border-color: transparent; color: #fff; }

.mobile-slidedown__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Huecos vacíos — atajos no registrados todavía ── */
.mobile-slidedown__placeholder-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    pointer-events: none;
}
.mobile-slidedown__placeholder {
    width: 66px;
    height: 66px;
    border-radius: 16px;
    border: 1.5px dashed var(--border-primary);
    background: transparent;
    opacity: 0.4;
}

/* ── Handle inferior 30×3pt opacity 0.5 (SPEC §4.3) ── */
.mobile-slidedown__handle {
    width: 30px;
    height: 3px;
    border-radius: 9999px;
    background: var(--text-primary);
    opacity: 0.5;
    margin: 14px auto 4px;
}

/* ── prefers-reduced-motion: fade-in 150ms en lugar de slide (SPEC §4.3 / §8.4) ── */
@media (prefers-reduced-motion: reduce) {
    .mobile-slidedown__panel {
        transform: none;
        opacity: 0;
        transition: opacity 150ms ease-out;
        will-change: opacity;
    }
    .mobile-slidedown.is-open .mobile-slidedown__panel    { opacity: 1; transform: none; }
    .mobile-slidedown.is-closing .mobile-slidedown__panel { opacity: 0; transform: none; }
    .mobile-slidedown__backdrop                            { transition: opacity 150ms ease-out; }
}

/* =====================================================
   Indicador de gesto disponible (SPEC §4.2):
   barra fina 3pt × 30pt anclada bajo la top bar (44pt),
   opacity 0.4, fade-out a los 2s desde la entrada al módulo.
   ===================================================== */
.mobile-slidedown__hint {
    position: fixed;
    top: 47px;                   /* 44pt top bar + 3pt margen */
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    border-radius: 9999px;
    background: var(--text-primary);
    opacity: 0;
    pointer-events: none;
    z-index: 1099;               /* bajo el panel pero sobre el contenido */
    transition: opacity 240ms ease-out;
}
.mobile-slidedown__hint.is-visible { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
    .mobile-slidedown__hint { transition: none; }
}

/* =====================================================
   TPV Mobile Dashboard — sesión 4/5 (Dashboard del módulo TPV en móvil)
   SPEC: docs/specs/SPEC_MOBILE_UX.md §3.3, §6.1.
   Overlay full-screen sobre el contenido del módulo TPV en viewport <600px.
   Activado tras swipe-down → tap "Dashboard" en el slide-down (sesión 3).
   Namespace `.tpv-mobile-dashboard__*` reservado a esta vista.
   ===================================================== */

.tpv-mobile-dashboard {
    position: fixed;
    inset: 0;
    z-index: 1050;               /* sobre .content (~10) y bajo modales (1100+) */
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
}

/* Tablet/desktop: si por error queda un nodo en el DOM, lo ocultamos.
   La lógica JS (tpvRenderMobileDashboard) se invoca desde el slide-down,
   que solo está activo bajo 600px — pero la defensa CSS evita ruido. */
/* Bug 4 (sesión fix 2026-04-29): el media query de "desktop arranca aquí" tiene
 * que ser coherente con _isMobileViewport() en app.js — handhelds Android tipo
 * Sunmi L3 reportan ≥600px y necesitan pointer:coarse para seguir en móvil.
 * Esta regla solo se aplica cuando NO estamos en handheld:
 *   - viewport > 820px (cualquier dispositivo a partir de tablet grande), O
 *   - viewport 600-820px con pointer:fine (tablets con teclado/stylus). */
@media (min-width: 821px),
       (min-width: 600px) and (pointer: fine) {
    .tpv-mobile-dashboard { display: none !important; }
}

/* ── Top bar ── */
.tpv-mobile-dashboard__topbar {
    position: sticky;
    top: 0;
    height: 44px;
    padding: 0 6px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-primary);
    z-index: 2;
}

.tpv-mobile-dashboard__back {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tpv-mobile-dashboard__back:hover { background: var(--bg-hover); }
.tpv-mobile-dashboard__back:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.tpv-mobile-dashboard__back > svg { width: 24px; height: 24px; }

.tpv-mobile-dashboard__title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.tpv-mobile-dashboard__title-sub {
    color: var(--text-secondary);
    font-weight: 500;
}
.tpv-mobile-dashboard__topbar-spacer {
    width: 44px;
    height: 44px;
}

/* ── Sub-toggle Tienda / Restaurante (posición prominente, SPEC §6.1) ── */
.tpv-mobile-dashboard__mode {
    padding: 16px;
}

.tpv-mobile-dashboard__section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}

.tpv-mobile-dashboard__mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-tertiary);
    border-radius: 14px;
    padding: 4px;
    border: 1px solid var(--border-primary);
}

.tpv-mobile-dashboard__mode-toggle button {
    appearance: none;
    height: 52px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: color 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tpv-mobile-dashboard__mode-toggle button > svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.tpv-mobile-dashboard__mode-toggle button[aria-pressed="true"] {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.18));
}
.tpv-mobile-dashboard__mode-toggle button:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ── Sección "Operaciones" — grid 3×N de accesos ── */
.tpv-mobile-dashboard__accesses {
    padding: 4px 16px 24px;
    flex: 1;
}

.tpv-mobile-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tpv-mobile-dashboard__access {
    appearance: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    padding: 14px 8px 10px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    min-height: 92px;
    position: relative;
}
.tpv-mobile-dashboard__access:hover { background: var(--bg-tertiary); }
.tpv-mobile-dashboard__access:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}
.tpv-mobile-dashboard__access:active {
    transform: scale(0.98);
    transition: transform 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Marker visual para accesos restringidos a admin (punto naranja) */
.tpv-mobile-dashboard__access.is-admin-only::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--accent-orange);
}

.tpv-mobile-dashboard__access-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.tpv-mobile-dashboard__access-ico > svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
}
.tpv-mobile-dashboard__access-ico[data-color="blue"]    { background: var(--accent-blue); }
.tpv-mobile-dashboard__access-ico[data-color="green"]   { background: var(--accent-green); }
.tpv-mobile-dashboard__access-ico[data-color="red"]     { background: var(--accent-red); }
.tpv-mobile-dashboard__access-ico[data-color="orange"]  { background: var(--accent-orange); }
.tpv-mobile-dashboard__access-ico[data-color="purple"]  { background: var(--accent-primary); }

.tpv-mobile-dashboard__access-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Hint de leyenda al pie (solo se muestra si hay accesos admin-only) ── */
.tpv-mobile-dashboard__hint {
    padding: 4px 16px 16px;
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
}
.tpv-mobile-dashboard__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--accent-orange);
    vertical-align: middle;
    margin-right: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .tpv-mobile-dashboard__access:active { transform: none; transition: none; }
    .tpv-mobile-dashboard__mode-toggle button { transition: none; }
}

/* =====================================================
   TPV — Pantalla principal de venta en móvil (sesión 5/5 mobile UX)
   SPEC: docs/specs/SPEC_MOBILE_UX.md §4.2 + §6.1.
   Mockup: docs/specs/mobile-ux-mockups/module-tpv-venta.html.
   ===================================================== */

.tpv-mobile-venta {
    position: fixed;
    inset: 0;
    /* Bug 3 (sesión fix 2026-04-29): subimos z-index 60 → 999 para asegurar
     * que la vista móvil queda sobre cualquier sidebar/header/dropdown del
     * shell desktop residual cuando el shell no se desmonta limpiamente.
     * Bajo modal-overlay (1000) y mobile-slidedown (1100). */
    z-index: 999;
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Top bar 44pt: casa | TPV · Caja N | persona ── */
.tpv-mobile-venta__topbar {
    height: 44px;
    padding: 0 6px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-primary);
    position: relative;
    flex: 0 0 auto;
}
.tpv-mobile-venta__topbar-btn {
    width: 44px;
    height: 44px;
    /* Bug 3 (sesión fix 2026-04-29): borde sutil + fondo ligero para que el
     * botón casa sea VISIBLE incluso si el icono Lucide tarda en renderizarse
     * o el iOS Safari renderiza el SVG con stroke muy fino. Antes era
     * background: transparent + border: 0 → invisible hasta hover. */
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.tpv-mobile-venta__topbar-btn:hover { background: var(--bg-hover); }
.tpv-mobile-venta__topbar-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.tpv-mobile-venta__topbar-btn.is-assigned {
    background: var(--accent-primary);
    color: #ffffff;
}
.tpv-mobile-venta__topbar-btn.is-assigned:hover { background: var(--accent-primary); opacity: 0.9; }
.tpv-mobile-venta__persona-fill {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
}
.tpv-mobile-venta__topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tpv-mobile-venta__topbar-title small {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ── Indicador de gesto: 30×3pt opacity 0.4 bajo top bar (SPEC §4.2) ── */
.tpv-mobile-venta__gesture-hint {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 44px + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    border-radius: 9999px;
    background: var(--text-primary);
    opacity: 0.4;
    z-index: 5;
    pointer-events: none;
    transition: opacity 600ms ease;
}
.tpv-mobile-venta__gesture-hint.is-fading { opacity: 0; }

/* ── Tira de cliente: solo si hay cliente asignado ── */
.tpv-mobile-venta__client-strip {
    height: 28px;
    padding: 0 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    flex: 0 0 auto;
}
.tpv-mobile-venta__client-label { font-weight: 500; }
.tpv-mobile-venta__client-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.tpv-mobile-venta__client-clear {
    margin-left: auto;
    background: transparent;
    border: 0;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.tpv-mobile-venta__client-clear:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Cuerpo: input EAN + lista + total + COBRAR ── */
.tpv-mobile-venta__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tpv-mobile-venta__ean-row {
    padding: 12px 16px;
    background: var(--bg-primary);
    flex: 0 0 auto;
}
.tpv-mobile-venta__ean {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 0 14px;
    font-variant-numeric: tabular-nums;
    -webkit-appearance: none;
    appearance: none;
}
.tpv-mobile-venta__ean::placeholder { color: var(--text-secondary); }
.tpv-mobile-venta__ean:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-color: var(--accent-blue);
}

/* ── Bug 5 + SPEC v1.2 §6.1: catalog (chips + grid productos rápidos) ── */
.tpv-mobile-venta__catalog {
    flex: 0 0 auto;
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--border-primary);
    /* Cap de altura para que la lista de líneas tenga espacio. En portrait
     * <600px el grid muestra 2 filas (~150px) + chips (~40px). El usuario
     * scrollea internamente si hay más productos. */
    max-height: 38vh;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tpv-mobile-venta__chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0;
    flex: 0 0 auto;
    scrollbar-width: none;
}
.tpv-mobile-venta__chips::-webkit-scrollbar { display: none; }
.tpv-mobile-venta__chip {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.tpv-mobile-venta__chip.is-active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.tpv-mobile-venta__product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.tpv-mobile-venta__product-grid.is-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 13px;
    gap: 6px;
    padding: 20px 0;
}
.tpv-mobile-venta__product {
    min-height: 76px;
    border-radius: 10px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    text-align: left;
    font-family: inherit;
}
.tpv-mobile-venta__product:active {
    background: var(--bg-tertiary);
    transform: scale(0.97);
}
.tpv-mobile-venta__product-name {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tpv-mobile-venta__product-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpv-mobile-venta__lines {
    flex: 1 1 auto;
    /* Bug 5 (sesión fix 2026-04-29): cap mínimo y máximo para coexistir con el
     * catalog (chips+grid). Si no hay líneas, mostrar solo el "empty state"
     * compacto. Si hay muchas, scroll interno hasta 28vh (deja espacio al
     * resumen y al botón COBRAR). */
    min-height: 80px;
    max-height: 28vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tpv-mobile-venta__line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}
.tpv-mobile-venta__line-name {
    grid-column: 1;
    grid-row: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tpv-mobile-venta__line-meta {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.tpv-mobile-venta__line-amount {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tpv-mobile-venta__line-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tpv-mobile-venta__line-actions button {
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    -webkit-tap-highlight-color: transparent;
}
.tpv-mobile-venta__line-actions button:hover { background: var(--bg-hover); }
.tpv-mobile-venta__line-actions button:active { transform: translateY(1px); }

.tpv-mobile-venta__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    opacity: 0.7;
}

.tpv-mobile-venta__summary {
    padding: 12px 16px 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}
.tpv-mobile-venta__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.tpv-mobile-venta__summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
.tpv-mobile-venta__summary-total .label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tpv-mobile-venta__summary-total .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.tpv-mobile-venta__pay-row {
    padding: 12px 16px 20px;
    background: var(--bg-primary);
    flex: 0 0 auto;
}
.tpv-mobile-venta__pay {
    width: 100%;
    height: 56px;
    border-radius: 14px;
    border: 0;
    background: var(--accent-green);
    color: #ffffff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
    -webkit-tap-highlight-color: transparent;
    transition: transform 80ms ease;
}
.tpv-mobile-venta__pay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.tpv-mobile-venta__pay:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; }
.tpv-mobile-venta__pay:active:not(:disabled) { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .tpv-mobile-venta__gesture-hint { transition: none; }
    .tpv-mobile-venta__pay:active:not(:disabled) { transform: none; transition: none; }
    .tpv-mobile-venta__line-actions button:active { transform: none; }
}