/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ARCHIVO: estilos.css                                            ║
   ║  Capítulo CSS — Estilos visuales del TPV                         ║
   ╠══════════════════════════════════════════════════════════════════╣
   ║ Qué hace este archivo:                                           ║
   ║   - Variables de color globales (:root)                          ║
   ║   - Estilos de login (1)                                         ║
   ║   - Estilos del resto de la app: header, carta, carrito,         ║
   ║     mesas, manager, modales, toasts, ticket impresión,           ║
   ║     copiloto IA, time picker, buscador de productos              ║
   ║                                                                  ║
   ║ Qué NO hace:                                                     ║
   ║   - NO contiene lógica JavaScript                                ║
   ║   - NO contiene HTML                                             ║
   ║                                                                  ║
   ║ Depende de:                                                      ║
   ║   - Nada. Es solo estilos.                                       ║
   ║                                                                  ║
   ║ Última modificación: 2026-05-02                                  ║
   ║ Motivo: extracción del monolito V13.51.1 a archivo aparte        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

        :root {
            --primary: #2563eb;
            --success: #22c55e;
            --danger: #ef4444;
            --bg-dark: #0f172a;
            --surface: #ffffff;
            --text: #0f172a;
            --text-light: #64748b;
            --border: #e2e8f0;
        }

        /* Ocultar flechas de los inputs numéricos (OTP) */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type=number] {
            -moz-appearance: textfield;
        }

        * { box-sizing: border-box; }

        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: var(--bg-dark);
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text);
            overflow: hidden;
        }

        /* --- 1. ESTILOS DE LOGIN (RECUPERADOS Y MEJORADOS) --- */

        #login-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg-dark); /* Fondo Azul Oscuro */
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-box {
            background: white;
            padding: 0;
            border-radius: 20px;
            width: 350px;
            height: 600px; /* <--- AUMENTADO A 600px PARA QUE QUEPA TODO */
            overflow: hidden;
            position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .login-slider {
            display: flex;
            width: 200%;
            height: 100%;
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        .login-view {
            width: 50%;
            height: 100%;
            padding: 40px 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }

        .login-view h2 { margin: 0 0 10px 0; font-size: 1.8rem; color: var(--text); }
        .login-view p { color: var(--text-light); margin: 0 0 25px 0; font-size: 0.95rem; }

        /* ESTILOS QUE FALTABAN (BOTONES Y INPUTS BONITOS) */
        .login-input {
            width: 100%;
            padding: 15px;
            margin-bottom: 12px;
            border: 2px solid var(--border);
            border-radius: 12px; /* Redondeado */
            font-size: 1rem;
            background: #f8fafc;
            outline: none;
            transition: 0.2s;
        }
        .login-input:focus {
            border-color: var(--primary); /* Azul al escribir */
            background: white;
        }

        .login-btn {
            width: 100%;
            padding: 16px;
            background: var(--primary); /* Azul intenso */
            color: white;
            border: none;
            border-radius: 12px; /* Redondeado */
            font-size: 1.1rem;
            font-weight: 800;
            cursor: pointer;
            margin-top: 15px;
            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
            transition: transform 0.1s;
        }
        .login-btn:active { transform: scale(0.98); }
        .login-btn:disabled { background: #94a3b8; cursor: not-allowed; }

        .slide-link {
            color: var(--primary);
            font-size: 0.9rem;
            text-decoration: none;
            font-weight: bold;
            margin-top: 20px;
            display: inline-block;
            cursor: pointer;
        }

        .recovery-step-2 {
            display: none;
            opacity: 0;
            transition: opacity 0.3s;
            margin-top: 10px;
            animation: fadeIn 0.5s forwards;
        }
        .recovery-step-2.visible { display: block; opacity: 1; }

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


        /* --- 2. ESTILOS DEL RESTO DE LA APP (NO TOCAR) --- */

        /* ESTILOS EDICIÓN CARRITO */
        .btn-edit-item {
            width: 100%; margin-top: 5px; background: white; border: 1px solid #cbd5e1; color: #475569;
            font-size: 0.75rem; font-weight: bold; border-radius: 6px; padding: 4px; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 4px; transition: 0.2s;
        }
        .btn-edit-item:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }

        .extra-chip-btn {
            background: white; border: 1px solid #cbd5e1; border-radius: 20px; padding: 8px 12px;
            font-size: 0.85rem; font-weight: bold; color: #475569; cursor: pointer; transition: 0.1s;
            display: flex; align-items: center; gap: 5px;
        }
        .extra-chip-btn:active { transform: scale(0.95); background: #eff6ff; border-color: #2563eb; color: #2563eb; }

        /* APP GENERAL */
        #app-container { display: none; width: 100%; height: 100%; position: relative; }
        .app-header { height: 60px; background: #0f172a; color: white; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; flex-shrink: 0; width: 100%; box-sizing: border-box; }
        .header-left { display: flex; align-items: center; gap: 10px; }
        .status-dot { width: 10px; height: 10px; background: var(--success); border-radius: 50%; display: inline-block; box-shadow: 0 0 5px var(--success); }
        .status-dot.offline { background: var(--danger); box-shadow: none; }
        .user-details { display: flex; flex-direction: column; line-height: 1.1; }
        .rest-name { font-weight: bold; font-size: 0.95rem; color: #fff; }
        .user-name { font-size: 0.75rem; color: #94a3b8; }
        .content-area { display: flex; width: 100%; height: calc(100% - 60px); overflow: hidden; }

        /* CARTA (PANEL IZQUIERDO) */
        .menu-panel { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }
        #categories-scroll { padding: 10px; display: flex; gap: 8px; overflow-x: auto; background: white; border-bottom: 1px solid var(--border); scrollbar-width: none; flex-shrink: 0; }
        .cat-btn { padding: 10px 18px; border: 1px solid var(--border); background: var(--bg); border-radius: 20px; font-weight: 600; color: #64748b; white-space: nowrap; }
        .cat-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
        #products-scroll { flex: 1; overflow-y: auto; padding: 15px; }
        #products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding-bottom: 80px; }

        .product-card { background: white; border-radius: 12px; padding: 0; text-align: center; border: 1px solid var(--border); height: 170px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); transition: transform 0.1s; }
        .product-card:active { transform: scale(0.96); border-color: var(--primary); }
        .prod-img { width: 100%; height: 90px; background-size: cover; background-position: center; background-color: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #cbd5e1; }
        .prod-info { padding: 8px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .prod-name { font-weight: 600; font-size: 0.85rem; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .prod-price { color: var(--primary); font-weight: 800; font-size: 1rem; margin-top: 4px; }

        /* TICKET (PANEL DERECHO) */
        .cart-panel { width: 350px; background: white; border-left: 1px solid var(--border); display: flex; flex-direction: column; height: 100%; z-index: 20; }
        #mobile-cart-btn { display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: #0f172a; color: white; padding: 15px 30px; border-radius: 30px; font-weight: bold; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); z-index: 100; align-items: center; gap: 10px; width: 80%; justify-content: center; }
        .cart-header { padding: 15px; border-bottom: 1px solid var(--border); background: #f8fafc; }
        .modality-row { display: flex; gap: 5px; margin-bottom: 10px; }
        .mod-btn { flex: 1; padding: 8px; border: 1px solid var(--border); background: white; border-radius: 6px; font-weight: 600; color: #64748b; font-size: 0.85rem; }
        .mod-btn.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-color: var(--primary); }
        .mod-btn:disabled { opacity: 0.4; cursor: not-allowed; background: #f1f5f9; color: #cbd5e1; border-color: #e2e8f0; }
        @keyframes modality-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
        .mod-btn.highlight-needed { animation: modality-pulse 1s ease-in-out 3; border-color: #ef4444 !important; color: #ef4444 !important; font-weight: 700 !important; }
        .cart-items-list { flex: 1; overflow-y: auto; padding: 10px; }
        .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--border); }
        .qty-control { display: flex; align-items: center; background: #f1f5f9; border-radius: 6px; }
        .qty-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary); cursor: pointer; }
        .qty-val { width: 25px; text-align: center; font-weight: bold; }
        .cart-footer { padding: 15px; border-top: 1px solid var(--border); background: white; }
        .checkout-btn { width: 100%; padding: 15px; background: var(--success); color: white; border: none; border-radius: 10px; font-weight: bold; font-size: 1.1rem; }
        .quick-sale-btn { width: 100%; padding: 15px; background: #6366f1; color: white; border: none; border-radius: 10px; font-weight: bold; font-size: 1.1rem; margin-top: 8px; cursor: pointer; }
        .quick-sale-btn:active { background: #4f46e5; }
        .dynamic-input { width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; resize: none; box-sizing: border-box; font-family: sans-serif; margin-top: 5px; }

        /* V14.18.0 — Overlay visual del teléfono (separación 3-3-3 sin tocar value) */
        /* V14.23.0 — Wrap pasa a flex porque ahora lleva selector país a la izquierda. */
        .telefono-input-wrap { position: relative; display: flex; align-items: stretch; margin-top: 5px; }
        .telefono-input-wrap > input[type="tel"] { margin-top: 0 !important; flex: 1; min-width: 0; }
        #telefono-input.telefono-input-real { color: transparent; caret-color: #1e293b; background: transparent; }
        #telefono-input.telefono-input-real::placeholder { color: #94a3b8; }
        #telefono-input-overlay {
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px;
            border: 2px solid transparent;
            border-radius: 8px;
            font-family: sans-serif;
            font-size: inherit;
            line-height: normal;
            box-sizing: border-box;
            pointer-events: none;
            color: #1e293b;
            white-space: nowrap;
            overflow: hidden;
            background: transparent;
            display: none;
        }

        /* V14.23.0 — Selector país (bandera + dial) para inputs de teléfono */
        [data-cx-phone] { position: relative; display: flex; align-items: stretch; gap: 0; }
        [data-cx-phone] > input[type="tel"] { flex: 1; min-width: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: none !important; padding-left: 14px; }
        .cx-cc-trigger {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 0 10px;
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-right: 1px solid #cbd5e1;
            border-radius: 8px 0 0 8px;
            cursor: pointer;
            font-size: 0.95rem;
            font-family: inherit;
            color: #1e293b;
            white-space: nowrap;
            user-select: none;
            min-height: 41px;
        }
        .cx-cc-trigger:hover { background: #f1f5f9; }
        .cx-cc-trigger:focus { outline: none; background: #f1f5f9; }
        .cx-cc-flag { font-size: 1.2rem; line-height: 1; }
        .cx-cc-dial { font-weight: 600; color: #475569; }
        .cx-cc-caret { color: #94a3b8; font-size: 0.75rem; }
        /* Overlay #telefono-input-overlay tiene que respetar el espacio del trigger */
        [data-cx-phone] #telefono-input-overlay { left: auto; right: 0; width: calc(100% - 80px); padding: 10px 10px 10px 14px; }
        .cx-cc-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            z-index: 100;
            width: 280px;
            max-width: 90vw;
            background: white;
            border: 2px solid #cbd5e1;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .cx-cc-search {
            width: 100%;
            padding: 10px 12px;
            border: none;
            border-bottom: 1px solid #e2e8f0;
            font-size: 0.95rem;
            outline: none;
            box-sizing: border-box;
            background: #f8fafc;
        }
        .cx-cc-list { max-height: 280px; overflow-y: auto; }
        .cx-cc-item {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 0.9rem;
            border-bottom: 1px solid #f1f5f9;
        }
        .cx-cc-item:hover { background: #eff6ff; }
        .cx-cc-item-flag { font-size: 1.1rem; }
        .cx-cc-item-name { flex: 1; color: #1e293b; }
        .cx-cc-item-dial { color: #64748b; font-variant-numeric: tabular-nums; }
        .cx-cc-empty { padding: 12px; color: #94a3b8; text-align: center; font-size: 0.85rem; }
        /* Variante para forms del manager (input con .form-input) */
        .cx-phone-form { display: flex; align-items: stretch; position: relative; }
        .cx-phone-form > input.form-input { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: none !important; flex: 1; min-width: 0; padding-left: 14px; }
        .cx-phone-form .cx-cc-trigger { background: #f8fafc; }

        /* VISTA SALA / MESAS */
        #room-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 50; flex-direction: column; }
        .room-top-bar { height: 60px; background: #0f172a; display: flex; align-items: center; padding: 0 15px; gap: 10px; border-bottom: 1px solid #334155; }
        .room-tabs-container { display: flex; gap: 5px; flex: 1; overflow-x: auto; }
        .room-tab { padding: 10px 20px; border-radius: 8px 8px 0 0; background: #1e293b; color: #94a3b8; border: none; cursor: pointer; font-weight: bold; transition: 0.2s; white-space: nowrap; }
        .room-tab.active { background: var(--bg); color: var(--primary); padding-top: 12px; margin-top: -2px; border-radius: 8px 8px 0 0; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); }
        .room-split-layout { display: flex; flex: 1; height: calc(100% - 60px); overflow: hidden; }
        .room-grid-area { flex: 7; padding: 20px; overflow-y: auto; background: #f1f5f9; border-right: 1px solid var(--border); }
        .tables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 15px; }
        .table-card { background: white; border-radius: 16px; border: 2px solid #e2e8f0; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: 0.1s; overflow: hidden; padding: 5px; }
        .table-card.free { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
        .table-card.free .t-icon { opacity: 0.7; }
        .table-card.occupied { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
        .table-total-badge { background: #dc2626; color: white; font-size: 0.75rem; font-weight: bold; padding: 2px 6px; border-radius: 8px; margin-top: 2px; }
        .room-sidebar { flex: 3; background: white; display: flex; flex-direction: column; min-width: 350px; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05); z-index: 10; }
        .sidebar-header { padding: 15px; border-bottom: 1px solid var(--border); background: #f8fafc; display: flex; justify-content: space-between; align-items: center; }
        .sidebar-title { font-size: 1.2rem; font-weight: 800; color: #0f172a; }
        .sidebar-content { flex: 1; overflow-y: auto; padding: 0; }
        .bill-item-row { display: flex; justify-content: space-between; padding: 10px 15px; border-bottom: 1px dashed #e2e8f0; font-size: 0.95rem; }
        .sidebar-footer { padding: 15px; background: white; border-top: 1px solid var(--border); }
        .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
        .big-btn { width: 100%; padding: 15px; border-radius: 8px; border: none; font-weight: bold; font-size: 1rem; cursor: pointer; color: white; display: flex; justify-content: center; align-items: center; gap: 5px; }
        .empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; text-align: center; padding: 20px; }
        .empty-icon { font-size: 4rem; margin-bottom: 20px; opacity: 0.3; }
        .order-row-card { background: white; padding: 15px; margin-bottom: 10px; border-radius: 8px; border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s; }
        .order-row-card.no-impreso { background: #fef2f2; border: 2px solid #ef4444; animation: pulseUnread 2s infinite; position: relative; }
        .order-row-card.no-impreso::before { content: '⚠️ SIN IMPRIMIR'; position: absolute; top: -10px; right: 10px; background: #ef4444; color: white; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; }
        @keyframes pulseUnread { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
        .order-row-card.pagado-online { background: #f0fdf4; border: 2px solid #22c55e; position: relative; }
        .order-row-card.pagado-online::before { content: '✅ PAGADO'; position: absolute; top: -10px; right: 10px; background: #22c55e; color: white; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; }
        .order-row-card.pagado-tpv { background: #f0fdf4; border: 2px solid #22c55e; position: relative; }
        .order-row-card.pagado-tpv::before { content: '✅ PAGADO'; position: absolute; top: -10px; right: 10px; background: #22c55e; color: white; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; }
        .order-row-card.en-reparto { background: #fefce8; border: 2px solid #eab308; position: relative; }
        .order-row-card.en-reparto::before { content: '🛵 EN REPARTO'; position: absolute; top: -10px; right: 10px; background: #eab308; color: white; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; }

        @media (max-width: 900px) {
            .cart-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; transform: translateY(100%); transition: transform 0.3s; }
            .cart-panel.open { transform: translateY(0); }
            #mobile-cart-btn { display: flex; }
            .main-panel { width: 100%; }
            .cart-close-bar { display: flex; justify-content: space-between; padding: 15px; background: #0f172a; color: white; align-items: center; }
            .room-content { flex-direction: column; }
        }
        @media (min-width: 901px) { .cart-close-bar { display: none; } }
        @media print { body > * { display: none !important; } #printable-area { display: block !important; position: absolute; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; background: white; color: black !important; z-index: 999999; } #printable-area * { visibility: visible; } @page { margin: 0; size: auto; } .no-print, button { display: none !important; } }

        /* TICKET PRINT */
        .ticket-container { width: 72mm; margin: 0 auto; padding: 0; font-family: Verdana, Arial, sans-serif; font-size: 12px; line-height: 1.2; color: black; font-weight: bold; }
        .ticket-logo { width: 40%; height: auto; display: block; margin: 5px auto; filter: grayscale(100%) contrast(150%); }
        .ticket-header { text-align: center; margin-bottom: 10px; }
        .ticket-legal { font-size: 11px; margin-bottom: 5px; }
        .ticket-divider { border-top: 2px dashed #000; margin: 8px 0; }
        .ticket-table { width: 100%; border-collapse: collapse; }
        .col-qty { width: 10%; vertical-align: top; }
        .col-prod { width: 65%; text-align: left; }
        .col-price { width: 25%; text-align: right; white-space: nowrap; }
        .ticket-total { font-size: 18px; font-weight: 900; text-align: right; margin-top: 10px; }
        .ticket-footer { text-align: center; margin-top: 15px; font-size: 11px; margin-bottom: 20px; }

        .item-controls { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
        .mini-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #cbd5e1; background: white; font-weight: bold; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #475569; transition: 0.1s; }
        .mini-btn:active { transform: scale(0.95); background: #f1f5f9; }
        .mini-btn.add { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
        .mini-btn.del { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
        #btn-quitar { display: none !important; }

        #toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
        .toast-msg { background: #1e293b; color: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); font-weight: 600; display: flex; align-items: center; gap: 10px; animation: slideIn 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); min-width: 250px; border-left: 5px solid #3b82f6; pointer-events: auto; }
        .toast-msg.success { border-color: #22c55e; }
        .toast-msg.error { border-color: #ef4444; }
        @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

        #confirm-overlay { display: none;
        position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.8); z-index: 25000; align-items: center;
        justify-content: center; backdrop-filter: blur(4px); }
        .confirm-box { background: white; width: 90%; max-width: 400px; padding: 25px; border-radius: 16px; text-align: center; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); animation: popIn 0.2s ease-out; }
        @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .confirm-title { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
        .confirm-text { color: #64748b; font-size: 1rem; margin-bottom: 25px; line-height: 1.5; }
        .confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .btn-conf { padding: 15px; border-radius: 10px; font-weight: bold; border: none; font-size: 1rem; cursor: pointer; }
        .btn-conf.cancel { background: #f1f5f9; color: #475569; }
        .btn-conf.ok { background: #0f172a; color: white; }

        .diner-bar { display: flex; gap: 8px; padding: 10px; background: #e2e8f0; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid #cbd5e1; align-items: center; }
        .diner-tab { padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; border: 1px solid #cbd5e1; background: white; color: #64748b; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
        .diner-tab.active { background: #2563eb; color: white; border-color: #1d4ed8; box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3); }
        .diner-add-input { width: 80px; padding: 6px 10px; border-radius: 20px; border: 1px solid #cbd5e1; font-size: 0.85rem; outline: none; transition: width 0.3s; }
        .diner-add-input:focus { width: 120px; border-color: #2563eb; }
        .split-filter-bar { display: flex; gap: 5px; padding: 10px; background: #f1f5f9; overflow-x: auto; border-bottom: 1px solid #e2e8f0; margin-bottom: 10px; }
        .split-tab { padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: bold; border: 1px solid #cbd5e1; background: white; color: #475569; cursor: pointer; white-space: nowrap; transition: 0.1s; }
        .split-tab.selected { background: #8b5cf6; color: white; border-color: #7c3aed; }

        /* ESTILOS MANAGER (RESTO) */
        #manager-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0f172a; z-index: 9000; flex-direction: column; overflow: hidden; }
        .manager-top-bar { height: 60px; background: #0f172a; border-bottom: 1px solid #334155; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; color: white; }
        .manager-layout { display: flex; flex: 1; height: calc(100% - 60px); overflow: hidden; background: #f1f5f9; }
        .manager-layout > .tab-content { overflow: hidden; }
        .manager-sidebar { width: 320px; height: 100%; background: #1e293b; border-right: 1px solid #334155; display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; overflow: hidden; }
        .manager-search-box { padding: 15px; border-bottom: 1px solid #334155; }
        .manager-list { flex: 1 1 0px; overflow-y: auto; padding: 0; min-height: 0; }
        .man-item { padding: 15px; border-bottom: 1px solid #334155; cursor: pointer; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; color: #cbd5e1; }
        .man-item:hover { background: #334155; }
        .man-item.selected { background: #2563eb; color: white; border-color: #1d4ed8; }
        .man-item-info h4 { margin: 0; font-size: 0.95rem; font-weight: 600; }
        .man-item-info p { margin: 3px 0 0 0; font-size: 0.8rem; opacity: 0.7; }
        .manager-content { flex: 1; padding: 30px; overflow-y: auto; display: flex; justify-content: center; }
        .editor-card { width: 100%; max-width: 800px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); height: fit-content; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .form-full { grid-column: 1 / -1; }
        .form-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #475569; font-size: 0.85rem; text-transform: uppercase; }
        .form-input { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; box-sizing: border-box; transition: 0.2s; background: #fff; color: #0f172a; }
        .form-input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
        textarea.form-input { resize: vertical; min-height: 80px; font-family: sans-serif; }
        .toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked+.slider { background-color: #22c55e; }
        input:checked+.slider:before { transform: translateX(24px); }
        .manager-tab-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 5px 0;
    flex: 1;
}

.manager-tab-scroll::-webkit-scrollbar {
    display: none;
}

.manager-tab-btn {
    background: transparent;
    color: #94a3b8;
    border: 1px solid transparent;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
        .manager-tab-btn:hover { color: white; background: #334155; }
        .manager-tab-btn.active { background: #2563eb; color: white; }
        .manager-cat-scroll { display: flex; gap: 8px; padding: 10px 15px; overflow-x: auto; background: #0f172a; border-bottom: 1px solid #334155; white-space: nowrap; scrollbar-width: none; flex-shrink: 0; }
        .man-cat-chip { padding: 6px 14px; border-radius: 20px; background: #1e293b; color: #94a3b8; border: 1px solid #334155; font-size: 0.75rem; font-weight: bold; cursor: pointer; transition: 0.2s; }
        .man-cat-chip:hover { background: #334155; color: white; }
        .man-cat-chip.active { background: #2563eb; color: white; border-color: #3b82f6; box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3); }
        .menu-col { flex: 1; min-width: 250px; background: #e2e8f0; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #cbd5e1; }
        .menu-col-header { background: #1e293b; color: white; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 0.9rem; }
        .menu-col-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
        .btn-add-mini { background: #2563eb; color: white; border: none; width: 30px; height: 30px; border-radius: 6px; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
        .btn-add-mini:hover { background: #3b82f6; }
        .menu-dish-card { background: white; border-radius: 8px; padding: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); cursor: default; transition: 0.1s; border: 2px solid transparent; }
        .menu-dish-card h4 { margin: 0; font-size: 0.95rem; color: #334155; font-weight: 600; }
        .delete-mode .menu-dish-card { cursor: pointer; border-color: #fca5a5; }
        .delete-mode .menu-dish-card:hover { background: #fef2f2; }
        .delete-mode .menu-dish-card.selected { background: #fee2e2; border-color: #dc2626; opacity: 0.8; }
        .btn-ai-mini { background: linear-gradient(135deg, #8b5cf6, #d946ef); color: white; border: none; width: 30px; height: 30px; border-radius: 6px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; box-shadow: 0 2px 5px rgba(139, 92, 246, 0.3); }
        .btn-ai-mini:hover { transform: scale(1.1); box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); }
        .btn-ai-mini:active { transform: scale(0.95); }
        .day-btn { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #cbd5e1; background: white; color: #64748b; font-weight: bold; cursor: pointer; font-size: 1rem; transition: 0.2s; }
        .day-btn.active { background: #2563eb; color: white; border-color: #2563eb; box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.4); transform: translateY(-2px); }
        .day-btn:hover:not(.active) { background: #f1f5f9; }
        .swal2-container { z-index: 20000 !important; }
        .room-canvas-container { width: 100%; height: 600px; background-color: #e2e8f0; background-image: linear-gradient(45deg, #cbd5e1 25%, transparent 25%), linear-gradient(-45deg, #cbd5e1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cbd5e1 75%), linear-gradient(-45deg, transparent 75%, #cbd5e1 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; position: relative; border: 2px solid #94a3b8; border-radius: 8px; overflow: hidden; margin-top: 15px; }
        .draggable-table { width: 85px; height: 85px; background: white; border: 2px solid #cbd5e1; border-radius: 16px; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: grab; box-shadow: 0 4px 6px rgba(0,0,0,0.05); user-select: none; transition: transform 0.1s; z-index: 10; padding: 5px; box-sizing: border-box; }
        .draggable-table:active { cursor: grabbing; transform: scale(1.1); border-color: #2563eb; box-shadow: 0 10px 20px rgba(0,0,0,0.2); z-index: 100; }
        .t-icon { font-size: 2rem; line-height: 1; margin-bottom: 2px; }
        .t-name { font-weight: 800; font-size: 1rem; color: #0f172a; background: #f1f5f9; padding: 2px 8px; border-radius: 10px; min-width: 30px; text-align: center; }
        .btn-mini-del { background: #ef4444; color: white; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 10px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        #calc-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.85); z-index: 12000; align-items: center; justify-content: center; backdrop-filter: blur(5px); animation: fadeIn 0.2s ease-out; }
        .calc-box { background: #1e293b; padding: 25px; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); width: 320px; border: 1px solid #334155; }
        .calc-display { background: #0f172a; color: white; font-family: 'Courier New', monospace; font-size: 2.5rem; text-align: right; padding: 20px; border-radius: 16px; margin-bottom: 20px; border: 2px solid #334155; overflow-x: auto; white-space: nowrap; min-height: 80px; display: flex; align-items: center; justify-content: flex-end; }
        .calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .calc-btn { padding: 20px; border-radius: 14px; border: none; font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: transform 0.1s, background 0.2s; user-select: none; display: flex; align-items: center; justify-content: center; }
        .calc-btn:active { transform: scale(0.95); }
        .btn-num { background: #334155; color: white; box-shadow: 0 4px 0 #1e293b; }
        .btn-num:hover { background: #475569; }
        .btn-op { background: #8b5cf6; color: white; box-shadow: 0 4px 0 #6d28d9; }
        .btn-op:hover { background: #a78bfa; }
        .btn-eq { background: #22c55e; color: white; grid-column: span 2; box-shadow: 0 4px 0 #15803d; }
        .btn-eq:hover { background: #4ade80; }
        .btn-clr { background: #ef4444; color: white; box-shadow: 0 4px 0 #b91c1c; }
        .btn-clr:hover { background: #f87171; }
        .btn-close-calc { width: 100%; margin-top: 20px; background: transparent; border: 1px solid #475569; color: #94a3b8; padding: 10px; border-radius: 10px; cursor: pointer; font-weight: bold; transition: 0.2s; }
        .btn-close-calc:hover { background: rgba(255,255,255,0.1); color: white; }

        /* ========================================= */
        /* COPILOTO IA COMANDIX - DISEÑO             */
        /* ========================================= */
        #copilot-fab {
            position: fixed;
            bottom: 30px;
            left: 30px; /* <-- CAMBIADO: Antes era right */
            width: 65px;
            height: 65px;
            border-radius: 50%;
            /* COLOR NARANJA APLICADO AQUÍ */
            background: linear-gradient(135deg, #C8752F, #a65d22);
            color: white;
            font-size: 2rem;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            /* SOMBRA NARANJA (RGBA de #C8752F) */
            box-shadow: 0 10px 25px rgba(200, 117, 47, 0.4);
            z-index: 9999;
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
            opacity: 0.4;
        }
        #copilot-fab:hover { opacity: 1; transform: scale(1.05); box-shadow: 0 15px 30px rgba(200, 117, 47, 0.6); }
        #copilot-fab:active { transform: scale(0.95); }

        #copilot-window {
            position: fixed;
            bottom: 110px;
            left: 30px; /* <-- CAMBIADO: Antes era right */
            width: 360px;
            height: 500px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            display: none;
            flex-direction: column;
            overflow: hidden;
            z-index: 10000;
            border: 1px solid #e2e8f0;
            transform-origin: bottom left; /* Para que la animación nazca desde el botón */
            animation: slideUpFade 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        @keyframes slideUpFade { from { opacity: 0; transform: translateY(30px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

        .copilot-header {
            background: #0f172a;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .copilot-header h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }

        .copilot-body {
            flex: 1;
            padding: 20px 15px;
            overflow-y: auto;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .msg-bubble {
            padding: 12px 16px;
            border-radius: 14px;
            font-size: 0.95rem;
            max-width: 85%;
            line-height: 1.4;
            animation: popIn 0.2s ease-out;
            word-wrap: break-word;
        }
        .msg-bubble.user { background: #2563eb; color: white; align-self: flex-end; border-bottom-right-radius: 2px; }
        .msg-bubble.ai { background: white; color: #334155; align-self: flex-start; border-bottom-left-radius: 2px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
        .msg-bubble.ai strong { color: #0f172a; }

        .copilot-footer {
            padding: 12px;
            background: white;
            border-top: 1px solid #e2e8f0;
            display: flex;
            gap: 8px;
        }
        .copilot-input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid #cbd5e1;
            border-radius: 25px;
            outline: none;
            font-size: 0.95rem;
            transition: 0.2s;
        }
        /* BORDE DEL INPUT AL ESCRIBIR */
        .copilot-input:focus { border-color: #C8752F; }

        .copilot-send-btn {
            /* BOTÓN DE ENVIAR NARANJA */
            background: linear-gradient(135deg, #C8752F, #a65d22);
            color: white;
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            transition: transform 0.1s;
        }
        .copilot-send-btn:active { transform: scale(0.9); }

        /* Pensando animación */
        .typing-indicator { display: flex; gap: 4px; padding: 12px 16px; background: #e2e8f0; border-radius: 14px; align-self: flex-start; border-bottom-left-radius: 2px; width: fit-content; }
        .typing-indicator span { width: 6px; height: 6px; background: #94a3b8; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

        @media (max-width: 900px) {
            #copilot-window { width: 90%; left: 5%; bottom: 100px; height: 60vh; } /* <-- CAMBIADO: Antes era right */
            #copilot-fab { bottom: 90px; left: 20px; width: 55px; height: 55px; font-size: 1.5rem; } /* <-- CAMBIADO: Antes era right */
        }

    /* Estilos específicos para los Chips de Historial */
    .filter-chip {
        border: 1px solid #cbd5e1;
        background: white;
        color: #64748b;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 0.85rem;
        cursor: pointer;
        transition: 0.2s;
        white-space: nowrap;
    }
    .filter-chip.active {
        background: #0f172a;
        color: white;
        border-color: #0f172a;
        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.3);
    }
    .ticket-card {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: 0.2s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .ticket-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        border-color: #2563eb;
    }

    /* TIME PICKER - Hora de recogida */
    #btn-time-picker {
        background: #334155; border: none; border-radius: 6px; color: #94a3b8;
        font-size: 1.1rem; width: 34px; min-width: 34px; height: 34px; cursor: pointer;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        transition: background 0.15s;
    }
    #btn-time-picker:active { background: #475569; color: white; }
    #time-picker-popup {
        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.6); z-index: 9999;
        align-items: center; justify-content: center;
    }
    #time-picker-popup.tp-open { display: flex; }
    .time-picker-box {
        background: #1e293b; border: 1px solid #334155; border-radius: 16px;
        padding: 24px 32px; text-align: center;
        box-shadow: 0 20px 40px rgba(0,0,0,0.5); min-width: 260px;
    }
    .time-picker-title { color: #e2e8f0; font-size: 1rem; font-weight: 700; margin-bottom: 20px; }
    .time-spinner-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; }
    .time-spinner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .spinner-btn {
        background: #334155; border: none; border-radius: 8px; color: #94a3b8;
        font-size: 1.1rem; width: 52px; height: 40px; cursor: pointer;
        user-select: none; transition: background 0.1s; -webkit-user-select: none;
    }
    .spinner-btn:active { background: #475569; color: white; }
    .spinner-val {
        background: #0f172a; color: #f1f5f9; font-size: 2rem; font-weight: 800;
        width: 72px; text-align: center; border-radius: 10px; padding: 10px 0;
        border: 2px solid #334155;
    }
    .time-colon { color: #94a3b8; font-size: 2rem; font-weight: 800; margin-bottom: 4px; }
    .time-picker-actions { display: flex; gap: 10px; }
    .tp-btn {
        flex: 1; padding: 12px; border: none; border-radius: 8px;
        font-weight: 700; font-size: 0.95rem; cursor: pointer;
    }
    .tp-btn-cancel { background: #334155; color: #94a3b8; }
    .tp-btn-cancel:active { background: #475569; }
    .tp-btn-confirm { background: #22c55e; color: white; }
    .tp-btn-confirm:active { background: #16a34a; }
    /* V14.11.0 — pestañas (modo "En minutos" / "A las HH:MM") */
    .tp-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
    .tp-tab {
        flex: 1; background: #0f172a; border: 1px solid #334155; color: #94a3b8;
        border-radius: 8px; padding: 8px 6px; font-size: 0.85rem; font-weight: 600;
        cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .tp-tab:active { background: #1e293b; }
    .tp-tab.tp-tab-active {
        background: #2563eb; color: white; border-color: #2563eb;
    }
    .tp-unit {
        margin-top: 4px; color: #64748b; font-size: 0.72rem; font-weight: 600;
        letter-spacing: 0.04em;
    }
    .tp-preview {
        margin: -4px 0 18px 0; color: #22c55e; font-size: 1rem; font-weight: 700;
        text-align: center; min-height: 1.4em;
    }

    /* ========================================= */
    /* BUSCADOR DISCRETO DE PRODUCTOS (OVERLAY)  */
    /* ========================================= */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    #search-bar-container {
        display: none;
        position: absolute;
        top: 60px; /* justo debajo del header */
        left: 0;
        width: 100%;
        z-index: 100;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 8px 15px;
        animation: slideDown 0.2s ease-out;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    }
    .search-bar-inner {
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: 600px;
        margin: 0 auto;
    }
    .search-bar-inner .form-input {
        flex: 1;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 6px 0;
        font-size: 1rem;
        color: #0f172a;
        outline: none;
    }
    .search-bar-inner .form-input::placeholder {
        color: #94a3b8;
    }
    .search-close-btn {
        background: #ef4444;
        border: none;
        color: white;
        font-size: 1.4rem;
        font-weight: bold;
        cursor: pointer;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: 0.15s;
    }
    .search-close-btn:hover {
        background: #dc2626;
    }

    /* ============================================================ */
    /* V14.5.0 — Mitad "perdedora" en variante 1/2 y 1/2 (estrategia */
    /* "mayor"): cubierta por la otra mitad y por tanto GRATIS para  */
    /* el cliente. Wrapper alrededor de cabecera, extras y SINs de la */
    /* mitad perdedora, en carrito y vista mesa.                      */
    /* ============================================================ */
    .mitad-gratis-tpv {
        opacity: 0.55;
        background: rgba(34, 197, 94, 0.06);
        border-left: 3px solid #22c55e;
        padding: 4px 6px;
        margin-top: 4px;
        border-radius: 4px;
    }
    .mitad-gratis-tpv > div {
        opacity: 1; /* evita doble atenuación */
    }

/* ============================================================ */
/* V14.14.1 — Stepper "Veces que se imprime el ticket de cocina" */
/* En GESTIÓN → LOCAL → Impresión en Cocina. Min 1, max 5.       */
/* ============================================================ */
.vic-stepper-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.vic-stepper-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .15s, transform .05s;
    color: #0f172a;
}
.vic-stepper-btn:hover:not(:disabled) {
    background: #e2e8f0;
}
.vic-stepper-btn:active:not(:disabled) {
    transform: scale(0.95);
}
.vic-stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.vic-stepper-val {
    font-size: 1.5rem;
    font-weight: bold;
    min-width: 36px;
    text-align: center;
    color: #0f172a;
    padding: 0 4px;
}