/* ============ Helix Order — Production App Styles ============ */ :root { --sand: #FBF9F3; --sand-2: #F6F2E8; --fog: #F0EDE4; --card: #F1ECE0; --card-2: #ECE6D8; --card-hi: #FBF9F3; --ink: #0F172A; --ink-soft: #1E293B; --teal: #40A8C0; --teal-bright:#58C8E0; --teal-deep: #2D8CA0; --teal-tint: #E0F4F8; --muted: #374151; --muted-2: #4B5563; --line: rgba(15,23,42,.08); --line-2: rgba(15,23,42,.12); --amber: #D9822B; --shadow-card:0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.05); --shadow-pop: 0 10px 30px rgba(15,23,42,.16); --font: "Inter", system-ui, sans-serif; --bot-nav-h: 68px; /* igualado al nav de Passport (mismo tamaño/forma) */ --safe-bot: env(safe-area-inset-bottom, 0px); /* Ancho del shell de la app cliente: UNA sola fuente de verdad para shell, nav y barras flotantes (crece por breakpoint; ver bloque responsive abajo). */ --shell-w: 430px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--sand); /* SIN height:100% (como Passport): el documento fluye con el contenido. Con height:100% + fixed bottom, iOS hace rebotar el nav al ocultarse la barra. */ -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; /* SIN overscroll-behavior-y: era un parche para el shell bloqueado (el rubber-band empujaba el nav). Ese shell ya no existe: el DOCUMENTO scrollea y el nav cuelga del por portal. El mismo switch apagaba el "jalar para refrescar", que es el MISMO gesto que el rebote: no se puede tener uno sin el otro. */ } #root { min-height: 100%; display: flex; justify-content: center; background: var(--sand); } /* ─── App shell ─────────────────────────────────────────── */ .ho-shell { width: 100%; max-width: var(--shell-w); /* Modo Passport: el shell CRECE con el contenido y scrollea el DOCUMENTO (NO es un shell bloqueado con overflow:hidden + scroll interno). Un shell bloqueado rompe `position:fixed` en iOS/Chrome móvil (el nav se ancla al viewport grande, bajo las barras del navegador = hueco + botones tapados + scroll trabado, sobre todo al entrar desde el banner de Passport = carga fresca). Con documento que scrollea, el navegador maneja el nav fixed nativamente, igual que Passport. */ min-height: 100vh; min-height: 100dvh; background: var(--sand); color: var(--ink); font-family: var(--font); display: flex; flex-direction: column; position: relative; overflow-x: hidden; } .ho-shell * { font-family: var(--font); } /* La fuente aplica también fuera del shell (modales fixed en la raíz: AuthGate, hojas, etc.) */ body, #root, #root * { font-family: var(--font); } /* Contenedores del panel (base móvil = columna; PC/iPad = varias columnas) */ .config-grid { display: flex; flex-direction: column; gap: 20px; } .panel-list { display: flex; flex-direction: column; gap: 12px; } /* ═══════ RESPONSIVE: cel → tablet → PC → monitores grandes ═══════ Filosofía: en móvil NADA cambia (ya es excelente ahí). Al crecer: 1) el shell del cliente se ensancha a columna cómoda (560→640→690) — como un feed: legible, nunca texto estirado a 1400px; 2) lo que SÍ gana con ancho (descubrimiento, cartas, panel) usa grids que se adaptan (.grid-cards, .catalog-items, .qm-items, panel wide); 3) hojas de fondo se vuelven diálogos centrados en pantallas grandes; 4) hover solo donde hay mouse (@media hover). */ /* ─── Tablet (700–1023): shell más ancho, fondo IDÉNTICO al de la app (cero bordes, cero marco — se ve continuo). ─── */ @media (min-width: 700px) { :root { --shell-w: 620px; } html, body { background: var(--sand); } #root { background: transparent; } } /* ─── PC (≥1024): FULL-BLEED. Las reglas viven al FINAL del archivo (sección "RESPONSIVE PC") porque deben ganar a las definiciones base que vienen después de este punto. Aquí solo el shell y las variables. ─── */ @media (min-width: 1024px) { :root { --shell-w: 720px; --content-w: 1200px; --flow-w: 660px; --edge: max(20px, calc(50vw - var(--content-w) / 2)); } .ho-shell { max-width: none; box-shadow: none; } } /* Grid de tarjetas de descubrimiento (home): 2 col en cel, 3 en tablet, auto-fill en desktop (las tarjetas mantienen proporción, no se estiran). */ .grid-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 20px; } @media (min-width: 700px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; } } /* Ficha del negocio y menú QR: las filas de platillos en varias columnas en desktop */ @media (min-width: 1024px) { /* .col.catalog-items: gana en especificidad a la utilidad .col (definida después). auto-FIT, no auto-fill: auto-fill deja las columnas vacías reservadas, así que un negocio con un solo servicio salía arrinconado en un tercio con dos huecos al lado. auto-fit las colapsa; el tope de 520px evita que ese único ítem se estire a lo ancho de la pantalla. Resultado: 1 servicio = 1 columna, 2 = dos, muchos = las que quepan. */ .col.catalog-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px 30px; } /* El tope va en el ÍTEM, no en la columna: con un solo servicio la columna es ancha pero el platillo no se estira a lo largo de toda la pantalla. Con un max en la columna, en cambio, el navegador dejaba de caber 3 y siempre daba 2. */ .col.catalog-items > * { max-width: 520px; } /* Menú QR: mismo criterio — con pocos platillos no forzamos dos columnas. */ .qm-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); column-gap: 40px; } .qm-items > * { max-width: 560px; } .qm-items .qm-item:nth-last-child(2) { border-bottom: none; } } /* Hover solo con mouse real (no ensucia touch) */ @media (hover: hover) and (pointer: fine) { .grid-cards .card { transition: transform .16s ease, box-shadow .16s ease; } .grid-cards .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); } .qm-item { transition: background .12s ease; border-radius: 12px; } .qm-item:hover { background: rgba(15,23,42,.03); } .botnav .nav-item:hover { color: var(--ink); } .botnav .nav-item.active:hover { color: var(--teal); } .btn:hover:not([disabled]) { filter: brightness(.96); } .chip:hover, .qm-cat:hover { border-color: var(--ink); } .iconbtn:hover { background: var(--card); } } /* Panel del negocio: tablero ancho de verdad, contenido en varias columnas */ @media (min-width: 768px) { .ho-shell--wide { max-width: min(1280px, 96vw); } .ho-shell--wide .config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .ho-shell--wide .panel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; } } /* PC: el panel también es full-bleed (esta regla va DESPUÉS del bloque de 768 a propósito: a igual especificidad gana la última). */ @media (min-width: 1024px) { .ho-shell--wide { max-width: none; } } /* ─── Status bar (top safe area) ──────────────────────────── */ .statusbar { height: 50px; flex: 0 0 50px; display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 0; font-size: 15px; font-weight: 700; letter-spacing: .2px; background: var(--sand); position: sticky; top: 0; z-index: 50; } .statusbar.on-img { color: #fff; background: transparent; position: absolute; left: 0; right: 0; top: 0; } .statusbar .sb-time { font-variant-numeric: tabular-nums; } .statusbar .sb-right { display: flex; align-items: center; gap: 7px; } /* ─── Scrollable content area ────────────────────────────── */ .screen-scroll { flex: 1 0 auto; /* crece con el contenido; el DOCUMENTO scrollea (modo Passport), no un scroll interno */ overflow-x: hidden; scrollbar-width: none; padding-bottom: calc(var(--bot-nav-h) + var(--safe-bot) + 20px); /* deja pasar el nav fixed */ } .screen-scroll::-webkit-scrollbar { display: none; } /* Full-screen scroll (no bottom nav) */ .screen-scroll.no-nav { padding-bottom: 24px; } /* ─── Header bar ──────────────────────────────────────────── */ .appbar { flex: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--sand); border-bottom: 1px solid var(--line); position: relative; z-index: 40; } .appbar .bar-title { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; } .iconbtn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; background: none; border: none; border-radius: 10px; } .iconbtn:active { background: var(--card); } /* ─── Bottom nav ──────────────────────────────────────────── */ .botnav { height: calc(var(--bot-nav-h) + var(--safe-bot)); background: rgba(251,249,243,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); /* misma rejilla que Passport: columna central fija de 72px para el boton redondo */ display: grid; grid-template-columns: 1fr 1fr 72px 1fr 1fr; /* center, igual que Passport. Con `align-items:start` los items se pegaban arriba de la barra y sobraba hueco debajo: el nav se veia despegado del fondo. */ align-items: center; padding-bottom: var(--safe-bot); /* fixed, igual que Passport: funciona porque ahora el DOCUMENTO scrollea (ver .ho-shell). El navegador lo mantiene pegado al fondo visible de forma nativa. */ position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--shell-w); z-index: 100; } .botnav .nav-item { /* height:100% + center = mismo encaje que el boton del nav de Passport */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; padding-top: 8px; color: var(--muted-2); position: relative; cursor: pointer; } .botnav .nav-item.active { color: var(--teal); } .botnav .nav-item .nav-label { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .botnav .nav-item .nav-bar { /* top:6px desde el borde del item (que ahora mide todo el alto), como Passport. Antes era -12px, atado al padding-top:12px que ya no existe. */ position: absolute; top: 6px; width: 22px; height: 3px; border-radius: 3px; background: var(--teal); opacity: 0; transition: opacity .15s; } .botnav .nav-item.active .nav-bar { opacity: 1; } .botnav .nav-qr { /* mismo tamaño, forma Y encaje que el botón central de Passport: DENTRO de la barra, centrado, con 8px de respiro abajo. Antes sobresalía (top:-18px). */ position: static; transform: none; margin-bottom: 8px; width: 52px; height: 52px; border-radius: 50%; flex: none; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--sand), 0 4px 16px rgba(64,168,192,.45); cursor: pointer; } /* ─── Typography ─────────────────────────────────────────── */ .label-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-2); } .h-display { font-size: 40px; line-height: .98; font-weight: 900; letter-spacing: -1.2px; } .h1 { font-size: 27px; line-height: 1.02; font-weight: 900; letter-spacing: -.8px; } .h2 { font-size: 20px; font-weight: 800; letter-spacing: -.4px; } .h3 { font-size: 16px; font-weight: 800; letter-spacing: -.2px; } .body { font-size: 14px; line-height: 1.45; color: var(--ink); } .body-mut { font-size: 13px; line-height: 1.45; color: var(--muted); } .price { font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ─── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 800; font-size: 14px; letter-spacing: .1px; border: none; border-radius: 14px; cursor: pointer; padding: 14px 20px; transition: transform .08s ease, filter .12s ease; } .btn:active { transform: translateY(1px) scale(.995); } .btn-ink { background: var(--ink); color: #fff; } .btn-ink:hover { filter: brightness(1.12); } .btn-teal { background: var(--teal); color: #fff; } .btn-teal:hover { filter: brightness(1.05); } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); } .btn-ghost-teal { background: transparent; color: var(--teal); border: 1.5px solid rgba(64,168,192,.35); } .btn-block { width: 100%; } .btn-sm { padding: 10px 16px; font-size: 13px; border-radius: 11px; } .btn-danger { background: #FEE2E2; color: #DC2626; border: 1px solid rgba(220,38,38,.2); } /* ─── Chips ───────────────────────────────────────────────── */ .chiprow { flex-shrink: 0; display: flex; gap: 9px; overflow-x: auto; overflow-y: hidden; padding: 2px 18px 2px; scrollbar-width: none; } .chiprow::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: background .1s, color .1s; } .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); } /* Selector de idioma: colapsado en teléfono, segmentado en PC (ver @media 1024). */ .lang-pc { display: none; } /* ─── Cards ───────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); } .card-ink { background: var(--ink); color: #fff; border-radius: 18px; } .card-teal { background: var(--teal); color: #fff; border-radius: 18px; position: relative; overflow: hidden; } /* ─── Badges ──────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; } .badge-open { background: var(--teal); color: #fff; } .badge-closed { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); } .badge-soft { background: var(--teal-tint); color: var(--teal-deep); } .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* order type pills */ .tpill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .3px; } .tpill.reserva { background: #EAE3F6; color: #6D49B8; } .tpill.pickup { background: #FBEAD4; color: #B5701E; } .tpill.delivery { background: var(--teal-tint); color: var(--teal-deep); } .tpill.pending { background: #FEF3C7; color: #92400E; } .tpill.cancelled{ background: #FEE2E2; color: #DC2626; } /* ─── Status badges ───────────────────────────────────────── */ .status-pending { background: #FEF3C7; color: #92400E; } .status-confirmed{ background: #DBEAFE; color: #1D4ED8; } .status-preparing{ background: #FBEAD4; color: #B5701E; } .status-ready { background: var(--teal-tint); color: var(--teal-deep); } .status-assigned { background: #E0F2FE; color: #0369A1; } .status-delivered{ background: #DCFCE7; color: #15803D; } .status-completed{ background: #DCFCE7; color: #15803D; } .status-cancelled{ background: #FEE2E2; color: #DC2626; } /* ─── Image slot ──────────────────────────────────────────── */ .imgslot { position: relative; overflow: hidden; background: var(--card-2); background-image: repeating-linear-gradient(135deg, rgba(15,23,42,.045) 0 1px, transparent 1px 11px); display: flex; align-items: center; justify-content: center; } .imgslot img { width: 100%; height: 100%; object-fit: cover; } .imgslot .slot-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); text-align: center; padding: 0 14px; } .imgslot.dark { background: #243042; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px); } .imgslot.dark .slot-label { color: rgba(255,255,255,.55); } /* avatar */ .avatar { border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; } /* ─── Quantity stepper ────────────────────────────────────── */ .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; background: var(--card-hi); } .qty button { width: 34px; height: 34px; border: none; background: transparent; font-size: 18px; font-weight: 700; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; } .qty button:active { background: var(--card-2); } .qty .qval { width: 30px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; } /* add button */ .addbtn { width: 34px; height: 34px; border-radius: 11px; background: var(--ink); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .addbtn:active { transform: scale(.93); } /* ─── Floating cart bar ───────────────────────────────────── */ .cartbar { position: fixed; bottom: calc(var(--bot-nav-h) + var(--safe-bot) + 12px); left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: calc(var(--shell-w) - 32px); background: var(--ink); color: #fff; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-pop); animation: cartUp .28s cubic-bezier(.2,.8,.2,1); cursor: pointer; z-index: 90; } @keyframes cartUp { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } /* ─── Segmented control ───────────────────────────────────── */ .seg { display: flex; background: var(--card-2); border-radius: 14px; padding: 5px; gap: 4px; } .seg .seg-item { flex: 1 1 0; min-width: 0; text-align: center; padding: 11px 4px; border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden; } .seg .seg-item.active { background: var(--sand); color: var(--ink); box-shadow: var(--shadow-card); } /* ─── Form fields ─────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted-2); } .input { width: 100%; background: var(--card-hi); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 14px; font-size: 14px; color: var(--ink); font-family: var(--font); outline: none; transition: border-color .15s; } .input:focus { border-color: var(--teal); } .input::placeholder { color: var(--muted-2); } textarea.input { resize: none; } /* search */ .searchbox { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--muted-2); } /* ─── Stepper (tracking) ──────────────────────────────────── */ .vstep { display: flex; gap: 14px; } .vstep .rail { display: flex; flex-direction: column; align-items: center; } .vstep .node { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 26px; background: var(--card-2); color: var(--muted-2); border: 2px solid var(--line-2); } .vstep .node.done { background: var(--teal); border-color: var(--teal); color: #fff; } .vstep .node.curr { background: #fff; border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 4px var(--teal-tint); } .vstep .line { width: 2px; flex: 1; background: var(--line-2); margin: 2px 0; min-height: 24px; } .vstep .line.done { background: var(--teal); } .vstep .step-body { padding-bottom: 22px; } .vstep:last-child .step-body { padding-bottom: 0; } /* ─── Misc ────────────────────────────────────────────────── */ .hr { height: 1px; background: var(--line); border: none; margin: 0; } .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .between { justify-content: space-between; } .gap4 { gap: 4px; } .gap5 { gap: 5px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap14 { gap: 14px; } .gap16 { gap: 16px; } .gap20 { gap: 20px; } .gap24 { gap: 24px; } .grow { flex: 1; } .muted { color: var(--muted); } .teal { color: var(--teal); } .center { text-align: center; } .pad { padding: 18px; } .padx { padding-left: 18px; padding-right: 18px; } /* ─── Loading state ───────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--card-2) 25%, var(--card-hi) 50%, var(--card-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 10px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ============================================================ QR Menu (carta de restaurante) — rediseño Claude Design ============================================================ */ .qm-hero { position: relative; flex-shrink: 0; height: 248px; background: var(--ink); overflow: hidden; } .qm-hero-img { position: absolute; inset: 0; } .qm-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .qm-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.34) 0%, rgba(15,23,42,0) 26%, rgba(15,23,42,.10) 52%, rgba(15,23,42,.84) 100%); } .qm-hero-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: calc(12px + env(safe-area-inset-top,0px)) 14px 0; display: flex; align-items: flex-start; justify-content: space-between; } .qm-glass { width: 40px; height: 40px; border-radius: 13px; background: rgba(15,23,42,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .qm-glass:active { transform: scale(.93); } .qm-hero-foot { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 4; color: #fff; } .qm-hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 7px; } .qm-hero-name { font-size: 30px; line-height: 1.0; font-weight: 900; letter-spacing: -.9px; color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.28); } .qm-hero-meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); } .qm-langwrap { position: relative; } .qm-lang { display: inline-flex; align-items: center; gap: 7px; background: rgba(251,249,243,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: none; border-radius: 999px; padding: 9px 13px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(15,23,42,.16); } .qm-lang .qm-flag { font-size: 14px; line-height: 1; } .qm-lang-menu { position: absolute; top: 50px; right: 0; z-index: 60; min-width: 168px; background: var(--sand); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 7px; animation: qmPop .14s ease; } @keyframes qmPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .qm-lang-opt { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; } .qm-lang-opt:active { background: var(--card); } .qm-lang-opt.active { background: var(--teal-tint); color: var(--teal-deep); font-weight: 800; } .qm-lang-opt .qm-flag { font-size: 17px; } .qm-lang-opt .qm-check { margin-left: auto; color: var(--teal); } .qm-mesa { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 13px 20px; background: var(--teal-deep); color: #fff; } .qm-mesa-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; } .qm-mesa-label { font-size: 15px; font-weight: 900; letter-spacing: -.2px; line-height: 1.1; } .qm-mesa-sub { font-size: 11.5px; font-weight: 600; opacity: .82; margin-top: 1px; } .qm-mesa-bill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); border: none; color: #fff; cursor: pointer; padding: 9px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .2px; } .qm-mesa-bill:active { background: rgba(255,255,255,.26); } .qm-catnav { position: sticky; top: 0; z-index: 30; flex-shrink: 0; background: rgba(251,249,243,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .qm-catrow { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; } .qm-catrow::-webkit-scrollbar { display: none; } .qm-cat { flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; background: transparent; border: 1.5px solid var(--line-2); color: var(--ink-soft); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .qm-cat.active { background: var(--ink); color: #fff; border-color: var(--ink); } .qm-sec { padding: 40px 20px 0; scroll-margin-top: 8px; } .qm-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 9px; border-bottom: 2.5px solid var(--ink); } .qm-sec-title { font-size: 19px; font-weight: 900; letter-spacing: .4px; line-height: 1; color: var(--ink); text-transform: uppercase; } .qm-sec-rule { flex: 1; height: 0; background: none; } .qm-sec-count { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--teal-deep); background: var(--teal-tint); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; } .qm-item { display: flex; gap: 15px; align-items: flex-start; padding: 17px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .qm-item:last-child { border-bottom: none; } .qm-item-body { flex: 1; min-width: 0; } .qm-item-name { font-size: 16.5px; font-weight: 800; letter-spacing: -.25px; line-height: 1.2; } .qm-item-desc { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 6px 0 10px; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qm-item-foot { display: flex; align-items: center; gap: 10px; } .qm-item-price { font-size: 15.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .qm-item-mods { font-size: 11.5px; color: var(--muted-2); font-weight: 600; } .qm-media { position: relative; flex-shrink: 0; width: 98px; } .qm-thumb { width: 98px; height: 98px; border-radius: 17px; overflow: hidden; background: var(--card-2); box-shadow: var(--shadow-card); } .qm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .qm-media-noimg { min-width: 44px; width: auto; } .qm-add { position: absolute; right: -7px; bottom: -7px; width: 38px; height: 38px; border-radius: 13px; background: var(--ink); color: #fff; border: 3px solid var(--sand); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(15,23,42,.22); } .qm-add:active { transform: scale(.9); } .qm-media-noimg .qm-add { position: static; border-color: transparent; box-shadow: var(--shadow-card); } .qm-step { position: absolute; right: -7px; bottom: -7px; display: inline-flex; align-items: center; gap: 0; background: var(--ink); color: #fff; border: 3px solid var(--sand); border-radius: 13px; box-shadow: 0 4px 12px rgba(15,23,42,.22); } .qm-media-noimg .qm-step { position: static; border-color: transparent; } .qm-step button { width: 32px; height: 32px; border: none; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .qm-step .qm-step-val { min-width: 22px; text-align: center; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .qm-item.has-qty .qm-thumb { box-shadow: 0 0 0 2px var(--teal), var(--shadow-card); } .qm-reviewbar { position: fixed; left: 50%; bottom: calc(16px + var(--safe-bot)); transform: translateX(-50%); width: calc(100% - 32px); max-width: calc(var(--shell-w) - 32px); background: var(--ink); color: #fff; border-radius: 17px; padding: 13px 14px 13px 18px; z-index: 90; cursor: pointer; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-pop); animation: cartUp .28s cubic-bezier(.2,.8,.2,1); } .qm-reviewbar .qm-rb-count { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; } .qm-rb-total { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .qm-rb-sub { font-size: 11px; font-weight: 600; opacity: .65; } .qm-rb-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; } .qm-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.52); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: qmFade .2s ease; } @keyframes qmFade { from { opacity: 0; } to { opacity: 1; } } .qm-sheet { width: 100%; max-width: 430px; max-height: 92vh; background: var(--sand); border-radius: 26px 26px 0 0; display: flex; flex-direction: column; overflow: hidden; animation: qmUp .34s cubic-bezier(.2,.8,.2,1); position: relative; } @keyframes qmUp { from { transform: translateY(40px); } to { transform: translateY(0); } } .qm-sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .qm-sheet-scroll::-webkit-scrollbar { display: none; } .qm-sheet-foot { flex-shrink: 0; padding: 14px 20px calc(16px + var(--safe-bot)); border-top: 1px solid var(--line); background: var(--sand); } .qm-sheet-close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 11px; border: none; cursor: pointer; background: rgba(15,23,42,.42); color: #fff; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .qm-line { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .qm-line:last-of-type { border-bottom: none; } .qm-line-qty { flex-shrink: 0; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; background: var(--card-2); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .qm-line-name { font-size: 14.5px; font-weight: 700; line-height: 1.25; } .qm-line-price { margin-left: auto; font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .qm-total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0 4px; } .qm-total-label { font-size: 16px; font-weight: 800; } .qm-total-val { font-size: 26px; font-weight: 900; letter-spacing: -.6px; font-variant-numeric: tabular-nums; } .qm-success { padding: 40px 28px calc(28px + var(--safe-bot)); text-align: center; } .qm-success-ring { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 22px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px var(--teal-tint); animation: qmPop2 .4s cubic-bezier(.2,.8,.2,1); } @keyframes qmPop2 { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .qm-success-title { font-size: 25px; font-weight: 900; letter-spacing: -.6px; margin-bottom: 8px; } .qm-success-sub { font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 290px; margin: 0 auto 26px; text-wrap: pretty; } /* ─── Empty state ─────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; padding: 60px 24px; text-align: center; gap: 12px; } /* ─── QR scanner overlay ──────────────────────────────────── */ .scanner-overlay { position: fixed; inset: 0; background: #0B1220; color: #fff; display: flex; flex-direction: column; z-index: 200; } /* Scrollbar for panels on desktop */ @media (min-width: 430px) { .screen-scroll { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .screen-scroll::-webkit-scrollbar { display: block; width: 4px; } .screen-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; } } /* ─── Fee zone chips ──────────────────────────────────────── */ .fee-chip { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-radius: 14px; border: 1.5px solid var(--line-2); cursor: pointer; gap: 4px; background: var(--card-hi); transition: all .15s; } .fee-chip.active { border-color: var(--teal); background: var(--teal-tint); } .fee-chip .fee-label { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; } .fee-chip.active .fee-label { color: var(--teal-deep); } .fee-chip .fee-amount { font-size: 18px; font-weight: 900; color: var(--ink); } .fee-chip.active .fee-amount { color: var(--teal-deep); } .fee-chip .fee-range { font-size: 10px; color: var(--muted-2); } /* ============================================================ Helix Passport — Reservaciones (rediseño) Pega TODO este bloque al final de tu styles.css. Prefijos: fp-* = plano / panel del negocio bk-* = asistente de reserva / cliente Usa SOLO variables de marca existentes (--teal, --ink, etc.) ============================================================ */ /* ─── Floor: lienzo tipo "salón real" ─────────────────────── */ .fp-floor { position: relative; width: 100%; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #FCFAF4 0%, #F4EFE4 100%); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-card); } /* textura sutil de "piso" (tablones), no distrae */ .fp-floor::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(15,23,42,.025) 0 1px, transparent 1px 64px); pointer-events: none; } .fp-floor.fp-edit { background: #FBFAF6; border: 1.5px dashed var(--line-2); } .fp-floor svg { display: block; position: relative; z-index: 1; } .fp-floor-empty { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; color: var(--muted-2); } .fp-floor-empty .fp-empty-title { font-weight: 800; font-size: 14px; color: var(--ink); } .fp-floor-empty .fp-empty-sub { font-size: 12.5px; } .fp-floor-loading { position: absolute; inset: 0; z-index: 3; background: rgba(251,249,243,.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; } /* ─── FloorView: barra de control fecha/hora ──────────────── */ .fp-controls { display: flex; align-items: stretch; gap: 8px; } .fp-datepill { flex: 1; display: flex; align-items: center; gap: 9px; background: var(--card-hi); border: 1px solid var(--line-2); border-radius: 13px; padding: 4px 6px 4px 13px; min-width: 0; } .fp-datepill .fp-dp-ico { color: var(--teal); flex-shrink: 0; } .fp-datepill input { border: none; background: transparent; outline: none; font-family: var(--font); font-weight: 700; font-size: 13.5px; color: var(--ink); width: 100%; min-width: 0; font-variant-numeric: tabular-nums; } .fp-refresh { flex-shrink: 0; width: 46px; border: none; border-radius: 13px; background: var(--teal); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(64,168,192,.28); } .fp-refresh:active { transform: translateY(1px); } /* ─── FloorView: resumen "de un vistazo" ──────────────────── */ .fp-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .fp-stat { border-radius: 14px; padding: 11px 12px; border: 1.5px solid transparent; display: flex; flex-direction: column; gap: 3px; } .fp-stat .fp-stat-num { font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .fp-stat .fp-stat-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; } /* ─── Leyenda de estados ──────────────────────────────────── */ .fp-legend { display: flex; flex-wrap: wrap; gap: 8px; } .fp-legend-item { display: inline-flex; align-items: center; gap: 7px; background: var(--card-hi); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 9px; font-size: 11.5px; font-weight: 700; color: var(--muted); } .fp-swatch { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; } .fp-swatch.dashed { border-style: dashed; } /* ─── FloorView: lista de reservas del día (guest list) ───── */ .fp-resv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .fp-resv-list { display: flex; flex-direction: column; gap: 9px; } .fp-resv { display: flex; align-items: center; gap: 12px; background: var(--card-hi); border: 1px solid var(--line); border-radius: 15px; padding: 11px 13px; box-shadow: var(--shadow-card); } .fp-resv.cancelled { opacity: .55; } .fp-resv-time { flex-shrink: 0; width: 58px; text-align: center; display: flex; flex-direction: column; gap: 1px; } .fp-resv-time .t-hour { font-size: 16px; font-weight: 900; letter-spacing: -.4px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; } .fp-resv-time .t-mer { font-size: 10px; font-weight: 800; color: var(--muted-2); letter-spacing: .5px; } .fp-resv.cancelled .fp-resv-time .t-hour { text-decoration: line-through; color: var(--muted-2); } .fp-resv-divider { width: 1px; align-self: stretch; background: var(--line); flex-shrink: 0; } .fp-resv-body { flex: 1; min-width: 0; } .fp-resv-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; } .fp-resv-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; } .fp-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; border-radius: 7px; padding: 3px 8px; white-space: nowrap; } .fp-tag.table { background: var(--teal-tint); color: var(--teal-deep); } .fp-tag.staff { background: #EAE3F6; color: #6D49B8; } .fp-tag.party { background: var(--card-2); color: var(--muted); } .fp-resv-note { font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 6px; } .fp-resv-end { flex-shrink: 0; } /* ─── FloorPlanEditor: barra de zonas (filtro) ────────────── */ .fp-zonebar { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .fp-zonebar::-webkit-scrollbar { display: none; } .fp-zone-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line-2); background: var(--card-hi); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); transition: all .12s; } .fp-zone-chip .fp-zone-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; } .fp-zone-chip.active { color: #fff; border-color: transparent; } /* ─── FloorPlanEditor: inspector de mesa ──────────────────── */ .fp-inspector { background: var(--card-hi); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-pop); margin-top: 12px; } .fp-insp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .fp-insp-title { display: flex; align-items: center; gap: 9px; } .fp-insp-badge { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #fff; flex-shrink: 0; letter-spacing: -.3px; } .fp-insp-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); } .fp-insp-name { font-size: 15px; font-weight: 900; letter-spacing: -.3px; } .fp-insp-close { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--fog); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; } .fp-insp-close:active { background: var(--card-2); } .fp-fieldrow { display: flex; gap: 10px; } .fp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .fp-field-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted-2); } /* stepper de capacidad */ .fp-cap { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--card-hi); align-self: flex-start; } .fp-cap button { width: 40px; height: 44px; border: none; background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; } .fp-cap button:active { background: var(--card-2); } .fp-cap .fp-cap-val { min-width: 44px; text-align: center; font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; } /* toggles de forma con mini-glyph */ .fp-shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .fp-shape-btn { border: 1.5px solid var(--line-2); background: var(--card-hi); border-radius: 12px; padding: 10px 4px 7px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all .12s; } .fp-shape-btn .fp-shape-ico { width: 30px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); } .fp-shape-btn .fp-shape-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .2px; color: var(--muted-2); text-transform: uppercase; } .fp-shape-btn.active { border-color: var(--teal); background: var(--teal-tint); } .fp-shape-btn.active .fp-shape-ico, .fp-shape-btn.active .fp-shape-lbl { color: var(--teal-deep); } /* segmento simple (rotación) */ .fp-seg { display: flex; gap: 6px; } .fp-seg-btn { flex: 1; border: 1.5px solid var(--line-2); background: var(--card-hi); border-radius: 11px; padding: 11px; cursor: pointer; font-weight: 800; font-size: 13px; color: var(--ink-soft); } .fp-seg-btn.active { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-deep); } .fp-select { width: 100%; background: var(--card-hi); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 14px; font-size: 14px; color: var(--ink); font-family: var(--font); outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } .fp-delete { width: 100%; margin-top: 4px; border: 1px solid rgba(220,38,38,.22); background: #FEF2F2; color: #DC2626; border-radius: 12px; padding: 12px; font-weight: 800; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; } .fp-delete:active { background: #FEE2E2; } /* botón primario añadir mesa */ .fp-add { width: 100%; margin-top: 12px; border: none; background: var(--ink); color: #fff; border-radius: 14px; padding: 14px; font-weight: 800; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } .fp-add:active { transform: translateY(1px); } /* acordeones (zonas / bloqueos) */ .fp-acc { margin-top: 9px; } .fp-acc-head { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--card-hi); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--ink); text-align: left; } .fp-acc-head .fp-acc-ico { color: var(--teal); flex-shrink: 0; display: flex; } .fp-acc-head .fp-acc-count { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--muted-2); background: var(--fog); border-radius: 999px; padding: 2px 9px; min-width: 22px; text-align: center; } .fp-acc-head .fp-acc-chev { color: var(--muted-2); flex-shrink: 0; transition: transform .18s; display: flex; } .fp-acc-head.open .fp-acc-chev { transform: rotate(180deg); } .fp-acc-body { background: var(--fog); border: 1px solid var(--line); border-top: none; border-radius: 0 0 14px 14px; padding: 14px; margin-top: -8px; } .fp-acc-hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; } .fp-zonerow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .fp-swatches { display: flex; gap: 6px; flex-shrink: 0; } .fp-swatch-btn { width: 24px; height: 24px; border-radius: 7px; cursor: pointer; border: 1px solid rgba(0,0,0,.12); padding: 0; } .fp-swatch-btn.active { box-shadow: 0 0 0 2px var(--card-hi), 0 0 0 4px var(--ink); } .fp-iconx { background: none; border: none; color: #DC2626; cursor: pointer; display: flex; padding: 6px; flex-shrink: 0; } .fp-block-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card-hi); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; } .fp-block-item .fp-bi-label { font-size: 12.5px; font-weight: 800; } .fp-block-item .fp-bi-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .fp-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 4px 0; } .fp-check input { width: 19px; height: 19px; accent-color: var(--teal); } .fp-savebtn { width: 100%; border: none; background: var(--ink); color: #fff; border-radius: 12px; padding: 12px; font-weight: 800; font-size: 13.5px; cursor: pointer; margin-top: 8px; } .fp-ok { font-size: 12px; color: #059669; font-weight: 800; display: flex; align-items: center; gap: 5px; margin-top: 8px; } /* ============================================================ bk-* Asistente de reserva (cliente) ============================================================ */ .bk-progress { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 0 2px; } .bk-dot { height: 7px; border-radius: 5px; background: var(--card-2); transition: width .25s, background .25s; } .bk-dot.done { background: var(--teal); } .bk-dot.now { background: var(--teal); } .bk-steptitle { font-size: 20px; font-weight: 900; letter-spacing: -.5px; line-height: 1.1; } .bk-stepsub { font-size: 13px; color: var(--muted); margin-top: 3px; text-transform: capitalize; } .bk-card { background: var(--card-hi); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-card); } /* selector de personas */ .bk-party { display: flex; align-items: center; justify-content: space-between; background: var(--card-hi); border: 1px solid var(--line-2); border-radius: 16px; padding: 12px 16px; } .bk-party-info { display: flex; align-items: center; gap: 11px; } .bk-party-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--teal-tint); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bk-party-num { font-size: 17px; font-weight: 900; letter-spacing: -.3px; } .bk-party-lbl { font-size: 12px; color: var(--muted); font-weight: 600; } .bk-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; } .bk-stepper button { width: 42px; height: 44px; border: none; background: var(--card-hi); color: var(--ink); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .bk-stepper button:disabled { color: var(--line-2); cursor: not-allowed; } .bk-stepper button:active:not(:disabled) { background: var(--card-2); } .bk-stepper .bk-stepper-val { min-width: 34px; text-align: center; font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; } /* chips (staff / cualquiera) */ .bk-chiprow { display: flex; gap: 8px; flex-wrap: wrap; } .bk-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line-2); background: var(--card-hi); border-radius: 999px; padding: 9px 15px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-soft); } .bk-chip.active { background: var(--teal); border-color: var(--teal); color: #fff; } /* slots por turno */ .bk-turno { margin-bottom: 4px; } .bk-turno-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--muted); } .bk-turno-head .bk-turno-ico { color: var(--teal); display: flex; } .bk-turno-head .bk-turno-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } .bk-turno-head .bk-turno-rule { flex: 1; height: 1px; background: var(--line); } .bk-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (min-width: 700px) { .bk-slot-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .bk-slot-grid { grid-template-columns: repeat(5, 1fr); } } .bk-slot { position: relative; border: 1.5px solid var(--line-2); background: var(--card-hi); border-radius: 13px; padding: 11px 6px 9px; cursor: pointer; text-align: center; transition: all .12s; } .bk-slot:active:not(.full) { transform: scale(.97); } .bk-slot.full { opacity: .5; cursor: not-allowed; background: var(--fog); } .bk-slot.sel { border-color: var(--teal); background: var(--teal-tint); box-shadow: 0 0 0 3px rgba(64,168,192,.12); } .bk-slot-time { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; font-size: 15px; letter-spacing: -.3px; color: var(--ink); font-variant-numeric: tabular-nums; } .bk-slot.sel .bk-slot-time { color: var(--teal-deep); } .bk-slot-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .bk-slot-sub { font-size: 10px; font-weight: 700; color: var(--muted-2); margin-top: 3px; } /* leyenda plano cliente */ .bk-legend { display: flex; flex-wrap: wrap; gap: 9px; } .bk-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); } .bk-legend-item .bk-leg-sw { width: 11px; height: 11px; border-radius: 4px; } .bk-floorhint { font-size: 12.5px; color: var(--muted); text-align: center; } /* resumen confirmación */ .bk-summary { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color: #fff; border-radius: 18px; padding: 18px; position: relative; overflow: hidden; box-shadow: 0 10px 28px rgba(64,168,192,.32); } .bk-summary::after { content: ''; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.08); } .bk-summary-biz { font-size: 18px; font-weight: 900; letter-spacing: -.4px; margin-bottom: 12px; position: relative; } .bk-summary-grid { display: flex; flex-direction: column; gap: 9px; position: relative; } .bk-summary-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; } .bk-summary-row .bk-sr-ico { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bk-summary-row .bk-sr-val { font-weight: 800; } .bk-summary-row .bk-sr-key { opacity: .82; font-weight: 600; font-size: 12.5px; } .bk-form-lbl { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); } .bk-cta-note { font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.5; } /* ─── Cliente: mis reservas (lista) ───────────────────────── */ .bk-mycard { display: flex; align-items: stretch; gap: 13px; background: var(--card-hi); border: 1px solid var(--line); border-radius: 16px; padding: 14px; cursor: pointer; box-shadow: var(--shadow-card); transition: transform .1s; } .bk-mycard:active { transform: scale(.99); } .bk-mydate { flex-shrink: 0; width: 56px; border-radius: 12px; background: var(--teal-tint); color: var(--teal-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0; gap: 1px; } .bk-mydate .bk-md-day { font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -.5px; } .bk-mydate .bk-md-mon { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; } .bk-mybody { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .bk-myhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bk-myhead .badge { flex-shrink: 0; } .bk-myname { font-size: 15.5px; font-weight: 900; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .bk-mymeta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .bk-mymeta .bk-mt-time { font-size: 13px; font-weight: 800; color: var(--teal); display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } .bk-chip-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; border-radius: 7px; padding: 2px 7px; } .bk-chip-mini.table { background: var(--teal-tint); color: var(--teal-deep); } .bk-chip-mini.staff { background: #EAE3F6; color: #6D49B8; } .bk-chip-mini.party { background: var(--card-2); color: var(--muted); } @keyframes spin { to { transform: rotate(360deg); } } /* ── Plano: zoom/paneo y pestañas de zona (salas) ── */ .floor-zoom { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; flex-direction: column; gap: 6px; } .floor-zoom button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(251,249,243,.92); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .floor-zoom button:active { background: var(--card-2); } .floor-zoom button.on { color: var(--teal); border-color: var(--teal); } .floor-hint { position: absolute; left: 10px; bottom: 8px; z-index: 4; font-size: 10.5px; font-weight: 700; color: var(--muted-2); background: rgba(251,249,243,.85); border-radius: 7px; padding: 3px 8px; pointer-events: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .floor-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 10px; scrollbar-width: none; } .floor-tabs::-webkit-scrollbar { display: none; } /* ── Panel del negocio: tab bar tipo app (icono arriba + etiqueta) ── */ .biz-tabs { display: flex; gap: 5px; background: var(--card-2); border-radius: 14px; padding: 5px; } .biz-tab { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px 7px; border-radius: 10px; cursor: pointer; font-size: 10.5px; font-weight: 700; letter-spacing: -.1px; color: var(--muted); text-align: center; white-space: nowrap; transition: background .12s, color .12s; } .biz-tab:active { transform: scale(.97); } .biz-tab.active { background: var(--card-hi); color: var(--ink); box-shadow: var(--shadow-card); } .biz-tab .biz-tab-ico { display: flex; color: currentColor; } .biz-tab.active .biz-tab-ico { color: var(--teal); } .biz-tab-badge { position: absolute; top: 1px; right: calc(50% - 22px); min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; background: var(--teal); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; } .biz-tab-badge.alert { background: #DC2626; animation: pulse-biz 1s ease infinite; } .biz-tab-badge.warn { background: #D9822B; } /* ── Agenda por profesional (giro citas: barbería/spa/gym) ── */ .agenda-hd { padding: 8px 6px; font-size: 11px; font-weight: 800; color: var(--ink); background: var(--card-2); text-align: center; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; z-index: 1; } .agenda-time { padding: 6px 5px; font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: right; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--card-hi); font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: flex-end; } .agenda-cell { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 44px; padding: 5px 6px; } .agenda-cell-empty { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 44px; background: var(--card-hi); } .agenda-cell-empty:active { background: var(--fog); } /* ── Entrada suave de hojas (bottom sheets) — evita el "screamer" ── */ @keyframes helixSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes helixFadeIn { from { opacity: 0; } to { opacity: 1; } } .sheet-backdrop { animation: helixFadeIn .2s ease both; } .sheet-rise { animation: helixSheetUp .3s cubic-bezier(.22,1,.36,1) both; will-change: transform; } /* En PC la ficha del producto era una hoja a ancho completo (foto borde a borde, deformada). Aquí se vuelve diálogo centrado y acotado, como el resto de hojas ≥1024. Solo ProductSheet. */ @media (min-width:1024px){ .ps-backdrop{ justify-content:center !important; align-items:center; padding:32px; } .ps-sheet{ max-width:460px; width:100%; border-radius:20px !important; max-height:86vh !important; } } /* Hojas genéricas (sheet-rise): en PC eran de ancho completo y el contenido quedaba diluido / ilegible (p.ej. "Nuevo insumo"). Aquí se vuelven diálogo centrado y acotado, como ProductSheet. */ @media (min-width:1024px){ .sheet-backdrop{ justify-content:center !important; align-items:center; padding:32px; } .sheet-rise{ max-width:480px; width:100%; border-radius:20px !important; max-height:86vh !important; } } /* =========================================================================== Helix · Plano de SILLAS para barbería / estudio de tatuaje (bloque bb-*) Pegar al final de styles.css. Usa tokens Helix existentes. Fuente Inter. Responsive: móvil (base) · iPad (≥768) · PC (≥1024). Sin emojis decorativos. =========================================================================== */ /* ── Layout maestro: plano + columna lateral (cola / barberos) ───────────── */ /* Responsive por CONTENEDOR (no viewport): se adapta al ancho real del panel, aunque el shell lo limite (#app max-width). Móvil→1 col; ancho→columna lateral. */ .bb-root{ container-type:inline-size; container-name:bbpanel; } .bb-layout{ display:flex; flex-direction:column; gap:16px; } .bb-main{ display:flex; flex-direction:column; gap:16px; min-width:0; } .bb-side{ display:flex; flex-direction:column; gap:16px; } /* ── Roster de barberos (presencia) ──────────────────────────────────────── */ .bb-roster{ display:flex; gap:9px; overflow-x:auto; padding:2px 1px 4px; scrollbar-width:none; } .bb-roster::-webkit-scrollbar{ display:none; } .bb-staff{ flex:0 0 auto; display:flex; align-items:center; gap:9px; background:var(--card-hi); border:1px solid var(--line); border-radius:14px; padding:8px 12px 8px 8px; box-shadow:var(--shadow-card); cursor:pointer; transition:border-color .12s, opacity .12s; min-height:52px; } .bb-staff.away{ opacity:.5; } .bb-staff .bb-av{ width:36px; height:36px; border-radius:11px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; color:#fff; letter-spacing:-.3px; } .bb-staff .bb-av img{ width:100%; height:100%; object-fit:cover; } .bb-staff-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; } .bb-staff-name{ font-size:13px; font-weight:800; letter-spacing:-.2px; color:var(--ink); white-space:nowrap; } .bb-presence{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:2px 7px 2px 6px; border-radius:999px; border:1px solid transparent; } .bb-presence .bb-pdot{ width:6px; height:6px; border-radius:50%; } .bb-presence.present{ background:var(--teal-tint); color:var(--teal-deep); } .bb-presence.present .bb-pdot{ background:#2FA968; } .bb-presence.break{ background:#FBEED0; color:#8A5A14; } .bb-presence.break .bb-pdot{ background:#D9912B; } .bb-presence.away{ background:#E8EAEE; color:#5B616B; } .bb-presence.away .bb-pdot{ background:#9AA1AC; } /* ── Resumen "de un vistazo" (estados de sillas) ─────────────────────────── */ .bb-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .bb-stat{ border-radius:14px; padding:11px 12px; border:1.5px solid transparent; display:flex; flex-direction:column; gap:3px; } .bb-stat-num{ font-size:22px; font-weight:900; line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums; } .bb-stat-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; } /* ── Cola de walk-ins (lista de espera) ──────────────────────────────────── */ .bb-queue{ background:var(--card-hi); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:var(--shadow-card); } .bb-queue-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .bb-queue-count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--ink); color:#fff; font-size:12px; font-weight:900; } .bb-queue-list{ display:flex; flex-direction:column; gap:9px; } .bb-q-item{ display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:10px 11px; } .bb-q-av{ width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:15px; overflow:hidden; } .bb-q-av img{ width:100%; height:100%; object-fit:cover; } .bb-q-body{ flex:1; min-width:0; } .bb-q-name{ font-size:14px; font-weight:800; letter-spacing:-.2px; line-height:1.2; } .bb-q-meta{ font-size:11.5px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .bb-q-wait{ font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:600; font-variant-numeric:tabular-nums; } .bb-q-assign{ flex-shrink:0; border:none; cursor:pointer; background:var(--teal); color:#fff; font:inherit; font-weight:800; font-size:12px; border-radius:10px; padding:9px 12px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .bb-q-assign:disabled{ opacity:.45; cursor:not-allowed; } .bb-q-empty{ font-size:12.5px; color:var(--muted-2); text-align:center; padding:18px 6px; font-weight:600; } /* ── Leyenda de estados ──────────────────────────────────────────────────── */ .bb-legend{ display:flex; flex-wrap:wrap; gap:12px; } .bb-legend-item{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted); } .bb-swatch{ width:16px; height:16px; border-radius:5px; } .bb-swatch.dashed{ background:transparent !important; } /* ── Hoja de acciones de la silla ────────────────────────────────────────── */ .bb-overlay{ position:fixed; inset:0; z-index:600; background:rgba(15,23,42,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:flex; flex-direction:column; justify-content:flex-end; } .bb-sheet{ background:var(--sand); border-radius:20px 20px 0 0; padding:16px 18px calc(22px + var(--safe-bot)); box-shadow:0 -8px 30px rgba(0,0,0,.18); width:100%; max-width:520px; margin:0 auto; max-height:88vh; overflow-y:auto; animation:bbSheetUp .32s cubic-bezier(.2,.8,.2,1) both; } @keyframes bbSheetUp{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } } .bb-grab{ width:38px; height:4px; border-radius:99px; background:var(--line-2); margin:0 auto 14px; } .bb-sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; } .bb-sheet-chair{ display:flex; align-items:center; gap:12px; min-width:0; } .bb-sheet-av{ width:46px; height:46px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:18px; overflow:hidden; } .bb-sheet-av img{ width:100%; height:100%; object-fit:cover; } .bb-sheet-title{ font-weight:900; font-size:20px; letter-spacing:-.4px; line-height:1.05; } .bb-sheet-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; font-weight:600; } .bb-x{ flex-shrink:0; width:38px; height:38px; border-radius:11px; background:var(--fog); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); } .bb-card{ background:var(--card-hi); border:1px solid var(--line); border-radius:14px; padding:13px; margin-bottom:12px; } .bb-occ-name{ font-size:16px; font-weight:800; letter-spacing:-.2px; } .bb-occ-timer{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:6px 11px; border-radius:999px; background:var(--ink); color:#fff; font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; } .bb-ref{ width:100%; height:130px; border-radius:12px; overflow:hidden; margin-bottom:12px; background:var(--card-2); background-image:repeating-linear-gradient(135deg, rgba(15,23,42,.05) 0 8px, transparent 8px 16px); display:flex; align-items:center; justify-content:center; } .bb-ref img{ width:100%; height:100%; object-fit:cover; } .bb-ref-tag{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); } .bb-deposit{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; background:var(--teal-tint); border:1px solid rgba(64,168,192,.2); border-radius:12px; padding:11px 13px; } .bb-deposit-amt{ font-weight:900; font-size:16px; color:var(--teal-deep); letter-spacing:-.3px; } .bb-deposit.pending{ background:#FBEED0; border-color:rgba(217,145,43,.3); } .bb-deposit.pending .bb-deposit-amt{ color:#8A5A14; } .bb-chip-toggle{ display:inline-flex; border-radius:10px; background:var(--card-2); padding:3px; gap:3px; } .bb-chip-toggle button{ border:none; background:transparent; font:inherit; font-size:11.5px; font-weight:800; color:var(--muted); padding:6px 11px; border-radius:8px; cursor:pointer; } .bb-chip-toggle button.on{ background:var(--sand); color:var(--ink); box-shadow:var(--shadow-card); } /* Reservas/cola dentro de la hoja de silla libre */ .bb-pick{ display:block; width:100%; text-align:left; background:var(--card-hi); border:1.5px solid var(--teal); border-radius:12px; padding:12px 14px; cursor:pointer; } .bb-pick + .bb-pick{ margin-top:8px; } .bb-pick-name{ font-weight:800; font-size:15px; } .bb-pick-meta{ font-size:12.5px; color:var(--muted); margin-top:2px; } .bb-pick-go{ color:var(--teal); font-weight:800; font-size:13px; margin-top:8px; text-align:right; } .bb-or{ text-align:center; color:var(--muted-2); font-size:12px; font-weight:700; margin:12px 0; } .bb-warn{ font-size:12.5px; color:#8A5A14; background:#FBEED0; border:1px solid rgba(217,145,43,.3); border-radius:11px; padding:10px 12px; font-weight:700; } /* ── Editor: selector "Barbero asignado" ─────────────────────────────────── */ /* auto-fill: se reacomoda solo según el ancho disponible, sin media queries */ .bb-barber-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:8px; } .bb-barber-opt{ display:flex; align-items:center; gap:9px; background:var(--card-hi); border:1.5px solid var(--line-2); border-radius:12px; padding:9px 10px; cursor:pointer; text-align:left; transition:border-color .12s, background .12s; min-height:50px; } .bb-barber-opt .bb-av{ width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:14px; overflow:hidden; } .bb-barber-opt .bb-av img{ width:100%; height:100%; object-fit:cover; } .bb-barber-opt .bb-bo-name{ font-size:13px; font-weight:800; color:var(--ink); line-height:1.2; } .bb-barber-opt .bb-bo-sub{ font-size:10.5px; color:var(--muted-2); font-weight:600; margin-top:1px; } .bb-barber-opt.active{ border-color:var(--teal); background:var(--teal-tint); } .bb-barber-opt.none{ justify-content:center; color:var(--muted); font-weight:800; font-size:13px; } .bb-barber-opt.none.active{ border-color:var(--ink); background:var(--card-2); color:var(--ink); } /* ── iPad / panel ancho (≥680px de contenedor): más aire ─────────────────── */ @container bbpanel (min-width:680px){ .bb-summary{ gap:12px; } .bb-stat{ padding:14px 16px; } .bb-stat-num{ font-size:26px; } .bb-staff{ padding:10px 14px 10px 10px; min-height:58px; } .bb-staff .bb-av{ width:40px; height:40px; } } /* ── PC / panel apaisado (≥900px de contenedor): plano + columna lateral ──── */ @container bbpanel (min-width:900px){ .bb-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:22px; } .bb-side{ position:sticky; top:16px; } } /* La hoja se vuelve modal centrado en viewports grandes (overlay = pantalla completa vía portal, por eso aquí sí va por viewport). */ @media (min-width:1024px){ .bb-overlay{ justify-content:center; align-items:center; padding:32px; } .bb-sheet{ border-radius:20px; max-width:480px; margin:0; max-height:84vh; animation:bbSheetIn .26s ease both; } .bb-grab{ display:none; } } @keyframes bbSheetIn{ from{ transform:scale(.97); opacity:0; } to{ transform:none; opacity:1; } } @media (prefers-reduced-motion:reduce){ .bb-sheet{ animation:none; } } /* Fallback sin soporte de @container: usa viewport para la columna lateral */ @supports not (container-type:inline-size){ @media (min-width:900px){ .bb-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:22px; } .bb-side{ position:sticky; top:16px; } } } /* ── Panel del PERSONAL (checador del barbero) ── Shell propio: llena el ancho hasta su máximo (móvil = pantalla; PC/iPad = tablero ancho 2 col). */ .pf-shell{ width:100%; max-width:480px; min-height:100dvh; margin:0 auto; background:var(--sand); color:var(--ink); padding:16px 18px calc(40px + var(--safe-bot,0px)); } @media (min-width:900px){ .pf-shell.pf-wide{ max-width:min(1040px, 95vw); padding:26px 30px 44px; } } .pf-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; } .pf-hello{ font-weight:900; font-size:22px; letter-spacing:-.02em; margin-top:2px; color:var(--ink); } .pf-role{ display:inline-flex; align-items:center; gap:5px; background:var(--teal-tint); color:var(--teal-deep); padding:3px 10px; border-radius:99px; font-size:12px; font-weight:800; margin-top:7px; text-transform:capitalize; } .pf-grid{ display:flex; flex-direction:column; gap:14px; } @media (min-width:900px){ .pf-grid{ display:grid; grid-template-columns:344px minmax(0,1fr); gap:24px; align-items:start; } } .pf-col{ display:flex; flex-direction:column; gap:14px; min-width:0; } .pf-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; } .pf-states{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; } .pf-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:18px 6px; border-radius:14px; border:1.5px solid var(--line); background:var(--card-2); color:var(--muted); font-weight:800; font-size:13px; cursor:pointer; transition:transform .06s ease, opacity .1s ease; } .pf-state.on{ border-width:2px; box-shadow:0 2px 10px rgba(15,23,42,.06); } .pf-state[disabled]{ opacity:.6; cursor:default; } .pf-state:not([disabled]):active{ transform:scale(.96); } .pf-chair{ display:flex; align-items:center; gap:12px; } .pf-chair-badge{ width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; flex-shrink:0; } .pf-daybtns{ display:flex; gap:8px; } .pf-empty{ text-align:center; color:var(--muted); font-size:13px; padding:26px 22px; background:var(--card); border:1px dashed var(--line); border-radius:14px; } .pf-appt{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px; } .pf-appt-top{ font-weight:800; font-size:14px; color:var(--ink); } .pf-pill{ padding:3px 9px; border-radius:99px; font-size:11px; font-weight:800; white-space:nowrap; } /* Cocina (KDS): comandas en cuadrícula. En una tablet caben 2-3; en el celular, una. */ .kds-grid{ display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width:640px){ .kds-grid{ grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); } } .kds-ticket{ display:flex; flex-direction:column; gap:10px; padding:14px; } .kds-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .kds-mins{ padding:3px 9px; border-radius:99px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; } .kds-who{ font-size:12.5px; color:var(--muted); font-weight:700; margin-top:-4px; } .kds-items{ display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--line); padding-top:10px; } .kds-item{ display:flex; gap:9px; align-items:flex-start; } .kds-qty{ font-weight:900; font-size:15px; color:var(--teal-deep); font-variant-numeric:tabular-nums; flex-shrink:0; } .kds-name{ font-weight:800; font-size:14.5px; line-height:1.25; } .kds-mods{ font-size:12px; color:var(--muted); margin-top:2px; } .kds-note{ font-size:12px; color:#8A5A14; background:#FBEED0; border-radius:8px; padding:3px 7px; margin-top:4px; display:inline-block; } .kds-acts{ display:flex; gap:8px; } .kds-wait{ text-align:center; font-size:12px; color:var(--muted); background:var(--fog); border-radius:10px; padding:9px; font-weight:700; } /* Login del personal */ .pf-login{ max-width:380px; margin:0 auto; padding:24px 20px 40px; } .pf-login-ico{ width:60px; height:60px; border-radius:18px; background:var(--teal-tint); color:var(--teal-deep); display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; } /* Roster del gerente: 3 estados seleccionables por persona (presente/descanso/ausente) */ .bb-ppick{ display:flex; gap:3px; margin-top:4px; } .bb-pbtn{ font-size:10px; font-weight:800; line-height:1; padding:3px 6px; border-radius:7px; border:1px solid var(--line); background:var(--card-2); color:var(--muted); cursor:pointer; white-space:nowrap; } .bb-pbtn.on.present{ background:#DCF3E6; border-color:#2FA968; color:#136B3E; } .bb-pbtn.on.break{ background:#FBEED0; border-color:#D9912B; color:#8A5A14; } .bb-pbtn.on.away{ background:#E8EAEE; border-color:#9AA1AC; color:#5B616B; } /* ═══════ RESPONSIVE PC (≥1024) — AL FINAL A PROPÓSITO ═══════ Estas reglas deben ir DESPUÉS de todas las definiciones base del archivo: a igual especificidad gana la última, y aquí pisamos padding/max-width de componentes base (.botnav, .appbar, .qm-*, etc.). NO mover arriba. */ @media (min-width: 1024px) { /* Contenido de toda pantalla scrolleable: centrado a --content-w */ .screen-scroll > * { max-width: var(--content-w); margin-left: auto !important; margin-right: auto !important; } /* Pantallas de FLUJO (carrito/checkout/reserva/cuenta/pedidos): columna legible */ .screen-scroll.flow > * { max-width: var(--flow-w); } /* Barras de lado a lado con el contenido alineado al centro */ .appbar { padding-left: var(--edge); padding-right: var(--edge); } .chiprow { padding-left: var(--edge) !important; padding-right: var(--edge) !important; } .hd-wrap { padding-left: var(--edge) !important; padding-right: var(--edge) !important; } .hd-wrap .searchbox { max-width: 620px; } /* La status bar de teléfono no pinta nada en PC */ .statusbar { display: none; } /* Nav inferior: barra completa, botones agrupados al centro */ .botnav { max-width: none; padding-left: max(0px, calc(50vw - 360px)); padding-right: max(0px, calc(50vw - 360px)); } /* Menú QR: hero y barras full-bleed; las secciones de platillos capadas a --content-w */ .screen-scroll > .qm-hero, .screen-scroll > .qm-catnav, .screen-scroll > .qm-mesa { max-width: none; } .qm-hero { height: 300px; } .qm-hero-foot { left: var(--edge); right: var(--edge); } .qm-hero-top { padding-left: var(--edge); padding-right: var(--edge); } .qm-catrow { padding-left: var(--edge); padding-right: var(--edge); } .qm-mesa { padding-left: var(--edge) !important; padding-right: var(--edge) !important; } /* Panel del negocio: full-bleed con contenido más ancho que el del cliente */ .ho-shell--wide { --content-w: 1520px; max-width: none; } /* Tabs del panel repartidos a lo ANCHO REAL, no encajonados: --edge (=50vw−…) crecía con el viewport y en pantallas anchas agrupaba los íconos al centro. Ahora se distribuyen uniforme a CUALQUIER width (space-evenly + tope por tab), como pedía Jafet. */ .biz-tabs { justify-content: space-evenly; } .biz-tab { flex: 1 1 0; max-width: 220px; } /* Hoja de producto del menú QR: diálogo centrado */ .qm-scrim { align-items: center; padding: 24px; } .qm-sheet { border-radius: 24px; max-height: 86vh; max-width: 520px; } /* ── Fase 1 de diseño PC: TAMAÑOS INTRÍNSECOS (densidad, no estiramiento) ── */ /* Tarjetas del home: la foto SIEMPRE proporción 16:10 — nunca chata ni gigante */ .grid-cards .imgslot { height: auto !important; aspect-ratio: 16 / 10; } /* Header del home: UNA sola fila (logo · buscador · idioma/zona) en vez de dos filas de teléfono estiradas. display:contents aplana la fila original para reordenar sin tocar el layout móvil. */ .hd-wrap { display: flex; align-items: center; gap: 16px; } .hd-wrap > .row.between { display: contents; } .hd-wrap > .row.between > :first-child { order: 0; flex: 0 0 auto; } .hd-wrap > .row.between > :last-child { order: 2; flex: 0 0 auto; margin-left: auto; } .hd-wrap > .searchbox { order: 1; flex: 1 1 auto; max-width: 620px; margin: 0; } /* En PC hay ancho de sobra: el selector de idioma es el segmentado (el mismo del Passport). */ .lang-pc { display: inline-flex !important; } .lang-mob { display: none !important; } /* Ficha del negocio: los bloques que cuelgan del shell (descripción, tira de sellos, Reservar) no pasan por .screen-scroll, así que sin esto se estiraban de borde a borde. El fondo sigue full-bleed; solo el contenido se alinea a la columna. */ .cat-body { padding-left: var(--edge) !important; padding-right: var(--edge) !important; } /* Reservar: de lado a lado de la COLUMNA (mismo ancho que los productos del catálogo), no un botón de 420px perdido en la esquina izquierda. */ .cat-body > .btn { display: flex; width: 100%; } /* Ficha del negocio: hero con más presencia y su contenido alineado a la columna. A 320px de alto en un monitor la foto quedaba en una tira de 4.5:1 = aplastada. */ .cat-hero .imgslot { height: 440px !important; } .cat-hero > .row.between { left: var(--edge) !important; right: var(--edge) !important; top: 24px !important; } .cat-hero > div:last-child { left: var(--edge) !important; right: var(--edge) !important; } /* Menú QR: más aire entre secciones y títulos con presencia de carta */ .qm-sec { padding-top: 52px; } .qm-sec-title { font-size: 22px; } /* Botones de acción sueltos dentro de contenido ancho: ancho de acción, no de página. display:flex (NO inline-flex) es la clave: una caja inline IGNORA `margin: auto`, así que con solo max-width el botón se pegaba a la izquierda de la pantalla. Blockificarlo hace que las auto-margins de `.screen-scroll > *` lo centren. */ .screen-scroll > .btn { max-width: 420px; display: flex; } /* En pantallas de flujo (login, cuenta, checkout, tracking) el botón acompaña al formulario: ancho de la columna, como en móvil. */ .screen-scroll.flow > .btn { max-width: var(--flow-w); } /* Shell sin scroll-area propia (logins, alta de dirección): columna legible, no 1440px. */ .ho-shell--narrow { max-width: 560px; } } /* ── Fase 2 de diseño PC (≥1200): checkout y reservas a 2 COLUMNAS ── Patrón e-commerce: formulario a la izquierda, resumen STICKY a la derecha. En móvil co-cols/co-main/co-side y bk-cols son divs apilados normales. */ @media (min-width: 1200px) { .co-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; } .screen-scroll.flow > .co-cols { max-width: 1080px; } .co-side { position: sticky; top: 16px; } .co-foot { display: flex; justify-content: center; } .co-foot .btn { max-width: 480px; } /* Reservas paso 1: calendario a la izquierda; personas/servicio/CTA a la derecha */ .col.bk-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; } .screen-scroll.flow > .bk-cols { max-width: 1080px; } .bk-cols > :first-child { grid-column: 1; grid-row: 1 / span 9; } .bk-cols > :not(:first-child) { grid-column: 2; } } /* ── POS: barra de herramientas (buscador arriba, acciones abajo) ── En el celular las 3 acciones + el buscador en UNA fila no caben: el buscador quedaba aplastado a un icono y "Ventas externas" se salía de la pantalla. */ /* ── POS: escala tipográfica ───────────────────────────────────────────────── El cajero en celular necesita un ticket compacto; el mismo POS en la compu de la caja se leía con lupa. En vez de clavar píxeles, los tamaños son variables: una sola escala que crece con la pantalla. Nada de números a mano. */ :root{ --pos-xs: 10.5px; /* letra chica: notas, "hace 3 min" */ --pos-sm: 11.5px; /* secundario: subtotales, etiquetas */ --pos-md: 12.5px; /* cuerpo: nombre del producto, línea del ticket */ --pos-lg: 15px; /* énfasis: total, botón de cobro */ --pos-xl: 18px; /* títulos */ --pos-hero: 34px; /* el número grande del cambio */ --pos-tile: 108px; /* ancho mínimo del producto en la cuadrícula */ --pos-ticket: 350px; --pos-tap: 38px; /* alto mínimo de un botón: el dedo manda en el celular */ } /* Tableta (iPad vertical = 820px): ni el POS de bolsillo ni el de escritorio. La letra crece y los botones llegan a 44px, que es el dedo real sobre un vidrio grande. */ @media (min-width: 768px){ :root{ --pos-xs: 11.5px; --pos-sm: 12.5px; --pos-md: 13.5px; --pos-lg: 16px; --pos-xl: 19px; --pos-hero: 38px; --pos-tile: 132px; --pos-tap: 44px; } } @media (min-width: 1024px){ :root{ --pos-xs: 12px; --pos-sm: 13px; --pos-md: 14.5px; --pos-lg: 17px; --pos-xl: 21px; --pos-hero: 42px; --pos-tile: 150px; --pos-ticket: clamp(340px, 30vw, 460px); --pos-tap: 44px; } } @media (min-width: 1600px){ :root{ --pos-xs: 13px; --pos-sm: 14px; --pos-md: 16px; --pos-lg: 19px; --pos-xl: 24px; --pos-hero: 48px; --pos-tile: 175px; --pos-tap: 48px; } } .pos-tools{ display:flex; gap:8px; flex-wrap:wrap; } .pos-tool{ position:relative; display:inline-flex; align-items:center; gap:6px; flex:1 1 auto; justify-content:center; min-height:var(--pos-tap); padding:0 12px; border:1.5px solid var(--line); background:#fff; border-radius:10px; font-size:var(--pos-md); font-weight:800; color:var(--ink); cursor:pointer; white-space:nowrap; } .pos-tool:active{ transform:scale(.98); } .pos-tool > span{ line-height:1; } .pos-tool-badge{ position:absolute; top:-7px; right:-7px; background:#F59E0B; color:#fff; font-size:10px; font-weight:900; border-radius:99px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff; } .pos-tool-dot{ position:absolute; top:-4px; right:-4px; width:11px; height:11px; border-radius:99px; border:2px solid #fff; } @media (max-width:520px){ /* El escáner se queda cuadrado; los otros tres se reparten el ancho */ .pos-tool{ flex:1 1 30%; padding:0 8px; font-size:var(--pos-sm); } } /* ── Estadísticas: en PC hay espacio de sobra, no hay por qué leer con lupa ── */ .st-h{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:900; letter-spacing:.4px; text-transform:uppercase; color:var(--ink); margin:10px 2px 0; } .st-h svg{ color:var(--teal); flex-shrink:0; } .st-card{ background:#F1ECE0; border:1px solid rgba(15,23,42,.07); border-radius:16px; padding:16px; } .st-eyebrow{ font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#94928B; margin-bottom:12px; } .st-big{ font-size:20px; font-weight:900; color:var(--teal); line-height:1; } .st-kpi{ font-size:28px; font-weight:900; color:var(--teal); line-height:1; } .st-row{ font-size:13.5px; } .st-note{ font-size:12px; color:#6B7280; line-height:1.55; } @media (min-width:1024px){ .st-h{ font-size:15px; margin-top:16px; } .st-card{ padding:22px; border-radius:18px; } .st-eyebrow{ font-size:12px; } .st-big{ font-size:30px; } .st-kpi{ font-size:40px; } .st-row{ font-size:15px; } .st-note{ font-size:13px; } } /* ── Onboarding wizard (Config guiada): móvil full-screen, PC tarjeta centrada ── */ .wiz-shell{ position:fixed; inset:0; z-index:700; background:var(--sand); display:flex; flex-direction:column; } .wiz-top{ width:100%; max-width:660px; margin:0 auto; box-sizing:border-box; padding:calc(10px + var(--safe-top)) 18px 10px; display:flex; align-items:center; gap:12px; } .wiz-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; } .wiz-col{ max-width:660px; margin:0 auto; box-sizing:border-box; padding:8px 22px 28px; } .wiz-foot{ padding:12px 18px calc(14px + var(--safe-bot)); border-top:1px solid var(--line); background:var(--sand); } .wiz-foot-in{ display:flex; gap:10px; max-width:660px; margin:0 auto; } .wiz-h{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin:4px 0 4px; line-height:1.15; } .wiz-sub{ font-size:13.5px; color:var(--muted); margin:0 0 18px; line-height:1.5; } /* Foto del negocio: SIEMPRE con proporción fija — nunca una franja estirada a lo ancho */ .wiz-photo{ width:100%; aspect-ratio:16/10; border-radius:14px; overflow:hidden; position:relative; } .wiz-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .wiz-photo-empty{ width:100%; aspect-ratio:16/10; border-radius:14px; border:2px dashed var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--fog); color:var(--muted); box-sizing:border-box; } .wiz-map{ height:250px; width:100%; } @media (min-width:768px){ .wiz-body{ padding:26px 24px 34px; } .wiz-col{ background:var(--card, #fff); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 48px rgba(15,23,42,.08); padding:30px 34px 34px; } .wiz-h{ font-size:28px; } .wiz-sub{ font-size:14.5px; } .wiz-map{ height:340px; } .wiz-foot, .wiz-top{ border:0; } }