/* ===================================== RESET DESKTOP ===================================== */ #btn-menu-mobile{ display:none; } .ver-ticket{ display:none; } .cerrar-ticket{ display:none; } /* ===================================== MOBILE ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ /* ========================= GENERAL ========================= */ html, body{ overflow:hidden; } /* ========================= HEADER POS ========================= */ .header{ padding:8px; gap:6px; } .header h1{ font-size:13px; max-width:120px; } .header button{ padding:8px; font-size:11px; } /* ========================= POS MOBILE ========================= */ .pos-container{ display:flex; flex-direction:column; height:100%; } /* ========================= CATEGORIAS ========================= */ .categorias{ display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; white-space:nowrap; border-right:none; border-bottom:1px solid #eee; padding:10px; flex-shrink:0; } .btn-categoria{ min-width:90px; height:90px; margin-bottom:0; } .img-cat{ width:34px; height:34px; } .nombre-cat{ font-size:13px; } /* ========================= PRODUCTOS ========================= */ .productos{ flex:1; overflow-y:auto; grid-template-columns: repeat(2,minmax(0,1fr)); padding-bottom:120px; } .producto{ min-height:150px; } .producto p{ font-size:15px; } .producto img{ height:55px; } /* ========================= TICKET ========================= */ .ticket{ position:fixed; top:0; right:-100%; width:100%; height:100vh; z-index:99999; background:white; transition:.25s; border-left:none; } .ticket.activo{ right:0; } /* ========================= BOTON TICKET ========================= */ .ver-ticket{ display:flex !important; align-items:center; justify-content:center; width:70px; height:70px; font-size:26px; box-shadow: 0 10px 25px rgba(0,0,0,.25); } /* ========================= TICKET ITEMS ========================= */ .item-ticket{ grid-template-columns: 1fr; gap:8px; } .ticket-footer{ position:sticky; bottom:0; background:white; } /* ========================= MODALES ========================= */ .modal-body{ overflow-y:auto; } /* ========================= LOGIN ========================= */ .login-card{ width:100%; max-width:none; padding:24px 18px; } .g_id_signin{ width:100% !important; } /* ========================= ADMIN ========================= */ .admin-layout{ display:grid; grid-template-columns:1fr; } .sidebar{ position:fixed; left:-100%; top:0; width:280px; height:100vh; z-index:99999; transition:.25s; } .sidebar.activo{ left:0; } #contenido{ width:100%; padding:10px; } /* ========================= TABLAS ========================= */ .tabla{ font-size:13px; } .tabla th, .tabla td{ padding:6px; } /* ========================= LICENCIA ========================= */ .licencia-page{ padding:15px; } .licencia-header h1{ font-size:26px; } .plan-card{ padding:20px; } .plan-precio{ font-size:42px; } } /* ===================================== VENTAS MOBILE ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ .ventas-header{ flex-direction:column; align-items:stretch; gap:10px; } .acciones-ventas{ width:100%; display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; } .acciones-ventas .btn{ width:100%; } .filtros{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .filtros input, .filtros select, .filtros button{ width:100%; min-width:0; } /* ===================================== RESUMEN MINI ===================================== */ .resumen-box{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; } .card-resumen{ min-width:82px; min-height:52px; padding:6px; border-radius:10px; flex-shrink:0; } .card-resumen span{ font-size:9px; } .card-resumen strong{ font-size:13px; } } /* ===================================== MENU MOBILE ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ #btn-menu-mobile{ position:fixed; bottom:18px; right:18px; width:62px; height:62px; border:none; border-radius:50%; background:#111827; color:white; font-size:28px; box-shadow: 0 10px 25px rgba(0,0,0,.25); z-index:999999; display:flex; align-items:center; justify-content:center; } .sidebar{ padding-top:70px; } } /* ===================================== MODALES MOBILE ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ .modal{ padding:12px; } .modal-box{ width:100%; max-width:100%; max-height:90vh; border-radius:16px; overflow:hidden; } .modal-header h3{ font-size:18px; } .modal-body{ font-size:14px; overflow-y:auto; } .modal-footer{ flex-direction:column; } .modal-footer button{ width:100%; } } /* ===================================== FILTROS FECHAS ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ .filtros{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; align-items:end; } .filtros input, .filtros select, .filtros button{ width:100%; min-width:0; } .filtros input[type="date"]{ font-size:14px; min-height:42px; } } @media screen and (max-width:768px) and (orientation:portrait){ .modal-body .precio{ font-size:14px !important; } .detalle-total{ font-size:16px; } .item-detalle{ grid-template-columns: 1fr 40px 70px; font-size:13px; gap:6px; } } /* ===================================== TICKET MOBILE FIX ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ .ticket{ padding-bottom:90px; } #ticket-list{ padding:10px; } .ticket-header{ position:sticky; top:0; background:white; z-index:5; padding:10px; border-bottom:1px solid #eee; } } /* ===================================== BOTON SALIR POS ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ .btn-salir{ min-width:90px; font-size:13px; padding:10px 14px; border-radius:12px; } } /* ===================================== FILTROS COLAPSABLES ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ .btn-filtros-mobile{ width:100%; height:46px; border:none; border-radius:12px; background:#111827; color:white; font-size:15px; margin-bottom:10px; } #panel-filtros-mobile{ display:none; background:white; padding:10px; border-radius:14px; margin-bottom:10px; } } /* ===================================== PRODUCTOS MOBILE ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ .producto-card .precio{ font-size:14px !important; } .producto-card h4{ font-size:13px; } } /* ===================================== OVERLAY MENU ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ #overlay-menu{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:99998; } #overlay-menu.activo{ display:block; } } /* ===================================== BADGE CARRITO ===================================== */ @media screen and (max-width:768px) and (orientation:portrait){ .ver-ticket{ position:fixed; bottom:18px; left:18px; background:#111827; color:white; border:none; border-radius:50%; z-index:999999; } .ver-ticket.activo{ background:#10b981; } #badge-carrito{ position:absolute; top:-6px; right:-4px; width:24px; height:24px; border-radius:50%; background:#ef4444; color:white; font-size:12px; font-weight:bold; display:flex; align-items:center; justify-content:center; } }