@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,1,0');

        :root {
            --font-main: "Space Grotesk", "Segoe UI", sans-serif;
            --bg-a: #0d1b2a;
            --bg-b: #1b263b;
            --card: #f6f8fb;
            --card-soft: #e9eef5;
            --ink: #1b1f2a;
            --brand: #00a896;
            --brand-2: #028090;
            --line: #c7d2e3;
            --window-bg: linear-gradient(120deg, var(--card), var(--card-soft));
            --body-panel-bg: linear-gradient(150deg, #fafdff, #ebf2fb);
            --side-panel-bg: linear-gradient(160deg, #ffffff, #e9f0fa);
            --button-bg: linear-gradient(180deg, #ffffff, #e7efff);
            --button-bg-strong: linear-gradient(130deg, var(--brand), var(--brand-2));
            --button-soft-bg: linear-gradient(160deg, #ffffff, #eef4ff);
            --button-active-bg: linear-gradient(160deg, #ebfbf9, #dff8f4);
            --button-text: #1f3b64;
            --button-text-dark: #223149;
            --hover-shadow: 0 6px 14px rgba(30, 58, 138, 0.12);
            --shadow: 0 18px 40px rgba(6, 20, 38, 0.28);
            --radius: 18px;
            --layout-horizontal-left-w: 65%;
            --layout-horizontal-right-w: 35%;
            --layout-horizontal-top-h: 18%;
            --layout-horizontal-bottom-h: 82%;
            --layout-horizontal-opciones-panel-h: 57.317%;
            --layout-horizontal-teclado-panel-h: 42.683%;
            --teclado-display-h: 76px;
            --teclado-grid-gap: 2px;
            --layout-vertical-left-display-h: 12;
            --layout-vertical-left-cabecera-h: 10;
            --layout-vertical-left-teclado-h: 10;
            --layout-vertical-right-display-h: 12;
            --layout-vertical-right-opciones-h: 44;
            --layout-vertical-left-display-p: 12%;
            --layout-vertical-left-cabecera-p: 10%;
            --layout-vertical-left-teclado-p: 10%;
            --layout-vertical-right-display-p: 12%;
            --layout-vertical-right-opciones-p: 44%;
            --layout-vertical-left-display-r: 0.12;
            --layout-vertical-left-cabecera-r: 0.10;
            --layout-vertical-left-teclado-r: 0.10;
            --layout-vertical-right-display-r: 0.12;
            --layout-vertical-right-opciones-r: 0.44;
            --layout-vertical-right-teclado-r: 0.44;
            --outer-pad: 6px;
            --layout-gap: 6px;
            --cuerpo-pad: 6px;
            --ventas-tools-btn-h: 18px;
            --config-bg: linear-gradient(120deg, #fff7ed, #fed7aa);
            --config-bg-solid: #fed7aa;
            --comanda-font-size: 12px;
            --display-tool-btn-size: 38px;
            --mesa-estado-0-bg-a: #ffffff;
            --mesa-estado-0-bg-b: #eef4ff;
            --mesa-estado-0-text: #223149;
            --mesa-estado-0-border: #c7d2e3;
            --mesa-estado-1-bg-a: #ffedd5;
            --mesa-estado-1-bg-b: #fdba74;
            --mesa-estado-1-text: #7c2d12;
            --mesa-estado-1-border: #fb923c;
            --mesa-estado-2-bg-a: #fef9c3;
            --mesa-estado-2-bg-b: #fde047;
            --mesa-estado-2-text: #713f12;
            --mesa-estado-2-border: #facc15;
            --mesa-estado-3-bg-a: #fecaca;
            --mesa-estado-3-bg-b: #f87171;
            --mesa-estado-3-text: #7f1d1d;
            --mesa-estado-3-border: #ef4444;
            --mesa-estado-4-bg-a: #ede9fe;
            --mesa-estado-4-bg-b: #a78bfa;
            --mesa-estado-4-text: #4c1d95;
            --mesa-estado-4-border: #8b5cf6;
        }

        body.theme-oceano {
            --font-main: "Segoe UI", "Trebuchet MS", sans-serif;
            --bg-a: #083344;
            --bg-b: #155e75;
            --card: #ecfeff;
            --card-soft: #cffafe;
            --ink: #0f172a;
            --brand: #0891b2;
            --brand-2: #0e7490;
            --line: #67e8f9;
            --window-bg: linear-gradient(120deg, #ecfeff, #cffafe);
            --body-panel-bg: linear-gradient(150deg, #f0fdff, #cffafe);
            --side-panel-bg: linear-gradient(160deg, #ecfeff, #bae6fd);
            --button-bg: linear-gradient(180deg, #ffffff, #cffafe);
            --button-soft-bg: linear-gradient(160deg, #ffffff, #dff7ff);
            --button-active-bg: linear-gradient(160deg, #cffafe, #a5f3fc);
            --button-text: #164e63;
            --button-text-dark: #0f172a;
            --config-bg: linear-gradient(120deg, #ecfeff, #a5f3fc);
            --config-bg-solid: #a5f3fc;
        }

        body.theme-bosque {
            --font-main: Georgia, "Times New Roman", serif;
            --bg-a: #052e16;
            --bg-b: #166534;
            --card: #f0fdf4;
            --card-soft: #dcfce7;
            --ink: #102115;
            --brand: #16a34a;
            --brand-2: #15803d;
            --line: #86efac;
            --window-bg: linear-gradient(120deg, #f0fdf4, #dcfce7);
            --body-panel-bg: linear-gradient(150deg, #f7fff9, #dcfce7);
            --side-panel-bg: linear-gradient(160deg, #ffffff, #dcfce7);
            --button-bg: linear-gradient(180deg, #ffffff, #dcfce7);
            --button-soft-bg: linear-gradient(160deg, #ffffff, #e7f8ec);
            --button-active-bg: linear-gradient(160deg, #dcfce7, #bbf7d0);
            --button-text: #14532d;
            --button-text-dark: #102115;
            --config-bg: linear-gradient(120deg, #f0fdf4, #bbf7d0);
            --config-bg-solid: #bbf7d0;
        }

        body.theme-carbon {
            --font-main: "Consolas", "Courier New", monospace;
            --bg-a: #111827;
            --bg-b: #374151;
            --card: #f9fafb;
            --card-soft: #e5e7eb;
            --ink: #111827;
            --brand: #f97316;
            --brand-2: #ea580c;
            --line: #9ca3af;
            --window-bg: linear-gradient(120deg, #f9fafb, #e5e7eb);
            --body-panel-bg: linear-gradient(150deg, #ffffff, #e5e7eb);
            --side-panel-bg: linear-gradient(160deg, #ffffff, #e5e7eb);
            --button-bg: linear-gradient(180deg, #ffffff, #e5e7eb);
            --button-soft-bg: linear-gradient(160deg, #ffffff, #edf0f3);
            --button-active-bg: linear-gradient(160deg, #ffedd5, #fed7aa);
            --button-text: #7c2d12;
            --button-text-dark: #111827;
            --config-bg: linear-gradient(120deg, #f9fafb, #d1d5db);
            --config-bg-solid: #d1d5db;
        }

        body.theme-iphone {
            --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
            --bg-a: #000000;
            --bg-b: #1c1c1e;
            --card: #111113;
            --card-soft: #1c1c1e;
            --ink: #ffffff;
            --brand: #007aff;
            --brand-2: #0a84ff;
            --line: #3a3a3c;
            --window-bg: rgba(17, 17, 19, 0.92);
            --body-panel-bg: linear-gradient(180deg, #111113, #000000);
            --side-panel-bg: rgba(28, 28, 30, 0.92);
            --button-bg: linear-gradient(180deg, #2c2c2e, #1c1c1e);
            --button-bg-strong: linear-gradient(180deg, #0a84ff, #007aff);
            --button-soft-bg: linear-gradient(180deg, #2c2c2e, #1c1c1e);
            --button-active-bg: linear-gradient(180deg, #003f7f, #002f5f);
            --button-text: #ffffff;
            --button-text-dark: #ffffff;
            --hover-shadow: 0 8px 22px rgba(10, 132, 255, 0.28);
            --shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
            --radius: 22px;
            --config-bg: linear-gradient(180deg, #111113, #000000);
            --config-bg-solid: #111113;
        }

        body.theme-iphone .cabecera,
        body.theme-iphone .display,
        body.theme-iphone .cuerpo,
        body.theme-iphone .opciones,
        body.theme-iphone .teclado {
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        body.theme-iphone {
            background:
                radial-gradient(circle at 24% 12%, rgba(10, 132, 255, 0.22), transparent 28%),
                linear-gradient(180deg, #000000, #1c1c1e);
        }

        body.terminal-inactive-lock .contenedor {
            pointer-events: none !important;
            user-select: none;
            filter: grayscale(0.2) opacity(0.75);
        }

        body.terminal-inactive-lock #visualAlertModal,
        body.terminal-inactive-lock #visualAlertModal * {
            pointer-events: auto !important;
        }

        body.theme-iphone .division-btn,
        body.theme-iphone .config-btn,
        body.theme-iphone .config-tab-btn,
        body.theme-iphone .btn-terminales,
        body.theme-iphone .usuario-btn,
        body.theme-iphone .mesa-btn,
        body.theme-iphone .familia-btn,
        body.theme-iphone .articulo-btn,
        body.theme-iphone .cobro-btn,
        body.theme-iphone .tecla,
        body.theme-iphone input,
        body.theme-iphone select,
        body.theme-iphone textarea {
            border-radius: 14px;
        }

        body.theme-iphone .tab-opcion {
            border-radius: 14px 14px 0 0;
        }

        body.theme-iphone .mesa-btn.mesa-forma-redonda {
            border-radius: 999px;
        }

        body.theme-iphone .cabecera,
        body.theme-iphone .display,
        body.theme-iphone .cuerpo,
        body.theme-iphone .opciones,
        body.theme-iphone .teclado,
        body.theme-iphone .opciones-contenido,
        body.theme-iphone .config-tab-panel,
        body.theme-iphone .all-articulos-panel,
        body.theme-iphone .manual-panel,
        body.theme-iphone .cuerpo-tab-panel,
        body.theme-iphone .cobro-resumen,
        body.theme-iphone .comanda-card,
        body.theme-iphone .fase2-comandas-card,
        body.theme-iphone .fase2-mesa-pendiente-card,
        body.theme-iphone .fase2-comandas-head,
        body.theme-iphone .fase2-comandas-meta,
        body.theme-iphone .teclado-display,
        body.theme-iphone .teclado-alfabetico {
            background: var(--window-bg) !important;
            color: #ffffff !important;
            border-color: var(--line) !important;
        }

        body.theme-iphone .display-usuario,
        body.theme-iphone .display-brand,
        body.theme-iphone .display-estado,
        body.theme-iphone .estado-operacion,
        body.theme-iphone .config-label,
        body.theme-iphone .cabecera-comandas-title,
        body.theme-iphone .cabecera-comandas-subtitle,
        body.theme-iphone .comanda-title,
        body.theme-iphone .comanda-linea,
        body.theme-iphone .comanda-mod,
        body.theme-iphone .comanda-total,
        body.theme-iphone .fase2-comandas-title,
        body.theme-iphone .fase2-comandas-subtitle,
        body.theme-iphone .fase2-comandas-empty,
        body.theme-iphone .fase2-comandas-meta,
        body.theme-iphone .fase2-mesa-pendiente-card,
        body.theme-iphone .cobro-titulo,
        body.theme-iphone .cobro-linea,
        body.theme-iphone .cobro-total,
        body.theme-iphone .usuario-id,
        body.theme-iphone .mesa-total,
        body.theme-iphone .articulo-meta,
        body.theme-iphone .cuerpo-tab-card h3,
        body.theme-iphone .cuerpo-tab-card p {
            color: #ffffff !important;
        }

        body.theme-iphone input,
        body.theme-iphone select,
        body.theme-iphone textarea,
        body.theme-iphone .config-input,
        body.theme-iphone .config-select {
            background: #1c1c1e !important;
            color: #ffffff !important;
            border-color: #3a3a3c !important;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: visible;
            font-family: var(--font-main);
            background:
                radial-gradient(circle at 80% 12%, rgba(0, 168, 150, 0.32), transparent 28%),
                radial-gradient(circle at 14% 82%, rgba(2, 128, 144, 0.28), transparent 26%),
                linear-gradient(140deg, var(--bg-a), var(--bg-b));
            color: var(--ink);
        }

        .contenedor {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: var(--outer-pad);
            gap: var(--layout-gap);
            animation: entrar 0.5s ease-out;
        }

        .fila-superior {
            display: flex;
            width: 100%;
            height: calc(var(--layout-horizontal-top-h) - (var(--layout-gap) / 2));
            gap: var(--layout-gap);
        }

        .cabecera {
            width: calc(var(--layout-horizontal-left-w) - (var(--layout-gap) / 2));
            height: 100%;
            position: relative;
            background: var(--window-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ink);
            font-size: clamp(18px, 2vw, 26px);
            font-weight: bold;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        body.config-mode .cabecera,
        body.config-mode .cuerpo {
            border-color: #f59e0b;
            box-shadow:
                0 0 0 3px rgba(245, 158, 11, 0.35),
                0 18px 40px rgba(6, 20, 38, 0.28);
        }

        body.config-mode .display {
            background: var(--config-bg);
            border-color: #f59e0b;
            box-shadow:
                0 0 0 3px rgba(245, 158, 11, 0.35),
                0 18px 40px rgba(6, 20, 38, 0.28);
        }

        body.config-mode.fase2 .cabecera.config-selected,
        body.config-mode.fase2 .cuerpo.config-selected,
        body.config-mode.fase3 .cabecera.config-selected,
        body.config-mode.fase3 .cuerpo.config-selected {
            border-color: #ef4444 !important;
            box-shadow:
                0 0 0 4px rgba(239, 68, 68, 0.5),
                0 18px 40px rgba(6, 20, 38, 0.28) !important;
        }

        body.config-mode.fase2 .cabecera.config-selected::after,
        body.config-mode.fase2 .cuerpo.config-selected::after,
        body.config-mode.fase3 .cabecera.config-selected::after,
        body.config-mode.fase3 .cuerpo.config-selected::after {
            content: "ZONA ACTIVA";
            position: absolute;
            top: 6px;
            right: 10px;
            z-index: 6;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.05em;
            color: #ffffff;
            background: linear-gradient(180deg, #ef4444, #dc2626);
            border-radius: 999px;
            padding: 4px 8px;
            box-shadow: 0 6px 12px rgba(127, 29, 29, 0.35);
            pointer-events: none;
        }

        body.config-mode.fase2 .cabecera.config-selected,
        body.config-mode.fase3 .cabecera.config-selected {
            background-image: none !important;
        }

        body.config-mode.fase2 .cuerpo.config-selected,
        body.config-mode.fase3 .cuerpo.config-selected {
            background-image:
                linear-gradient(0deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.12)),
                var(--config-active-bg, none) !important;
            background-blend-mode: multiply, normal;
            animation: zonaActivaPulse 1.1s ease-in-out infinite alternate;
        }

        @keyframes zonaActivaPulse {
            from {
                box-shadow:
                    0 0 0 4px rgba(239, 68, 68, 0.38),
                    0 18px 40px rgba(6, 20, 38, 0.28);
            }
            to {
                box-shadow:
                    0 0 0 6px rgba(239, 68, 68, 0.62),
                    0 22px 46px rgba(6, 20, 38, 0.32);
            }
        }

        .cabecera-panel {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: stretch;
            gap: 8px;
            padding: 8px;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }

        .cabecera-panel.cabecera-panel-familias-nav {
            overflow-x: hidden;
            position: relative;
            padding-left: 58px;
            padding-right: 58px;
            scrollbar-width: none;
        }
        .cabecera-panel.cabecera-panel-familias-nav::-webkit-scrollbar {
            display: none;
        }
        .cabecera .familias-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 56px;
            height: 56px;
            border: 2px solid color-mix(in srgb, var(--line) 65%, #000000 35%);
            border-radius: 999px;
            background: linear-gradient(180deg, #ffffff, #dbeafe);
            color: #0f172a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            z-index: 20;
            box-shadow: 0 8px 16px rgba(15, 23, 42, 0.28);
            opacity: 0.98;
        }
        .cabecera .familias-nav-btn .icono-ms {
            font-size: 34px;
            font-weight: 900;
            line-height: 1;
        }
        .cabecera .familias-nav-btn:hover {
            background: linear-gradient(180deg, #ffffff, #bfdbfe);
        }
        .cabecera .familias-nav-btn:active {
            transform: translateY(-50%) scale(0.96);
        }
        .cabecera .familias-nav-prev { left: 8px; }
        .cabecera .familias-nav-next { right: 8px; }

        .articulos-panel.articulos-panel-nav,
        .mesas-panel.mesas-panel-nav {
            overflow-x: hidden;
            padding-left: 62px;
            padding-right: 62px;
            scrollbar-width: none;
        }
        .articulos-panel.articulos-panel-nav::-webkit-scrollbar,
        .mesas-panel.mesas-panel-nav::-webkit-scrollbar {
            display: none;
        }
        .cuerpo .panel-nav-btn-articulos,
        .cuerpo .panel-nav-btn-mesas {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 56px;
            height: 56px;
            border: 2px solid color-mix(in srgb, var(--line) 65%, #000000 35%);
            border-radius: 999px;
            background: linear-gradient(180deg, #ffffff, #dbeafe);
            color: #0f172a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            z-index: 20;
            box-shadow: 0 8px 16px rgba(15, 23, 42, 0.28);
            opacity: 0.98;
        }
        .cuerpo .panel-nav-btn-articulos .icono-ms,
        .cuerpo .panel-nav-btn-mesas .icono-ms {
            font-size: 34px;
            font-weight: 900;
            line-height: 1;
        }
        .cuerpo .panel-nav-btn-articulos:hover,
        .cuerpo .panel-nav-btn-mesas:hover {
            background: linear-gradient(180deg, #ffffff, #bfdbfe);
        }
        .cuerpo .panel-nav-btn-articulos:active,
        .cuerpo .panel-nav-btn-mesas:active {
            transform: translateY(-50%) scale(0.96);
        }
        .cuerpo .panel-nav-btn-articulos.nav-prev,
        .cuerpo .panel-nav-btn-mesas.nav-prev { left: 8px; }
        .cuerpo .panel-nav-btn-articulos.nav-next,
        .cuerpo .panel-nav-btn-mesas.nav-next { right: 8px; }

        .cabecera-placeholder {
            width: 100%;
            text-align: center;
        }

        .cabecera-fase1 {
            width: 100%;
            display: grid;
            gap: 2px;
            align-content: center;
            justify-items: center;
            text-align: center;
            white-space: normal;
            line-height: 1.1;
            padding: 4px 10px;
        }

        .cabecera-fase1 .linea-principal {
            font-size: clamp(16px, 2.2vw, 26px);
            font-weight: 900;
            letter-spacing: 0.04em;
        }

        .cabecera-fase1 .linea-secundaria {
            font-size: clamp(12px, 1.4vw, 18px);
            font-weight: 700;
            opacity: 0.9;
        }

        .cabecera-fase1 .linea-tienda {
            font-size: clamp(12px, 1.4vw, 18px);
            font-weight: 800;
            color: #0f766e;
        }

        .cabecera-comandas {
            width: 100%;
            min-width: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            white-space: normal;
            line-height: 1.1;
        }

        .cabecera-comandas.centered {
            grid-template-columns: minmax(0, 1fr);
            justify-items: center;
            text-align: center;
        }

        .cabecera-comandas-title {
            display: grid;
            gap: 2px;
            min-width: 0;
            color: var(--button-text-dark);
            font-weight: 900;
            font-size: clamp(18px, 2.1vw, 28px);
        }

        .cabecera-comandas-subtitle {
            color: #475569;
            font-size: clamp(12px, 1.15vw, 16px);
            font-weight: 800;
        }

        .cabecera-comandas .config-btn {
            min-width: 136px;
            min-height: 42px;
        }

        .division-btn {
            appearance: none;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--button-bg);
            color: var(--button-text-dark);
            min-width: 130px;
            height: 100%;
            padding: 8px 12px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .division-btn:hover {
            transform: translateY(-1px);
            box-shadow: var(--hover-shadow);
        }

        .division-btn.active {
            background: var(--button-bg-strong);
            color: #fff;
            border-color: transparent;
        }

        .display {
            width: calc(var(--layout-horizontal-right-w) - (var(--layout-gap) / 2));
            height: 100%;
            background: var(--window-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            color: var(--ink);
            font-size: 18px;
            font-weight: bold;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        .display .titulo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            letter-spacing: 0.05em;
            width: auto;
            max-width: calc(100% - 112px);
            padding-right: 0;
            font-size: clamp(19px, 2.4vw, 34px);
            line-height: 1.05;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
        }

        .display-usuario {
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            text-align: center;
            font-weight: 700;
            color: #355070;
            max-width: calc(100% - 200px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .display-terminal {
            position: absolute;
            top: 8px;
            left: 12px;
            font-size: 11px;
            font-weight: 800;
            color: #1f3b64;
            letter-spacing: 0.02em;
            white-space: nowrap;
            max-width: calc(100% - 220px);
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
        }

        .display-brand {
            position: absolute;
            bottom: 8px;
            left: 12px;
            font-size: 11px;
            font-weight: 800;
            color: #1f3b64;
            letter-spacing: 0.02em;
            white-space: nowrap;
            pointer-events: none;
        }

        .display-ai-btn {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: clamp(24px, 3.1vw, var(--display-tool-btn-size));
            height: clamp(24px, 3.1vw, var(--display-tool-btn-size));
            border: 1px solid rgba(15, 23, 42, 0.18);
            border-radius: 12px;
            background: linear-gradient(135deg, var(--brand), var(--brand-2));
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 16px rgba(0, 168, 150, 0.28);
            z-index: 3;
        }

        .display-ai-btn .icono-ms {
            font-size: 24px;
        }

        .display-estado {
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 8px;
            width: auto;
            font-size: clamp(14px, 1.5vw, 20px);
            font-weight: 800;
            color: #355070;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
        }

        .display-tools {
            position: absolute;
            top: 8px;
            right: 8px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
            transform: none;
        }

        .display .btn-desplegar {
            width: clamp(24px, 3.1vw, var(--display-tool-btn-size));
            height: clamp(24px, 3.1vw, var(--display-tool-btn-size));
            background: linear-gradient(130deg, var(--brand), var(--brand-2));
            border: none;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease, filter 0.3s ease;
            box-shadow: 0 8px 16px rgba(0, 168, 150, 0.35);
        }

        .display .btn-desplegar:hover {
            filter: brightness(1.08);
        }

        .display .btn-desplegar::after {
            content: ">";
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
        }

        .fecha-hora {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: flex-end;
            gap: 6px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.15;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }

        @media (max-height: 620px), (max-width: 980px) {
            .display {
                padding: 0 8px;
            }

            .display-ai-btn {
                left: 6px;
                top: 50%;
                transform: translateY(-50%);
            }

            .display-tools {
                top: 50%;
                right: 6px;
                transform: translateY(-50%);
                gap: 2px;
                align-items: flex-end;
            }

            .fecha-hora {
                font-size: 9px;
                gap: 3px;
            }
        }

        .fila-inferior {
            display: flex;
            width: 100%;
            height: calc(var(--layout-horizontal-bottom-h) - (var(--layout-gap) / 2));
            gap: var(--layout-gap);
            position: relative;
        }

        .cuerpo {
            width: calc(var(--layout-horizontal-left-w) - (var(--layout-gap) / 2));
            height: 100%;
            position: relative;
            background: var(--body-panel-bg);
            display: flex;
            align-items: stretch;
            justify-content: flex-start;
            color: var(--ink);
            font-size: clamp(18px, 2.3vw, 34px);
            font-weight: 700;
            letter-spacing: 0.08em;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            transition: width 0.3s ease;
            box-shadow: var(--shadow);
            padding: var(--cuerpo-pad);
            overflow: auto;
        }

        .cuerpo.expanded {
            width: 100%;
        }

        body.fase2 .cuerpo,
        body.fase2 .cuerpo.expanded {
            overflow: hidden;
        }

        body.fase1 .cuerpo,
        body.fase1 .cuerpo.expanded {
            background-image: url("../../AZUL.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }

        body.config-mode .cabecera,
        body.config-mode .cuerpo,
        body.config-mode .cuerpo.expanded {
            background: var(--config-bg) !important;
        }

        body.config-mode .cuerpo,
        body.config-mode .cuerpo.expanded {
            background-image: none;
        }

        .panel-derecho {
            width: calc(var(--layout-horizontal-right-w) - (var(--layout-gap) / 2));
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--layout-gap);
            transition: all 0.3s ease;
        }

        .panel-derecho.hidden {
            width: 0;
            padding: 0;
            overflow: hidden;
        }

        .opciones,
        .teclado {
            width: 100%;
            background: var(--side-panel-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ink);
            font-size: 18px;
            font-weight: bold;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .opciones {
            height: calc(var(--layout-horizontal-opciones-panel-h) - (var(--layout-gap) / 2));
        }

        .teclado {
            height: calc(var(--layout-horizontal-teclado-panel-h) - (var(--layout-gap) / 2));
        }

        .opciones {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            padding: 6px 3px 4px;
            gap: 0;
            position: relative;
        }

        .tabs-opciones {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            width: 100%;
            flex-wrap: nowrap;
            border-bottom: 1px solid #b8c7dd;
            padding: 0;
        }

        .tab-opcion {
            appearance: none;
            border: 1px solid #b8c7dd;
            border-bottom: none;
            background: linear-gradient(180deg, #ecf3ff, #dce8fb);
            color: var(--ink);
            border-radius: 11px 11px 0 0;
            padding: 7px 4px 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
            flex: 1;
            min-width: 0;
            text-align: center;
            position: relative;
            top: 1px;
        }

        .tab-opcion svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            vertical-align: middle;
        }

        .icono-ms {
            font-family: "Material Symbols Rounded";
            font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
            font-size: 20px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .tab-ventas { color: #0f766e; }
        .tab-almacen { color: #1d4ed8; }
        .tab-informes { color: #b45309; }
        .tab-config { color: #6d28d9; }
        .tab-salir { color: #b91c1c; }

        .tab-opcion.tab-ventas {
            background: linear-gradient(180deg, #99f6e4, #2dd4bf);
            color: #0f172a;
            border-color: #14b8a6;
        }

        .tab-opcion.tab-ventas.active {
            background: linear-gradient(180deg, #5eead4, #14b8a6);
            color: #ffffff;
            border-color: #0d9488;
        }

        .tab-opcion.active svg {
            stroke: #ffffff;
        }

        .tab-opcion:hover {
            background: linear-gradient(180deg, #f3f8ff, #e4eeff);
            transform: translateY(-1px);
        }

        .tab-opcion.active {
            background: #ffffff;
            color: #223149;
            border-color: #b8c7dd;
            box-shadow: 0 -2px 8px rgba(25, 44, 80, 0.08);
            z-index: 2;
        }

        .tab-opcion:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
            filter: grayscale(0.2);
        }

        .tab-opcion.tab-programa-activo {
            background: linear-gradient(180deg, #fecaca, #f87171);
            color: #7f1d1d;
            border-color: #ef4444;
        }

        .tab-opcion.tab-programa-activo.active {
            background: linear-gradient(180deg, #ef4444, #dc2626);
            color: #ffffff;
            border-color: #b91c1c;
            box-shadow: 0 -2px 8px rgba(185, 28, 28, 0.25);
        }

        /* Pestaña principal de Herramientas/Configuracion cuando modo configuracion esta activo */
        body.config-mode .tab-opcion.tab-config {
            background: var(--config-bg) !important;
            background-color: var(--config-bg-solid) !important;
            color: var(--ink) !important;
            border-color: color-mix(in srgb, var(--config-bg-solid) 70%, #334155 30%) !important;
            box-shadow: 0 -2px 8px color-mix(in srgb, var(--config-bg-solid) 48%, transparent);
        }

        body.config-mode .tab-opcion.tab-config.active {
            background: var(--config-bg) !important;
            background-color: var(--config-bg-solid) !important;
            color: var(--ink) !important;
            border-color: color-mix(in srgb, var(--config-bg-solid) 78%, #1e293b 22%) !important;
            box-shadow: 0 -2px 10px color-mix(in srgb, var(--config-bg-solid) 60%, transparent);
        }

        /* Cuando la fase es mayor de 2 (fase 3 y 4), Ventas en rojo */
        body.fase3:not(.config-mode) .tab-opcion.tab-ventas,
        body.fase4:not(.config-mode) .tab-opcion.tab-ventas {
            background: linear-gradient(180deg, #fecaca, #f87171) !important;
            color: #7f1d1d !important;
            border-color: #ef4444 !important;
        }

        body.fase3:not(.config-mode) .tab-opcion.tab-ventas.active,
        body.fase4:not(.config-mode) .tab-opcion.tab-ventas.active {
            background: linear-gradient(180deg, #ef4444, #dc2626) !important;
            color: #ffffff !important;
            border-color: #b91c1c !important;
            box-shadow: 0 -2px 8px rgba(185, 28, 28, 0.25);
        }

        .opciones-contenido {
            flex: 1;
            border: 1px solid #b8c7dd;
            border-top: none;
            border-radius: 0 0 12px 12px;
            display: flex;
            position: relative;
            align-items: stretch;
            justify-content: flex-start;
            font-size: 14px;
            font-weight: 600;
            color: #4f617d;
            background: rgba(255, 255, 255, 0.78);
            overflow: auto;
            padding: 8px;
        }

        .opciones.ventas-activa .opciones-contenido {
            background: linear-gradient(180deg, #bff7ef, #5eead4);
            border-color: #14b8a6;
            padding-bottom: 0;
        }

        .opciones.ventas-activa #panelVentas {
            background: transparent;
            height: 100%;
            min-height: 0;
            align-content: stretch;
            align-self: stretch;
        }

        .opciones.mover-detalle-activo .tabs-opciones,
        .opciones.mover-detalle-activo .opciones-footer {
            display: none !important;
        }

        .opciones.mover-detalle-activo .opciones-contenido {
            border-radius: 12px;
            border-top: 1px solid #14b8a6;
            padding: 6px;
        }

        .opciones.mover-detalle-activo #panelVentas {
            display: grid !important;
            grid-template-rows: minmax(0, 1fr);
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        .opciones.mover-detalle-activo #moverDetalleLista {
            display: grid !important;
        }

        .opciones.mover-detalle-activo #moverDetalleLista {
            grid-template-rows: auto minmax(0, 1fr);
            overflow: hidden;
            align-content: stretch;
        }

        .mover-detalle-header {
            position: sticky;
            top: 0;
            z-index: 3;
            display: grid;
            gap: 4px;
            border: 1px solid #14b8a6;
            border-radius: 10px;
            background: linear-gradient(180deg, #ecfeff, #ccfbf1);
            padding: 6px;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
        }

        .mover-detalle-scroll {
            min-height: 0;
            overflow: auto;
            display: grid;
            align-content: start;
            gap: 8px;
            padding-right: 2px;
        }

        .mover-detalle-comanda-header {
            cursor: pointer;
            border-radius: 8px;
            padding: 6px 8px;
            user-select: none;
        }

        .mover-detalle-comanda-header.selected {
            background: rgba(2, 128, 144, 0.18);
            outline: 2px solid #028090;
        }

        .opciones.mover-detalle-activo #panelVentasLista {
            display: none !important;
        }

        .visor-mesa-header {
            position: sticky;
            top: 0;
            z-index: 4;
            border: 1px solid #0d9488;
            border-radius: 8px;
            background: linear-gradient(180deg, #f0fdfa, #ccfbf1);
            color: #0f172a;
            padding: 7px 9px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 13px;
            font-weight: 800;
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
        }

        .visor-mesa-header span:last-child {
            font-size: 12px;
            font-weight: 700;
            color: #0f766e;
            white-space: nowrap;
        }


        .usuarios-panel {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 6px;
            align-content: start;
        }

        .usuario-btn {
            appearance: none;
            border: 1px solid #bfd0e7;
            border-radius: 12px;
            background: linear-gradient(160deg, #ffffff, #eaf2ff);
            color: #223149;
            min-height: 64px;
            padding: 8px 10px;
            font-size: 15px;
            font-weight: 700;
            text-align: left;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 3px;
            letter-spacing: normal;
            position: relative;
        }

        .usuario-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(30, 58, 138, 0.12);
        }

        .usuario-btn.active {
            border-color: #028090;
            box-shadow: 0 0 0 2px rgba(2, 128, 144, 0.2) inset;
            background: linear-gradient(160deg, #ebfbf9, #dff8f4);
        }

        .usuario-btn.abierto {
            border-color: #f59e0b;
            background: linear-gradient(160deg, #fff7ed, #ffedd5);
            box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.28) inset;
        }

        .usuario-btn.bloqueada {
            border-color: #dc2626 !important;
            background: linear-gradient(160deg, #fee2e2, #fecaca) !important;
            box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.32) inset !important;
            color: #7f1d1d;
        }

        .usuario-btn.identificado {
            border-color: #f59e0b !important;
            background: linear-gradient(160deg, #fef9c3, #fde68a) !important;
            box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3) inset !important;
            color: #78350f;
        }

        .usuario-btn .usuario-meta {
            font-size: 11px;
            font-weight: 700;
            color: #475569;
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .usuario-btn .usuario-time {
            position: absolute;
            right: 8px;
            bottom: 6px;
            font-size: 11px;
            font-weight: 800;
            color: #334155;
            line-height: 1;
            white-space: nowrap;
        }

        .usuario-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .usuario-id {
            font-size: 12px;
            font-weight: 600;
            color: #4b6584;
        }

        .estado-operacion {
            text-align: center;
            padding: 6px;
            font-size: 12px;
            font-weight: 700;
            color: #355070;
            letter-spacing: normal;
        }

        .opciones-panel {
            width: 100%;
            display: none;
            grid-template-columns: 1fr;
            gap: 8px;
            align-content: start;
            overflow: auto;
        }

        .opciones-panel.visible {
            display: grid;
        }

        .mover-detalle-lista {
            display: none;
            min-height: 0;
            overflow: auto;
            align-content: start;
            gap: 8px;
            padding-right: 2px;
        }

        .comanda-card {
            border: 1px solid #b8c7dd;
            border-radius: 10px;
            background: #ffffff;
            padding: 8px;
            display: grid;
            gap: 6px;
        }

        .comanda-title {
            font-size: var(--comanda-font-size);
            font-weight: 800;
            color: #1f3b64;
            background: #eef1f4;
            border-bottom: 1px solid #cfd7e3;
        }

        .comanda-title-split {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 8px;
        }

        .comanda-title-split-left {
            justify-self: start;
        }

        .comanda-title-split-center {
            justify-self: center;
        }

        .comanda-title-split-right {
            justify-self: end;
            white-space: nowrap;
        }

        .comanda-orden-head {
            font-size: calc(var(--comanda-font-size) * 0.88);
            font-weight: 800;
            color: #0f766e;
            background: rgba(2, 128, 144, 0.12);
            border: 1px solid rgba(2, 128, 144, 0.28);
            border-radius: 6px;
            padding: 1px 6px;
            line-height: 1.2;
            text-align: center;
        }

        .comanda-linea {
            font-size: var(--comanda-font-size);
            font-weight: 700;
            color: #1f2937;
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            align-items: center;
            gap: 8px;
        }
        .comanda-linea.sin-unit {
            grid-template-columns: auto 1fr auto;
        }

        .comanda-linea.selectable {
            cursor: pointer;
        }

        .comanda-linea.selected {
            outline: 2px solid #028090;
            border-radius: 6px;
            background: rgba(2, 128, 144, 0.14);
        }

        .comanda-cant {
            min-width: 26px;
            text-align: right;
        }

        .comanda-desc {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .comanda-linea.expandida {
            align-items: start;
        }
        .comanda-linea.expandida .comanda-desc {
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            word-break: break-word;
        }

        .comanda-precio {
            min-width: 52px;
            text-align: right;
        }

        .comanda-unit {
            min-width: 56px;
            text-align: right;
            font-size: calc(var(--comanda-font-size) * 0.84);
            font-weight: 600;
            color: #64748b;
        }
        .comanda-linea.sin-unit .comanda-unit {
            display: none;
        }

        .comanda-total {
            min-width: 62px;
            text-align: right;
            font-size: var(--comanda-font-size);
            font-weight: 800;
            color: #0f172a;
        }

        .comanda-linea.ultimo-articulo {
            background: rgba(2, 128, 144, 0.12);
            border-radius: 6px;
            padding: 2px 4px;
        }

        .comanda-mod {
            font-size: calc(var(--comanda-font-size) * 0.92);
            font-weight: 600;
            color: #4b5563;
            display: grid;
            grid-template-columns: 26px 1fr auto;
            align-items: center;
            gap: 8px;
            line-height: 1.15;
            margin-top: -4px;
        }

        .comanda-linea + .comanda-mod {
            margin-top: -6px;
        }

        .comanda-mod + .comanda-mod {
            margin-top: -8px;
        }

        .comanda-mod.selectable {
            cursor: pointer;
        }

        .comanda-mod.selected {
            outline: 2px solid #028090;
            border-radius: 6px;
            background: rgba(2, 128, 144, 0.14);
            padding: 2px 6px;
        }

        .comanda-mod-prefix {
            text-align: right;
            opacity: 0.8;
        }

        .comanda-mod-desc {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .comanda-mod.expandida {
            align-items: start;
        }
        .comanda-mod.expandida .comanda-mod-desc {
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            word-break: break-word;
        }

        .comanda-mod-precio {
            min-width: 52px;
            text-align: right;
        }

        .ticket-panel {
            border: 1px dashed #9ca3af;
            border-radius: 10px;
            background: #fff;
            padding: 8px;
            font-size: 12px;
            font-family: "Consolas", "Courier New", monospace;
            white-space: pre-wrap;
        }

        #panelVentas {
            display: none;
            grid-template-rows: auto minmax(0, 1fr);
            gap: 3px;
            min-height: 0;
            height: 100%;
            align-content: stretch;
            overflow: hidden;
        }

        #panelVentas.visible {
            display: grid;
            height: 100%;
            min-height: 0;
            align-self: stretch;
        }

        .ventas-lista {
            grid-row: 2;
            min-height: 0;
            overflow: auto;
            display: grid;
            align-content: start;
            gap: 8px;
            padding-right: 2px;
            padding-bottom: 6px;
        }

        .ventas-lista.ventas-programas-externos {
            grid-template-columns: 1fr;
            align-content: start;
            gap: 10px;
            padding: 4px 2px 2px 0;
        }

        .ventas-prog-btn {
            width: 100%;
            border: 1px solid #8fb1de;
            border-radius: 12px;
            background: linear-gradient(160deg, #ffffff, #e8f1ff);
            color: #12355b;
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr);
            align-items: center;
            gap: 8px;
            min-height: 52px;
            padding: 8px 10px;
            text-align: left;
            cursor: pointer;
            font: inherit;
            font-weight: 800;
            transition: filter 0.16s ease, transform 0.16s ease;
        }

        .ventas-prog-btn:hover {
            filter: brightness(0.98);
            transform: translateY(-1px);
        }

        .ventas-prog-btn .icono-ms {
            font-size: 24px;
            color: #0f766e;
        }

        .ventas-prog-btn-title {
            display: block;
            font-size: 14px;
            line-height: 1.2;
        }

        .ventas-prog-btn-sub {
            display: block;
            margin-top: 2px;
            font-size: 11px;
            line-height: 1.2;
            opacity: 0.8;
            font-weight: 700;
        }

        .ventas-lista.solo-visual-fase2 {
            cursor: default;
        }

        .ventas-lista.solo-visual-fase2 .selectable,
        .ventas-lista.solo-visual-fase2 button,
        .ventas-lista.solo-visual-fase2 [role="button"] {
            pointer-events: none;
            cursor: default;
        }

        .ventas-resumen {
            grid-row: 1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--button-bg-strong);
            color: #ffffff;
            font-size: var(--comanda-font-size);
            font-weight: 900;
            padding: 4px 8px;
            min-height: 0;
            line-height: 1;
        }

        .ventas-resumen-lineas {
            display: block;
            justify-self: start;
            align-self: center;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ventas-resumen-total {
            justify-self: end;
            align-self: end;
            color: #ffffff;
            white-space: nowrap;
            font-weight: 900;
            line-height: 1;
        }

        body.modo-vertical.vertical-left-view .ventas-resumen {
            display: none !important;
        }

        body.fase1 .ventas-resumen {
            display: none !important;
        }

        .ventas-tools {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 6px;
            width: 100%;
            padding: 4px 0 0;
            border-top: 1px solid rgba(148, 163, 184, 0.35);
            background: linear-gradient(180deg, rgba(240, 247, 255, 0.35), rgba(240, 247, 255, 0.96));
        }


        .ventas-tools-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 100%;
            padding: 2px 4px;
            min-height: var(--ventas-tools-btn-h, 18px);
            border: 1px solid #9fb5d6;
            border-radius: 10px;
            background: linear-gradient(180deg, #ffffff, #e7efff);
            color: #1f3b64;
            font-size: 10px;
            font-weight: 800;
            cursor: pointer;
        }

        body.config-mode .ventas-tools-btn {
            min-height: 54px;
            height: 54px;
        }


        .ventas-tools-btn .icono-ms {
            font-size: 18px;
        }

        body.config-mode #btnCambiarCantidad {
            position: relative;
        }

        body.config-mode #btnCambiarCantidad > * {
            display: none !important;
        }

        body.config-mode #btnCambiarCantidad::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 22px;
            height: 22px;
            transform: translate(-50%, -50%);
            border: 2px solid currentColor;
            border-radius: 999px;
            box-sizing: border-box;
        }

        body.config-mode #btnCambiarCantidad::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 12px;
            height: 12px;
            transform: translate(-50%, -50%);
            background:
                linear-gradient(currentColor, currentColor) center/2px 12px no-repeat,
                linear-gradient(currentColor, currentColor) center/12px 2px no-repeat;
        }

        .ventas-tools-btn.active {
            background: linear-gradient(180deg, #d1fae5, #a7f3d0);
            border-color: #10b981;
            color: #065f46;
        }

        .ventas-tools-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
            filter: grayscale(0.25);
        }

        .opciones-footer {
            width: 100%;
            padding-top: 4px;
            position: relative;
            z-index: 12;
            pointer-events: auto;
        }

        #panelVentasTools,
        #panelVentasTools .ventas-tools-btn {
            pointer-events: auto !important;
        }

        .config-panel {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1px;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        .config-btn {
            appearance: none;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--button-bg);
            color: var(--button-text);
            min-height: 38px;
            padding: 5px 8px;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.02em;
            cursor: pointer;
            text-align: center;
        }

        .config-btn.toggle-on {
            background: linear-gradient(180deg, #fff7ed, #fed7aa);
            border-color: #f59e0b;
            color: #92400e;
        }

        .config-workbench {
            display: none;
            grid-template-rows: auto 1fr;
            gap: 1px;
            min-height: 0;
        }

        .config-workbench.visible {
            display: grid;
            height: 100%;
        }

        .config-tabs {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 2px;
            align-items: end;
            border-bottom: 1px solid var(--line);
            padding: 0 1px;
        }

        .config-zona-selector {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 0;
            border-bottom: 1px solid var(--line);
            padding: 0 0 2px;
        }

        .config-tab-btn {
            appearance: none;
            border: 1px solid var(--line);
            border-radius: 10px 10px 0 0;
            border-bottom-color: var(--line);
            background: linear-gradient(180deg, color-mix(in srgb, var(--button-bg) 92%, #ffffff 8%), var(--button-bg));
            color: var(--button-text);
            min-height: 34px;
            font-size: 0;
            font-weight: 800;
            cursor: pointer;
            min-width: 0;
            margin-bottom: -1px;
            padding: 3px 0 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .config-tab-btn .icono-ms {
            font-size: 20px;
            color: #0f172a;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
        }

        .config-tab-btn.active {
            border-color: var(--accent);
            border-bottom-color: transparent;
            box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 85%, transparent);
            background: color-mix(in srgb, var(--accent) 10%, #ffffff);
            color: var(--button-text);
            position: relative;
            z-index: 2;
        }

        .config-tab-btn.active .icono-ms {
            color: #0f766e;
        }

        body.theme-iphone .config-tab-btn .icono-ms {
            color: #e5e7eb;
            text-shadow: none;
        }

        body.theme-iphone .config-tab-btn.active .icono-ms {
            color: #67e8f9;
        }

        .config-tab-panel {
            display: none;
            border: 1px solid #b8c7dd;
            border-radius: 8px;
            background: #ffffff;
            padding: 3px;
            font-size: 13px;
            font-weight: 700;
            color: #1f3b64;
            min-height: 84px;
        }

        .config-tab-panel.visible {
            display: block;
        }

        .config-form {
            display: grid;
            gap: 2px;
        }

        .config-row {
            display: grid;
            gap: 1px;
        }

        .config-label {
            font-size: 12px;
            font-weight: 800;
            color: #1f3b64;
        }

        .config-input,
        .config-select {
            width: 100%;
            min-height: 30px;
            border: 1px solid #b8c7dd;
            border-radius: 8px;
            padding: 4px 6px;
            font-size: 13px;
            font-weight: 600;
            color: #1f2937;
            background: #fff;
        }

        #configTabArticulos .config-input.cfg-locked,
        #configTabArticulos .config-select.cfg-locked,
        #configTabArticulos .config-btn.cfg-locked {
            opacity: 0.4 !important;
            filter: grayscale(0.9) saturate(0.3);
            background: #d1d5db !important;
            color: #4b5563 !important;
            border-color: #9ca3af !important;
            box-shadow: none !important;
            cursor: not-allowed !important;
        }

        #configTabMesas .config-input.cfg-locked,
        #configTabMesas .config-select.cfg-locked,
        #configTabMesas .config-btn.cfg-locked {
            opacity: 0.4 !important;
            filter: grayscale(0.9) saturate(0.3);
            background: #d1d5db !important;
            color: #4b5563 !important;
            border-color: #9ca3af !important;
            box-shadow: none !important;
            cursor: not-allowed !important;
        }

        .config-range {
            width: 100%;
            min-height: 30px;
        }

        .config-range-value {
            font-size: 12px;
            font-weight: 800;
            color: #0f766e;
            text-align: right;
        }

        .config-dims-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px;
            align-items: end;
        }

        .config-dim-item {
            display: grid;
            gap: 2px;
        }

        .img-modal {
            position: fixed;
            inset: 0;
            background: rgba(17, 24, 39, 0.42);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 200;
            padding: 12px;
        }

        .img-modal.visible {
            display: flex;
        }

        .img-modal-card {
            width: min(980px, 96vw);
            max-height: 90vh;
            background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.95));
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.65);
            box-shadow: 0 24px 48px rgba(15, 23, 42, 0.32);
            display: grid;
            grid-template-rows: auto 1fr auto;
            overflow: hidden;
        }

        .img-modal-head {
            padding: 18px 16px 8px;
            font-size: 20px;
            font-weight: 700;
            color: #1e293b;
            border-bottom: none;
            text-align: center;
            letter-spacing: 0.01em;
        }

        .img-modal-grid {
            padding: 10px;
            overflow: auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 8px;
            align-content: start;
        }

        .img-opt {
            border: 2px solid #cbd5e1;
            border-radius: 10px;
            background: #f8fafc;
            overflow: hidden;
            cursor: pointer;
            padding: 0;
            min-height: 120px;
        }

        .img-opt img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            display: block;
            background: #e2e8f0;
        }

        .img-opt.active {
            border-color: #0d9488;
            box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25) inset;
        }

        .img-modal-foot {
            padding: 0 16px 16px;
            border-top: none;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .img-modal-foot .config-btn {
            min-height: 46px;
            border-radius: 14px;
            border: none;
            background: linear-gradient(180deg, #0ea5e9, #0284c7);
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.01em;
            box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
            padding: 0 16px;
        }

        #impresorasModal {
            z-index: 230;
        }

        #impresorasModal .img-modal-card {
            width: min(1120px, 98vw);
            height: min(760px, 92vh);
            max-height: 92vh;
        }

        .impresoras-modal-body {
            min-height: 0;
            overflow: hidden;
            padding: 0 12px 12px;
        }

        .impresoras-modal-frame {
            width: 100%;
            height: 100%;
            border: 0;
            border-radius: 12px;
            background: #ffffff;
            display: block;
        }

        .salir-tools {
            display: grid;
            gap: 10px;
            align-content: start;
            padding: 8px;
        }

        .btn-terminales {
            min-height: 74px;
            border-radius: 18px;
            border: 1px solid var(--line);
            background: var(--button-bg);
            color: var(--button-text);
            display: grid;
            grid-template-columns: 44px 1fr;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            text-align: left;
            font-weight: 800;
            font-size: 14px;
        }

        .btn-terminales .icono-ms {
            font-size: 30px;
            color: #0f766e;
        }

        .bloq-list {
            display: grid;
            gap: 8px;
            max-height: min(52vh, 430px);
            overflow: auto;
            padding: 4px 6px;
        }

        .bloq-item {
            display: grid;
            grid-template-columns: 26px 1fr;
            gap: 10px;
            align-items: start;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
            padding: 10px 12px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
        }

        .bloq-item-main {
            font-size: 14px;
            font-weight: 700;
            color: #0f172a;
        }

        .bloq-item-sub {
            font-size: 12px;
            color: #475569;
            margin-top: 2px;
        }

        .bloq-check {
            accent-color: #0ea5e9;
            width: 18px;
            height: 18px;
            margin-top: 2px;
        }

        #mesaBloqueadaModal .img-modal-card,
        #inactividadModal .img-modal-card,
        #imgLoadingModal .img-modal-card,
        #genLoadingModal .img-modal-card,
        #genPreguntaModal .img-modal-card,
        #esperaProcesoModal .img-modal-card,
        #importProgressModal .img-modal-card,
        #visualConfirmModal .img-modal-card {
            width: min(440px, 92vw);
        }

        #importProgressModal .img-modal-card {
            width: min(760px, 94vw);
            max-height: 88vh;
            background: linear-gradient(180deg, color-mix(in srgb, var(--button-bg) 70%, #ffffff 30%), color-mix(in srgb, var(--card-soft) 88%, #ffffff 12%));
            border-color: color-mix(in srgb, var(--line) 85%, #ffffff 15%);
        }
        #visualPromptModal .img-modal-card {
            width: min(680px, 94vw);
            max-height: 82vh;
        }
        .visual-prompt-input-wrap {
            padding: 0 16px 12px;
        }
        .visual-prompt-input {
            width: 100%;
            box-sizing: border-box;
            height: clamp(52px, 7.2vh, 86px) !important;
            border-radius: 14px;
            border: 1px solid #cbd5e1;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
            color: #0f172a;
            font-size: clamp(20px, 3.1vh, 34px) !important;
            font-weight: 700;
            padding: 0 16px;
            outline: none;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
        }
        .visual-prompt-input:focus {
            border-color: #0ea5e9;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18), inset 0 1px 2px rgba(15, 23, 42, 0.06);
        }
        .visual-prompt-pad {
            display: none;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            padding: 2px 16px 14px;
        }
        .visual-prompt-pad.visible {
            display: grid;
        }
        .visual-prompt-pad .config-btn {
            min-height: clamp(52px, 7.6vh, 74px);
            border-radius: 18px;
            border: 1px solid color-mix(in srgb, var(--line) 72%, #ffffff 28%);
            background: linear-gradient(180deg, #ffffff, #eaf2ff);
            color: #0f172a;
            font-size: clamp(24px, 3.8vh, 34px);
            font-weight: 900;
            letter-spacing: 0.01em;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
        }
        .visual-prompt-pad .config-btn[data-act="clear"],
        .visual-prompt-pad .config-btn[data-act="back"] {
            background: linear-gradient(180deg, #fff7ed, #fed7aa);
            color: #7c2d12;
            border-color: #fdba74;
        }
        .visual-prompt-pad .config-btn[data-act="ok"] {
            background: linear-gradient(180deg, var(--brand), var(--brand-2));
            color: #ffffff;
            border-color: color-mix(in srgb, var(--brand-2) 85%, #ffffff 15%);
            box-shadow: 0 10px 22px rgba(2, 132, 199, 0.35);
            font-size: clamp(20px, 3.1vh, 30px);
        }
        .visual-prompt-pad .config-btn:active {
            transform: translateY(1px) scale(0.99);
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
        }
        #importProgressModal .img-modal-head {
            color: var(--ink);
        }
        #importProgressModal .import-modal-body {
            padding: 8px 12px 12px;
            display: grid;
            gap: 8px;
            min-height: 0;
        }
        #importProgressModal .import-meta {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            font-size: 12px;
        }
        #importProgressModal .import-meta b {
            display: block;
            font-size: 10px;
            opacity: 0.7;
            margin-bottom: 2px;
        }
        #importProgressModal .import-bar-wrap {
            height: 10px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--line) 65%, #cbd5e1 35%);
            overflow: hidden;
        }
        #importProgressModal .import-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--brand), var(--brand-2));
            transition: width .2s ease;
        }
        #importProgressModal .import-log {
            border: 1px solid color-mix(in srgb, var(--line) 85%, #ffffff 15%);
            border-radius: 10px;
            background: color-mix(in srgb, #ffffff 85%, transparent 15%);
            max-height: 34vh;
            min-height: 120px;
            overflow: auto;
            padding: 6px;
            font-size: 12px;
            line-height: 1.25;
        }
        #importProgressModal .import-log-line {
            margin: 0 0 3px 0;
        }

        #terminalesBloqueadosModal .img-modal-card {
            width: min(560px, 94vw);
            max-height: 86vh;
            border-radius: 26px;
        }

        #terminalesBloqueadosModal .img-modal-head {
            padding-top: 16px;
            font-size: 21px;
        }

        #terminalesBloqueadosModal .img-modal-foot {
            padding-top: 8px;
            justify-content: center;
            gap: 10px;
        }

        #terminalesBloqueadosModal .img-modal-foot .config-btn {
            min-width: 170px;
        }

        #asistenteIaModal .img-modal-card {
            width: min(620px, 94vw);
            border-radius: 28px;
            border: 1px solid #dbeafe;
            background: linear-gradient(165deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%);
            box-shadow: 0 24px 60px rgba(2, 8, 23, 0.32);
            overflow: hidden;
        }

        #asistenteIaModal .img-modal-head {
            font-size: 24px;
            font-weight: 900;
            color: #0f172a;
            letter-spacing: 0.2px;
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            border-bottom: 1px solid #bfdbfe;
            padding: 16px 18px;
        }

        #asistenteIaModal .img-modal-foot {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            padding: 12px 16px 18px;
        }

        #asistenteIaModal .img-modal-foot .config-btn {
            min-height: 46px;
            border-radius: 14px;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0.2px;
        }

        .bases-modal-card {
            width: min(680px, 95vw);
            max-height: 88vh;
        }

        .bases-modal-body {
            display: grid;
            grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
            gap: 10px;
            min-height: 280px;
            max-height: 62vh;
            overflow: hidden;
        }

        .bases-form {
            border: 1px solid #dbe5f4;
            border-radius: 12px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 8px;
            display: grid;
            gap: 8px;
            align-content: start;
        }

        .bases-list {
            border: 1px solid #dbe5f4;
            border-radius: 12px;
            background: #f8fbff;
            padding: 6px;
            overflow: auto;
            display: grid;
            gap: 6px;
        }

        .bases-item {
            border: 1px solid #d3e0f3;
            border-radius: 10px;
            background: #ffffff;
            padding: 8px 10px;
            cursor: pointer;
            display: grid;
            gap: 2px;
        }

        .bases-item.active {
            border-color: #028090;
            box-shadow: inset 0 0 0 2px rgba(2, 128, 144, 0.22);
            background: #effcf9;
        }

        .bases-item-main {
            font-size: 14px;
            font-weight: 800;
            color: #1f2937;
        }

        .bases-item-sub {
            font-size: 12px;
            color: #475569;
        }

        #salidaFase3Modal .img-modal-card {
            width: min(540px, 94vw);
            border-radius: 28px;
            border: 1px solid #dbeafe;
            background: linear-gradient(165deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%);
            box-shadow: 0 24px 60px rgba(2, 8, 23, 0.32);
            overflow: hidden;
        }

        #salidaFase3Modal .img-modal-head {
            font-size: 24px;
            font-weight: 900;
            color: #0f172a;
            letter-spacing: 0.2px;
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            border-bottom: 1px solid #bfdbfe;
            padding: 16px 18px;
        }

        #salidaFase3Modal .modal-text {
            font-size: 16px;
            font-weight: 600;
            color: #334155;
            text-align: center;
            padding: 18px 16px 6px;
        }

        #salidaFase3Modal .img-modal-foot {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 12px 16px 18px;
        }

        #salidaFase3Modal .img-modal-foot .config-btn {
            min-height: 46px;
            border-radius: 14px;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0.2px;
        }

        #salidaFase3Guardar {
            background: linear-gradient(140deg, #22c55e, #16a34a) !important;
            color: #ffffff !important;
            border-color: #15803d !important;
        }

        #salidaFase3Anular {
            background: linear-gradient(140deg, #ef4444, #dc2626) !important;
            color: #ffffff !important;
            border-color: #b91c1c !important;
        }

        .asistente-ia-body {
            display: grid;
            gap: 10px;
            padding: 14px 16px 4px;
        }

        .asistente-ia-input-row {
            display: grid;
            grid-template-columns: minmax(160px, 1fr) 46px;
            gap: 8px;
        }

        .asistente-ia-input-row textarea {
            min-height: 94px;
            resize: vertical;
            border: 1px solid #c7d2fe;
            border-radius: 12px;
            background: #ffffff;
            padding: 10px 12px;
            font-size: 15px;
            color: #0f172a;
            outline: none;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
        }

        .asistente-ia-input-row textarea:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), inset 0 1px 2px rgba(15, 23, 42, 0.05);
        }

        .asistente-ia-result {
            min-height: 56px;
            border: 1px solid #dbeafe;
            border-radius: 12px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 10px 12px;
            white-space: pre-wrap;
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
        }

        body.theme-iphone .asistente-ia-result {
            background: #1c1c1e;
            border-color: #3a3a3c;
            color: #fff;
        }

        .gen-art-list {
            max-height: min(62vh, 520px);
            overflow: auto;
            display: grid;
            gap: 6px;
            padding: 6px 0;
        }

        .gen-art-item {
            display: grid;
            grid-template-columns: 24px 52px minmax(0, 1fr) 88px;
            align-items: center;
            gap: 8px;
            border: 1px solid #d9e2ef;
            border-radius: 10px;
            background: #fff;
            padding: 6px 8px;
        }

        .gen-art-item img {
            width: 52px;
            height: 52px;
            object-fit: cover;
            border-radius: 8px;
            background: #f1f5f9;
            border: 1px solid #dbe5f3;
        }

        .gen-art-name {
            font-size: 13px;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.25;
        }

        .gen-art-meta {
            font-size: 11px;
            color: #64748b;
            line-height: 1.2;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .gen-art-price {
            width: 100%;
            min-width: 0;
            height: 34px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 0 8px;
            text-align: right;
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            background: #f8fafc;
        }

        .modal-text {
            padding: 6px 20px 18px;
            font-size: 16px;
            font-weight: 500;
            color: #334155;
            line-height: 1.35;
            text-align: center;
        }

        .loading-wrap {
            display: grid;
            place-items: center;
            gap: 10px;
            padding: 16px 10px 18px;
        }

        .loading-spinner {
            width: 44px;
            height: 44px;
            border: 4px solid #cbd5e1;
            border-top-color: #0d9488;
            border-radius: 50%;
            animation: spin 0.9s linear infinite;
        }

        .inact-progress {
            width: 100%;
            height: 12px;
            border: 1px solid #b8c7dd;
            border-radius: 999px;
            overflow: hidden;
            background: #e2e8f0;
            margin: 2px 0 4px 0;
        }

        .inact-progress-bar {
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, #f59e0b, #ef4444);
            transition: width 0.12s linear;
        }

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

        .config-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 4px;
            width: 100%;
        }

        .config-actions .config-btn {
            width: 100%;
            min-width: 0;
            height: 38px;
            min-height: 38px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

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

        .config-actions-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .config-actions-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .config-actions-1 {
            grid-template-columns: minmax(0, 1fr);
        }

        #panelConfiguracion {
            padding: 0;
            gap: 0;
            min-height: 0;
        }

        .config-actions-scroll {
            width: 100%;
            min-height: 0;
            flex: 1 1 auto;
            overflow: hidden;
            display: grid;
            grid-template-rows: minmax(0, 1fr);
            gap: 1px;
            padding-right: 0;
        }

        .config-home-wrapper {
            display: grid;
            grid-template-rows: minmax(0, 1fr);
            gap: 1px;
            width: 100%;
            min-width: 0;
            min-height: 0;
        }

        .config-home-tabs {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0;
            align-items: end;
            border-bottom: 1px solid var(--line);
            padding: 0;
        }

        .config-home-tab-btn {
            min-height: 34px;
            border-radius: 10px 10px 0 0;
            border: 1px solid var(--line);
            border-bottom-color: var(--line);
            background: linear-gradient(180deg, color-mix(in srgb, var(--button-bg) 92%, #ffffff 8%), var(--button-bg));
            color: var(--button-text);
            font-weight: 700;
            font-size: 12px;
            margin-bottom: -1px;
            padding: 3px 6px 4px;
        }

        .config-home-tab-btn.active {
            border-color: var(--accent);
            border-bottom-color: transparent;
            box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 85%, transparent);
            background: color-mix(in srgb, var(--accent) 10%, #ffffff);
            position: relative;
            z-index: 2;
        }

        /* Indicador visual claro: en modo configuracion resalta la pestana Herramientas/Botones */
        body.config-mode .config-home-tab-btn[data-config-home-tab="visual"] {
            border-color: #0f766e !important;
            background: linear-gradient(180deg, #99f6e4, #5eead4) !important;
            color: #134e4a !important;
            box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.22);
        }

        body.config-mode .config-home-tab-btn[data-config-home-tab="visual"].active {
            border-color: #0f766e !important;
            border-bottom-color: transparent !important;
            background: linear-gradient(180deg, #5eead4, #2dd4bf) !important;
            color: #042f2e !important;
            box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.75);
        }

        .config-home-tab-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .config-home-tab-panel {
            display: none;
            min-height: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            min-width: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .config-home-tab-panel.visible {
            display: block;
        }

        .config-home-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1px;
            margin-top: 0;
            width: 100%;
            min-width: 0;
        }

        #configHomeTabVisual .config-workbench {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            min-height: 0;
        }

        #configHomeTabVisual .config-zona-selector {
            position: sticky;
            top: 0;
            z-index: 3;
            background: var(--panel-bg);
        }

        #configHomeTabVisual .config-workbench > div:last-child {
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #panelConfiguracion .config-home-actions .config-btn {
            width: 100%;
            max-width: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            text-align: center;
            padding: 6px 10px;
            box-sizing: border-box;
        }

        #configHomeTabAvanzado.visible .config-home-actions {
            width: 100%;
            min-width: 0;
        }

        #configHomeTabAvanzado.visible .config-home-actions .config-btn {
            width: 100%;
            max-width: none;
        }

        #configHomeTabAvanzado .config-home-actions .config-btn {
            min-height: 52px;
            height: auto;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        #configHomeTabAvanzado .config-home-actions .config-btn .config-btn-desc {
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
            line-height: 1.15;
            text-align: left;
            padding: 0 8px 0 28px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        #panelConfiguracion .config-home-actions .config-btn .icono-ms {
            position: absolute;
            left: 10px;
            font-size: 20px;
            line-height: 1;
        }

        #panelConfiguracion .config-home-actions .config-btn .config-btn-desc {
            min-width: 0;
            display: block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            padding: 0 20px;
        }

        .config-import-progress {
            border: 1px solid var(--line);
            border-radius: 10px;
            background: color-mix(in srgb, var(--panel-bg) 92%, #ffffff 8%);
            padding: 6px;
            display: grid;
            grid-template-rows: auto auto auto 1fr;
            gap: 6px;
            margin: 0;
            min-height: 0;
            height: 100%;
            width: 100%;
        }

        .config-import-progress .title {
            font-weight: 700;
            font-size: 12px;
        }

        .config-import-progress .meta {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 6px;
            font-size: 11px;
        }

        .config-import-progress .meta b {
            display: block;
            opacity: 0.75;
            font-size: 10px;
            margin-bottom: 1px;
        }

        .config-import-progress .bar-wrap {
            height: 8px;
            border-radius: 999px;
            background: #d6e6f8;
            overflow: hidden;
        }

        .config-import-progress .bar {
            height: 100%;
            width: 0%;
            background: var(--accent);
            transition: width .2s ease;
        }

        .config-import-progress .log {
            max-height: none;
            min-height: 0;
            height: 100%;
            overflow: auto;
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 4px;
            background: color-mix(in srgb, var(--panel-bg) 96%, #ffffff 4%);
            font-size: 11px;
            line-height: 1.25;
        }

        .config-import-progress .log-line {
            margin: 0 0 3px 0;
        }

        #configHomeTabVisual .config-workbench {
            margin-top: 0;
        }

        .config-btn-danger {
            background: linear-gradient(180deg, #fee2e2, #fecaca);
            border-color: #ef4444;
            color: #7f1d1d;
        }

        .mesas-panel {
            width: 100%;
            height: 100%;
            display: none;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 6px;
            align-content: start;
            min-height: 0;
            position: relative;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        body:not(.tab-ventas-activa):not(.config-mode) .mesas-panel {
            display: none !important;
        }

        .mesas-panel.plano-fondo-fijo {
            background-size: var(--plano-bg-width, 100%) var(--plano-bg-height, 100%) !important;
            background-position: left top !important;
        }

        .fase2-actions {
            display: none;
            position: absolute;
            left: var(--cuerpo-pad);
            right: 0;
            top: auto;
            bottom: var(--cuerpo-pad);
            z-index: 35;
            pointer-events: none;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0;
        }

        body.fase2 .fase2-actions {
            display: block;
        }

        .fase2-actions-tab {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 34px;
            height: 54px;
            border: 1px solid var(--brand-2);
            border-radius: 12px 12px 0 0;
            background: var(--button-active-bg);
            color: var(--button-text);
            cursor: pointer;
            pointer-events: auto;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow);
            font: inherit;
            padding: 8px 0;
            transition: right 0.24s ease, box-shadow 0.24s ease, border-radius 0.24s ease;
        }

        .fase2-actions-tab .icono-ms {
            font-size: 24px;
            color: var(--button-text);
        }

        .fase2-actions:not(.open) .fase2-actions-tab {
            right: 0;
            border-radius: 12px 0 0 12px;
            box-shadow: var(--shadow);
        }

        .fase2-actions-row {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 6px;
            width: 100%;
            height: 54px;
            max-width: 34px;
            padding: 6px 44px 6px 0;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--window-bg);
            box-shadow: var(--shadow);
            pointer-events: auto;
            opacity: 0;
            overflow: hidden;
            margin-left: auto;
            transform: scaleX(0.08);
            transform-origin: right center;
            transition:
                max-width 0.28s ease,
                opacity 0.18s ease,
                transform 0.26s ease,
                padding-left 0.28s ease;
        }

        .fase2-actions.open .fase2-actions-row {
            max-width: 100%;
            padding-left: 6px;
            opacity: 1;
            transform: scaleX(1);
        }

        .fase2-actions.open .fase2-actions-tab {
            right: 0;
            height: 54px;
            border-radius: 12px;
        }

        .fase2-actions.fixed-open .fase2-actions-tab {
            display: none;
        }

        .fase2-actions.fixed-open .fase2-actions-row {
            padding-right: 6px;
        }

        body.modo-vertical.fase2.fase2-vertical-expanded .fase2-actions,
        body.modo-vertical.vertical-right-view .fase2-actions {
            display: none !important;
        }

        .fase2-action-btn {
            min-width: 0;
            min-height: 42px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--button-bg);
            color: var(--button-text);
            font: inherit;
            font-size: 15px;
            cursor: pointer;
            padding: 4px 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .fase2-action-btn .icono-ms {
            font-size: 22px;
            flex: 0 0 auto;
        }

        .fase2-actions.icon-only .fase2-action-btn {
            gap: 0;
            justify-content: center;
            padding-left: 4px;
            padding-right: 4px;
        }

        .fase2-actions.icon-only .fase2-action-btn .icono-ms {
            font-size: 24px;
        }

        .fase2-actions.icon-only .fase2-action-btn span:not(.icono-ms) {
            display: none;
        }

        .fase2-action-btn.active {
            background: var(--button-active-bg);
            border-color: var(--brand-2);
            color: var(--button-text);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-2) 30%, transparent) inset;
        }

        .fase2-action-btn:disabled {
            opacity: 0.55;
            filter: grayscale(0.35);
            background: var(--button-bg) !important;
            border-color: var(--line) !important;
            color: var(--button-text) !important;
            box-shadow: none !important;
            cursor: not-allowed;
        }

        .fase3-actions {
            display: none;
            position: absolute;
            left: var(--cuerpo-pad);
            right: var(--cuerpo-pad);
            bottom: var(--cuerpo-pad);
            z-index: 34;
            pointer-events: auto;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--window-bg);
            box-shadow: var(--shadow);
            padding: 6px;
        }

        body.fase3.tab-ventas-activa:not(.config-mode) .fase3-actions {
            display: block;
        }

        .fase3-actions-row {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 6px;
            width: 100%;
            height: 54px;
        }

        .fase3-action-btn {
            min-width: 0;
            min-height: 42px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--button-bg);
            color: var(--button-text);
            font: inherit;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            padding: 4px 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .fase3-action-btn .icono-ms {
            font-size: 20px;
            flex: 0 0 auto;
        }

        .fase3-actions.icon-only .fase3-action-btn {
            gap: 0;
            justify-content: center;
            padding-left: 4px;
            padding-right: 4px;
        }

        .fase3-actions.icon-only .fase3-action-btn .icono-ms {
            font-size: 24px;
        }

        .fase3-actions.icon-only .fase3-action-btn span:not(.icono-ms) {
            display: none;
        }

        .fase3-action-btn.active {
            background: linear-gradient(180deg, #ccfbf1, #99f6e4);
            border-color: #14b8a6;
            color: #0f766e;
            box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.22) inset;
        }

        .fase3-orden-menu {
            position: absolute;
            display: none;
            grid-auto-rows: minmax(38px, auto);
            gap: 4px;
            min-width: 170px;
            max-width: min(260px, calc(100vw - 24px));
            max-height: 48vh;
            overflow: auto;
            padding: 6px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: var(--window-bg);
            box-shadow: var(--shadow);
            z-index: 60;
        }

        .fase3-orden-menu.visible {
            display: grid;
        }

        .fase3-orden-btn {
            min-height: 38px;
            border: 1px solid var(--line);
            border-radius: 9px;
            background: var(--button-bg);
            color: var(--button-text);
            font: inherit;
            font-size: 13px;
            font-weight: 800;
            padding: 6px 8px;
            text-align: left;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fase3-orden-menu.size-sync {
            width: var(--fase3-orden-btn-w, 170px) !important;
            min-width: var(--fase3-orden-btn-w, 170px) !important;
            max-width: var(--fase3-orden-btn-w, 170px) !important;
        }

        .fase3-orden-menu.size-sync .fase3-orden-btn {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            min-height: var(--fase3-orden-btn-h, 38px);
            height: var(--fase3-orden-btn-h, 38px);
        }

        .fase3-orden-menu.expand-text {
            width: auto;
            min-width: 220px;
            max-width: min(420px, calc(100vw - 24px));
        }

        .fase3-orden-menu.expand-text .fase3-orden-btn {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            height: auto;
            min-height: 38px;
            line-height: 1.15;
        }

        .fase3-orden-btn:hover {
            background: var(--button-active-bg);
            border-color: var(--brand-2);
        }

        .fase3-comensal-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 16px;
            box-sizing: border-box;
        }

        .fase3-comensal-card {
            width: min(560px, 100%);
            max-width: 100%;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--window-bg);
            box-shadow: var(--shadow);
            padding: 14px;
            display: grid;
            gap: 10px;
        }

        .fase3-comensal-title {
            font-size: 20px;
            font-weight: 900;
            color: var(--ink);
        }

        .fase3-comensal-label {
            font-size: 14px;
            font-weight: 800;
            color: var(--muted);
        }

        .fase3-comensal-input {
            width: 100%;
            min-height: 46px;
            border: 2px solid var(--brand-2);
            border-radius: 10px;
            background: #fff;
            color: var(--ink);
            font-size: 20px;
            font-weight: 800;
            padding: 8px 10px;
            box-sizing: border-box;
        }

        .fase3-comensal-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 6px;
        }

        .fase2-comandas-panel,
        .fase2-mesas-pendientes-panel {
            display: none;
            position: absolute;
            left: var(--cuerpo-pad);
            right: var(--cuerpo-pad);
            top: var(--cuerpo-pad);
            bottom: var(--cuerpo-pad);
            z-index: 20;
            width: auto;
            height: auto;
            min-height: 0;
            overflow: hidden;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            padding: 2px;
            letter-spacing: 0;
            background: transparent;
        }

        .fase2-comandas-panel.visible {
            display: flex;
        }

        .fase2-mesas-pendientes-panel.visible {
            display: flex;
        }

        body.fase2-comandas-activa .mesas-panel,
        body.fase2-mesas-pendientes-activa .mesas-panel {
            display: none !important;
            width: 0 !important;
            max-width: 0 !important;
            flex: 0 0 0 !important;
            overflow: hidden !important;
        }

        body.fase2-comandas-activa .fase2-comandas-panel.visible,
        body.fase2-mesas-pendientes-activa .fase2-mesas-pendientes-panel.visible {
            width: auto;
            max-width: none;
            flex: none;
        }

        .fase2-comandas-list,
        .fase2-mesas-pendientes-list {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 0 2px 70px 0;
        }

        .fase2-comandas-toolbar,
        .fase2-mesas-pendientes-toolbar {
            flex: 0 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 48px minmax(130px, 210px) 48px;
            gap: 8px;
            align-items: center;
            padding: 2px;
        }

        .fase2-comandas-search,
        .fase2-comandas-select,
        .fase2-mesas-pendientes-search,
        .fase2-mesas-pendientes-select {
            width: 100%;
            min-height: 44px;
            border: 2px solid var(--brand-2);
            border-radius: 10px;
            padding: 6px 10px;
            background: #ffffff;
            color: var(--ink);
            font-size: clamp(15px, 1.4vw, 20px);
            font-weight: 800;
            letter-spacing: 0;
        }

        .fase2-comandas-clear,
        .fase2-comandas-line-search,
        .fase2-mesas-pendientes-clear,
        .fase2-panel-close {
            min-width: 0;
            min-height: 44px;
            border: 2px solid var(--brand-2);
            border-radius: 10px;
            background: var(--button-bg);
            color: var(--button-text-dark);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
        }

        .fase2-comandas-clear .icono-ms,
        .fase2-comandas-line-search .icono-ms,
        .fase2-mesas-pendientes-clear .icono-ms,
        .fase2-panel-close .icono-ms {
            font-size: 24px;
        }

        .fase2-panel-close {
            border-color: #ef4444;
            background: linear-gradient(180deg, #ef4444, #dc2626);
            color: #ffffff;
        }

        .fase2-comandas-line-search {
            min-height: 26px;
            width: 30px;
            border-width: 1px;
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.84);
        }

        .fase2-comandas-line-search .icono-ms {
            font-size: 18px;
        }

        .fase2-mesa-pendiente-card {
            border: 1px solid var(--line);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
            flex: 0 0 auto;
            cursor: pointer;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 6px;
            align-items: center;
            padding: 5px 8px;
            color: var(--button-text-dark);
            font-weight: 900;
            letter-spacing: 0;
            min-height: 48px;
            position: relative;
        }

        .fase2-mesa-pendiente-card.estado-0 {
            border-color: var(--mesa-estado-0-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-0-bg-a), var(--mesa-estado-0-bg-b)) !important;
            color: var(--mesa-estado-0-text) !important;
        }

        .fase2-mesa-pendiente-card.estado-1 {
            border-color: var(--mesa-estado-1-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-1-bg-a), var(--mesa-estado-1-bg-b)) !important;
            color: var(--mesa-estado-1-text) !important;
        }

        .fase2-mesa-pendiente-card.estado-2 {
            border-color: var(--mesa-estado-2-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-2-bg-a), var(--mesa-estado-2-bg-b)) !important;
            color: var(--mesa-estado-2-text) !important;
        }

        .fase2-mesa-pendiente-card.estado-3 {
            border-color: var(--mesa-estado-3-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-3-bg-a), var(--mesa-estado-3-bg-b)) !important;
            color: var(--mesa-estado-3-text) !important;
        }

        .fase2-mesa-pendiente-card.estado-4 {
            border-color: var(--mesa-estado-4-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-4-bg-a), var(--mesa-estado-4-bg-b)) !important;
            color: var(--mesa-estado-4-text) !important;
        }

        .fase2-mesa-pendiente-card.selected {
            border-color: #0f766e !important;
            box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.22), 0 8px 18px rgba(15, 23, 42, 0.16);
        }

        .fase2-mesa-pendiente-card.selected .fase2-mesa-pendiente-title::before {
            content: "✓ ";
            color: #0f766e;
            font-weight: 1000;
        }

        .fase2-mesa-pendiente-main {
            display: grid;
            gap: 2px;
            min-width: 0;
            max-width: min(44vw, 520px);
            justify-self: start;
            position: relative;
            z-index: 2;
        }

        .fase2-mesa-pendiente-usuario {
            font-size: clamp(13px, 1.15vw, 17px);
            color: currentColor;
            font-weight: 1000;
            line-height: 1.1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .fase2-mesa-pendiente-info {
            font-size: clamp(10px, 0.95vw, 13px);
            color: currentColor;
            font-weight: 800;
            opacity: 0.78;
            line-height: 1.15;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .fase2-mesa-pendiente-nombre {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            transform: translate(-50%, -50%);
            width: min(34%, 360px);
            text-align: center;
            font-size: clamp(18px, 1.8vw, 26px);
            font-weight: 1000;
            line-height: 1.05;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            pointer-events: none;
        }

        .fase2-mesa-pendiente-total {
            font-size: clamp(15px, 1.35vw, 20px);
            white-space: nowrap;
            text-align: right;
            position: relative;
            z-index: 2;
        }

        .fase2-mesa-pendiente-print {
            width: 38px;
            height: 38px;
            border: 2px solid rgba(15, 23, 42, 0.18);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.78);
            color: #111827;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            position: relative;
            z-index: 2;
        }

        .fase2-mesa-pendiente-print .icono-ms {
            font-size: 23px;
        }

        .fase2-mesa-pendiente-print.unlock {
            background: rgba(254, 226, 226, 0.9);
            border-color: rgba(185, 28, 28, 0.35);
            color: #7f1d1d;
        }

        body.theme-iphone .fase2-mesa-pendiente-card.estado-0 {
            border-color: var(--mesa-estado-0-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-0-bg-a), var(--mesa-estado-0-bg-b)) !important;
            color: var(--mesa-estado-0-text) !important;
        }

        body.theme-iphone .fase2-mesa-pendiente-card.estado-1 {
            border-color: var(--mesa-estado-1-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-1-bg-a), var(--mesa-estado-1-bg-b)) !important;
            color: var(--mesa-estado-1-text) !important;
        }

        body.theme-iphone .fase2-mesa-pendiente-card.estado-2 {
            border-color: var(--mesa-estado-2-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-2-bg-a), var(--mesa-estado-2-bg-b)) !important;
            color: var(--mesa-estado-2-text) !important;
        }

        body.theme-iphone .fase2-mesa-pendiente-card.estado-3 {
            border-color: var(--mesa-estado-3-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-3-bg-a), var(--mesa-estado-3-bg-b)) !important;
            color: var(--mesa-estado-3-text) !important;
        }

        body.theme-iphone .fase2-mesa-pendiente-card.estado-4 {
            border-color: var(--mesa-estado-4-border) !important;
            background: linear-gradient(160deg, var(--mesa-estado-4-bg-a), var(--mesa-estado-4-bg-b)) !important;
            color: var(--mesa-estado-4-text) !important;
        }

        .fase2-comandas-card {
            border: 1px solid var(--line);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
            overflow: hidden;
            flex: 0 0 auto;
            cursor: pointer;
        }

        .fase2-comandas-card.cobrada {
            border-color: #86efac;
            background: rgba(240, 253, 244, 0.96);
        }

        .fase2-comandas-card.pendiente {
            border-color: #fbbf24;
            background: rgba(255, 251, 235, 0.97);
        }

        .fase2-comandas-card.selected {
            outline: 4px solid var(--brand-2);
            outline-offset: -4px;
            box-shadow: 0 0 0 4px rgba(2, 128, 144, 0.18), 0 10px 24px rgba(15, 23, 42, 0.22);
        }

        .fase2-comandas-meta {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 8px;
            align-items: center;
            padding: 8px;
            background: linear-gradient(180deg, rgba(219, 234, 254, 0.95), rgba(239, 246, 255, 0.96));
            color: #0f365e;
            font-size: 14px;
            font-weight: 900;
        }

        .fase2-comandas-card.cobrada .fase2-comandas-meta {
            background: linear-gradient(180deg, #dcfce7, #bbf7d0);
            color: #14532d;
        }

        .fase2-comandas-card.pendiente .fase2-comandas-meta {
            background: linear-gradient(180deg, #fef3c7, #fde68a);
            color: #78350f;
        }

        .fase2-comandas-meta-grid {
            grid-template-columns: 1fr 1.4fr 1fr;
        }

        .fase2-comandas-meta-left {
            justify-self: start;
        }

        .fase2-comandas-meta-center {
            justify-self: center;
            text-align: center;
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .fase2-comandas-meta-right {
            justify-self: end;
            text-align: right;
            display: grid;
            gap: 2px;
            white-space: nowrap;
        }

        .fase2-comandas-meta-sub {
            font-size: 12px;
            font-weight: 800;
            color: #475569;
        }

        .fase2-comandas-lines {
            display: grid;
            gap: 3px;
            padding: 6px;
        }

        .fase2-comandas-lines .comanda-linea {
            min-height: 26px;
            font-size: clamp(14px, 1.55vw, 20px);
            line-height: 1.15;
            gap: 10px;
            letter-spacing: 0;
            flex: 0 0 auto;
            grid-template-columns: auto auto minmax(0, 1fr) auto auto;
        }

        .fase2-comandas-lines .comanda-mod {
            min-height: 22px;
            font-size: clamp(12px, 1.25vw, 17px);
            line-height: 1.15;
            letter-spacing: 0;
            flex: 0 0 auto;
            margin-top: 0;
            grid-template-columns: 30px 26px minmax(0, 1fr) auto;
        }

        .fase2-comandas-lines .comanda-linea + .comanda-mod,
        .fase2-comandas-lines .comanda-mod + .comanda-mod {
            margin-top: 0;
        }

        .fase2-comandas-lines .comanda-desc,
        .fase2-comandas-lines .comanda-mod-desc {
            min-width: 0;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
        }

        .fase2-comandas-lines .match-busqueda {
            border-radius: 7px;
            background: rgba(14, 165, 233, 0.20);
            box-shadow: inset 0 0 0 2px rgba(2, 132, 199, 0.45);
        }

        .fase2-comandas-empty {
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed var(--line);
            border-radius: 10px;
            color: var(--button-text-dark);
            font-size: clamp(16px, 2vh, 22px);
            font-weight: 900;
            text-align: center;
            background: rgba(255, 255, 255, 0.72);
        }

        .fase2-nueva-mesa-panel {
            display: none;
            position: absolute;
            inset: var(--cuerpo-pad);
            z-index: 38;
            align-items: center;
            justify-content: center;
            padding: clamp(12px, 3vh, 28px);
            overflow: auto;
            letter-spacing: 0;
            pointer-events: auto;
            background: rgba(15, 23, 42, 0.18);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }

        .fase2-nueva-mesa-panel.visible {
            display: flex;
        }

        .fase2-nueva-card {
            width: min(620px, 100%);
            display: grid;
            gap: 12px;
            padding: clamp(14px, 3vh, 24px);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--body-panel-bg);
            box-shadow: var(--shadow);
            pointer-events: auto;
        }

        .fase2-nueva-title {
            font-size: clamp(22px, 3.2vh, 34px);
            font-weight: 900;
            color: var(--button-text-dark);
            text-align: center;
        }

        .fase2-nueva-input {
            width: 100%;
            min-height: 58px;
            border: 2px solid var(--brand-2);
            border-radius: 10px;
            padding: 8px 12px;
            font-size: clamp(22px, 3vh, 32px);
            font-weight: 800;
            color: var(--ink);
            background: #ffffff;
            text-align: center;
        }

        .fase2-nueva-check {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 44px;
            color: var(--button-text-dark);
            font-size: clamp(15px, 2vh, 20px);
            font-weight: 800;
            text-align: center;
        }

        .fase2-nueva-check input {
            width: 24px;
            height: 24px;
            accent-color: var(--brand-2);
        }

        .fase2-nueva-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        body.nueva-mesa-modal-activo .display,
        body.nueva-mesa-modal-activo .cabecera,
        body.nueva-mesa-modal-activo .opciones,
        body.nueva-mesa-modal-activo .fase2-actions {
            pointer-events: none !important;
        }

        body.nueva-mesa-modal-activo .teclado,
        body.nueva-mesa-modal-activo .teclado-alfabetico,
        body.nueva-mesa-modal-activo .fase2-nueva-mesa-panel {
            pointer-events: auto !important;
        }

        .mesa-btn.mover-origen {
            outline: 4px solid #f59e0b;
            outline-offset: -4px;
            box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22), var(--shadow);
        }

        .mesa-btn.mover-destino {
            outline: 4px solid #22c55e;
            outline-offset: -4px;
        }

        .cuerpo-choice-modal {
            position: absolute;
            inset: 0;
            z-index: 60;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 14px;
            background: rgba(15, 23, 42, 0.28);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .cuerpo-choice-modal.visible {
            display: flex;
        }

        .cuerpo-choice-card {
            width: min(560px, 92%);
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--card);
            color: var(--ink);
            box-shadow: 0 22px 46px rgba(15, 23, 42, 0.32);
            padding: 16px;
            display: grid;
            gap: 12px;
            letter-spacing: 0;
        }

        .cuerpo-choice-title {
            font-size: 22px;
            font-weight: 900;
            text-align: center;
        }

        .cuerpo-choice-text {
            font-size: 15px;
            font-weight: 700;
            line-height: 1.35;
            text-align: center;
            color: var(--ink);
            white-space: pre-line;
        }

        .cuerpo-choice-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .cuerpo-choice-btn {
            min-height: 48px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--button-bg);
            color: var(--button-text);
            font-size: 14px;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px;
        }

        .cuerpo-choice-btn.primary {
            background: var(--button-active-bg);
            border-color: var(--brand-2);
        }

        .cuerpo-choice-btn.danger {
            background: linear-gradient(180deg, #fee2e2, #fecaca);
            border-color: #ef4444;
            color: #7f1d1d;
        }

        body.config-mode .mesas-panel {
            background-color: transparent !important;
        }

        .mesas-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity 180ms ease;
            z-index: 1;
        }

        body.config-mode .mesas-panel::after {
            opacity: 1;
            background:
                linear-gradient(140deg, color-mix(in srgb, var(--config-bg-solid) 32%, transparent), color-mix(in srgb, #ffffff 42%, transparent)),
                linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.04));
        }

        .mesas-panel .mesa-btn,
        .mesas-panel .estado-operacion {
            position: relative;
            z-index: 2;
        }

        body.config-mode #cuerpo,
        body.config-mode #cuerpo.expanded,
        body.config-mode .usuarios-panel,
        body.config-mode .articulos-panel,
        body.config-mode .cobro-panel,
        body.config-mode .all-articulos-panel,
        body.config-mode .manual-panel,
        body.config-mode .cuerpo-tab-panel {
            background: var(--config-bg) !important;
            background-color: var(--config-bg-solid) !important;
            background-image: none !important;
        }

        .all-articulos-panel {
            display: none;
            width: 100%;
            height: 100%;
            min-height: 0;
            background: linear-gradient(150deg, #fafdff, #ebf2fb);
            border-radius: 10px;
            overflow: hidden;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0;
        }

        .all-articulos-panel.visible {
            display: flex;
            flex-direction: column;
        }

        .all-articulos-toolbar {
            display: grid;
            grid-template-columns: minmax(160px, 1fr) 190px 46px;
            gap: 6px;
            padding: 6px;
            border-bottom: 1px solid var(--line);
            background: rgba(255,255,255,0.72);
        }

        .all-articulos-table-wrap {
            flex: 1;
            min-height: 0;
            overflow: auto;
        }

        .all-articulos-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            color: var(--ink);
        }

        .all-articulos-table th,
        .all-articulos-table td {
            border-bottom: 1px solid rgba(120, 140, 165, 0.35);
            padding: 5px;
            vertical-align: top;
        }

        .all-articulos-table th {
            position: sticky;
            top: 0;
            z-index: 1;
            background: var(--card-soft);
            text-align: left;
            font-size: 11px;
        }

        .all-articulos-table input,
        .all-articulos-table select,
        .all-articulos-table textarea {
            width: 100%;
            min-width: 0;
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 5px;
            font: inherit;
            font-size: 12px;
            background: #fff;
            color: var(--ink);
        }

        .all-articulos-table textarea {
            resize: vertical;
            min-height: 34px;
        }

        .all-articulos-save {
            width: 36px;
            height: 32px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .manual-panel {
            display: none;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: linear-gradient(150deg, #fafdff, #ebf2fb);
            border-radius: 10px;
            padding: 8px 10px;
            color: var(--ink);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 0;
            line-height: 1.45;
        }

        .manual-panel.visible {
            display: block;
        }

        .manual-panel h2 {
            font-size: 24px;
            margin: 0 0 10px;
            letter-spacing: 0;
        }

        .manual-panel h3 {
            font-size: 18px;
            margin: 18px 0 8px;
            letter-spacing: 0;
        }

        .manual-panel ul {
            margin: 0 0 8px 20px;
            padding: 0;
        }

        .manual-panel li {
            margin: 4px 0;
        }

        .cuerpo-tab-panel {
            display: none;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: linear-gradient(150deg, #fafdff, #ebf2fb);
            border-radius: 10px;
            padding: 6px 8px;
            color: var(--ink);
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.35;
        }

        .cuerpo-tab-panel.fondo-inicio {
            background-image: url("../../AZUL.jpg") !important;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
        }

        body.config-mode .cuerpo-tab-panel.fondo-inicio {
            background: transparent !important;
            background-color: transparent !important;
            background-image: url("../../AZUL.jpg") !important;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
        }

        .cuerpo-tab-panel.visible {
            display: block;
        }

        body.fase3-comensal-open .articulos-panel {
            display: none !important;
        }

        body.fase3-comensal-open .cuerpo-tab-panel.visible {
            display: block !important;
            position: absolute;
            left: var(--cuerpo-pad);
            right: var(--cuerpo-pad);
            top: var(--cuerpo-pad);
            bottom: var(--cuerpo-pad);
            width: auto;
            height: auto;
            z-index: 95;
            margin: 0;
        }

        .cuerpo-tab-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 6px;
            margin-top: 6px;
        }

        .cuerpo-tab-card {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: rgba(255,255,255,0.75);
            padding: 8px;
            min-height: 70px;
        }

        .cuerpo-tab-card h3 {
            font-size: 18px;
            margin: 0 0 6px;
            letter-spacing: 0;
        }

        .cuerpo-tab-card p {
            margin: 0;
            font-size: 13px;
            font-weight: 500;
        }

        .tab-app-frame {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
            border-radius: 6px;
            background: transparent;
        }

        .cuerpo-tab-close {
            position: absolute;
            top: 10px;
            right: 12px;
            z-index: 75;
            width: 40px;
            height: 40px;
            border: 1px solid #ef4444;
            border-radius: 12px;
            background: linear-gradient(180deg, #ef4444, #dc2626);
            color: #ffffff;
            box-shadow: 0 10px 22px rgba(185, 28, 28, 0.35);
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .cuerpo-tab-close .icono-ms {
            font-size: 22px;
        }

        body.programa-externo-activo-ui .cuerpo-tab-close {
            display: inline-flex;
        }

        /* Al ejecutar un programa externo, ocultar opciones internas del cuerpo */
        body.programa-externo-activo-ui #fase2Actions,
        body.programa-externo-activo-ui #fase3Actions {
            display: none !important;
        }

        .opciones.programa-externo-activo .opciones-panel.visible > * {
            display: none !important;
        }
        .opciones.programa-externo-activo .opciones-footer {
            display: none !important;
        }

        .opciones.programa-externo-activo #panelConfiguracion.visible > #configImportProgressPanel {
            display: grid !important;
        }
        .opciones.programa-externo-activo #panelConfiguracion.visible {
            grid-template-columns: 1fr !important;
            grid-template-rows: 1fr !important;
            align-content: stretch !important;
        }
        .opciones.programa-externo-activo #panelConfiguracion.visible > #configImportProgressPanel {
            align-self: stretch;
            justify-self: stretch;
            height: 100%;
            min-height: 0;
        }

        .mesas-panel.visible {
            display: grid;
            height: 100%;
            min-height: 0;
            overflow: auto;
        }

        .mesas-panel.fase2-actions-reserved.visible {
            height: calc(100% - 66px);
            min-height: 0;
            overflow: auto;
        }

        .mesas-panel.plano-libre {
            display: block;
            gap: 0;
            overflow: auto;
            min-height: 0;
        }

        .mesas-panel.plano-libre::after {
            content: "";
            display: block;
            width: var(--plano-scroll-width, 100%);
            height: var(--plano-scroll-height, 100%);
            pointer-events: none;
        }

        .mesas-panel.plano-libre.visible {
            display: block;
        }

        .mesas-panel.plano-libre.fase2-actions-reserved.visible {
            overflow: auto;
        }

        .mesas-panel.plano-libre .mesa-btn {
            position: absolute;
            margin: 0;
            min-height: 0;
            touch-action: auto;
            user-select: none;
            align-items: flex-start;
        }

        .mesas-panel.plano-libre .mesa-btn.dragging {
            z-index: 10;
            box-shadow: 0 10px 22px rgba(2, 128, 144, 0.35);
        }

        .mesas-panel.plano-libre .mesa-btn.mesa-draggable {
            touch-action: none;
            cursor: grab;
        }

        .mesas-panel.plano-libre .mesa-btn.mesa-draggable.dragging {
            cursor: grabbing;
        }

        .mesa-btn {
            appearance: none;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: var(--button-soft-bg);
            color: var(--button-text-dark);
            min-height: 72px;
            padding: 8px 10px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 3px;
            letter-spacing: normal;
            text-align: left;
            position: relative;
            overflow: visible;
        }

        .mesa-btn.mesa-forma-cuadrada {
            border-radius: 8px;
        }

        .mesa-btn.mesa-forma-redonda {
            border-radius: 999px;
        }

        .mesa-btn:hover {
            transform: translateY(-1px);
            box-shadow: var(--hover-shadow);
        }

        .mesa-btn.active {
            border-color: var(--brand-2);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 28%, transparent) inset;
            background: var(--button-active-bg);
        }

        .mesa-btn.config-multi-selected {
            border-color: #059669;
            box-shadow: inset 0 0 0 2px rgba(5, 150, 105, 0.35);
            background: linear-gradient(160deg, #ecfdf5, #d1fae5);
        }

        .mesa-comensales-badge {
            position: absolute;
            top: -7px;
            right: -7px;
            z-index: 2;
            min-width: 22px;
            max-width: 100%;
            height: 22px;
            padding: 0 6px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
            background: #0f172a;
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mesa-nombre {
            display: block;
            max-width: calc(100% - 12px);
            padding: 2px 4px 0 0;
            font-size: 18px;
            font-weight: 900;
            line-height: 1.08;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mesa-total {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 2;
            max-width: 100%;
            padding: 1px 5px;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 900;
            line-height: 1.15;
            color: #0f172a;
            background: transparent;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mesa-estado-0 {
            background: linear-gradient(160deg, var(--mesa-estado-0-bg-a), var(--mesa-estado-0-bg-b));
            color: var(--mesa-estado-0-text);
            border-color: var(--mesa-estado-0-border);
        }

        .mesa-estado-1 {
            background: linear-gradient(160deg, var(--mesa-estado-1-bg-a), var(--mesa-estado-1-bg-b));
            color: var(--mesa-estado-1-text);
            border-color: var(--mesa-estado-1-border);
        }

        .mesa-estado-2 {
            background: linear-gradient(160deg, var(--mesa-estado-2-bg-a), var(--mesa-estado-2-bg-b));
            color: var(--mesa-estado-2-text);
            border-color: var(--mesa-estado-2-border);
        }

        .mesa-estado-3 {
            background: linear-gradient(160deg, var(--mesa-estado-3-bg-a), var(--mesa-estado-3-bg-b));
            color: var(--mesa-estado-3-text);
            border-color: var(--mesa-estado-3-border);
        }

        .mesa-estado-4 {
            background: linear-gradient(160deg, var(--mesa-estado-4-bg-a), var(--mesa-estado-4-bg-b));
            color: var(--mesa-estado-4-text);
            border-color: var(--mesa-estado-4-border);
        }

        .familia-btn {
            appearance: none;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--button-bg);
            color: var(--button-text-dark);
            min-width: 120px;
            height: 100%;
            padding: 8px 10px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            text-transform: uppercase;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 2px;
            text-align: left;
        }

        .familia-icono {
            font-family: "Material Symbols Rounded";
            font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
            font-size: 18px;
            line-height: 1;
            margin-bottom: 2px;
        }

        .familia-con-imagen {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 52px;
            border-radius: 8px;
            overflow: hidden;
        }

        .familia-thumb {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #f1f5f9;
        }

        .familia-desc-imagen {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 5px 7px;
            font-size: 11px;
            font-weight: 800;
            color: #ffffff;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.82));
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .familia-desc {
            font-size: 11px;
            font-weight: 600;
            opacity: 0.82;
            text-transform: none;
        }

        .familia-btn:hover {
            transform: translateY(-1px);
            box-shadow: var(--hover-shadow);
        }

        .familia-btn.active {
            background: var(--button-bg-strong);
            color: #fff;
            border-color: transparent;
        }

        .articulos-panel {
            width: 100%;
            height: 100%;
            display: none;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 6px;
            align-content: start;
            overflow: auto;
        }

        .articulos-panel.visible {
            display: grid;
        }

        .articulos-panel.fase3-actions-reserved.visible {
            height: calc(100% - 66px);
            min-height: 0;
        }

        body.columnas-cuerpo-fijas .articulos-panel {
            grid-template-columns: repeat(var(--columnas-articulos-familias-cuerpo), minmax(0, 1fr)) !important;
        }

        body.fase3 .mesas-panel {
            display: none !important;
        }

        .cobro-panel {
            width: 100%;
            height: 100%;
            display: none;
            grid-template-rows: auto 1fr auto;
            gap: 6px;
            align-content: start;
            overflow: auto;
            padding: 0;
        }

        .cobro-panel.visible {
            display: grid;
        }

        body.fase4 .usuarios-panel,
        body.fase4 .mesas-panel,
        body.fase4 .articulos-panel {
            display: none !important;
        }

        body.fase4 #cobroPanel {
            display: grid !important;
            width: 100%;
            height: 100%;
            min-height: 100%;
        }

        .cobro-resumen {
            border: 1px solid #b8c7dd;
            border-radius: 12px;
            background: #ffffff;
            padding: 8px;
            display: grid;
            gap: 6px;
        }

        .cobro-titulo {
            font-size: 16px;
            font-weight: 800;
            color: #1f3b64;
        }

        .cobro-linea {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            color: #1f2937;
        }

        .cobro-total {
            margin-top: 4px;
            padding-top: 8px;
            border-top: 1px dashed #94a3b8;
            font-size: 18px;
            font-weight: 900;
            color: #0f172a;
            display: flex;
            justify-content: space-between;
        }

        .cobro-botones {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
        }

        .cobro-btn {
            appearance: none;
            border: 1px solid #b8c7dd;
            border-radius: 12px;
            min-height: 64px;
            font-size: 18px;
            font-weight: 800;
            cursor: pointer;
        }

        .cobro-efectivo {
            background: linear-gradient(180deg, #dcfce7, #86efac);
            color: #14532d;
            border-color: #22c55e;
        }

        .cobro-tarjeta {
            background: linear-gradient(180deg, #dbeafe, #93c5fd);
            color: #1e3a8a;
            border-color: #3b82f6;
        }

        .articulo-btn {
            appearance: none;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: var(--button-soft-bg);
            color: var(--button-text-dark);
            min-height: 86px;
            padding: 8px 10px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 4px;
            letter-spacing: normal;
            text-align: left;
            position: relative;
        }

        .articulo-btn-familia2::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-top: 24px solid #f8c24e;
            border-left: 24px solid transparent;
            filter: drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.14));
            pointer-events: none;
            z-index: 4;
        }

        .articulo-con-imagen {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 86px;
            border-radius: 10px;
            overflow: hidden;
        }

        .articulo-thumb {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #f1f5f9;
        }

        .articulo-desc {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 6px 8px;
            font-size: 12px;
            font-weight: 800;
            color: #ffffff;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.82));
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .articulo-btn:hover {
            transform: translateY(-1px);
            box-shadow: var(--hover-shadow);
        }

        .articulo-btn.active {
            background: var(--button-bg-strong);
            color: #ffffff;
            border-color: transparent;
        }

        .articulo-btn.active .articulo-nombre-simple,
        .articulo-btn.active .articulo-precio-simple,
        .articulo-btn.active .usuario-id {
            color: #ffffff !important;
        }

        .articulo-btn-sin-imagen {
            justify-content: space-between;
            align-items: stretch;
        }

        .articulo-nombre-simple {
            display: block;
            font-size: 16px;
            font-weight: 900;
            line-height: 1.12;
            color: var(--button-text-dark);
            overflow-wrap: anywhere;
        }

        .articulo-precio-simple {
            display: block;
            align-self: flex-end;
            margin-top: 6px;
            font-size: 15px;
            font-weight: 900;
            line-height: 1;
            color: #0f172a;
            white-space: nowrap;
            text-align: right;
        }

        .articulo-btn.orden-modo {
            cursor: pointer;
            border-style: dashed;
        }
        .articulo-btn.orden-modo img,
        .familia-btn.orden-modo img {
            pointer-events: none;
        }

        .articulo-btn.orden-origen {
            border-color: #d97706;
            box-shadow: inset 0 0 0 2px rgba(217, 119, 6, 0.35);
        }

        .articulo-btn.orden-dragging {
            opacity: 0.45;
            transform: none;
        }

        .articulo-btn.orden-drop-target {
            border-color: #0ea5e9;
            box-shadow: inset 0 0 0 2px rgba(14, 165, 233, 0.38);
        }

        .articulo-btn.config-multi-selected {
            border-color: #059669;
            box-shadow: inset 0 0 0 2px rgba(5, 150, 105, 0.35);
            background: linear-gradient(160deg, #ecfdf5, #d1fae5);
        }

        .articulo-btn.config-focus-subfamilia {
            background: var(--button-bg-strong) !important;
            color: #ffffff !important;
            border-color: transparent !important;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 18px rgba(15, 23, 42, 0.2);
        }

        .articulo-btn.config-focus-subfamilia .usuario-id,
        .articulo-btn.config-focus-subfamilia .articulo-desc,
        .articulo-btn.config-focus-subfamilia .articulo-nombre-simple,
        .articulo-btn.config-focus-subfamilia .articulo-precio-simple {
            color: #ffffff !important;
        }

        .articulo-btn-mod {
            border-color: #f59e0b;
            background: linear-gradient(160deg, #fff7ed, #ffedd5);
            box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.22);
        }

        .articulo-btn-mod .articulo-desc {
            background: linear-gradient(180deg, rgba(120, 53, 15, 0), rgba(120, 53, 15, 0.86));
        }

        .teclado {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: var(--teclado-display-h) minmax(0, 1fr) minmax(0, 4fr);
            align-items: stretch;
            justify-content: stretch;
            justify-items: stretch;
            padding: 6px;
            gap: 2px;
            min-height: 0;
            transform-origin: right center;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .teclado-top {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 2px;
        }

        .teclado-body {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            min-height: 0;
            overflow: visible;
        }

        .teclado-display {
            width: 100%;
            height: var(--teclado-display-h);
            min-height: var(--teclado-display-h);
            max-height: var(--teclado-display-h);
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--card);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 12px;
            font-size: clamp(64px, 8.5vh, 110px);
            font-weight: 400;
            letter-spacing: 0.04em;
            line-height: 1;
            color: var(--button-text-dark);
            overflow-x: hidden;
            overflow-y: hidden;
            white-space: nowrap;
            max-width: 100%;
            position: relative;
        }

        .teclado-display::before {
            content: attr(data-prompt);
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: clamp(20px, 3.2vh, 42px);
            font-weight: 700;
            letter-spacing: 0.01em;
            pointer-events: none;
            white-space: nowrap;
            opacity: 0.75;
        }

        body:not(.tab-ventas-activa):not(.modo-vertical) .opciones {
            height: calc((var(--layout-horizontal-opciones-panel-h) - (var(--layout-gap) / 2)) + var(--teclado-display-h) + var(--teclado-grid-gap));
        }

        body:not(.tab-ventas-activa):not(.modo-vertical) .teclado {
            height: calc((var(--layout-horizontal-teclado-panel-h) - (var(--layout-gap) / 2)) - var(--teclado-display-h) - var(--teclado-grid-gap));
            min-height: 0;
            grid-template-rows: minmax(0, 1fr) minmax(0, 4fr);
        }

        body:not(.tab-ventas-activa) .teclado-display {
            display: none;
            height: 0;
            min-height: 0;
            max-height: 0;
            padding: 0;
            border-width: 0;
            overflow: hidden;
        }

        .teclado-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 6px;
            height: 100%;
        }

        .teclado-bottom {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: repeat(4, minmax(0, 1fr));
            gap: 2px;
            min-height: 0;
            grid-area: 1 / 1;
        }

        .teclado-alfabetico {
            display: none;
            grid-template-rows: repeat(5, minmax(0, 1fr));
            gap: 2px;
            min-height: 0;
            grid-column: 1;
            grid-row: 1;
            background: var(--side-panel-bg);
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 2px;
            transform-origin: right center;
        }

        .fila-alfa {
            display: grid;
            gap: 2px;
            min-height: 0;
        }

        .fila-alfa-10 {
            grid-template-columns: repeat(10, minmax(0, 1fr));
        }

        .fila-alfa-11 {
            grid-template-columns: repeat(11, minmax(0, 1fr));
        }

        .fila-alfa-9 {
            grid-template-columns: repeat(9, minmax(0, 1fr));
        }

        .fila-alfa-8 {
            grid-template-columns: repeat(8, minmax(0, 1fr));
        }

        .tecla-espacio {
            grid-column: span 5;
        }

        .tecla-control {
            font-size: clamp(12px, 1.5vh, 19px);
            letter-spacing: 0.01em;
        }

        @keyframes abrirLateral {
            from {
                transform: scaleX(0.2);
                opacity: 0.3;
            }
            to {
                transform: scaleX(1);
                opacity: 1;
            }
        }

        @keyframes cerrarLateral {
            from {
                transform: scaleX(1);
                opacity: 1;
            }
            to {
                transform: scaleX(0.05);
                opacity: 0.1;
            }
        }

        @keyframes abrirCortinaAlfa {
            from {
                transform: translateY(100%);
                opacity: 0.2;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes cerrarCortinaAlfa {
            from {
                transform: translateY(0);
                opacity: 1;
            }
            to {
                transform: translateY(100%);
                opacity: 0.2;
            }
        }

        body.keyboard-alpha .teclado-alfabetico,
        body.keyboard-alpha-closing .teclado-alfabetico {
            display: grid;
        }

        body.keyboard-alpha .teclado-alfabetico {
            animation: abrirCortinaAlfa 0.24s ease-out;
        }

        body.keyboard-alpha-closing .teclado-alfabetico {
            animation: cerrarCortinaAlfa 0.18s ease-in forwards;
        }

        .fila-inferior > .teclado-alfabetico {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 40;
            width: calc(var(--layout-horizontal-left-w) - (var(--layout-gap) / 2));
            height: var(--teclado-alpha-height, 236px);
            padding: 6px;
            border-radius: var(--radius);
            box-shadow: 0 10px 28px rgba(13, 27, 42, 0.35);
            transform-origin: bottom center;
        }

        body.keyboard-alpha .cuerpo,
        body.keyboard-alpha .cuerpo.expanded,
        body.keyboard-alpha-closing .cuerpo,
        body.keyboard-alpha-closing .cuerpo.expanded {
            height: calc(100% - var(--teclado-alpha-height, 236px) - var(--layout-gap));
            min-height: 0;
            align-self: flex-start;
            overflow: auto;
        }

        body.keyboard-alpha .cuerpo.expanded,
        body.keyboard-alpha-closing .cuerpo.expanded {
            width: calc(var(--layout-horizontal-left-w) - (var(--layout-gap) / 2));
        }

        body.modo-vertical .fila-inferior > .teclado-alfabetico {
            width: 100%;
            height: var(--teclado-alpha-height, 236px);
            left: 0;
            right: 0;
        }

        body.modo-vertical.keyboard-alpha .cuerpo,
        body.modo-vertical.keyboard-alpha .cuerpo.expanded,
        body.modo-vertical.keyboard-alpha-closing .cuerpo,
        body.modo-vertical.keyboard-alpha-closing .cuerpo.expanded {
            height: calc(100% - var(--teclado-alpha-height, 236px) - var(--layout-gap)) !important;
            flex-basis: calc(100% - var(--teclado-alpha-height, 236px) - var(--layout-gap)) !important;
            overflow: auto;
        }

        body.fase2.keyboard-alpha .cuerpo,
        body.fase2.keyboard-alpha .cuerpo.expanded,
        body.fase2.keyboard-alpha-closing .cuerpo,
        body.fase2.keyboard-alpha-closing .cuerpo.expanded,
        body.modo-vertical.fase2.keyboard-alpha .cuerpo,
        body.modo-vertical.fase2.keyboard-alpha .cuerpo.expanded,
        body.modo-vertical.fase2.keyboard-alpha-closing .cuerpo,
        body.modo-vertical.fase2.keyboard-alpha-closing .cuerpo.expanded {
            overflow: hidden !important;
        }

        .tecla {
            appearance: none;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--button-bg);
            color: var(--button-text-dark);
            font-size: clamp(20px, 2.6vh, 34px);
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s ease, filter 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            min-height: 0;
            width: 100%;
            padding: 0 6px;
        }

        .tecla svg {
            width: min(70%, 44px);
            height: min(70%, 44px);
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            vertical-align: middle;
        }

        .tecla .icono-ms {
            font-size: clamp(22px, 2.4vh, 34px);
        }

        .tecla-icono {
            color: var(--brand-2);
            background: var(--button-bg);
        }

        .icon-empleado { color: #7c3aed; }
        .icon-mesas { color: #0369a1; }
        .icon-borrar { color: #b91c1c; }
        .icon-backspace { color: #dc2626; }
        .icon-imp { color: #0f766e; }
        .icon-total { color: #9333ea; }
        .icon-alpha { color: #1d4ed8; }

        .tecla:hover {
            filter: brightness(0.98);
            transform: translateY(-1px);
        }

        .teclado-top .tecla,
        .tecla-lateral {
            font-size: clamp(13px, 1.6vh, 22px);
            white-space: nowrap;
        }

        .tecla-accion {
            background: linear-gradient(130deg, #dbe7fb, #c9dcfb);
        }

        .tecla-enter {
            background: linear-gradient(130deg, var(--brand), var(--brand-2));
            color: #ffffff;
            border-color: transparent;
        }

        .tecla-ok-doble {
            grid-row: span 2;
        }

        .teclado-compacto {
            display: none;
            width: 100%;
            height: 100%;
            grid-template-columns: minmax(0, 1fr) 0.45fr repeat(3, minmax(0, 1fr));
            gap: 4px;
            align-items: stretch;
        }

        .teclado-compacto-gap {
            pointer-events: none;
            user-select: none;
        }

        body.keyboard-collapsed .teclado {
            height: 10vh !important;
            min-height: 10vh !important;
            max-height: 10vh !important;
            grid-template-rows: minmax(0, 1fr);
            padding: 6px;
        }

        body.keyboard-collapsed:not(.tab-ventas-activa):not(.modo-vertical) .teclado {
            grid-template-rows: minmax(0, 1fr) !important;
        }

        body.keyboard-collapsed:not(.modo-vertical) .panel-derecho {
            justify-content: flex-start;
        }

        body.keyboard-collapsed:not(.modo-vertical) .panel-derecho .opciones {
            height: calc(100% - 10vh - 8px);
        }

        body.keyboard-collapsed .teclado-display,
        body.keyboard-collapsed .teclado-top,
        body.keyboard-collapsed .teclado-body {
            display: none !important;
        }

        body.keyboard-collapsed .teclado-compacto {
            display: grid;
            grid-row: 1 / -1;
            height: 100%;
            min-height: 0;
        }

        body.keyboard-collapsed .teclado-compacto .tecla {
            font-size: clamp(16px, 2.2vh, 24px);
        }

        body.modo-vertical .contenedor {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            height: auto;
            gap: 8px;
        }

        body.modo-vertical .fila-superior,
        body.modo-vertical .fila-inferior,
        body.modo-vertical .panel-derecho,
        body.modo-vertical .panel-derecho.hidden {
            display: contents;
            width: auto;
            padding: 0;
            overflow: visible;
        }

        body.modo-vertical .display {
            order: 1;
            width: 100%;
            height: 74px;
        }

        body.modo-vertical .display .titulo {
            left: 50%;
            right: auto;
            top: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 112px);
            max-width: calc(100% - 112px);
            text-align: center;
            font-size: clamp(28px, 6.2vw, 46px);
            line-height: 1;
        }

        body.modo-vertical .opciones {
            order: 2;
            width: 100%;
            height: 175px;
        }

        body.modo-vertical .cabecera {
            order: 3;
            width: 100%;
            height: 74px;
        }

        body.modo-vertical .cuerpo,
        body.modo-vertical .cuerpo.expanded {
            order: 4;
            width: 100%;
            flex: 1;
            min-height: 240px;
        }

        body.modo-vertical .teclado {
            order: 5;
            width: 100%;
            min-height: 320px;
            height: 40vh;
            display: none;
        }

        body.modo-vertical .articulos-panel {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 4px;
        }

        body.modo-vertical .articulo-btn {
            min-height: 62px;
            padding: 5px 6px;
            border-radius: 9px;
            font-size: 12px;
            line-height: 1.12;
            gap: 2px;
        }

        body.modo-vertical .articulo-con-imagen {
            min-height: 62px;
            border-radius: 8px;
        }

        body.modo-vertical .articulo-desc {
            padding: 4px 5px;
            font-size: 10px;
            line-height: 1.1;
        }

        body.modo-vertical .articulo-nombre-simple {
            font-size: 13px;
            line-height: 1.1;
        }

        body.modo-vertical .articulo-precio-simple {
            font-size: 13px;
            margin-top: 4px;
        }

        /* Fase 1 vertical - modo por defecto:
           mismas proporciones que horizontal:
           display 11%, opciones 44.5%, teclado 44.5% */
        body.modo-vertical.fase1:not(.fase1-vertical-expanded) .cabecera,
        body.modo-vertical.fase1:not(.fase1-vertical-expanded) .cuerpo {
            display: none;
        }

        body.modo-vertical.fase1:not(.fase1-vertical-expanded) .contenedor,
        body.modo-vertical.fase2.fase2-vertical-expanded .contenedor,
        body.modo-vertical.fase3.fase3-vertical-expanded .contenedor {
            height: 100vh;
            min-height: 100vh;
            --v1h-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 2));
            --v1h-display: calc(var(--v1h-usable) * var(--layout-vertical-right-display-r));
            --v1h-opciones: calc(var(--v1h-usable) * var(--layout-vertical-right-opciones-r));
            --v1h-teclado: calc(var(--v1h-usable) * var(--layout-vertical-right-teclado-r));
        }

        body.modo-vertical.fase1:not(.fase1-vertical-expanded) .opciones,
        body.modo-vertical.fase2.fase2-vertical-expanded .opciones,
        body.modo-vertical.fase3.fase3-vertical-expanded .opciones {
            display: flex;
            height: var(--v1h-opciones);
            min-height: 130px;
            flex: 0 0 var(--v1h-opciones);
        }

        body.modo-vertical.fase1:not(.fase1-vertical-expanded) .teclado,
        body.modo-vertical.fase2.fase2-vertical-expanded .teclado,
        body.modo-vertical.fase3.fase3-vertical-expanded .teclado {
            display: grid;
            position: static;
            height: var(--v1h-teclado);
            min-height: 180px;
            flex: 0 0 var(--v1h-teclado);
            box-shadow: var(--shadow);
        }

        body.modo-vertical.fase1:not(.fase1-vertical-expanded) .display,
        body.modo-vertical.fase2.fase2-vertical-expanded .display,
        body.modo-vertical.fase3.fase3-vertical-expanded .display {
            height: var(--v1h-display);
            min-height: 64px;
            flex: 0 0 var(--v1h-display);
        }

        /* En vertical fase 1, al contraer teclado, mismo comportamiento que horizontal:
           teclado fijo reducido y opciones ocupando el resto */
        body.modo-vertical.fase1:not(.fase1-vertical-expanded).keyboard-collapsed .teclado,
        body.modo-vertical.fase2.fase2-vertical-expanded.keyboard-collapsed .teclado,
        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .teclado {
            height: 10vh !important;
            min-height: 10vh !important;
            max-height: 10vh !important;
            flex: 0 0 10vh !important;
        }

        body.modo-vertical.fase1:not(.fase1-vertical-expanded).keyboard-collapsed .opciones,
        body.modo-vertical.fase2.fase2-vertical-expanded.keyboard-collapsed .opciones,
        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .opciones {
            height: calc(var(--v1h-usable) - var(--v1h-display) - 10vh);
            flex: 0 0 calc(var(--v1h-usable) - var(--v1h-display) - 10vh);
        }

        /* Fase 1 vertical - modo expandido:
           mostrar display + cabecera + cuerpo */
        body.modo-vertical.fase1.fase1-vertical-expanded .opciones,
        body.modo-vertical.fase1.fase1-vertical-expanded .teclado {
            display: none !important;
        }

        body.modo-vertical.fase1.fase1-vertical-expanded .contenedor {
            height: 100vh;
            min-height: 100vh;
            --v1h-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 2));
        }

        body.modo-vertical.fase1.fase1-vertical-expanded .cabecera {
            display: flex;
            height: calc(var(--v1h-usable) * 0.15);
            min-height: 64px;
            flex: 0 0 calc(var(--v1h-usable) * 0.15);
        }

        body.modo-vertical.fase1.fase1-vertical-expanded .cuerpo,
        body.modo-vertical.fase1.fase1-vertical-expanded .cuerpo.expanded {
            display: flex;
            min-height: 220px;
            height: calc(var(--v1h-usable) * 0.70);
            flex: 0 0 calc(var(--v1h-usable) * 0.70);
        }

        body.modo-vertical.fase1.fase1-vertical-expanded .display {
            height: calc(var(--v1h-usable) * 0.15);
            min-height: 64px;
            flex: 0 0 calc(var(--v1h-usable) * 0.15);
        }

        /* Fase 2 vertical - modo por defecto:
           mostrar display + cabecera + cuerpo + teclado reducido */
        body.modo-vertical.fase2:not(.fase2-vertical-expanded) .opciones {
            display: none !important;
        }

        body.modo-vertical.fase2:not(.fase2-vertical-expanded) .contenedor {
            --v2left-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 3));
            --v2left-display: clamp(58px, calc(var(--v2left-usable) * var(--layout-vertical-left-display-r)), 140px);
            --v2left-cabecera: clamp(54px, calc(var(--v2left-usable) * var(--layout-vertical-left-cabecera-r)), 140px);
            --v2left-teclado: clamp(54px, calc(var(--v2left-usable) * var(--layout-vertical-left-teclado-r)), 140px);
        }

        body.modo-vertical.fase2.keyboard-alpha:not(.fase2-vertical-expanded) .contenedor,
        body.modo-vertical.fase2.keyboard-alpha-closing:not(.fase2-vertical-expanded) .contenedor {
            --v2left-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 4) - var(--teclado-alpha-height, 236px));
            --v2left-display: clamp(58px, 9vh, 88px);
            --v2left-cabecera: clamp(54px, 10vh, 92px);
            --v2left-teclado: clamp(54px, 8vh, 78px);
        }

        body.modo-vertical.fase2.keyboard-alpha:not(.fase2-vertical-expanded) .display,
        body.modo-vertical.fase2.keyboard-alpha-closing:not(.fase2-vertical-expanded) .display {
            min-height: 58px !important;
        }

        body.modo-vertical.fase2.keyboard-alpha:not(.fase2-vertical-expanded) .cabecera,
        body.modo-vertical.fase2.keyboard-alpha-closing:not(.fase2-vertical-expanded) .cabecera,
        body.modo-vertical.fase2.keyboard-alpha:not(.fase2-vertical-expanded) .teclado,
        body.modo-vertical.fase2.keyboard-alpha-closing:not(.fase2-vertical-expanded) .teclado {
            min-height: 54px !important;
        }

        body.modo-vertical.fase2:not(.fase2-vertical-expanded) .display {
            height: var(--v2left-display) !important;
            min-height: 74px;
            flex: 0 0 var(--v2left-display) !important;
        }

        body.modo-vertical.fase2:not(.fase2-vertical-expanded) .cabecera {
            display: flex;
            height: var(--v2left-cabecera) !important;
            min-height: 72px;
            flex: 0 0 var(--v2left-cabecera) !important;
        }

        body.modo-vertical.fase2:not(.fase2-vertical-expanded) .cuerpo,
        body.modo-vertical.fase2:not(.fase2-vertical-expanded) .cuerpo.expanded {
            display: flex;
            height: calc(var(--v2left-usable) - var(--v2left-display) - var(--v2left-cabecera) - var(--v2left-teclado)) !important;
            min-height: 0;
            flex: 0 0 calc(var(--v2left-usable) - var(--v2left-display) - var(--v2left-cabecera) - var(--v2left-teclado)) !important;
        }

        body.modo-vertical.fase2:not(.fase2-vertical-expanded) .teclado {
            display: grid !important;
            height: var(--v2left-teclado) !important;
            min-height: var(--v2left-teclado) !important;
            max-height: var(--v2left-teclado) !important;
            flex: 0 0 var(--v2left-teclado) !important;
        }

        /* Fase 2 vertical - modo expandido:
           mostrar display + opciones + teclado */
        body.modo-vertical.fase2.fase2-vertical-expanded .cabecera,
        body.modo-vertical.fase2.fase2-vertical-expanded .cuerpo {
            display: none !important;
        }

        body.modo-vertical.fase2.fase2-vertical-expanded .opciones { display: flex; }

        body.modo-vertical.fase2.fase2-vertical-expanded .teclado { display: grid !important; }

        /* Fase 3 vertical - modo expandido:
           mostrar display + opciones + teclado */
        body.modo-vertical.fase3.fase3-vertical-expanded .cabecera,
        body.modo-vertical.fase3.fase3-vertical-expanded .cuerpo {
            display: none !important;
        }

        body.modo-vertical.fase3.fase3-vertical-expanded .opciones { display: flex; }

        body.modo-vertical.fase3.fase3-vertical-expanded .teclado { display: grid !important; }

        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .tabs-opciones,
        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .opciones-footer {
            display: none !important;
        }

        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .opciones {
            padding: 3px !important;
        }

        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .opciones-contenido {
            border-top: 1px solid #14b8a6;
            border-radius: 10px;
            padding: 4px;
            min-height: 0;
        }

        /* Fase 3 vertical - modo sin expandir + teclado contraido:
           mostrar display + opciones + cabecera/familias + cuerpo/articulos + teclado reducido */
        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .contenedor {
            --v3n-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 4));
            --v3n-display: clamp(68px, 10vh, 96px);
            --v3n-opciones: clamp(96px, 18vh, 150px);
            --v3n-cabecera: clamp(64px, 11vh, 104px);
            --v3n-teclado: 10vh;
            --v3n-cuerpo: calc(var(--v3n-usable) - var(--v3n-display) - var(--v3n-opciones) - var(--v3n-cabecera) - var(--v3n-teclado));
        }

        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .display {
            height: var(--v3n-display) !important;
            min-height: 64px;
            flex: 0 0 var(--v3n-display) !important;
        }

        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .opciones {
            display: flex !important;
            height: var(--v3n-opciones) !important;
            min-height: 96px;
            flex: 0 0 var(--v3n-opciones) !important;
        }

        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .cabecera {
            height: var(--v3n-cabecera) !important;
            min-height: 64px;
            flex: 0 0 var(--v3n-cabecera) !important;
        }

        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .cuerpo,
        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .cuerpo.expanded {
            display: flex;
            height: var(--v3n-cuerpo) !important;
            min-height: 0;
            flex: 0 0 var(--v3n-cuerpo) !important;
            overflow: auto;
        }

        body.modo-vertical.fase3:not(.fase3-vertical-expanded).keyboard-collapsed .teclado {
            display: grid !important;
            position: static;
            height: var(--v3n-teclado) !important;
            min-height: var(--v3n-teclado) !important;
            max-height: var(--v3n-teclado) !important;
            flex: 0 0 var(--v3n-teclado) !important;
            box-shadow: var(--shadow);
        }

        /* Fase 3 vertical - teclado contraido en modo expandido:
           mostrar display + opciones + teclado reducido */
        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .contenedor {
            --v3c-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 2));
            --v3c-display: calc(var(--v3c-usable) * 0.11);
        }

        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .display {
            height: var(--v3c-display) !important;
            min-height: 64px;
            flex: 0 0 var(--v3c-display) !important;
        }

        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .cabecera {
            display: none !important;
        }

        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .cuerpo,
        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .cuerpo.expanded {
            display: none !important;
        }

        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .teclado {
            display: grid !important;
            height: 10vh !important;
            min-height: 10vh !important;
            max-height: 10vh !important;
            flex: 0 0 10vh !important;
        }

        body.modo-vertical.fase3.fase3-vertical-expanded.keyboard-collapsed .opciones {
            display: flex !important;
            height: calc(var(--v3c-usable) - var(--v3c-display) - 10vh) !important;
            flex: 0 0 calc(var(--v3c-usable) - var(--v3c-display) - 10vh) !important;
        }

        body.modo-vertical.fase4 .contenedor {
            --v4left-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 3));
            --v4left-display: clamp(58px, calc(var(--v4left-usable) * var(--layout-vertical-left-display-r)), 140px);
            --v4left-cabecera: clamp(54px, calc(var(--v4left-usable) * var(--layout-vertical-left-cabecera-r)), 140px);
            --v4left-teclado: clamp(54px, calc(var(--v4left-usable) * var(--layout-vertical-left-teclado-r)), 140px);
        }

        body.modo-vertical.fase4 .opciones {
            display: none !important;
        }

        body.modo-vertical.fase4 .display {
            height: var(--v4left-display) !important;
            min-height: 74px;
            flex: 0 0 var(--v4left-display) !important;
        }

        body.modo-vertical.fase4 .cabecera {
            display: flex !important;
            height: var(--v4left-cabecera) !important;
            min-height: 72px;
            flex: 0 0 var(--v4left-cabecera) !important;
        }

        body.modo-vertical.fase4 .cuerpo,
        body.modo-vertical.fase4 .cuerpo.expanded {
            display: flex !important;
            height: calc(var(--v4left-usable) - var(--v4left-display) - var(--v4left-cabecera) - var(--v4left-teclado)) !important;
            min-height: 0;
            flex: 0 0 calc(var(--v4left-usable) - var(--v4left-display) - var(--v4left-cabecera) - var(--v4left-teclado)) !important;
        }

        body.modo-vertical.fase4 .teclado {
            display: grid !important;
            height: var(--v4left-teclado) !important;
            min-height: var(--v4left-teclado) !important;
            max-height: var(--v4left-teclado) !important;
            flex: 0 0 var(--v4left-teclado) !important;
        }

        body.modo-vertical.keyboard-vertical-open .teclado {
            display: grid;
            position: fixed;
            top: var(--teclado-vertical-top, 0px);
            left: var(--teclado-vertical-left, 10px);
            width: var(--teclado-vertical-width, calc(100vw - 20px));
            height: var(--teclado-vertical-height, 45vh);
            min-height: 320px;
            z-index: 90;
            box-shadow: 0 12px 32px rgba(13, 27, 42, 0.35);
        }

        body.modo-vertical.programa-externo-vertical .contenedor {
            height: 100vh;
            min-height: 100vh;
            --vext-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 3));
            --vext-display: clamp(58px, calc(var(--vext-usable) * var(--layout-vertical-left-display-r)), 140px);
            --vext-cabecera: clamp(54px, calc(var(--vext-usable) * var(--layout-vertical-left-cabecera-r)), 140px);
            --vext-teclado: clamp(54px, calc(var(--vext-usable) * var(--layout-vertical-left-teclado-r)), 140px);
        }

        body.modo-vertical.programa-externo-vertical.keyboard-alpha .contenedor,
        body.modo-vertical.programa-externo-vertical.keyboard-alpha-closing .contenedor {
            --vext-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 4) - var(--teclado-alpha-height, 236px));
            --vext-display: clamp(58px, 9vh, 88px);
            --vext-cabecera: clamp(54px, 10vh, 92px);
            --vext-teclado: clamp(54px, 8vh, 78px);
        }

        body.modo-vertical.programa-externo-vertical.keyboard-alpha .display,
        body.modo-vertical.programa-externo-vertical.keyboard-alpha-closing .display {
            min-height: 58px !important;
        }

        body.modo-vertical.programa-externo-vertical.keyboard-alpha .cabecera,
        body.modo-vertical.programa-externo-vertical.keyboard-alpha-closing .cabecera,
        body.modo-vertical.programa-externo-vertical.keyboard-alpha .teclado,
        body.modo-vertical.programa-externo-vertical.keyboard-alpha-closing .teclado {
            min-height: 54px !important;
        }

        body.modo-vertical.programa-externo-vertical .display {
            display: flex !important;
            height: var(--vext-display) !important;
            min-height: 76px;
            flex: 0 0 var(--vext-display) !important;
        }

        body.modo-vertical.programa-externo-vertical .display .titulo {
            font-size: clamp(32px, 7vw, 54px);
        }

        body.modo-vertical.programa-externo-vertical .opciones {
            display: none !important;
        }

        body.modo-vertical.programa-externo-vertical .cabecera {
            display: flex !important;
            order: 2;
            width: 100%;
            height: var(--vext-cabecera) !important;
            min-height: 72px;
            flex: 0 0 var(--vext-cabecera) !important;
        }

        body.modo-vertical.programa-externo-vertical .cuerpo,
        body.modo-vertical.programa-externo-vertical .cuerpo.expanded {
            display: flex !important;
            order: 3;
            width: 100%;
            min-height: 0;
            height: calc(var(--vext-usable) - var(--vext-display) - var(--vext-cabecera) - var(--vext-teclado)) !important;
            flex: 0 0 calc(var(--vext-usable) - var(--vext-display) - var(--vext-cabecera) - var(--vext-teclado)) !important;
            overflow: hidden;
        }

        body.modo-vertical.programa-externo-vertical .teclado {
            display: grid !important;
            order: 4;
            width: 100%;
            height: var(--vext-teclado) !important;
            min-height: var(--vext-teclado) !important;
            max-height: var(--vext-teclado) !important;
            flex: 0 0 var(--vext-teclado) !important;
        }

        body.modo-vertical.programa-externo-vertical .cuerpo-tab-panel.visible {
            display: block !important;
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        body.modo-vertical.programa-externo-vertical .tab-app-frame {
            display: block !important;
            width: 100%;
            height: 100%;
            min-height: 0;
        }

        body.modo-vertical.vertical-left-view .contenedor,
        body.modo-vertical.vertical-right-view .contenedor {
            height: 100vh;
            min-height: 100vh;
            --vsplit-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 3));
            --vsplit-display: clamp(58px, calc(var(--vsplit-usable) * var(--layout-vertical-left-display-r)), 140px);
            --vsplit-cabecera: clamp(54px, calc(var(--vsplit-usable) * var(--layout-vertical-left-cabecera-r)), 140px);
            --vsplit-teclado: clamp(54px, calc(var(--vsplit-usable) * var(--layout-vertical-left-teclado-r)), 140px);
            --vsplit-display-derecha: calc(var(--vsplit-usable) * var(--layout-vertical-right-display-r));
            --vsplit-opciones-derecha: calc(var(--vsplit-usable) * var(--layout-vertical-right-opciones-r));
            --vsplit-teclado-derecha: calc(var(--vsplit-usable) - var(--vsplit-display-derecha) - var(--vsplit-opciones-derecha));
        }

        body.modo-vertical.keyboard-alpha.vertical-left-view .contenedor,
        body.modo-vertical.keyboard-alpha-closing.vertical-left-view .contenedor {
            --vsplit-usable: calc(100vh - (var(--outer-pad) * 2) - (var(--layout-gap) * 4) - var(--teclado-alpha-height, 236px));
            --vsplit-display: clamp(58px, 9vh, 88px);
            --vsplit-cabecera: clamp(54px, 10vh, 92px);
            --vsplit-teclado: clamp(54px, 8vh, 78px);
        }

        body.modo-vertical.keyboard-alpha.vertical-left-view .display,
        body.modo-vertical.keyboard-alpha-closing.vertical-left-view .display {
            min-height: 58px !important;
        }

        body.modo-vertical.keyboard-alpha.vertical-left-view .cabecera,
        body.modo-vertical.keyboard-alpha-closing.vertical-left-view .cabecera,
        body.modo-vertical.keyboard-alpha.vertical-left-view .teclado,
        body.modo-vertical.keyboard-alpha-closing.vertical-left-view .teclado {
            min-height: 54px !important;
        }

        body.modo-vertical.vertical-left-view .display,
        body.modo-vertical.vertical-right-view .display {
            display: flex !important;
            order: 1;
            height: var(--vsplit-display) !important;
            min-height: 74px;
            flex: 0 0 var(--vsplit-display) !important;
        }

        body.modo-vertical.vertical-right-view .display {
            height: var(--vsplit-display-derecha) !important;
            flex: 0 0 var(--vsplit-display-derecha) !important;
        }

        body.modo-vertical.vertical-left-view .cabecera {
            display: flex !important;
            order: 2;
            width: 100%;
            height: var(--vsplit-cabecera) !important;
            min-height: 72px;
            flex: 0 0 var(--vsplit-cabecera) !important;
        }

        body.modo-vertical.vertical-left-view .cuerpo,
        body.modo-vertical.vertical-left-view .cuerpo.expanded {
            display: flex !important;
            order: 3;
            width: 100%;
            min-height: 0;
            height: calc(var(--vsplit-usable) - var(--vsplit-display) - var(--vsplit-cabecera) - var(--vsplit-teclado)) !important;
            flex: 0 0 calc(var(--vsplit-usable) - var(--vsplit-display) - var(--vsplit-cabecera) - var(--vsplit-teclado)) !important;
            overflow: auto;
        }

        body.modo-vertical.vertical-left-view .opciones {
            display: none !important;
        }

        body.modo-vertical.vertical-left-view .teclado {
            display: grid !important;
            order: 4;
            width: 100%;
            min-height: var(--vsplit-teclado) !important;
            max-height: var(--vsplit-teclado) !important;
            height: var(--vsplit-teclado) !important;
            flex: 0 0 var(--vsplit-teclado) !important;
        }

        body.modo-vertical.vertical-right-view .cabecera,
        body.modo-vertical.vertical-right-view .cuerpo,
        body.modo-vertical.vertical-right-view .cuerpo.expanded {
            display: none !important;
        }

        body.modo-vertical.vertical-right-view .opciones {
            display: flex !important;
            order: 2;
            width: 100%;
            min-height: 130px;
            height: var(--vsplit-opciones-derecha) !important;
            flex: 0 0 var(--vsplit-opciones-derecha) !important;
        }

        body.modo-vertical.vertical-right-view .teclado {
            display: grid !important;
            order: 3;
            width: 100%;
            min-height: 180px;
            height: var(--vsplit-teclado-derecha) !important;
            flex: 0 0 var(--vsplit-teclado-derecha) !important;
        }

        body.modo-vertical.programa-externo-vertical.vertical-right-view .cabecera,
        body.modo-vertical.programa-externo-vertical.vertical-right-view .cuerpo,
        body.modo-vertical.programa-externo-vertical.vertical-right-view .cuerpo.expanded {
            display: none !important;
        }

        body.modo-vertical.programa-externo-vertical.vertical-right-view .opciones {
            display: flex !important;
            order: 2;
            width: 100%;
            min-height: 130px;
            height: var(--vsplit-opciones-derecha) !important;
            flex: 0 0 var(--vsplit-opciones-derecha) !important;
        }

        body.modo-vertical.programa-externo-vertical.vertical-right-view .teclado {
            display: grid !important;
            order: 3;
            width: 100%;
            min-height: 180px;
            height: var(--vsplit-teclado-derecha) !important;
            max-height: none !important;
            flex: 0 0 var(--vsplit-teclado-derecha) !important;
        }

        body.modo-vertical.programa-externo-vertical.vertical-left-view.vertical-left-view .opciones {
            display: none !important;
        }

        body.modo-vertical.programa-externo-vertical.vertical-left-view.vertical-left-view .cabecera {
            display: flex !important;
            order: 2 !important;
            width: 100% !important;
            height: var(--vext-cabecera) !important;
            min-height: 72px !important;
            flex: 0 0 var(--vext-cabecera) !important;
        }

        body.modo-vertical.programa-externo-vertical.vertical-left-view.vertical-left-view .cuerpo,
        body.modo-vertical.programa-externo-vertical.vertical-left-view.vertical-left-view .cuerpo.expanded {
            display: flex !important;
            order: 3 !important;
            width: 100% !important;
            min-height: 0 !important;
            height: calc(var(--vext-usable) - var(--vext-display) - var(--vext-cabecera) - var(--vext-teclado)) !important;
            flex: 0 0 calc(var(--vext-usable) - var(--vext-display) - var(--vext-cabecera) - var(--vext-teclado)) !important;
            overflow: hidden !important;
        }

        body.modo-vertical.programa-externo-vertical.vertical-left-view.vertical-left-view .teclado {
            display: grid !important;
            order: 4 !important;
            width: 100% !important;
            height: var(--vext-teclado) !important;
            min-height: var(--vext-teclado) !important;
            max-height: var(--vext-teclado) !important;
            flex: 0 0 var(--vext-teclado) !important;
        }

        body.modo-vertical.vertical-right-view.vertical-right-view:not(.tab-ventas-activa) .cabecera,
        body.modo-vertical.vertical-right-view.vertical-right-view:not(.tab-ventas-activa) .cuerpo,
        body.modo-vertical.vertical-right-view.vertical-right-view:not(.tab-ventas-activa) .cuerpo.expanded {
            display: none !important;
        }

        body.modo-vertical.vertical-right-view.vertical-right-view:not(.tab-ventas-activa) .opciones {
            display: flex !important;
            order: 2 !important;
            width: 100% !important;
            min-height: 130px !important;
            height: var(--vsplit-opciones-derecha) !important;
            max-height: none !important;
            flex: 0 0 var(--vsplit-opciones-derecha) !important;
        }

        body.modo-vertical.vertical-right-view.vertical-right-view:not(.tab-ventas-activa) .teclado {
            display: grid !important;
            position: static !important;
            order: 3 !important;
            width: 100% !important;
            min-height: 180px !important;
            height: var(--vsplit-teclado-derecha) !important;
            max-height: none !important;
            flex: 0 0 var(--vsplit-teclado-derecha) !important;
            box-shadow: var(--shadow) !important;
        }

        body.modo-vertical.vertical-right-view.vertical-right-view:not(.tab-ventas-activa) .tabs-opciones {
            display: flex !important;
        }

        body.modo-vertical.vertical-right-view.vertical-right-view:not(.tab-ventas-activa) .opciones-footer {
            display: block !important;
        }

        body.modo-vertical.vertical-right-view.vertical-right-view:not(.tab-ventas-activa) .opciones-contenido {
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 8px;
            min-height: 0;
        }

        body.modo-vertical.vertical-left-view.vertical-left-view:not(.tab-ventas-activa) .opciones {
            display: none !important;
        }

        body.modo-vertical.vertical-left-view.vertical-left-view:not(.tab-ventas-activa) .cabecera {
            display: flex !important;
            order: 2 !important;
            width: 100% !important;
            height: var(--vsplit-cabecera) !important;
            min-height: 72px !important;
            flex: 0 0 var(--vsplit-cabecera) !important;
        }

        body.modo-vertical.vertical-left-view.vertical-left-view:not(.tab-ventas-activa) .cuerpo,
        body.modo-vertical.vertical-left-view.vertical-left-view:not(.tab-ventas-activa) .cuerpo.expanded {
            display: flex !important;
            order: 3 !important;
            width: 100% !important;
            min-height: 0 !important;
            height: calc(var(--vsplit-usable) - var(--vsplit-display) - var(--vsplit-cabecera) - var(--vsplit-teclado)) !important;
            flex: 0 0 calc(var(--vsplit-usable) - var(--vsplit-display) - var(--vsplit-cabecera) - var(--vsplit-teclado)) !important;
            overflow: auto !important;
        }

        body.modo-vertical.vertical-left-view.vertical-left-view:not(.tab-ventas-activa) .teclado {
            display: grid !important;
            position: static !important;
            order: 4 !important;
            width: 100% !important;
            height: var(--vsplit-teclado) !important;
            min-height: var(--vsplit-teclado) !important;
            max-height: var(--vsplit-teclado) !important;
            flex: 0 0 var(--vsplit-teclado) !important;
            box-shadow: var(--shadow) !important;
        }

        body.modo-vertical.fase1 .cuerpo,
        body.modo-vertical.fase1 .cuerpo.expanded,
        body.modo-vertical .cuerpo-tab-panel.fondo-inicio {
            background-size: 100% 100% !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
        }

        @keyframes entrar {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 900px) {
            body {
                overflow: auto;
            }

            .contenedor {
                height: auto;
                min-height: 100vh;
            }

            .fila-superior {
                height: 86px;
            }

            .fila-inferior {
                flex-direction: column;
                height: calc(100vh - 118px);
            }

            .cabecera {
                width: 64%;
            }

            .display {
                width: 36%;
            }

            .display .titulo {
                padding-right: 90px;
                font-size: 15px;
            }

            body.modo-vertical .display .titulo {
                padding-right: 0;
                width: calc(100% - 112px);
                max-width: calc(100% - 112px);
                font-size: clamp(28px, 6.2vw, 46px);
                text-align: center;
            }

            body.modo-vertical.programa-externo-vertical .display .titulo {
                font-size: clamp(32px, 7vw, 54px);
            }

            .fecha-hora {
                font-size: 10px;
            }

            .cuerpo,
            .cuerpo.expanded {
                width: 100%;
                min-height: 52%;
            }

            .panel-derecho,
            .panel-derecho.hidden {
                width: 100%;
                min-height: 46%;
                padding: 0;
                overflow: visible;
            }

            .opciones,
            .teclado {
                min-height: 130px;
            }
        }

/* Hard-fix: en configuracion, garantizar clics en toda la zona */
body.config-mode #panelConfiguracion,
body.config-mode #panelConfiguracion * {
    pointer-events: auto !important;
}

body.config-mode #panelConfiguracion {
    position: relative;
    z-index: 80;
}