/* ============================================================ Al Punto · Sistema POS — Estética "Liquid Glass" (inspirada en iOS) Vidrio translúcido con blur, tipografía del sistema, colores semánticos de iOS, modo claro/oscuro automático. ============================================================ */ :root { /* Acento de marca: azul (sistema de diseño — sin morado) */ --primario: #246BFD; --primario-oscuro: #0B1D3A; --primario-claro: #D6E1FF; --primario-rgb: 36, 107, 253; /* Colores semánticos */ --secundario: #0B1D3A; --exito: #1FAA59; --exito-claro: #e3f9e9; --advertencia: #F5A524; --advertencia-claro: #fff2e0; --peligro: #F31260; --peligro-claro: #ffe9e7; --exito-rgb: 31, 170, 89; --advertencia-rgb: 245, 165, 36; --peligro-rgb: 243, 18, 96; /* Superficies (modo claro) */ --fondo: #F2F5FB; --fondo-rgb: 242, 245, 251; --superficie: #ffffff; --superficie-rgb: 255, 255, 255; --cristal-bg: #ffffff; --cristal-borde: #E6EAF2; --cristal-blur: none; --texto: #0B1D3A; --texto-tenue: #64748B; --borde: #E6EAF2; --radio-sm: 8px; --radio: 12px; --radio-lg: 16px; --radio-pill: 999px; --sombra: 0 1px 2px rgba(11,29,58,.04), 0 6px 18px rgba(11,29,58,.05); --sombra-md: 0 10px 30px rgba(11,29,58,.09), 0 2px 8px rgba(11,29,58,.04); --sombra-flotante: 0 20px 48px rgba(11,29,58,.16); --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --resorte: cubic-bezier(0.34, 1.35, 0.64, 1); --suave: cubic-bezier(0.25, 0.1, 0.25, 1); /* Escala de espaciado del sistema de diseño */ --espacio-1: 4px; --espacio-2: 8px; --espacio-3: 12px; --espacio-4: 16px; --espacio-5: 24px; --espacio-6: 32px; --espacio-7: 48px; --espacio-8: 64px; /* Duraciones de movimiento del sistema de diseño */ --duracion-fade: 300ms; --duracion-slide: 300ms; --duracion-scale: 200ms; --duracion-hover: 150ms; } /* Paleta oscura: se activa por preferencia del sistema (si el usuario no forzó "claro" con el selector de tema) o explícitamente con data-theme="dark" en , puesto por el selector de tema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primario: #4C8CFF; --primario-oscuro: #79ACFF; --primario-claro: rgba(76, 140, 255, 0.18); --primario-rgb: 76, 140, 255; --secundario: #D6E1FF; --exito: #2FCB70; --exito-claro: rgba(47, 203, 112, 0.16); --advertencia: #F5A524; --advertencia-claro: rgba(245, 165, 36, 0.16); --peligro: #FF5C87; --peligro-claro: rgba(255, 92, 135, 0.16); --fondo: #0B1425; --fondo-rgb: 11, 20, 37; --superficie: #101B33; --superficie-rgb: 16, 27, 51; --cristal-bg: #101B33; --cristal-borde: rgba(255, 255, 255, 0.08); --texto: #F2F5FB; --texto-tenue: #93A2BE; --borde: rgba(255, 255, 255, 0.08); --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35); --sombra-md: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --sombra-flotante: 0 16px 44px rgba(0,0,0,.5); } } /* Mismo bloque, pero forzado por el selector de tema (gana en ambas direcciones). */ :root[data-theme="dark"] { --primario: #4C8CFF; --primario-oscuro: #79ACFF; --primario-claro: rgba(76, 140, 255, 0.18); --primario-rgb: 76, 140, 255; --secundario: #D6E1FF; --exito: #2FCB70; --exito-claro: rgba(47, 203, 112, 0.16); --advertencia: #F5A524; --advertencia-claro: rgba(245, 165, 36, 0.16); --peligro: #FF5C87; --peligro-claro: rgba(255, 92, 135, 0.16); --fondo: #0B1425; --fondo-rgb: 11, 20, 37; --superficie: #101B33; --superficie-rgb: 16, 27, 51; --cristal-bg: #101B33; --cristal-borde: rgba(255, 255, 255, 0.08); --texto: #F2F5FB; --texto-tenue: #93A2BE; --borde: rgba(255, 255, 255, 0.08); --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35); --sombra-md: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --sombra-flotante: 0 16px 44px rgba(0,0,0,.5); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { margin: 0; font-family: var(--fuente); background: var(--fondo); color: var(--texto); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0 0 4px; letter-spacing: -0.02em; } h1 { font-size: 32px; font-weight: 700; } h2 { font-size: 24px; font-weight: 600; } h3 { font-size: 17px; font-weight: 700; } h4 { font-size: 15px; font-weight: 700; } body { font-size: 16px; font-weight: 400; } p { margin: 0; } .oculto { display: none !important; } hr.divisor { border: none; border-top: 1px solid var(--borde); margin: 16px 0; } /* ---------- Material de vidrio (base reutilizable) ---------- */ .cristal { background: var(--cristal-bg); -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur); border: 1px solid var(--cristal-borde); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 20px; border-radius: var(--radio-pill); border: none; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: transform .15s var(--resorte), opacity .15s var(--suave), background .15s var(--suave); white-space: nowrap; } .btn:active { transform: scale(0.94); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn-primario { background: var(--primario); color: #fff; box-shadow: 0 4px 14px rgba(var(--primario-rgb), .35); } .btn-primario:hover:not(:disabled) { background: var(--primario-oscuro); } .btn-secundario { background: var(--secundario); color: #fff; } .btn-exito { background: var(--exito); color: #fff; box-shadow: 0 4px 14px rgba(var(--exito-rgb), .3); } .btn-peligro { background: var(--peligro); color: #fff; box-shadow: 0 4px 14px rgba(var(--peligro-rgb), .3); } .btn-advertencia { background: var(--advertencia); color: #fff; } .btn-fantasma { background: rgba(var(--primario-rgb), .09); color: var(--primario); border: none; } .btn-fantasma:hover:not(:disabled) { background: rgba(var(--primario-rgb), .16); } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn-bloque { width: 100%; } .btn-icono { width: 40px; height: 40px; padding: 0; border-radius: 50%; } /* ---------- Formularios ---------- */ .campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .campo label { font-size: 12.5px; font-weight: 600; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .02em; } .campo input, .campo select, .campo textarea { padding: 12px 14px; border: none; border-radius: var(--radio-sm); background: rgba(var(--fondo-rgb), .7); color: var(--texto); outline: none; transition: box-shadow .15s var(--suave), background .15s; box-shadow: inset 0 0 0 1.5px var(--borde); } .campo input:focus, .campo select:focus, .campo textarea:focus { box-shadow: inset 0 0 0 2px var(--primario); background: var(--superficie); } .campo input:disabled { opacity: .55; } .campo-fila { display: flex; gap: 12px; } .campo-fila .campo { flex: 1; } .campo-ayuda { font-size: 12px; color: var(--texto-tenue); } h3 > .campo-ayuda { font-size: 13px; font-weight: 400; margin-left: 4px; } .campo-error { font-size: 12.5px; color: var(--peligro); min-height: 16px; font-weight: 500; } /* Toggle tipo iOS para checkboxes */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: var(--radio-pill); background: rgba(120,120,128,.24); position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s var(--suave); } input[type="checkbox"]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s var(--resorte); } input[type="checkbox"]:checked { background: var(--exito); } input[type="checkbox"]:checked::before { transform: translateX(18px); } /* Control segmentado (Boleta / Factura) */ .segmentado { display: flex; padding: 3px; border-radius: var(--radio-sm); background: rgba(var(--fondo-rgb), .7); box-shadow: inset 0 0 0 1.5px var(--borde); gap: 2px; } .segmentado button { flex: 1; border: none; background: transparent; padding: 9px 10px; border-radius: 8px; font-weight: 600; font-size: 13.5px; color: var(--texto-tenue); cursor: pointer; transition: all .2s var(--suave); } .segmentado button.activo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); } /* ---------- Tarjetas / superficies ---------- */ .tarjeta { background: var(--superficie); border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: 22px; } /* ============================================================ LOGIN ============================================================ */ #vista-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 15% 20%, rgba(10, 132, 255, .55), transparent 55%), radial-gradient(circle at 85% 15%, rgba(94, 92, 230, .5), transparent 55%), radial-gradient(circle at 50% 90%, rgba(0, 90, 200, .6), transparent 60%), #051023; padding: 20px; } .login-caja { background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(36px) saturate(180%); backdrop-filter: blur(36px) saturate(180%); border: 1px solid rgba(255,255,255,.28); border-radius: 28px; box-shadow: var(--sombra-flotante); width: 100%; max-width: 400px; padding: 44px 36px; animation: aparecerArriba .45s var(--resorte); color: #fff; } .login-logo { text-align: center; margin-bottom: 30px; } .login-logo .emoji { font-size: 44px; width: 84px; height: 84px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 24px rgba(0,0,0,.2); } .login-logo h1 { font-size: 27px; color: #fff; letter-spacing: -0.02em; } .login-logo p { color: rgba(255,255,255,.7); font-size: 13px; margin-top: 4px; } #vista-login .campo label { color: rgba(255,255,255,.75); } #vista-login .campo input { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); } #vista-login .campo input::placeholder { color: rgba(255,255,255,.45); } #vista-login .campo input:focus { box-shadow: inset 0 0 0 2px #fff; background: rgba(255,255,255,.18); } /* Color de texto fijo (no ligado al tema): el fondo del botón siempre es blanco, así que necesita un dorado oscuro con buen contraste sí o sí, sin importar si el resto de la app está en modo claro u oscuro. */ #vista-login .btn-primario { background: #fff; color: var(--primario-oscuro); box-shadow: 0 8px 22px rgba(0,0,0,.25); } #vista-login .btn-primario:hover { background: #f2f2f7; } .login-demo { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 13px 16px; font-size: 12px; color: rgba(255,255,255,.85); margin-top: 20px; line-height: 1.6; } @keyframes aparecerArriba { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ============================================================ APP SHELL ============================================================ */ #app { display: flex; min-height: 100vh; } .barra-lateral { width: 236px; flex-shrink: 0; background: var(--cristal-bg); -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur); border-right: 1px solid var(--borde); display: flex; flex-direction: column; padding: 22px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; } .barra-logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; } .barra-logo .emoji { font-size: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--primario); border-radius: 11px; box-shadow: 0 4px 10px rgba(var(--primario-rgb),.35); } .barra-logo strong { font-size: 17px; color: var(--texto); letter-spacing: -0.02em; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 13px; color: var(--texto-tenue); text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer; margin-bottom: 2px; border: none; background: none; width: 100%; text-align: left; transition: background .15s var(--suave), color .15s; } .nav-item span:first-child { font-size: 16px; width: 20px; text-align: center; } .nav-item:hover { background: rgba(var(--primario-rgb), .07); color: var(--texto); } .nav-item.activo { background: var(--primario); color: #fff; box-shadow: 0 4px 12px rgba(var(--primario-rgb),.3); } .nav-grupo { margin-bottom: 2px; } .nav-grupo-titulo { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: none; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); opacity: .65; padding: 14px 14px 6px; } .nav-grupo:first-child .nav-grupo-titulo { padding-top: 4px; } .nav-grupo-titulo:hover { opacity: 1; } .nav-grupo-flecha { transition: transform .15s var(--suave); font-size: 10px; } .nav-grupo.colapsado .nav-grupo-flecha { transform: rotate(-90deg); } .nav-grupo-items { overflow: hidden; } .nav-grupo.colapsado .nav-grupo-items { display: none; } .barra-turno { margin-top: auto; padding: 13px 14px; border-radius: 14px; background: rgba(var(--fondo-rgb), .6); font-size: 12.5px; font-weight: 600; } .barra-turno .estado-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 3px currentColor; opacity: .9; } .barra-turno.abierto { color: var(--exito); } .barra-turno.cerrado { color: var(--peligro); } .barra-turno span:last-child { color: var(--texto); } .contenido-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: var(--cristal-bg); -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 30; } .topbar h2 { font-size: 20px; } .topbar-usuario { display: flex; align-items: center; gap: 12px; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(145deg, var(--primario), var(--secundario)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; box-shadow: 0 3px 10px rgba(var(--primario-rgb),.35); } .topbar-usuario .info { text-align: right; line-height: 1.3; } .topbar-usuario .info strong { display: block; font-size: 13px; } .topbar-usuario .info span { display: inline-block; margin-top: 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--primario); background: rgba(var(--primario-rgb),.12); padding: 2px 8px; border-radius: var(--radio-pill); } .topbar-buscador { position: relative; flex: 1; max-width: 420px; margin: 0 20px; display: flex; align-items: center; gap: 8px; background: rgba(var(--fondo-rgb),.7); box-shadow: inset 0 0 0 1.5px var(--borde); border-radius: var(--radio-pill); padding: 9px 16px; } .topbar-buscador-icono { font-size: 13px; opacity: .6; } .topbar-buscador input { border: none; background: none; outline: none; flex: 1; font-size: 13.5px; font-family: var(--fuente); color: var(--texto); } .topbar-buscador-resultados { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-flotante); box-shadow: 0 12px 30px rgba(0,0,0,.16), inset 0 0 0 1px var(--borde); max-height: 320px; overflow-y: auto; z-index: 50; } .topbar-buscador-fila { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 13px; } .topbar-buscador-fila:hover { background: rgba(var(--primario-rgb),.08); } .topbar-buscador-fila .codigo { color: var(--texto-tenue); font-size: 11.5px; } .topbar-buscador-fila .precio { margin-left: auto; font-weight: 700; } .topbar-buscador-vacio { padding: 14px; text-align: center; color: var(--texto-tenue); font-size: 12.5px; } @media (max-width: 860px) { .topbar-buscador { display: none; } } /* Estados vacíos con ícono, para listas/tablas sin datos */ .estado-vacio { text-align: center; padding: 36px 16px; color: var(--texto-tenue); } .estado-vacio .icono { font-size: 34px; display: block; margin-bottom: 8px; opacity: .55; } .estado-vacio .texto { font-size: 13px; } .vista { padding: 26px; flex: 1; animation: aparecer .25s var(--suave); } .menu-hamburguesa { display: none; } .btn-colapsar { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(var(--primario-rgb), .09); color: var(--primario); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.sidebar-oculta .barra-lateral { display: none; } /* ---------- Página de Inicio ---------- */ .grid-inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; } .tile-inicio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--superficie); border: none; border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: 26px 12px; cursor: pointer; transition: transform .15s var(--resorte), box-shadow .15s var(--suave); } .tile-inicio:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); } .tile-inicio:active { transform: translateY(0) scale(.95); } .tile-inicio-icono { font-size: 26px; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--primario-claro); } .tile-inicio-label { font-size: 13px; font-weight: 700; text-align: center; } /* ============================================================ PUNTO DE VENTA ============================================================ */ .pos-layout { display: grid; grid-template-columns: 1fr 384px; gap: 20px; align-items: start; } .pos-toolbar { display: flex; gap: 10px; margin-bottom: 16px; } .pos-toolbar input { flex: 1; } .pos-categorias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 6px; } .chip { flex-shrink: 0; padding: 9px 16px; border-radius: var(--radio-pill); background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--borde); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--texto-tenue); transition: all .15s var(--suave); } .chip:active { transform: scale(.95); } .chip.activo { background: var(--primario); color: #fff; box-shadow: 0 4px 12px rgba(var(--primario-rgb),.3); } .chips-congelados { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-top: 4px; margin-bottom: 10px; } .chip-congelado { background: var(--advertencia-claro); box-shadow: inset 0 0 0 1.5px rgba(var(--advertencia-rgb),.4); color: var(--advertencia); display: flex; align-items: center; gap: 8px; } .chip-congelado .chip-quitar { color: var(--advertencia); opacity: .7; font-weight: 800; } .chip-congelado .chip-quitar:hover { opacity: 1; } .grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; } .tarjeta-producto { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 15px; cursor: pointer; position: relative; transition: transform .15s var(--resorte), box-shadow .15s var(--suave); } .tarjeta-producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); } .tarjeta-producto:active { transform: translateY(0) scale(.95); } .tarjeta-producto.sin-stock { opacity: .4; cursor: not-allowed; } .tarjeta-producto .icono { font-size: 26px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: rgba(var(--primario-rgb), .08); border-radius: 14px; margin-bottom: 8px; } .tarjeta-producto h4 { font-size: 13.5px; margin: 0 0 4px; line-height: 1.3; min-height: 34px; font-weight: 600; } .tarjeta-producto .precio { font-weight: 700; color: var(--primario); font-size: 15px; } .tarjeta-producto .stock { font-size: 11px; color: var(--texto-tenue); margin-top: 2px; font-weight: 500; } .tarjeta-producto .stock.bajo { color: var(--peligro); font-weight: 700; } .tarjeta-producto .badge-promo { position: absolute; top: 10px; right: 10px; background: var(--advertencia); color: #fff; font-size: 14px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(var(--advertencia-rgb),.4); } /* ---------- Lista de productos (alternativa al grid de tarjetas) ---------- */ .lista-productos { display: flex; flex-direction: column; gap: 6px; } .fila-producto { display: flex; align-items: center; gap: 12px; background: var(--superficie); border-radius: var(--radio-sm); padding: 10px 14px; box-shadow: var(--sombra); cursor: pointer; transition: transform .1s var(--resorte); } .fila-producto:active { transform: scale(.98); } .fila-producto.sin-stock { opacity: .45; cursor: not-allowed; } .fila-producto .icono { font-size: 20px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(var(--primario-rgb), .08); border-radius: 10px; flex-shrink: 0; } .fila-producto .info { flex: 1; min-width: 0; } .fila-producto .info h4 { font-size: 13.5px; margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fila-producto .info .codigo { font-size: 11px; color: var(--texto-tenue); } .fila-producto .precio { font-weight: 700; color: var(--primario); font-size: 14px; white-space: nowrap; } .fila-producto .stock { font-size: 11px; color: var(--texto-tenue); white-space: nowrap; min-width: 60px; text-align: right; } .fila-producto .stock.bajo { color: var(--peligro); font-weight: 700; } /* ---------- Panel lateral del POS (fichas + calculadora + cobro) ---------- */ .panel-lateral-pos { background: var(--superficie); border-radius: var(--radio-lg); box-shadow: var(--sombra-md); display: flex; flex-direction: column; position: sticky; top: 94px; height: calc(100vh - 114px); max-height: calc(100vh - 114px); overflow-y: auto; overflow-x: hidden; padding-top: 18px; } .panel-lateral-pos .fichas-accion { padding-top: 0; } .panel-carrito { background: var(--superficie); border-radius: var(--radio-lg); box-shadow: var(--sombra-md); display: flex; flex-direction: column; position: sticky; top: 94px; /* "height" fija (no solo max-height): un hijo flex:1 (la tabla del carrito) solo puede crecer para llenar el espacio si el contenedor tiene una altura DEFINITIVA. Con solo max-height, cuando hay pocos productos el alto es "auto" (según contenido) y el flex:1 no tiene nada que repartirse, colapsando la tabla a 0px. */ height: calc(100vh - 114px); max-height: calc(100vh - 114px); /* Auto (no "hidden"): si el contenido no cabe ni encogiendo el carrito al mínimo, el panel entero se vuelve desplazable en vez de recortar los botones de pago/Cobrar. */ overflow-y: auto; overflow-x: hidden; } .carrito-header { padding: 16px 20px 10px; border-bottom: none; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } /* ---------- Fichas de acción (Congelar / Anular / Reg. Promo) ---------- */ .fichas-accion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 20px 14px; flex-shrink: 0; } .fichas-accion-4 { grid-template-columns: repeat(2, 1fr); } .fichas-accion-fila { grid-template-columns: repeat(3, 1fr); } .ficha-accion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 11px 6px; border-radius: 14px; border: none; cursor: pointer; background: rgba(var(--primario-rgb), .1); color: var(--primario); font-size: 11px; font-weight: 700; transition: transform .15s var(--resorte), background .15s; } .ficha-accion:active { transform: scale(.92); } .ficha-accion .ficha-icono { font-size: 19px; } .ficha-accion.ficha-peligro { background: var(--peligro-claro); color: var(--peligro); } /* ---------- Carrito como tabla ---------- */ .carrito-tabla-wrap { flex: 1; overflow: auto; min-height: 160px; padding: 0 10px; border-top: 1px solid var(--borde); } table.tabla-carrito { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.tabla-carrito thead th { position: sticky; top: 0; background: var(--superficie); text-align: left; padding: 10px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue); border-bottom: 1px solid var(--borde); z-index: 1; } table.tabla-carrito thead th:last-child, table.tabla-carrito td:last-child { text-align: right; } table.tabla-carrito td { padding: 9px 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; } table.tabla-carrito tbody tr:last-child td { border-bottom: none; } table.tabla-carrito tr.fila-gratis td { background: var(--advertencia-claro); } .tc-producto { font-weight: 600; line-height: 1.3; } .tc-promo { font-size: 10.5px; color: var(--advertencia); font-weight: 600; margin-top: 3px; } .tc-inafecto-tag { font-size: 10.5px; color: var(--texto-tenue); margin-top: 3px; } .tc-precio { color: var(--texto-tenue); white-space: nowrap; } .tc-codigo { color: var(--texto-tenue); white-space: nowrap; font-size: 12px; font-family: 'Courier New', monospace; } .tc-total { font-weight: 700; white-space: nowrap; } .tc-acciones { display: flex; gap: 4px; justify-content: flex-end; } .tc-accion-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 3px; line-height: 1; border-radius: 6px; } .tc-accion-btn:hover { background: rgba(var(--fondo-rgb), .8); } .tc-accion-btn.activo-gratis { filter: none; } .cantidad-control { display: flex; align-items: center; gap: 8px; background: rgba(var(--fondo-rgb),.7); border-radius: var(--radio-pill); padding: 3px 5px; width: fit-content; } .cantidad-control button { width: 21px; height: 21px; border-radius: 50%; border: none; background: var(--superficie); box-shadow: var(--sombra); cursor: pointer; font-weight: 700; color: var(--primario); font-size: 12px; } .cantidad-control span { font-weight: 700; font-size: 12.5px; min-width: 12px; text-align: center; } .carrito-vacio { text-align: center; padding: 44px 20px; color: var(--texto-tenue); font-size: 13px; } /* ---------- Pago en efectivo: monto recibido + vuelto + teclado ---------- */ .bloque-efectivo { background: rgba(var(--fondo-rgb), .6); border-radius: var(--radio-sm); padding: 14px; } .bloque-efectivo .vuelto-linea { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-weight: 700; font-size: 15px; } .bloque-efectivo .vuelto-linea.negativo span:last-child { color: var(--peligro); } .bloque-efectivo .redondeo-nota { font-size: 11px; color: var(--texto-tenue); margin-top: 6px; } .teclado-numerico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; } .teclado-numerico button { padding: 12px 0; border-radius: 12px; border: none; background: var(--superficie); box-shadow: var(--sombra); font-weight: 700; font-size: 16px; cursor: pointer; color: var(--texto); transition: transform .1s var(--resorte); } .teclado-numerico button:active { transform: scale(.92); } .teclado-numerico button.tecla-borrar { color: var(--peligro); font-size: 13px; } .carrito-totales { padding: 15px 20px; border-top: 1px solid var(--borde); font-size: 13.5px; flex-shrink: 0; } .fila-total { display: flex; justify-content: space-between; padding: 4px 0; color: var(--texto-tenue); } .fila-total.grande { font-size: 20px; font-weight: 800; color: var(--texto); padding-top: 10px; letter-spacing: -0.02em; } .carrito-totales.horizontal { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: flex-start; } .carrito-totales.horizontal .fila-total { flex-direction: column; padding: 0; gap: 2px; min-width: 90px; } .carrito-totales.horizontal .fila-total span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; } .carrito-totales.horizontal .fila-total span:last-child { font-size: 14px; font-weight: 700; color: var(--texto); } .carrito-totales.horizontal .fila-total.grande { padding-top: 0; } .carrito-totales.horizontal .fila-total.grande span:last-child { font-size: 21px; } /* ---------- Calculadora rápida flotante ---------- */ .calculadora-flotante { position: fixed; bottom: 90px; right: 24px; width: 260px; padding: 16px; background: var(--fondo); border-radius: var(--radio-md); z-index: 60; box-shadow: inset 0 0 0 1px var(--borde), 0 14px 34px rgba(0,0,0,.2); } .calculadora-flotante.oculto { display: none; } .calculadora-flotante-header { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue); margin-bottom: 10px; } .calculadora-cerrar { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--texto-tenue); line-height: 1; padding: 2px 6px; } .calculadora-cerrar:hover { color: var(--peligro); } .carrito-acciones { padding: 16px 20px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } .metodos-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .metodo-pago-btn { padding: 11px; border-radius: var(--radio-sm); border: none; background: rgba(var(--fondo-rgb), .7); box-shadow: inset 0 0 0 1.5px var(--borde); cursor: pointer; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; justify-content: center; transition: all .15s var(--suave); color: var(--texto-tenue); } .metodo-pago-btn.activo { background: var(--primario); color: #fff; box-shadow: 0 4px 12px rgba(var(--primario-rgb),.3); } .alerta-turno { background: var(--advertencia-claro); box-shadow: inset 0 0 0 1.5px rgba(var(--advertencia-rgb),.35); color: var(--advertencia); padding: 15px 20px; border-radius: var(--radio); margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; } /* ============================================================ TABLAS (Inventario / Usuarios / Reportes) ============================================================ */ .tabla-wrap { overflow-x: auto; } table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.tabla th { text-align: left; padding: 11px 14px; color: var(--texto-tenue); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--borde); } table.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); } table.tabla tr:last-child td { border-bottom: none; } table.tabla tr:hover td { background: rgba(var(--primario-rgb), .035); } .fila-stock-bajo td:first-child { box-shadow: inset 3px 0 0 var(--peligro); } .badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--radio-pill); font-size: 11.5px; font-weight: 700; } .badge-exito { background: var(--exito-claro); color: var(--exito); } .badge-peligro { background: var(--peligro-claro); color: var(--peligro); } .badge-advertencia { background: var(--advertencia-claro); color: var(--advertencia); } .badge-neutro { background: rgba(var(--fondo-rgb), .8); color: var(--texto-tenue); box-shadow: inset 0 0 0 1px var(--borde); } .badge-info { background: rgba(var(--primario-rgb), .12); color: var(--primario); } .barra-encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; } .barra-encabezado .buscador { min-width: 240px; } /* ============================================================ DASHBOARD ============================================================ */ .grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; } .kpi { display: flex; align-items: center; gap: 14px; } .kpi .icono { font-size: 24px; width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--primario-claro); } .kpi .valor { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .kpi .etiqueta { font-size: 12.5px; color: var(--texto-tenue); font-weight: 500; } .kpi-tendencia { font-size: 11.5px; font-weight: 700; margin-top: 2px; } .kpi-tendencia.positiva { color: var(--exito); } .kpi-tendencia.negativa { color: var(--peligro); } .dash-pago-fila, .dash-vendedor-fila { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borde); } .dash-pago-fila:last-child, .dash-vendedor-fila:last-child { border-bottom: none; } .dash-vendedor-fila .rango { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primario-claro); font-size: 11px; font-weight: 800; margin-right: 8px; } .grid-dashboard { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; } .grafico-barras { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding-top: 20px; } .grafico-barras .barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } .grafico-barras .barra { width: 100%; max-width: 40px; background: linear-gradient(180deg, var(--primario), var(--secundario)); border-radius: 10px 10px 3px 3px; transition: height .5s var(--resorte); } .grafico-barras .barra-etiqueta { font-size: 11px; color: var(--texto-tenue); font-weight: 600; } .grafico-barras .barra-valor { font-size: 10.5px; font-weight: 700; } .top-producto-fila { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--borde); } .top-producto-fila:last-child { border-bottom: none; } .top-producto-fila .rango { width: 26px; height: 26px; border-radius: 50%; background: var(--primario-claro); color: var(--primario); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; } .top-producto-fila .nombre { flex: 1; font-size: 13px; font-weight: 600; } .top-producto-fila .cantidad { font-size: 12px; color: var(--texto-tenue); font-weight: 500; } /* ============================================================ MODALES (estilo hoja/sheet) ============================================================ */ .modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; animation: fondoAparece .2s var(--suave); } @keyframes fondoAparece { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--superficie); border-radius: 26px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sombra-flotante); animation: modalAparece .3s var(--resorte); } .modal.modal-ancho { max-width: 640px; } @keyframes modalAparece { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--borde); } .modal-header h3 { font-size: 17px; } .modal-cerrar { background: rgba(var(--fondo-rgb),.9); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; cursor: pointer; color: var(--texto-tenue); } .modal-cuerpo { padding: 22px 24px; } .modal-pie { padding: 16px 24px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 10px; } /* ---------- Ticket ---------- */ .ticket { font-family: 'SF Mono', 'Courier New', monospace; font-size: 12.5px; line-height: 1.5; } .ticket hr { border: none; border-top: 1px dashed rgba(60,60,67,.35); margin: 10px 0; } .ticket .centrado { text-align: center; } .ticket .fila { display: flex; justify-content: space-between; gap: 8px; } .ticket .fila.total { font-weight: 700; font-size: 14px; } /* ============================================================ TOASTS ============================================================ */ #toasts { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { background: rgba(28,28,30,.88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; padding: 13px 18px; border-radius: 16px; box-shadow: var(--sombra-flotante); font-size: 13.5px; font-weight: 500; min-width: 240px; animation: toastEntra .3s var(--resorte); } .toast.exito { background: rgba(52,199,89,.92); } .toast.error { background: rgba(255,59,48,.92); } .toast.info { background: rgba(10,132,255,.92); } @keyframes toastEntra { from { opacity: 0; transform: translateX(24px) scale(.95); } to { opacity: 1; transform: none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1000px) { .pos-layout { grid-template-columns: 1fr; } .panel-carrito { position: static; height: auto; max-height: none; } .carrito-tabla-wrap { flex: none; max-height: 50vh; } .panel-lateral-pos { position: static; height: auto; max-height: none; } .grid-dashboard { grid-template-columns: 1fr; } } @media (max-width: 780px) { .barra-lateral { position: fixed; left: -260px; top: 0; z-index: 50; transition: left .25s var(--resorte); box-shadow: var(--sombra-flotante); } .barra-lateral.abierta { left: 0; } .menu-hamburguesa { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(var(--primario-rgb),.09); color: var(--primario); cursor: pointer; font-size: 17px; } .topbar { padding: 10px 14px; } .topbar h2 { font-size: 15px; white-space: nowrap; } .topbar-usuario .info { display: none; } .vista { padding: 16px; } .grid-productos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .campo-fila { flex-direction: column; gap: 0; } .metodos-pago { grid-template-columns: 1fr 1fr; } table.tabla-carrito { font-size: 11.5px; } table.tabla-carrito td, table.tabla-carrito th { padding: 7px 5px; } }