/* ============================================================================ ingresoPedidoV2.css — Terminal de cobro "A · Contraste" ---------------------------------------------------------------------------- Hoja AUTÓNOMA de ingresoPedidoV2.html. Esta página ya NO carga styles.css: todo lo que antes heredaba de ahí está reimplementado acá abajo. No editar styles.css pensando en esta pantalla — la comparten otras 8 páginas. Reglas de convivencia con ingresoPedidoV2.js (no tocar sin leer esto): · El JS pinta varios estados con style inline (background de #adminModeBtn, #cambiosModeBtn, #manualSearchBtn, #cargarClienteBtn, el resaltado verde de la fila escaneada, los colores de #cotizacionValor y #message). Esos inline ganan siempre: la paleta de acá está elegida para acompañarlos, no para pelearlos. NO agregar !important sobre esas propiedades. · Los pocos !important que hay abajo están sobre estilos inline que el JS escribe UNA vez al construir el markup y nunca vuelve a tocar (.articulo-img, .codigo, .cantidad, .valorU, .remove-btn). Son puramente cosméticos. · El CSS de los toasts lo inyecta el JS en DESPUÉS de esta hoja, así que se lo pisa desde #scanToastStack (mayor especificidad). ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { /* superficies claras — zona de trabajo */ --bg: #f4f5f7; --surface: #ffffff; --surface-2: #fafbfc; --line: #dde0e5; --line-2: #e7e9ed; --line-3: #f0f1f4; /* tinta */ --ink: #1a1c20; --ink-2: #43464e; --ink-3: #6e7178; --ink-4: #8a8d95; --ink-5: #a3a6ae; /* panel de cobro — grafito */ --pos: #17181c; --pos-2: #202228; --pos-3: #292b32; --pos-line: #33353c; --pos-line-2: #2a2c33; --pos-line-3: #3d3f48; --pos-ink: #ffffff; --pos-ink-2: #e7e8ec; --pos-ink-3: #c6c8ce; --pos-ink-4: #9b9ea6; --pos-ink-5: #7c7f89; --pos-ink-6: #6c6f78; /* acentos — los mismos que el JS impone inline */ --violeta: #6c4eb6; --violeta-2: #5a3da0; --violeta-3: #4b2e83; --violeta-claro:#8b6fd6; --violeta-soft: rgba(108, 78, 182, .12); --violeta-ring: rgba(108, 78, 182, .28); --verde: #28a745; --verde-2: #218838; --verde-bg: #e8f5e8; --rojo: #dc2626; --rojo-bg: #fef2f2; --rojo-suave: #c2413b; --rojo-suave-bg:#fcf0f0; /* devolución / garantía */ --op-devolucion: #d97706; --op-devolucion-soft: rgba(217, 119, 6, .12); --op-devolucion-bg: #fffbf2; --op-garantia: #dc2626; --op-garantia-soft: rgba(220, 38, 38, .12); --op-garantia-bg: #fff7f7; /* escala de espaciado — todo múltiplo de 4 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; /* radios */ --r1: 7px; --r2: 10px; --r3: 14px; /* alturas de control — piso táctil de 44px */ --h-sm: 38px; --h-md: 44px; --h-lg: 52px; --h-xl: 56px; --header-h: 70px; --font: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, 'Consolas', 'Courier New', monospace; --shadow-1: 0 1px 2px rgba(16, 24, 40, .04); --shadow-2: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04); --shadow-3: 0 12px 28px rgba(15, 23, 42, .16); --shadow-modal: 0 24px 48px rgba(15, 23, 42, .22); /* Springs cortos y críticamente amortiguados: esto es una herramienta de trabajo, no una demo. Sin rebote en ningún lado. */ --t-fast: 100ms cubic-bezier(.2, 0, .2, 1); --t-base: 160ms cubic-bezier(.2, 0, .2, 1); --t-slow: 220ms cubic-bezier(.2, 0, .2, 1); /* compat: styles.css exponía estas variables y algún fragmento suelto todavía podría leerlas */ --primary: #6c4eb6; --background: #f4f5f7; --white: #ffffff; --border: #dde0e5; --radius: 10px; --spacing: 1rem; } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Cifras alineadas en columna: sin esto los totales bailan al recalcular. Es lo más importante de toda la hoja para una caja. */ .num, input[inputmode="numeric"], .items-table td, .valorTotal, .cantidad, .valorU, .codigo, #subtotal, #totalFinal, #recargo, #descuento, #recargoPorcentaje, #descuentoPorcentaje, #envio, .cambio-resumen-valor, .cambios-result-id, .cambios-result-total, .cambios-origen-id, .cambios-origen-total, .cambios-origen-precio-valor, .cambios-cant-input { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } ::selection { background: var(--violeta-soft); } /* Anillo de foco visible: con lector de códigos y teclado saber dónde está el foco es funcional, no decorativo. */ :focus-visible { outline: 3px solid var(--violeta-ring); outline-offset: 1px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== LAYOUT ========================================================================== */ .container { max-width: 1560px; margin: 0 auto; padding: 0; background: transparent; border-radius: 0; box-shadow: none; } /* ---------------------------------------------------------------- header -- */ .pos-header { position: sticky; top: 0; z-index: 120; display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: var(--header-h); padding: var(--s3) var(--s5); background: rgba(244, 245, 247, .84); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); /* Borde por degradado en vez de una línea dura: el contenido se desvanece donde se cruza con la chrome flotante. */ border-bottom: 1px solid transparent; background-clip: padding-box; box-shadow: 0 1px 0 rgba(26, 28, 32, .07), 0 6px 16px -12px rgba(16, 24, 40, .3); } .pos-brand { display: flex; align-items: center; gap: var(--s5); min-width: 0; } .pos-logo { height: 30px; width: auto; display: block; flex-shrink: 0; } .pos-indicadores { display: flex; align-items: center; gap: var(--s4); padding-left: var(--s5); border-left: 1px solid var(--line); } .pos-ind { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; } .pos-ind-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; } .pos-ind-valor { font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .pos-nav { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; } /* ------------------------------------------------------------------ grid -- */ .pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s4); align-items: start; padding: var(--s4) var(--s5) var(--s6); } .pos-work { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .pos-cobro { position: sticky; top: calc(var(--header-h) + var(--s4)); max-height: calc(100vh - var(--header-h) - var(--s7)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s5) var(--s5) 0; background: var(--pos); border-radius: var(--r3); box-shadow: 0 8px 28px -12px rgba(16, 24, 40, .5); color: var(--pos-ink-2); scrollbar-width: thin; scrollbar-color: var(--pos-line-3) transparent; } .pos-cobro::-webkit-scrollbar { width: 8px; } .pos-cobro::-webkit-scrollbar-thumb { background: var(--pos-line-3); border-radius: 999px; } .pos-cobro-sep { height: 1px; background: var(--pos-line-2); flex-shrink: 0; } .pos-cobro-spacer { flex-grow: 1; min-height: var(--s2); } /* ========================================================================== BOTONES ========================================================================== */ button, input, select, textarea { font-family: inherit; } /* Feedback en pointer-down, no en click: hoy la interfaz no responde al press y eso es lo primero que se siente lento en una caja. */ button:active:not(:disabled), a.secondary:active { transform: scale(.975); } button, a.secondary { transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast), filter var(--t-base); } .primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--h-xl); padding: 0 var(--s6); background: var(--violeta); color: #fff; border: none; border-radius: 12px; font-size: 16.5px; font-weight: 600; letter-spacing: -.005em; cursor: pointer; box-shadow: 0 6px 18px -4px rgba(108, 78, 182, .45); } .primary:hover { background: var(--violeta-2); } .primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--h-md); padding: 0 var(--s4); background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } .secondary:hover { background: var(--surface-2); border-color: #cdd1d8; } /* El botón de nav destacado. Ojo: NO puede vivir dentro de un .actions — ingresoPedidoV2.js:3757 resuelve el botón Imprimir con `.actions button.secondary` y tomaría el primero que matchee. */ .pos-nav .secondary { min-width: 112px; } .pos-nav .nav-destacado { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; } .pos-nav .nav-destacado:hover { background: #000; border-color: #000; } .add-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-md); padding: 0 var(--s5); background: var(--violeta); color: #fff; border: none; border-radius: var(--r2); font-size: 15px; font-weight: 600; cursor: pointer; } .add-btn:hover { background: var(--violeta-2); } .actions { display: flex; align-items: stretch; gap: var(--s3); margin: 0; flex-shrink: 0; } .actions .primary { flex-grow: 1; } /* En una caja ni el importe ni el botón de confirmar pueden quedar debajo del scroll: viajan juntos en un pie anclado al piso del panel y el resto del contenido pasa por detrás. */ .cobro-pie { position: sticky; bottom: 0; z-index: 2; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--s3); margin: 0 calc(-1 * var(--s5)); padding: var(--s3) var(--s5) var(--s5); background: var(--pos); border-top: 1px solid var(--pos-line-2); box-shadow: 0 -14px 18px -12px var(--pos); } /* Calculadora de cobro */ .calc-btn { width: var(--h-xl); height: var(--h-xl); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--pos-2); color: var(--pos-ink-3); border: 1px solid var(--pos-line-3); border-radius: 12px; cursor: pointer; } .calc-btn:hover { background: var(--pos-3); color: #fff; } /* Botón cargar / editar cliente. El JS reescribe el texto de #cargarClienteBtn ('Cargando...', 'Cargado', 'Cargar') y su background cuando queda ocupado, así que se mantiene como botón de texto y no se le fuerza el fondo. */ .cliente-btn { min-height: var(--h-sm); padding: 0 var(--s3); border: 1px solid transparent; border-radius: var(--r1); font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .cliente-btn-cargar { background: var(--verde); } .cliente-btn-cargar:hover { background: var(--verde-2); } .cliente-btn-cargar:disabled { opacity: .75; cursor: default; } .cliente-btn-registrar { background: var(--violeta); } .cliente-btn-registrar:hover { background: var(--violeta-2); } .cliente-btn-registrar:disabled { opacity: .75; cursor: default; } .cliente-btn-editar { background: var(--pos-3); border-color: var(--pos-line-3); color: var(--pos-ink-3); } .cliente-btn-editar:hover { background: #33353c; color: #fff; } .remove-btn { background: var(--rojo-suave-bg) !important; color: var(--rojo-suave) !important; border: none !important; border-radius: 8px !important; width: 36px !important; height: 36px !important; /* el markup del JS le pone display:flex inline, así que se alinea con margin */ margin-left: auto !important; font-size: 0 !important; cursor: pointer; } .remove-btn:hover { background: var(--rojo) !important; color: #fff !important; } .remove-btn span { font-size: 20px !important; font-weight: 400 !important; } /* ========================================================================== SECCIONES Y FORMULARIOS ========================================================================== */ .section { margin: 0; padding: 0; border: none; } h2 { margin: 0 0 var(--s2); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); } .pos-cobro h2 { color: var(--pos-ink-5); } .form-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); } .form-row:last-child { margin-bottom: 0; } .form-row > label { flex: 0 0 88px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); line-height: 1.3; } .form-row input, .form-row select { flex: 1 1 0; min-width: 0; height: var(--h-md); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r2); font-size: 14.5px; color: var(--ink); background: var(--surface); transition: border-color var(--t-base), box-shadow var(--t-base); } .form-row input::placeholder { color: var(--ink-5); } .form-row input:focus, .form-row select:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px var(--violeta-soft); } .form-row input[readonly] { background: var(--surface-2); color: var(--ink-2); } select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7178' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s3) center; padding-right: var(--s7) !important; } /* ------------------------------------------ formularios del panel oscuro -- */ .pos-cobro .form-row > label { color: var(--pos-ink-4); } .pos-cobro .form-row input, .pos-cobro .form-row select { background: var(--pos-2); border-color: var(--pos-line); color: var(--pos-ink-2); } .pos-cobro .form-row input::placeholder { color: var(--pos-ink-6); } .pos-cobro .form-row input:focus, .pos-cobro .form-row select:focus { border-color: var(--violeta-claro); box-shadow: 0 0 0 3px rgba(139, 111, 214, .22); } .pos-cobro .form-row input[readonly] { background: transparent; border-color: transparent; color: var(--pos-ink-2); padding-right: 0; } .pos-cobro select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239b9ea6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Fila de cliente: nombre + los dos botones */ .cliente-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); } /* "Cliente" (h2) haciendo de label: mismo trato tipográfico que el h2 de sección (mayúsculas, 10px, pos-ink-5), solo se le quita el margen propio y se le da un ancho fijo para que quede en línea con el input. */ .cliente-row-label { flex: 0 0 64px; margin: 0; white-space: nowrap; } .cliente-row input { flex: 1 1 0; min-width: 0; height: var(--h-md); padding: 0 var(--s3); border: 1px solid var(--pos-line); border-radius: var(--r2); font-size: 14.5px; background: var(--pos-2); color: var(--pos-ink-2); transition: border-color var(--t-base), box-shadow var(--t-base); } .cliente-row input::placeholder { color: var(--pos-ink-6); } .cliente-row input:focus { outline: none; border-color: var(--violeta-claro); box-shadow: 0 0 0 3px rgba(139, 111, 214, .22); } /* Los tres botones (Cargar / Registrar / Editar) van en su propia fila: en una columna de 344–400px no entran al lado del nombre sin recortar el texto, y el JS reescribe el rótulo de #cargarClienteBtn ('Cargando...', 'Cargado', 'Cargar'). */ .cliente-acciones { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); } .cliente-acciones .cliente-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--s2); } .cliente-toggle { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s2); padding: var(--s1) 0; background: none; border: none; color: var(--violeta-claro); font-size: 12.5px; font-weight: 500; cursor: pointer; } .cliente-toggle:hover { color: #a58ae6; } .cliente-toggle-arrow { font-size: 9px; line-height: 1; } #extraClienteFields { padding-top: var(--s2); } /* La crea el JS con className='form-row' y labels con margin-left inline. Solo se le corrige la geometría — el markup lo sigue generando el JS. */ #tipoClienteRow { flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s2); } #tipoClienteRow > label:first-child { flex: 0 0 100%; font-size: 10px; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--pos-ink-5); } #tipoClienteRow > label:not(:first-child) { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s1); margin-left: 0 !important; font-size: 13px; color: var(--pos-ink-3); cursor: pointer; } #tipoClienteRow input[type="radio"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--violeta-claro); } /* --------------------------------------------------- filas de importes --- */ /* Flex column con un único gap fijo: antes el espacio entre renglones salía de márgenes sueltos que no coincidían entre sí (0 entre Recargo/Descuento, 12px antes de Medio de Pago por su margin-top propio). Con el gap del contenedor todos los renglones — título incluido — quedan a la misma distancia entre sí. */ .cobro-pago { display: flex; flex-direction: column; gap: var(--s2); } .cobro-pago > h2 { margin: 0; } .cobro-linea { display: flex; align-items: center; gap: var(--s3); min-height: var(--h-md); margin-bottom: 0; } .cobro-linea > label { flex: 0 0 148px; font-size: 13.5px; font-weight: 400; color: var(--pos-ink-4); white-space: nowrap; } .cobro-linea input, .cobro-linea select { flex: 1 1 0; min-width: 0; text-align: right; } .cobro-dual { display: flex; align-items: center; gap: var(--s2); flex: 1 1 0; min-width: 0; } .cobro-dual input.cobro-pct { flex: 0 0 52px; width: 52px; text-align: center; padding: 0 var(--s1); color: var(--pos-ink-4); } .cobro-dual input:not(.cobro-pct) { flex: 1 1 0; width: auto; min-width: 0; text-align: right; } /* Medio de pago: mismo tratamiento que Vendedor y Nota (label a la izquierda, misma altura de fila) para que las tres filas queden simétricas entre sí — gana el renglón que antes ocupaba el label apilado arriba del