/* =========================================================== Bisutería POS — Lenguaje visual (no plano) Tema: Rosado Boutique (dama) — claro, femenino, rosa fucsia + dorado Paleta gobernada por IST Core · Design Studio (estilo "rosado-boutique"). Layout POS inspirado en Cuenti (sidebar de color + grilla + panel de venta). =========================================================== */ :root { /* Superficies claras (neutros TEÑIDOS de rosa, nunca gris puro) */ --bg: #fdf4f8; /* fondo crema-rosa */ --bg-2: #fbe9f1; --surface: #ffffff; /* tarjetas / paneles */ --surface-2: #fef4f8; /* inputs / superficies suaves */ --placeholder:#f7dfe9; /* foto ausente */ /* Marca: rosa fucsia + dorado */ --rose: #e0518f; /* primario */ --rose-fuerte:#c93b78; --rose-suave: #f28fb4; --rose-oro: #e79ab8; --oro: #c99a3a; /* acento dorado */ --oro-claro: #dcb659; /* Texto (casi-negro cálido teñido, no #000) */ --texto: #2c1622; --texto-2: #7c5568; --texto-3: #b48aa0; /* Sidebar de color (eco del sidebar Cuenti, en rosa boutique) */ --side-1: #bf3571; /* tramo claro del degradado, apenas más hondo: cruza AA (4.51:1) con --side-txt-2 */ --side-2: #7d2d54; --side-txt: #fbe7f0; --side-txt-2:#fae8f1; /* 4.66:1 sobre el tramo oscuro del sidebar (era #e6b9cf = 2.84:1, fallaba WCAG AA) */ /* Estado */ --verde: #1f9d63; --rojo: #d83f66; /* Bordes y profundidad (sombra teñida en rosa) */ --borde: rgba(201,59,120,0.16); --borde-2: rgba(201,59,120,0.28); --sombra: 0 12px 30px rgba(201,59,120,0.14), 0 4px 10px rgba(201,59,120,0.08); --sombra-sm:0 4px 14px rgba(201,59,120,0.10); --radio: 18px; --serif: "Georgia", "Times New Roman", serif; --sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --grad: linear-gradient(135deg, var(--rose) 0%, var(--rose-suave) 55%, var(--oro-claro) 100%); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--sans); color: var(--texto); background: radial-gradient(1200px 600px at 82% -10%, rgba(224,81,143,0.10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(201,154,58,0.10), transparent 60%), var(--bg); -webkit-font-smoothing: antialiased; } /* Marca de agua temática (patrón de Sara Milagros). En el POS NO va a página completa como en la tienda: aquí se trabaja, se leen cifras y se cuadra caja, así que el motivo se queda en una esquina y muy tenue. Va en el y no en .contenido para que no scrollee con la tabla. */ body::after { content: ""; position: fixed; right: -60px; bottom: -50px; width: 460px; height: 460px; /* Encuadre a la IZQUIERDA de la foto, donde están las rosas: recortada en círculo, la paleta de sombras leía como un teclado. Un motivo temático que no se reconoce no cumple su función; las rosas sí se leen aunque estén al 10%. */ background: url("assets/fondos/tocador.jpg") 22% 45% / cover no-repeat; border-radius: 50%; opacity: .10; pointer-events: none; z-index: 0; mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); } /* z-index 1: por encima de la marca de agua del body, o los clics se irían a la nada. */ #app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; position: relative; z-index: 1; } /* Respaldo rosa que llena TODA la altura de la columna del menú (aunque la página sea más alta que la pantalla). La navegación (.sidebar) queda pegada arriba encima de este fondo. */ #app::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 260px; z-index: 0; background: linear-gradient(180deg, var(--side-1), var(--side-2)); } /* ---------- Sidebar (color, tipo Cuenti pero rosa) ---------- */ .sidebar { background: linear-gradient(180deg, var(--side-1), var(--side-2)); border-right: 1px solid rgba(255,255,255,0.06); padding: 22px 16px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; z-index: 1; box-shadow: 4px 0 24px rgba(125,45,84,0.18); } .marca { display: flex; align-items: center; gap: 12px; padding: 6px 8px 20px; } .marca-icono { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; border-radius: 13px; background: linear-gradient(135deg, #ffffff, #ffe1ee); color: var(--rose-fuerte); box-shadow: 0 6px 16px rgba(0,0,0,0.18); } .marca-nombre { font-family: var(--serif); font-size: 20px; letter-spacing: .3px; color: #fff; } /* Logotipo real del cliente. En la barra lateral (ciruela) va la versión BLANCA: el original es negro y sobre ese fondo no se lee — comprobado con una prueba de contacto. */ .marca-logo { display: block; width: 150px; height: auto; margin-bottom: 8px; } .marca-sub { font-size: 11px; color: var(--side-txt-2); text-transform: uppercase; letter-spacing: 2px; } .nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .nav-item { display: flex; align-items: center; gap: 12px; background: transparent; border: 0; color: var(--side-txt-2); font-size: 14.5px; text-align: left; padding: 11px 14px; border-radius: 12px; cursor: pointer; transition: all .18s ease; font-family: var(--sans); } .nav-item span { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; opacity: .9; flex: 0 0 auto; } .nav-item span svg { width: 21px; height: 21px; } .nav-item.activo span, .nav-item:hover span { opacity: 1; } #logoutBtn span svg { width: 20px; height: 20px; } .marca-icono svg { width: 27px; height: 27px; } .nav-item:hover:not(.deshab) { background: rgba(255,255,255,0.10); color: #fff; } .nav-item.activo { background: rgba(255,255,255,0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); } .nav-item.deshab { opacity: .4; cursor: not-allowed; } .nav-sep { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--side-txt-2); opacity: .7; padding: 16px 14px 6px; } /* ---------- Menú desplegable por grupos (acordeón) ---------- */ .nav-grupo { display: flex; flex-direction: column; } .nav-grupo-h { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; color: var(--side-txt-2); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 14px 14px 8px; cursor: pointer; font-family: var(--sans); width: 100%; transition: color .15s ease; } .nav-grupo-h:hover { color: #fff; } .nav-grupo-h .gi { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: .85; flex: 0 0 auto; } .nav-grupo-h .gi svg { width: 16px; height: 16px; } .nav-grupo-h .chev { margin-left: auto; width: 16px; height: 16px; display: inline-flex; transition: transform .2s ease; opacity: .7; } .nav-grupo-h .chev svg { width: 15px; height: 15px; } .nav-grupo.abierto .nav-grupo-h .chev { transform: rotate(90deg); } .nav-grupo-items { display: flex; flex-direction: column; gap: 4px; overflow: hidden; max-height: 0; transition: max-height .25s ease; } .nav-grupo.abierto .nav-grupo-items { max-height: 360px; } /* ---------- Escritorio: scroll independiente (el menú scrollea solo, no la página) ---------- */ @media (min-width: 821px) { body { overflow: hidden; } #app { height: 100vh; } .sidebar { overflow-y: auto; } .contenido { height: 100vh; overflow-y: auto; } .topbar { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; } .contenido::-webkit-scrollbar { width: 9px; } .contenido::-webkit-scrollbar-thumb { background: var(--borde-2); border-radius: 5px; } } .ia-estado { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--side-txt-2); padding: 10px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(255,255,255,0.06); } .ia-estado .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--side-txt-2); box-shadow: 0 0 8px currentColor; } .ia-estado.ok .punto { background: #6ff0b0; color: #6ff0b0; } .ia-estado.off .punto { background: #ff9db3; color: #ff9db3; } /* ---------- Contenido ---------- */ .contenido { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 26px 34px 18px; gap: 16px; } .topbar h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: .3px; color: var(--rose-fuerte); } .topbar-acciones { display: flex; gap: 10px; align-items: center; } .vista { padding: 6px 34px 48px; } /* ---------- Botones ---------- */ .btn { border: 0; cursor: pointer; font-family: var(--sans); font-size: 14px; padding: 10px 18px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--rose), var(--rose-fuerte)); font-weight: 600; box-shadow: 0 6px 16px rgba(201,59,120,0.30); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(201,59,120,0.38); filter: brightness(1.04); } .btn:active { transform: translateY(0); } .btn.sec { background: var(--surface); color: var(--rose-fuerte); box-shadow: var(--sombra-sm); border: 1px solid var(--borde-2); } .btn.sec:hover { background: var(--surface-2); } .btn.ia { background: linear-gradient(135deg, rgba(224,81,143,0.12), rgba(201,154,58,0.14)); color: var(--rose-fuerte); border: 1px solid var(--borde-2); box-shadow: none; font-weight: 600; } .btn.ia::before { content: "✦ "; color: var(--oro); } .btn.peligro { background: linear-gradient(135deg, #ec7d97, var(--rojo)); box-shadow: none; color:#fff; } .btn.mini { padding: 7px 12px; font-size: 12.5px; } /* ---------- Buscador ---------- */ .buscador { position: relative; } .buscador input { width: 320px; max-width: 42vw; padding: 11px 14px 11px 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--borde-2); color: var(--texto); font-size: 14px; box-shadow: var(--sombra-sm); } .buscador::before { content: "⌕"; position: absolute; left: 13px; top: 9px; color: var(--rose); font-size: 16px; } input, select, textarea { outline: none; } input::placeholder, textarea::placeholder { color: var(--texto-3); } input:focus, select:focus, textarea:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(224,81,143,0.14); } /* ---------- Grid de catálogo ---------- */ .grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .card { background: var(--surface); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; /* columna: deja que el cuerpo estire y los precios queden anclados abajo */ display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(201,59,120,0.20); } .card-foto { aspect-ratio: 1/1; position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(150deg, #fbe0ec, #f3c7dd); } /* Variedad de gradiente por tarjeta para que las fichas sin foto no se vean planas */ .grid-productos > .card:nth-child(4n+2) .card-foto { background: linear-gradient(150deg, #f7e6f0, #e9cbe4); } .grid-productos > .card:nth-child(4n+3) .card-foto { background: linear-gradient(150deg, #fde6dc, #f6cdcf); } .grid-productos > .card:nth-child(4n+4) .card-foto { background: linear-gradient(150deg, #efe4f7, #dccdf0); } .card-foto::after { /* brillo diagonal sutil */ content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.55), transparent 55%); pointer-events: none; } .card-foto img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .card-foto .sinfoto { position: relative; z-index: 1; width: 62%; height: 62%; display: grid; place-items: center; filter: drop-shadow(0 6px 12px rgba(201,59,120,.32)); } .card-foto .sinfoto svg.ico-acc { width: 100%; height: 100%; opacity: .97; } /* Foto libre-de-derechos por categoría, encima del respaldo SVG (si falla, se quita y queda el SVG) */ .card-foto .foto-cat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .card-badge, .card-stock { z-index: 2; } /* Miniatura de categoría en la lista de categorías */ .cat-thumb { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex: 0 0 auto; box-shadow: var(--sombra-sm); border: 1px solid var(--borde); } /* En móvil, inputs a 16px para que iOS no haga zoom al enfocar (evita el bug del teclado) */ @media (max-width: 820px) { input, select, textarea { font-size: 16px; } } .card-badge { position: absolute; top: 10px; left: 10px; font-size: 11px; padding: 4px 9px; border-radius: 20px; background: rgba(255,255,255,0.9); color: var(--rose-fuerte); backdrop-filter: blur(4px); font-weight: 600; box-shadow: 0 2px 6px rgba(201,59,120,0.16); } .card-stock { position: absolute; top: 10px; right: 10px; font-size: 11px; padding: 4px 9px; border-radius: 20px; background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.10); } .card-stock.bajo { color: var(--rojo); } .card-stock.ok { color: var(--verde); } .card-cuerpo { padding: 13px 15px 16px; flex: 1; display: flex; flex-direction: column; } /* El nombre reserva SIEMPRE 2 líneas: así el SKU y los precios quedan a la misma altura en toda la cuadrícula, en vez de escalonarse según el largo del nombre. */ .card-nombre { font-size: 15px; font-weight: 600; margin-bottom: 3px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-cat { font-size: 11.5px; color: var(--texto-3); margin-bottom: 10px; } .card-precios { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; } .precio-chip { font-size: 12px; padding: 4px 8px; border-radius: 8px; background: rgba(224,81,143,0.08); border: 1px solid var(--borde); } .precio-chip b { color: var(--rose-fuerte); font-weight: 700; } /* ---------- Chips de categoría (filtro POS, tipo Cuenti) ---------- */ .cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .cat-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borde-2); background: var(--surface); color: var(--texto-2); font-size: 13px; cursor: pointer; transition: all .15s ease; font-family: var(--sans); } .cat-chip:hover { background: var(--surface-2); color: var(--rose-fuerte); } .cat-chip.activo { background: linear-gradient(135deg, var(--rose), var(--rose-fuerte)); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(201,59,120,0.28); } /* ---------- Paneles / formularios ---------- */ .panel { background: var(--surface); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra); max-width: 920px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; } .campo { display: flex; flex-direction: column; gap: 6px; } .campo.full { grid-column: 1 / -1; } .campo label { font-size: 12.5px; color: var(--texto-2); letter-spacing: .3px; font-weight: 500; } .campo label small { color: var(--texto-3); } .campo input, .campo select, .campo textarea { padding: 11px 13px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--borde-2); color: var(--texto); font-size: 14px; font-family: var(--sans); } .campo textarea { resize: vertical; min-height: 74px; } .fila-label { display: flex; justify-content: space-between; align-items: center; } .fila-label .btn.ia { padding: 3px 9px; font-size: 11.5px; } .seccion-titulo { font-family: var(--serif); font-size: 17px; margin: 26px 0 4px; color: var(--rose-fuerte); grid-column: 1 / -1; border-top: 1px solid var(--borde); padding-top: 20px; } .seccion-titulo:first-child { border-top: 0; padding-top: 0; margin-top: 0; } /* Imágenes */ .dropzone { border: 1.5px dashed var(--borde-2); border-radius: 12px; aspect-ratio: 1/1; display: grid; place-items: center; cursor: pointer; position: relative; overflow: hidden; background: var(--surface-2); transition: border-color .2s; } .dropzone:hover { border-color: var(--rose); } .dropzone img { width: 100%; height: 100%; object-fit: cover; } .dropzone .ph { color: var(--texto-3); font-size: 12px; text-align: center; padding: 8px; } .galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .galeria .dropzone { aspect-ratio: 1/1; } .portada-wrap { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: start; } .acciones-form { display: flex; gap: 12px; margin-top: 26px; } /* Categorías */ .arbol { display: flex; flex-direction: column; gap: 6px; } .cat-nodo { padding: 4px 0; } .cat-fila { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px; background: var(--surface); border: 1px solid var(--borde); box-shadow: var(--sombra-sm); } .cat-fila .nombre { font-size: 14.5px; } .cat-hijos { margin-left: 26px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--borde-2); padding-left: 14px; } .cat-acciones { margin-left: auto; display: flex; gap: 6px; } /* Búsqueda IA / reportes */ .ia-caja { display: flex; gap: 10px; margin-bottom: 22px; max-width: 720px; } .ia-caja input { flex: 1; padding: 13px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--borde-2); color: var(--texto); font-size: 15px; box-shadow: var(--sombra-sm); } .respuesta-ia { background: linear-gradient(135deg, rgba(224,81,143,0.06), rgba(201,154,58,0.06)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; max-width: 720px; line-height: 1.6; white-space: pre-wrap; } .respuesta-ia .marca-ia { color: var(--oro); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } /* Estados */ .vacio { text-align: center; padding: 70px 20px; color: var(--texto-3); } .vacio .icono { font-size: 46px; margin-bottom: 14px; font-family: var(--serif); color: var(--rose-suave); } .cargando { color: var(--texto-3); padding: 30px; text-align: center; } /* Toast */ .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface); border: 1px solid var(--borde-2); color: var(--texto); padding: 13px 22px; border-radius: 12px; box-shadow: var(--sombra); opacity: 0; transition: all .3s ease; pointer-events: none; z-index: 100; font-size: 14px; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.ok { border-color: var(--verde); } .toast.err { border-color: var(--rojo); } /* ---------- POS ---------- */ .pos { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; } .pos-productos .grid-productos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .pos-card { cursor: pointer; } .pos-card .card-cuerpo { padding: 10px 12px 12px; } .pos-card .card-nombre { font-size: 13.5px; } .scan { display: flex; gap: 10px; margin-bottom: 16px; } .scan input { flex: 1; padding: 13px 16px 13px 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--borde-2); color: var(--texto); font-size: 15px; box-shadow: var(--sombra-sm); background-image: none; } .scan { position: relative; } .scan::before { content: "⌕"; position: absolute; left: 15px; top: 12px; color: var(--rose); font-size: 18px; z-index: 1; } .carrito { position: sticky; top: 20px; background: var(--surface); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); display: flex; flex-direction: column; max-height: calc(100vh - 40px); } .carrito-head { padding: 16px 18px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; } .carrito-head h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--rose-fuerte); } .carrito-nivel { font-size: 11px; color: var(--oro); font-weight: 600; } .carrito-items { flex: 1; overflow-y: auto; padding: 8px 10px; min-height: 80px; } .ci { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-bottom: 1px solid var(--borde); } .ci-nombre { flex: 1; font-size: 13.5px; } .ci-precio { font-size: 12.5px; color: var(--texto-2); } .ci-cant { display: flex; align-items: center; gap: 6px; } .ci-cant button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--borde-2); background: var(--surface-2); color: var(--rose-fuerte); cursor: pointer; font-size: 14px; font-weight: 700; } .ci-cant button:hover { background: var(--rose); color: #fff; border-color: transparent; } .ci-cant span { min-width: 20px; text-align: center; font-size: 13px; } .ci-sub { min-width: 62px; text-align: right; font-size: 13px; font-weight: 600; } .ci-x { color: var(--rojo); cursor: pointer; padding: 0 4px; } .carrito-vacio { color: var(--texto-3); text-align: center; padding: 30px 12px; font-size: 13px; } .carrito-pie { padding: 14px 18px 18px; border-top: 1px solid var(--borde); background: var(--surface-2); border-radius: 0 0 var(--radio) var(--radio); } .carrito-pie .campo { margin-bottom: 10px; } .linea-total { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--texto-2); margin: 4px 0; } .linea-total.grande { font-size: 22px; color: var(--texto); font-weight: 700; margin: 10px 0 4px; } .linea-total.grande b { color: var(--rose-fuerte); } .pagos { display: flex; gap: 6px; margin: 10px 0; } /* Acción primaria de cobro: 44px SIEMPRE (medía 81x34, bajo el mínimo táctil). */ .pago-btn { flex: 1; min-height: 44px; padding: 9px 4px; border-radius: 9px; border: 1px solid var(--borde-2); background: var(--surface); color: var(--texto-2); cursor: pointer; font-size: 12px; transition: all .15s ease; } .pago-btn:hover { border-color: var(--rose); color: var(--rose-fuerte); } .pago-btn.sel { background: linear-gradient(135deg, var(--rose), var(--rose-fuerte)); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(201,59,120,0.28); } .btn-cobrar { width: 100%; font-size: 16px; padding: 15px; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 10px; } .btn-cobrar b { font-weight: 800; } /* ---------- Caja / stats ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 16px; margin-bottom: 24px; max-width: 820px; } .stat { background: var(--surface); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra-sm); } .stat .etq { font-size: 11.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 1px; } .stat .val { font-size: 26px; font-family: var(--serif); margin-top: 6px; } .stat .val.oro { color: var(--oro); } .stat .val.verde { color: var(--verde); } .stat .val.rojo { color: var(--rojo); } .tabla { width: 100%; border-collapse: collapse; } .tabla th { text-align: left; font-size: 11.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 1px; padding: 10px 12px; border-bottom: 1px solid var(--borde-2); } .tabla td { padding: 11px 12px; border-bottom: 1px solid var(--borde); font-size: 14px; } .tabla tr:hover td { background: var(--surface-2); } .fila-click { cursor: pointer; } .fila-click:active td { background: color-mix(in srgb, var(--rose) 10%, var(--surface-2)); } .pill { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; } .pill.ingreso { background: rgba(31,157,99,0.14); color: var(--verde); } .pill.egreso { background: rgba(216,63,102,0.14); color: var(--rojo); } .pill.pagada { background: rgba(31,157,99,0.14); color: var(--verde); } .pill.credito { background: rgba(201,154,58,0.16); color: var(--oro); } .pill.anulada { background: rgba(180,138,160,0.2); color: var(--texto-3); } /* Modal */ .modal-fondo { position: fixed; inset: 0; background: rgba(44,22,34,0.5); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 90; padding: 16px; overflow-y: auto; } .modal { width: min(520px, 92vw); } .modal.con-cerrar { position: relative; } .modal-cerrar { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--borde-2); background: var(--surface-2); color: var(--rose-fuerte); font-size: 15px; cursor: pointer; line-height: 1; display: grid; place-items: center; z-index: 3; transition: all .15s ease; } .modal-cerrar:hover { background: var(--rose); color: #fff; border-color: transparent; } /* ---------- Ticket / Factura imprimible ---------- */ .ticket { background: #fff; color: #1a1420; width: 300px; margin: 0 auto; padding: 18px 16px; font-family: "Courier New", monospace; font-size: 12.5px; line-height: 1.5; border-radius: 8px; } .ticket h2 { font-family: var(--serif); text-align: center; font-size: 18px; margin-bottom: 2px; } .ticket .cxt { text-align: center; color: #555; font-size: 11px; margin-bottom: 10px; } .ticket hr { border: 0; border-top: 1px dashed #999; margin: 8px 0; } .ticket table { width: 100%; border-collapse: collapse; } .ticket td { padding: 2px 0; vertical-align: top; } .ticket .r { text-align: right; } .ticket .tot { font-size: 15px; font-weight: bold; } .ticket .pie { text-align: center; margin-top: 12px; font-size: 11px; color: #555; } .ticket .anulada-sello { text-align: center; color: #b00; border: 2px solid #b00; border-radius: 6px; padding: 4px; margin: 8px 0; font-weight: bold; } /* ---------- Login ---------- */ .login-fondo { position: fixed; inset: 0; z-index: 200; background: radial-gradient(1000px 500px at 50% 0%, rgba(224,81,143,0.14), transparent 60%), var(--bg); /* La puerta de entrada tapa la marca de agua del (va en z-index 200), así que lleva la suya: es la primera pantalla del día y merece el ambiente del negocio. */ /* Alineado arriba + desplazable: en iOS el teclado NO empuja los position:fixed, así el campo nunca queda escondido detrás del teclado. */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10vh 20px calc(40px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .login-fondo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("assets/fondos/tocador.jpg") center / cover no-repeat; opacity: .18; } .login-caja { width: min(380px, 90vw); text-align: center; position: relative; z-index: 1; } .login-caja .marca-icono { width: 60px; height: 60px; font-size: 30px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--rose), var(--rose-fuerte)); color: #fff; box-shadow: 0 10px 24px rgba(201,59,120,0.3); } .login-caja h1 { font-family: var(--serif); font-weight: 600; margin-bottom: 6px; color: var(--rose-fuerte); } /* Logotipo del cliente en la puerta de entrada (fondo claro → versión de tinta negra). */ .login-caja .login-logo { display: block; width: min(220px, 62%); height: auto; margin: 0 auto 18px; } /* Oculto a la vista pero presente para lectores de pantalla. */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .login-caja p { color: var(--texto-3); font-size: 13px; margin-bottom: 22px; } .login-caja input { width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--borde-2); color: var(--texto); font-size: 16px; margin-bottom: 14px; box-shadow: var(--sombra-sm); position: relative; z-index: 2; touch-action: manipulation; } .login-caja .btn { width: 100%; padding: 13px; } @media print { body { background: #fff; } #app, .modal-fondo > *:not(.ticket-print) { display: none !important; } .ticket-print { position: static !important; box-shadow: none; } .ticket-print .ticket { width: 100%; } .no-print, .modal-cerrar { display: none !important; } /* botones/selector no se imprimen */ .modal-fondo { position: static; background: #fff; display: block; backdrop-filter: none; } } /* ---------- Elementos móviles (ocultos en escritorio) ---------- */ .hamburguesa, .bottomnav, .drawer-backdrop { display: none; } /* =========================================================== RESPONSIVO / APP MÓVIL =========================================================== */ @media (max-width: 960px) { .pos { grid-template-columns: 1fr; } .carrito { position: static; max-height: none; } } @media (max-width: 820px) { #app { grid-template-columns: 1fr; } #app::before { display: none; } /* en móvil el menú es drawer, no columna fija */ /* Sidebar = drawer deslizante (off-canvas) */ .sidebar { position: fixed; top: 0; left: 0; z-index: 150; width: min(82vw, 320px); height: 100dvh; overflow-y: auto; transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); padding-top: max(22px, env(safe-area-inset-top)); } .sidebar.abierto { transform: translateX(0); box-shadow: 0 0 60px rgba(125,45,84,.5); } .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 140; background: rgba(44,22,34,.5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .28s; } .drawer-backdrop.abierto { opacity: 1; pointer-events: auto; } /* Topbar app: hamburguesa + título, pegada arriba */ .hamburguesa { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--borde-2); border-radius: 12px; background: var(--surface); color: var(--rose-fuerte); font-size: 20px; cursor: pointer; box-shadow: var(--sombra-sm); flex: 0 0 auto; } .topbar { position: sticky; top: 0; z-index: 60; padding: max(14px, env(safe-area-inset-top)) 16px 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); gap: 12px; } .topbar h1 { font-size: 22px; flex: 1; } .topbar-acciones { flex-wrap: wrap; justify-content: flex-end; } .vista { padding: 8px 16px calc(84px + env(safe-area-inset-bottom)); } /* Barra inferior de pestañas (tipo app) */ .bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px rgba(201,59,120,.10); } .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; background: none; border: 0; cursor: pointer; color: var(--texto-3); font-size: 10.5px; font-family: var(--sans); min-height: 54px; } .bn-item span { font-size: 20px; line-height: 1; display: inline-flex; } .bn-item span svg { width: 23px; height: 23px; } .bn-item.activo { color: var(--rose-fuerte); } .bn-item.activo span { filter: drop-shadow(0 3px 6px rgba(201,59,120,.4)); } /* Catálogo/POS: cuadrícula táctil de 2 columnas */ .grid-productos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .pos-productos .grid-productos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .pos { gap: 16px; } .carrito { position: static; } /* Formularios y anchos a una columna */ .form-grid, .portada-wrap { grid-template-columns: 1fr; } .panel { padding: 20px; } .buscador input { width: 100%; max-width: none; } /* Tablas: scroll horizontal propio (no rompe el ancho de la página) */ .tabla { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } /* Objetivos táctiles cómodos */ .btn { min-height: 44px; } .nav-item { padding: 13px 14px; } } /* Cualquier pantalla TÁCTIL, no solo las angostas: la tablet de mostrador es ancha y se saltaba el bloque de arriba, que va por max-width. */ @media (pointer: coarse) { .btn, .btn.mini, .cat-chip, .nav-grupo-h, .precio-chip { min-height: 44px; } .btn.mini, .cat-chip { display: inline-flex; align-items: center; } .card-precios { gap: 8px; } /* separación mínima entre objetivos táctiles */ } /* Teléfonos angostos: cuadrícula de 2 columnas garantizada */ @media (max-width: 400px) { .grid-productos, .pos-productos .grid-productos { grid-template-columns: 1fr 1fr; } .precio-chip { font-size: 11px; padding: 3px 6px; } } @media (prefers-reduced-motion: reduce) { .btn, .card, .cat-chip, .pago-btn, .toast, .sidebar, .drawer-backdrop { transition: none; } .btn:hover, .card:hover { transform: none; } } /* =========================================================== POS MÓVIL — carrito como hoja deslizable + barra flotante =========================================================== */ .pos-fab, .pos-sheet-bg, .carrito-cerrar { display: none; } @media (max-width: 820px) { /* Grilla de productos a pantalla completa; el carrito ya NO se apila abajo */ .pos { padding-bottom: 20px; } .pos-productos { padding-bottom: 64px; } /* Carrito = hoja deslizable (bottom sheet) */ .carrito { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; max-width: none; max-height: 88dvh; border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -16px 44px rgba(201,59,120,.28); } .carrito.abierto { transform: translateY(0); } .carrito-head { position: relative; } .carrito-cerrar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--borde-2); background: var(--surface-2); color: var(--rose-fuerte); font-size: 14px; cursor: pointer; } .pos-sheet-bg { display: block; position: fixed; inset: 0; z-index: 128; background: rgba(44,22,34,.5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s; } .pos-sheet-bg.abierto { opacity: 1; pointer-events: auto; } /* Barra flotante: abre el carrito, muestra ítems y total */ .pos-fab { display: flex; align-items: center; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 118; padding: 12px 16px; border: 0; border-radius: 14px; cursor: pointer; font-family: var(--sans); color: #fff; background: linear-gradient(135deg, var(--rose), var(--rose-fuerte)); box-shadow: 0 10px 26px rgba(201,59,120,.4); } .pos-fab .pf-ico { width: 22px; height: 22px; display: inline-flex; flex: 0 0 auto; } .pos-fab .pf-ico svg { width: 22px; height: 22px; } .pos-fab .pf-txt { font-size: 13px; opacity: .95; } .pos-fab .pf-tot { font-weight: 800; font-size: 16px; margin-left: 2px; } .pos-fab .pf-cta { margin-left: auto; font-weight: 700; font-size: 13.5px; } } /* ---------- Asistente / chat ---------- */ .chat-wrap { max-width: 720px; } .chat-msgs { height: min(58vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 12px; } .chat-b { max-width: 80%; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; box-shadow: var(--sombra-sm); } .chat-b.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--borde); border-bottom-left-radius: 5px; } .chat-b.yo { align-self: flex-end; background: linear-gradient(135deg, var(--rose), var(--rose-fuerte)); color: #fff; border-bottom-right-radius: 5px; } .chat-sug { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; } .chat-input { display: flex; gap: 8px; } .chat-input input { flex: 1; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--borde-2); background: var(--surface); font-size: 16px; box-shadow: var(--sombra-sm); } /* ---------- Botón flotante del Asistente ---------- */ .fab-chat { position: fixed; right: 20px; bottom: 22px; z-index: 80; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--rose), var(--rose-fuerte)); box-shadow: 0 12px 28px rgba(201,59,120,.45); transition: transform .18s ease; } .fab-chat:hover { transform: translateY(-2px) scale(1.05); } .fab-chat svg { width: 26px; height: 26px; } @media (max-width: 820px) { .fab-chat { bottom: calc(70px + env(safe-area-inset-bottom)); right: 16px; width: 52px; height: 52px; } } /* ---------- Impresión de informes ---------- */ @media print { body.print-informe #app { display: block !important; } body.print-informe .sidebar, body.print-informe .bottomnav, body.print-informe .fab-chat, body.print-informe .hamburguesa, body.print-informe .topbar-acciones, body.print-informe .no-print { display: none !important; } body.print-informe #app { grid-template-columns: 1fr; height: auto; } body.print-informe #app::before { display: none; } body.print-informe .contenido { height: auto; overflow: visible; } body.print-informe .panel { box-shadow: none; border: 1px solid #ddd; } } /* ---------- Escritorio: POS con carrito fijo, solo scrollean los productos ---------- */ @media (min-width: 821px) { .pos { height: calc(100vh - 130px); align-items: stretch; overflow: hidden; } .pos-productos { overflow-y: auto; min-height: 0; padding-right: 6px; } .pos-productos .scan { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-bottom: 10px; margin-bottom: 6px; } .carrito { position: static; height: 100%; max-height: none; min-height: 0; } } /* ---- MFA (enrolamiento y verificación) ---- */ .mfa-enrolar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 14px; } .mfa-qr { width: 200px; height: 200px; border-radius: 12px; border: 1px solid var(--borde, #e5dbe0); background: #fff; padding: 6px; } .mfa-secreto { font-size: 12px; color: var(--texto-3); text-align: center; line-height: 1.6; } .mfa-secreto code { font-size: 12.5px; letter-spacing: 1px; word-break: break-all; color: var(--texto); } .login-caja .btn.sec { background: transparent; border: 1px solid var(--borde, #e5dbe0); color: var(--texto-2); } a.nav-item { text-decoration: none; }