/* ===== Base ===== */ * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } /* gana sobre display:flex/grid de abajo */ :root{ --bg:#0f172a; --bg2:#1e293b; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --primary:#2563eb; --primary-d:#1d4ed8; --good:#16a34a; --bad:#dc2626; --warn:#d97706; --radius:14px; } html,body{ background:#f1f5f9; color:var(--ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-text-size-adjust:100%; } body{ padding-bottom:env(safe-area-inset-bottom); } /* Barra de scroll grande en la Caja (POS): para computadoras de caja sin mouse con rueda y para pantallas táctiles, donde una barra angosta es casi imposible de agarrar. OJO: a propósito NO se usan las propiedades estándar scrollbar-width/scrollbar-color aquí — Chrome/Edge modernos, cuando las ven declaradas, ignoran por completo el ancho personalizado de ::-webkit-scrollbar (solo dejan pasar el color). Como esas propiedades estándar no permiten un ancho grande en píxeles de todos modos (solo auto/thin/none), se usa únicamente ::-webkit-scrollbar para lograr el tamaño real en Chrome/Edge/Safari; Firefox no tiene forma de dar un ancho grande a su barra, así que ahí queda con su tamaño normal (limitación del navegador, no del CSS). */ html.scroll-xl::-webkit-scrollbar{ width:28px; } html.scroll-xl::-webkit-scrollbar-track{ background:#dbe3ee; } html.scroll-xl::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:14px; border:5px solid #dbe3ee; } html.scroll-xl::-webkit-scrollbar-thumb:hover{ background:var(--primary-d); } html.scroll-xl .modal-body::-webkit-scrollbar{ width:24px; } html.scroll-xl .modal-body::-webkit-scrollbar-track{ background:#dbe3ee; } html.scroll-xl .modal-body::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:12px; border:4px solid #dbe3ee; } /* Modo oscuro de la Caja (botón 🌙 junto al turno, arriba): solo mientras se está vendiendo (y en los modales que se abren desde ahí — cobro, opciones, etc.); el resto de la app (Config, Nómina, Cuadre…) se queda con su tema normal. Se activa con html.caja-dark, guardado en localStorage para recordarlo en esa computadora. */ html.caja-dark{ --card:#1e293b; --ink:#e5e7eb; --muted:#94a3b8; --line:#334155; --primary:#3b82f6; --primary-d:#60a5fa; } html.caja-dark, html.caja-dark body, html.caja-dark #view{ background:#0b1220; } html.caja-dark .btn{ background:#243044; color:var(--ink); } html.caja-dark .btn-danger{ background:#2a1416; border-color:#5c2426; color:#fca5a5; } html.caja-dark .caja-turnobar{ background:#0f2a20; border-color:#14532d; } html.caja-dark .caja-card, html.caja-dark .opc-card, html.caja-dark .conteo-card, html.caja-dark .caja-carrito, html.caja-dark .opc-check, html.caja-dark .opc-stepper button, html.caja-dark .cobro-met, html.caja-dark .cobro-x, html.caja-dark .pos-chip, html.caja-dark .modal-head, html.caja-dark input, html.caja-dark select, html.caja-dark textarea{ background:#1e293b; border-color:#334155; color:#e5e7eb; } html.caja-dark .modal-box{ background:#0b1220; } html.caja-dark .opc-footer-fijo{ background:#0b1220; border-top-color:#334155; } html.caja-dark .caja-card-ph, html.caja-dark .opc-card-ph, html.caja-dark .conteo-card-ph, html.caja-dark .pos-foto-lg{ background:#111827; } html.caja-dark .pos-chip.is-active, html.caja-dark .opc-card.is-sel, html.caja-dark .caja-line.is-sel, html.caja-dark .cobro-met.is-active, html.caja-dark .pos-finalbox, html.caja-dark .caja-ncf-chip, html.caja-dark .cobro-total{ background:#152238; } html.caja-dark .pill.mut{ background:#334155; color:#cbd5e1; } html.caja-dark .pill.warn{ background:#4a3208; color:#fcd34d; } html.caja-dark .caja-fideliza{ background:#4a3208; color:#fcd34d; border-color:#92400e; } html.caja-dark .pill.ok{ background:#0f3d24; color:#86efac; } html.caja-dark .pill.bad{ background:#4a1414; color:#fca5a5; } h1,h2,h3{ line-height:1.25; } a{ color:var(--primary); } .muted{ color:var(--muted); font-weight:400; font-size:.9em; } .error{ color:var(--bad); background:#fef2f2; border:1px solid #fecaca; padding:9px 12px; border-radius:10px; font-size:.9em; margin-top:10px; } hr{ border:0; border-top:1px solid var(--line); margin:6px 0; } /* ===== Buttons / forms ===== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--ink); padding:10px 14px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff; width:100%; } .btn-primary:active{ background:var(--primary-d); } .btn-danger{ background:#fff; border-color:#fecaca; color:var(--bad); } .btn-sm{ padding:6px 10px; font-size:13px; border-radius:8px; } .btn-ghost,.btn-link{ background:none; border:0; color:#93c5fd; font-weight:600; cursor:pointer; } .btn-link{ color:var(--primary); padding:0; } .btn-plain{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; } .icon-btn{ background:none; border:0; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; } .form{ display:flex; flex-direction:column; gap:12px; } label{ display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:14px; } input,select,textarea{ font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%; } /* ===== Interruptor (título + descripción + switch) ===== */ label.toggle-field{ flex-direction:row; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:10px; padding:11px 14px; cursor:pointer; } label.toggle-field:hover{ border-color:var(--muted); } .toggle-field-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; } .toggle-field-txt strong{ font-size:14px; font-weight:600; } .toggle-field-txt .muted{ font-size:12px; font-weight:400; line-height:1.35; } input.toggle-sw{ appearance:none; -webkit-appearance:none; width:46px; min-width:46px; height:26px; padding:0; border:0; border-radius:999px; background:#cbd5e1; position:relative; cursor:pointer; flex:none; transition:background .15s; } input.toggle-sw::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .15s; } input.toggle-sw:checked{ background:var(--primary); } input.toggle-sw:checked::after{ transform:translateX(20px); } input.toggle-sw:focus{ outline:2px solid #bfdbfe; outline-offset:1px; } input:focus,select:focus,textarea:focus{ outline:2px solid #bfdbfe; border-color:var(--primary); } textarea{ min-height:64px; resize:vertical; } /* ===== Auth ===== */ .auth{ min-height:100dvh; display:grid; place-items:center; padding:20px; background:radial-gradient(1200px 500px at 50% -10%, #1e3a8a, var(--bg)); } .auth-card{ background:#fff; border-radius:18px; padding:26px 22px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(2,6,23,.45); } .brand{ font-size:28px; letter-spacing:-.5px; } .tabs{ display:flex; gap:6px; background:#f1f5f9; padding:4px; border-radius:12px; margin:16px 0; } .tab{ flex:1; border:0; background:none; padding:9px; border-radius:9px; font-weight:600; color:var(--muted); cursor:pointer; } .tab.is-active{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); } /* ===== App shell ===== */ .topbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px; padding:12px 16px; position:relative; background:var(--bg); color:#fff; padding-top:calc(12px + env(safe-area-inset-top)); } .topbar .muted{ color:#94a3b8; display:block; } .topbar-txt{ flex:1; min-width:0; } .topbar-txt strong{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Logo del negocio: centrado en la barra */ .topbar-logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:36px; width:auto; max-width:34%; object-fit:contain; border-radius:6px; background:#fff; padding:3px 6px; pointer-events:none; } @media (max-width:600px){ .topbar-logo{ display:none; } } .avatar-btn{ width:36px; height:36px; border-radius:999px; border:2px solid rgba(255,255,255,.35); background:#334155; color:#fff; padding:0; overflow:hidden; flex:none; cursor:pointer; display:grid; place-items:center; font-weight:700; font-size:14px; } .avatar-btn img{ width:100%; height:100%; object-fit:cover; display:block; } .avatar-ph{ text-transform:uppercase; } /* ===== Bloqueo por inactividad ===== */ .lock{ position:fixed; inset:0; z-index:80; background:rgba(15,23,42,.97); display:flex; align-items:center; justify-content:center; padding:24px; } .lock-box{ background:#fff; border-radius:18px; padding:26px 22px; width:100%; max-width:360px; text-align:center; } .lock-box h2{ margin:12px 0 4px; } .lock-box .form{ margin-top:16px; } .avatar-lg{ width:84px; height:84px; border-radius:999px; margin:0 auto; background:#e2e8f0; display:grid; place-items:center; font-size:30px; font-weight:800; color:#64748b; overflow:hidden; text-transform:uppercase; } .avatar-lg img{ width:100%; height:100%; object-fit:cover; } #view{ padding:14px 14px 90px; max-width:720px; margin:0 auto; } #view.view-wide{ max-width:1120px; } /* ===== Nómina ===== */ .nomina-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:14px; align-items:start; } .nomina-card-head{ display:flex; align-items:center; gap:12px; } .nomina-av{ width:52px; height:52px; border-radius:50%; flex:none; overflow:hidden; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:var(--muted); position:relative; transform-origin:top left; transition:transform .18s ease, box-shadow .18s ease; } .nomina-av img{ width:100%; height:100%; object-fit:cover; } .nomina-av:hover{ transform:scale(2.8); z-index:5; cursor:zoom-in; box-shadow:0 10px 26px rgba(0,0,0,.35); } .nomina-ficha-line{ font-size:12px; color:var(--muted); margin-top:2px; } .archivo-card{ opacity:.75; } .archivo-card .nomina-av{ filter:grayscale(1); } .ficha-hist-row{ display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-top:1px solid var(--line); font-size:13px; } .ficha-hist-row span:last-child{ text-align:right; } @media (max-width:720px){ .nomina-grid{ grid-template-columns:1fr; } } .bottomnav{ position:fixed; bottom:0; left:0; right:0; display:flex; z-index:10; background:#fff; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); } .bottomnav button{ flex:1; border:0; background:none; padding:9px 4px 8px; font-size:11px; font-weight:600; color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; } .bottomnav button .ico{ font-size:19px; position:relative; display:inline-block; } .bottomnav button.is-active{ color:var(--primary); } .nav-badge{ position:absolute; top:-4px; right:-9px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--bad); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px #fff; } html.caja-dark .nav-badge{ box-shadow:0 0 0 2px #0b1220; } .fab{ position:fixed; right:16px; bottom:70px; z-index:11; bottom:calc(70px + env(safe-area-inset-bottom)); background:var(--primary); color:#fff; border:0; border-radius:999px; padding:14px 20px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 10px 25px rgba(37,99,235,.45); } /* ===== Cards ===== */ .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:12px; } .card h3{ font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); } .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px; } .stat .label{ font-size:12px; color:var(--muted); font-weight:600; } .stat .value{ font-size:20px; font-weight:800; letter-spacing:-.5px; margin-top:2px; } .stat.tap{ cursor:pointer; } .value.good{ color:var(--good); } .value.bad{ color:var(--bad); } .pill{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; } .pill.warn{ background:#fef3c7; color:#92400e; } .pill.ok{ background:#dcfce7; color:#166534; } .pill.bad{ background:#fee2e2; color:#991b1b; } .pill.mut{ background:#e2e8f0; color:#475569; } .banner{ background:#fffbeb; border:1px solid #fde68a; border-radius:var(--radius); padding:12px; margin-bottom:12px; } .banner ul{ margin:6px 0 0 18px; } .banner li{ font-size:13px; margin:3px 0; } /* ===== Timeline ===== */ .tl-item{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:9px; } .tl-item.anulado{ opacity:.55; } .tl-top{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; } .tl-monto{ font-weight:800; white-space:nowrap; } .tl-meta{ font-size:12px; color:var(--muted); margin-top:3px; } .tl-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; } .tl-foto{ margin-top:8px; max-height:120px; border-radius:8px; border:1px solid var(--line); } /* ===== Varias fotos de evidencia ===== */ .foto-multi{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .foto-multi .tl-foto{ margin-top:0; } .foto-multi-edit{ gap:10px; } .foto-multi-edit:empty{ display:none; } .foto-multi-item{ position:relative; width:84px; height:84px; } .foto-multi-item img{ width:100%; height:100%; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:zoom-in; } .foto-multi-x{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; padding:0; border:none; border-radius:50%; background:var(--bad); color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.35); } /* ===== Calculadora de billetes ===== */ .bill-row{ display:grid; grid-template-columns:60px 1fr 84px; gap:7px; align-items:center; margin-bottom:6px; } .bill-row .den{ font-weight:700; text-align:right; } .bill-row .tot{ text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; font-size:12px; } /* sin flechitas de spinner: roban ancho y no hacen falta */ .bill-row input[type=number]{ -moz-appearance:textfield; } .bill-row input::-webkit-outer-spin-button, .bill-row input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* Nº1 y Nº2 uno al lado del otro */ .dos-contadores{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; } .dos-contadores .card{ margin-bottom:12px; padding:12px 10px; } .dos-contadores .bill-row{ grid-template-columns:40px 1fr 62px; gap:4px; } .dos-contadores .bill-row .den{ font-size:13px; } .dos-contadores .bill-row input{ padding:8px 6px; } .dos-contadores .bill-row .roq{ padding:7px 4px; } .dos-contadores .bill-total{ font-size:14px; } .dos-contadores h3{ font-size:11px; } @media (max-width:620px){ .dos-contadores{ grid-template-columns:1fr; } } .bill-total{ display:flex; justify-content:space-between; font-weight:800; font-size:18px; border-top:2px solid var(--line); padding-top:8px; margin-top:4px; } .bill-ro .roq{ font-weight:700; font-variant-numeric:tabular-nums; background:#f1f5f9; border:1px solid var(--line); border-radius:8px; padding:8px 10px; text-align:center; } .bill-row input.has-val{ background:#fef9c3; border-color:#eab308; font-weight:700; } .bill-row .roq.has-val{ background:#fef9c3; border-color:#eab308; } .cuadre-resumen{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; } .cuadre-resumen hr{ margin:8px 0; } /* ===== Felicitación de bono a la cajera ===== */ .bono-fest{ margin-top:14px; padding:14px; border-radius:12px; text-align:left; background:linear-gradient(135deg,#fef9c3,#fde68a); border:1px solid #f59e0b; color:#713f12; } .bono-fest-top{ font-weight:800; font-size:16px; } .bono-fest-total{ font-weight:800; font-size:28px; color:#b45309; margin-top:2px; } .bono-fest .muted{ color:#92660f; } .bono-fest strong{ color:#713f12; } .falta-fest{ margin-top:14px; padding:14px; border-radius:12px; text-align:left; background:linear-gradient(135deg,#fef2f2,#fecaca); border:1px solid #ef4444; color:#7f1d1d; } .falta-fest-top{ font-weight:800; font-size:16px; } .falta-fest-total{ font-weight:800; font-size:28px; color:#b91c1c; margin-top:2px; } .falta-fest .muted{ color:#991b1b; } .falta-fest strong{ color:#7f1d1d; } .list-add{ margin-top:8px; } .gasto-row{ display:grid; grid-template-columns:1fr 90px 32px; gap:6px; margin-bottom:6px; } /* ===== Config · Promociones ===== */ .promo-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; flex-wrap:wrap; } .promo-grid{ display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width:600px){ .promo-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); } } .promo-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px; box-shadow:0 1px 2px rgba(15,23,42,.04); } .promo-card.is-off{ opacity:.55; } .promo-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; } .promo-card-head strong{ font-size:15px; } .promo-chip{ font-size:11px; font-weight:700; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:2px 9px; white-space:nowrap; } .promo-meter{ margin-bottom:5px; } .promo-bar{ height:8px; border-radius:999px; background:#eef2f7; overflow:hidden; } .promo-bar-fill{ height:100%; border-radius:999px; transition:width .3s; } .promo-bar-fill.lvl-ok{ background:var(--good); } .promo-bar-fill.lvl-warn{ background:var(--warn); } .promo-bar-fill.lvl-full{ background:var(--bad); } .promo-meter-lbl{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:4px; } .promo-avail{ font-size:13px; font-weight:700; margin-bottom:8px; } .promo-avail.lvl-ok{ color:var(--good); } .promo-avail.lvl-warn{ color:var(--warn); } .promo-avail.lvl-full{ color:var(--bad); } .promo-notope{ font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; } .promo-prods{ font-size:12.5px; color:var(--muted); margin-bottom:12px; } .promo-actions{ display:flex; gap:6px; flex-wrap:wrap; } .promo-actions .btn{ flex:1; min-width:88px; } /* ===== Config · menú de secciones ===== */ .cfg-menu{ display:flex; flex-direction:column; gap:8px; max-width:560px; } .cfg-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; font:inherit; color:inherit; } .cfg-item:hover{ border-color:var(--muted); } .cfg-item-ico{ font-size:20px; flex:none; width:24px; text-align:center; } .cfg-item-txt{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; } .cfg-item-txt strong{ font-size:14px; } .cfg-item-txt .muted{ font-size:12px; } .cfg-item-arw{ color:var(--muted); font-size:20px; flex:none; } /* ===== Config · Punto de Venta (catálogo) ===== */ .pos-guardadas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .pos-guardada-card{ display:block; max-width:170px; padding:8px 14px; border-radius:10px; border:1px solid #f59e0b; background:#fffbeb; color:#92400e; font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; animation:pos-guardada-pulse 2s ease-in-out infinite; } .pos-guardada-card:hover{ animation-play-state:paused; background:#fef3c7; } @keyframes pos-guardada-pulse{ 0%, 100% { box-shadow:0 0 0 0 rgba(245,158,11,.45); } 50% { box-shadow:0 0 0 6px rgba(245,158,11,0); } } /* Mismo cuadro luminoso que las órdenes guardadas, pero en azul -- para que un delivery en ruta se distinga de un cliente en espera de un vistazo. */ .pos-delivery-card{ display:block; max-width:170px; padding:8px 14px; border-radius:10px; border:1px solid #3b82f6; background:#eff6ff; color:#1e40af; font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; animation:pos-delivery-pulse 2s ease-in-out infinite; } .pos-delivery-card:hover{ animation-play-state:paused; background:#dbeafe; } @keyframes pos-delivery-pulse{ 0%, 100% { box-shadow:0 0 0 0 rgba(59,130,246,.45); } 50% { box-shadow:0 0 0 6px rgba(59,130,246,0); } } .pos-catbar{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 8px; margin-top:10px; } .pos-chip{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; flex:none; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:13px; font-weight:600; cursor:pointer; color:inherit; } .pos-chip.is-active{ border-color:var(--primary); background:#eff6ff; color:var(--primary); } .pos-chip-add{ color:var(--primary); border-style:dashed; } .pos-dot{ width:10px; height:10px; border-radius:3px; flex:none; } .pos-count{ color:var(--muted); font-weight:600; font-size:12px; margin-left:auto; padding-left:8px; } .pos-chip.is-active .pos-count{ color:var(--primary); } /* Panel "Todas las opciones de productos" (plantillas): lista a la izquierda, detalle a la derecha */ .plantillas-grid{ display:grid; grid-template-columns:250px 1fr; gap:16px; align-items:start; } @media (max-width:760px){ .plantillas-grid{ grid-template-columns:1fr; } } .plantilla-item{ display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer; font:inherit; color:inherit; } .plantilla-item.is-sel{ border-color:var(--primary); background:#eff6ff; color:var(--primary); } .plantilla-vinculados{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin:8px 0 4px; padding:9px 11px; background:#f8fafc; border-radius:10px; } .plantilla-vinculados .chip-x{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:2px 4px 2px 9px; display:inline-flex; align-items:center; gap:4px; font-size:12px; } .plantilla-vinculados .chip-x button{ background:none; border:0; color:var(--bad); cursor:pointer; font-size:14px; line-height:1; padding:2px 6px; } .plantilla-opcion-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line); } .plantilla-opcion-row.is-off{ opacity:.5; } /* catálogo admin: barra izquierda de categorías + productos */ .pos-admin{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; align-items:start; } @media (min-width:820px){ .pos-admin{ grid-template-columns:220px 1fr; } } .pos-rail{ display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; } @media (min-width:820px){ .pos-rail{ flex-direction:column; overflow:visible; position:sticky; top:10px; padding-bottom:0; } .pos-rail .pos-chip{ width:100%; border-radius:10px; } } .pos-rail .pos-chip{ flex:none; } /* flechas ▲▼ para reordenar categorías/productos a mano */ .pos-chip-row{ display:flex; align-items:stretch; gap:4px; flex:none; } .pos-chip-row .pos-chip{ flex:1; min-width:0; } @media (min-width:820px){ .pos-chip-row{ width:100%; } } .pos-mv{ display:flex; flex-direction:column; gap:2px; flex:none; justify-content:center; } .pos-mv-btn{ width:22px; height:17px; border:1px solid var(--line); background:#fff; border-radius:5px; font-size:9px; line-height:1; cursor:pointer; color:var(--muted); display:grid; place-items:center; padding:0; } .pos-mv-btn:disabled{ opacity:.3; cursor:default; } .pos-mv-btn:hover:not(:disabled){ border-color:var(--primary); color:var(--primary); } .pos-prow-wrap{ display:flex; align-items:stretch; gap:6px; } .pos-prow-wrap .pos-prow{ flex:1; min-width:0; } .pos-buscar{ width:100%; margin:6px 0 10px; } .pos-lista{ display:flex; flex-direction:column; gap:6px; } .pos-prow{ display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px; cursor:pointer; } .pos-prow:hover{ border-color:var(--muted); } .pos-prow-agotado{ opacity:.45; } .pos-prow-sinstock{ background:rgba(234,179,8,.05); } .pos-thumb{ width:48px; height:48px; border-radius:10px; object-fit:cover; flex:none; border:1px solid var(--line); background:#f8fafc; } .pos-thumb-ph{ display:grid; place-items:center; font-size:22px; } .pos-pmid{ min-width:0; } .pos-pnm{ display:block; font-weight:600; font-size:14px; line-height:1.3; overflow-wrap:anywhere; } .pos-tags{ display:flex; gap:5px; margin-top:4px; flex-wrap:wrap; } .pos-pprice{ text-align:right; white-space:nowrap; } .pos-net{ display:block; font-weight:700; font-size:14px; } .pos-gross{ display:block; font-size:11px; color:var(--muted); margin-top:2px; } .pos-foto-lg{ width:76px; height:76px; border-radius:12px; object-fit:cover; flex:none; border:1px solid var(--line); background:#f8fafc; font-size:34px; } .pos-finalbox{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:#eff6ff; border:1px solid var(--primary); border-radius:10px; padding:11px 13px; } .pos-finalbox strong{ font-size:18px; color:var(--primary); } .pos-paleta{ display:flex; gap:8px; flex-wrap:wrap; } .pos-sw{ width:30px; height:30px; border-radius:8px; border:2px solid transparent; cursor:pointer; } .pos-sw.is-active{ border-color:var(--ink); box-shadow:0 0 0 2px #fff inset; } /* ===== Caja (vender) ===== */ .caja-turnobar{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:10px; padding:8px 12px; margin-bottom:12px; font-size:13px; font-weight:600; color:#065f46; } .caja-wrap{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; } @media (min-width:860px){ .caja-wrap{ grid-template-columns:minmax(0,1fr) 340px; } } .caja-productos{ min-width:0; } .caja-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px; margin-top:4px; } .caja-card{ display:flex; flex-direction:column; gap:4px; padding:6px; background:#fff; min-width:0; border:1px solid var(--line); border-radius:12px; cursor:pointer; text-align:center; font:inherit; color:inherit; } .caja-card:active{ transform:scale(.97); } .caja-card-imgwrap{ position:relative; } .caja-stock{ position:absolute; top:3px; right:3px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--good); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.3); } .caja-stock.is-low{ background:var(--warn); } .caja-stock.is-zero{ background:var(--bad); } .caja-card-img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; background:#f8fafc; border:0; } .caja-card-ph{ display:grid; place-items:center; font-size:30px; } .caja-card-nm{ font-size:12px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; } .caja-card-pr{ font-size:12px; font-weight:800; color:var(--primary); } /* "¿Con qué lo quiere?" — tarjetas de opciones (foto/emoji), no radios/checkboxes nativos */ .opc-footer-fijo{ position:sticky; bottom:-16px; background:#fff; margin:14px -16px -16px; padding:12px 16px; border-top:1px solid var(--line); } .opc-group-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-weight:700; margin-top:16px; } .opc-group-count{ font-size:12.5px; font-weight:800; } .opc-aviso-cantidad{ font-size:12.5px; font-weight:600; color:var(--primary-d); background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:6px 9px; margin-top:6px; } .opc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:10px; margin:8px 0 2px; } .opc-card{ position:relative; display:flex; flex-direction:column; gap:6px; padding:8px; background:#fff; min-width:0; border:2px solid var(--line); border-radius:14px; text-align:center; font:inherit; color:inherit; } .opc-card.opc-click{ cursor:pointer; } .opc-card.opc-click:active{ transform:scale(.97); } .opc-card.is-sel{ border-color:var(--primary); background:#eff6ff; } .opc-card-img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; background:#f8fafc; } .opc-card-ph{ width:100%; aspect-ratio:1/1; display:grid; place-items:center; font-size:32px; background:#f8fafc; border-radius:10px; } .opc-card-nm{ font-size:12.5px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; } .opc-card-extra{ font-size:11.5px; font-weight:800; color:var(--primary); } .opc-card-stock{ font-size:10.5px; color:var(--muted); line-height:1.25; } .opc-card-stock.is-bad{ color:var(--bad); font-weight:700; } .opc-check{ position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:999px; background:#fff; border:2px solid var(--line); display:grid; place-items:center; font-size:11px; color:transparent; } .opc-card.is-sel .opc-check{ background:var(--primary); border-color:var(--primary); color:#fff; } .opc-stepper{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:2px; } .opc-stepper button{ width:28px; height:28px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:16px; font-weight:800; line-height:1; cursor:pointer; color:var(--primary); padding:0; } .opc-stepper button:disabled{ opacity:.35; cursor:default; } .opc-stepper strong{ min-width:16px; } .caja-carrito{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; min-width:0; } @media (min-width:860px){ .caja-carrito{ position:sticky; top:10px; } } .caja-line{ display:flex; align-items:center; gap:8px; padding:6px 6px; border-top:1px solid var(--line); border-radius:8px; } .caja-line.is-sel{ background:#eff6ff; box-shadow:inset 0 0 0 2px var(--primary); border-top-color:transparent; } .caja-line-info{ flex:1; display:flex; justify-content:space-between; gap:8px; background:none; border:0; text-align:left; cursor:pointer; font:inherit; color:inherit; padding:0; } .caja-line-nm{ font-size:13px; font-weight:600; } .caja-line-tot{ font-size:13px; font-weight:700; white-space:nowrap; } .caja-qty{ display:flex; align-items:center; gap:6px; } .caja-qty button{ width:27px; height:27px; border-radius:7px; border:1px solid var(--line); background:#f8fafc; font-size:15px; font-weight:700; cursor:pointer; line-height:1; } .caja-qty span{ min-width:18px; text-align:center; font-weight:700; font-size:13px; } .caja-tot{ margin-top:10px; padding-top:8px; border-top:2px solid var(--line); display:flex; flex-direction:column; gap:3px; font-size:13px; } .caja-tot-big{ font-size:17px; font-weight:800; margin-top:4px; } .ncf-list{ padding:4px 14px; } .ncf-row{ display:grid; grid-template-columns:22px 1fr auto; gap:4px 12px; align-items:start; padding:12px 0; border-top:1px solid var(--line); cursor:pointer; } .ncf-list .ncf-row:first-child{ border-top:0; } .ncf-row.is-anulada{ opacity:.5; } .ncf-row input[type=checkbox]{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--primary); flex:none; } .ncf-row-main{ min-width:0; display:flex; flex-direction:column; gap:2px; } .ncf-row-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ncf-row-id{ font-weight:800; font-size:13.5px; } .ncf-row-sub{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ncf-row-amt{ text-align:right; white-space:nowrap; } .ncf-row-amt strong{ display:block; font-size:14px; } .ncf-row-amt span{ display:block; font-size:11px; color:var(--muted); margin-top:1px; } /* Conteo del Exhibidor (al abrir caja) — tarjetas grandes como el catalogo de venta (.caja-grid/.caja-card), pero con un campo de cantidad contada en vez del precio: pensado para que se lea y se toque bien de lejos, sin tener que acercarse a la pantalla. A PROPOSITO usa numero de columnas FIJO por ancho de pantalla (no auto-fill/minmax): con auto-fill, un umbral fijo en px (ej. 148px) hace que telefonos de ancho parecido (360px vs 375px) den un numero de columnas distinto sin avisar -- a uno le caben 2 tarjetas y al otro, al no alcanzarle por unos pixeles, le cae en 1 sola columna GIGANTE. Con columnas fijas en fr, el ancho de cada tarjeta (y su imagen) siempre es identico entre si en la MISMA pantalla, sin importar el ancho exacto del dispositivo. */ .conteo-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:8px; } @media (min-width:480px){ .conteo-grid{ grid-template-columns:repeat(3, 1fr); gap:12px; } } @media (min-width:720px){ .conteo-grid{ grid-template-columns:repeat(4, 1fr); } } .conteo-card{ display:flex; flex-direction:column; gap:6px; padding:10px; background:#fff; min-width:0; border:1px solid var(--line); border-radius:14px; text-align:center; } .conteo-card-img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; background:#f8fafc; border:0; } .conteo-card-ph{ display:grid; place-items:center; font-size:46px; } .conteo-card-nm{ font-size:15px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; } .conteo-card-esp{ font-size:13px; color:var(--muted); } .conteo-card-inp{ width:100%; padding:10px 6px; text-align:center; font-size:19px; font-weight:800; border:2px solid var(--line); border-radius:9px; } .conteo-card-inp:focus{ border-color:var(--primary); outline:none; } .conteo-card-dif{ font-size:13px; font-weight:700; min-height:16px; } .conteo-card-dif.is-fal{ color:var(--bad); } .conteo-card-dif.is-sob{ color:var(--warn); } /* Fila de "Productos con inventario" (Config -> Inventario): la imagen del producto (la misma que en Punto de Venta) a la izquierda, del mismo alto que las 3 filas de texto/chips/botones a su lado -- align-items:stretch reparte ese alto sin JS, y la imagen (o el emoji de respaldo) lo llena con object-fit:cover, recortando sin deformar. */ .inv-prow{ display:flex; gap:10px; align-items:stretch; padding:9px 0; border-top:1px solid var(--line); } .inv-prow-imgwrap{ width:58px; flex:none; } .inv-prow-imgwrap img, .inv-prow-ph{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; } .inv-prow-ph{ background:#f8fafc; display:flex; align-items:center; justify-content:center; font-size:24px; } .inv-prow-info{ flex:1; min-width:0; } .caja-ncf-chip{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; padding:8px 10px; font-size:12.5px; font-weight:600; background:#eff6ff; border:1px solid var(--primary); border-radius:10px; } .caja-ncf-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .caja-fideliza{ margin-top:8px; padding:12px 14px; border-radius:10px; text-align:center; background:#fffbeb; border:1px solid #f59e0b; color:#92400e; font-weight:800; font-size:14.5px; } .cobro-total{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; background:#eff6ff; border:1px solid var(--primary); border-radius:12px; padding:12px 14px; } .cobro-total span{ font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; } .cobro-total strong{ font-size:34px; line-height:1.15; color:var(--primary); } .cobro-mets{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; } .cobro-met{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 13px; font-size:13px; font-weight:600; cursor:pointer; } .cobro-met.is-active{ border-color:var(--primary); background:#eff6ff; color:var(--primary); } .cobro-met.is-dis{ opacity:.45; cursor:not-allowed; } .cobro-met.is-active{ border-color:var(--primary); background:#eff6ff; color:var(--primary); } .cobro-lineas{ display:flex; flex-direction:column; gap:8px; margin:4px 0 10px; } .cobro-linea{ display:flex; align-items:center; gap:8px; } .cobro-linea-nm{ flex:1; font-size:14px; font-weight:600; } .cobro-linea input{ width:120px; text-align:right; font-size:15px; font-weight:700; padding:8px 10px; border:1px solid var(--line); border-radius:8px; } .cobro-x{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--bad); font-size:17px; font-weight:700; cursor:pointer; line-height:1; } .cobro-quick{ display:flex; gap:6px; flex-wrap:wrap; padding-left:2px; } .cobro-quick button{ border:1px solid var(--line); background:#f8fafc; border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; cursor:pointer; } .cobro-estado{ display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:2px solid var(--line); padding-top:10px; margin-top:2px; font-size:15px; font-weight:700; } .cobro-estado strong{ font-size:20px; } /* ===== Modal ===== */ .modal{ position:fixed; inset:0; z-index:50; background:rgba(2,6,23,.5); display:flex; align-items:flex-end; justify-content:center; } .modal-box{ background:#f1f5f9; width:100%; max-width:560px; max-height:92dvh; border-radius:18px 18px 0 0; display:flex; flex-direction:column; overflow:hidden; } .modal-head{ display:flex; align-items:center; gap:6px; padding:12px 12px; background:#fff; border-bottom:1px solid var(--line); } .modal-head h2{ flex:1; font-size:17px; } .modal-body{ padding:16px; overflow:auto; } @media (min-width:560px){ .modal{ align-items:center; } .modal-box{ border-radius:18px; } } /* ===== Lightbox (foto ampliada) ===== */ .lightbox{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:14px; cursor:zoom-out; } .lightbox img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; } .lightbox .lb-close{ position:absolute; top:10px; right:14px; color:#fff; font-size:34px; background:none; border:0; cursor:pointer; line-height:1; } /* ===== Toast ===== */ .toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%); z-index:100; background:#0f172a; color:#fff; padding:11px 18px; border-radius:999px; font-size:14px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.35); max-width:90vw; text-align:center; } .toast.bad{ background:var(--bad); } /* ===== Kiosco de caja ===== */ .auth-card .stack .btn{ width:100%; padding:13px; font-size:16px; } /* ===== Combo (buscar entidad / crear al vuelo) ===== */ .combo{ position:relative; } .combo-drop{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; max-height:240px; overflow-y:auto; box-shadow:0 12px 30px rgba(2,6,23,.18); } .combo-opt{ padding:10px 12px; cursor:pointer; font-size:14px; border-top:1px solid var(--line); } .combo-opt:first-child{ border-top:0; } .combo-opt:hover{ background:#f1f5f9; } .combo-crear{ color:var(--primary); font-weight:700; } .row-between{ display:flex; justify-content:space-between; align-items:center; gap:10px; } .linea-clic{ cursor:pointer; padding:4px 6px; margin:0 -6px; border-radius:8px; transition:background .1s; } .linea-clic:hover{ background:#f1f5f9; } html.caja-dark .linea-clic:hover{ background:#1e293b; } .stack{ display:flex; flex-direction:column; gap:10px; } .checks{ display:flex; flex-direction:column; gap:7px; } .checks label{ flex-direction:row; align-items:flex-start; gap:8px; font-weight:500; font-size:14px; } .checks input{ width:auto; margin-top:3px; } .empty{ text-align:center; color:var(--muted); padding:30px 10px; font-size:14px; } /* ===== Campana de notificaciones (migracion 55) ===== */ .campana-btn{ position:relative; background:none; border:0; cursor:pointer; padding:4px 6px; font-size:20px; line-height:1; flex:none; border-radius:10px; } .campana-btn:hover{ background:rgba(148,163,184,.18); } .campana-badge{ position:absolute; top:0; right:0; min-width:17px; height:17px; padding:0 4px; background:var(--bad); color:#fff; border-radius:999px; font-size:10.5px; font-weight:800; line-height:17px; text-align:center; } /* La no leída se distingue por la barra de color, no solo por el fondo: en la caja en modo oscuro un fondo apenas más claro no se ve. */ /* `border:0` va PRIMERO: es un