/* ══════════════════════════════════════════════════════════════════════════ QUICK PRO LITE — Identidad visual de QuickPOS Pro para la version web CDP Consultores COMO SE INSTALA (ver 01_Diseno/GUIA_DISENO.md): 1. Copiar este archivo a vistas/css/quickpro-lite.css 2. En vistas/plantilla.php agregar, DESPUES de la linea de pos.css: Tiene que ir DE ULTIMO: plantilla.css, carrito.css, form.css y pos.css usan !important por todas partes y el ultimo en cargar gana. 3. Cambiar por (todas las reglas cuelgan de .qp: sube la especificidad y permite apagar el tema quitando una sola clase). REGLA: ningun color se escribe suelto. Todo sale de las variables :root. Si cambia la identidad, se cambia aqui y en ningun otro lado. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Marca (identicos a FrmPrincipal.vb: CLR_DARK / CLR_MEDIUM / CLR_LIGHT) ── */ --qp-oscuro: #0D4A3E; /* topbar, sidebar, caja TOTAL, boton Cobrar */ --qp-medio: #1D8268; /* item activo, acento, boton Guardar */ --qp-claro: #3FA88F; /* hover, indicador ONLINE, borde item activo */ --qp-serie: #1BAF7A; /* graficos: serie principal */ --qp-serie2: #2A78D6; /* graficos: serie comparativa (compras) */ --qp-seleccion: #E8F2EE; /* fondo de fila/tile seleccionado */ /* ── Superficies ─────────────────────────────────────────────────────── */ --qp-fondo: #F4F4F2; /* fondo general de la app */ --qp-tarjeta: #FFFFFF; /* fichas, tablas, modales */ --qp-borde: #E4E8E5; /* borde de fichas y paneles */ --qp-borde-2: #D8DDD9; /* borde de inputs */ --qp-barra-estado: #E4E8E5; /* ── Texto ───────────────────────────────────────────────────────────── */ --qp-tinta: #062821; /* texto principal */ --qp-tinta-2: #52615C; /* texto secundario */ --qp-muted: #7A8A83; /* etiquetas, subtitulos */ --qp-sobre-oscuro: #FFFFFF; --qp-sobre-oscuro-2: rgba(255,255,255,.55); /* ── Estados ─────────────────────────────────────────────────────────── */ --qp-exito: #1BAF7A; --qp-peligro: #E24B4A; --qp-peligro-osc: #D03B3B; --qp-alerta: #EF9F27; /* badge de promocion */ --qp-alerta-txt: #412402; --qp-ahorro-bg: #FEF5E7; --qp-ahorro-txt: #8B5A0B; --qp-info: #2A78D6; /* ── Forma ───────────────────────────────────────────────────────────── */ --qp-radio: 10px; --qp-radio-ficha: 14px; --qp-sombra: 0 1px 3px rgba(13,74,62,.06), 0 6px 18px rgba(13,74,62,.08); --qp-sombra-hover: 0 2px 4px rgba(13,74,62,.07), 0 10px 24px rgba(13,74,62,.10); --qp-fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } /* ══════════════════════════════════════════════════════════════════════════ 1. BASE ══════════════════════════════════════════════════════════════════════════ */ body.qp, body.qp .sidebar-menu, body.qp .user-panel2, body.qp .content-wrapper { font-family: var(--qp-fuente) !important; } body.qp { background-color: var(--qp-fondo) !important; color: var(--qp-tinta); } body.qp .super-contenedor, body.qp .panel-medio-principal, body.qp .panel-medio, body.qp .content-wrapper { background-color: var(--qp-fondo) !important; } body.qp a { color: var(--qp-medio); } body.qp a:hover { color: var(--qp-oscuro); } /* El atributo hidden SIEMPRE oculta (Bootstrap 3 lo pierde frente a .btn { display:inline-block }) */ body.qp [hidden] { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ 2. TOPBAR (header.php → .main-header.cabecera-m) ══════════════════════════════════════════════════════════════════════════ */ body.qp .main-header, body.qp .cabecera-m, body.qp .cabecera-m .logo, body.qp .main-header .navbar { background-image: none !important; background-color: var(--qp-oscuro) !important; border: 0 !important; box-shadow: none !important; } body.qp .main-header .logo { color: var(--qp-sobre-oscuro) !important; font-weight: 400 !important; letter-spacing: .2px; border-right: 1px solid rgba(255,255,255,.12) !important; } body.qp .main-header .logo .logo-lg b { font-weight: 400 !important; } /* Botones de la barra (menu, dia/noche, tipo de cambio) → fantasma sobre verde */ body.qp .main-header .btn-menup, body.qp .main-header #tipocambio { background: transparent !important; border: 1px solid rgba(255,255,255,.18) !important; color: var(--qp-sobre-oscuro) !important; border-radius: 8px !important; box-shadow: none !important; } body.qp .main-header .btn-menup:hover, body.qp .main-header #tipocambio:hover { background: rgba(255,255,255,.08) !important; } /* Indicador PRUEBAS / PRODUCCION → mismo badge que "ONLINE · SQL Server" */ body.qp .btn-modo-sistema { background: rgba(63,168,143,.22) !important; color: #CFF3E6 !important; border: 1px solid rgba(63,168,143,.45) !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .8px; padding: 4px 10px !important; } body.qp .btn-modo-sistema.pruebas, body.qp .btn-modo-sistema[data-modo="pruebas"] { background: rgba(239,159,39,.20) !important; color: #FFE2B5 !important; border-color: rgba(239,159,39,.45) !important; } body.qp .main-header .navbar .nav > li > a { color: var(--qp-sobre-oscuro) !important; } body.qp .main-header .navbar .nav > li > a:hover, body.qp .main-header .navbar .nav .open > a { background: rgba(255,255,255,.08) !important; } /* Campana de documentos NO enviados a la DIAN */ body.qp .no-enviados.label-warning { background: var(--qp-peligro) !important; color: #fff !important; } body.qp .no-enviados:empty { display: none !important; } /* sin documentos pendientes: sin globo (solo sale con un numero) */ /* ══════════════════════════════════════════════════════════════════════════ 3. SIDEBAR (menu.php → aside.main-sidebar) Verde oscuro, texto blanco al 55 %, item activo #1D8268 con borde izquierdo de 3 px #3FA88F — igual que el menu de QuickPOS Pro. ══════════════════════════════════════════════════════════════════════════ */ body.qp .main-sidebar, body.qp .main-sidebar .sidebar, body.qp .sidebar-menu, body.qp .sidebar-menu .treeview > ul { background-color: var(--qp-oscuro) !important; box-shadow: none !important; } body.qp .main-sidebar .sidebar p, body.qp .main-sidebar .sidebar span { color: var(--qp-sobre-oscuro) !important; } body.qp .sidebar-menu li > a { background-color: transparent !important; color: var(--qp-sobre-oscuro-2) !important; border-left: 3px solid transparent; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .6px !important; text-transform: uppercase; padding-top: 13px !important; padding-bottom: 13px !important; } body.qp .sidebar-menu li > a .mg-menu, body.qp .sidebar-menu li > a span { color: inherit !important; } body.qp .main-sidebar .sidebar i, body.qp .sidebar-menu li > a i { color: inherit !important; width: 22px; text-align: center; } body.qp .sidebar-menu > li:hover, body.qp .sidebar-menu li > a:hover { background-color: rgba(255,255,255,.05) !important; color: #fff !important; } /* Activo: AdminLTE marca .active; la app no lo pone sola → ver GUIA_DISENO.md §4 */ body.qp .sidebar-menu > li.active > a, body.qp .sidebar-menu > li.menu-open > a { background-color: var(--qp-medio) !important; color: #fff !important; border-left-color: var(--qp-claro); } /* Submenu: una franja un poco mas oscura, texto normal (no mayusculas) */ body.qp .sidebar-menu .treeview .treeview-menu > li { background-color: rgba(0,0,0,.14) !important; padding: 0 !important; } body.qp .sidebar-menu .treeview .treeview-menu li > a { color: rgba(255,255,255,.75) !important; text-transform: none; font-weight: 400 !important; letter-spacing: 0 !important; font-size: 13px !important; padding: 9px 12px 9px 26px !important; } body.qp .sidebar-menu .treeview .treeview-menu > li:hover, body.qp .sidebar-menu .treeview .treeview-menu > li.active { background-color: var(--qp-claro) !important; } body.qp .sidebar-menu .treeview .treeview-menu > li:hover > a, body.qp .sidebar-menu .treeview .treeview-menu > li.active > a { color: #fff !important; } body.qp .sidebar-menu .menu-ini-p a { background-color: transparent !important; } /* Panel del usuario arriba del menu */ body.qp .user-panel2 { border-bottom: 1px solid rgba(255,255,255,.08); } body.qp .user-panel2 .info p { color: #fff !important; font-weight: 600; } body.qp .boton-user { background-color: rgba(255,255,255,.08) !important; color: #CFF3E6 !important; border-radius: 6px !important; } body.qp .icon-user { background: transparent !important; color: #CFF3E6 !important; } body.qp .sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); } /* ══════════════════════════════════════════════════════════════════════════ 4. FICHAS / CAJAS (AdminLTE .box, .info-box, .small-box y .panel) ══════════════════════════════════════════════════════════════════════════ */ body.qp .box, body.qp .rounded, body.qp .panel, body.qp .nav-tabs-custom, body.qp .dashboard-header { background: var(--qp-tarjeta) !important; border: 1px solid var(--qp-borde) !important; border-radius: var(--qp-radio-ficha) !important; box-shadow: var(--qp-sombra) !important; } body.qp .super-contenedor.box { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--qp-fondo) !important; } body.qp .box-header, body.qp .panel-medio .box-header { border-bottom: 1px solid var(--qp-borde) !important; color: var(--qp-tinta); } body.qp .box-header .box-title, body.qp .panel-medio .box-header .box-title { font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; color: var(--qp-tinta); } /* Cajas VACIAS (la app las usa como separadores): sin borde ni sombra, si no se ven como rayas */ body.qp .box:empty, body.qp .box:not(:has(*)), body.qp .box:has(> .radio-envio), body.qp .box:has(> .radio-envio-pos) { border: 0 !important; box-shadow: none !important; background: transparent !important; } /* Franja de color de AdminLTE (box-primary, box-success…) → acento verde a la izquierda */ body.qp .box.box-primary, body.qp .box.box-success, body.qp .box.box-info { border-top: 1px solid var(--qp-borde) !important; border-left: 4px solid var(--qp-medio) !important; } body.qp .box.box-danger { border-left: 4px solid var(--qp-peligro) !important; } body.qp .box.box-warning { border-left: 4px solid var(--qp-alerta) !important; } /* Widgets de inicio (targets.php) → fichas KPI con barra de acento */ body.qp .contenedor-widget .info-box, body.qp .info-box, body.qp .small-box { background: var(--qp-tarjeta) !important; border: 1px solid var(--qp-borde) !important; border-radius: var(--qp-radio-ficha) !important; box-shadow: var(--qp-sombra) !important; color: var(--qp-tinta) !important; position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } body.qp .info-box:hover, body.qp .small-box:hover { transform: translateY(-2px); box-shadow: var(--qp-sombra-hover) !important; } body.qp .info-box::before, body.qp .small-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--qp-acento, var(--qp-medio)); } body.qp .info-box-icon, body.qp .contenedor-widget .info-box-icon { background: var(--qp-seleccion) !important; background-image: none !important; color: var(--qp-medio) !important; border-radius: 10px !important; } body.qp .info-box-text { font-size: 10.5px !important; font-weight: 600; letter-spacing: .8px; color: var(--qp-muted) !important; text-transform: uppercase; } body.qp .info-box-number { font-size: 20px !important; font-weight: 600 !important; color: var(--qp-tinta) !important; font-variant-numeric: tabular-nums; } /* Acento por tipo de documento (widgets actuales de targets.php) */ body.qp .info-box:has(.bg-fa), body.qp .info-box:has(.bg-bo), body.qp .info-box:has(.bg-nv) { --qp-acento: var(--qp-serie); } body.qp .info-box:has(.bg-nc) { --qp-acento: var(--qp-peligro); } body.qp .info-box:has(.bg-nd) { --qp-acento: var(--qp-alerta); } body.qp .info-box:has(.bg-tn) { --qp-acento: var(--qp-oscuro); } /* ══════════════════════════════════════════════════════════════════════════ 5. BOTONES ══════════════════════════════════════════════════════════════════════════ */ body.qp .btn { border-radius: 8px !important; font-weight: 600; box-shadow: none !important; background-image: none !important; } body.qp .btn-primary, body.qp .btn-success, body.qp .btn-un, body.qp .btn-dos, body.qp .btn-tres, body.qp .btn-cuatro, body.qp .btn-radius, body.qp .btns-dash a, body.qp .btn-co-no-enviados { background-color: var(--qp-medio) !important; background-image: none !important; border: 1px solid var(--qp-medio) !important; color: #fff !important; } body.qp .btn-primary:hover, body.qp .btn-success:hover, body.qp .btn-un:hover, body.qp .btn-dos:hover, body.qp .btn-tres:hover, body.qp .btn-cuatro:hover, body.qp .btn-radius:hover, body.qp .btns-dash a:hover { background-color: var(--qp-oscuro) !important; border-color: var(--qp-oscuro) !important; } body.qp .btn-default { background: #fff !important; color: var(--qp-tinta-2) !important; border: 1px solid var(--qp-borde-2) !important; } body.qp .btn-default:hover { color: var(--qp-medio) !important; border-color: var(--qp-medio) !important; } body.qp .btn-danger { background: #fff !important; color: var(--qp-peligro) !important; border: 1px solid var(--qp-peligro) !important; } body.qp .btn-danger:hover { background: var(--qp-peligro) !important; color: #fff !important; } body.qp .btn-warning { background: var(--qp-alerta) !important; border-color: var(--qp-alerta) !important; color: var(--qp-alerta-txt) !important; } body.qp .btn-info { background: var(--qp-info) !important; border-color: var(--qp-info) !important; color: #fff !important; } /* Boton grande de cobro (POS) — agregar clase .qp-btn-cobrar al boton de guardar venta */ body.qp .qp-btn-cobrar { display: block; width: 100%; background: var(--qp-medio) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; min-height: 56px; font-size: 16px !important; font-weight: 400 !important; letter-spacing: 2px; text-transform: uppercase; } body.qp .qp-btn-cobrar:hover { background: var(--qp-oscuro) !important; } /* Selector de periodo tipo "Hoy | Mes | Ano" */ body.qp .qp-segmento { display: inline-flex; background: #fff; border: 1px solid var(--qp-borde); border-radius: var(--qp-radio); padding: 4px; box-shadow: var(--qp-sombra); } body.qp .qp-segmento button { border: 0; background: transparent; font: 600 13px var(--qp-fuente); color: var(--qp-tinta-2); padding: 8px 22px; border-radius: 7px; } body.qp .qp-segmento button.activo { background: var(--qp-medio); color: #fff; box-shadow: 0 2px 6px rgba(29,130,104,.35); } /* ══════════════════════════════════════════════════════════════════════════ 6. FORMULARIOS ══════════════════════════════════════════════════════════════════════════ */ body.qp .form-control, body.qp .select2-container--default .select2-selection--single, body.qp .select2-container--default .select2-selection--multiple, body.qp .input-group-addon { border: 1px solid var(--qp-borde-2) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--qp-tinta); } body.qp .input-group .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } body.qp .input-group .input-group-addon:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; background: var(--qp-fondo) !important; color: var(--qp-muted) !important; } body.qp .form-control:focus, body.qp .select2-container--focus .select2-selection { border-color: var(--qp-medio) !important; box-shadow: 0 0 0 3px rgba(29,130,104,.15) !important; } body.qp label, body.qp .control-label { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--qp-muted); } body.qp .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--qp-medio) !important; } /* Toggles (bootstrap-toggle) e iCheck */ body.qp .toggle.btn-primary, body.qp .toggle-on.btn-primary, body.qp .toggle-on.btn-success { background: var(--qp-medio) !important; border-color: var(--qp-medio) !important; } /* ══════════════════════════════════════════════════════════════════════════ 7. TABLAS (DataTables y listados propios de vistas/tables) ══════════════════════════════════════════════════════════════════════════ */ body.qp .table { background: #fff; } body.qp .table > thead > tr > th, body.qp .tabla-items thead, body.qp .tablaVentas thead, body.qp .tablaGuias thead, body.qp .tablaCotizaciones thead { background: var(--qp-fondo) !important; color: var(--qp-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .8px !important; border-bottom: 1px solid var(--qp-borde) !important; } body.qp .table > tbody > tr > td { border-top: 1px solid #EBEEEC !important; color: var(--qp-tinta); vertical-align: middle; } body.qp .table-hover > tbody > tr:hover, body.qp .table-striped > tbody > tr:hover { background: var(--qp-seleccion) !important; } body.qp .table-striped > tbody > tr:nth-of-type(odd) { background: #FAFBFA; } body.qp td.numero, body.qp .qp-num { text-align: right; font-variant-numeric: tabular-nums; } body.qp .pagination > .active > a, body.qp .pagination > .active > span, body.qp .dataTables_paginate span > a.current { background: var(--qp-medio) !important; border-color: var(--qp-medio) !important; color: #fff !important; } body.qp .pagination > li > a, body.qp .pagination > li > span { color: var(--qp-medio) !important; } /* ══════════════════════════════════════════════════════════════════════════ 8. ETIQUETAS DE ESTADO — incluye los estados de la factura electronica Uso: ACEPTADA ══════════════════════════════════════════════════════════════════════════ */ body.qp .qp-estado { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; } body.qp .qp-estado--aceptada { background: rgba(27,175,122,.12); color: #0B6B4A; border-color: rgba(27,175,122,.35); } body.qp .qp-estado--pendiente { background: rgba(239,159,39,.14); color: #8B5A0B; border-color: rgba(239,159,39,.40); } body.qp .qp-estado--rechazada { background: rgba(226,75,74,.10); color: #A32626; border-color: rgba(226,75,74,.35); } body.qp .qp-estado--borrador, body.qp .qp-estado--no_electronica, body.qp .qp-estado--no_aplica, body.qp .qp-estado--interno { background: #EEF1EF; color: var(--qp-tinta-2); border-color: var(--qp-borde); } body.qp .qp-estado--anulada { background: #fff; color: var(--qp-muted); border-color: var(--qp-borde-2); text-decoration: line-through; } /* Badges genericos de AdminLTE */ body.qp .label-success, body.qp .bg-green { background-color: var(--qp-serie) !important; } body.qp .label-primary, body.qp .bg-blue, body.qp .bg-light-blue { background-color: var(--qp-medio) !important; } body.qp .label-danger, body.qp .bg-red { background-color: var(--qp-peligro) !important; } body.qp .label-warning, body.qp .bg-yellow { background-color: var(--qp-alerta) !important; color: var(--qp-alerta-txt) !important; } body.qp .qp-badge-promo { background: var(--qp-alerta); color: var(--qp-alerta-txt); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; } /* ══════════════════════════════════════════════════════════════════════════ 9. MODALES Y SWEETALERT2 ══════════════════════════════════════════════════════════════════════════ */ body.qp .modal-content { border: 0 !important; border-radius: var(--qp-radio-ficha) !important; overflow: hidden; box-shadow: 0 20px 60px rgba(6,40,33,.25) !important; } body.qp .modal-header { background: var(--qp-oscuro) !important; background-image: none !important; color: #fff !important; border-bottom: 0 !important; padding: 14px 18px !important; } body.qp .modal-header .modal-title { font-weight: 400; letter-spacing: .3px; } body.qp .modal-header .close { color: #fff !important; opacity: .8; text-shadow: none; } body.qp .modal-footer { background: var(--qp-fondo); border-top: 1px solid var(--qp-borde) !important; } body.qp .swal2-popup, body.qp .swal2-modal { border-radius: var(--qp-radio-ficha) !important; font-family: var(--qp-fuente) !important; } body.qp .swal2-styled.swal2-confirm { background-color: var(--qp-medio) !important; border-radius: 8px !important; } body.qp .swal2-styled.swal2-cancel { background-color: #fff !important; color: var(--qp-tinta-2) !important; border: 1px solid var(--qp-borde-2) !important; border-radius: 8px !important; } body.qp .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--qp-serie) !important; } body.qp .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(27,175,122,.3) !important; } /* ══════════════════════════════════════════════════════════════════════════ 10. POS / CARRITO (pos.php, carrito.css) Estructura objetivo: ver capturas/Carrito.jpeg y Cobra.jpeg ══════════════════════════════════════════════════════════════════════════ */ /* Cabecera del documento en curso: "FACTURA SETP-990000012" */ body.qp .qp-doc-cabecera { background: #fff; border-left: 4px solid var(--qp-medio); padding: 12px 16px; } body.qp .qp-doc-cabecera .tipo { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--qp-muted); } body.qp .qp-doc-cabecera .numero { font-size: 18px; color: var(--qp-tinta); } body.qp .qp-doc-cabecera .meta { font-size: 11px; color: var(--qp-muted); } /* Totales 2x2 */ body.qp .qp-totales { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } body.qp .qp-totales > div { background: #fff; border: 1px solid var(--qp-borde); padding: 8px 12px; } body.qp .qp-totales .lbl { font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--qp-muted); } body.qp .qp-totales .val { font-size: 16px; font-variant-numeric: tabular-nums; } body.qp .qp-totales .ahorro { background: var(--qp-ahorro-bg); border-color: #F5D896; color: var(--qp-ahorro-txt); } /* Caja del TOTAL */ body.qp .qp-total-caja { background: var(--qp-oscuro); color: #fff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; } body.qp .qp-total-caja .lbl { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } body.qp .qp-total-caja .val { font-size: 30px; font-weight: 300; font-variant-numeric: tabular-nums; } /* Tiles de categoria / producto */ body.qp .qp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; align-items: start; } body.qp .qp-tile { background: #fff; border: 1px solid var(--qp-borde-2); border-radius: 6px; min-height: 110px; padding: 10px; cursor: pointer; position: relative; transition: border-color .15s; } body.qp .qp-tile:hover { border-color: var(--qp-medio); } body.qp .qp-tile .nombre { font-size: 12.5px; color: var(--qp-tinta); } body.qp .qp-tile .precio { font-size: 13px; font-weight: 700; color: var(--qp-medio); } body.qp .qp-tile--categoria { background: var(--qp-medio); color: #fff; border: 0; } body.qp .qp-tile--categoria .nombre { color: #fff; font-weight: 600; } /* Barra de estado inferior / atajos */ body.qp .qp-barra-estado { background: var(--qp-barra-estado); color: #5E6F68; font-size: 11px; height: 32px; display: flex; align-items: center; gap: 14px; padding: 0 16px; } body.qp .qp-tecla { background: #fff; border: 1px solid var(--qp-borde-2); border-radius: 4px; padding: 1px 6px; font-weight: 600; color: var(--qp-tinta); } /* ══════════════════════════════════════════════════════════════════════════ 11. LOGIN (login.php) ══════════════════════════════════════════════════════════════════════════ */ body.qp .log-cont { background: linear-gradient(160deg, var(--qp-oscuro) 0%, #0A3A31 60%, #072C25 100%) !important; } body.qp .log-cont .register-box, body.qp .login-box-body { background: #fff !important; border-radius: var(--qp-radio-ficha) !important; box-shadow: 0 20px 60px rgba(0,0,0,.25) !important; } body.qp .verifica-sunat { display: none !important; } /* sello SUNAT: no aplica en Colombia */ body.qp .login-box-body form input, body.qp .login-box-body form #ingUsuario, body.qp .login-box-body form #ingPassword { background-color: #fff !important; color: var(--qp-tinta) !important; border: 1px solid var(--qp-borde-2) !important; letter-spacing: .3px; font-size: 15px !important; } body.qp .login-box-body form input:focus { border-color: var(--qp-medio) !important; box-shadow: 0 0 0 3px rgba(29,130,104,.15) !important; } body.qp .login-box-body form input::placeholder { color: var(--qp-muted); } body.qp #form-login .has-feedback .form-control-icon { background: var(--qp-seleccion) !important; color: var(--qp-medio) !important; border: 1px solid var(--qp-borde-2); } body.qp .login-box-body form button, body.qp .login-box-body form button#logUser { background-image: none !important; background-color: var(--qp-medio) !important; color: #fff !important; letter-spacing: .6px; font-weight: 600; white-space: nowrap; } body.qp .login-box-body form button:hover { background-color: var(--qp-oscuro) !important; } /* Marca arriba del formulario (el logo de la empresa se sube desde Administracion → Empresa) */ body.qp .login-box-body .logo-empresa::after { content: "Quick Pro Lite"; display: block; text-align: center; font-size: 22px; font-weight: 300; letter-spacing: .5px; color: var(--qp-oscuro); } /* ── Login de pantalla completa (igual al del HOTEL de QuickPOS Pro) ─────── Columna verde con marca + tarjeta blanca de acceso; la foto cubre el resto. Marcado: vistas/modulos/login.php (.qpl-*). */ body.qp .qpl-login { position: fixed; inset: 0; display: flex; background: var(--qp-oscuro); z-index: 1000; font-family: var(--qp-fuente); } body.qp .qpl-col { flex: 0 0 auto; width: 460px; max-width: 100%; background: var(--qp-oscuro); color: #fff; display: flex; flex-direction: column; padding: 28px 40px 18px; overflow-y: auto; box-shadow: 8px 0 30px rgba(0,0,0,.25); position: relative; z-index: 1; } body.qp .qpl-logo-app { font-size: 38px; font-weight: 300; line-height: 1.1; letter-spacing: .3px; } body.qp .qpl-tagline { font-size: 16px; color: rgba(255,255,255,.70); margin-top: 2px; } body.qp .qpl-divisor { width: 60px; height: 3px; background: var(--qp-claro); margin: 14px 0 14px; border-radius: 2px; } body.qp .qpl-empresa { font-size: 18px; line-height: 1.25; } body.qp .qpl-empresa-sub { font-size: 12px; color: rgba(255,255,255,.60); margin-top: 4px; } body.qp .qpl-logo-empresa { display: block; max-width: 100%; max-height: 84px; object-fit: contain; object-position: left center; margin-top: 12px; background: #fff; border-radius: 8px; padding: 6px; } body.qp .qpl-bienvenida { font-size: 19px; margin: 14px 0 12px; } body.qp .qpl-card { background: #fff; color: var(--qp-tinta); border-radius: 12px; padding: 26px 28px 24px; box-shadow: 0 18px 40px rgba(0,0,0,.28); } body.qp .qpl-titulo { font-size: 20px; font-weight: 400; margin: 0 0 18px; color: var(--qp-tinta); } body.qp .qpl-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--qp-muted); margin: 0 0 6px; } body.qp .qpl-input { display: block; width: 100%; height: 46px; padding: 0 14px; margin: 0 0 16px; font-size: 17px; color: var(--qp-tinta); background: #fff; border: 1px solid var(--qp-borde-2); border-radius: 8px; outline: 0; transition: border-color .15s, box-shadow .15s; } body.qp .qpl-input:focus { border-color: var(--qp-medio); box-shadow: 0 0 0 3px rgba(29,130,104,.18); } body.qp .qpl-btn { display: block; width: 100%; height: 50px; margin-top: 6px; background: var(--qp-medio); color: #fff; border: 0; border-radius: 8px; font-size: 16px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background .15s; } body.qp .qpl-btn:hover, body.qp .qpl-btn:focus-visible { background: #16705A; outline: 0; } body.qp .qpl-card #resultLogin { margin-top: 12px; text-align: center; } body.qp .qpl-pie { margin-top: auto; padding-top: 18px; } body.qp .qpl-modulo { font-size: 15px; } body.qp .qpl-version { font-size: 13px; color: rgba(255,255,255,.45); margin-top: 3px; } body.qp .qpl-derechos { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 3px; } body.qp .qpl-foto { flex: 1 1 auto; min-width: 0; background: #06121e url("../img/quickpro/login.jpg") 92% center / cover no-repeat; /* 92 %: el texto de la foto queda completo */ } body.qp #fondP { display: none; } @media (max-width: 860px) { body.qp .qpl-login { position: static; min-height: 100vh; } body.qp .qpl-col { width: 100%; padding: 24px 20px 16px; box-shadow: none; } body.qp .qpl-foto { display: none; } } /* ── Loader "PROCESANDO" (igual a FrmProgreso de QuickPOS Pro) ───────────── La app pinta

