/* ==================================================================== GoByTel POS — Responsive móvil (overrides globales) Cargar SIEMPRE de último en el para que gane especificidad. Tema base: pixelcave "Pro" (Bootstrap 3 + sidebar off-canvas). ==================================================================== */ /* -------------------------------------------------------------------- 1) BANNER SUPERIOR DE INSTALACIÓN PWA -------------------------------------------------------------------- */ :root { --gbt-pwa-h: 58px; } .gbt-pwa-banner { position: fixed; top: 0; left: 0; right: 0; min-height: var(--gbt-pwa-h); display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(90deg, #0062cc, #007bff); color: #fff; z-index: 10600; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transform: translateY(-110%); transition: transform .35s ease; } .gbt-pwa-banner.gbt-pwa-show { transform: translateY(0); } .gbt-pwa-ico { width: 38px; height: 38px; border-radius: 9px; background: #fff; padding: 4px; flex: 0 0 auto; } .gbt-pwa-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1 1 auto; } .gbt-pwa-txt b { font-size: 14px; font-weight: 700; } .gbt-pwa-txt span { font-size: 12px; opacity: .9; } .gbt-pwa-txt i { margin: 0 2px; } .gbt-pwa-btn { flex: 0 0 auto; background: #fff; color: #0062cc; border: 0; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 8px; cursor: pointer; } .gbt-pwa-btn:active { transform: scale(.97); } .gbt-pwa-x { flex: 0 0 auto; background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; padding: 0 4px; cursor: pointer; opacity: .85; } .gbt-pwa-x:hover { opacity: 1; } /* Empujar el layout fijo hacia abajo mientras el banner está visible */ body.gbt-pwa-open .navbar.navbar-fixed-top { top: var(--gbt-pwa-h); } body.gbt-pwa-open #sidebar, body.gbt-pwa-open #sidebar-alt { top: var(--gbt-pwa-h); } body.gbt-pwa-open #page-container { padding-top: var(--gbt-pwa-h); } /* -------------------------------------------------------------------- 2) TABLAS ANCHAS → scroll horizontal (helper inyectado por JS) -------------------------------------------------------------------- */ .gbt-tscroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .gbt-tscroll > table { margin-bottom: 0; } @media (max-width: 991px) { .table-responsive { border: 0; } /* DataTables: que no fuercen anchos imposibles */ .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* -------------------------------------------------------------------- 3) AJUSTES GENERALES <= 991px (tablets/phones) -------------------------------------------------------------------- */ @media (max-width: 991px) { .content { padding-left: 12px; padding-right: 12px; } .block { padding: 12px; } .block-title { padding: 10px 12px; } /* Cabeceras de bloque con acciones a la derecha que se amontonan */ .block-title .block-options { position: static; float: none; margin-top: 6px; } .block-title .block-options .btn { margin-bottom: 4px; } /* Botonera que solía ir a la derecha → ocupa el ancho */ .push-bit .pull-right, .content-header .pull-right { float: none !important; } } /* -------------------------------------------------------------------- 4) AJUSTES PHONE <= 767px -------------------------------------------------------------------- */ @media (max-width: 767px) { /* Inputs: 16px evita el auto-zoom de iOS al enfocar */ .form-control, select.form-control, textarea.form-control, .input-group .form-control { font-size: 16px; } /* Etiquetas de formularios horizontales: alinear a la izquierda */ .form-horizontal .control-label { text-align: left; margin-bottom: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } /* Botones con tamaño táctil cómodo */ .btn { padding: 8px 14px; } .btn-group-vertical-block .btn { width: 100%; } /* Modales casi a pantalla completa y con scroll interno */ .modal-dialog { margin: 8px; width: auto; } .modal-body { max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-footer .btn { margin-bottom: 4px; } /* Paginación / controles que se desbordan */ .dataTables_length, .dataTables_filter { float: none; text-align: left; } .dataTables_filter input { width: 100%; margin-left: 0; } /* Cabecera de contenido */ .content-header { padding: 10px 12px; } .content-header .header-section h1 { font-size: 18px; } /* Cards/widgets que iban en fila fija */ .widget .widget-content { padding: 12px; } /* Evitar que botones flotantes tapen contenido al final */ .content { padding-bottom: 24px; } } /* -------------------------------------------------------------------- 5) POS (venta_new) — reflow básico en phone El rework profundo del POS va aparte; esto evita lo peor. -------------------------------------------------------------------- */ @media (max-width: 767px) { /* Grid de productos: tarjetas más pequeñas y fluidas */ #lista_productos .producto-card, .pos-producto { min-width: 0; } }