:root{ --bg:#f6f7f9; --panel:#ffffff; --border:#e4e7ec; --text:#101828; --muted:#667085; --primary:#c1440e; --primary-dark:#9a3608; --primary-soft:#fbe9e0; --accent:#1d4f3f; --accent-soft:#e3f0ec; --warn:#b54708; --danger:#b42318; --ok:#067647; --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.06); } *{box-sizing:border-box} /* v96 — Sin doble-tap zoom en TODA la app (refuerzo del viewport user-scalable=no). Las vistas operativas tienen comportamientos táctiles intensos y el zoom accidental molestaba. */ html,body,button,input,select,textarea,a,label{ touch-action:manipulation; } /* v95 — Reset anti-overflow ABSOLUTO. iPhone reportaba scroll horizontal fantasma en TODAS las pantallas. Forzamos límites duros: nada puede desbordar el viewport horizontalmente. */ html,body{ margin:0;padding:0;background:var(--bg);color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:14px;line-height:1.45; overflow-x:hidden; max-width:100vw; width:100%; } /* Cualquier contenedor o card respeta el ancho del padre */ .content,.card,.modal,.osheet-body,.cdialog,.toast-host{ max-width:100%; } /* Inputs y forms nunca asoman por la derecha */ input,select,textarea,button{ max-width:100%; } /* Tablas con scroll interno si el contenido es muy ancho */ table{ max-width:100%; } img,video,canvas,iframe{ max-width:100%; height:auto; } /* Code y pre nunca rompen layout */ pre,code{ max-width:100%; overflow-x:auto; word-wrap:break-word; } button{font-family:inherit;cursor:pointer} input,select,textarea{font-family:inherit;font-size:14px} a{color:var(--primary)} /* Login */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fbe9e0 0%,#f6f7f9 60%)} .login-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:32px;width:380px;box-shadow:var(--shadow)} .login-card h1{margin:0 0 4px;font-size:22px} .login-card p.sub{margin:0 0 24px;color:var(--muted)} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .field label{font-weight:600;font-size:13px} .field input,.field select,.field textarea{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:14px;text-decoration:none;transition:transform .05s, background .15s, border-color .15s} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-dark)} .btn-secondary{background:#fff;color:var(--text);border-color:var(--border)} .btn-secondary:hover{background:#f3f4f6} .btn-ghost{background:transparent;color:var(--text);border-color:transparent} .btn-ghost:hover{background:#f3f4f6} .btn-danger{background:#fff;color:var(--danger);border-color:#fda29b} .btn-danger:hover{background:#fee4e2} .btn-block{width:100%} .hint{font-size:12px;color:var(--muted);margin-top:8px} .users-hint{margin-top:18px;background:#f9fafb;border:1px dashed var(--border);border-radius:8px;padding:10px;font-size:12px;color:var(--muted)} .users-hint code{background:#fff;padding:1px 6px;border-radius:4px;border:1px solid var(--border);font-size:12px} /* App layout */ .app{display:none;min-height:100vh;position:relative} .app.active{display:flex} .sidebar{ width:240px;background:#1c1f24;color:#e5e7eb; display:flex;flex-direction:column;flex-shrink:0; transition:transform .25s ease; position:sticky;top:0; /* dvh = altura real del viewport (excluye barra navegador móvil). Fallback a 100vh para navegadores viejos. */ height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; overflow:hidden; } .brand{padding:18px 18px;border-bottom:1px solid #2c313a} .brand .logo{font-size:18px;font-weight:700;color:#fff} .brand .who{font-size:12px;color:#98a2b3;margin-top:2px} .nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0} .nav::-webkit-scrollbar{width:6px} .nav::-webkit-scrollbar-thumb{background:#3b4150;border-radius:3px} .nav button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:transparent;color:#d0d5dd;border-radius:8px;text-align:left;font-size:14px} .nav button:hover{background:#2c313a;color:#fff} .nav button.active{background:var(--primary);color:#fff} .nav .sep{font-size:11px;text-transform:uppercase;color:#667085;letter-spacing:.05em;padding:14px 12px 6px} /* footer del sidebar: nunca debe quedar fuera de pantalla. flex-shrink:0 evita que se encoja cuando hay mucho contenido. env(safe-area-inset-bottom) deja espacio bajo la barra de gestos en iPhone. */ .sidebar .footer{ padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid #2c313a; flex-shrink:0; background:#1c1f24; } .restaurant-pick{padding:10px 12px;background:#2c313a;border-radius:8px;color:#fff;font-size:13px;display:flex;align-items:center;gap:8px} .restaurant-pick select{flex:1;background:#1c1f24;color:#fff;border:1px solid #3b4150;border-radius:6px;padding:6px 8px} .main{flex:1;display:flex;flex-direction:column;min-width:0} .topbar{height:60px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:12px;position:sticky;top:0;z-index:20} .topbar h2{margin:0;font-size:18px} .topbar .top-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1} .topbar .top-actions{display:flex;gap:8px;align-items:center} .hamburger{display:none;width:40px;height:40px;border-radius:8px;border:1px solid var(--border);background:#fff;align-items:center;justify-content:center;font-size:20px;cursor:pointer;flex-shrink:0} .hamburger:hover{background:#f3f4f6} /* z-index alto: el sidebar (drawer móvil) debe quedar POR ENCIMA de la barra inferior fija de mesa (z-index 600), header de mesa, y cualquier elemento sticky/fixed dentro de la vista. */ .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1500} .sidebar-backdrop.active{display:block} .content{padding:24px;overflow-y:auto;flex:1} /* Cards & panels */ .card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px} .card h3{margin:0 0 12px;font-size:15px} .grid{display:grid;gap:14px} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)} @media (max-width:1100px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:700px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}} .stat .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em} .stat .value{font-size:24px;font-weight:700;margin-top:6px} .stat .delta{font-size:12px;color:var(--muted);margin-top:2px} /* Catalog */ .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap} .toolbar input[type="search"]{flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--border);border-radius:8px} .toolbar select{padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:#fff} .provider-tag{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);font-size:12px;padding:2px 8px;border-radius:999px;font-weight:600} .product-row{display:grid;grid-template-columns:1fr 110px 110px 130px;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:8px} .product-row .pname{font-weight:600} .product-row .pmeta{color:var(--muted);font-size:12px;margin-top:2px} .product-row .pprice{text-align:right;font-weight:600} .product-row .punit{color:var(--muted);font-size:12px;text-align:right} .qty{display:flex;align-items:center;gap:6px;justify-content:flex-end} .qty button{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:#fff;font-size:16px;line-height:1} .qty input{width:54px;padding:6px;text-align:center;border:1px solid var(--border);border-radius:6px} @media (max-width:700px){.product-row{grid-template-columns:1fr;gap:6px}.product-row .pprice,.product-row .punit{text-align:left}.qty{justify-content:flex-start}} /* Cart sidebar */ .layout-cart{display:grid;grid-template-columns:1fr 340px;gap:16px} @media (max-width:1100px){.layout-cart{grid-template-columns:1fr}} .cart-card{position:sticky;top:16px} .cart-list{max-height:340px;overflow-y:auto;margin-bottom:12px} .cart-item{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} .cart-item:last-child{border-bottom:none} .cart-item .ci-name{font-weight:600;font-size:13px} .cart-item .ci-meta{color:var(--muted);font-size:12px} .cart-item .ci-right{text-align:right;font-size:13px;white-space:nowrap} .cart-item .remove{background:none;border:none;color:var(--danger);font-size:11px;cursor:pointer;padding:0;margin-top:4px} .cart-totals{display:flex;justify-content:space-between;padding:8px 0;font-weight:700;font-size:15px;border-top:1px solid var(--border)} .empty{text-align:center;color:var(--muted);font-size:13px;padding:24px 8px} /* Tables */ table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px} th{background:#f9fafb;font-weight:600;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.04em} tr:hover td{background:#fafafa} .table-card{padding:0;overflow:hidden} .table-card .table-head{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)} .table-card .table-head h3{margin:0} .badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600} .badge-ok{background:#dcfae6;color:var(--ok)} .badge-pending{background:#fef0c7;color:var(--warn)} .badge-sent{background:#e0eaff;color:#175cd3} .badge-cancelled{background:#fee4e2;color:var(--danger)} /* Modal z-index 9989: por encima de la mesa-bottombar (600) — sin esto, la barra inferior fija (Comandar / Cobrar) tapaba el modal cuando se abre desde la vista mesa (ej: añadir nota a una línea). Se queda justo por debajo del cdialog-bg (9990) para que confirmDialog y promptDialog se rendericen encima del modal padre cuando se anidan. */ .modal-bg{position:fixed;inset:0;background:rgba(16,24,40,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:9989} .modal-bg.active{display:flex} /* Modal en general: header y footer fijos, solo el body scrollea. Esto evita que cuando hay mucho contenido (ticket largo en cobro), el botón "Confirmar cobro" quede fuera de pantalla. */ .modal{ background:var(--panel);border-radius:12px;width:100%;max-width:560px; max-height:90vh;max-height:90dvh; box-shadow:0 20px 40px rgba(0,0,0,.2); display:flex;flex-direction:column;overflow:hidden; box-sizing:border-box; } .modal.wide{max-width:920px} .modal.wide .modal-b{padding-top:14px} /* v95 — En móvil: modal full-screen sin márgenes raros + body con scroll interno. Asegura que TODO contenido (incluido el cobro con muchos campos) se vea bien sin overflow horizontal. */ @media (max-width: 760px) { .modal-bg { padding: 0; align-items: stretch; } .modal { max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: 100vw; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .modal .modal-h, .modal .modal-b, .modal .modal-f { max-width: 100%; box-sizing: border-box; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .modal .modal-b { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .modal .modal-f { flex-shrink: 0; padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); } /* Inputs en modal: full-width con padding interno */ .modal input, .modal select, .modal textarea { max-width: 100%; box-sizing: border-box; } /* Grids del modal de cobro: 1 columna en móvil */ .modal .row-flex { flex-wrap: wrap; } } /* Bloquear scroll del body mientras hay modal activo. Sin esto, el usuario puede scrollear la página de detrás (especialmente molesto en móvil donde el modal cubre casi todo). */ body:has(#modalBg.active), body:has(#cdialogBg.active){ overflow:hidden; /* Compensar el scrollbar del body para evitar saltos visuales */ overscroll-behavior:contain; } /* Recipe editor 2-col */ .rec-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:380px} @media (max-width:760px){.rec-layout{grid-template-columns:1fr}} .rec-col{background:#fafbfc;border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;min-height:0} .rec-col h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .rec-search{padding:9px 12px;border:1px solid var(--border);border-radius:8px;width:100%;margin-bottom:8px;font-size:13px} .rec-product-list{flex:1;overflow-y:auto;max-height:380px;border:1px solid var(--border);border-radius:8px;background:#fff} .rec-product-item{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid #f0f1f3;font-size:13px} .rec-product-item:last-child{border-bottom:none} .rec-product-item:hover{background:#fff7f3} .rec-product-item .pname{font-weight:500;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rec-product-item .pmeta{font-size:11px;color:var(--muted)} .rec-product-item .pprice{font-weight:700;font-variant-numeric:tabular-nums;font-size:12px;text-align:right;white-space:nowrap} .rec-product-item button{width:30px;height:30px;border-radius:6px;border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer;font-weight:700;font-size:16px;line-height:1} .rec-product-item button:hover{background:var(--primary-dark)} .rec-product-item.added{background:#e3f0ec} .rec-product-item.added button{background:#aaa;border-color:#aaa} .rec-current-list{flex:1;overflow-y:auto;max-height:380px;border:1px solid var(--border);border-radius:8px;background:#fff} .rec-current-item{display:grid;grid-template-columns:1fr 80px 60px 80px 30px;gap:8px;align-items:center;padding:10px;border-bottom:1px solid #f0f1f3;font-size:13px} .rec-current-item:last-child{border-bottom:none} .rec-current-item .iname{font-weight:600;font-size:13px} .rec-current-item .imeta{font-size:11px;color:var(--muted)} .rec-current-item input[type="number"]{width:100%;padding:6px;border:1px solid var(--border);border-radius:6px;text-align:right;font-size:13px} .rec-current-item .iunit{color:var(--muted);font-size:12px} .rec-current-item .icost{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;font-size:12px} .rec-current-item button{width:26px;height:26px;border-radius:6px;border:1px solid #fda29b;background:#fff;color:var(--danger);cursor:pointer;line-height:1} .rec-current-item button:hover{background:#fee4e2} .rec-suggestion{display:inline-block;background:#fff;border:1px dashed var(--primary);color:var(--primary);padding:4px 10px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;margin:2px} .rec-suggestion:hover{background:var(--primary-soft)} .rec-cat-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px} .rec-cat-tab{padding:4px 10px;border:1px solid var(--border);background:#fff;border-radius:999px;cursor:pointer;font-size:11px} .rec-cat-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)} .modal-h{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;background:#fff} .modal-h h3{margin:0;font-size:16px} /* El body es la única parte scrollable; header y footer quedan fijos */ .modal-b{padding:18px 20px;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch} .modal-f{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;background:#fff} .close-x{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1} /* Misc */ .row-flex{display:flex;gap:10px;align-items:center} .pill{padding:3px 10px;border-radius:999px;font-size:12px;background:var(--primary-soft);color:var(--primary);font-weight:600} .nowrap{white-space:nowrap} .text-muted{color:var(--muted)} .right{text-align:right} .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mb-8{margin-bottom:8px} .hidden{display:none !important} details>summary{cursor:pointer;padding:10px 12px;background:#f9fafb;border-radius:8px;font-weight:600;list-style:none} details>summary::-webkit-details-marker{display:none} details[open]>summary{margin-bottom:8px} /* Print / receipt preview */ .receipt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f9fafb;border:1px dashed var(--border);border-radius:8px;padding:14px;font-size:12px;white-space:pre-wrap} /* Restaurant picker (initial) */ .rest-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 8px} @media (max-width:680px){.rest-picker{grid-template-columns:1fr}} .rest-card{ background:#fff;border:1px solid var(--border);border-radius:12px; padding:28px 18px;cursor:pointer;text-align:center; transition:border-color .15s, transform .15s, box-shadow .15s;font-family:inherit;color:inherit; } .rest-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.08)} .rest-card-emoji{font-size:54px;line-height:1;margin-bottom:14px} .rest-card-monogram{ width:64px;height:64px;border-radius:50%;background:var(--primary);color:#fff; display:flex;align-items:center;justify-content:center; font-size:22px;font-weight:600;letter-spacing:0.02em; margin:0 auto 14px;box-shadow:0 2px 8px rgba(193,68,14,.2); } .rest-card-name{font-size:17px;font-weight:600;color:var(--text);margin-bottom:4px;letter-spacing:-0.01em} .rest-card-loc{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em} /* Mode picker (login) */ .mode-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 8px} @media (max-width:560px){.mode-picker{grid-template-columns:1fr}} .mode-card{background:#fff;border:2px solid var(--border);border-radius:12px;padding:18px 14px;cursor:pointer;text-align:center;transition:all .15s;font-family:inherit;color:inherit} .mode-card:hover{border-color:var(--primary);background:#fffaf7} .mode-card.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 3px rgba(193,68,14,.15)} .mode-icon{font-size:36px;line-height:1;margin-bottom:8px} .mode-title{font-weight:700;font-size:14px} .mode-desc{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.3} @media (max-width:480px){.mode-picker{grid-template-columns:1fr}} /* Plano de sala */ .floor-wrap{background:#1e1b3a;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);position:relative;height:calc(100vh - 200px);min-height:500px} .floor-viewport{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;cursor:grab} .floor-viewport.grabbing{cursor:grabbing} .floor-canvas{position:relative;margin:0 auto;transform-origin:0 0;transition:transform .15s ease} .floor-zoom-controls{position:absolute;bottom:12px;right:12px;background:rgba(255,255,255,.95);border-radius:10px;padding:6px;box-shadow:0 4px 12px rgba(0,0,0,.2);display:flex;gap:4px;align-items:center;z-index:5} .floor-zoom-controls button{width:36px;height:36px;border:none;background:#fff;border-radius:6px;font-size:16px;cursor:pointer;font-weight:700;color:var(--text)} .floor-zoom-controls button:hover{background:#f3f4f6} .floor-zoom-controls .zoom-label{padding:0 8px;font-size:12px;font-weight:600;color:var(--muted);min-width:42px;text-align:center} .floor-canvas .table{ position:absolute;background:#fff;color:var(--text); display:flex;flex-direction:column;align-items:center;justify-content:center; cursor:pointer;transition:transform .15s, box-shadow .15s, background .15s; box-shadow:0 2px 6px rgba(0,0,0,.25);user-select:none;border:3px solid transparent; } .floor-canvas .table:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(255,255,255,.2);z-index:10} .floor-canvas .table .t-id{font-weight:800;line-height:1} .floor-canvas .table .t-status{font-size:10px;color:#6b7280;margin-top:3px;line-height:1} .floor-canvas .table .t-total{font-size:10px;color:var(--primary);font-weight:700;margin-top:1px;line-height:1} .floor-canvas .table.occupied{background:#fee2e2;border-color:#ef4444} .floor-canvas .table.occupied .t-status{color:#dc2626;font-weight:600} .floor-canvas .table.square{border-radius:10px} .floor-canvas .table.square .t-id{font-size:18px} .floor-canvas .table.rect{border-radius:10px;padding:6px} .floor-canvas .table.rect .t-id{font-size:14px;line-height:1.1;word-break:break-word} .floor-canvas .table.round{border-radius:50%} .floor-canvas .table.round .t-id{font-size:22px} .floor-canvas .table.round-xl{border-radius:50%} .floor-canvas .table.round-xl .t-id{font-size:34px} .floor-canvas .table.round-xl .t-status{font-size:13px} .floor-canvas .table.bar-stool{border-radius:50%} .floor-canvas .table.bar-stool .t-id{font-size:13px} .floor-canvas .table.bar-stool .t-status{font-size:8px} .floor-canvas .deco{position:absolute;background:#3a3656;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;font-weight:600;letter-spacing:1px} /* Cocina · comandas */ .btn-success{background:var(--ok);color:#fff;border:1px solid var(--ok)} .btn-success:hover{background:#055e35} .kitchen-section{background:transparent} .kitchen-section > summary{ list-style:none;cursor:pointer; padding:12px 16px;border-radius:10px; background:#fff;border:1px solid var(--border); display:flex;align-items:center;gap:10px; box-shadow:var(--shadow); margin-bottom:10px; } .kitchen-section > summary::-webkit-details-marker{display:none} .kitchen-section > summary::before{content:"▶";font-size:10px;color:var(--muted);transition:transform .2s;display:inline-block;width:14px} .kitchen-section[open] > summary::before{transform:rotate(90deg)} .kitchen-section .ks-icon{font-size:22px;line-height:1} .kitchen-section .ks-title{font-size:16px;color:var(--text)} .kitchen-section .ks-count{font-size:12px;color:var(--muted);margin-left:auto;font-weight:500} .kitchen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px} .kc-sections{padding:6px 0} .kc-sec{border-bottom:1px solid #f0f1f3} .kc-sec:last-child{border-bottom:none} .kc-sec > summary{ list-style:none;cursor:pointer; padding:8px 16px;background:#f9fafb; display:flex;align-items:center;gap:8px;font-size:13px; } .kc-sec > summary::-webkit-details-marker{display:none} .kc-sec > summary::before{content:"▶";font-size:9px;color:var(--muted);transition:transform .2s;display:inline-block;width:12px} .kc-sec[open] > summary::before{transform:rotate(90deg)} .kc-sec-icon{font-size:16px} .kc-sec-count{margin-left:auto;background:var(--primary-soft);color:var(--primary);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700} .kitchen-card{background:#fff;border:2px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column} /* v87 — Bandas laterales gruesas más legibles en móvil + animación pulsante en urgent. La banda izquierda es más visible que un simple border-color al ver muchas cards en una rejilla. */ .kitchen-card{position:relative;border-left:6px solid var(--border)} .kitchen-card.fresh{border-left-color:#12b76a;background:linear-gradient(90deg, rgba(18,183,106,0.05) 0%, transparent 80px)} .kitchen-card.warn{border-left-color:#f79009;background:linear-gradient(90deg, rgba(247,144,9,0.10) 0%, transparent 80px);box-shadow:0 0 0 1px #fef0c7} .kitchen-card.urgent{border-left-color:#f04438;background:linear-gradient(90deg, rgba(240,68,56,0.12) 0%, transparent 80px);animation:pulse-urgent 1.2s ease-in-out infinite;box-shadow:0 0 0 2px #fda29b} @keyframes pulse-urgent{ 0%,100%{box-shadow:0 0 0 2px rgba(240,68,56,0.4)} 50%{box-shadow:0 0 0 6px rgba(240,68,56,0.15)} } /* Tiempo en KDS card más visible en móvil con color según urgencia */ .kitchen-card.warn .kds-time{color:#b54708;font-weight:700} .kitchen-card.urgent .kds-time{color:#b42318;font-weight:800;animation:pulse-text 1s ease-in-out infinite} @keyframes pulse-text{0%,100%{opacity:1}50%{opacity:.6}} .kc-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;background:#f9fafb;border-bottom:1px solid var(--border);gap:10px} .kc-head .kc-table{font-size:20px;font-weight:800;color:var(--text)} .kc-head .kc-meta{font-size:12px;color:var(--muted);margin-top:2px} .kc-head .btn{padding:8px 14px;font-size:13px;flex-shrink:0} .kc-items{padding:6px 0} .kc-item{display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #f0f1f3} .kc-item:last-child{border-bottom:none} .kc-item.done{opacity:.55;text-decoration:line-through} .kc-item .ki-qty{font-size:18px;font-weight:800;color:var(--primary);text-align:center;background:var(--primary-soft);border-radius:8px;padding:4px 0} .kc-item .ki-name{font-size:14px;font-weight:600;line-height:1.3} .kc-item .btn{padding:8px 14px;font-size:12px} @media (max-width:480px){ .kitchen-grid{grid-template-columns:1fr;gap:10px} .kc-item{padding:10px 12px;grid-template-columns:40px 1fr auto;gap:8px} .kc-item .ki-name{font-size:13px} .kc-item .btn{padding:8px 10px;font-size:11px} .kc-head{padding:12px} .kc-head .kc-table{font-size:18px} } /* Mesa: catálogo + cuenta */ .pos-layout{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start} @media (max-width:1100px){.pos-layout{grid-template-columns:1fr}} .pos-cats{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:10px} .pos-cats button{padding:8px 14px;border:1px solid var(--border);background:#fff;border-radius:999px;cursor:pointer;font-size:13px} .pos-cats button:hover{background:#f3f4f6} .pos-cats button.active{background:var(--primary);color:#fff;border-color:var(--primary)} .pos-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .pos-product{position:relative;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 10px;cursor:pointer;transition:transform .1s,border-color .15s} .pos-product:hover{transform:translateY(-1px);border-color:var(--primary)} /* v96 — Badge de cantidad en card del catálogo cuando el producto ya está en el carrito de la mesa. Visible top-right como un "N" violeta. */ .pos-product.in-cart{border-color:var(--accent)} .pos-product-badge{ position:absolute; top:8px; right:8px; background:var(--accent); color:#fff; min-width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; padding:0 7px; box-shadow:0 2px 6px rgba(0,0,0,0.18); z-index:1; } .pos-product.added-pulse{animation: posAdded .45s cubic-bezier(.4,0,.2,1)} @keyframes posAdded{ 0% {transform:scale(1); background:#fff; border-color:var(--border); box-shadow:none} 35% {transform:scale(0.94); background:var(--accent-soft); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)} 100% {transform:scale(1); background:#fff; border-color:var(--border); box-shadow:none} } .pos-product .pname{font-weight:600;font-size:13px;line-height:1.25;min-height:32px} .pos-product .pprice{margin-top:6px;color:var(--primary);font-weight:700;font-size:14px} .pos-cart-card{position:sticky;top:16px} .pos-cart-list{max-height:420px;overflow-y:auto;margin:8px 0} .pos-cart-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)} .pos-cart-item:last-child{border:none} .pos-cart-item .ci-name{font-weight:600;font-size:13px} .pos-cart-item .ci-meta{font-size:11px;color:var(--muted)} .pos-cart-item .qty-ctrl{display:flex;align-items:center;gap:6px} .pos-cart-item .qty-ctrl button{width:26px;height:26px;border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer;font-size:14px} .pos-cart-item .qty-ctrl span{min-width:20px;text-align:center;font-weight:700} .pos-cart-item .it-total{font-weight:700;font-size:13px;text-align:right;min-width:60px} .pos-cart-item.locked{background:#f9fafb;opacity:.85} .pos-cart-item.menu-parent{background:var(--primary-soft);border-radius:8px;padding-left:6px;padding-right:6px;border:1px dashed var(--primary)} .pos-cart-item.menu-child{padding-left:18px;font-size:12px;background:#fafbfc} .pos-cart-item.menu-child .ci-name{color:var(--text);font-weight:500} .pos-cart-item .link-cancel{ display:inline-block;background:none;border:none; color:var(--danger);font-size:11px;cursor:pointer;padding:2px 0; margin-top:4px;text-decoration:underline;font-family:inherit; } .pos-cart-item .link-cancel:hover{color:#7a1411} /* Menú del Día picker */ .md-sec{margin-bottom:8px} .md-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} @media (max-width:560px){.md-opts{grid-template-columns:1fr}} .md-opt{ padding:12px 14px;border:2px solid var(--border);background:#fff;border-radius:10px; cursor:pointer;text-align:left;font-size:13px;font-weight:500;color:var(--text); transition:all .15s;font-family:inherit; } .md-opt:hover{border-color:var(--primary);background:#fffaf7} .md-opt.selected{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 0 0 3px rgba(193,68,14,.15)} /* Sub-grupos de Menú del Día dentro del catálogo POS */ .md-cat-sec{margin-bottom:8px;border-top:1px solid var(--border);padding-top:10px} .md-cat-sec > summary{ list-style:none;cursor:pointer; padding:8px 12px;background:var(--primary-soft);border-radius:8px; display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text); } .md-cat-sec > summary::-webkit-details-marker{display:none} .md-cat-sec > summary::before{content:"▶";font-size:9px;color:var(--primary);transition:transform .2s;display:inline-block;width:12px;font-weight:700} .md-cat-sec[open] > summary::before{transform:rotate(90deg)} /* Versión estática: sin desplegable */ .md-cat-sec-static{margin-bottom:8px;border-top:1px solid var(--border);padding-top:10px} .md-cat-sec-head{padding:8px 12px;background:var(--primary-soft);border-radius:8px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)} .md-cat-count{margin-left:auto;background:var(--primary);color:#fff;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700} .md-chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-soft);color:var(--primary);padding:6px 10px;border-radius:999px;font-size:13px;font-weight:500} .md-chip button{background:transparent;border:none;color:var(--primary);font-weight:700;cursor:pointer;font-size:14px;padding:0;line-height:1} .md-chip button:hover{color:var(--primary-dark)} .pos-totals{padding:10px 0;border-top:2px solid var(--border)} .pos-totals-row{display:flex;justify-content:space-between;padding:3px 0;font-size:13px} .pos-totals-row.total{font-size:16px;font-weight:700;padding-top:6px} /* Reportes · gráficos */ .hbars{display:flex;flex-direction:column;gap:10px;margin-top:6px} .hbar-row{display:grid;grid-template-columns:160px 1fr 110px;gap:12px;align-items:center;font-size:13px} .hbar-label{text-align:right;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hbar-track{background:#f3f4f6;height:22px;border-radius:6px;overflow:hidden;position:relative} .hbar-fill{background:var(--primary);height:100%;border-radius:6px;transition:width .35s ease} .hbar-val{font-weight:600;font-variant-numeric:tabular-nums;text-align:right} @media (max-width:700px){ .hbar-row{grid-template-columns:1fr 90px;gap:4px 10px} .hbar-label{grid-column:1 / -1;text-align:left;font-weight:600} .hbar-val{font-size:13px} } .chip-btn{padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:12px;cursor:pointer;font-weight:500} .chip-btn:hover{background:#f3f4f6} .chip-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)} .delta-up{color:var(--ok);font-weight:600} .delta-down{color:var(--danger);font-weight:600} .delta-flat{color:var(--muted);font-weight:600} .filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end} .filter-bar .field{margin-bottom:0;min-width:140px} .filter-bar .field label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} /* Tabla scroll horizontal */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ============== MÓVIL ============== */ @media (max-width:820px){ html,body{font-size:15px} .hamburger{display:inline-flex} .topbar{height:56px;padding:0 14px} .topbar h2{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar .top-actions .pill{display:none} .content{padding:14px} /* sidebar como drawer deslizable. z-index alto (1600) para superar la barra inferior fija de mesa (600), el banner KDS (100) y demás elementos sticky/fixed. */ .sidebar{ position:fixed;top:0;left:0; height:100vh; /* fallback */ height:100dvh; /* altura real (excluye barra navegador) */ width:84%;max-width:300px; transform:translateX(-100%); z-index:1600; box-shadow:0 0 30px rgba(0,0,0,.3); /* Garantizar que el contenedor sigue siendo flex-column en drawer */ display:flex; flex-direction:column; } .app.menu-open .sidebar{transform:translateX(0)} .card{padding:14px;border-radius:10px} .card h3{font-size:15px} /* botones más grandes */ .btn{padding:11px 16px;font-size:15px} .qty button{width:34px;height:34px;font-size:18px} .qty input{width:60px;height:34px;font-size:15px} /* inputs y campos cómodos al tacto */ .field input,.field select,.field textarea, .toolbar input[type="search"],.toolbar select{padding:11px 12px;font-size:15px} /* product row se reorganiza */ .product-row{ grid-template-columns:1fr auto; grid-template-areas: "name name" "meta price" "qty qty"; gap:6px;padding:12px; } .product-row > div:nth-child(1){grid-area:name} .product-row .punit{grid-area:meta;text-align:left;font-size:13px} .product-row .pprice{grid-area:price;text-align:right;font-size:15px} .product-row .qty{grid-area:qty;justify-content:flex-start;margin-top:4px} /* tablas: scroll horizontal */ .table-card table{min-width:560px} .table-card{overflow-x:auto;-webkit-overflow-scrolling:touch} th,td{padding:10px 10px;font-size:13px} /* topbar acciones */ .top-actions .btn{padding:8px 12px;font-size:13px} /* modal: en móvil ocupa la pantalla casi completa, modo "sheet" pegado al fondo. Altura limitada con dvh para que el footer (botones) quede siempre dentro de la zona visible. */ .modal{ max-width:100%; border-radius:14px 14px 0 0; align-self:flex-end; max-height:92vh; max-height:92dvh; width:100%; } .modal-bg{align-items:flex-end;padding:0} .modal-h h3{font-size:15px} .modal-b,.modal-h{padding:14px} .modal-f{ padding:14px; flex-wrap:wrap; gap:6px; /* Respetar safe-area-inset en iPhone X+ para que los botones no queden tapados por la barra de gestos. */ padding-bottom:max(14px, calc(14px + env(safe-area-inset-bottom))); } .modal-f .btn{flex:1;min-width:120px} /* receipt preview en modal */ .receipt{font-size:11px;padding:10px} /* details summary más legibles */ details>summary{padding:12px} .provider-tag{font-size:13px} } @media (max-width:480px){ .login-card{width:100%;padding:24px;border-radius:0;border:none;min-height:100vh;display:flex;flex-direction:column;justify-content:center} .login-wrap{padding:0;background:#fff} .stat .value{font-size:20px} .grid{gap:10px} } /* Mejoras responsive adicionales */ @media (max-width:820px){ /* Sidebar móvil: ocupa toda la pantalla cuando se abre */ .sidebar{position:fixed;height:100vh;max-height:100vh} /* Plano de mesas: altura adaptada */ .floor-wrap{height:calc(100vh - 220px);min-height:380px} .floor-zoom-controls{bottom:8px;right:8px;padding:4px} .floor-zoom-controls button{width:32px;height:32px;font-size:14px} /* Reportes: filtros se apilan */ .filter-bar{flex-direction:column;align-items:stretch} .filter-bar .field{width:100%} .filter-bar > div[style*="margin-left:auto"]{margin-left:0 !important;justify-content:flex-start !important} /* Tablas con muchas columnas */ .table-card{font-size:12px} .table-card table{min-width:auto} /* Editor de recetas: mejor en móvil */ .modal.wide{max-width:100%} .rec-layout{grid-template-columns:1fr;gap:12px;min-height:auto} .rec-product-list,.rec-current-list{max-height:280px} .rec-current-item{grid-template-columns:1fr 70px 50px 70px 28px;font-size:12px;gap:6px} /* POS / mesa */ .pos-products{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} .pos-product .pname{font-size:12px;min-height:28px} /* Stat cards más compactas */ .stat .value{font-size:18px} .stat .label{font-size:10px} /* Filtros catálogo */ .toolbar{flex-direction:column;align-items:stretch;gap:8px} .toolbar input[type="search"],.toolbar select{width:100%} /* Modal: padding menor */ .modal-h h3{font-size:14px;padding-right:30px} /* Cards más compactas */ .card{padding:12px} /* Topbar más pequeño */ .topbar h2{font-size:15px} /* Receta editor cabecera de KPIs */ .row-flex[style*="primary-soft"]{gap:8px !important} .row-flex[style*="primary-soft"] > div{flex:1;min-width:80px} /* Mode picker cards más pequeñas */ .mode-card{padding:14px 10px} .mode-icon{font-size:28px} .mode-title{font-size:12px} .mode-desc{font-size:10px} } @media (max-width:480px){ /* Acciones en tabla apiladas */ td .btn,td button{padding:7px 10px;font-size:12px;display:block;width:100%;margin-bottom:3px} td:last-child .btn:last-child{margin-bottom:0} th, td { padding:8px 6px; font-size:11px; } /* Resumen (dashboard) */ .grid.cols-4{grid-template-columns:1fr 1fr} .grid.cols-3{grid-template-columns:1fr 1fr} /* Plano: aún más compacto */ .floor-wrap{height:calc(100vh - 250px)} } /* ============== MEJORAS UX 2026 ============== */ /* Tema oscuro (data-theme="dark" en ) */ html[data-theme="dark"]{ --bg:#0f1217; --panel:#181c23; --border:#2a3140; --text:#e6e8ec; --muted:#8a93a3; --primary:#e8623f; --primary-dark:#bd4a2c; --primary-soft:#3a1f17; --accent:#4abfa3; --accent-soft:#1d3530; --warn:#f0a84a; --danger:#f0625a; --ok:#3fb47a; --shadow:0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); } html[data-theme="dark"] body{background:var(--bg);color:var(--text)} html[data-theme="dark"] .login-wrap{background:linear-gradient(135deg,#3a1f17 0%,#0f1217 60%)} html[data-theme="dark"] .login-card, html[data-theme="dark"] .card, html[data-theme="dark"] .product-row, html[data-theme="dark"] .pos-product, html[data-theme="dark"] .kitchen-card, html[data-theme="dark"] .modal, html[data-theme="dark"] .rest-card, html[data-theme="dark"] .mode-card{background:var(--panel);color:var(--text);border-color:var(--border)} html[data-theme="dark"] .topbar{background:var(--panel);border-bottom-color:var(--border)} html[data-theme="dark"] .table-card, html[data-theme="dark"] .kc-head, html[data-theme="dark"] th, html[data-theme="dark"] details>summary, html[data-theme="dark"] .kc-sec > summary, html[data-theme="dark"] .kitchen-section > summary, html[data-theme="dark"] .receipt, html[data-theme="dark"] .users-hint{background:#11151c;color:var(--text);border-color:var(--border)} html[data-theme="dark"] th{color:var(--muted)} html[data-theme="dark"] tr:hover td{background:#1d2230} html[data-theme="dark"] td{border-color:var(--border)} html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .toolbar input, html[data-theme="dark"] .toolbar select, html[data-theme="dark"] .rec-search, html[data-theme="dark"] .rec-current-item input, html[data-theme="dark"] .qty input, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{background:#0f1217;color:var(--text);border-color:var(--border)} html[data-theme="dark"] .btn-secondary{background:#1d2230;color:var(--text);border-color:var(--border)} html[data-theme="dark"] .btn-secondary:hover{background:#262d3d} html[data-theme="dark"] .btn-ghost:hover{background:#1d2230} html[data-theme="dark"] .pos-cats button{background:#1d2230;color:var(--text);border-color:var(--border)} html[data-theme="dark"] .chip-btn{background:#1d2230;color:var(--text);border-color:var(--border)} html[data-theme="dark"] .rec-product-list, html[data-theme="dark"] .rec-current-list, html[data-theme="dark"] .rec-col{background:#11151c;border-color:var(--border)} html[data-theme="dark"] .rec-product-item{border-color:#1d2230} html[data-theme="dark"] .floor-wrap{background:#0a0d12} html[data-theme="dark"] .hbar-track{background:#1d2230} html[data-theme="dark"] .badge-ok{background:#10331f;color:#5dd49b} html[data-theme="dark"] .badge-pending{background:#3a2a0a;color:#f0c25a} html[data-theme="dark"] .badge-sent{background:#0e2349;color:#7fa6f0} html[data-theme="dark"] .badge-cancelled{background:#3a1414;color:#f0625a} html[data-theme="dark"] .floor-canvas .table{background:#1d2230;color:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.6)} html[data-theme="dark"] .floor-canvas .table.occupied{background:#3a1414;border-color:#f0625a} html[data-theme="dark"] .floor-canvas .table.occupied .t-status{color:#f0625a} html[data-theme="dark"] .floor-canvas .table .t-status{color:#8a93a3} /* Modo oscuro: líneas del cart de mesa (comandados, hijos de menú, padres). Las versiones claras usan fondo blanco-grisáceo; en oscuro hay que invertir para que el texto se lea. */ html[data-theme="dark"] .pos-cart-item.locked{ background:#181c24; color:var(--text); opacity:.78; } html[data-theme="dark"] .pos-cart-item.locked .ci-name, html[data-theme="dark"] .pos-cart-item.locked .it-total, html[data-theme="dark"] .pos-cart-item.locked .qty-ctrl span{color:var(--text)} html[data-theme="dark"] .pos-cart-item.locked .ci-meta{color:#8a93a3} html[data-theme="dark"] .pos-cart-item.menu-child{ background:#13161d; color:var(--text); } html[data-theme="dark"] .pos-cart-item.menu-child .ci-name{color:var(--text)} html[data-theme="dark"] .pos-cart-item.menu-parent{ background:#2a1810; /* naranja muy apagado, no luminoso */ border-color:var(--primary); color:var(--text); } html[data-theme="dark"] .pos-cart-item.menu-parent .ci-name{color:#f0c08a} /* Botones de cantidad dentro del cart (los +/-) en oscuro */ html[data-theme="dark"] .pos-cart-item .qty-ctrl button{ background:#1d2230; color:var(--text); border-color:var(--border); } html[data-theme="dark"] .pos-cart-item .qty-ctrl button:hover{background:#262d3d} /* Bordes entre líneas en oscuro */ html[data-theme="dark"] .pos-cart-item{border-bottom-color:#1d2230} /* Toasts */ .toast-host{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none;max-width:420px} .toast{ pointer-events:auto;background:#101828;color:#fff;padding:12px 16px;border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px; font-size:14px;font-weight:500;opacity:0;transform:translateX(20px); transition:opacity .2s,transform .2s;border-left:4px solid #98a2b3; } .toast.show{opacity:1;transform:translateX(0)} .toast.success{border-left-color:#12b76a} .toast.error{border-left-color:#f04438} .toast.warn{border-left-color:#f79009} .toast.info{border-left-color:#2e90fa} .toast .t-icon{font-size:18px;line-height:1;flex-shrink:0} .toast .t-msg{flex:1;line-height:1.35} .toast .t-close{background:none;border:none;color:#fff;opacity:.7;cursor:pointer;font-size:18px;padding:0;line-height:1} .toast .t-close:hover{opacity:1} @media (max-width:600px){ .toast-host{left:10px;right:10px;bottom:10px;max-width:none} .toast{font-size:13px;padding:10px 14px} /* v87 — En vistas operativas (sala/cocina) los toasts van ARRIBA para no tapar la bottombar de mesa (Comandar/Cobrar) ni los botones de KDS. */ .toast-host[data-position="top"]{ bottom:auto;top:70px;left:10px;right:10px;max-width:none; align-items:center; } .toast-host[data-position="top"] .toast{ transform:translateY(-20px); } .toast-host[data-position="top"] .toast.show{ transform:translateY(0); } } /* Modal de confirm/prompt propio */ .cdialog-bg{position:fixed;inset:0;background:rgba(16,24,40,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:9990} .cdialog-bg.active{display:flex} .cdialog{background:var(--panel);border-radius:12px;width:100%;max-width:420px;box-shadow:0 20px 40px rgba(0,0,0,.25);border:1px solid var(--border);animation:cdpop .15s ease} @keyframes cdpop{from{transform:scale(.96);opacity:.5}to{transform:scale(1);opacity:1}} .cdialog-h{padding:18px 20px 6px;display:flex;align-items:flex-start;gap:12px} .cdialog-h .ic{font-size:28px;line-height:1} .cdialog-h h3{margin:0 0 4px;font-size:16px;color:var(--text)} .cdialog-h p{margin:0;color:var(--muted);font-size:13px;line-height:1.45} .cdialog-b{padding:10px 20px} .cdialog-b input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);font-size:14px} .cdialog-b input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)} .cdialog-b textarea{width:100%;min-height:80px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);font-size:14px;resize:vertical;font-family:inherit} .cdialog-f{padding:14px 20px 18px;display:flex;justify-content:flex-end;gap:8px} .cdialog-f .btn{min-width:90px} /* Toggle pill */ .topbar-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--panel);cursor:pointer;font-size:18px;color:var(--text);transition:background .15s,border-color .15s;position:relative} .topbar-toggle:hover{background:#f3f4f6;border-color:var(--primary)} html[data-theme="dark"] .topbar-toggle:hover{background:#1d2230} .topbar-toggle.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)} .topbar-toggle .dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger);display:none} .topbar-toggle.has-new .dot{display:block;animation:badgePulse 1s infinite} @keyframes badgePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}} /* Atajos de teclado · ayuda */ .kbd{display:inline-block;background:var(--panel);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:2px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text);min-width:20px;text-align:center;font-weight:600;line-height:1.4} html[data-theme="dark"] .kbd{background:#1d2230} .shortcut-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)} .shortcut-row:last-child{border:none} .shortcut-row .keys{display:flex;gap:4px;align-items:center} .shortcut-row .desc{color:var(--text);font-size:13px} /* Focus visible mejorado para accesibilidad */ *:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px} button:focus-visible,.btn:focus-visible,.rest-card:focus-visible,.mode-card:focus-visible{outline-offset:3px} /* Skip-to-content link (accesibilidad) */ .skip-link{position:absolute;top:-100px;left:10px;background:var(--primary);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;z-index:99999;text-decoration:none} .skip-link:focus{top:10px} /* Banner de notificación (top de pantalla, KDS desktop) */ .kds-banner{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--danger);color:#fff;padding:10px 20px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.3);font-weight:700;font-size:14px;z-index:100;cursor:pointer;display:none;animation:bannerSlide .25s ease} .kds-banner.show{display:block} @keyframes bannerSlide{from{transform:translateX(-50%) translateY(-20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}} /* Indicador de carga / busy */ .busy{position:relative;pointer-events:none;opacity:.6} .busy::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.5);border-radius:inherit} html[data-theme="dark"] .busy::after{background:rgba(0,0,0,.4)} /* Print friendly: oculta toasts, sidebars y topbar */ @media print{ .toast-host,.cdialog-bg,.sidebar,.topbar,.hamburger,.topbar-toggle{display:none !important} .main,.content{padding:0 !important} } /* ============== CATÁLOGO NUEVO (POS-style) ============== */ .cat-prov-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch} .cat-prov-tabs::-webkit-scrollbar{height:6px} .cat-prov-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} .cat-prov-chip{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border:1.5px solid var(--border);background:var(--panel);color:var(--text); border-radius:999px;cursor:pointer;font-size:13px;font-weight:600; white-space:nowrap;transition:all .15s;font-family:inherit; } .cat-prov-chip:hover{background:var(--bg);border-color:var(--primary)} .cat-prov-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)} .cat-prov-chip.has-low:not(.active){border-color:var(--danger);color:var(--danger)} .cat-prov-chip-count{background:rgba(0,0,0,.08);padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700} .cat-prov-chip.active .cat-prov-chip-count{background:rgba(255,255,255,.25)} .cat-prov-chip-low{background:var(--danger);color:#fff;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;margin-left:4px} .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px} @media (max-width:600px){.cat-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}} .cat-card{ background:var(--panel);border:2px solid var(--border);border-radius:12px; padding:12px 10px 10px;cursor:pointer;display:flex;flex-direction:column;gap:4px; transition:transform .1s, border-color .15s, box-shadow .15s;position:relative;min-height:140px; user-select:none;-webkit-tap-highlight-color:transparent; } .cat-card:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 14px rgba(193,68,14,.15)} .cat-card:active{transform:scale(.97)} .cat-card.in-cart{border-color:var(--accent);background:var(--accent-soft)} html[data-theme="dark"] .cat-card.in-cart{background:#0f2d28} .cat-card-qty-badge{ position:absolute;top:-8px;right:-8px;background:var(--accent);color:#fff; width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:2; } .cat-card-stock{font-size:10px;line-height:1.2;display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-height:18px} .cat-card-name{font-weight:700;font-size:14px;line-height:1.25;color:var(--text);min-height:34px;display:flex;align-items:flex-start} .cat-card-prov{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .cat-card-price{font-size:16px;font-weight:800;color:var(--primary);margin-top:auto} .cat-card-actions{display:flex;gap:4px;margin-top:6px} .cat-card-num{flex:0 0 36px;padding:8px 0;font-size:14px;font-weight:600} .cat-card-plus{flex:1;padding:8px 0;font-size:18px;font-weight:800;line-height:1} @media (max-width:480px){ .cat-card{padding:10px 8px;min-height:130px} .cat-card-name{font-size:13px;min-height:30px} .cat-card-price{font-size:15px} } /* Pedido del día */ .day-order-hero{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff;border-radius:14px;padding:24px;margin-bottom:18px; display:flex;align-items:center;gap:16px;flex-wrap:wrap; } .day-order-hero h2{margin:0;font-size:22px} .day-order-hero p{margin:4px 0 0;opacity:.9;font-size:14px} .day-order-hero .stat-pill{background:rgba(255,255,255,.2);padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px} .day-order-prov-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px} .day-order-prov-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)} .day-order-line{display:grid;grid-template-columns:1fr 80px 110px 90px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border)} .day-order-line:last-child{border-bottom:none} .day-order-line .ln-name{font-weight:600;font-size:13px} .day-order-line .ln-stock{color:var(--muted);font-size:11px} .day-order-line .ln-qty input{width:100%;padding:6px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);text-align:right;font-weight:600} .day-order-line .ln-cost{text-align:right;font-weight:700;font-size:13px} @media (max-width:600px){ .day-order-line{grid-template-columns:1fr 80px;gap:6px} .day-order-line .ln-stock{grid-column:1/-1;margin-top:-4px} .day-order-line .ln-cost{text-align:right} } /* ============================================================ MEJORAS MOBILE-FIRST (touch + responsive) Específicas para tablets en cocina y móviles en sala. ============================================================ */ /* Dynamic viewport: arregla 100vh en iOS Safari (la barra inferior come 100px y rompe los layouts a pantalla completa). */ @supports (height: 100dvh) { .floor-wrap{height:calc(100dvh - 200px)} } /* Touch devices (móvil/tablet sin hover): garantizar tap targets de 44px que es el mínimo recomendado por Apple para no fallar pulsaciones */ @media (hover: none) and (pointer: coarse){ .btn{min-height:44px} .kc-item .btn{min-height:44px;font-size:15px;padding:10px 14px} .floor-canvas .table{cursor:pointer} /* Inputs más grandes para que el teclado no oculte el campo */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea{ min-height:44px;font-size:16px /* iOS no hace zoom si fuente >=16px */ } } /* === MÓVIL GENERAL: <760px === */ @media (max-width: 760px){ /* KDS: 1 columna, cards al ancho completo, botones grandes */ .kitchen-grid{grid-template-columns:1fr !important;gap:10px} .kitchen-card{padding:12px} .kc-head{flex-direction:column;align-items:stretch;gap:10px} .kc-head > div:first-child{display:flex;flex-direction:column} .kc-head .btn-success{width:100%;font-size:16px;padding:14px;min-height:48px} .kc-table{font-size:20px;font-weight:700} .kc-meta{font-size:12px} .kc-item{padding:10px;gap:10px} .kc-item .ki-name{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .kc-item .ki-qty{font-size:18px;min-width:36px;text-align:center;font-weight:700} .kc-item .btn{min-height:44px;min-width:88px;font-size:15px} .kc-rest-badge{font-size:12px !important;padding:3px 10px !important} /* Plano de sala: usar toda la pantalla, toolbar en wrap */ .floor-wrap{height:calc(100dvh - 160px) !important;min-height:300px !important} .floor-toolbar{flex-wrap:wrap;gap:6px;padding:8px} .floor-toolbar .btn{padding:8px 12px;font-size:13px} /* Canvas se queda en su tamaño pero es scrollable + zoomable con pinch */ .floor-viewport{-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom} /* TPV: productos compactos, cart al final */ .pos-products{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)) !important;gap:8px} .pos-product{padding:10px 8px;min-height:78px;text-align:center} .pos-product .pp-name{font-size:13px;line-height:1.25} .pos-product .pp-price{font-size:15px;font-weight:700} /* Cart: ya no sticky en mobile (ocupa demasiado), aparece después */ .pos-cart-card{position:relative !important;top:auto !important;max-height:none} .pos-layout{display:block !important} .pos-layout > div{width:100% !important} /* Stats / dashboards: 2 columnas en móvil, 1 en muy estrecho */ .grid.cols-3{grid-template-columns:1fr 1fr;gap:10px} .card.stat{padding:12px} .card.stat .value{font-size:22px} .card.stat .label{font-size:11px} .card.stat .delta{font-size:11px} /* Sidebar drawer ocupa ancho razonable en móvil */ .sidebar{width:80vw !important;max-width:300px} /* Modales no llenan TODA la pantalla con padding tonto */ .modal-content{margin:8px;max-height:calc(100dvh - 16px);padding:16px} } /* === MÓVIL COMPACTO: <420px (iPhone SE, etc.) === */ @media (max-width: 420px){ .grid.cols-3{grid-template-columns:1fr} .pos-products{grid-template-columns:repeat(2,1fr) !important;gap:6px} .kc-head .btn-success{font-size:15px;padding:12px} .topbar{padding:6px 10px} .topbar .brand{font-size:13px} .floor-toolbar{padding:6px} .floor-toolbar .btn{padding:6px 10px;font-size:12px} /* Más espacio vertical para plano */ .floor-wrap{height:calc(100dvh - 130px) !important} } /* === LANDSCAPE móvil: maximizar espacio vertical (cocina) === */ @media (max-width: 900px) and (orientation: landscape){ .floor-wrap{height:calc(100dvh - 110px) !important} .topbar{padding:4px 12px} .kitchen-card{padding:10px} } /* ============================================================ SALA VENTAS · Header enriquecido + Barra inferior fija + Anims ============================================================ */ /* Header de mesa con stats (tiempo, contadores) */ .mesa-header{ background:var(--panel);border:1px solid var(--border);border-radius:12px; padding:12px 14px;margin-bottom:14px; display:flex;align-items:center;gap:12px;flex-wrap:wrap } .mesa-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0} .mesa-header-actions{display:flex;gap:8px;flex-wrap:wrap} .mesa-time-pill{ display:inline-flex;align-items:center;gap:6px; padding:4px 10px;border-radius:14px;font-size:13px;font-weight:600; background:#eef2ff;color:#3730a3 } .mesa-time-pill.warn{background:#fef3c7;color:#92400e} .mesa-time-pill.danger{background:#fee2e2;color:#b42318;animation:pulseTime 1.6s ease-in-out infinite} @keyframes pulseTime{ 0%,100%{opacity:1} 50%{opacity:.6} } .mesa-stat-badges{display:flex;gap:6px;flex-wrap:wrap} .mesa-stat-badge{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px;border-radius:12px;font-size:12px;font-weight:600;line-height:1.4 } .mesa-stat-badge.pending{background:#fef3c7;color:#92400e} .mesa-stat-badge.kitchen{background:#dbeafe;color:#1e40af} .mesa-stat-badge.served{background:#d1fae5;color:#065f46} /* Barra inferior fija (solo móvil) con Total + Comandar + Cobrar */ .mesa-bottombar{ position:fixed;bottom:0;left:0;right:0;z-index:600; background:var(--panel);border-top:1px solid var(--border); padding:10px 12px;display:none;align-items:center;gap:10px; box-shadow:0 -4px 16px rgba(0,0,0,.08); /* Soporte para iOS notch */ padding-bottom:max(10px, env(safe-area-inset-bottom)) } @media (max-width: 760px){ .mesa-bottombar{display:flex} /* Padding inferior al contenido para que no quede tapado por la barra */ body[data-view="table"] .content{padding-bottom:96px !important} } .mesa-bb-total{flex:1;min-width:0} .mesa-bb-total .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600} .mesa-bb-total .val{font-size:22px;font-weight:800;color:var(--text);line-height:1.1} .mesa-bb-actions{display:flex;gap:8px} .mesa-bb-btn{ border:none;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700; cursor:pointer;min-height:48px;display:flex;flex-direction:column;align-items:center; justify-content:center;line-height:1.1;gap:2px } .mesa-bb-btn.send{background:#10b981;color:#fff;min-width:100px} .mesa-bb-btn.send:disabled,.mesa-bb-btn.send.disabled{background:#d1d5db;color:#fff;cursor:not-allowed} .mesa-bb-btn.pay{background:#3b82f6;color:#fff;min-width:100px} .mesa-bb-btn.pay:disabled,.mesa-bb-btn.pay.disabled{background:#d1d5db;color:#fff;cursor:not-allowed} .mesa-bb-btn .top{font-size:13px} .mesa-bb-btn .sub{font-size:11px;opacity:.92;font-weight:600} /* ============================================================ v87 — TOUCH TARGETS MÓVIL (44x44 mínimo según HIG/Material) Auditar botones críticos en sala/cocina/caja para que sean fácil de pulsar en estrés (manos mojadas, ritmo alto). ============================================================ */ @media (max-width: 760px) { /* Botones genéricos: forzar mínimo de tap area */ .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger { min-height: 44px; padding: 10px 14px; } /* Excepciones: botones pequeños inline (acciones de fila, badges) */ .btn-ghost[style*="font-size:1"] { min-height: 32px; padding: 6px 10px; } /* Controles de cantidad (POS de mesa): muy pequeños — agrandar */ .pos-cart-item .qty-ctrl button { width: 38px; height: 38px; font-size: 18px; font-weight: 700; } .pos-cart-item .qty-ctrl span { min-width: 32px; font-size: 15px; } /* KDS: botón "✓ Servir" debe ser fácil de pulsar con dedo */ .kitchen-card .kc-actions button, .kitchen-card .kds-item-action, .kitchen-card button { min-height: 44px; min-width: 44px; font-size: 14px; } /* Sidebar buttons */ .sidebar .nav button { min-height: 44px; padding: 10px 14px; } /* Topbar toggles (sonido, tema, ?) */ .topbar-toggle { min-width: 44px; min-height: 44px; } /* Inputs numéricos: altura cómoda */ input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"], input[type="search"], input[type="text"][data-touch-target] { min-height: 44px; font-size: 16px; /* iOS no hace zoom si >=16px */ } } /* Animación al añadir un item al carrito */ .pos-cart-item.just-added{animation: cartItemAdded 1.1s ease-out} @keyframes cartItemAdded{ 0%{background:#d1fae5;box-shadow:inset 0 0 0 2px #10b981} 25%{background:#d1fae5;box-shadow:inset 0 0 0 2px #10b981} 100%{background:transparent;box-shadow:none} } /* Mini-toast de "añadido" sin chocar con bottom bar */ .add-mini-toast{ position:fixed;left:50%;transform:translateX(-50%);bottom:90px;z-index:700; background:#065f46;color:#fff;padding:10px 18px;border-radius:24px; font-size:14px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2); animation:miniToastIn .25s ease-out, miniToastOut .25s ease-in 1.4s forwards; pointer-events:none } @keyframes miniToastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes miniToastOut{to{opacity:0;transform:translate(-50%,8px)}} @media (min-width:761px){ .add-mini-toast{bottom:24px} } /* Header de mesa: en móvil compactar */ @media (max-width: 760px){ .mesa-header{padding:10px;gap:8px} .mesa-header-actions .btn{padding:8px 10px;font-size:13px} .mesa-time-pill{font-size:12px;padding:3px 8px} .mesa-stat-badge{font-size:11px;padding:2px 7px} /* En móvil ocultamos los botones Comandar/Cobrar del carrito porque están en la barra fija inferior — evita duplicación visual y ahorra espacio. */ .desktop-only-actions{display:none !important} } /* ============================================================ UTILIDADES VISIBILIDAD POR DEVICE ============================================================ */ .mobile-only{display:none} @media (max-width:760px){ .mobile-only{display:inline-flex} .desktop-only{display:none !important} } /* ============================================================ QUICK TABLE PICKER (teclado numérico para abrir mesa) ============================================================ */ .qtp-modal{ position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999; display:flex;align-items:flex-end;justify-content:center; padding:0;animation:qtpFadeIn .2s ease-out } @keyframes qtpFadeIn{from{opacity:0}to{opacity:1}} @keyframes qtpSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .qtp-sheet{ background:var(--panel);width:100%;max-width:480px; border-radius:20px 20px 0 0;padding:20px 16px 24px; animation:qtpSlideUp .25s ease-out; max-height:90dvh;overflow-y:auto } .qtp-handle{width:40px;height:4px;background:#cbd0d6;border-radius:2px;margin:0 auto 14px} .qtp-title{font-size:15px;font-weight:600;text-align:center;color:var(--muted);margin-bottom:8px} .qtp-display{ background:#f3f4f6;border:2px solid var(--border);border-radius:12px; padding:14px;text-align:center;font-size:38px;font-weight:800;letter-spacing:2px; margin-bottom:12px;min-height:64px;color:var(--text) } .qtp-display.empty{color:#9aa0a6;font-size:18px;font-weight:500;letter-spacing:0} .qtp-hint{font-size:12px;text-align:center;color:var(--muted);margin-bottom:14px;min-height:18px} .qtp-hint.error{color:#b42318;font-weight:600} .qtp-hint.ok{color:#067647;font-weight:600} .qtp-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .qtp-key{ background:var(--panel);border:1px solid var(--border);border-radius:12px; padding:18px 0;font-size:24px;font-weight:600;cursor:pointer; color:var(--text);transition:transform .05s, background .15s; min-height:56px } .qtp-key:active{transform:scale(.95);background:#eef2ff} .qtp-key.act-open{background:#067647;color:#fff;border-color:#067647} .qtp-key.act-clear{background:#fee4e2;color:#b42318;border-color:#fecdd3} .qtp-key.act-cancel{background:transparent;border-color:transparent;color:var(--muted);font-size:14px} /* ============================================================ FAB (Floating Action Button) — usado en plano y TPV móvil ============================================================ */ .fab{ position:fixed;bottom:20px;right:20px;z-index:900; width:56px;height:56px;border-radius:28px; background:var(--accent,#c1440e);color:#fff;border:none; font-size:26px;cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); display:flex;align-items:center;justify-content:center } .fab:active{transform:scale(.92)} .fab.fab-add{bottom:90px;right:20px} .fab-label{ position:fixed;bottom:30px;right:88px;z-index:899; background:rgba(0,0,0,.75);color:#fff;padding:6px 12px;border-radius:18px; font-size:13px;font-weight:600;pointer-events:none } /* ============================================================ KDS SWIPE-TO-DONE ============================================================ */ .kc-item{position:relative;overflow:hidden;touch-action:pan-y;will-change:transform} .kc-item.swiping{transition:none !important} .kc-item .kc-item-row{display:flex;align-items:center;gap:10px;width:100%} .kc-item-bg{ position:absolute;inset:0;background:linear-gradient(90deg,#067647,#0a8e58); display:flex;align-items:center;justify-content:flex-end;padding-right:20px; color:#fff;font-weight:700;font-size:18px;opacity:0;pointer-events:none; border-radius:8px } .kc-item.swipe-active .kc-item-bg{opacity:1} /* ============================================================ BOTTOM SHEET para añadir platos (TPV móvil) ============================================================ */ .bs-modal{ position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998; display:flex;align-items:flex-end;justify-content:center; animation:qtpFadeIn .2s ease-out } .bs-sheet{ background:var(--panel);width:100%;max-width:560px; border-radius:20px 20px 0 0; height:88dvh;display:flex;flex-direction:column; animation:qtpSlideUp .25s ease-out;overflow:hidden } .bs-head{padding:14px 16px 8px;border-bottom:1px solid var(--border);flex-shrink:0} .bs-handle{width:40px;height:4px;background:#cbd0d6;border-radius:2px;margin:0 auto 12px} .bs-search{ width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:12px; font-size:16px;background:var(--panel);color:var(--text);min-height:48px } .bs-cats{ display:flex;gap:6px;padding:10px 16px;overflow-x:auto;flex-shrink:0; border-bottom:1px solid var(--border);-webkit-overflow-scrolling:touch } .bs-cat{ flex-shrink:0;padding:8px 14px;background:#f3f4f6;border:1px solid transparent; border-radius:18px;font-size:13px;font-weight:600;cursor:pointer; color:var(--text);white-space:nowrap;min-height:36px } .bs-cat.active{background:var(--accent,#c1440e);color:#fff} .bs-list{flex:1;overflow-y:auto;padding:10px 14px;-webkit-overflow-scrolling:touch} .bs-item{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 12px;border-bottom:1px solid var(--border);cursor:pointer; transition:background .15s;border-radius:8px;min-height:60px } .bs-item:active{background:#eef2ff} .bs-item-name{font-size:15px;font-weight:600;color:var(--text);flex:1;min-width:0} .bs-item-cat{font-size:11px;color:var(--muted);margin-top:2px} .bs-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .bs-item-price{font-size:15px;font-weight:700;color:var(--accent,#c1440e);white-space:nowrap} .bs-item-add{ background:#067647;color:#fff;border:none;padding:8px 14px;border-radius:18px; font-size:13px;font-weight:700;min-height:36px } .bs-cart-badge{ position:absolute;top:8px;right:8px;background:#fff;color:var(--accent,#c1440e); border-radius:12px;padding:2px 8px;font-size:12px;font-weight:700; border:1px solid var(--accent,#c1440e) } .bs-close{ position:absolute;top:8px;right:12px;background:transparent;border:none; font-size:24px;color:var(--muted);cursor:pointer;width:36px;height:36px } /* ============================================================ */ /* Sala Ventas: bloque "en vivo" en sidebar + plano fullscreen */ /* ============================================================ */ /* Bloque informativo dentro del sidebar, solo en vista 'floor' */ .sala-side-info{ padding:10px 10px 4px; border-bottom:1px solid #2c313a; display:flex;flex-direction:column;gap:8px; } .sala-side-info[hidden]{display:none} .sala-side-info .ssi-title{ font-size:10px;text-transform:uppercase;letter-spacing:.08em; color:#98a2b3;padding:0 4px 2px;font-weight:700; } .sala-side-info .ssi-card{ background:#272a30;border-radius:10px;padding:9px 12px; border:1px solid #2c313a; display:flex;flex-direction:column;gap:1px; transition:background .15s ease, transform .1s ease; } .sala-side-info .ssi-card.ssi-clickable{cursor:pointer} .sala-side-info .ssi-card.ssi-clickable:hover{background:#2f333a} .sala-side-info .ssi-card.ssi-clickable:active{transform:scale(.985)} .sala-side-info .ssi-label{ font-size:11px;text-transform:uppercase;letter-spacing:.03em; color:#98a2b3;font-weight:600; } .sala-side-info .ssi-value{ font-size:22px;font-weight:800;color:#fff;line-height:1.1;margin-top:2px; } .sala-side-info .ssi-value .ssi-of{ font-size:14px;color:#98a2b3;font-weight:600; } .sala-side-info .ssi-sub{ font-size:11px;color:#98a2b3;margin-top:1px; } /* Caja: variantes abierto/cerrado */ .sala-side-info .ssi-cash.open{ background:linear-gradient(135deg,#0f5132 0%,#1a6e3f 100%); border-color:#0f5132; } .sala-side-info .ssi-cash.open .ssi-label, .sala-side-info .ssi-cash.open .ssi-sub{color:#a7f3c8} .sala-side-info .ssi-cash.open .ssi-value{color:#fff} .sala-side-info .ssi-cash.closed{ background:#262a31;border-color:#3a3f48; } .sala-side-info .ssi-cash.closed .ssi-value{color:#9aa1ab;font-weight:700;font-size:18px} /* Plano de sala: cuando está en vista 'floor', el contenido ocupa todo el viewport disponible y NO genera scroll vertical en .content. */ body[data-view="floor"] .content{ padding:0; overflow:hidden; height:calc(100vh - 60px); /* 60px = topbar */ } .floor-fullscreen{ height:100% !important; min-height:0 !important; margin:0 !important; border-radius:0 !important; } /* Móvil: el sidebar info aparece dentro del sidebar hamburguesa. Mantenemos el plano sin scroll también, restando topbar móvil. */ @media (max-width:760px){ body[data-view="floor"] .content{ height:calc(100vh - 60px); } .sala-side-info{ padding:14px 12px 8px; } .sala-side-info .ssi-card{padding:11px 14px} .sala-side-info .ssi-value{font-size:20px} } /* M1 · Bloque "Enviar TODOS" en el carrito de Hacer pedido */ .cart-send-all{ margin-top:12px;padding:12px; background:linear-gradient(135deg, var(--primary), #a13509); border-radius:10px; display:flex;align-items:center;gap:12px; color:#fff; box-shadow:0 4px 12px rgba(193,68,14,.25); position:sticky;bottom:6px; } .cart-send-all-info{flex:1;min-width:0} .cart-send-all-num{font-weight:800;font-size:16px;line-height:1.2} .cart-send-all-meta{font-size:12px;opacity:.92;margin-top:2px} .cart-send-all-btn{ background:#fff;color:var(--primary); font-weight:800;border:none; padding:11px 18px;font-size:14px; white-space:nowrap; } .cart-send-all-btn:hover{background:#fff3eb} /* M3 · Tabs en Pedido del día (modo stock vs consumo) */ .day-order-tabs{ display:flex;gap:8px;margin:12px 0 16px;flex-wrap:wrap; align-items:center; } .day-order-tab{ flex:1;min-width:200px; display:flex;align-items:center;gap:10px; padding:12px 14px;border-radius:10px; border:2px solid var(--border);background:var(--panel); cursor:pointer;text-align:left; transition:all .15s ease; } .day-order-tab:hover{border-color:var(--primary);background:var(--accent-soft)} .day-order-tab.active{ border-color:var(--primary);background:var(--accent-soft); box-shadow:0 4px 12px rgba(193,68,14,.15); } .day-order-tab .tab-icon{font-size:24px;flex-shrink:0} .day-order-tab .tab-title{font-weight:700;font-size:14px;color:var(--text)} .day-order-tab .tab-sub{font-size:11px;color:var(--muted);margin-top:2px} .day-order-cover{ display:flex;align-items:center;gap:8px; padding:10px 14px;border-radius:10px; background:var(--panel);border:1px solid var(--border); } .day-order-cover label{font-size:13px;color:var(--muted);font-weight:600} .day-order-cover select{ padding:6px 10px;border:1px solid var(--border);border-radius:6px; font-size:13px;background:var(--bg);color:var(--text); } @media (max-width:760px){ .day-order-tabs{gap:6px;flex-direction:column} .day-order-tab{width:100%} .day-order-cover{width:100%;justify-content:space-between} } /* Modo oscuro tabs */ html[data-theme="dark"] .day-order-tab{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .day-order-tab.active{background:#3a1f17;border-color:var(--primary)} html[data-theme="dark"] .day-order-cover{background:var(--panel);border-color:var(--border)} /* ============================================================ */ /* Hacer pedido v2 · cards de proveedores + drill-down */ /* ============================================================ */ /* Header sticky con buscador, filtros y botón "← Proveedores" */ .cat-header{ position:sticky;top:0;z-index:5; background:var(--panel); } .cat-back{ background:#fff;color:var(--primary); border:2px solid var(--primary); font-weight:700; padding:9px 14px; white-space:nowrap; } .cat-back:hover{background:var(--accent-soft)} /* Vista nivel 1: grid compacto · 20+ proveedores caben sin scroll */ .prov-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; } .prov-card{ background:var(--panel); border:2px solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; position:relative; transition:all .15s ease; display:flex;flex-direction:column;gap:4px; min-height:74px; box-shadow:0 1px 3px rgba(0,0,0,.04); } .prov-card:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:0 4px 10px rgba(193,68,14,.15); } .prov-card:focus{outline:2px solid var(--primary);outline-offset:1px} .prov-card.has-low{border-color:var(--danger);background:#fef5f4} .prov-card.has-low:hover{box-shadow:0 4px 10px rgba(220,38,38,.18)} .prov-card.has-cart{ background:var(--accent-soft); border-color:var(--primary); } .prov-card.has-cart.has-low{background:linear-gradient(135deg, #fef5f4, var(--accent-soft))} /* Badges esquina superior derecha (carrito) y borde derecho (bajo stock) */ .prov-card-cart-badge{ position:absolute;top:6px;right:6px; background:var(--primary);color:#fff; font-size:10px;font-weight:700; padding:2px 7px;border-radius:999px; line-height:1.4; } .prov-card-low-badge{ position:absolute;top:6px;left:6px; background:var(--danger);color:#fff; font-size:10px;font-weight:800; width:18px;height:18px;border-radius:50%; display:flex;align-items:center;justify-content:center; line-height:1; } .prov-card-name{ font-size:13px;font-weight:700;line-height:1.25; color:var(--text); margin-top:2px; /* máximo 2 líneas, truncar */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis; } .prov-card-meta{ font-size:11px;color:var(--muted); line-height:1.3; /* truncar a 1 línea */ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; margin-top:auto; } /* Vista nivel 2: detalle de proveedor */ .prov-detail-head{ display:flex;gap:14px;align-items:center; } .prov-detail-head h3{margin:0;font-size:18px} /* Quickswitch: chips para saltar entre proveedores sin volver atrás */ .prov-quickswitch{ display:flex;gap:6px;flex-wrap:wrap; align-items:center; padding:10px 14px;margin-bottom:14px; background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow-x:auto; } .prov-quickswitch-lbl{ font-size:11px;color:var(--muted); text-transform:uppercase;letter-spacing:.04em; font-weight:700;flex-shrink:0; } .prov-quickswitch-chip{ display:inline-flex;align-items:center;gap:5px; padding:6px 11px; border:1px solid var(--border);background:var(--panel); color:var(--text); border-radius:999px; font-size:12px;font-weight:600; cursor:pointer;white-space:nowrap; transition:all .12s ease; } .prov-quickswitch-chip:hover{border-color:var(--primary);color:var(--primary)} .prov-quickswitch-chip.active{ background:var(--primary);color:#fff;border-color:var(--primary); } .prov-quickswitch-chip.has-low{border-color:var(--danger)} .prov-quickswitch-chip.has-low.active{background:var(--danger);border-color:var(--danger)} .prov-quickswitch-low{ background:var(--danger);color:#fff; font-size:10px;font-weight:800; padding:1px 6px;border-radius:999px; line-height:1; } .prov-quickswitch-chip.active .prov-quickswitch-low{background:#fff;color:var(--danger)} /* Modo oscuro */ html[data-theme="dark"] .prov-card{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .prov-card.has-low{background:#2a1414;border-color:var(--danger)} html[data-theme="dark"] .prov-card.has-cart{background:#3a1f17} html[data-theme="dark"] .prov-card.has-cart.has-low{background:linear-gradient(135deg, #2a1414, #3a1f17)} html[data-theme="dark"] .prov-quickswitch{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .prov-quickswitch-chip{background:var(--panel);color:var(--text);border-color:var(--border)} html[data-theme="dark"] .cat-back{background:var(--panel)} /* Mobile · 2 columnas para que quepan más cards visibles */ @media (max-width:760px){ .prov-grid{grid-template-columns:repeat(2, 1fr);gap:8px} .prov-card{padding:10px;min-height:64px} .prov-card-name{font-size:13px} .prov-card-meta{font-size:10px} .prov-detail-head{flex-wrap:wrap} .prov-detail-head h3{font-size:16px} .prov-quickswitch{padding:8px 10px} .prov-quickswitch-lbl{display:none} /* en móvil el contexto es claro */ .cat-back{padding:8px 10px;font-size:13px} } /* Pantallas estrechas (≤380px iPhone SE etc): 2 columnas más apretadas */ @media (max-width:380px){ .prov-grid{gap:6px} .prov-card{padding:8px;min-height:60px} } /* ==================================================================== ACCESIBILIDAD (a11y) ==================================================================== - Anillo de foco visible para keyboard nav (sin :focus-visible queda invisible cuando uno usa Tab → grave para teclado). - Touch targets mínimos 44x44 px (WCAG 2.5.5) en touch devices. - Respeta reduce-motion (animaciones cortas). - Skip link visible cuando recibe foco. */ :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; } /* Anillo más sutil para inputs/textareas (ya tienen su propio focus border) */ input:focus-visible,textarea:focus-visible,select:focus-visible{ outline-offset:0; outline-width:2px; } /* Skip link: oculto hasta recibir foco */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:99999; background:var(--primary);color:#fff;padding:10px 16px; text-decoration:none;font-weight:600;border-radius:0 0 8px 0; } .skip-link:focus{left:0} /* Touch targets WCAG en dispositivos táctiles. No se aplica a desktop porque hay mucho botón pequeño legítimo (chips de filtro, etc.). */ @media (pointer:coarse){ button,a[role="button"],.btn, input[type="button"],input[type="submit"],input[type="checkbox"],input[type="radio"], select{ min-height:44px; } /* Excepción: chips pequeños de filtro siguen pequeños porque van en toolbars densas y el área de tacto efectiva incluye gap. */ .chip-btn,.lnchip,.unav-row button{ min-height:36px; } } /* Reduce motion: respeta a usuarios con vértigo / preferencia OS */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* Modal: al abrir, scrolllock para que el fondo no se mueva al tocar */ body:has(#modalBg.active),body:has(#cdialogBg.active){ overflow:hidden; } /* Badge del error tracker (admin): hover + active state */ #errTrackerBtn:hover{background:rgba(180,35,24,.1)} #errTrackerBtn.active{background:rgba(180,35,24,.15)} /* v97 — En móvil, ocultar el carrito embebido en la vista POS de mesa. Todo el control (+/-, nota, eliminar) se hace en "Ver pedido" para no duplicar UI ni saturar la pantalla pequeña. En desktop sí se ve. */ @media (max-width: 760px) { body[data-view="table"] .pos-cart-card { display: none !important; } } /* ============================================================ v97 — CATÁLOGO de productos rediseñado (referencia PANTALLA1): - Search arriba en una fila - Categorías como cards grid 3×N - Título de categoría debajo - Productos como cards grandes: abreviatura grande + nombre + badge ============================================================ */ .pos-search-v2 { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); color: var(--text); font-size: 15px; margin-bottom: 12px; min-height: 44px; } .pos-cats-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .pos-cat-v2 { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 16px 10px; cursor: pointer; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; min-height: 56px; transition: background 0.1s, border-color 0.1s; } .pos-cat-v2:hover { background: var(--bg); } .pos-cat-v2.active { background: var(--accent); color: #fff; border-color: var(--accent); } .pos-cat-title-v2 { margin: 6px 0 12px; } .pos-cat-title-v2 h3 { margin: 0; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); } .pos-products-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pos-product-v2 { position: relative; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px 12px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-height: 110px; -webkit-tap-highlight-color: transparent; transition: background 0.08s, border-color 0.1s, transform 0.05s; } .pos-product-v2:active { transform: scale(0.98); background: var(--bg); } .pos-product-v2.in-cart { border-color: var(--accent); background: var(--accent-soft); } .pos-product-v2 .pp-abbr { font-size: 24px; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: 0.02em; } .pos-product-v2 .pp-name { font-size: 12px; line-height: 1.25; color: var(--text); opacity: 0.85; margin-top: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pos-product-v2 .pp-badge { position: absolute; top: 10px; right: 10px; background: var(--accent); color: #fff; min-width: 24px; height: 24px; border-radius: 999px; padding: 0 8px; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.18); z-index: 1; } @media (max-width: 380px) { .pos-cats-v2 { grid-template-columns: repeat(2, 1fr); } .pos-products-v2 { grid-template-columns: repeat(2, 1fr); } .pos-product-v2 .pp-abbr { font-size: 22px; } } /* ============================================================ v94 — HEADER de mesa simplificado (referencia PANTALLA1): [←] Mesa NN ⌄ (sin pills, sin badges) + menú desplegable con Mover / Unir / Cerrar sin cobrar ============================================================ */ .mesa-header-v2 { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border); margin-bottom: 14px; } .mh-back { background: none; border: none; font-size: 24px; font-weight: 600; color: var(--text); cursor: pointer; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mh-back:hover { background: var(--bg-soft); } .mh-title { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 17px; font-weight: 700; color: var(--text); } .mh-title:hover { background: var(--bg-soft); } .mh-title .mh-caret { font-size: 18px; color: var(--muted); line-height: 1; } .mh-spacer { flex: 1; } .mh-menu { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 6px; min-width: 240px; z-index: 100; display: flex; flex-direction: column; gap: 2px; } .mh-menu[hidden] { display: none; } .mh-menu-item { background: none; border: none; padding: 12px 14px; text-align: left; cursor: pointer; color: var(--text); font-size: 14px; border-radius: 8px; transition: background 0.1s; } .mh-menu-item:hover { background: var(--bg-soft); } .mh-menu-item.danger { color: var(--danger); } @media (max-width: 760px) { .mesa-header-v2 { padding: 8px 10px; margin-bottom: 8px; } .mh-title { font-size: 16px; padding: 6px 10px; } /* v95 — En móvil, fusionar el header de mesa con el topbar global. Ocultamos el header de mesa standalone — su contenido se inyecta en el topbar por el monolito (app.js mesaHeaderInjectIntoTopbar). */ body[data-view="table"] .mesa-header-v2 { display: none; } /* El topbar de mesa lleva la flecha + Mesa NN ⌄ */ body[data-view="table"] .topbar-mesa-inline { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } body[data-view="table"] .topbar #viewTitle { display: none !important; } } /* Topbar inline mesa: solo se ve en móvil con view=table */ .topbar-mesa-inline { display: none; } .topbar-mesa-inline .mh-back, .topbar-mesa-inline .mh-title { /* heredan estilos de .mh-back / .mh-title */ } .topbar-mesa-inline .mh-menu { /* misma posición pero ajustada al topbar */ top: calc(100% + 4px); left: 8px; transform: none; } /* ============================================================ v94 — BOTTOM BAR SIMPLIFICADO: solo "Ver pedido (N)" ============================================================ */ /* v95 — Bottombar v2: SIEMPRE fija al fondo en móvil (no solo en mesa). box-sizing reset evita overflow lateral. */ .mesa-bottombar-v2 { justify-content: stretch; display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 600; width: 100%; max-width: 100vw; box-sizing: border-box; } @media (min-width: 761px) { /* En desktop, no fixed — vive en el flow normal del POS */ .mesa-bottombar-v2 { position: static; width: auto; margin-top: 16px; } } .mesa-view-order-btn { flex: 1; width: 100%; max-width: 100%; border: none; background: var(--accent); color: #fff; padding: 14px 18px; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; transition: background 0.1s, transform 0.05s; box-sizing: border-box; } .mesa-view-order-btn:active { transform: scale(0.99); } .mesa-view-order-btn:hover { background: var(--primary); } .mesa-view-order-btn.disabled, .mesa-view-order-btn:disabled { background: var(--muted); opacity: 0.5; cursor: not-allowed; } .mesa-view-order-btn .badge-count { background: rgba(255,255,255,0.95); color: var(--accent); font-weight: 800; padding: 3px 10px; border-radius: 999px; min-width: 28px; text-align: center; font-size: 13px; } /* ============================================================ v94 — ORDER SHEET (Vista del pedido como pantalla completa). Estilo PANTALLA2 referencia: lista vertical de items + Total + 3 botones (Pago / Comandar / Ticket). ============================================================ */ .osheet { position: fixed; inset: 0; background: var(--panel); z-index: 9000; display: none; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .osheet.active { display: flex; } body.osheet-open { overflow: hidden; } .osheet-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .osheet-back { background: none; border: none; font-size: 24px; font-weight: 600; color: var(--text); cursor: pointer; width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .osheet-back:hover { background: var(--bg-soft); } .osheet-title { font-size: 17px; font-weight: 700; flex: 1; text-align: center; } .osheet-spacer { width: 44px; } .osheet-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; } /* v97 — Línea del pedido con controles +/- y "Añadir nota". Sustituye al diseño v94 (lista simple) cuando se quiere editar. */ .osheet-line-v2 { display: flex; flex-direction: column; gap: 8px; padding: 14px 4px; border-bottom: 1px solid var(--border); } .osheet-line-v2:last-child { border-bottom: none; } .osheet-l1 { display: flex; align-items: flex-start; gap: 12px; } .osheet-l1-info { flex: 1; min-width: 0; } .osheet-l1-price { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; } .osheet-name { font-weight: 600; font-size: 15px; color: var(--text); } .osheet-status { font-size: 11px; color: var(--muted); margin-top: 2px; } .osheet-note-display { font-size: 12px; color: var(--warn); margin-top: 4px; padding: 4px 8px; background: rgba(247,144,9,0.10); border-radius: 6px; display: inline-block; line-height: 1.3; } .osheet-l2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .osheet-qty-ctrl { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border-radius: 999px; padding: 4px; } .osheet-qbtn { width: 38px; height: 38px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); cursor: pointer; font-size: 18px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; transition: background 0.08s; } .osheet-qbtn:active { background: var(--accent-soft); } .osheet-qbtn.disabled, .osheet-qbtn:disabled { color: var(--muted); opacity: 0.45; cursor: not-allowed; } .osheet-qval { min-width: 24px; text-align: center; font-weight: 700; font-size: 15px; color: var(--text); } .osheet-note-btn { background: none; border: 1px dashed var(--border); color: var(--accent); padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.08s, border-color 0.08s; } .osheet-note-btn:hover { background: var(--accent-soft); border-color: var(--accent); } /* Líneas comandadas: ligero atenuado para indicar que no son editables (qty) */ .osheet-line-v2.commanded { background: rgba(0,0,0,0.02); border-radius: 8px; padding-left: 10px; padding-right: 10px; } html[data-theme="dark"] .osheet-line-v2.commanded { background: rgba(255,255,255,0.03); } .osheet-line { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); align-items: flex-start; } .osheet-line:last-child { border-bottom: none; } .osheet-qty { font-weight: 700; font-size: 16px; color: var(--text); text-align: right; } .osheet-info { min-width: 0; } .osheet-name { font-weight: 600; font-size: 15px; color: var(--text); } .osheet-note { font-size: 12px; color: var(--muted); margin-top: 2px; font-style: italic; } .osheet-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .osheet-price { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; } .osheet-empty { padding: 50px 20px; text-align: center; color: var(--muted); font-size: 14px; } .osheet-foot { border-top: 1px solid var(--border); padding: 14px; background: var(--panel); flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; } .osheet-total-row { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; } .osheet-total-lbl { font-size: 16px; font-weight: 700; color: var(--text); } .osheet-total-val { font-size: 22px; font-weight: 800; color: var(--text); } .osheet-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .osheet-btn { border: none; border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; min-height: 52px; transition: opacity 0.1s, transform 0.05s; } .osheet-btn:active { transform: scale(0.99); } .osheet-btn.disabled, .osheet-btn:disabled { opacity: 0.45; cursor: not-allowed; } .osheet-btn-pay { background: var(--accent); } .osheet-btn-cmd { background: #f87171; } .osheet-btn-tkt { background: #eab308; color: #1f2937; } /* v100 — Plano móvil ocupa toda la pantalla menos el topbar. El bottom-nav (v93, tabs Plano/Libres/Cuentas) se retiró por petición de Victor — ver index.html y floor-view.js si se quiere recuperar. */ @media (max-width: 760px) { body[data-mode="sala"][data-view="floor"] .floor-wrap { height: calc(100vh - 60px) !important; min-height: 320px !important; } } /* ============================================================ v93 — MODAL "NUEVA CUENTA PARA MESA" con numpad táctil grande (estilo iOS POS según referencia de Victor). ============================================================ */ .modal.newtable { max-width: 480px; } .modal.newtable .modal-h h3 { font-size: 20px; font-weight: 800; } .newtable-field { margin-bottom: 18px; } .newtable-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .newtable-input { width: 100%; padding: 14px 16px; font-size: 15px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; color: var(--text); -webkit-user-select: none; user-select: none; } .newtable-input::placeholder { color: var(--muted); opacity: 0.7; } .newtable-input-big { font-size: 18px; font-weight: 700; text-align: left; } /* Numpad 3 cols × 4 filas */ .newtable-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 8px; } .newtable-key { background: var(--bg-soft); border: none; padding: 22px 0; font-size: 26px; font-weight: 600; color: var(--text); cursor: pointer; transition: background 0.08s; -webkit-tap-highlight-color: transparent; user-select: none; min-height: 64px; } .newtable-key:active { background: var(--accent-soft); } .newtable-key:hover { background: var(--bg); } .newtable-key-action { color: var(--ok); font-size: 22px; } .newtable-key-confirm { color: var(--ok); font-size: 26px; } .newtable-key-confirm.disabled { color: var(--muted); opacity: 0.5; } .newtable-confirm:disabled { opacity: 0.5; cursor: not-allowed; background: var(--muted) !important; } /* En tema oscuro, los keys oscuros con bordes finos */ html[data-theme="dark"] .newtable-numpad { background: rgba(255,255,255,0.08); } html[data-theme="dark"] .newtable-key { background: var(--panel); } html[data-theme="dark"] .newtable-key:active { background: rgba(255,255,255,0.06); } /* Móvil: aún más grande para tacto fácil */ @media (max-width: 760px) { .newtable-key { padding: 18px 0; font-size: 24px; min-height: 58px; } .newtable-input { min-height: 48px; font-size: 16px; } .newtable-input-big { font-size: 17px; } } /* ============================================================ v88 — MOBILE POLISH (iPhone capturas reales) Sólo cambios de DISEÑO. Sin nueva funcionalidad. Aborda: overflow lateral, topbar con muchos botones, toasts que tapan controles, badges desbordados, safe-area iOS notch. ============================================================ */ /* 1. Safe area: respetar notch / Dynamic Island en iOS */ @supports (padding: env(safe-area-inset-top)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } @media (max-width: 760px) { /* v96 — Topbar SIEMPRE fijo en móvil. sticky puede fallar con overflow-x:hidden del body (cambia el contexto de scroll), por eso lo forzamos fixed + reservamos el espacio. */ .topbar { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 100; } .main { padding-top: 52px; } /* 2. TOPBAR — header MÍNIMO en móvil. Quitamos: - #viewTitle (redundante, ya se ve dentro de la propia vista) - #quickTableBtn (acceso por plano de sala, no necesario en topbar) - #helpToggle (atajos teclado físico, irrelevante en móvil) Mantenemos: ☰, sonido KDS, tema, userBadge. */ .topbar { height: 52px; padding: 0 10px; gap: 8px; } .topbar .top-left { gap: 6px; min-width: 0; flex: 1; } .topbar #viewTitle, .topbar #quickTableBtn, .topbar #helpToggle, .topbar #unavBtn, .topbar #userBadge { display: none !important; } .topbar .top-actions { display: flex; gap: 4px; flex-shrink: 0; } .topbar .top-actions::-webkit-scrollbar { display: none; } /* Toggles más compactos y proporcionados */ .topbar-toggle { width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hamburger { width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 22px; flex-shrink: 0; } /* 3. CONTENT — padding lateral consistente + safe-area */ .content { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-top: 12px; } /* 4. CARDS DE PRODUCTO (cat-card) — más anchas, menos huecos */ .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } .cat-card { min-height: 110px; padding: 14px 12px; } .cat-card-name { font-size: 14px; min-height: 0; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; } .cat-card-price { font-size: 17px; margin-top: 6px; } /* 5. POS CART ITEM — reorganizar a 2 filas en móvil: fila 1: nombre + meta (chips, nota, precio/ud) fila 2: controles cantidad + total */ .pos-cart-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name name" "qty total"; gap: 6px 10px; padding: 10px 0; } .pos-cart-item > :first-child, .pos-cart-item .ci-name, .pos-cart-item .ci-info { grid-area: name; min-width: 0; overflow-wrap: anywhere; } .pos-cart-item .qty-ctrl { grid-area: qty; justify-self: start; } .pos-cart-item .it-total { grid-area: total; font-size: 15px; min-width: 78px; flex-shrink: 0; } .pos-cart-item.menu-child { padding-left: 12px; } /* 6. BADGES DE MESA — evitar rotura palabra a palabra y desbordamiento. Bug observado en captura iPhone: cada palabra del badge en línea distinta porque display:inline-flex permitía wrap interno. */ .mesa-stat-badge, .mesa-time-pill, .mesa-header-left .pill { white-space: nowrap; flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; padding: 4px 9px; line-height: 1.4; } .mesa-stat-badges { width: 100%; flex-wrap: wrap; gap: 6px; } /* Header layout: en móvil, separar la barra del título de los badges en líneas distintas para que respiren */ .mesa-header { padding: 12px 14px; gap: 8px; align-items: flex-start; } .mesa-header-left { flex-direction: column; align-items: flex-start; width: 100%; } .mesa-header-left h2 { font-size: 17px !important; line-height: 1.2; } .mesa-header-actions { width: 100%; gap: 6px; } .mesa-header-actions .btn { flex: 1 1 auto; padding: 9px 10px; font-size: 13px; white-space: nowrap; } /* 7. TOAST top — más arriba para no tapar la zona de modos del topbar */ .toast-host[data-position="top"] { top: max(70px, calc(56px + env(safe-area-inset-top) + 10px)); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); } .toast-host[data-position="top"] .toast { max-width: none; width: 100%; } /* 8. BOTTOMBAR — respetar safe-area horizontal */ .mesa-bottombar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } body[data-view="table"] .content { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; } .mesa-bb-total .val { font-size: 20px; } .mesa-bb-btn { min-width: 88px; padding: 10px 10px; } .mesa-bb-btn .top { font-size: 13px; } .mesa-bb-btn .sub { font-size: 10px; } /* 9. MODAL — usar toda la pantalla en iPhone, evitar márgenes */ .modal-bg { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); } .modal { max-height: calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } /* Modal header sticky para que el título no se pierda al scrollear */ .modal .modal-h { position: sticky; top: 0; background: var(--panel); z-index: 2; border-bottom: 1px solid var(--border); } /* 10. SECCIÓN MESA — botones Mover/Unir/Cerrar adaptativos */ .mesa-actions-row { display: flex; gap: 8px; flex-wrap: wrap; } .mesa-actions-row .btn { flex: 1 1 auto; min-width: 0; padding: 10px 8px; font-size: 13px; } /* 11. BUSCADOR DE PLATOS — full width + altura touch-friendly */ #posSearch, input[type="search"][placeholder*="Buscar plato"], input[type="search"][placeholder*="plato"] { width: 100%; min-height: 44px; font-size: 16px; padding: 10px 14px; } /* 12. STAT CARDS — más compactas, mejor distribución */ .grid.cols-3 .card.stat, .grid.cols-4 .card.stat { padding: 12px; } .card.stat .value { font-size: 20px; } .card.stat .label { font-size: 10px; } .card.stat .delta { font-size: 10px; } /* 13. PLANO DE SALA — más altura en móvil para que las mesas se vean grandes desde el primer pintado (antes salía con zoom 37 % apretado arriba). Con el header reducido a 52 px tenemos más espacio. */ .floor-wrap { height: calc(100vh - 130px) !important; min-height: 360px !important; border-radius: 8px; } body[data-view="floor"] .content { padding-top: 6px; padding-bottom: 6px; } .floor-zoom-controls { bottom: 8px; right: 8px; padding: 4px; } /* 14. EDITOR MENÚ DEL DÍA — móvil. Captura iPhone mostraba chips de plato desbordadas a la derecha + scroll horizontal en la vista. */ body[data-view="edit-menu-dia"] .grid.cols-2, body[data-view="edit-menu-dia"] .grid.cols-3, body[data-view="edit-menu-dia"] .grid.cols-4 { grid-template-columns: 1fr !important; gap: 12px; } body[data-view="edit-menu-dia"] .card { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } /* Chips: forzar wrap real y truncado por chip */ .md-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } /* Select + input "Elige un plato..." */ select[id^="mdAdd_"], input[id^="mdNew_"] { width: 100% !important; flex: 1 1 auto; min-height: 44px; font-size: 15px; min-width: 0; } /* Las row-flex con select+botón en móvil mejor stack vertical */ body[data-view="edit-menu-dia"] .card .row-flex { flex-wrap: wrap; gap: 6px; } body[data-view="edit-menu-dia"] .card .row-flex .btn { width: 100%; } } @media (max-width: 380px) { /* iPhone SE / mini — extra compactación */ .topbar #viewTitle { max-width: 30vw; font-size: 15px; } .topbar-toggle { width: 36px; min-width: 36px; height: 36px; font-size: 14px; } .cat-card-name { font-size: 13px; } .cat-card-price { font-size: 15px; } .mesa-bb-btn { min-width: 78px; font-size: 12px; } .mesa-bb-total .val { font-size: 18px; } }