dentro de .reload-all en 50 lugares: sin tocar ese JS, el contenedor pasa a velo de pantalla completa y la imagen se reemplaza por la ventana de proceso. */ /* Todo

(70 lugares, incluido el login) usa el spinner verde. Se sirve con OTRO nombre de archivo: el reload.svg viejo de colores queda en la cache del navegador aunque el archivo ya se haya reemplazado. */ body.qp img[src*="img/reload.svg"] { content: url("../img/quickpro/spinner.svg"); } /* En el login: la ventana PROCESANDO dentro de la tarjeta de acceso */ body.qp #resultLogin img[src*="img/reload.svg"] { content: url("../img/quickpro/procesando.svg"); width: 100% !important; height: auto !important; max-width: 340px; border-radius: 10px; box-shadow: 0 8px 22px rgba(6, 40, 33, .18); } body.qp #resultLogin br:first-child { display: none; } body.qp .reload-all { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; align-items: center; justify-content: center; background: rgba(6, 40, 33, .35) !important; z-index: 10050 !important; } body.qp .reload-all:empty { display: none !important; } body.qp .reload-all img { content: url("../img/quickpro/procesando.svg"); width: 460px !important; height: 260px !important; max-width: calc(100vw - 32px); border-radius: 10px !important; box-shadow: 0 20px 60px rgba(6, 40, 33, .35); } /* ══════════════════════════════════════════════════════════════════════════ MENU COMPACTO DE ICONOS (igual a QuickPOS Pro) + PANTALLAS DE TARJETAS ══════════════════════════════════════════════════════════════════════════ */ body.qp.sidebar-collapse .main-sidebar { width: 56px !important; } body.qp.sidebar-collapse .content-wrapper, body.qp.sidebar-collapse .main-footer { margin-left: 56px !important; } body.qp.sidebar-collapse .main-header .logo { width: 56px !important; } body.qp.sidebar-collapse .main-header .navbar { margin-left: 56px !important; } body.qp .qp-rail > li > a { display: flex !important; align-items: center; gap: 12px; } body.qp .qp-rail > li > a > i { font-size: 20px; width: 24px; text-align: center; flex: none; } body.qp.sidebar-collapse .qp-rail > li > a { justify-content: center; padding: 16px 0 !important; } /* Rotulo flotante al pasar el mouse con el menu compacto */ body.qp.sidebar-mini.sidebar-collapse .qp-rail > li:hover > a > span { background: var(--qp-oscuro) !important; color: #fff !important; left: 56px !important; top: 0; height: 100%; display: flex !important; align-items: center; padding: 0 18px !important; width: 210px !important; border-radius: 0 6px 6px 0; box-shadow: 6px 0 18px rgba(0,0,0,.2); } /* Submenu del grupo: se despliega al tocar el grupo (la pagina abre sus tarjetas) */ body.qp .qp-submenu { list-style: none; margin: 0; padding: 0; display: none; background: rgba(0,0,0,.16); } body.qp .qp-grupo.qp-abierto > .qp-submenu { display: block; } body.qp .qp-grupo.active > a { background: var(--qp-medio) !important; color: #fff !important; } body.qp .qp-rail .qp-flecha { margin-left: auto; font-size: 11px; width: auto !important; opacity: .7; } body.qp .qp-submenu > li > a { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 26px; color: rgba(255,255,255,.82); font-size: 13px; text-decoration: none; border-left: 3px solid transparent; } body.qp .qp-submenu > li > a > i { width: 18px; text-align: center; font-size: 14px; } body.qp .qp-submenu > li > a, body.qp .qp-submenu > li > a span { text-transform: none !important; font-weight: 400 !important; letter-spacing: 0 !important; } body.qp .qp-submenu > li > a:hover { background: rgba(255,255,255,.06); color: #fff; } body.qp .qp-submenu > li.active > a { background: var(--qp-claro); color: #fff; border-left-color: #fff; } /* Menu compacto: sin flecha; el submenu aparece flotando al pasar el mouse */ body.qp.sidebar-collapse .qp-rail .qp-flecha { display: none !important; } body.qp.sidebar-collapse .qp-grupo > .qp-submenu { display: none !important; } body.qp.sidebar-mini.sidebar-collapse .qp-grupo:hover > .qp-submenu { display: block !important; position: absolute; left: 56px; top: 100%; width: 210px; z-index: 1030; background: var(--qp-oscuro); border-radius: 0 0 6px 0; box-shadow: 6px 8px 18px rgba(0,0,0,.25); } body.qp.sidebar-collapse .qp-grupo { position: relative; } /* Pantalla de tarjetas de un modulo (UcAdministracion de QuickPOS Pro) */ body.qp .qp-modulo { background: #fff !important; min-height: calc(100vh - 50px); display: flex; flex-direction: column; } body.qp .qp-mod-cabecera { background: var(--qp-oscuro); color: #fff; padding: 18px 32px 14px; } body.qp .qp-mod-cabecera h1 { font-size: 22px; font-weight: 400; margin: 0; color: #fff; } body.qp .qp-mod-cabecera h1 i { margin-right: 6px; } body.qp .qp-mod-cabecera p { font-size: 13px; margin: 8px 0 0; color: rgba(255,255,255,.9); } body.qp .qp-mod-usuario { background: var(--qp-fondo); padding: 14px 32px; font-size: 14px; color: var(--qp-tinta); } body.qp .qp-mod-tarjetas { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 185px)); gap: 20px; padding: 40px 50px; align-content: start; } body.qp .qp-tarjeta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 150px; padding: 0 12px; text-align: center; text-decoration: none !important; background: #F8FAF8; border: 1px solid var(--qp-borde); border-top: 6px solid #2D6EAF; transition: box-shadow .15s ease, transform .15s ease; } body.qp .qp-tarjeta:hover, body.qp .qp-tarjeta:focus-visible { background: #fff; box-shadow: 0 8px 22px rgba(13,74,62,.12); transform: translateY(-2px); outline: 0; } body.qp .qp-tarjeta-contador { position: absolute; top: 8px; right: 12px; min-width: 26px; padding: 1px 8px; background: #E8F0F8; color: #2D6EAF; border-radius: 12px; font-size: 12px; line-height: 18px; } body.qp .qp-tarjeta-icono { font-size: 34px; color: #2D6EAF; margin: 26px 0 12px; } body.qp .qp-tarjeta-titulo { font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--qp-tinta); letter-spacing: .2px; line-height: 1.2; } body.qp .qp-tarjeta-sub { font-size: 11px; color: var(--qp-muted); margin-top: 8px; line-height: 1.25; } body.qp .qp-mod-pie { padding: 14px 32px; font-size: 13px; color: var(--qp-tinta); border-top: 1px solid var(--qp-borde); } body.qp .qp-mod-vacio { padding: 60px 32px; text-align: center; } @media (max-width: 767px) { body.qp .qp-mod-tarjetas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 20px 16px; gap: 12px; } body.qp .qp-mod-cabecera, body.qp .qp-mod-usuario, body.qp .qp-mod-pie { padding-left: 16px; padding-right: 16px; } } /* ══════════════════════════════════════════════════════════════════════════ PANTALLAS DE VENTA — interfaz de botones de QuickPOS Pro (Facturación empresarial y POS). Aplica por ruta: . El JS (quickpro-lite.js) pone los textos F12/F1… y la barra de teclas; los ids y clases originales se conservan para no romper ventas.js / pos.js. ══════════════════════════════════════════════════════════════════════════ */ /* ── Encabezado del documento: franja verde con el titulo ── */ body.qp.qp-doc .dashboard-header { background: var(--qp-oscuro) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.qp.qp-doc .dashboard-header button { color: #fff !important; font-size: 19px !important; font-weight: 500 !important; letter-spacing: .5px; padding: 14px 18px !important; margin-left: 0 !important; } body.qp.qp-doc .dashboard-header button i { margin-right: 10px !important; } /* ── Grilla de items: encabezado verde oscuro (como la grilla de QuickPOS) ── */ body.qp.qp-doc .tabla-items thead, body.qp.qp-doc .tabla-items > thead > tr > th { background: var(--qp-oscuro) !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .3px !important; border: 0 !important; } body.qp.qp-doc .tabla-items > thead > tr > th { padding: 12px 10px !important; } body.qp.qp-doc .tabla-items > tbody > tr > td { border-top: 1px solid #E8ECE9 !important; padding: 10px !important; } /* ── Botones de funcion (F1 Buscar, F2 Servicio…): grises; el principal, verde ── */ body.qp.qp-doc .btn-agregar-carrito, body.qp.qp-doc .btnproser, body.qp .qp-tecla-btn { background: #E4E8E5 !important; color: var(--qp-tinta) !important; border: 0 !important; border-radius: 2px !important; height: 38px; padding: 0 16px !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; background-image: none !important; margin: 0 0 0 8px !important; } body.qp.qp-doc .btn-agregar-carrito { background: var(--qp-medio) !important; color: #fff !important; } body.qp.qp-doc .btn-agregar-carrito:hover, body.qp.qp-doc .btnproser:hover, body.qp .qp-tecla-btn:hover { background: var(--qp-oscuro) !important; color: #fff !important; } body.qp .qp-tecla-btn b { font-weight: 700; margin-right: 6px; } /* ── Barra de teclas de funcion ── */ body.qp .qp-teclas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; } body.qp .qp-teclas .qp-tecla-btn { margin: 0 !important; } /* ── Botonera final: F12 COBRAR (verde, grande) + Anular ── */ body.qp.qp-doc .contenedor-btns-carrito { display: flex !important; gap: 10px; align-items: stretch; justify-content: flex-end; background: transparent !important; border: 0 !important; padding: 12px 0 !important; } body.qp.qp-doc .btnGuardarVenta, body.qp.qp-doc .btnGuardarVentaPos { order: 2; flex: 0 1 460px; min-height: 56px; margin: 0 !important; background: var(--qp-medio) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: .6px; text-transform: uppercase; width: auto !important; height: auto !important; } body.qp.qp-doc .btnGuardarVenta:hover, body.qp.qp-doc .btnGuardarVentaPos:hover { background: var(--qp-oscuro) !important; } body.qp.qp-doc .btnEliminarCarro { order: 1; min-height: 56px; padding: 0 22px !important; margin: 0 !important; width: auto !important; height: auto !important; background: #fff !important; background-image: none !important; color: var(--qp-peligro) !important; border: 1px solid var(--qp-peligro) !important; border-radius: 2px !important; box-shadow: none !important; font-size: 14px !important; text-transform: none; } body.qp.qp-doc .btnEliminarCarro:hover { background: var(--qp-peligro) !important; color: #fff !important; } body.qp.qp-doc .contenedor-btns-carrito button i { font-size: 16px !important; margin-right: 8px; } /* ── Resumen de totales: el TOTAL grande ── */ body.qp.qp-doc .tabla-totales thead th { background: transparent !important; color: var(--qp-muted) !important; } body.qp.qp-doc .tabla-totales td { font-size: 13px !important; color: var(--qp-tinta-2) !important; border-top: 1px solid #EEF1EF !important; font-variant-numeric: tabular-nums; } body.qp.qp-doc .tabla-totales .op-total td { background: var(--qp-oscuro) !important; color: #fff !important; font-size: 24px !important; font-weight: 400 !important; padding: 14px 16px !important; border: 0 !important; } body.qp.qp-doc .tabla-totales .op-total td:first-child { font-size: 13px !important; letter-spacing: 2px; text-transform: uppercase; } /* Correcciones de layout: el formulario es flex en fila → barra y botonera a ANCHO COMPLETO */ body.qp.qp-doc .qp-teclas, body.qp.qp-doc .contenedor-btns-carrito { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; float: none !important; clear: both; } body.qp.qp-doc .qp-teclas { justify-content: flex-start; border-top: 1px solid var(--qp-borde); padding: 12px 0 0; } body.qp.qp-doc .contenedor-btns-carrito { flex-flow: row nowrap !important; } /* Fila de "Escanear código" + F1/F2: sin alto fijo para que los botones no se corten */ body.qp.qp-doc .nuevoProducto .flex { height: auto !important; min-height: 46px; align-items: center; gap: 6px; padding: 4px 0 8px; overflow: visible !important; } /* Franja del titulo: el contenido interno (caja blanca) transparente; pestañas de documento */ body.qp.qp-doc .dashboard-header .box, body.qp.qp-doc .dashboard-header .col-lg-12 { background: transparent !important; box-shadow: none !important; } body.qp.qp-doc .dashboard-header .btns-dash a { background: rgba(255,255,255,.10) !important; background-image: none !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 2px !important; box-shadow: none !important; font-size: 12px !important; letter-spacing: .5px; margin: 8px 0 8px 8px !important; padding: 8px 14px !important; } body.qp.qp-doc .dashboard-header .btns-dash a:hover { background: var(--qp-medio) !important; } /* F1/F2 dentro de la fila del escaner: SIN float (el float los montaba sobre la linea de la tabla) */ body.qp.qp-doc .nuevoProducto .flex { display: flex !important; flex-wrap: wrap; } body.qp.qp-doc .nuevoProducto .flex .btn { float: none !important; } body.qp.qp-doc .nuevoProducto .flex .btn-agregar-carrito { order: 3; margin-left: auto !important; } body.qp.qp-doc .nuevoProducto .flex .btnproser { order: 4; } /* Total dentro del boton F12: texto limpio */ body.qp.qp-doc .qp-total-boton { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; text-decoration: none !important; font: inherit; color: inherit !important; display: inline; } /* Pestañas de documento en la franja verde: texto e iconos blancos */ body.qp.qp-doc .dashboard-header .btns-dash a, body.qp.qp-doc .dashboard-header .btns-dash a * { color: #fff !important; } /* Pestañas de documento (menu-rapido.php usa #contenedor-menur: se necesita el id para ganar) */ body.qp.qp-doc .btns-dash #contenedor-menur a, body.qp.qp-doc .btns-dash #contenedor-menur a:nth-child(n), body.qp.qp-doc .btns-dash #contenedor-menur a * { color: #fff !important; } /* Controles morados sueltos → verdes: boton buscar cliente (RUC/NIT) y selector % / moneda del descuento */ body.qp .buscarRuc { background: var(--qp-medio) !important; background-image: none !important; color: #fff !important; border-color: var(--qp-medio) !important; } body.qp .buscarRuc:hover { background: var(--qp-oscuro) !important; } body.qp .contenedor-tipo-descuento label { background-color: #E4E8E5 !important; color: var(--qp-tinta) !important; } body.qp .contenedor-tipo-descuento #por { background-color: var(--qp-medio) !important; color: #fff !important; } body.qp .contenedor-tipo-descuento #sol { background-color: #E4E8E5 !important; color: var(--qp-tinta) !important; } body.qp .contenedor-tipo-descuento .on { background-color: var(--qp-medio) !important; color: #fff !important; } /* Texto de Anular centrado */ body.qp.qp-doc .btnEliminarCarro, body.qp.qp-doc .btnGuardarVenta, body.qp.qp-doc .btnGuardarVentaPos { display: inline-flex !important; align-items: center; justify-content: center; } /* Mas especifico: form.css pinta un degradado morado sobre .input-group-addon.btn */ body.qp .input-group .input-group-addon.btn.buscarRuc, body.qp .input-group-addon.btn.buscarRuc:hover { background-image: none !important; } /* Campos editables del carrito (cantidad, precio): borde neutro y foco verde */ body.qp .tabla-items input { border: 1px solid var(--qp-borde-2) !important; border-radius: 4px !important; box-shadow: none !important; } body.qp .tabla-items input:focus { border-color: var(--qp-medio) !important; box-shadow: 0 0 0 3px rgba(29,130,104,.15) !important; } /* Configuracion de empresa: bloque PAIS DE OPERACION destacado */ body.qp .qp-pais-operacion { padding: 18px 30px 6px !important; } body.qp .qp-pais-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; background: var(--qp-seleccion); border: 1px solid #CFE3DB; border-left: 5px solid var(--qp-medio); border-radius: 8px; padding: 16px 20px; } body.qp .qp-pais-texto { flex: 1 1 420px; } body.qp .qp-pais-texto label { display: block; font-size: 15px !important; font-weight: 700 !important; color: var(--qp-oscuro) !important; letter-spacing: .6px; text-transform: uppercase; margin: 0 0 4px; } body.qp .qp-pais-texto p { margin: 0; font-size: 13px; color: var(--qp-tinta-2); line-height: 1.45; } body.qp .qp-pais-select { flex: 0 0 260px; } body.qp .qp-pais-select select { height: 44px !important; font-size: 16px !important; font-weight: 600; color: var(--qp-oscuro) !important; } /* Boton junto a los campos de documento (carrito.css usa #docIdentidad ~ span con !important) */ body.qp .formVenta #docIdentidad ~ span, body.qp .formVenta #serieNumero ~ span, body.qp .formCompra #docIdentidad ~ span, body.qp #formGuia #docIdentidad ~ span, body.qp #formGuia #docTransporte ~ span, body.qp .formCompra #serieDoc ~ span, body.qp .formCompra #serieModificar ~ span { background-image: none !important; background-color: var(--qp-medio) !important; color: #fff !important; border-color: var(--qp-medio) !important; } /* ══════════════════ IMPUESTOS DE COLOMBIA ══════════════════ */ body.qp .qp-imp-producto { margin-top: 6px; } body.qp .qp-imp-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; border-top: 1px solid var(--qp-borde); padding-top: 10px; margin-bottom: 8px; } body.qp .qp-imp-titulo span { font-weight: 700; color: var(--qp-oscuro); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; } body.qp .qp-imp-titulo small { color: var(--qp-muted); } body.qp .qp-imp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } body.qp .qp-imp-chip { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 10px 8px 34px; border: 1px solid var(--qp-borde); border-radius: 8px; background: #F8FAF8; cursor: pointer; font-weight: 400; } body.qp .qp-imp-chip input[type="checkbox"] { position: absolute; left: 11px; top: 11px; margin: 0; accent-color: var(--qp-medio); } body.qp .qp-imp-chip:has(input[type="checkbox"]:checked) { border-color: var(--qp-medio); background: #E6F3EF; box-shadow: inset 3px 0 0 var(--qp-medio); } body.qp .qp-imp-nombre { font-weight: 700; color: var(--qp-tinta); } body.qp .qp-imp-detalle { font-size: 11px; color: var(--qp-muted); } body.qp .qp-imp-fijo { margin-top: 4px; height: 26px; } body.qp .qp-imp-ibua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--qp-claro); border-radius: 8px; } body.qp .qp-imp-ibua[hidden] { display: none !important; } body.qp .qp-imp-ibua .form-group { margin: 0; } body.qp .qp-imp-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; } body.qp .qp-imp-resumen > div { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 8px; background: var(--qp-fondo); } body.qp .qp-imp-resumen span { font-size: 11px; color: var(--qp-muted); } body.qp .qp-imp-resumen strong { color: var(--qp-tinta); } body.qp .qp-imp-resumen .qp-imp-final { background: var(--qp-oscuro); } body.qp .qp-imp-resumen .qp-imp-final span, body.qp .qp-imp-resumen .qp-imp-final strong { color: #fff; } body.qp .qp-imp-linea { color: var(--qp-muted); font-size: 11px; } body.qp .tabla-totales .op-impuestos td { font-weight: 600; color: var(--qp-medio); } body.qp .qp-impuestos-ayuda { clear: both; margin: 10px 0 0; color: var(--qp-muted); } /* Sin morado (plantilla.css / carrito.css): pestañas de documento y selector % / $ en verde QuickPOS */ body.qp .btns-dash #contenedor-menur a, body.qp .btns-dash #contenedor-menur a:nth-child(n) { border-right: 6px solid var(--qp-claro) !important; } body.qp .btns-dash #contenedor-menur a:hover { background: rgba(255,255,255,.16) !important; } body.qp .contenedor-tipo-descuento #por, body.qp .contenedor-tipo-descuento #sol { border-left: 0 !important; border-right: 0 !important; } body.qp .contenedor-tipo-descuento .on, body.qp .contenedor-tipo-descuento .on-por, body.qp .contenedor-tipo-descuento #por.on, body.qp .contenedor-tipo-descuento #sol.on { background-color: var(--qp-medio) !important; border: 0 !important; color: #fff !important; } body.qp .contenedor-tipo-descuento .off { background-color: var(--qp-borde) !important; color: var(--qp-tinta) !important; } /* Botones de arriba "Buscar producto" / "Nuevo producto": se usan las teclas F1 / F2 de abajo (siguen en el DOM: la barra de teclas les hace click()) */ body.qp.qp-doc .btn-agregar-carrito, body.qp.qp-doc .btnproser { display: none !important; } /* ══════════════════ GRILLA DE ITEMS + LOGO ══════════════════ */ /* La altura la calcula quickpro-lite.js (ajustarGrilla): el TOTAL y F12 quedan a ras con el pie */ body.qp.qp-doc .qp-grilla { position: relative; overflow-y: auto; background: #fff; border: 1px solid var(--qp-borde); border-radius: 0 0 8px 8px; } body.qp.qp-doc .qp-grilla .tabla-items { margin-bottom: 0; } body.qp.qp-doc .qp-grilla .tabla-items thead th { position: sticky; top: 0; z-index: 2; } body.qp.qp-doc .qp-grilla-vacia::after { content: "Agregue productos · F1 Buscar"; position: absolute; left: 0; right: 0; top: 46px; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; background: url("../img/quickpro/logo-lite-256.png?v=2") center calc(50% - 10px) / auto min(150px, 60%) no-repeat; color: var(--qp-muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; opacity: .9; } body.qp.qp-doc #itemsP tr { cursor: pointer; } body.qp.qp-doc #itemsP tr.qp-fila-sel td { background: var(--qp-seleccion) !important; box-shadow: inset 0 -1px 0 var(--qp-claro); } body.qp.qp-doc #itemsP tr.qp-fila-sel td:first-child { box-shadow: inset 4px 0 0 var(--qp-medio), inset 0 -1px 0 var(--qp-claro); } /* Logo de Quick Pro Lite en la cabecera y en el login */ body.qp .main-header .logo .qp-logo-mini { width: 34px; height: 34px; margin-top: 8px; border-radius: 8px; } body.qp .main-header .logo .qp-logo-lg { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body.qp .main-header .logo .qp-logo-lg img { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; } .qpl-logo-lite { display: block; width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.25); } /* POS: barra de teclas FIJA en el borde inferior de toda la pantalla (barra de estado de QuickPOS Pro) */ body.qp[data-ruta="pos"] .qp-teclas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; margin: 0 !important; padding: 5px 12px; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; background: #E9EEEB; border-top: 1px solid var(--qp-borde); } body.qp[data-ruta="pos"] .qp-teclas .qp-tecla-btn { flex: 0 0 auto; } body.qp[data-ruta="pos"] { padding-bottom: 52px; } /* Venta compacta (quickpro-lite.js compactarVenta): los campos siguen en el formulario, solo no se ven */ body.qp.qp-doc .qp-oculto-venta { display: none !important; } /* POS: caja vacia heredada que dejaba un hueco sobre el boton F12 */ body.qp[data-ruta="pos"] .formVenta > .box:empty { margin: 0 !important; } /* Cargador: SIEMPRE centrado en la pantalla */ body.qp .reload-all { position: fixed !important; inset: 0 !important; display: none; align-items: center !important; justify-content: center !important; text-align: center !important; } body.qp .reload-all[style*="block"], body.qp .reload-all[style*="flex"] { display: flex !important; } body.qp .reload-all img { margin: 0 auto !important; float: none !important; } /* El spinner que la app pinta DENTRO de las pantallas (tablas, resultados de busqueda) tambien va al centro */ body.qp img[src*="img/reload.svg"] { display: block !important; margin: 12px auto !important; float: none !important; } /* POS: RESUMEN a todo el ancho, como QuickPOS Pro (tarjetas pequeñas + TOTAL grande). jQuery .show()/.hide() ponen display en linea: las filas ocultas se respetan con [style*=none] */ body.qp[data-ruta="pos"] .qp-totales-full { width: 100% !important; float: none !important; padding: 0 !important; } body.qp[data-ruta="pos"] .qp-totales-full .table-responsive { border: 0; margin: 0; overflow: visible; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales { margin: 0 !important; background: transparent !important; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales thead { display: none !important; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; padding: 8px 0 0; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales tr:not([style*="none"]) { display: flex !important; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 12px; border: 1px solid var(--qp-borde); border-radius: 6px; background: #fff; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales tr[style*="none"] { display: none !important; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales td { display: block; border: 0 !important; padding: 0 !important; text-align: left !important; background: transparent !important; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales td:first-child { font-size: 10px !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--qp-muted) !important; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales td:last-child { font-size: 16px !important; font-weight: 600; color: var(--qp-tinta) !important; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales tr.op-total { grid-column: 1 / -1; flex-direction: row !important; align-items: center; justify-content: space-between !important; min-height: 70px; padding: 8px 20px; background: var(--qp-oscuro) !important; border-color: var(--qp-oscuro); } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales tr.op-total td:first-child { color: rgba(255,255,255,.75) !important; font-size: 13px !important; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales tr.op-total td:last-child { color: #fff !important; font-size: 36px !important; font-weight: 300; line-height: 1; } /* POS: sin huecos entre el RESUMEN y el boton F12 */ body.qp[data-ruta="pos"] .formVenta .box { margin-bottom: 0 !important; } body.qp[data-ruta="pos"] .formVenta hr { margin: 6px 0 !important; } body.qp[data-ruta="pos"] .formVenta > .box-body { padding-bottom: 0 !important; } /* Valores alineados a la DERECHA: al crecer, el numero crece hacia la izquierda */ body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales td:last-child { text-align: right !important; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales td:first-child { white-space: nowrap; } body.qp[data-ruta="pos"] .qp-totales-full .tabla-totales tbody.totales tr.op-total td:last-child { flex: 1; } body.qp.qp-doc .tabla-totales tbody.totales td:last-child { text-align: right !important; } /* Grilla: cantidad, precios y subtotal a la derecha (Facturacion: 2,5,6,7 · POS: 2,4,5) */ body.qp.qp-doc:not([data-ruta="pos"]) .tabla-items :is(th, td):is(:nth-child(2), :nth-child(5), :nth-child(6), :nth-child(7)), body.qp[data-ruta="pos"] .tabla-items :is(th, td):is(:nth-child(2), :nth-child(4), :nth-child(5)) { text-align: right !important; } body.qp.qp-doc .tabla-items td input { text-align: right; } /* ══════════════════ FORMULARIO DE PAGO (cobro.js = FrmCobro de QuickPOS Pro) ══════════════════ */ .qpc .modal-dialog { width: min(1040px, calc(100vw - 24px)); max-width: none; margin: 24px auto; } .qpc .modal-content { border: 0; border-radius: 10px; overflow: hidden; background: var(--qp-fondo, #F4F4F2); box-shadow: 0 24px 70px rgba(6,40,33,.35); } .qpc-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--qp-oscuro, #0D4A3E); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .03em; } .qpc-cabecera i { margin-right: 8px; } .qpc-cerrar { background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; opacity: .85; } .qpc-cerrar:hover { opacity: 1; } .qpc-cuerpo { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; gap: 16px; padding: 16px; } .qpc-izq { display: flex; flex-direction: column; gap: 12px; min-height: 440px; } .qpc-caja { background: #fff; border: 1px solid var(--qp-borde, #E4E8E5); border-radius: 8px; padding: 14px 16px; } .qpc-caja small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--qp-muted, #7A8A83); } .qpc-total { text-align: center; } .qpc-total strong { display: block; margin-top: 6px; font-size: 32px; color: var(--qp-tinta, #062821); } .qpc-pagos { flex: 1; overflow-y: auto; } .qpc-pagos ul { list-style: none; margin: 8px 0 0; padding: 0; } .qpc-pagos li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--qp-borde, #E4E8E5); } .qpc-pagos li span { flex: 1; } .qpc-pagos li b { text-align: right; } .qpc-pagos li button { border: 0; background: #FDECEC; color: var(--qp-peligro, #E24B4A); border-radius: 4px; width: 24px; height: 24px; line-height: 1; } .qpc-pagos .qpc-vacio { color: var(--qp-muted, #7A8A83); border: 0; font-size: 12px; } .qpc-falta { text-align: center; } .qpc-falta small, .qpc-falta strong { color: var(--qp-peligro, #E24B4A) !important; } .qpc-falta strong { display: block; margin-top: 6px; font-size: 30px; } .qpc-falta.qpc-vuelto small, .qpc-falta.qpc-vuelto strong { color: var(--qp-medio, #1D8268) !important; } .qpc-falta.qpc-credito small, .qpc-falta.qpc-credito strong { color: #B7791F !important; } .qpc-der { display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 8px; padding: 14px; } .qpc-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .qpc-tab { border: 0; padding: 12px 18px; background: #E9EEEB; color: var(--qp-tinta, #062821); font-weight: 700; border-radius: 4px; min-width: 150px; } .qpc-tab i { margin-right: 6px; } .qpc-tab.activo { background: var(--qp-oscuro, #0D4A3E); color: #fff; } .qpc-panel[hidden] { display: none !important; } .qpc-billetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .qpc-billete { min-height: 62px; border: 1px solid var(--qp-borde, #E4E8E5); background: #F8FAF8; border-radius: 4px; font-size: 17px; font-weight: 700; color: var(--qp-tinta, #062821); } .qpc-billete:hover { background: var(--qp-seleccion, #E8F2EE); border-color: var(--qp-claro, #3FA88F); } .qpc-billete:active { transform: scale(.98); } .qpc-exacto { background: #EF9F27 !important; border-color: #EF9F27 !important; color: #fff !important; line-height: 1.25; } .qpc-medios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .qpc-medio { min-height: 62px; border: 1px solid var(--qp-borde, #E4E8E5); background: #F8FAF8; border-radius: 4px; font-size: 15px; font-weight: 700; color: var(--qp-tinta, #062821); text-align: left; padding: 0 16px; } .qpc-medio i { width: 26px; color: var(--qp-medio, #1D8268); } .qpc-medio:hover { background: var(--qp-seleccion, #E8F2EE); border-color: var(--qp-claro, #3FA88F); } .qpc-ayuda { margin: 0; color: var(--qp-muted, #7A8A83); font-size: 12px; } .qpc-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .qpc-fila .form-control { flex: 1; min-width: 120px; } .qpc-cuotas { display: flex; flex-direction: column; gap: 6px; max-height: 250px; overflow-y: auto; } .qpc-cuota { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; align-items: center; } .qpc-cuota .qpc-cuota-monto { text-align: right; } .qpc-manual { margin-top: auto; } .qpc-manual[hidden] { display: none !important; } .qpc-manual label, .qpc-descuento label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--qp-muted, #7A8A83); } .qpc-manual input { font-size: 20px; text-align: right; height: 42px; } .qpc-descuento { padding-top: 10px; border-top: 1px dashed var(--qp-borde, #E4E8E5); } .qpc-descuento input { text-align: right; } .qpc-agregar { background: var(--qp-medio, #1D8268) !important; color: #fff !important; font-weight: 700; height: 42px; padding: 0 22px; } .qpc-seg { display: inline-flex; border: 1px solid var(--qp-borde, #E4E8E5); border-radius: 4px; overflow: hidden; } .qpc-seg button { border: 0; background: #fff; padding: 6px 14px; font-weight: 700; } .qpc-seg button.activo { background: var(--qp-medio, #1D8268); color: #fff; } .qpc-pie { display: flex; justify-content: space-between; gap: 12px; padding: 0 16px 16px; } .qpc-cancelar { background: #fff !important; border: 1px solid var(--qp-borde, #E4E8E5) !important; font-weight: 700; min-width: 210px; height: 48px; } .qpc-confirmar { background: var(--qp-medio, #1D8268) !important; color: #fff !important; font-weight: 700; font-size: 16px; min-width: 340px; height: 48px; } .qpc-confirmar:disabled { background: #B9C7C1 !important; color: #5E6F68 !important; opacity: 1; } @media (max-width: 760px) { .qpc-cuerpo { grid-template-columns: 1fr; } .qpc-izq { min-height: 0; } .qpc-billetes { grid-template-columns: repeat(2, 1fr); } .qpc-confirmar, .qpc-cancelar { min-width: 0; flex: 1; } } .qpc-credito-directo { display: grid !important; grid-template-columns: 26px 1fr; align-items: center; } .qpc-credito-directo small { grid-column: 2; font-size: 11px; font-weight: 600; color: var(--qp-muted, #7A8A83); } .qpc-credito-directo:disabled { opacity: .55; cursor: not-allowed; } .qpc-referencia { margin-top: 10px; } .qpc-referencia label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--qp-muted, #7A8A83); } .qpc-pagos li small { display: block; font-size: 11px; color: var(--qp-muted, #7A8A83); } /* Configuracion -> Medios de pago: billetes y monedas */ body.qp .qp-denominaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } body.qp .qp-denominacion { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-height: 64px; padding: 8px 12px; border: 1px solid var(--qp-borde); border-radius: 6px; background: #F4F4F2; color: var(--qp-muted); font-size: 17px; font-weight: 700; } body.qp .qp-denominacion small { align-self: flex-start; font-size: 10px; letter-spacing: .06em; } body.qp .qp-denominacion.activa { background: #fff; color: var(--qp-tinta); border-color: var(--qp-medio); box-shadow: inset 3px 0 0 var(--qp-medio); } body.qp .qp-denominacion-nueva { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; max-width: 520px; } body.qp .qp-denominacion-nueva .form-control { flex: 1; min-width: 120px; } /* Ventana NUEVO PRODUCTO en ventas/compras (modal-producto-rapido.php) */ .qpr .modal-dialog { width: min(980px, calc(100vw - 24px)); max-width: none; margin: 24px auto; } .qpr .modal-content { border: 0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 24px 70px rgba(6,40,33,.35); } .qpr-cuerpo { padding: 6px 20px 8px; max-height: calc(100vh - 190px); overflow-y: auto; } .qpr .qpc-pie { padding: 12px 20px 16px; border-top: 1px solid var(--qp-borde, #E4E8E5); } .qpr [data-qpr="agregar"][hidden] { display: none; } /* Ficha rapida del cliente en las ventas (modal-cliente-rapido.php) */ .qpcv .qpt-seccion { margin-top: 10px; } .qpcv-aviso { margin: 10px 0 0; padding: 10px 14px; border-radius: 6px; font-size: 13px; background: #EEF3F1; color: var(--qp-tinta, #062821); } .qpcv-aviso.ok { background: #E6F3EF; color: #0D4A3E; border-left: 4px solid #1D8268; } .qpcv-aviso.alerta { background: #FFF4E5; color: #7A4A00; border-left: 4px solid #EF9F27; } .qpcv-aviso.info { background: #EEF3F1; border-left: 4px solid #7A8A83; } .qpcv .qpt-grid[hidden] { display: none !important; } body.qp #rucActivo { color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 1px 8px; border-radius: 10px; } /* POS en Colombia: sin el lapiz de las tarjetas (los impuestos no se cambian en la venta). El elemento sigue en la pagina: la tecla F7 (desc. item) lo usa para abrir la ventana del item. */ body.qp[data-pais="CO"] .productos-pos-venta .btn-edit-pos { display: none !important; } /* Selector de productos de Facturacion en Colombia: sin el boton rojo de herramientas (.vermasProductos), que abria la configuracion de precio/afectacion del producto dentro de la venta */ body.qp[data-pais="CO"] #modalProductosVenta .vermasProductos, body.qp[data-pais="CO"] #modalProductosVenta .super-contenedor-precios { display: none !important; } body.qp[data-pais="CO"] #modalProductosVenta td.btn-prod:has(.vermasProductos) { width: 0; padding: 0 !important; } /* Colombia: bloques de solo Peru marcados en el servidor (empresa.php $qpOcultarCO) - gana a los display:flex del tema */ body.qp [data-qp-solo-peru] { display: none !important; } /* Facturacion electronica FacEPro - Colombia (facturacion-electronica.php, documentos-dian.php, resultado al guardar) */ body.qp .qpfe-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; } @media (max-width: 900px) { body.qp .qpfe-grid { grid-template-columns: 1fr; } } body.qp .qpfe-card { border: 1px solid var(--qp-borde); border-radius: 8px; padding: 14px 16px; background: #fff; } body.qp .qpfe-card h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--qp-oscuro); text-transform: uppercase; } body.qp .qpfe-switch { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; align-items: center; margin-bottom: 12px; font-weight: normal; cursor: pointer; } body.qp .qpfe-switch input { position: absolute; opacity: 0; pointer-events: none; } body.qp .qpfe-switch span { grid-row: span 2; width: 40px; height: 22px; border-radius: 11px; background: var(--qp-borde-2, #C9D3CE); position: relative; transition: background .15s; } body.qp .qpfe-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; } body.qp .qpfe-switch input:checked + span { background: var(--qp-medio, #1BAF7A); } body.qp .qpfe-switch input:checked + span::after { left: 21px; } body.qp .qpfe-switch input:focus-visible + span { outline: 2px solid var(--qp-oscuro); outline-offset: 2px; } body.qp .qpfe-switch small, body.qp .qpfe-nota { color: var(--qp-muted); display: block; } body.qp .qpfe-botones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } body.qp .qpfe-checks { list-style: none; padding: 0; margin: 0 0 12px; } body.qp .qpfe-checks li { padding: 5px 0; border-bottom: 1px dashed var(--qp-borde); } body.qp .qpfe-checks li.ok i { color: #0B6B4A; } body.qp .qpfe-checks li.falta i { color: #A32626; } body.qp .qpfe-aviso { margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: rgba(239,159,39,.12); color: #7A4A00; } body.qp .qpfe-aviso--info { background: #E6F3EF; color: var(--qp-oscuro); } /* Marca de factura con notas credito (Administrar ventas y Documentos DIAN - Colombia) */ body.qp .qp-nc-marca { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 10px; background: #FFF4E5; color: #7A4A00; font-size: 11px; font-weight: 700; } /* Nota credito Colombia (nota-credito-co.php) */ body.qp .qpnc-buscar { max-width: 640px; margin-bottom: 14px; } body.qp .qpnc-vacio { text-align: center; padding: 40px 0; color: var(--qp-muted); } body.qp .qpnc-vacio img { opacity: .5; margin-bottom: 10px; } body.qp .qpnc-cabecera { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } body.qp .qpnc-cabecera > div { border: 1px solid var(--qp-borde); border-radius: 8px; padding: 8px 10px; background: #F8FAF8; display: flex; flex-direction: column; min-width: 0; } body.qp .qpnc-cabecera .qpnc-cliente { grid-column: span 1; } body.qp .qpnc-cabecera span { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--qp-muted); } body.qp .qpnc-cabecera b { font-size: 15px; color: var(--qp-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.qp .qpnc-cabecera small { color: var(--qp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { body.qp .qpnc-cabecera { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.qp .qpnc-bloqueo { margin-bottom: 12px; padding: 10px 12px; border-radius: 6px; background: rgba(226,75,74,.08); color: #A32626; border: 1px solid rgba(226,75,74,.3); } body.qp .qpnc-tabla .qpncCant { text-align: right; } body.qp .qpnc-tabla tr.qpnc-agotada td { color: var(--qp-muted); text-decoration: line-through; } body.qp .qpnc-pie { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-top: 10px; } body.qp .qpnc-totales { display: flex; flex-wrap: wrap; gap: 8px; } body.qp .qpnc-totales > div { border: 1px solid var(--qp-borde); border-radius: 6px; padding: 6px 12px; display: flex; flex-direction: column; align-items: flex-end; min-width: 110px; } body.qp .qpnc-totales span { align-self: flex-start; font-size: 10px; font-weight: 700; color: var(--qp-muted); } body.qp .qpnc-totales b { font-size: 15px; } body.qp .qpnc-totales .qpnc-total { background: var(--qp-oscuro); border-color: var(--qp-oscuro); min-width: 190px; } body.qp .qpnc-totales .qpnc-total span, body.qp .qpnc-totales .qpnc-total b { color: #fff; } body.qp .qpnc-totales .qpnc-total b { font-size: 24px; } body.qp .qpnc-botones { display: flex; gap: 8px; flex-wrap: wrap; } body.qp .qpfd-tipos { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--qp-borde); } body.qp .qpfd-tipo { border: 0; background: none; padding: 8px 14px; font-weight: 700; color: var(--qp-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; } body.qp .qpfd-tipo.activo { color: var(--qp-oscuro); border-bottom-color: var(--qp-medio, #1BAF7A); } body.qp .qpfd-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; } body.qp .qpfd-filtros label { display: block; font-size: 11px; font-weight: 700; color: var(--qp-muted); margin-bottom: 2px; } body.qp .qpfd-filtros .qpfd-buscar { flex: 1; min-width: 200px; } body.qp .qpfd-resumen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } body.qp .qpfd-chip { cursor: pointer; } body.qp .qpfd-chip.activo { box-shadow: 0 0 0 2px var(--qp-oscuro); } body.qp .qpfd-msg { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--qp-muted); } body.qp .qpfd-descuadre { color: #B7791F; } body.qp .qpfd-vacio { color: var(--qp-muted); padding: 24px !important; } body.qp .qpfd-paginas { display: flex; gap: 8px; align-items: center; justify-content: flex-end; color: var(--qp-muted); } body.qp .qpfd-log { border: 1px solid var(--qp-borde); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; } body.qp .qpfd-log-msg { margin: 4px 0; } body.qp .qpfd-log pre { max-height: 240px; overflow: auto; font-size: 11px; white-space: pre-wrap; word-break: break-all; } .qpfe-res { margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px; text-align: left; border: 1px solid #D9E2DD; background: #F4F7F5; } .qpfe-res-titulo { font-weight: 700; font-size: 15px; } .qpfe-res-numero { font-size: 20px; font-weight: 700; letter-spacing: .03em; margin: 2px 0; } .qpfe-res-msg { font-size: 13px; margin-top: 4px; } .qpfe-res-errores { margin: 6px 0 0 18px; padding: 0; font-size: 12px; } .qpfe-res-advertencia { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(239,159,39,.15); color: #7A4A00; font-size: 13px; } .qpfe-aceptada { background: rgba(27,175,122,.10); border-color: rgba(27,175,122,.35); color: #0B6B4A; } .qpfe-pendiente { background: rgba(239,159,39,.12); border-color: rgba(239,159,39,.40); color: #8B5A0B; } .qpfe-rechazada { background: rgba(226,75,74,.08); border-color: rgba(226,75,74,.35); color: #A32626; } /* Ventana DESCUENTO DEL ITEM (F7) en Facturacion - Colombia (descuento-item.js) */ .qpdi .modal-dialog { width: min(640px, calc(100vw - 24px)); } .qpdi-producto { display: flex; flex-direction: column; margin: 12px 0 10px; } .qpdi-producto b { font-size: 17px; color: var(--qp-tinta, #062821); } .qpdi-producto small { color: var(--qp-muted, #7A8A83); } .qpdi-entrada { display: flex; gap: 8px; align-items: stretch; margin-bottom: 6px; } .qpdi-entrada .form-control { flex: 1; font-size: 22px; height: 46px; text-align: right; } .qpdi-entrada .qpc-seg button { height: 46px; min-width: 44px; font-size: 16px; } .qpdi-desglose { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Ventana del item del POS en Colombia (impuestos-co.js itemPos) */ body.qp #modalEditarItemsPos .qpi-oculto { display: none !important; } body.qp .qpi-panel { clear: both; margin: 6px 0 4px; padding: 12px 14px; border: 1px solid var(--qp-borde); border-radius: 8px; background: #F8FAF8; } body.qp .qpi-titulo { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--qp-oscuro); margin-bottom: 8px; } body.qp .qpi-editar { margin-left: auto; font-weight: 600; letter-spacing: 0; color: var(--qp-medio); } body.qp .qpi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } body.qp .qpi-chip { padding: 3px 10px; border-radius: 12px; background: #E6F3EF; color: var(--qp-oscuro); font-size: 12px; font-weight: 700; } body.qp .qpi-chip.sectorial { background: #FFF4E5; color: #7A4A00; } body.qp .qpi-chip.sin { background: var(--qp-fondo); color: var(--qp-muted); } body.qp .qpi-desglose { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } body.qp .qpi-desglose > div { display: flex; flex-direction: column; align-items: flex-end; padding: 6px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--qp-borde); } body.qp .qpi-desglose span { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--qp-muted); } body.qp .qpi-desglose strong { font-size: 15px; color: var(--qp-tinta); } body.qp .qpi-desglose .qpi-total { background: var(--qp-oscuro); border-color: var(--qp-oscuro); } body.qp .qpi-desglose .qpi-total span, body.qp .qpi-desglose .qpi-total strong { color: #fff; } @media (max-width: 560px) { body.qp .qpi-desglose { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* POS: boton de pantalla completa en la cabecera */ body.qp .qp-btn-pantalla { position: fixed; top: 4px; right: 44px; z-index: 1031; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--qp-oscuro, #0D4A3E); color: #fff; font-size: 14px; } body.qp .qp-btn-pantalla:hover { background: var(--qp-medio, #1D8268); } /* ══════════════════ FICHA DE CLIENTES / PROVEEDORES (ficha-terceros.php = FrmCliente de QuickPOS Pro) ══════════════════ */ body.qp .qp-terceros { padding-block: 12px; } body.qp .qpt-cabecera { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 8px 8px 0 0; background: var(--qp-oscuro); color: #fff; } body.qp .qpt-cabecera h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .04em; color: #fff; } body.qp .qpt-cabecera p { margin: 2px 0 0; color: rgba(255,255,255,.75); } body.qp .qpt-icono { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 22px; } body.qp .qpt-cuerpo { display: grid; grid-template-columns: minmax(380px, 38%) 1fr; background: #fff; border: 1px solid var(--qp-borde); border-top: 0; border-radius: 0 0 8px 8px; min-height: calc(100vh - 190px); } body.qp .qpt-lista { display: flex; flex-direction: column; border-right: 1px solid var(--qp-borde); background: #F8FAF8; min-width: 0; } body.qp .qpt-buscar { display: flex; gap: 8px; padding: 12px; } body.qp .qpt-buscar .form-control { flex: 1; min-width: 0; } body.qp .qpt-nuevo { background: var(--qp-medio) !important; color: #fff !important; font-weight: 700; white-space: nowrap; } body.qp .qpt-filtro { display: flex; gap: 4px; padding: 0 12px 10px; } body.qp .qpt-filtro button { flex: 1; border: 1px solid var(--qp-borde); background: #fff; border-radius: 4px; padding: 5px 0; font-size: 12px; font-weight: 600; color: var(--qp-muted); } body.qp .qpt-filtro button.activo { background: var(--qp-oscuro); border-color: var(--qp-oscuro); color: #fff; } body.qp .qpt-items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; max-height: calc(100vh - 330px); } body.qp .qpt-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--qp-borde); cursor: pointer; } body.qp .qpt-item:hover { background: var(--qp-seleccion); } body.qp .qpt-item.activo { background: var(--qp-seleccion); box-shadow: inset 4px 0 0 var(--qp-medio); } body.qp .qpt-item.inactivo .qpt-item-txt { opacity: .55; } body.qp .qpt-avatar { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--qp-medio); color: #fff; font-weight: 700; } body.qp .qpt-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; } body.qp .qpt-item-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; color: var(--qp-tinta); } /* nombres largos: hasta 2 lineas */ body.qp .qpt-item-txt small { color: var(--qp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.qp .qpt-etiqueta { font-size: 10px; font-weight: 700; color: var(--qp-peligro); text-transform: uppercase; } body.qp .qpt-sin { padding: 18px; color: var(--qp-muted); text-align: center; } body.qp .qpt-conteo { padding: 8px 12px; border-top: 1px solid var(--qp-borde); font-size: 12px; color: var(--qp-muted); } body.qp .qpt-ficha { position: relative; padding: 16px 22px; min-width: 0; } body.qp .qpt-vacio { height: 100%; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--qp-muted); text-align: center; } body.qp .qpt-vacio i { font-size: 64px; color: var(--qp-borde); } body.qp .qpt-vacio .qpt-logo { width: 150px; height: 150px; border-radius: 30px; box-shadow: 0 12px 34px rgba(6,40,33,.18); margin-bottom: 6px; } body.qp .qpt-sin { display: flex; flex-direction: column; align-items: center; gap: 8px; } body.qp .qpt-logo-sin { width: 72px; height: 72px; border-radius: 16px; opacity: .9; } body.qp .qpt-vacio[hidden], body.qp #qptForm[hidden], body.qp .qpt-grid[hidden] { display: none !important; } body.qp .qpt-ficha-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } body.qp .qpt-ficha-titulo span { font-size: 19px; font-weight: 700; color: var(--qp-tinta); } body.qp .qpt-activo { margin: 0; font-weight: 600; color: var(--qp-medio); } body.qp .qpt-seccion { margin: 12px 0 0; padding: 0; border: 0; } body.qp .qpt-seccion legend { width: auto; margin: 0 0 8px; padding: 0 0 4px; border: 0; border-bottom: 2px solid var(--qp-medio); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--qp-oscuro); } body.qp .qpt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; } body.qp .qpt-campo { display: flex; flex-direction: column; min-width: 0; } body.qp .qpt-campo label { margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--qp-muted); } body.qp .qpt-doble { grid-column: span 2; } body.qp .qpt-numero { display: flex; gap: 8px; align-items: stretch; } body.qp .qpt-numero .form-control { flex: 1; min-width: 0; } body.qp .qpt-consultar { background: var(--qp-oscuro) !important; color: #fff !important; font-weight: 700; white-space: nowrap; } body.qp .qpt-consultar:disabled { opacity: .6; } body.qp .qpt-solo-lectura { background: var(--qp-fondo) !important; color: var(--qp-tinta); font-weight: 600; } body.qp .qpt-dv { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--qp-borde); border-radius: 4px; background: var(--qp-fondo); font-size: 12px; color: var(--qp-muted); } body.qp .qpt-dv b { font-size: 16px; color: var(--qp-tinta); } body.qp .qpt-envios { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; } body.qp .qpt-check { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--qp-tinta) !important; } body.qp .qpt-check .fa-whatsapp { color: #25D366; } body.qp .qpt-error { border-color: var(--qp-peligro) !important; box-shadow: 0 0 0 2px rgba(226,75,74,.15) !important; } body.qp .qpt-pie { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 12px 0 4px; background: #fff; border-top: 1px solid var(--qp-borde); } body.qp .qpt-cancelar { background: #fff !important; border: 1px solid var(--qp-borde) !important; font-weight: 700; min-width: 140px; } body.qp .qpt-guardar { background: var(--qp-medio) !important; color: #fff !important; font-weight: 700; min-width: 180px; } @media (max-width: 991px) { body.qp .qpt-cuerpo { grid-template-columns: 1fr; } body.qp .qpt-lista { border-right: 0; border-bottom: 1px solid var(--qp-borde); } body.qp .qpt-items { max-height: 260px; } body.qp .qpt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { body.qp .qpt-grid { grid-template-columns: 1fr; } body.qp .qpt-doble { grid-column: auto; } } /* ══════════════════ FICHA DE PRODUCTOS (ficha-productos.php = UcProductos de QuickPOS Pro) ══════════════════ */ body.qp .qpt-triple { grid-column: 1 / -1; } body.qp .qpp-sucursal { padding: 0 12px 10px; } body.qp .qpp-item { align-items: center; } body.qp .qpp-foto { flex: 0 0 42px; height: 42px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: #fff; border: 1px solid var(--qp-borde); color: var(--qp-muted); } body.qp .qpp-foto img { width: 100%; height: 100%; object-fit: cover; } body.qp .qpp-item-der { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; } body.qp .qpp-item-der b { color: var(--qp-tinta); white-space: nowrap; } body.qp .qpp-item-der small { color: var(--qp-muted); white-space: nowrap; } body.qp .qpp-item-der small.qpp-sin-stock { color: var(--qp-peligro); font-weight: 700; } body.qp .qpp-tabs { display: flex; gap: 0; flex-wrap: wrap; /* en pantallas grandes caben en una fila; en angostas bajan a una segunda sin esconder ninguna */ margin: 8px 0 14px; border-bottom: 2px solid var(--qp-borde); } body.qp .qpp-tabs button { flex: 0 0 auto; white-space: nowrap; border: 0; background: transparent; padding: 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--qp-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; } body.qp .qpp-tabs::-webkit-scrollbar { display: none; } body.qp .qpp-tabs button:hover { color: var(--qp-oscuro); } body.qp .qpp-tabs button.activo { color: var(--qp-oscuro); border-bottom-color: var(--qp-medio); } body.qp #qpProductos:not(.qpp-editando) .qpp-solo-edicion { display: none !important; } body.qp .qpp-panel[hidden], body.qp .qpp-stock-inicial[hidden], body.qp #qppImagen[hidden] { display: none !important; } body.qp .qpp-general { display: grid; grid-template-columns: 1fr 220px; gap: 18px; align-items: start; } body.qp .qpp-imagen { display: flex; flex-direction: column; gap: 6px; } body.qp .qpp-imagen > label:first-child { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--qp-muted); } body.qp .qpp-imagen-caja { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border: 1px dashed var(--qp-borde); border-radius: 8px; display: grid; place-items: center; background: var(--qp-fondo); color: var(--qp-muted); overflow: hidden; } body.qp .qpp-imagen-caja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; } body.qp .qpp-examinar { margin: 0; font-weight: 600; } body.qp .qpp-imagen small { color: var(--qp-muted); } body.qp .qpp-nota { margin: 0 0 10px; color: var(--qp-muted); font-size: 12px; } body.qp .qpp-nota .fa-check { color: var(--qp-medio); } body.qp .qpp-dinero { text-align: right; } body.qp .qpp-resumen-precio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } body.qp .qpp-resumen-precio > div { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 14px; border-radius: 8px; background: var(--qp-fondo); } body.qp .qpp-resumen-precio span { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--qp-muted); } body.qp .qpp-resumen-precio strong { font-size: 20px; color: var(--qp-tinta); } body.qp .qpp-resumen-precio .qpp-final { background: var(--qp-oscuro); } body.qp .qpp-resumen-precio .qpp-final span, body.qp .qpp-resumen-precio .qpp-final strong { color: #fff; } body.qp .qpp-stock { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; } body.qp .qpp-stock > div:first-child { display: flex; flex-direction: column; align-items: flex-end; min-width: 200px; padding: 10px 16px; border-radius: 8px; background: var(--qp-oscuro); } body.qp .qpp-stock > div:first-child span { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.75); } body.qp .qpp-stock > div:first-child strong { font-size: 28px; font-weight: 300; color: #fff; } body.qp .qpp-stock-inicial { min-width: 180px; } body.qp .qpp-tabla { max-height: 380px; overflow: auto; border: 1px solid var(--qp-borde); border-radius: 6px; } body.qp .qpp-tabla table { margin: 0; } body.qp .qpp-tabla thead th { position: sticky; top: 0; background: var(--qp-oscuro) !important; color: #fff !important; font-size: 11px; letter-spacing: .05em; } body.qp .qpp-tabla .qpp-anulado td { color: var(--qp-muted); text-decoration: line-through; } body.qp .qpp-vacio-tabla { text-align: center; color: var(--qp-muted); padding: 20px !important; } body.qp .qp-productos .qp-imp-producto { margin-top: 0; } body.qp .qp-productos .qp-imp-titulo { border-top: 0; padding-top: 0; } body.qp .qpp-sin-guardar { padding: 12px 14px; border-radius: 6px; background: var(--qp-fondo); color: var(--qp-muted); } body.qp #qpProductos.qpp-editando .qpp-sin-guardar { display: none; } body.qp .qpp-series { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; } body.qp .qpp-series-agregar { display: flex; flex-direction: column; gap: 8px; } body.qp .qpp-series-agregar label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--qp-muted); } body.qp .qpp-series-agregar small { font-weight: 400; letter-spacing: 0; } body.qp .qpp-series-agregar textarea { font-family: Consolas, monospace; text-transform: uppercase; } body.qp .qpp-series-cabecera { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } body.qp .qpp-series-cabecera .form-control { flex: 1; } body.qp .qpp-series-cabecera span { color: var(--qp-muted); font-size: 12px; white-space: nowrap; } body.qp .qpp-serie-estado { border: 0; border-radius: 12px; padding: 2px 10px; font-size: 11px; font-weight: 700; } body.qp .qpp-serie-estado.disponible { background: #E6F3EF; color: var(--qp-medio); } body.qp .qpp-serie-estado.vendida { background: #FDECEC; color: var(--qp-peligro); } body.qp .qpp-serie-quitar { background: #fff !important; border: 1px solid var(--qp-borde) !important; color: var(--qp-peligro) !important; } body.qp .qpp-est-filtro { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } body.qp .qpp-est-filtro button { border: 1px solid var(--qp-borde); background: #fff; border-radius: 16px; padding: 5px 14px; font-size: 12px; font-weight: 700; color: var(--qp-muted); } body.qp .qpp-est-filtro button.activo { background: var(--qp-oscuro); border-color: var(--qp-oscuro); color: #fff; } body.qp .qpp-est-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; } body.qp .qpp-est-resumen > div { display: flex; flex-direction: column; align-items: flex-end; padding: 8px 12px; border-radius: 8px; background: var(--qp-fondo); } body.qp .qpp-est-resumen span { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--qp-muted); } body.qp .qpp-est-resumen strong { font-size: 17px; color: var(--qp-tinta); } body.qp .qpp-est-grafico { position: relative; height: 240px; margin-bottom: 12px; } body.qp .qpp-mes-vacio td { color: var(--qp-muted); } body.qp .qpp-total-fila td { font-weight: 700; background: var(--qp-seleccion) !important; } body.qp .qpp-tabla td, body.qp .qpp-tabla th { white-space: nowrap; font-size: 12px; } @media (max-width: 991px) { body.qp .qpp-series { grid-template-columns: 1fr; } } @media (max-width: 1199px) { body.qp .qpp-general { grid-template-columns: 1fr; } body.qp .qpp-imagen { max-width: 240px; } } @media (max-width: 560px) { body.qp .qpp-resumen-precio { grid-template-columns: 1fr; } } /* ══════════════════ POS ══════════════════ */ /* Carrito a la IZQUIERDA y productos a la DERECHA (como QuickPOS Pro) */ body.qp[data-ruta="pos"] .rounded-pos > .box-body > .row { display: flex; flex-wrap: wrap; } body.qp[data-ruta="pos"] .super-contenedor-formulario-pos { order: 1; } body.qp[data-ruta="pos"] .super-contenedor-productos-pos { order: 2; background: var(--qp-fondo); } /* Selector de documento: botones segmentados */ body.qp[data-ruta="pos"] .container-comprobants-pos { background: transparent !important; border: 0 !important; box-shadow: none !important; } body.qp[data-ruta="pos"] .container-comprobants-pos label.btn { background: #E4E8E5 !important; background-image: none !important; color: var(--qp-tinta) !important; border: 0 !important; border-radius: 2px !important; font-weight: 600 !important; letter-spacing: .5px; padding: 9px 22px !important; box-shadow: none !important; } body.qp[data-ruta="pos"] .container-comprobants-pos input:checked + label.btn { background: var(--qp-oscuro) !important; color: #fff !important; } /* Tarjetas de producto */ body.qp[data-ruta="pos"] .productos-pos-venta { background: #fff !important; border: 1px solid var(--qp-borde-2) !important; border-radius: 6px !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; } body.qp[data-ruta="pos"] .productos-pos-venta:hover { border-color: var(--qp-medio) !important; box-shadow: 0 6px 16px rgba(13,74,62,.10) !important; } body.qp[data-ruta="pos"] .descripcion-pos { color: var(--qp-tinta) !important; font-size: 12.5px !important; } body.qp[data-ruta="pos"] .precio-unitario { color: var(--qp-medio) !important; font-weight: 700 !important; font-size: 14px !important; } body.qp[data-ruta="pos"] .btn-pos-mas { background: var(--qp-medio) !important; color: #fff !important; border-color: var(--qp-medio) !important; } body.qp[data-ruta="pos"] .btn-pos-menos { background: #E4E8E5 !important; color: var(--qp-tinta) !important; border-color: #E4E8E5 !important; } body.qp[data-ruta="pos"] .btn-agregar-ps-pos, body.qp[data-ruta="pos"] .btn-edit-pos, body.qp[data-ruta="pos"] .foto-pos { background: var(--qp-medio) !important; color: #fff !important; } body.qp[data-ruta="pos"] .sin-stock { background: var(--qp-peligro) !important; color: #fff !important; } body.qp[data-ruta="pos"] .paginador-pos .active a, body.qp[data-ruta="pos"] .paginador-pos a.active { background: var(--qp-medio) !important; color: #fff !important; } /* Panel del carrito */ body.qp[data-ruta="pos"] .super-contenedor-formulario-pos .rounded, body.qp[data-ruta="pos"] .formVenta { border-left: 4px solid var(--qp-medio) !important; } body.qp[data-ruta="pos"] #searchpcPos { border: 1px solid var(--qp-borde-2) !important; border-radius: 2px; height: 38px; padding: 0 10px; } body.qp[data-ruta="pos"] .inicio-pos, body.qp[data-ruta="pos"] .btn-h-pos { background: var(--qp-oscuro) !important; color: #fff !important; } /* Login MAS CENTRADO Y MAS GRANDE (pedido del usuario 2026-09-14) */ body.qp .qpl-col { width: 540px; padding: 30px 48px 20px; } body.qp .qpl-marca { margin-top: auto; } /* marca + tarjeta quedan centradas en la columna */ body.qp .qpl-logo-app { font-size: 46px; } body.qp .qpl-tagline { font-size: 18px; } body.qp .qpl-empresa { font-size: 21px; } body.qp .qpl-bienvenida { font-size: 22px; margin: 16px 0 14px; } body.qp .qpl-logo-empresa { display: block; max-width: 260px; max-height: 160px; width: auto; height: auto; margin: 18px auto 4px; padding: 12px 16px; border-radius: 12px; object-fit: contain; object-position: center; box-shadow: 0 10px 26px rgba(0,0,0,.22); } body.qp .qpl-card { padding: 34px 38px 30px; border-radius: 14px; } body.qp .qpl-titulo { font-size: 25px; margin-bottom: 22px; } body.qp .qpl-label { font-size: 12px; } body.qp .qpl-input { height: 54px; font-size: 18px; margin-bottom: 18px; } body.qp .qpl-btn { height: 58px; font-size: 17px; } body.qp .qpl-pie { margin-top: auto; } /* ══════════════════════════════════════════════════════════════════════════ 12. RESPONSIVE ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { body.qp .main-header .logo { border-right: 0 !important; } body.qp .qp-total-caja .val { font-size: 24px; } body.qp .qp-segmento { width: 100%; } body.qp .qp-segmento button { flex: 1; padding: 8px 6px; } } /* Nota credito CO: como se devuelve el dinero (reembolso) */ body.qp .qpnc-reembolso-titulo { margin: 14px 0 6px; font-weight: 600; text-align: left; } body.qp .qpnc-reembolso { margin: 0; font-size: 14px; } body.qp .qpnc-reembolso td { vertical-align: middle !important; } body.qp .qpnc-reembolso .qpnc-reembolso-suma td { border-top: 2px solid #ddd; } body.qp .qpnc-reembolso-aviso { margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: #FDECEC; color: #C62828; font-size: 13px; text-align: left; } /* Colombia: el POS y los documentos no usan moneda (siempre COP), serie, fechas, sucursales ni detracciones. Solo se OCULTAN: los campos siguen en el formulario con su valor por defecto (primera serie, hoy). */ body.qp[data-pais="CO"] label[for="optionh1"], body.qp[data-pais="CO"] label[for="optionh4"], body.qp[data-pais="CO"] label[for="optionh5"], body.qp[data-pais="CO"] .seccion-fechas-moneda-correlativo, body.qp[data-pais="CO"] .seccion-sucursal, body.qp[data-pais="CO"] .seccion-detra-selva, body.qp[data-pais="CO"] .contenedor-detracciones, body.qp[data-pais="CO"] .formVenta div[class*="col-"]:has(> .form-group > .input-group > #moneda), body.qp[data-pais="CO"] .formVenta div[class*="col-"]:has(> .form-group > .input-group > #serie), body.qp[data-pais="CO"] .formVenta div[class*="col-"]:has(> .form-group > .input-group > #fechaDoc), body.qp[data-pais="CO"] .formVenta div[class*="col-"]:has(> .form-group > .input-group > #fechaVence), body.qp[data-pais="CO"] .formVenta .row-sucursal, body.qp[data-pais="CO"] .formVenta div[class*="col-"]:has(> #sucursalbtnof), body.qp[data-pais="CO"] .formVenta div[class*="col-"]:has(> .toggle > #sucursalbtnof) { display: none !important; } /* Colombia: el POS no muestra "Solo firmar e imprimir" ni "Enviar a SUNAT/DIAN": la FE la decide FacEPro al guardar */ body.qp[data-pais="CO"] .contenedor-herramientas-pos label[for="firmar"], body.qp[data-pais="CO"] .contenedor-herramientas-pos label[for="enviar"] { display: none !important; } /* Colombia: factura y cotizacion guardan directo con el boton; la opcion "Guardar cotizacion" / "Solo firmar - Enviar a DIAN" no aplica (la FE la decide FacEPro al guardar) */ body.qp[data-pais="CO"] .box:has(> .radio-envio) { display: none !important; } /* Colombia - Nueva compra: sin ICBPER ni operaciones gratuitas (Peru); los impuestos sectoriales se calculan con el producto y se muestran en el resumen */ body.qp[data-pais="CO"] .formCompra .tabla-totales tr:has(#op_gratuitas), body.qp[data-pais="CO"] .formCompra .tabla-totales tr:has(#icbper), body.qp[data-pais="CO"] #formItems div[class*="col-"]:has(> .form-group > .modo-contenedor-icbper) { display: none !important; } /* solo la columna del ICBPER: el descuento por item va en la misma fila */ /* Notas de compra (Colombia): cabecera de 4 datos y "Nueva compra" solo con observacion (el pago va en Procesar pago) */ body.qp .qpnc-cabecera.qpnc-cabecera--compra { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { body.qp .qpnc-cabecera.qpnc-cabecera--compra { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.qp[data-pais="CO"] .formCompra .qp-oculto-co { display: none !important; } /* Colombia no maneja sucursales (una sola sede): fuera de compras y de los modales de producto. Los campos siguen en el formulario con la sede unica (nuevaSucursal la elige quickpro-lite.js) */ body.qp[data-pais="CO"] .row-sucursal, body.qp[data-pais="CO"] div[class*="col-"]:has(> #sucursalbtnof), body.qp[data-pais="CO"] div[class*="col-"]:has(> .toggle > #sucursalbtnof), body.qp[data-pais="CO"] .modal .form-group:has(> #nuevaSucursal) { display: none !important; } /* Nueva compra (Colombia): botonera como ventas — F12 PROCESAR PAGO verde y grande + Anular */ body.qp[data-pais="CO"][data-ruta="nueva-compra"] .contenedor-btns-carrito { display: flex !important; gap: 10px; align-items: stretch; justify-content: flex-end; background: transparent !important; border: 0 !important; padding: 12px 0 !important; } body.qp[data-pais="CO"][data-ruta="nueva-compra"] .btnGuardarCompra { order: 2; flex: 0 1 460px; min-height: 56px; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; background: var(--qp-medio) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: .6px; text-transform: uppercase; width: auto !important; height: auto !important; } body.qp[data-pais="CO"][data-ruta="nueva-compra"] .btnGuardarCompra:hover { background: var(--qp-oscuro) !important; } body.qp[data-pais="CO"][data-ruta="nueva-compra"] .btnEliminarCarro { order: 1; min-height: 56px; padding: 0 22px !important; margin: 0 !important; width: auto !important; height: auto !important; display: inline-flex !important; align-items: center; background: #fff !important; background-image: none !important; color: var(--qp-peligro) !important; border: 1px solid var(--qp-peligro) !important; border-radius: 2px !important; box-shadow: none !important; font-size: 14px !important; } body.qp[data-pais="CO"][data-ruta="nueva-compra"] .btnEliminarCarro:hover { background: var(--qp-peligro) !important; color: #fff !important; } body.qp[data-pais="CO"][data-ruta="nueva-compra"] .contenedor-btns-carrito button i { font-size: 16px !important; margin-right: 8px; color: inherit !important; } /* Nueva compra - modal "Agregar producto" (#formItems): sus .box solo envuelven columnas flotantes, quedaban de 2 px y dibujaban rayas que cruzaban el buscador. Sin marco y cerrando los flotantes. */ body.qp #formItems .box { border: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important; min-height: 0; } body.qp #formItems .box::after { content: ""; display: table; clear: both; } body.qp #formItems > .col-lg-12 { padding-left: 0; padding-right: 0; } /* Colombia: el item de compra es un producto ya creado; tipo de afectacion y unidad vienen de su ficha */ body.qp[data-pais="CO"] #formItems div[class*="col-"]:has(> .form-group > #tipo_afectacion), body.qp[data-pais="CO"] #formItems div[class*="col-"]:has(> .form-group > #unidad) { display: none !important; } /* el descuento queda alineado con las demas columnas */ body.qp #formItems .p-productos { position: relative; z-index: 5; background: #fff; border: 1px solid var(--qp-borde); border-radius: 6px; max-height: 280px; overflow: auto; } body.qp #formItems .p-productos:empty { display: none !important; } body.qp .qp-adicional-linea { display: block; margin-top: 3px; font-size: 11.5px; color: var(--qp-muted, #6b7280); } /* ══════════════════════════════════════════════════════════════════════════ Reportes de ventas y compras: pestanas, botones de exportar y fichas ══════════════════════════════════════════════════════════════════════════ */ /* Pestanas de tipo de documento: control segmentado (el radio va DESPUES de su label → :has) */ body.qp .contenedor-radios { gap: 6px; padding-left: 0; margin: 6px 0 12px; color: var(--qp-tinta); } body.qp .contenedor-radios label, body.qp .contenedor-radios label:nth-child(n) { background: var(--qp-tarjeta) !important; color: var(--qp-tinta-2) !important; border: 1px solid var(--qp-borde-2); border-radius: 20px; margin: 0; padding: 6px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .6px; transition: background .15s ease, color .15s ease, border-color .15s ease; } body.qp .contenedor-radios label i { color: var(--qp-muted); margin-right: 4px; } body.qp .contenedor-radios label:hover { border-color: var(--qp-claro); color: var(--qp-medio) !important; } body.qp .contenedor-radios label:has(+ input:checked) { background: var(--qp-medio) !important; border-color: var(--qp-medio); color: #fff !important; } body.qp .contenedor-radios label:has(+ input:checked) i { color: #fff; } /* Botones de exportar: sin la barra gris oscura; PDF rojo, Excel verde, enviar azul */ body.qp .contenedor-btn-reportes { background: transparent !important; width: auto; gap: 8px; padding: 0; margin: 0 0 12px; justify-content: flex-end; } body.qp .contenedor-btn-reportes .pull-right { float: none !important; } body.qp .contenedor-btn-reportes .btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 38px; margin: 0; padding: 0; background: var(--qp-tarjeta) !important; border: 1px solid var(--qp-borde-2) !important; } body.qp .contenedor-btn-reportes .btn i { color: inherit !important; font-size: 18px; } body.qp .contenedor-btn-reportes .btn-reporte-pdf, body.qp .contenedor-btn-reportes .btn-reporte-pdf-compras { color: var(--qp-peligro) !important; } body.qp .contenedor-btn-reportes .btn-success { color: var(--qp-medio) !important; } body.qp .contenedor-btn-reportes .btn-show-envio, body.qp .contenedor-btn-reportes .btn-show-envio-reporte { color: var(--qp-info) !important; } body.qp .contenedor-btn-reportes .btn:hover { border-color: currentColor !important; background: var(--qp-seleccion) !important; } /* Fichas: el icono toma el color del acento de su documento */ body.qp .info-box-icon > i { color: var(--qp-acento, var(--qp-medio)); font-size: 30px; } body.qp .info-box:has(.bg-nc) .info-box-icon { background: #FDECEC !important; } body.qp .info-box:has(.bg-nd) .info-box-icon { background: var(--qp-ahorro-bg) !important; } body.qp .info-box:has(.bg-tn) .info-box-icon { background: #E3ECE9 !important; } /* Colombia: los reportes no filtran por sucursal */ body.qp[data-pais="CO"] .input-group-search select#selectSucursal, body.qp[data-pais="CO"] .input-group-search select#selectSucursal + .select2 { display: none !important; } /* Reportes: selector de cantidad y lupa en verde; aviso "sin resultados" suave */ body.qp .input-group-search .bootstrap-select > .btn, body.qp .input-group-search select#selectnum { border-color: var(--qp-borde-2) !important; color: var(--qp-tinta) !important; } body.qp .input-group-search .input-search { color: var(--qp-medio); } body.qp .tabla-reportes td[colspan] .alert, body.qp .tabla-reportes .alert-danger, body.qp .result-report { background: #FDECEC !important; color: #B42F2E !important; border: 1px solid #F5C2C1; border-radius: 8px; } /* Reportes: iconos de la tabla (antes imagenes de otro estilo) con Font Awesome */ body.qp .tabla-reportes .contenedor-print-comprobantes #printA4, body.qp .tabla-reportes .contenedor-print-comprobantes #printT, body.qp .tabla-reportes .contenedor-print-comprobantes .senda4, body.qp .tabla-reportes .contenedor-print-comprobantes .sendwsa4, body.qp .tabla-reportes .contenedor-print-comprobantes .s-success, body.qp .tabla-reportes .btn-print-compra { background-image: none !important; width: 34px; height: 34px; margin: 2px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--qp-borde-2) !important; border-radius: 8px !important; background: var(--qp-tarjeta) !important; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; line-height: 1; transition: background .15s ease, border-color .15s ease; } body.qp .tabla-reportes .contenedor-print-comprobantes #printA4::before, body.qp .tabla-reportes .btn-print-compra::before { content: "\f1c1"; color: var(--qp-peligro); } body.qp .tabla-reportes .contenedor-print-comprobantes #printT::before { content: "\f543"; color: var(--qp-tinta-2); } body.qp .tabla-reportes .contenedor-print-comprobantes .senda4::before { content: "\f0e0"; color: var(--qp-info); } body.qp .tabla-reportes .contenedor-print-comprobantes .sendwsa4::before { content: "\f232"; font-family: "Font Awesome 5 Brands"; font-weight: 400; color: #25D366; font-size: 17px; } body.qp .tabla-reportes .btn-print-compra { font-size: 0 !important; } body.qp .tabla-reportes .btn-print-compra::before { font-size: 15px; } body.qp .tabla-reportes .contenedor-print-comprobantes .s-success::before { content: "\f058"; color: var(--qp-medio); } body.qp .tabla-reportes .contenedor-print-comprobantes button:hover, body.qp .tabla-reportes .btn-print-compra:hover { background: var(--qp-seleccion) !important; border-color: var(--qp-claro) !important; } body.qp .tabla-reportes .contenedor-print-comprobantes .qp-estado { white-space: nowrap; } /* Reportes: los accesos "Emitir factura / Nota de venta" no pertenecen a un reporte */ body.qp[data-ruta="reporte-ventas"] .dashboard-header .btns-dash, body.qp[data-ruta="reporte-compras"] .dashboard-header .btns-dash { display: none !important; } /* Reportes: valores en una sola linea */ body.qp .tabla-reportes td { white-space: nowrap; } body.qp .tabla-reportes td:nth-child(3), body.qp .tabla-reportes td:nth-child(4) { white-space: normal; } /* Administrar ventas: mismos iconos que Reportes + WhatsApp de Colombia */ body.qp .tablaVentas .contenedor-print-comprobantes #printA4, body.qp .tablaVentas .contenedor-print-comprobantes #printT, body.qp .tablaVentas .contenedor-print-comprobantes .senda4, body.qp .tablaVentas .contenedor-print-comprobantes .sendwsa4, body.qp .contenedor-print-comprobantes .qp-ws-co { background-image: none !important; width: 34px; height: 34px; margin: 2px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--qp-borde-2) !important; border-radius: 8px !important; background: var(--qp-tarjeta) !important; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease; } body.qp .tablaVentas .contenedor-print-comprobantes #printA4::before { content: "\f1c1"; color: var(--qp-peligro); } body.qp .tablaVentas .contenedor-print-comprobantes #printT::before { content: "\f543"; color: var(--qp-tinta-2); } body.qp .tablaVentas .contenedor-print-comprobantes .senda4::before { content: "\f0e0"; color: var(--qp-info); } body.qp .tablaVentas .contenedor-print-comprobantes .sendwsa4::before, body.qp .contenedor-print-comprobantes .qp-ws-co::before { content: "\f232"; font-family: "Font Awesome 5 Brands"; font-weight: 400; color: #25D366; font-size: 17px; } body.qp .tablaVentas .contenedor-print-comprobantes button:hover, body.qp .contenedor-print-comprobantes .qp-ws-co:hover { background: var(--qp-seleccion) !important; border-color: var(--qp-claro) !important; } /* ── Quick Pro Lite: CATEGORÍAS en árbol, SERVICIOS y panel del POS (migración 015) ── */ body.qp .qpc-acciones { display: flex; gap: 6px; padding: 0 12px 10px; } body.qp .qpc-acciones .btn { flex: 1; font-size: 12px; } body.qp .qpc-arbol .qpc-item { gap: 8px; padding-top: 7px; padding-bottom: 7px; } body.qp .qpc-icono { flex: 0 0 34px; height: 34px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: #fff; border: 1px solid var(--qp-borde); font-size: 17px; } body.qp .qpc-icono img { width: 100%; height: 100%; object-fit: cover; } body.qp .qpc-oculta { color: var(--qp-muted); font-size: 13px; } body.qp .qpc-ruta { margin: -2px 0 12px; font-size: 12px; color: var(--qp-muted); } body.qp .qpc-general { display: grid; grid-template-columns: 1fr 220px; gap: 18px; align-items: start; } body.qp .qp-categorias[data-tipo="S"] .qpc-general { grid-template-columns: 1fr; } body.qp .qpc-color { height: 34px; padding: 2px 4px; cursor: pointer; } body.qp .qpc-tile { position: relative; aspect-ratio: 17 / 11; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 8px; font-weight: 700; font-size: 13px; text-align: center; box-shadow: 0 2px 8px rgba(6,40,33,.15); } body.qp .qpc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.qp .qpc-tile span { position: relative; z-index: 1; } body.qp .qpc-tile.con-imagen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(transparent, rgba(0,0,0,.72)); } body.qp .qpc-tile.con-imagen span { color: #fff !important; } body.qp .qpc-tile.con-imagen span { z-index: 2; } body.qp .qpc-imagen-botones { display: flex; gap: 6px; } body.qp .qpc-imagen-botones .btn { flex: 1; margin: 0; } body.qp .qpc-info { margin-top: 12px; font-size: 12px; color: var(--qp-muted); } body.qp .qpc-eliminar { margin-right: auto; background: #fff !important; border: 1px solid var(--qp-peligro) !important; color: var(--qp-peligro) !important; font-weight: 700; } body.qp #qpcForm:not(.qpc-editando) .qpc-solo-edicion { display: none; } body.qp #qpcForm[hidden] { display: none !important; } @media (max-width: 1199px) { body.qp .qpc-general { grid-template-columns: 1fr; } body.qp .qpc-imagen { max-width: 260px; } } /* Servicios: la misma ficha de productos sin existencias, series ni imagen */ body.qp .qpp-servicio .qpp-no-servicio, body.qp .qpp-servicio .qpp-imagen { display: none !important; } body.qp .qpp-servicio .qpp-general { grid-template-columns: 1fr; } body.qp .qpp-extra { margin-top: 12px; } body.qp .qpp-extra .qpp-nota { margin: 0; } /* POS: panel de categorías → subcategorías (PnlAccesoRapido de QuickPOS Pro) */ body.qp .qp-panel-cat { margin: 0 0 10px; padding: 8px; border: 1px solid var(--qp-borde); border-radius: 8px; background: #fff; } body.qp .qp-panel-cat-barra { display: flex; align-items: center; gap: 6px; min-height: 30px; } body.qp .qp-panel-btn { border: 0; border-radius: 6px; padding: 5px 10px; background: var(--qp-oscuro); color: #fff; font-size: 11px; font-weight: 700; } body.qp .qp-panel-btn[hidden] { display: none; } body.qp .qp-panel-miga { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--qp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.qp .qp-panel-miga span[data-id] { cursor: pointer; color: var(--qp-medio); } body.qp .qp-panel-miga b { color: var(--qp-tinta); } body.qp .qp-panel-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; max-height: 250px; overflow-y: auto; } body.qp .qp-panel-tiles[hidden] { display: none; } body.qp .qp-cat-tile { position: relative; height: 82px; border: 0; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center; box-shadow: 0 2px 6px rgba(6,40,33,.15); transition: transform .08s; } body.qp .qp-cat-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(6,40,33,.22); } body.qp .qp-cat-tile i { font-size: 20px; opacity: .85; } body.qp .qp-cat-tile.con-imagen { justify-content: flex-end; background: #333; color: #fff; } body.qp .qp-cat-tile.con-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.qp .qp-cat-tile.con-imagen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(transparent, rgba(0,0,0,.75)); } body.qp .qp-cat-nombre { position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.qp .qp-cat-hijos { position: absolute; top: 5px; right: 6px; z-index: 1; min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(0,0,0,.35); color: #fff; font-size: 10px; line-height: 18px; } /* ── Quick Pro Lite: VENTANA DE DOCUMENTO EMITIDO (dialogo-emision.js) ── */ body.qp .swal2-popup.qp-emision { width: min(560px, 94vw) !important; padding: 0 0 20px !important; overflow: hidden; } body.qp .qp-emision .swal2-icon, body.qp .qp-emision .swal2-title { display: none !important; } body.qp .qp-emision .swal2-html-container { margin: 18px 24px 0 !important; } body.qp .qp-emision-cab { display: flex; align-items: center; gap: 16px; padding: 22px 26px; background: var(--qp-oscuro); color: #fff; text-align: left; } body.qp .qp-emision-ico { flex: 0 0 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--qp-serie); color: #fff; font-size: 26px; box-shadow: 0 0 0 6px rgba(255,255,255,.1); } body.qp .qp-emision-pendiente .qp-emision-ico { background: #EF9F27; } body.qp .qp-emision-rechazada .qp-emision-ico { background: var(--qp-peligro); } body.qp .qp-emision-interno .qp-emision-ico, body.qp .qp-emision-no_electronica .qp-emision-ico { background: var(--qp-info, #2A78D6); } body.qp .qp-emision-textos { display: flex; flex-direction: column; min-width: 0; } body.qp .qp-emision-titulo { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.85); } body.qp .qp-emision-numero { font-size: 26px; font-weight: 700; letter-spacing: .03em; line-height: 1.15; color: #fff; } body.qp .qp-emision-detalle { font-size: 13px; color: rgba(255,255,255,.7); } body.qp .qp-emision .qpfe-res { margin: 0 0 14px; } body.qp .qp-emision-lineas { border: 1px solid var(--qp-borde); border-radius: 8px; overflow: hidden; margin-bottom: 10px; } body.qp .qp-emision-linea { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 15px; color: var(--qp-tinta-2); } body.qp .qp-emision-linea b { font-size: 18px; color: var(--qp-tinta); } body.qp .qp-emision-nota { font-size: 13px; color: var(--qp-muted); text-align: left; margin: 4px 2px; } body.qp .qp-emision-sub { margin: 14px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--qp-muted); } body.qp .contenedor-print, body.qp .contenedor-print form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } body.qp .contenedor-print #printA4, body.qp .contenedor-print #printT { position: relative; width: 150px !important; height: 100px !important; margin: 0 !important; padding: 12px 8px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #fff none !important; border: 1px solid var(--qp-borde-2) !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(6,40,33,.08) !important; color: var(--qp-tinta); transition: transform .1s, box-shadow .1s, border-color .1s; } body.qp .contenedor-print #printA4::before, body.qp .contenedor-print #printT::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 34px; line-height: 1; } body.qp .contenedor-print #printA4::before { content: "\f1c1"; color: var(--qp-peligro); } body.qp .contenedor-print #printT::before { content: "\f543"; color: var(--qp-tinta-2); } body.qp .contenedor-print #printA4::after, body.qp .contenedor-print #printT::after { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--qp-tinta); } body.qp .contenedor-print #printA4::after { content: "PDF A4"; } body.qp .contenedor-print #printT::after { content: "TICKET 80 mm"; } body.qp .contenedor-print #printA4:hover, body.qp .contenedor-print #printT:hover { transform: translateY(-2px); border-color: var(--qp-medio) !important; background: var(--qp-seleccion) !important; box-shadow: 0 6px 14px rgba(6,40,33,.14) !important; } body.qp .qp-emision .swal2-actions { margin-top: 18px !important; } body.qp .qp-emision .swal2-cancel { min-width: 160px; font-weight: 700 !important; } body.qp .swal2-popup.qp-emision-pdf { padding: 12px !important; } body.qp .qp-emision .swal2-cancel:focus { box-shadow: 0 0 0 3px rgba(29,130,104,.25) !important; border-color: var(--qp-medio) !important; } /* ── Quick Pro Lite: COTIZACIONES con el formato de Administrar ventas; boleta solo Peru ── */ body.qp .tablaCotizaciones .contenedor-print-comprobantes #printA4, body.qp .tablaCotizaciones .contenedor-print-comprobantes .senda4 { background-image: none !important; width: 34px; height: 34px; margin: 2px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--qp-borde-2) !important; border-radius: 8px !important; background: var(--qp-tarjeta) !important; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease; } body.qp .tablaCotizaciones .contenedor-print-comprobantes #printA4::before { content: "\f1c1"; color: var(--qp-peligro); } body.qp .tablaCotizaciones .contenedor-print-comprobantes .senda4::before { content: "\f0e0"; color: var(--qp-info); } body.qp .tablaCotizaciones .contenedor-print-comprobantes button:hover { background: var(--qp-seleccion) !important; border-color: var(--qp-claro) !important; } body.qp .tablaCotizaciones .contenedor-print-comprobantes { display: flex; justify-content: center; } body.qp .tablaCotizaciones .contenedor-print-comprobantes form { display: inline-flex; } body.qp .tablaCotizaciones td { vertical-align: middle !important; } body.qp .tablaCotizaciones .btn-contenedor-cotizaciones { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } body.qp .tablaCotizaciones .btn-contenedor-cotizaciones form { margin: 0; } body.qp .tablaCotizaciones .btn-contenedor-cotizaciones button { border: 1px solid var(--qp-medio) !important; background: #fff !important; color: var(--qp-medio) !important; border-radius: 8px !important; padding: 5px 10px !important; font-size: 12px; font-weight: 700; white-space: nowrap; } body.qp .tablaCotizaciones .btn-contenedor-cotizaciones button:hover { background: var(--qp-medio) !important; color: #fff !important; } /* Colombia no emite boletas: fuera los accesos "Emitir boleta" / "Crear boleta" de todas las pantallas */ body.qp[data-pais="CO"] a[href="crear-boleta"], body.qp[data-pais="CO"] form[action="crear-boleta"] { display: none !important; } /* ── Quick Pro Lite: Administrar ventas con pestaña Cotizaciones ── */ body.qp .qpv-tabs { display: flex; gap: 0; margin: 0 15px; border-bottom: 2px solid var(--qp-borde); } body.qp .qpv-tabs button { border: 0; background: transparent; padding: 10px 18px; margin-bottom: -2px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--qp-muted); border-bottom: 3px solid transparent; } body.qp .qpv-tabs button i { margin-right: 6px; } body.qp .qpv-tabs button:hover { color: var(--qp-oscuro); } body.qp .qpv-tabs button.activo { color: var(--qp-oscuro); border-bottom-color: var(--qp-medio); } body.qp .box .qpv-solo-cotizaciones { display: none !important; } body.qp .box.qpv-en-cotizaciones .qpv-solo-cotizaciones { display: block !important; } body.qp .box.qpv-en-cotizaciones .qpv-solo-ventas { display: none !important; } /* ── Quick Pro Lite: WHATSAPP (whatsapp.js) ── */ body.qp .qp-ws-reporte { background: #25D366 !important; border-color: #1DA851 !important; color: #fff !important; margin-left: 6px; } body.qp .qp-ws-reporte:hover { background: #1DA851 !important; } body.qp .qp-ws-popup { width: min(520px, 94vw) !important; } body.qp .qp-ws-form { text-align: left; } body.qp .qp-ws-form label { display: block; margin: 10px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--qp-muted); text-transform: uppercase; } body.qp .qp-ws-form textarea { resize: vertical; font-size: 14px; } body.qp .qp-ws-nota { display: block; margin-top: 10px; color: var(--qp-muted); } body.qp .qp-ws-hist { margin-top: 12px; border-top: 1px dashed var(--qp-borde); padding-top: 8px; font-size: 12px; } body.qp .qp-ws-hist b { display: block; margin-bottom: 4px; color: var(--qp-tinta-2); } body.qp .qp-ws-hist-fila { padding: 3px 0; color: var(--qp-tinta-2); } body.qp .qp-ws-hist-fila small { display: block; margin-left: 18px; color: var(--qp-peligro); } body.qp .qp-ws-ok i { color: #0B6B4A; } body.qp .qp-ws-falla i { color: var(--qp-peligro); } body.qp .qpws .qpfe-botones .btn { margin: 0; } body.qp[data-ws="1"] .input-group:has(#enviawsc) { display: none; } /* WhatsApp por API: el envio es automatico */ /* ── Quick Pro Lite: LOGIN SIN SCROLL (se ajusta a la altura de la pantalla) ── */ @media (min-width: 861px) { body.qp .qpl-col { overflow: hidden; padding-top: clamp(12px, 2.8vh, 30px); padding-bottom: clamp(8px, 1.9vh, 20px); } body.qp .qpl-logo-lite { width: clamp(40px, 8.9vh, 96px); height: clamp(40px, 8.9vh, 96px); margin-bottom: clamp(4px, .9vh, 10px); border-radius: clamp(12px, 2vh, 22px); } body.qp .qpl-logo-app { font-size: clamp(24px, 4.3vh, 46px); } body.qp .qpl-tagline { font-size: clamp(13px, 1.7vh, 18px); } body.qp .qpl-divisor { margin: clamp(5px, 1.3vh, 14px) 0; } body.qp .qpl-empresa { font-size: clamp(15px, 1.95vh, 21px); } body.qp .qpl-logo-empresa { max-height: clamp(38px, 14.8vh, 160px); margin: clamp(6px, 1.7vh, 18px) auto 2px; padding: clamp(4px, 1.1vh, 12px) 16px; } body.qp .qpl-bienvenida { font-size: clamp(16px, 2vh, 22px); margin: clamp(5px, 1.5vh, 16px) 0 clamp(5px, 1.3vh, 14px); } body.qp .qpl-card { padding: clamp(10px, 3.1vh, 34px) 38px clamp(10px, 2.8vh, 30px); } body.qp .qpl-titulo { font-size: clamp(18px, 2.3vh, 25px); margin-bottom: clamp(6px, 2vh, 22px); } body.qp .qpl-label { margin-bottom: clamp(3px, .55vh, 6px); } body.qp .qpl-input { height: clamp(36px, 5vh, 54px); margin-bottom: clamp(6px, 1.7vh, 18px); font-size: clamp(15px, 1.7vh, 18px); } body.qp .qpl-btn { height: clamp(38px, 5.4vh, 58px); margin-top: clamp(2px, .55vh, 6px); } body.qp .qpl-pie { padding-top: clamp(6px, 1.7vh, 18px); } body.qp .qpl-modulo { font-size: clamp(13px, 1.4vh, 15px); } } /* ventanas bajas (laptop con las barras del navegador): se compacta la columna */ @media (min-width: 861px) and (max-height: 700px) { body.qp .qpl-logo-lite { width: 44px; height: 44px; border-radius: 12px; } body.qp .qpl-logo-empresa { max-height: 58px; } body.qp .qpl-empresa-sub, body.qp .qpl-version { display: none; } body.qp .qpl-divisor { margin: 6px 0; } } /* pantallas muy bajas (menos de 560 px): se permite desplazar para no cortar el formulario */ @media (min-width: 861px) and (max-height: 559px) { body.qp .qpl-col { overflow-y: auto; } } /* ── Quick Pro Lite: LOGIN EN CELULAR SIN SCROLL ── */ @media (max-width: 860px) { body.qp .qpl-login { position: fixed; inset: 0; height: 100vh; height: 100dvh; min-height: 0; } body.qp .qpl-col { width: 100%; height: 100%; overflow: hidden; box-shadow: none; padding: clamp(10px, 2.4vh, 26px) clamp(16px, 5vw, 28px) clamp(8px, 1.6vh, 16px); } body.qp .qpl-marca { margin-top: auto; } body.qp .qpl-logo-lite { width: clamp(40px, 7.5vh, 72px); height: clamp(40px, 7.5vh, 72px); margin-bottom: clamp(4px, .8vh, 8px); border-radius: clamp(10px, 1.7vh, 18px); } body.qp .qpl-logo-app { font-size: clamp(24px, 4vh, 36px); } body.qp .qpl-tagline { font-size: clamp(13px, 1.7vh, 16px); } body.qp .qpl-divisor { margin: clamp(5px, 1.1vh, 10px) 0; } body.qp .qpl-empresa { font-size: clamp(15px, 2vh, 18px); } body.qp .qpl-empresa-sub, body.qp .qpl-version { display: none; } body.qp .qpl-logo-empresa { max-width: 70%; max-height: clamp(36px, 9vh, 90px); margin: clamp(6px, 1.3vh, 12px) auto 2px; padding: clamp(4px, .9vh, 8px) 12px; } body.qp .qpl-bienvenida { font-size: clamp(16px, 2.1vh, 20px); margin: clamp(5px, 1.3vh, 12px) 0 clamp(5px, 1.1vh, 10px); } body.qp .qpl-card { padding: clamp(12px, 2.6vh, 26px) clamp(16px, 5vw, 26px) clamp(12px, 2.4vh, 24px); } body.qp .qpl-titulo { font-size: clamp(18px, 2.5vh, 23px); margin-bottom: clamp(6px, 1.7vh, 16px); } body.qp .qpl-label { margin-bottom: clamp(3px, .5vh, 6px); } body.qp .qpl-input { height: clamp(40px, 5.6vh, 50px); margin-bottom: clamp(8px, 1.6vh, 14px); font-size: 16px; } /* 16px: el celular no hace zoom al escribir */ body.qp .qpl-btn { height: clamp(42px, 5.8vh, 52px); margin-top: clamp(2px, .5vh, 6px); } body.qp .qpl-pie { margin-top: auto; padding-top: clamp(6px, 1.4vh, 14px); } body.qp .qpl-modulo { font-size: 13px; } body.qp .qpl-derechos { font-size: 11px; } } /* celular acostado o pantalla muy baja: se permite desplazar para no cortar el formulario */ @media (max-width: 860px) and (max-height: 520px) { body.qp .qpl-col { overflow-y: auto; } body.qp .qpl-marca, body.qp .qpl-pie { margin-top: 0; } }