/* ======================================= */ /* tablet-mode.css */ /* SOLO APLICA CUANDO tenga */ /* la clase 'tablet-mode' */ /* ======================================= */ /* ===== Antiflash: desactivar transiciones solo en el primer paint ===== */ /* Esta clase 'tm-preinit' se pone en desde el Head antes de cargar CSS */ html.tm-preinit body.tablet-mode .nav-lateral, html.tm-preinit body.tablet-mode .page-container, html.tm-preinit body.tablet-mode .full-box.page-content, html.tm-preinit body.tablet-mode .main-container > .page-content { transition: none !important; } /* 1) EVITAR SCROLL HORIZONTAL INESPERADO */ body.tablet-mode { overflow-x: hidden; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; background: #f5f8fa; } /* 2) CONTRAER LA BARRA LATERAL */ body.tablet-mode .nav-lateral { position: fixed; top: 0; bottom: 0; left: 0; width: 60px !important; min-width: 60px !important; z-index: 999; overflow: hidden; transition: width 0.2s; background: linear-gradient(180deg, #254063 0%, #2e3b4e 100%); box-shadow: 2px 0 12px rgba(20,40,70,0.08); } body.tablet-mode .nav-lateral-avatar figcaption { display: none !important; } body.tablet-mode .nav-lateral-avatar img { width: 44px; height: 44px; margin: 8px auto 0; border-radius: 50%; border: 2px solid #1a73e8; } body.tablet-mode .nav-lateral-avatar i.show-nav-lateral { font-size: 1.3rem; margin-top: 5px; display: block; color: #fff; border-radius: 50%; padding: 4px; transition: background 0.2s; } body.tablet-mode .nav-lateral-avatar i.show-nav-lateral:hover { background: rgba(255,255,255,0.1); } body.tablet-mode .nav-lateral-bar { display: none !important; } body.tablet-mode .nav-lateral-menu a { display: flex !important; justify-content: center !important; align-items: center !important; padding: 0.75rem !important; font-size: 0; white-space: nowrap; transition: background 0.2s; border-radius: 10px 0 0 10px; margin: 0.15rem 0; } body.tablet-mode .nav-lateral-menu a:hover { background: rgba(26, 115, 232, 0.12) !important; } body.tablet-mode .nav-lateral-menu a i { font-size: 1.25rem !important; color: #fff !important; border-radius: 50%; padding: 7px; } /* Oculta submenús por defecto */ body.tablet-mode .nav-lateral-menu ul ul { display: none; } /* Muestra el submenú cuando el

recibe la clase de apertura */ body.tablet-mode .nav-lateral-menu li.show-nav-lateral-submenu > ul { display: block !important; } /* 2.1) EXPANDIR BARRA AL HACER HOVER PARA VER TEXTO */ body.tablet-mode .nav-lateral { width: 60px; transition: width 0.2s; } body.tablet-mode .nav-lateral:hover { width: 200px !important; } /* 2.2) AJUSTAR ENLACES CUANDO LA BARRA ESTÁ EXPANDIDA */ body.tablet-mode .nav-lateral:hover .nav-lateral-menu a { font-size: 0.95rem !important; /* restaura el tamaño de texto */ justify-content: flex-start !important; padding: 0.75rem 1rem !important; /* espacio a izquierda para el texto */ } /* 2.3) MOSTRAR EL NOMBRE DE AVATAR EN HOVER */ body.tablet-mode .nav-lateral-avatar figcaption { display: none !important; } body.tablet-mode .nav-lateral:hover .nav-lateral-avatar figcaption { display: block !important; font-size: 0.9rem; text-align: center; margin-top: 0.5rem; } /* 2.4) POP-OUT DE SUBMENÚS (opcional) */ body.tablet-mode .nav-lateral-menu li { position: relative; } body.tablet-mode .nav-lateral-menu li.show-nav-lateral-submenu > ul { position: absolute; top: 0; left: 200px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 6px; padding: 0.5rem 0; display: block !important; z-index: 1000; } body.tablet-mode .nav-lateral-menu li.show-nav-lateral-submenu > ul a { display: block; padding: 0.6rem 1rem; white-space: nowrap; color: #254063; } body.tablet-mode .nav-lateral-menu li.show-nav-lateral-submenu > ul a:hover { background: #e3e8ee; } /* 3) AJUSTAR CONTENEDOR PRINCIPAL */ body.tablet-mode .page-container, body.tablet-mode .full-box.page-content { margin-left: 60px !important; transition: margin-left 0.2s; } body.tablet-mode .main-container > .page-content { margin-left: 60px !important; width: calc(100% - 60px) !important; padding: 0 !important; } /* 4) ESTILOS PARA VENTA RÁPIDA */ /* 4.0) BARRA SUPERIOR: BÚSQUEDA Y CATEGORÍAS */ body.tablet-mode .qs-header-toolbar { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(60,70,130,0.04); padding: 0.7rem 1.4rem; gap: 1rem; margin-bottom: 18px; } body.tablet-mode .qs-search-container { display: flex; align-items: center; flex: 1 1 320px; gap: 0.6rem; } body.tablet-mode .qs-search-container .qs-input { margin-bottom: 0; border-radius: 8px; padding: 10px 12px; font-size: 1rem; border: 1px solid #ccd8e2; background: #f6fbff; transition: border 0.2s; } body.tablet-mode .qs-search-container .qs-input:focus { border-color: #1a73e8; outline: none; background: #fff; } body.tablet-mode .qs-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } body.tablet-mode .qs-categories .qs-category-chip { padding: 0.46rem 1.2rem; background: #e3f2fd; border-radius: 999px; font-size: 0.96rem; font-weight: 600; color: #1565c0; cursor: pointer; box-shadow: 0 2px 8px rgba(26,115,232,0.08); transition: background .18s, transform .17s, color .18s; border: 1.5px solid transparent; } body.tablet-mode .qs-categories .qs-category-chip:hover { background: #b3e5fc; transform: translateY(-2px) scale(1.04); color: #0d47a1; } body.tablet-mode .qs-categories .qs-category-chip.active { background: linear-gradient(90deg, #2196f3 50%, #1565c0 100%); color: #fff; border: 1.5px solid #1976d2; box-shadow: 0 6px 16px rgba(33,150,243,0.13); } /* 4.1) GRID DE PRODUCTOS */ body.tablet-mode .qs-products { flex: 4; display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 28px; overflow-y: auto; background: #f5f8fa; padding: 22px; border-radius: 18px; min-height: 500px; box-shadow: 0 6px 20px rgba(60,80,130,0.07); margin-bottom: 10px; } /* Animación carga */ body.tablet-mode .qs-loading { font-size: 1.09rem; color: #666; text-align: center; padding: 42px 0; position: relative; } body.tablet-mode .qs-loading::after { content: ""; display: block; width: 36px; height: 36px; margin: 18px auto 0; border: 5px solid #cfd8dc; border-top-color: #1a73e8; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* 4.1.1) TARJETA DE PRODUCTO */ body.tablet-mode .qs-product-card { background: linear-gradient(130deg, #fff 85%, #f3f8ff 100%); border-radius: 17px; box-shadow: 0 3px 18px rgba(26, 115, 232, 0.07); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 18px 16px 13px 16px; cursor: pointer; min-height: 274px; border: 1.5px solid #e3e8ee; transition: transform 0.26s, box-shadow 0.26s, border-color 0.2s; position: relative; } body.tablet-mode .qs-product-card:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 8px 30px rgba(33,150,243,0.13); border-color: #2196f3; z-index: 2; } body.tablet-mode .qs-product-card:active { transform: scale(0.97); } body.tablet-mode .qs-product-card img { max-width: 110px; max-height: 110px; margin: 0 auto 12px auto; border-radius: 13px; box-shadow: 0 1px 7px rgba(21,101,192,0.07); object-fit: cover; background: #f7fafc; transition: filter 0.25s; } body.tablet-mode .qs-product-card[data-stock="0"] img, body.tablet-mode .qs-product-card.disabled img { filter: grayscale(0.75) blur(1px) opacity(0.6); } body.tablet-mode .qs-product-card .qs-product-id { position: absolute; top: 8px; left: 10px; background: #e3f2fd; color: #1976d2; font-size: 0.80rem; padding: 2px 8px; border-radius: 6px; font-weight: 500; opacity: 0.9; z-index: 3; pointer-events: none; } body.tablet-mode .qs-product-card .qs-product-name { font-size: 1.07rem; text-align: center; font-weight: 700; color: #1b2430; margin: 8px 0 2px 0; line-height: 1.24; flex: none; min-height: 34px; } body.tablet-mode .qs-product-card .qs-product-stock { font-size: 0.93rem; color: #458b5c; margin: 2px 0; text-align: center; font-weight: 500; background: #e8f5e9; padding: 2px 8px; border-radius: 8px; display: inline-block; margin-bottom: 2px; } body.tablet-mode .qs-product-card .qs-product-price { margin: 10px auto 0 auto; font-size: 1.18rem; font-weight: bold; color: #fff; background: linear-gradient(90deg, #00c6ff, #1976d2); padding: 6px 20px; border-radius: 8px; box-shadow: 0 2px 9px rgba(33,150,243,0.13); display: inline-block; text-align: center; } body.tablet-mode .qs-product-card.disabled, body.tablet-mode .qs-product-card[data-stock="0"] { opacity: 0.48; pointer-events: none; filter: grayscale(0.5); } /* 4.2) SECCIÓN DE TICKET */ body.tablet-mode .qs-ticket { flex: 1; background: #fff; border-left: 1.5px solid #e3e8ee; display: flex; flex-direction: column; height: 100%; padding: 22px 20px 16px 20px; border-radius: 18px; box-shadow: 0 3px 18px rgba(60,70,130,0.03); } body.tablet-mode .qs-ticket .qs-ticket-header { font-size: 1.43rem; font-weight: 700; text-align: center; border-bottom: 1.5px solid #e3e8ee; padding-bottom: 8px; margin-bottom: 16px; color: #2e3b4e; } body.tablet-mode .qs-ticket .qs-control-panel { padding-bottom: 16px; border-bottom: 1.5px solid #e3e8ee; } body.tablet-mode .qs-ticket .qs-control-panel .qs-field { margin-bottom: 15px; } body.tablet-mode .qs-ticket .qs-control-panel label { display: block; font-size: 1.01rem; font-weight: 600; margin-bottom: 6px; color: #1a237e; } body.tablet-mode .qs-ticket .qs-control-panel .qs-row { display: flex; gap: 14px; flex-wrap: wrap; } body.tablet-mode .qs-ticket .qs-control-panel .qs-col { flex: 1; min-width: 148px; } body.tablet-mode .qs-ticket .qs-input { width: 100%; padding: 10px 11px; border: 1.3px solid #ccd8e2; border-radius: 7px; background: #f7fafc; font-size: 1rem; transition: border 0.18s; } body.tablet-mode .qs-ticket .qs-input:focus { border-color: #1a73e8; background: #fff; } body.tablet-mode .qs-ticket .qs-input[disabled] { background: #f5f5f5; color: #8d99ae; } /* TABLA DE ÍTEMS */ body.tablet-mode .qs-table { width: 100%; border-collapse: collapse; background: #fafcff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(33,150,243,0.03); } body.tablet-mode .qs-table thead { background: linear-gradient(90deg, #2196f3 60%, #1565c0 100%); color: #fff; position: sticky; top: 0; z-index: 2; } body.tablet-mode .qs-table th, body.tablet-mode .qs-table td { padding: 13px 10px; text-align: left; font-size: 0.97rem; border-bottom: 1px solid #e3e8ee; } body.tablet-mode .qs-table th:last-child, body.tablet-mode .qs-table td:last-child { text-align: center; } body.tablet-mode .qs-empty { text-align: center; color: #666; padding: 32px 0; font-size: 1rem; } /* TOTAL Y BOTONES */ body.tablet-mode .qs-ticket-footer { border-top: 1.5px solid #e3e8ee; padding-top: 17px; margin-top: auto; } body.tablet-mode .qs-total { font-size: 1.41rem; font-weight: 700; text-align: right; color: #1a237e; margin-bottom: 22px; } body.tablet-mode .qs-btn { width: 100%; border: none; border-radius: 10px; cursor: pointer; transition: background 0.23s, transform 0.12s, box-shadow 0.16s; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; font-size: 1.13rem; background: #f1f4f7; color: #254063; box-shadow: 0 2px 6px rgba(26,115,232,0.03); } body.tablet-mode .qs-btn:active { transform: scale(0.98); } body.tablet-mode .qs-btn i { border-radius: 50%; padding: 7px; background: rgba(26,115,232,0.10); transition: background 0.18s; } body.tablet-mode .qs-btn:hover i { background: rgba(26,115,232,0.17); } body.tablet-mode .qs-btn:focus { outline: 2px solid #1a73e8; outline-offset: 1px; } /* Botón principal de cobro */ body.tablet-mode .qs-btn-pay { background: linear-gradient(90deg, #00c6ff 60%, #1976d2 100%); color: #fff; font-size: 1.21rem; box-shadow: 0 4px 13px rgba(26,115,232,0.12); letter-spacing: 0.02em; border: none; } body.tablet-mode .qs-btn-pay:hover { background: linear-gradient(90deg, #1976d2 70%, #00c6ff 100%); filter: brightness(1.07); } body.tablet-mode .qs-btn-pay:disabled { background: #9aa0a6; cursor: not-allowed; opacity: 0.6; color: #e3e3e3; } /* Botón limpiar ticket */ body.tablet-mode .qs-btn-clear { background: linear-gradient(90deg, #ff6b6b 70%, #e53935 100%); color: #fff; font-size: 1.08rem; margin-top: 14px; box-shadow: 0 4px 13px rgba(255,107,107,0.11); border: none; } body.tablet-mode .qs-btn-clear:hover { background: linear-gradient(90deg, #e53935 90%, #ff6b6b 100%); filter: brightness(1.07); } /* 5) SCROLLBAR PERSONALIZADA */ body.tablet-mode .qs-products::-webkit-scrollbar, body.tablet-mode .qs-ticket-items::-webkit-scrollbar { width: 9px; } body.tablet-mode .qs-products::-webkit-scrollbar-thumb, body.tablet-mode .qs-ticket-items::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #b3e5fc 0%, #1976d2 100%); border-radius: 6px; transition: background 0.22s; } body.tablet-mode .qs-products::-webkit-scrollbar-thumb:hover, body.tablet-mode .qs-ticket-items::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #1976d2 0%, #1565c0 100%); } /* 6) TÍTULOS, TIPOGRAFÍA Y ESPACIADO */ body.tablet-mode .qs-header { position: sticky; top: 0; background: linear-gradient(90deg, #1a73e8 70%, #1565c0 100%); color: #fff; padding: 17px 0; font-size: 1.63rem; text-align: center; z-index: 10; display: flex; align-items: center; justify-content: center; border-radius: 0 0 18px 18px; box-shadow: 0 3px 18px rgba(26,115,232,0.08); margin-bottom: 15px; } body.tablet-mode .qs-header i { margin-right: 13px; font-size: 2rem; border-radius: 50%; padding: 5px; background: rgba(255,255,255,0.17); } body.tablet-mode .qs-table th { letter-spacing: 0.04em; font-size: 1.03rem; } /* ------------------------------- */ /* 7) RESPONSIVIDAD */ /* ------------------------------- */ @media (max-width: 1200px) { body.tablet-mode .qs-products { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 17px; } body.tablet-mode .qs-product-card { min-height: 235px; padding: 13px; } } @media (max-width: 992px) { body.tablet-mode .qs-header-toolbar { flex-direction: column; gap: 0.7rem; align-items: stretch; padding: 0.9rem 1rem; } body.tablet-mode .qs-products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; padding: 12px; } body.tablet-mode .qs-product-card { min-height: 215px; padding: 11px; } body.tablet-mode .qs-btn { min-height: 44px; font-size: 1rem; } body.tablet-mode .qs-ticket { padding: 17px 11px 13px 11px; } } @media (max-width: 768px) { body.tablet-mode .qs-products { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } body.tablet-mode .qs-product-card { min-height: 172px; padding: 8px; } } @media (max-width: 576px) { body.tablet-mode .quick-sale-container { flex-direction: column; gap: 13px; } body.tablet-mode .qs-header-toolbar { flex-direction: column; gap: 0.7rem; align-items: stretch; padding: 0.5rem 0.5rem; } body.tablet-mode .qs-products { grid-template-columns: 1fr; padding: 7px; } body.tablet-mode .qs-ticket { border-left: none; border-top: 1.5px solid #e3e8ee; border-radius: 18px 18px 0 0; } } /* Media query extra pequeño para inputs */ @media (max-width: 400px) { body.tablet-mode .qs-ticket .qs-row { flex-direction: column; gap: 7px; } body.tablet-mode .qs-ticket .qs-col { min-width: 100%; } } body.tablet-mode .qs-product-card.low-stock { box-shadow: 0 8px 30px rgba(244,67,54,0.15), 0 3px 18px rgba(244,67,54,0.11); border-color: #f44336; } body.tablet-mode .qs-product-card.low-stock:hover { box-shadow: 0 12px 40px rgba(244,67,54,0.24), 0 8px 20px rgba(244,67,54,0.13); border-color: #c62828; } body.tablet-mode .qs-product-card.low-stock .qs-product-stock { background: #ffebee; color: #c62828; } /* 8) ESTILOS MEJORADOS PARA BOTONES DE ACCIÓN */ body.tablet-mode .qs-action-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } /* Base común para todos los botones */ body.tablet-mode .qs-action-buttons .qs-btn { flex: 1 1 calc(50% - 6px); min-width: 140px; border: none; color: #fff; font-weight: 600; transition: filter 0.2s, transform 0.1s, box-shadow 0.16s; border-radius: 8px; height: 48px; } body.tablet-mode .qs-action-buttons .qs-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* Cobrar (azul oscuro) */ body.tablet-mode #qs-btn-pay:not(:disabled) { background: #1976d2; } body.tablet-mode #qs-btn-pay:hover:not(:disabled) { filter: brightness(1.1); } /* Limpiar (rojo intenso) */ body.tablet-mode #qs-btn-clear:not(:disabled) { background: #e53935; } body.tablet-mode #qs-btn-clear:hover:not(:disabled) { filter: brightness(1.1); } /* Nuevo Pedido (azul claro) */ body.tablet-mode #qs-btn-new-order:not(:disabled) { background: #42a5f5; } body.tablet-mode #qs-btn-new-order:hover:not(:disabled) { filter: brightness(1.1); } /* Nueva Venta (cian) */ body.tablet-mode #qs-btn-new-sale:not(:disabled) { background: #26c6da; } body.tablet-mode #qs-btn-new-sale:hover:not(:disabled) { filter: brightness(1.1); } /* Generar Cotización (ámbar suave) */ body.tablet-mode #qs-btn-quote:not(:disabled) { background: #ffb74d; color: #333; } body.tablet-mode #qs-btn-quote:hover:not(:disabled) { filter: brightness(1.1); } /* Agregar Stock (verde menta) */ body.tablet-mode #qs-btn-add-stock:not(:disabled) { background: #66bb6a; color: #fff; } body.tablet-mode #qs-btn-add-stock:hover:not(:disabled) { filter: brightness(1.1); } /* Enviar por Correo (púrpura suave) */ body.tablet-mode #qs-btn-email:not(:disabled) { background: #ab47bc; } body.tablet-mode #qs-btn-email:hover:not(:disabled) { filter: brightness(1.1); } /* Enviar por WhatsApp (naranja suave) */ body.tablet-mode #qs-btn-whatsapp:not(:disabled) { background: #ffa726; } body.tablet-mode #qs-btn-whatsapp:hover:not(:disabled) { filter: brightness(1.1); } /* Estilos para Asignar a Mesa (warning) */ body.tablet-mode #qs-btn-assign-table:not(:disabled) { background: #ffca28; color: #333; } body.tablet-mode #qs-btn-assign-table:hover:not(:disabled) { filter: brightness(1.1); } /* Estilos para Ver Estado de Mesas (info) */ body.tablet-mode #qs-btn-view-mesas:not(:disabled) { background: #29b6f6; color: #fff; } body.tablet-mode #qs-btn-view-mesas:hover:not(:disabled) { filter: brightness(1.1); } /* Estado deshabilitado general */ body.tablet-mode .qs-btn:disabled { background: #ccc; color: #666; cursor: not-allowed; opacity: 0.6; transform: none; box-shadow: none; } /* Hacemos que el botón de “Ver Mesas” sea un icono compacto */ body.tablet-mode #qs-btn-view-mesas { flex: 0 0 auto; /* no crece ni se encoge */ width: 36px; /* ancho fijo */ height: 36px; /* alto fijo */ padding: 0; /* nada de padding extra */ margin-left: 0.5rem; /* un pequeño margen a la izquierda */ display: inline-flex; align-items: center; justify-content: center; background: #42a5f5; /* color agradable (azul claro) */ color: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } body.tablet-mode #qs-btn-view-mesas i { font-size: 1.2rem; /* icono bien centrado y visible */ } /* Cuando esté deshabilitado, que se vea atenuado */ body.tablet-mode #qs-btn-view-mesas:disabled { background: #ccc; color: #666; box-shadow: none; cursor: not-allowed; } /* ============================== */ /* Ajuste botón “Ver Mesas” */ /* ============================== */ #qs-btn-view-mesas { width: 40px !important; /* ancho fijo */ padding: 0.35rem; /* reducir padding vertical */ font-size: 1.3rem; /* tamaño de icono legible */ display: flex; align-items: center; justify-content: center; } #qs-btn-view-mesas i { margin: 0; /* eliminar márgenes extra */ }