— the entire strip is the tap target
(≥48px tall thanks to padding+font-size), the "Ver" affordance inside
is a visual hint, not an independent button. */
.r-session-strip {
position: fixed;
left: 0; right: 0;
/* Sit just above the cart-bar; account for iOS safe-area so we don't
slide under the gesture bar / notch on iPhones (15 Pro, etc). */
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
background: var(--r-accent-light);
color: var(--r-ink);
border-top: 1px solid var(--r-border);
padding: var(--r-sp-3) var(--r-sp-5);
display: flex;
align-items: center;
gap: var(--r-sp-3);
font-size: var(--r-text-sm);
z-index: 59;
cursor: pointer;
/* Mobile baseline from CLAUDE.md feedback_mobile_touch_baseline */
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
}
.r-session-strip[hidden] { display: none; }
.r-session-strip:active {
background: color-mix(in srgb, var(--r-accent-light) 88%, var(--r-ink) 12%);
}
.r-session-strip:focus-visible {
outline: 2px solid var(--r-accent);
outline-offset: -2px;
}
.r-session-strip__label {
color: var(--r-ink-muted);
font-weight: 600;
letter-spacing: 0.01em;
}
.r-session-strip__total {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--r-ink);
}
.r-session-strip__view {
margin-left: auto;
/* Visual button hint with comfortable touch padding (the whole strip
is what the user actually taps — this just looks like a CTA). */
color: var(--r-accent);
font-weight: 600;
font-size: var(--r-text-sm);
padding: var(--r-sp-2) var(--r-sp-3);
pointer-events: none; /* clicks fall through to the strip parent */
}
[dir="rtl"] .r-session-strip__view { margin-left: 0; margin-right: auto; }
/* ── Order detail card — line-by-line history in tracking drawer ─── */
.r-order-card {
border: 1px solid var(--r-border);
background: var(--r-surface);
padding: var(--r-sp-4);
margin-bottom: var(--r-sp-3);
}
.r-order-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--r-sp-3);
font-size: var(--r-text-sm);
}
.r-order-card__id {
font-weight: 700;
color: var(--r-ink);
font-variant-numeric: tabular-nums;
}
.r-order-card__status {
color: var(--r-ink-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: var(--r-text-xs);
}
.r-order-card__status--ready { color: var(--r-accent); }
.r-order-card__status--served { color: var(--r-ink-muted); }
.r-order-card__status--cancelled { color: var(--r-ink-muted); }
/* S122 — diferenciación sutil del pedido activo en tab review (canon Sunday).
Border accent destaca el ticket vigente sin alterar la estructura ni
eliminar información. Si además está ready, el border pulsa suavemente
para llamar la atención (canon: notificación visual no intrusiva). */
.r-order-card--active {
border-color: var(--r-accent);
border-width: 1px;
box-shadow: 0 0 0 1px var(--r-accent);
}
.r-order-card--active-ready {
-webkit-animation: rOrderActivePulse 1.6s ease-in-out infinite;
animation: rOrderActivePulse 1.6s ease-in-out infinite;
}
@-webkit-keyframes rOrderActivePulse {
0%, 100% { box-shadow: 0 0 0 1px var(--r-accent); }
50% { box-shadow: 0 0 0 3px var(--r-accent-light); }
}
@keyframes rOrderActivePulse {
0%, 100% { box-shadow: 0 0 0 1px var(--r-accent); }
50% { box-shadow: 0 0 0 3px var(--r-accent-light); }
}
.r-order-card__items {
display: flex;
flex-direction: column;
gap: var(--r-sp-2);
}
.r-order-card__line {
display: flex;
align-items: baseline;
gap: var(--r-sp-3);
font-size: var(--r-text-sm);
color: var(--r-ink);
}
.r-order-card__line-qty {
color: var(--r-ink-muted);
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 1.8rem;
}
.r-order-card__line-name { flex: 1; }
.r-order-card__line-price {
font-variant-numeric: tabular-nums;
color: var(--r-ink);
}
.r-order-card__foot {
margin-top: var(--r-sp-3);
padding-top: var(--r-sp-3);
border-top: 1px solid var(--r-border-light);
display: flex;
justify-content: space-between;
font-weight: 700;
font-size: var(--r-text-sm);
font-variant-numeric: tabular-nums;
}
.r-order-card__total--cancelled {
text-decoration: line-through;
color: var(--r-ink-muted);
}
.r-order-card--cancelled .r-order-card__line-name,
.r-order-card--cancelled .r-order-card__line-price {
color: var(--r-ink-muted);
}
/* ── Session total — sticky summary at the bottom of tracking body ── */
.r-session-total {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: var(--r-surface);
border-top: 1px solid var(--r-border);
padding: var(--r-sp-4) 0;
margin-top: var(--r-sp-3);
}
.r-session-total__row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: var(--r-text-md);
font-weight: 700;
color: var(--r-ink);
}
.r-session-total__amount {
font-variant-numeric: tabular-nums;
}
.r-session-total__hint {
margin-top: var(--r-sp-2);
font-size: var(--r-text-xs);
color: var(--r-ink-muted);
font-weight: 400;
}
/* S122 — hint agregado cuando todos los pedidos vigentes comparten estado.
Canon Sunday/Adyen: anclaje contextual breve antes del total para que
el cliente capte el momento sin leer ticket-por-ticket. Color por estado
(accent para acción esperada, ink-muted para estados neutrales). */
.r-session-total__agg {
margin-bottom: var(--r-sp-2);
font-size: var(--r-text-sm);
font-weight: 600;
letter-spacing: 0.01em;
}
.r-session-total__agg--pending { color: var(--r-ink-muted); }
.r-session-total__agg--preparing { color: var(--r-accent); }
.r-session-total__agg--ready { color: var(--r-accent); }
/* ── Categories nav (sticky justo debajo del header + strip) ─── */
.r-cat-nav {
background: var(--r-surface);
border-bottom: 1px solid var(--r-border);
padding: 0 var(--r-sp-5);
position: -webkit-sticky;
position: sticky;
top: var(--r-header-h);
z-index: 40;
height: var(--r-cat-nav-h);
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
display: flex;
align-items: center;
gap: var(--r-sp-1);
scrollbar-width: none;
}
.r-cat-nav::-webkit-scrollbar { display: none; }
.r-cat-nav button {
background: transparent; border: none;
padding: var(--r-sp-2) var(--r-sp-4);
font-size: var(--r-text-sm); font-weight: 600;
color: var(--r-ink-muted);
border-bottom: 2px solid transparent;
transition: color var(--r-tr-fast), border-color var(--r-tr-fast);
border-radius: 0;
}
.r-cat-nav button:hover { color: var(--r-ink); }
.r-cat-nav button.is-active {
color: var(--r-ink); border-bottom-color: var(--r-accent);
}
/* ── Menu list ────────────────────────────────────────────────── */
.r-main { padding: var(--r-sp-5) var(--r-sp-5) 8rem var(--r-sp-5); max-width: 720px; margin: 0 auto; }
/* Cuando el cart strip está visible, la nav de categorías queda debajo
del strip (ambos sticky, stack natural). El scroll-margin-top de los
títulos debe respetar también la altura del strip (44px) o se ocultan. */
:root { --r-cart-strip-h: 0px; }
body.has-cart-strip { --r-cart-strip-h: 44px; }
body.has-cart-strip .r-cat-nav {
top: calc(var(--r-header-h) + var(--r-cart-strip-h));
}
.r-cat-title {
font-size: var(--r-text-xs); font-weight: 700; margin: var(--r-sp-8) 0 var(--r-sp-4) 0;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--r-ink-muted);
/* Reservar el espacio del header sticky + (strip si está) + nav sticky
cuando se hace scroll-into-view via click en un tab. */
scroll-margin-top: calc(var(--r-header-h) + var(--r-cart-strip-h) + var(--r-cat-nav-h) + 8px);
}
.r-cat-title:first-child { margin-top: var(--r-sp-4); }
.r-item {
display: flex; gap: var(--r-sp-4);
background: var(--r-surface);
padding: var(--r-sp-4);
margin-bottom: var(--r-sp-3);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
cursor: pointer;
transition: box-shadow var(--r-tr-fast), border-color var(--r-tr-fast), transform var(--r-tr-fast);
box-shadow: var(--r-shadow-xs);
}
.r-item:hover { box-shadow: var(--r-shadow-md); border-color: var(--r-border); }
.r-item:active { transform: scale(.985); box-shadow: var(--r-shadow-xs); }
.r-item__img {
position: relative;
width: 80px; height: 80px;
background: #fff;
flex-shrink: 0;
/* contain — never crop. Product photos are shot on white, so a white tile
lets them float seamlessly (no grey "boxed photo" band). */
background-size: contain; background-repeat: no-repeat; background-position: center;
display: flex; align-items: center; justify-content: center;
font-size: 2.25rem;
line-height: 1;
border-radius: var(--r-radius-sm);
overflow: hidden;
}
.r-item__img--has-image { font-size: 0; }
.r-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r-item__name {
font-size: var(--r-text-base); font-weight: 600; margin: 0 0 var(--r-sp-1) 0;
letter-spacing: -0.01em;
color: var(--r-ink);
}
.r-item__desc {
font-size: var(--r-text-sm); color: var(--r-ink-muted);
margin: 0 0 var(--r-sp-2) 0; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.r-item__price {
font-size: var(--r-text-base); font-weight: 700; color: var(--r-ink);
font-variant-numeric: tabular-nums;
}
/* ── Modal (item detail / modifiers) ───────────────────────────── */
.r-modal {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex; align-items: flex-end; justify-content: center;
z-index: 100;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.r-modal.is-open { opacity: 1; pointer-events: auto; }
.r-modal__panel {
background: var(--r-surface);
width: 100%; max-width: 560px;
max-height: 90vh; overflow-y: auto;
/* NO top padding: the sticky bar pins to the content-box top edge, so any
top padding leaves a dead strip above the bar where scrolled content
bleeds through. All content lives inside .r-modal__sheet (own padding). */
padding: 0 var(--r-sp-6) var(--r-sp-6);
border-radius: var(--r-radius-lg) var(--r-radius-lg) 0 0;
box-shadow: var(--r-shadow-xl);
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
}
.r-modal.is-open .r-modal__panel {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* "Genie" confirm close on add-to-cart: the sheet shrinks toward the cart bar
(bottom) instead of a plain slide. Slower + eased so it reads as a deliberate
gesture. Overlay fade is slowed to match so the genie plays to the end. */
.r-modal.is-confirming { transition: opacity 480ms ease; }
.r-modal.is-confirming .r-modal__panel {
transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1), opacity 380ms ease;
transform-origin: 50% 130%;
-webkit-transform: translate3d(0, 6%, 0) scale(0.86);
transform: translate3d(0, 6%, 0) scale(0.86);
opacity: 0;
}
.r-modal__img {
/* Hero: full-bleed SQUARE — the exact 1:1 treatment that already works in the
card. The source photos are 1024×1024, so a square box + `contain` fills the
hero edge-to-edge with NO side/top gaps and never crops the product.
STICKY: the hero pins to the top while the content sheet scrolls over it and
fades it out (Material collapsing toolbar / Wikipedia gallery). The sticky
bar (z-index 6) overlays its top corner. */
position: sticky; top: 0; z-index: 0;
aspect-ratio: 1 / 1;
width: calc(100% + 2 * var(--r-sp-6));
margin: 0 calc(-1 * var(--r-sp-6)) 0 calc(-1 * var(--r-sp-6));
background-color: #fff;
background-size: contain; background-repeat: no-repeat; background-position: center;
display: flex; align-items: center; justify-content: center;
font-size: 5rem;
line-height: 1;
border-radius: var(--r-radius-lg) var(--r-radius-lg) 0 0;
overflow: hidden;
}
/* Content sheet that rises over the sticky hero (rounded top, soft lift). */
.r-modal__sheet {
position: relative; z-index: 1;
background: var(--r-surface);
margin: calc(-1 * var(--r-sp-5)) calc(-1 * var(--r-sp-6)) calc(-1 * var(--r-sp-6));
padding: var(--r-sp-5) var(--r-sp-6) var(--r-sp-6);
border-radius: var(--r-radius-lg) var(--r-radius-lg) 0 0;
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
}
/* No hero (image-less item): the sheet is flush at the panel top, with room for
the sticky back-bar (52px) instead of overlapping a hero. */
.r-modal__sheet--flush {
margin-top: 0;
border-radius: 0;
box-shadow: none;
padding-top: calc(52px + var(--r-sp-2));
}
/* ── Image preloader: skeleton shimmer → fade-in (cards, list, hero) ──
Background-image boxes can't fire `load`, so JS preloads via `new Image()`,
paints the bg + flips `.is-loaded`. The shimmer overlay fades out on top of
the (now painted) image → reads as a smooth reveal. Same UX as Pharmacy. */
.r-img::before {
content: ''; position: absolute; inset: 0; z-index: 1;
opacity: 0; pointer-events: none;
background: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 40%, #eef1f5 80%);
background-size: 200% 100%;
transition: opacity 0.4s ease;
}
.r-img.is-loading::before {
opacity: 1;
animation: rImgShimmer 1.4s ease-in-out infinite;
}
@keyframes rImgShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.r-modal__img--has-image { background-color: #fff; font-size: 0; }
/* ── Collapsing app-bar over the hero (Material/Wikipedia pattern) ──
Transparent bar overlaying the hero top; turns solid white + reveals the
title once the sheet is scrolled past the hero. */
.r-modal__bar {
position: sticky; top: 0; z-index: 6;
height: 52px; margin: 0 calc(-1 * var(--r-sp-6)) -52px calc(-1 * var(--r-sp-6));
width: calc(100% + 2 * var(--r-sp-6));
display: flex; align-items: center; gap: var(--r-sp-2);
padding: 0 var(--r-sp-3);
/* Reveal driven by --bar-reveal (0→1), tied to the
sliding under the
bar. The reveal flips across a narrow band, so a short transition smooths
the crossfade (no lag: reveal is ~binary, not tracking scroll frame-by-
frame). bg/border/title/back-chip all interpolate from the same value. */
background-color: rgba(255, 255, 255, var(--bar-reveal, 0));
border-bottom: 1px solid rgba(15, 23, 42, calc(var(--bar-reveal, 0) * 0.08));
transition: background-color 200ms ease, border-color 200ms ease;
pointer-events: none;
}
.r-modal__bar.is-solid {
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* No-hero items: bar is solid white from the start so scrolled content never
bleeds through it (the title still fades in on scroll via --bar-reveal). */
.r-modal__bar--plain {
background: var(--r-surface);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.r-modal__bar-back {
pointer-events: auto;
width: 44px; height: 44px; flex: 0 0 auto; /* ≥44px touch target (contract §7) */
display: flex; align-items: center; justify-content: center;
border: none; border-radius: var(--r-radius-full, 999px);
/* the circular chip dissolves as the bar turns solid */
background-color: rgba(255, 255, 255, calc(0.85 * (1 - var(--bar-reveal, 0))));
box-shadow: 0 1px 2px rgba(0, 0, 0, calc(0.12 * (1 - var(--bar-reveal, 0))));
color: var(--r-ink);
font-size: 26px; line-height: 1; cursor: pointer;
transition: background-color 200ms ease, box-shadow 200ms ease;
}
.r-modal__bar-title {
flex: 1 1 auto; min-width: 0; /* required for ellipsis in flex */
font-size: var(--r-text-md); font-weight: 700; letter-spacing: -0.01em;
color: var(--r-ink); opacity: var(--bar-reveal, 0);
transition: opacity 200ms ease;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-modal__name { font-size: var(--r-text-lg); font-weight: 700; margin: 0 0 var(--r-sp-1) 0; letter-spacing: -0.02em; }
.r-modal__desc { color: var(--r-ink-muted); font-size: var(--r-text-sm); margin: 0 0 var(--r-sp-5) 0; line-height: 1.5; }
.r-mod-group { margin: var(--r-sp-5) 0; }
.r-mod-group__name {
font-size: var(--r-text-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--r-ink-muted); margin-bottom: var(--r-sp-2);
}
.r-mod-option {
display: flex; align-items: center; justify-content: space-between;
padding: var(--r-sp-3) var(--r-sp-4);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-sm);
margin-bottom: var(--r-sp-2); cursor: pointer;
font-size: var(--r-text-sm);
transition: border-color var(--r-tr-fast), background var(--r-tr-fast), color var(--r-tr-fast), box-shadow var(--r-tr-fast);
}
.r-mod-option:hover { border-color: var(--r-ink-faint); }
.r-mod-option.is-selected {
border-color: var(--r-accent); background: var(--r-accent); color: #fff;
box-shadow: 0 2px 8px rgba(79,70,229,.2);
}
.r-mod-option .r-delta { font-weight: 600; opacity: 0.85; }
.r-modal__qty {
display: flex; justify-content: center;
padding: var(--r-sp-4) 0;
}
.r-modal__actions {
display: flex; gap: var(--r-sp-3);
position: sticky; bottom: 0; background: var(--r-surface); padding-top: var(--r-sp-4);
border-top: 1px solid var(--r-border-light);
}
/* Order confirmation screen inside cart drawer */
.r-order-confirmed {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: var(--r-sp-12) var(--r-sp-4);
}
.r-order-confirmed__icon {
color: var(--r-success);
margin-bottom: var(--r-sp-5);
animation: rConfirmPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rConfirmPop {
from { opacity: 0; transform: scale(.6); }
to { opacity: 1; transform: scale(1); }
}
.r-order-confirmed__id {
font-size: var(--r-text-xl); font-weight: 700;
color: var(--r-ink);
margin-bottom: var(--r-sp-2);
font-variant-numeric: tabular-nums;
}
.r-order-confirmed__text {
font-size: var(--r-text-base);
color: var(--r-ink-muted);
line-height: 1.5;
}
.r-order-confirmed__status {
font-size: var(--r-text-lg); font-weight: 600;
color: var(--r-ink);
margin-top: var(--r-sp-1);
}
.r-order-confirmed__cta {
width: 100%;
max-width: 280px;
margin-top: var(--r-sp-8);
}
/* Status-specific icon colors */
.r-order-confirmed--pending .r-order-confirmed__icon { color: #f59e0b; }
.r-order-confirmed--preparing .r-order-confirmed__icon { color: #3b82f6; }
.r-order-confirmed--ready .r-order-confirmed__icon { color: #16a34a; }
.r-order-confirmed--ready .r-order-confirmed__status { color: #16a34a; }
.r-order-confirmed--served .r-order-confirmed__icon { color: #16a34a; }
.r-order-confirmed--served .r-order-confirmed__status { color: #16a34a; }
.r-order-confirmed--cancelled .r-order-confirmed__icon { color: #ef4444; }
.r-order-confirmed--cancelled .r-order-confirmed__status { color: #ef4444; }
/* Pulse animation for "ready" state */
.r-order-confirmed__icon.is-pulse {
animation: rTrackPulse 1.2s ease-in-out infinite;
}
@keyframes rTrackPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
/* Previous orders history (multi-order tracking) */
.r-track-history {
border-top: 1px solid var(--r-border);
margin-top: var(--r-sp-4);
padding-top: var(--r-sp-4);
}
.r-track-history__title {
font-size: var(--r-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--r-ink-muted);
margin-bottom: var(--r-sp-2);
}
.r-track-history__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--r-border-light);
font-size: var(--r-text-sm);
}
.r-track-history__row:last-child { border-bottom: none; }
.r-track-history__id { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-track-history__status { font-weight: 600; }
.r-track-history__row--served .r-track-history__status { color: #16a34a; }
.r-track-history__row--ready .r-track-history__status { color: #16a34a; }
.r-track-history__row--preparing .r-track-history__status { color: #3b82f6; }
.r-track-history__row--pending .r-track-history__status { color: #f59e0b; }
.r-track-history__row--cancelled .r-track-history__status { color: #ef4444; }
/* Push prompt in tracking footer */
.r-order-tracking__push {
padding: var(--r-sp-4); text-align: center;
}
.r-order-tracking__push-text {
font-size: var(--r-text-sm); color: var(--r-ink-muted);
margin-bottom: var(--r-sp-3);
}
.r-order-tracking__push-text--ok {
color: var(--r-success);
}
.r-order-tracking__push-btns {
display: flex; gap: var(--r-sp-2); justify-content: center;
}
.r-order-tracking__hint {
font-size: var(--r-text-xs); color: var(--r-ink-muted);
text-align: center; padding: var(--r-sp-2) var(--r-sp-4) 0;
}
.r-btn {
border: none;
padding: var(--r-sp-4) var(--r-sp-5);
font-size: var(--r-text-base); font-weight: 600;
letter-spacing: 0.01em;
border-radius: var(--r-radius-sm);
transition: background var(--r-tr-fast), transform 0.1s, box-shadow var(--r-tr-fast);
}
.r-btn:active { transform: scale(.98); }
.r-btn--primary { background: var(--r-ink); color: #fff; flex: 1; }
.r-btn--primary:hover { background: var(--r-ink-light); box-shadow: var(--r-shadow-md); }
/* Send-order button — app-like idle → spinner → check.
Mismo mecanismo que .r-contact__btn-* (reusa @keyframes rSpin). */
.r-cart-send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.r-cart-send__spinner,
.r-cart-send__check { display: none; }
.r-cart-send.is-sending .r-cart-send__text,
.r-cart-send.is-sent .r-cart-send__text { display: none; }
.r-cart-send.is-sending .r-cart-send__spinner {
display: inline-block;
width: 18px; height: 18px;
border: 2px solid rgba(255,255,255,.3);
border-top-color: #fff;
border-radius: 50%;
animation: rSpin .6s linear infinite;
}
.r-cart-send.is-sent .r-cart-send__check { display: inline-block; color: #fff; }
.r-btn--ghost { background: var(--r-surface-subtle); color: var(--r-ink); border: 1px solid var(--r-border); }
/* ── Cart bar (sticky bottom) ──────────────────────────────────── */
.r-cart-bar {
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--r-ink); color: #fff;
padding: var(--r-sp-4) var(--r-sp-5);
/* Reserve gesture-bar / notch on iOS so content doesn't sit under it */
padding-bottom: calc(var(--r-sp-4) + env(safe-area-inset-bottom, 0px));
display: none; align-items: center; justify-content: space-between;
z-index: 60;
box-shadow: 0 -4px 24px rgba(0,0,0,.12);
border-radius: var(--r-radius-lg) var(--r-radius-lg) 0 0;
}
.r-cart-bar.is-visible { display: flex; }
/* Orders-mode: cart empty but active/past orders exist — accessible history */
.r-cart-bar.is-orders-mode {
background: var(--r-accent, #4f46e5);
}
.r-cart-bar.is-orders-mode .r-cart-bar__count {
background: rgba(255,255,255,.25);
}
.r-cart-bar__count {
background: rgba(255,255,255,.15); color: #fff;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: var(--r-text-sm);
margin-right: var(--r-sp-3);
border-radius: var(--r-radius-full);
}
.r-cart-bar__total { font-weight: 700; font-size: var(--r-text-md); font-variant-numeric: tabular-nums; }
.r-cart-bar__cta {
background: var(--r-surface); color: var(--r-ink); border: none;
padding: var(--r-sp-3) var(--r-sp-5); font-weight: 600;
letter-spacing: 0.01em; font-size: var(--r-text-sm);
border-radius: var(--r-radius-sm);
transition: background var(--r-tr-fast), transform 0.1s;
}
.r-cart-bar__cta:hover { background: var(--r-surface-subtle); }
.r-cart-bar__cta:active { transform: scale(.97); }
/* ── Cart drawer (universal cross-browser) ─────────────────────────
Patrón del drawer: el contenedor SIEMPRE está en el DOM con
pointer-events:none + opacidad 0 + panel transformado off-screen.
Esto da al browser dos estados detectables que SÍ animan en
TODOS los motores (WebKit, Blink, Gecko). Sin display:none, sin
visibility, sin requestAnimationFrame hacks.
Backdrop: usamos rgba sólido como base (universal). Si el browser
soporta backdrop-filter, lo aplicamos como mejora progresiva.
*/
.r-cart-drawer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
-webkit-tap-highlight-color: transparent;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.r-cart-drawer.is-open {
opacity: 1;
pointer-events: auto;
}
.r-cart-drawer__panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 100%;
max-width: 440px;
background: var(--r-surface);
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition: -webkit-transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
box-shadow: var(--r-shadow-xl);
will-change: transform;
-webkit-overflow-scrolling: touch;
border-radius: var(--r-radius-lg) 0 0 var(--r-radius-lg);
}
.r-cart-drawer.is-open .r-cart-drawer__panel {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.r-cart-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--r-sp-5) var(--r-sp-6);
border-bottom: 1px solid var(--r-border-light);
flex-shrink: 0;
}
.r-cart-drawer__title {
font-size: var(--r-text-md); font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
}
.r-cart-drawer__title-sub {
font-size: var(--r-text-xs); font-weight: 500;
color: var(--r-ink-muted); margin-top: 2px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.r-cart-drawer__close {
background: transparent; border: 1px solid var(--r-border);
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
border-radius: var(--r-radius-sm);
transition: border-color var(--r-tr-fast), background-color var(--r-tr-fast);
}
.r-cart-drawer__close:hover { border-color: var(--r-ink-faint); background: var(--r-surface-subtle); }
.r-cart-drawer__close svg { stroke: var(--r-ink); }
.r-cart-drawer__body {
flex: 1;
overflow-y: auto;
padding: 0 var(--r-sp-6);
-webkit-overflow-scrolling: touch;
}
.r-cart-drawer__foot {
border-top: 1px solid var(--r-border-light);
padding: var(--r-sp-5) var(--r-sp-6) var(--r-sp-6) var(--r-sp-6);
flex-shrink: 0;
background: var(--r-surface);
}
/* ── Cart line (with quantity stepper) ── */
.r-cart-line {
display: flex; gap: var(--r-sp-4);
align-items: flex-start;
padding: var(--r-sp-4) 0;
border-bottom: 1px solid var(--r-border-light);
}
.r-cart-line:first-child { padding-top: var(--r-sp-5); }
.r-cart-line:last-child { border-bottom: none; }
.r-cart-line__emoji {
font-size: 1.75rem;
line-height: 1;
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--r-surface-subtle);
border-radius: var(--r-radius-sm);
}
.r-cart-line__img {
flex-shrink: 0;
width: 44px; height: 44px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: var(--r-surface-subtle);
border-radius: var(--r-radius-sm);
}
.r-cart-line__body { flex: 1; min-width: 0; }
.r-cart-line__name {
font-weight: 600; font-size: var(--r-text-base);
color: var(--r-ink);
line-height: 1.3;
}
.r-cart-line__mods {
font-size: var(--r-text-xs); color: var(--r-ink-muted);
margin-top: var(--r-sp-1);
line-height: 1.4;
}
.r-cart-line__row {
display: flex; align-items: center; justify-content: space-between;
margin-top: var(--r-sp-3);
gap: var(--r-sp-3);
}
.r-cart-line__price {
font-weight: 600; font-size: var(--r-text-base);
color: var(--r-ink);
font-variant-numeric: tabular-nums;
}
/* Quantity stepper */
.r-qty {
display: inline-flex; align-items: center;
border: 1px solid var(--r-border);
border-radius: var(--r-radius-sm);
overflow: hidden;
}
.r-qty button {
background: transparent;
border: none;
width: 40px; height: 40px;
font-size: 1.125rem; font-weight: 600;
color: var(--r-ink);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background-color var(--r-tr-fast);
/* Mobile touch baseline — prevents 300ms double-tap-zoom delay */
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,.08);
user-select: none;
-webkit-user-select: none;
}
.r-qty button:hover { background: var(--r-surface-subtle); }
.r-qty button:disabled { color: var(--r-border); cursor: not-allowed; }
.r-qty__value {
min-width: 36px; text-align: center;
font-weight: 600; font-size: var(--r-text-base);
color: var(--r-ink);
font-variant-numeric: tabular-nums;
user-select: none;
}
.r-cart-empty {
text-align: center;
padding: var(--r-sp-12) var(--r-sp-4);
color: var(--r-ink-muted);
}
.r-cart-empty__icon {
font-size: 3rem;
margin-bottom: var(--r-sp-4);
opacity: 0.3;
}
.r-cart-empty__title {
font-size: var(--r-text-base); font-weight: 600;
color: var(--r-ink-muted);
margin-bottom: var(--r-sp-1);
}
.r-cart-total {
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--r-text-lg); font-weight: 700;
margin-bottom: var(--r-sp-4);
padding-bottom: var(--r-sp-4);
border-bottom: 1px solid var(--r-border);
}
.r-cart-total__amount {
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* Mobile: drawer enters from bottom, takes 90vh */
@media (max-width: 640px) {
.r-cart-drawer__panel {
top: auto;
right: 0; left: 0;
max-width: none;
width: 100%;
max-height: 92vh;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16);
border-radius: var(--r-radius-xl) var(--r-radius-xl) 0 0;
}
.r-cart-drawer.is-open .r-cart-drawer__panel {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* ── Toast ─────────────────────────────────────────────────────── */
.r-toast {
position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(8px);
background: var(--r-ink); color: #fff;
padding: var(--r-sp-3) var(--r-sp-6);
font-weight: 600; font-size: var(--r-text-sm);
letter-spacing: 0.01em;
z-index: 200;
opacity: 0; pointer-events: none;
transition: opacity var(--r-tr-base), transform var(--r-tr-base);
border-radius: var(--r-radius-full);
box-shadow: var(--r-shadow-lg);
}
.r-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ── KITCHEN view ──────────────────────────────────────────────── */
.r-kitchen { padding: 1.5rem; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
/* Kitchen tools (sound + refresh) — 2 small icon buttons that live in the
header next to the locale select. Idéntico patrón visual. */
.r-kitchen__tools {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.r-kitchen__tool-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 36px;
width: 36px;
box-sizing: border-box;
background: var(--r-surface);
color: var(--r-ink);
border: 1px solid var(--r-border);
padding: 0;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
transition: border-color 0.15s, background-color 0.15s;
}
.r-kitchen__tool-btn:hover {
border-color: var(--r-ink);
background: var(--r-surface-subtle);
}
.r-kitchen__tool-btn:focus { outline: none; }
.r-kitchen__tool-btn svg { display: block; }
.r-kitchen__tool-btn.is-muted svg { opacity: 0.4; }
/* LIVE badge (used in kitchen header) */
@-webkit-keyframes rPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes rPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ── OWNER FOOTER (4 vistas: edit, kitchen, sales, qr) ────────
Footer fijo con tab bar 4 cols equiespaciadas, ÚNICAMENTE visible
en móvil (≤768px). En desktop la nav vive en el header arriba (.r-sales__nav)
y este footer queda oculto.
Patrón: iOS Mail / Slack mobile tab bars. */
.r-owner-footer {
display: none; /* hidden by default — only shown in mobile via media query below */
}
@media (max-width: 768px) {
/* In mobile: SHOW footer, HIDE the nav inline of header */
.r-owner-nav-inline,
.r-edit__header > nav,
.r-sales__header > nav {
display: none !important;
}
.r-owner-footer {
display: block;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--r-surface);
border-top: 1px solid var(--r-border);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
z-index: 90;
}
.r-owner-footer__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
}
.r-owner-footer__cell {
-webkit-appearance: none;
appearance: none;
background: var(--r-surface);
border: none;
border-left: 1px solid #f1f1f1;
border-radius: 0;
margin: 0;
box-sizing: border-box;
width: 100%;
height: 56px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
color: var(--r-ink-muted);
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
}
.r-owner-footer__cell:first-child { border-left: none; }
.r-owner-footer__cell:hover { background: #fafafa; color: #0a0a0a; }
.r-owner-footer__cell.is-active {
color: #fafafa;
background: var(--r-ink);
}
/* Reserve space for the fixed footer so content doesn't get hidden */
.r-edit, .r-sales, .r-kitchen {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Demo mode (welcome/kitchen): no footer because no nav */
.r-edit--demo {
padding-bottom: 1.5rem !important;
}
}
/* Sistema unificado de controles del header de kitchen.
Misma altura exacta (36px), mismo border, mismo font.
Aplica a select + buttons de icono → indistinguibles visualmente. */
.r-kitchen__control {
height: 36px;
box-sizing: border-box;
background: var(--r-surface);
color: var(--r-ink);
border: 1px solid var(--r-border);
padding: 0 12px;
font-family: inherit;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: border-color 0.15s, background-color 0.15s;
margin: 0;
/* Reset all browser native styles */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}
.r-kitchen__control:hover {
border-color: var(--r-ink);
background: var(--r-surface-subtle);
}
.r-kitchen__control:focus-visible {
outline: 2px solid var(--r-ink);
outline-offset: -1px;
}
/* Select variant — chevron embedded SVG, no native dropdown arrow */
.r-kitchen__control--select {
padding-right: 30px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 9px center;
min-width: 64px;
}
/* Icon-only variant — square 36×36 (sound, refresh) */
.r-kitchen__control--icon {
width: 36px;
padding: 0;
}
.r-kitchen__control--icon svg {
width: 16px;
height: 16px;
}
.r-kitchen__control--icon.is-muted svg { opacity: 0.4; }
.r-kitchen__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--r-sp-3);
}
@media (max-width: 599px) {
.r-kitchen__grid { grid-template-columns: 1fr; gap: var(--r-sp-2); }
}
/* Filter warning — shows when orders are hidden by active filters */
.r-kitchen__filter-warn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
margin: 0 0 var(--r-sp-2);
background: var(--r-warn-light, #fffbeb);
border: 1px solid var(--r-warn, #d97706);
color: #92400e;
font-size: 0.8125rem;
font-weight: 600;
}
/* ── KANBAN board ─────────────────────────────────────────────── */
.r-kitchen__stats {
display: flex;
gap: 16px;
padding: 0 0 8px 0;
font-size: 13px;
color: var(--color-muted, #64748b);
}
.r-kitchen__stats > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.r-kitchen__stats svg {
flex-shrink: 0;
}
.r-kitchen__filters {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 0 0 12px 0;
}
.r-kanban {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--r-sp-3);
align-items: start;
}
.r-kanban__col {
min-width: 0;
}
.r-kanban__col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
margin-bottom: var(--r-sp-2);
font-size: var(--r-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #fff;
border: none;
}
.r-kanban__col-head--pending { background: #f59e0b; }
.r-kanban__col-head--preparing { background: #3b82f6; }
.r-kanban__col-head--ready { background: #16a34a; }
.r-kanban__col-body {
display: flex;
flex-direction: column;
gap: var(--r-sp-2);
}
.r-kanban__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 800;
border-radius: 10px;
background: rgba(255,255,255,0.3);
color: #fff;
line-height: 1;
}
/* Kanban tabs — mobile only */
.r-kanban__tabs {
display: none;
}
@media (max-width: 767px) {
.r-kanban__tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-bottom: var(--r-sp-2);
border: 1px solid var(--r-border);
}
.r-kanban__tab {
-webkit-appearance: none;
appearance: none;
background: var(--r-surface);
border: none;
border-left: 1px solid var(--r-border);
padding: 10px 4px;
font-family: inherit;
font-size: var(--r-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--r-ink-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background-color 0.15s, color 0.15s;
}
.r-kanban__tab:first-child { border-left: none; }
.r-kanban__tab .r-kanban__badge {
background: var(--r-border);
color: var(--r-ink-muted);
}
.r-kanban__tab.is-active {
background: var(--r-ink);
color: #fff;
}
.r-kanban__tab.is-active .r-kanban__badge {
background: rgba(255,255,255,0.25);
color: #fff;
}
/* In mobile: single column, hide non-active */
.r-kanban {
display: block;
}
.r-kanban__col.is-hidden-mobile {
display: none;
}
.r-kanban__col-head {
display: none; /* tabs replace headers */
}
}
.r-order {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-4);
box-shadow: var(--r-shadow-sm);
transition: box-shadow var(--r-tr-fast);
min-width: 0;
word-break: break-word;
}
@media (min-width: 600px) { .r-order { padding: var(--r-sp-5); } }
.r-order--pending { border-color: #f59e0b; }
.r-order--preparing { border-color: #3b82f6; }
.r-order--ready { border-color: #16a34a; }
.r-order--served { opacity: 0.5; }
.r-order__head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 12px; flex-wrap: wrap; gap: 4px;
min-width: 0;
}
.r-order__head > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; min-width: 0; }
.r-order__num { font-size: 1.25rem; font-weight: 800; }
.r-order__time { font-size: 0.75rem; color: #64748b; flex-shrink: 0; }
.r-order__table {
background: var(--r-ink); color: #fff;
padding: 2px 8px; font-size: 0.6875rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
white-space: nowrap;
}
.r-order__items { margin: 12px 0; }
.r-order__item {
padding: 10px 0; border-bottom: 1px dashed #e2e8f0;
font-size: 0.9375rem;
}
.r-order__item:last-child { border-bottom: none; }
.r-order__item-name { font-weight: 700; word-break: break-word; }
.r-order__item-mods { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.r-order__item-qty {
background: #f1f5f9; padding: 3px 8px;
font-weight: 700; font-size: 0.8125rem; margin-right: 8px;
}
.r-order__total {
display: flex; justify-content: space-between;
padding-top: 12px; border-top: 1px solid #e2e8f0;
font-weight: 800; font-size: 1rem;
}
.r-order__actions {
display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.r-order__btn {
flex: 1 1 auto; border: none;
padding: 12px 12px;
font-size: 0.75rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.04em;
min-width: 0; white-space: nowrap;
cursor: pointer;
}
.r-order__btn--accept { background: #3b82f6; color: #fff; }
.r-order__btn--ready { background: #16a34a; color: #fff; }
.r-order__btn--served { background: #475569; color: #fff; }
.r-order__btn--cancel { background: #fee2e2; color: #b91c1c; }
.r-order__btn--cashier {
background: #fff; color: var(--r-ink);
border: 1px solid var(--r-border);
text-decoration: none;
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 12px;
}
.r-order__btn--cashier:hover { border-color: var(--r-ink); }
/* Fast checkout — inline pay button on each kitchen card (S58) */
.r-order__btn--pay {
background: #0a7a3d;
color: #fff;
flex: 0 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 14px;
}
.r-order__btn--pay:hover { background: #086030; }
.r-order__btn--pay svg { flex-shrink: 0; }
/* Focus pulse — scroll-target highlight when arriving from a deep link
like /restaurants/kitchen?focus=order:42 (kitchen) or
/restaurants/tables?focus=table:5 (cashier). */
@keyframes r-focus-pulse {
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); }
50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .2); }
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.is-focused { animation: r-focus-pulse 1.5s ease-out; }
.r-empty {
text-align: center; padding: 4rem 1rem;
color: #94a3b8; font-size: 0.9375rem;
}
.r-empty strong { display: block; font-size: 1.125rem; color: #475569; margin-bottom: 4px; }
/* ── EDIT panel ────────────────────────────────────────────────── */
.r-edit { padding: 4px; max-width: 1100px; margin: 0 auto; }
@media (min-width: 600px) { .r-edit { padding: 1rem; } }
@media (min-width: 1024px) { .r-edit { padding: 1.5rem; } }
.r-edit__title {
font-size: 1.25rem; font-weight: 800; margin: 0 0 1rem 0;
padding-bottom: 0.75rem; border-bottom: 2px solid var(--r-ink);
}
.r-edit__bar {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
padding: 8px; background: #fff;
border: 1px solid var(--r-border); margin-bottom: var(--r-sp-2);
position: sticky; top: 0; z-index: 30;
}
@media (min-width: 600px) { .r-edit__bar { padding: 12px 16px; gap: 8px; } }
.r-edit__bar .r-spacer { flex: 1; }
.r-status {
font-size: 0.75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--r-ink-muted);
}
.r-status--ok { color: #16a34a; }
.r-status--error { color: #b91c1c; }
.r-edit__section {
background: var(--r-surface); border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-2); margin-bottom: var(--r-sp-2);
box-shadow: var(--r-shadow-xs);
min-width: 0; word-break: break-word;
}
@media (min-width: 600px) { .r-edit__section { padding: var(--r-sp-4); margin-bottom: var(--r-sp-4); } }
@media (min-width: 1024px) { .r-edit__section { padding: var(--r-sp-5); } }
/* Zone editor rows — single-line layout with expanding input */
.r-zone-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
flex-wrap: nowrap;
position: relative;
}
.r-zone-row--invalid {
border-left: 3px solid #dc2626;
background: #fef2f2;
padding-left: 6px;
}
.r-zone-row--invalid input {
border-color: #dc2626;
}
.r-zone-row__color {
width: 28px; height: 28px;
border: 1px solid var(--r-border);
padding: 0; cursor: pointer;
flex-shrink: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
}
.r-zone-row__color::-webkit-color-swatch-wrapper { padding: 0; }
.r-zone-row__color::-webkit-color-swatch { border: none; }
.r-zone-row__color::-moz-color-swatch { border: none; }
.r-zone-row__name-wrap {
position: relative;
display: inline-flex;
align-items: center;
min-width: 0;
flex: 1 1 auto;
max-width: 200px;
}
.r-zone-row__name-ghost {
visibility: hidden;
white-space: pre;
font-size: 0.875rem;
font-family: inherit;
padding: 6px 10px;
border: 1px solid transparent; /* match input border for same box model */
min-width: 50px;
pointer-events: none;
box-sizing: border-box;
}
.r-zone-row__name-ghost::after { content: '\00a0'; } /* prevent collapse when empty */
.r-zone-row__name {
position: absolute;
inset: 0;
width: 100%;
border: 1px solid var(--r-border);
padding: 6px 10px;
font-size: 0.875rem;
font-family: inherit;
background: var(--r-surface);
color: var(--r-ink);
box-sizing: border-box;
}
.r-zone-row__name:focus { outline: 2px solid var(--r-ink); outline-offset: -1px; }
.r-zone-row__tables {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
margin-left: auto;
}
.r-zone-row__tables-label {
font-size: 11px;
font-weight: 600;
color: var(--r-ink-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.r-zone-row__tables-input {
width: 46px;
text-align: center;
padding: 6px 2px;
border: 1px solid var(--r-border);
font-size: 0.8125rem;
font-family: inherit;
background: var(--r-surface);
color: var(--r-ink);
box-sizing: border-box;
}
.r-zone-row__tables-input:focus { outline: 2px solid var(--r-ink); outline-offset: -1px; }
/* Hide number input spinners to save space */
.r-zone-row__tables-input::-webkit-inner-spin-button,
.r-zone-row__tables-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.r-zone-row__tables-input[type=number] { -moz-appearance: textfield; }
.r-zone-row__tables-sep {
color: var(--r-ink-muted);
font-size: 0.8125rem;
}
.r-zone-row__delete {
background: none;
border: 1px solid var(--r-border);
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #991b1b;
font-size: 13px;
flex-shrink: 0;
padding: 0;
transition: border-color 0.15s;
}
.r-zone-row__delete:hover { border-color: #991b1b; }
@media (max-width: 479px) {
.r-zone-row { gap: 4px; }
.r-zone-row__color { width: 24px; height: 24px; }
.r-zone-row__tables-label { display: none; }
.r-zone-row__tables-input { width: 40px; padding: 5px 2px; font-size: 0.75rem; }
.r-zone-row__name-wrap { max-width: 140px; }
.r-zone-row__name { padding: 5px 8px; font-size: 0.8125rem; }
.r-zone-row__name-ghost { padding: 5px 8px; font-size: 0.8125rem; min-width: 40px; }
.r-zone-row__delete { width: 24px; height: 24px; font-size: 11px; }
}
.r-edit__section h2 {
font-size: var(--r-text-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--r-ink-muted); margin: 0 0 var(--r-sp-4) 0;
}
.r-field {
display: block; margin-bottom: 12px;
}
.r-field label {
display: block; font-size: 0.75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--r-ink-muted); margin-bottom: 4px;
}
.r-field input,
.r-field textarea,
.r-field select {
width: 100%; padding: 10px 12px;
border: 1px solid var(--r-border);
font-size: 0.9375rem; font-family: inherit;
background: var(--r-surface); color: var(--r-ink);
}
.r-field input:focus,
.r-field textarea:focus,
.r-field select:focus { outline: 2px solid var(--r-ink); outline-offset: -1px; }
.r-field select { cursor: pointer; }
.r-field textarea { min-height: 60px; resize: vertical; }
/* Zone summary in QR page (replaces table count input when zones exist) */
.r-qr__zone-summary {
font-size: 0.875rem;
color: var(--r-ink);
padding: 8px 0;
}
.r-qr__zone-summary strong {
font-size: 1.125rem;
font-weight: 800;
}
/* Locale checkboxes — inline row of language toggles */
.r-locale-checks {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.r-locale-check {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--r-border);
cursor: pointer;
font-size: 0.8125rem;
transition: border-color 0.15s, background-color 0.15s;
user-select: none;
-webkit-user-select: none;
}
/* :has() fallback for older browsers — JS adds .is-checked */
.r-locale-check:has(input:checked),
.r-locale-check.is-checked {
border-color: var(--r-ink);
background: var(--r-surface-subtle);
}
.r-locale-check input {
width: 16px; height: 16px;
margin: 0; cursor: pointer;
accent-color: var(--r-ink);
}
.r-locale-check__code {
font-weight: 700;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.r-locale-check__name {
color: var(--r-ink-muted);
font-size: 0.75rem;
}
.r-edit-tail-add {
display: block;
width: 100%;
margin-top: var(--r-sp-4, 1rem);
padding: 1.25rem var(--r-sp-4, 1rem);
background: transparent;
border: 1px dashed var(--r-border, #cbd5e1);
color: var(--r-ink-muted, #64748b);
font-size: 0.875rem;
font-weight: 500;
font-family: inherit;
text-align: center;
cursor: pointer;
letter-spacing: 0.02em;
transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.r-edit-tail-add:hover,
.r-edit-tail-add:focus-visible {
border-color: var(--r-ink, #0f172a);
color: var(--r-ink, #0f172a);
background: var(--r-surface, #f8fafc);
outline: none;
}
/* ── Editor: live search + collapsible categories (Notion/Linear pattern) ── */
.r-edit-search {
flex: 0 1 240px;
min-width: 150px;
padding: 7px 10px;
font: inherit;
font-size: 13px;
color: var(--r-ink);
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: 0;
}
.r-edit-search:focus { outline: none; border-color: var(--r-ink); }
.r-edit-cat__toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; flex: none;
padding: 0; border: 1px solid transparent; background: transparent;
color: #737373; cursor: pointer;
transition: transform 0.15s ease, color 0.15s ease;
}
.r-edit-cat__toggle:hover { color: var(--r-ink); }
.r-edit-cat.is-collapsed .r-edit-cat__toggle { transform: rotate(-90deg); }
.r-edit-cat.is-collapsed .r-edit-cat__items { display: none; }
.r-edit-item.is-search-hidden,
.r-edit-cat.is-search-hidden { display: none; }
.r-edit-item {
display: grid; grid-template-columns: 1fr;
gap: 0.5rem; padding: 0.75rem 0;
border-bottom: 1px solid #e2e8f0;
min-width: 0;
}
@media (min-width: 480px) {
.r-edit-item { grid-template-columns: 72px 1fr; gap: 0.75rem; }
}
@media (min-width: 1024px) {
.r-edit-item { grid-template-columns: 100px 1fr; gap: 1rem; padding: 1rem 0; }
}
.r-edit-item__img-wrap { position: relative; width: 100%; height: 100px; }
@media (min-width: 480px) { .r-edit-item__img-wrap { width: 72px; height: 72px; } }
@media (min-width: 1024px) { .r-edit-item__img-wrap { width: 100px; height: 100px; } }
.r-edit-item__img {
width: 100%; height: 100%; position: relative;
background: #e2e8f0; background-size: contain; background-repeat: no-repeat; background-position: center;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
user-select: none;
-webkit-user-select: none;
}
.r-edit-item__img:hover { background-color: #cbd5e1; }
.r-edit-item__img-hint {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.4); color: #fff; opacity: 0;
transition: opacity .15s;
/* CRITICAL: opacity:0 keeps the element clickable, which was eating
every click on the image. The image div needs to receive clicks
to fire the file picker, so the hint must NOT capture them. */
pointer-events: none;
}
.r-edit-item__img:hover .r-edit-item__img-hint { opacity: 1; }
.r-edit-item__img--dragover { outline: 2px solid var(--r-accent, #4f46e5); outline-offset: -2px; }
.r-edit-item__img--dragover .r-edit-item__img-hint { opacity: 1; }
.r-edit-item__img--uploading .r-edit-item__img-hint {
opacity: 1; background: rgba(0,0,0,.6);
}
.r-edit-item__img--uploading .r-edit-item__img-hint svg {
animation: r-spin .6s linear infinite;
}
@keyframes r-spin { to { transform: rotate(360deg); } }
.r-edit-item__img-remove {
position: absolute; top: 2px; right: 2px;
width: 22px; height: 22px; border: none; background: rgba(0,0,0,.55);
color: #fff; font-size: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s;
}
.r-edit-item__img-wrap:hover .r-edit-item__img-remove { opacity: 1; }
.r-edit-item__img-remove:hover { background: #991b1b; }
.r-edit-item__body { min-width: 0; }
.r-edit-item input,
.r-edit-item textarea {
width: 100%; padding: 10px 12px; box-sizing: border-box;
border: 1px solid var(--r-border, #e5e7eb);
font-size: 0.9375rem; font-family: inherit;
background: var(--r-surface, #fff); color: var(--r-ink, #1a1a2e);
}
.r-edit-item input:focus,
.r-edit-item textarea:focus { outline: 2px solid var(--r-ink, #1a1a2e); outline-offset: -1px; }
.r-edit-item textarea { min-height: 60px; resize: vertical; }
.r-edit-item__delete {
background: none; border: 1px solid #e5e5e5; color: #991b1b;
width: 32px; height: 32px; font-size: .75rem; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: background .15s, border-color .15s;
}
.r-edit-item__delete:hover { background: #fef2f2; border-color: #fca5a5; }
.r-edit-item__row {
display: grid; grid-template-columns: 1fr 64px;
gap: 6px; margin-bottom: 6px;
}
@media (min-width: 480px) { .r-edit-item__row { grid-template-columns: 1fr 80px; gap: 8px; } }
.r-locale-tabs {
display: flex; gap: 0; margin-bottom: 6px;
}
.r-locale-tabs button {
background: transparent; border: 1px solid #cbd5e1; border-right: none;
padding: 4px 10px; font-size: 0.75rem; font-weight: 700;
text-transform: uppercase; color: #64748b;
}
.r-locale-tabs button:last-child { border-right: 1px solid #cbd5e1; }
.r-locale-tabs button.is-active { background: var(--r-ink); color: #fff; border-color: var(--r-ink); }
@media (min-width: 768px) {
.r-header { padding: 0 var(--r-sp-8); }
.r-cat-nav { padding: 0 var(--r-sp-8); }
.r-main { padding: var(--r-sp-6) var(--r-sp-8) 8rem var(--r-sp-8); }
.r-modal { align-items: center; }
.r-modal__panel { max-width: 520px; border-radius: var(--r-radius-lg); }
.r-modal__img { border-radius: var(--r-radius-lg) var(--r-radius-lg) 0 0; }
}
/* ── Owner views: edit, sales, qr (shared header structure) ────
Estructura común con flex-wrap para que NUNCA genere scroll horizontal.
Identidad crece al máximo permitido; nav + select se acoplan a la
derecha si hay espacio, o se apilan debajo si el viewport es estrecho. */
.r-sales { padding: 4px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
@media (min-width: 600px) { .r-sales { padding: 1rem; } }
@media (min-width: 1024px) { .r-sales { padding: 1.5rem; } }
.r-sales__header,
.r-edit__header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 16px;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #0a0a0a;
width: 100%;
min-width: 0;
}
/* El primer hijo del header (div con título + LIVE) debe crecer
para empujar la nav y el resto a la derecha. Sin esto, en kitchen
la nav se pegaba al título porque el div wrapper no tenía flex-grow. */
.r-sales__header > div:first-child,
.r-edit__header > div:first-child {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.r-sales__title,
.r-edit__title {
font-size: 1.375rem;
font-weight: 800;
margin: 0;
letter-spacing: -0.02em;
line-height: 1.2;
flex: 1 1 auto;
min-width: 0;
}
.r-sales__sub,
.r-edit__sub {
font-weight: 500;
color: var(--r-ink-muted);
margin-left: 0.25em;
}
.r-edit__live {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #16a34a;
margin-left: 8px;
}
.r-edit__live::before {
content: '';
width: 8px; height: 8px;
background: #16a34a;
border-radius: 50%;
-webkit-animation: rPulse 2s infinite;
animation: rPulse 2s infinite;
}
.r-sales__tools { display: flex; gap: 8px; align-items: center; }
/* Native select for locale, shared between edit + sales + qr.
flex-shrink: 0 garantiza que NUNCA se comprima ni se desborde. */
.r-owner-locale-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 36px;
box-sizing: border-box;
background-color: #fff;
color: var(--r-ink);
border: 1px solid var(--r-border);
padding: 0 30px 0 12px;
font-family: inherit;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 9px center;
border-radius: 0;
margin: 0;
transition: border-color 0.15s, background-color 0.15s;
}
.r-owner-locale-select:hover { border-color: #0a0a0a; background-color: #fafafa; }
.r-owner-locale-select:focus { outline: none; }
.r-sales__nav {
display: flex; gap: 0;
margin-bottom: 1rem;
border-bottom: 1px solid var(--r-border);
}
.r-sales__nav-link {
padding: 10px 18px;
text-decoration: none;
color: var(--r-ink-muted);
font-size: 0.875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.r-sales__nav-link:hover { color: #0a0a0a; }
.r-sales__nav-link.is-active {
color: var(--r-ink);
border-bottom-color: #0a0a0a;
}
.r-sales__range {
display: flex; gap: 6px; align-items: center;
background: var(--r-surface);
border: 1px solid var(--r-border);
padding: 8px 12px;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.r-sales__range button[data-range] {
background: transparent;
border: 1px solid transparent;
padding: 6px 14px;
font-size: 0.8125rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--r-ink-muted);
cursor: pointer;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.r-sales__range button[data-range]:hover { color: #0a0a0a; }
.r-sales__range button[data-range].is-active {
background: var(--r-ink);
color: #fff;
border-color: var(--r-ink);
}
.r-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--r-sp-4);
margin-bottom: var(--r-sp-4);
}
.r-kpi {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-5) var(--r-sp-6);
box-shadow: var(--r-shadow-sm);
}
.r-kpi__label {
font-size: var(--r-text-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--r-ink-muted);
margin-bottom: var(--r-sp-2);
}
.r-kpi__value {
font-size: var(--r-text-2xl); font-weight: 700;
color: var(--r-ink);
line-height: 1.1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.r-kpi__value--small { font-size: 1.125rem; line-height: 1.3; }
.r-table {
width: 100%;
border-collapse: collapse;
background: var(--r-surface);
font-size: var(--r-text-sm);
border-radius: var(--r-radius-md);
overflow: hidden;
box-shadow: var(--r-shadow-xs);
}
.r-table thead th {
text-align: left;
padding: var(--r-sp-3) var(--r-sp-4);
border-bottom: 1px solid var(--r-border);
font-size: var(--r-text-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--r-ink-muted);
}
.r-table tbody td {
padding: var(--r-sp-3) var(--r-sp-4);
border-bottom: 1px solid var(--r-border-light);
color: var(--r-ink);
}
.r-table tbody tr:last-child td { border-bottom: none; }
.r-table tbody tr:hover { background: var(--r-surface-subtle); }
.r-table__num {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.r-table__rank {
font-weight: 800; color: #737373;
width: 40px;
}
@media (min-width: 768px) {
.r-sales { padding: 2rem; }
}
/* ── WELCOME (public landing for personal sales pitch) ────────── */
.r-welcome-body {
background: var(--r-surface);
color: var(--r-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'kern', 'liga', 'cv11';
}
.r-welcome {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--r-sp-6);
}
.r-welcome__header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--r-sp-5) 0;
border-bottom: 1px solid var(--r-border-light);
flex-wrap: wrap;
gap: var(--r-sp-4);
}
/* Welcome nav */
.r-welcome__nav {
display: flex; align-items: center; gap: var(--r-sp-6);
margin-left: auto; margin-right: var(--r-sp-4);
}
.r-welcome__nav a {
font-size: var(--r-text-sm); font-weight: 500;
color: var(--r-ink-muted); text-decoration: none;
transition: color var(--r-tr-fast);
position: relative;
}
.r-welcome__nav a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1.5px;
background: var(--r-accent);
transform: scaleX(0);
transform-origin: center;
transition: transform .2s ease;
}
.r-welcome__nav a:hover { color: var(--r-ink); }
.r-welcome__nav a:hover::after { transform: scaleX(1); }
.r-welcome__login-btn.r-welcome__login-btn {
padding: 6px 16px;
border: 1px solid var(--r-border);
font-weight: 600;
color: var(--r-ink);
transition: background var(--r-tr-fast), border-color var(--r-tr-fast);
}
.r-welcome__login-btn.r-welcome__login-btn::after { display: none; }
.r-welcome__login-btn.r-welcome__login-btn:hover {
background: var(--r-ink);
color: #fff;
border-color: var(--r-ink);
}
/* Login icon — visible only on mobile when nav hides */
.r-welcome__login-icon {
display: none; color: var(--r-ink); padding: 6px;
flex-shrink: 0; line-height: 0;
margin-left: auto;
}
.r-welcome__login-icon svg { stroke: var(--r-ink); }
@media (max-width: 640px) {
.r-welcome__nav { display: none; }
.r-welcome__login-icon { display: flex; }
}
/* Language dropdown — animated open/close */
.r-lang { position: relative; }
.r-lang__btn {
display: flex; align-items: center; gap: 6px;
padding: 6px var(--r-sp-3);
border: 1px solid var(--r-border);
background: transparent;
font: inherit; font-size: var(--r-text-sm); font-weight: 600;
letter-spacing: 0.03em;
color: var(--r-ink-muted);
cursor: pointer;
border-radius: var(--r-radius-sm);
transition: border-color var(--r-tr-fast), color var(--r-tr-fast), background var(--r-tr-fast);
}
.r-lang__btn:hover { border-color: var(--r-ink-faint); color: var(--r-ink); background: var(--r-surface-subtle); }
.r-lang__btn svg { opacity: 0.5; transition: opacity var(--r-tr-fast); }
.r-lang__btn:hover svg { opacity: 0.8; }
.r-lang__menu {
position: absolute; right: 0; top: calc(100% + 6px);
list-style: none; margin: 0; padding: var(--r-sp-1) 0;
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
box-shadow: var(--r-shadow-lg);
min-width: 80px;
z-index: 100;
opacity: 1; transform: translateY(0);
transition: opacity .18s ease, transform .18s ease;
}
.r-lang__menu[hidden] {
display: block !important;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
}
.r-lang__option {
padding: var(--r-sp-2) var(--r-sp-4);
font-size: var(--r-text-sm); font-weight: 600;
letter-spacing: 0.03em;
color: var(--r-ink-muted);
cursor: pointer;
transition: background var(--r-tr-fast), color var(--r-tr-fast);
}
.r-lang__option:hover { background: var(--r-surface-subtle); color: var(--r-ink); }
.r-lang__option.is-active { color: var(--r-accent); background: var(--r-accent-light); }
.r-welcome__brand {
display: flex; flex-direction: column;
line-height: 1.2;
}
.r-welcome__brand-name {
font-size: var(--r-text-md);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--r-ink);
}
.r-welcome__brand-sub {
font-size: var(--r-text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--r-ink-faint);
font-weight: 600;
margin-top: 2px;
}
/* Hero */
.r-welcome__hero {
padding: var(--r-sp-12) 0 var(--r-sp-10) 0;
text-align: center;
}
.r-welcome__hero-title {
font-size: clamp(1.75rem, 4.5vw, 2.875rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
margin: 0 0 var(--r-sp-6) 0;
color: var(--r-ink);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.r-welcome__hero-sub {
font-size: var(--r-text-md);
line-height: 1.6;
color: var(--r-ink-muted);
max-width: 580px;
margin: 0 auto;
font-weight: 400;
}
/* QR section */
.r-welcome__qr-section {
display: flex; justify-content: center;
padding: var(--r-sp-4) 0 var(--r-sp-12) 0;
}
.r-welcome__qr-frame {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-lg);
padding: var(--r-sp-8) var(--r-sp-8);
text-align: center;
max-width: 360px;
box-shadow: var(--r-shadow-md);
}
.r-welcome__qr-label {
font-size: var(--r-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--r-ink-muted);
margin-bottom: var(--r-sp-5);
}
.r-welcome__qr-code {
display: flex; justify-content: center;
margin-bottom: 1.25rem;
position: relative; /* anchor for the centre logo */
}
.r-welcome__qr-code canvas, .r-welcome__qr-code img {
display: block;
width: 240px; height: 240px;
}
.r-welcome__qr-help {
font-size: var(--r-text-sm);
color: var(--r-ink-faint);
line-height: 1.55;
}
/* Direct link to open the demo without scanning (desktop convenience). */
.r-welcome__qr-open {
display: inline-block;
margin-top: var(--r-sp-3, 12px);
font-size: var(--r-text-sm);
font-weight: 700;
color: var(--r-accent, #5b5bf5);
text-decoration: none;
}
.r-welcome__qr-open:hover { text-decoration: underline; }
/* Generic section */
.r-welcome__section {
padding: var(--r-sp-12) 0;
border-top: 1px solid var(--r-border-light);
}
.r-welcome__section--alt {
background: var(--r-surface-subtle);
margin: 0 calc(-1 * var(--r-sp-6));
padding-left: var(--r-sp-6);
padding-right: var(--r-sp-6);
border-color: var(--r-border-light);
}
.r-welcome__h2 {
font-size: var(--r-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--r-ink-faint);
margin: 0 0 var(--r-sp-8) 0;
text-align: center;
}
/* Benefits grid (3 main benefits, equal weight) */
.r-welcome__benefits {
display: grid;
grid-template-columns: 1fr;
gap: var(--r-sp-5);
}
.r-welcome__benefit {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-8) var(--r-sp-6);
box-shadow: var(--r-shadow-sm);
transition: box-shadow var(--r-tr-base), transform var(--r-tr-base);
}
.r-welcome__benefit:hover { box-shadow: var(--r-shadow-md); transform: translateY(-2px); }
.r-welcome__benefit-icon {
width: 48px; height: 48px;
background: var(--r-accent-light);
color: var(--r-accent);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: var(--r-sp-5);
border-radius: var(--r-radius-md);
}
.r-welcome__benefit-title {
font-size: var(--r-text-md);
font-weight: 600;
margin: 0 0 var(--r-sp-2) 0;
color: var(--r-ink);
letter-spacing: -0.01em;
line-height: 1.3;
}
.r-welcome__benefit-text {
font-size: var(--r-text-base);
line-height: 1.6;
color: var(--r-ink-muted);
margin: 0;
}
/* Cases list (when this helps) */
.r-welcome__cases-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--r-sp-3);
}
.r-welcome__cases-list li {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-4) var(--r-sp-5) var(--r-sp-4) var(--r-sp-10);
font-size: var(--r-text-base);
line-height: 1.6;
color: var(--r-ink-muted);
position: relative;
box-shadow: var(--r-shadow-xs);
}
.r-welcome__cases-list li::before {
content: '';
position: absolute;
left: var(--r-sp-5);
top: 1.5rem;
width: 6px; height: 6px;
background: var(--r-accent);
border-radius: var(--r-radius-full);
}
/* Trust list */
.r-welcome__trust {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 680px;
display: grid;
gap: var(--r-sp-3);
}
.r-welcome__trust li {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-4) var(--r-sp-5);
font-size: var(--r-text-base);
line-height: 1.6;
color: var(--r-ink-muted);
box-shadow: var(--r-shadow-xs);
}
/* Steps grid */
.r-welcome__steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--r-sp-5);
}
.r-welcome__step {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-8) var(--r-sp-6);
box-shadow: var(--r-shadow-sm);
}
.r-welcome__step-num {
width: 36px; height: 36px;
background: var(--r-accent);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: var(--r-text-base);
font-variant-numeric: tabular-nums;
margin-bottom: var(--r-sp-4);
border-radius: var(--r-radius-sm);
}
.r-welcome__step-title {
font-size: var(--r-text-md);
font-weight: 600;
margin: 0 0 var(--r-sp-2) 0;
color: var(--r-ink);
letter-spacing: -0.01em;
}
.r-welcome__step-text {
font-size: var(--r-text-base);
line-height: 1.6;
color: var(--r-ink-muted);
margin: 0;
}
/* Needs list */
.r-welcome__needs {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--r-sp-4);
}
.r-welcome__needs li {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-6);
box-shadow: var(--r-shadow-xs);
}
.r-welcome__needs strong {
display: block;
font-size: var(--r-text-base);
font-weight: 600;
margin-bottom: var(--r-sp-2);
color: var(--r-ink);
}
.r-welcome__needs span {
font-size: var(--r-text-base);
line-height: 1.6;
color: var(--r-ink-muted);
}
/* Use cases */
.r-welcome__cases {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.r-welcome__case {
background: var(--r-surface);
border: 1px solid var(--r-border);
padding: 1.75rem;
}
.r-welcome__case-title {
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
color: var(--r-ink);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.r-welcome__case p {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--r-ink-muted);
margin: 0;
}
/* Price */
.r-welcome__pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--r-sp-6);
max-width: 960px;
margin: 0 auto;
}
@media (max-width: 768px) {
.r-welcome__pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
}
.r-welcome__price {
background: var(--r-surface);
border: 1px solid var(--r-border);
padding: var(--r-sp-8);
text-align: center;
box-shadow: var(--r-shadow-sm);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.r-welcome__price--featured {
border-color: var(--r-accent);
box-shadow: var(--r-shadow-lg);
}
.r-welcome__price::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--r-border-light);
}
.r-welcome__price--featured::before {
background: var(--r-accent);
}
.r-welcome__price-name {
font-size: var(--r-text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--r-ink-muted);
margin-bottom: var(--r-sp-4);
}
.r-welcome__price--featured .r-welcome__price-name {
color: var(--r-accent);
}
.r-welcome__price-target {
font-size: var(--r-text-sm);
color: var(--r-ink-faint);
margin-bottom: var(--r-sp-6);
}
.r-welcome__price .r-welcome__contact-btn {
margin-top: auto;
/* flex centering — el botón Pro tiene flex:1 (heredado de .r-btn--primary)
y se estira verticalmente en .r-welcome__price (flex column). Sin estas
3 props, el texto queda anclado arriba por el padding del .r-btn base.
Aplica también a ghost (Starter/Enterprise) sin afectar — su altura no
cambia, el texto queda centrado igual. */
display: flex;
align-items: center;
justify-content: center;
}
/* Ghost button (Starter/Enterprise) hover — bg pasa a ink (oscuro), texto debe
pasar a blanco. Sin esto, el genérico .r-welcome__contact-btn:hover deja
color: var(--r-ink) y resulta texto oscuro sobre fondo oscuro = ilegible. */
.r-welcome__price .r-btn--ghost.r-welcome__contact-btn:hover {
background: var(--r-ink);
color: #fff;
border-color: var(--r-ink);
}
.r-welcome__price-amount {
font-size: var(--r-text-2xl);
font-weight: 700;
color: var(--r-ink);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: var(--r-sp-6);
font-variant-numeric: tabular-nums;
}
.r-welcome__price-period {
font-size: var(--r-text-base);
font-weight: 500;
color: var(--r-ink-muted);
letter-spacing: 0;
}
.r-welcome__price-features {
display: grid;
gap: var(--r-sp-3);
text-align: left;
max-width: 320px;
margin: 0 auto var(--r-sp-8) auto;
font-size: var(--r-text-base);
color: var(--r-ink);
}
/* Who I am */
.r-welcome__who {
max-width: 680px;
margin: 0 auto;
}
.r-welcome__who p {
font-size: var(--r-text-base);
line-height: 1.7;
color: var(--r-ink-muted);
margin: 0 0 var(--r-sp-5) 0;
}
.r-welcome__who p:last-child { margin-bottom: 0; }
.r-welcome__who strong {
color: var(--r-ink);
font-weight: 600;
}
/* Contact CTA */
.r-welcome__section#contact {
text-align: center;
}
.r-welcome__contact-help {
font-size: var(--r-text-base);
color: var(--r-ink-muted);
text-align: center;
max-width: 560px;
margin: 0 auto var(--r-sp-8) auto;
line-height: 1.6;
}
.r-welcome__contact-btn {
display: inline-block;
text-decoration: none;
text-align: center;
margin: 0 auto;
font-size: var(--r-text-base);
border-radius: var(--r-radius-sm);
transition: background var(--r-tr-base), transform 0.15s ease, box-shadow var(--r-tr-base);
}
.r-welcome__contact-btn:hover {
background: var(--r-ink-light);
transform: translateY(-2px);
box-shadow: var(--r-shadow-md);
}
.r-welcome__contact-btn:active {
transform: scale(.985) translateY(0);
box-shadow: none;
}
/* Footer */
.r-welcome__footer {
padding: var(--r-sp-10) 0 var(--r-sp-12) 0;
text-align: center;
border-top: 1px solid var(--r-border-light);
margin-top: var(--r-sp-8);
}
.r-welcome__footer p {
font-size: var(--r-text-xs);
color: var(--r-ink-faint);
margin: 0;
letter-spacing: 0.04em;
font-weight: 500;
}
.r-welcome__footer-legal {
margin-top: 8px !important;
}
.r-welcome__footer-legal a {
color: var(--r-ink-faint);
text-decoration: none;
}
.r-welcome__footer-legal a:hover {
text-decoration: underline;
}
/* ── Pitch interno (solo Adan) ─────────────────────────────── */
.r-pitch-body {
background: var(--r-surface-subtle);
color: var(--r-ink);
-webkit-font-smoothing: antialiased;
}
.r-pitch {
max-width: 720px;
margin: 0 auto;
padding: 0 1.25rem 4rem 1.25rem;
}
.r-pitch__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem 0;
border-bottom: 2px solid #0a0a0a;
margin-bottom: 1.5rem;
}
.r-pitch__title {
font-size: 1.375rem;
font-weight: 800;
margin: 0;
letter-spacing: -0.02em;
color: var(--r-ink);
}
.r-pitch__sub {
font-size: 0.8125rem;
color: var(--r-ink-muted);
margin: 4px 0 0 0;
line-height: 1.4;
}
.r-pitch__back {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--r-ink-muted);
text-decoration: none;
padding: 8px 12px;
border: 1px solid var(--r-border);
flex-shrink: 0;
transition: border-color 0.15s, color 0.15s;
}
.r-pitch__back:hover { color: #0a0a0a; border-color: #0a0a0a; }
/* Landing URL card (la URL para mandarle al cliente, copiable) */
.r-pitch__url-card {
background: var(--r-surface);
border: 1px solid var(--r-border);
padding: 1rem 1.25rem;
margin-bottom: 2rem;
}
.r-pitch__url-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--r-ink-muted);
margin-bottom: 8px;
}
.r-pitch__url-value {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.8125rem;
font-weight: 600;
color: var(--r-ink);
cursor: pointer;
word-break: break-all;
line-height: 1.4;
}
.r-pitch__url-actions {
margin-top: 12px;
display: flex;
gap: 8px;
}
.r-pitch__share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #25d366;
color: #fff;
text-decoration: none;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: background-color 0.15s;
}
.r-pitch__share-btn:hover { background: #1da851; }
/* Section: opening / editor / qr / client / kitchen / sales / connectors / objections / closing */
.r-pitch__section {
margin-bottom: 2.5rem;
}
.r-pitch__section-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--r-border);
}
.r-pitch__section-icon {
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.r-pitch__section-title-wrap { flex: 1; min-width: 0; }
.r-pitch__section-title {
font-size: 1rem;
font-weight: 800;
margin: 0 0 2px 0;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--r-ink);
}
.r-pitch__section-help {
font-size: 0.75rem;
color: var(--r-ink-muted);
margin: 0;
line-height: 1.4;
}
/* Phrase list */
.r-pitch__phrases {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.r-pitch__phrase {
display: flex;
gap: 8px;
align-items: stretch;
}
.r-pitch__phrase-btn {
flex: 1 1 auto;
min-width: 0;
-webkit-appearance: none;
appearance: none;
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: 0;
padding: 14px 16px;
margin: 0;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
display: flex;
flex-direction: column;
gap: 4px;
}
.r-pitch__phrase-btn:hover {
border-color: var(--r-ink);
background: var(--r-surface-subtle);
}
.r-pitch__phrase-btn:active {
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
.r-pitch__phrase-es {
font-size: 0.9375rem;
font-weight: 600;
color: var(--r-ink);
line-height: 1.45;
}
.r-pitch__phrase-de {
font-size: 0.8125rem;
color: var(--r-ink-muted);
line-height: 1.4;
}
.r-pitch__phrase-share {
flex-shrink: 0;
width: 44px;
background: var(--r-surface);
border: 1px solid var(--r-border);
color: #25d366;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background-color 0.15s, border-color 0.15s;
}
.r-pitch__phrase-share:hover {
background: #f0fdf4;
border-color: #25d366;
}
.r-pitch__footer {
margin-top: 3rem;
text-align: center;
}
.r-pitch__footer p {
font-size: 0.6875rem;
color: #a3a3a3;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin: 0;
}
/* Copy toast */
.r-pitch__toast {
position: fixed;
bottom: 24px;
left: 50%;
-webkit-transform: translateX(-50%) translateY(80px);
transform: translateX(-50%) translateY(80px);
background: var(--r-ink);
color: #fafafa;
padding: 12px 20px;
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 220ms cubic-bezier(0.32, 0.72, 0, 1),
-webkit-transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
transition: opacity 220ms cubic-bezier(0.32, 0.72, 0, 1),
transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.r-pitch__toast.is-visible {
opacity: 1;
-webkit-transform: translateX(-50%) translateY(0);
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
/* ── Try-it-yourself wizard ─────────────────────────────────── */
.r-welcome__try-section {
padding: 0 0 3rem 0;
display: flex;
flex-direction: column;
align-items: center;
}
.r-try__cta {
background: var(--r-ink);
color: #fff;
border: none;
border-radius: var(--r-radius-md);
padding: var(--r-sp-5) var(--r-sp-6);
display: inline-flex;
align-items: center;
gap: var(--r-sp-4);
cursor: pointer;
font-family: inherit;
text-align: left;
transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow var(--r-tr-base);
max-width: 100%;
box-shadow: var(--r-shadow-md);
}
.r-try__cta:hover { background: var(--r-ink-light); box-shadow: var(--r-shadow-lg); }
.r-try__cta:active { transform: scale(0.985); box-shadow: var(--r-shadow-sm); }
.r-try__cta-icon {
width: 44px; height: 44px;
background: rgba(255, 255, 255, 0.1);
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
border-radius: var(--r-radius-sm);
}
.r-try__cta-body { display: flex; flex-direction: column; gap: 2px; }
.r-try__cta-title {
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
.r-try__cta-sub {
font-size: 0.75rem;
color: #a3a3a3;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.r-try {
width: 100%;
max-width: 540px;
margin-top: var(--r-sp-6);
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-lg);
padding: var(--r-sp-8) var(--r-sp-6);
animation: rTryFadeIn 350ms cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: var(--r-shadow-md);
}
@keyframes rTryFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.r-try__progress {
display: flex; gap: var(--r-sp-2); justify-content: center;
margin-bottom: var(--r-sp-6);
}
.r-try__dot {
width: 24px; height: 3px;
background: var(--r-border);
border-radius: var(--r-radius-full);
transition: background-color 250ms cubic-bezier(0.32, 0.72, 0, 1);
}
.r-try__dot.is-active { background: var(--r-accent); }
.r-try__step {
animation: rTryFadeIn 350ms cubic-bezier(0.32, 0.72, 0, 1);
}
.r-try__step-label {
font-size: var(--r-text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--r-ink-faint);
font-weight: 600;
margin-bottom: var(--r-sp-2);
}
.r-try__step-title {
font-size: var(--r-text-lg);
font-weight: 700;
margin: 0 0 var(--r-sp-2) 0;
color: var(--r-ink);
letter-spacing: -0.02em;
line-height: 1.25;
}
.r-try__step-text {
font-size: var(--r-text-base);
color: var(--r-ink-muted);
line-height: 1.6;
margin: 0 0 var(--r-sp-6) 0;
}
/* Step 1 — dish selection */
.r-try__menu {
display: grid;
gap: 10px;
margin-bottom: 1rem;
}
.r-try__dish {
background: var(--r-surface-subtle);
border: 1.5px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-4);
display: flex; align-items: center; gap: var(--r-sp-4);
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: border-color var(--r-tr-fast), background-color var(--r-tr-fast), box-shadow var(--r-tr-fast);
}
.r-try__dish:hover { border-color: var(--r-ink-faint); box-shadow: var(--r-shadow-sm); }
.r-try__dish.is-selected {
border-color: var(--r-accent);
background: var(--r-accent-light);
box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
.r-try__dish-emoji {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.r-try__dish-body {
flex: 1;
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.r-try__dish-name {
font-size: 0.9375rem;
font-weight: 700;
color: var(--r-ink);
}
.r-try__dish-price {
font-size: 0.8125rem;
color: var(--r-ink-muted);
font-variant-numeric: tabular-nums;
}
.r-try__cart-summary {
background: #f1f1f1;
border-left: 3px solid #0a0a0a;
padding: 12px 16px;
margin-top: 1rem;
margin-bottom: 1rem;
animation: rTryFadeIn 250ms cubic-bezier(0.32, 0.72, 0, 1);
}
.r-try__cart-line {
display: flex; justify-content: space-between; align-items: center;
font-size: 0.9375rem;
font-weight: 600;
color: var(--r-ink);
}
.r-try__cart-line span:last-child { font-variant-numeric: tabular-nums; }
.r-try__actions {
display: flex; gap: 8px;
margin-top: 1.5rem;
}
.r-try__actions--final { flex-wrap: wrap; }
.r-try__main-btn {
width: 100%;
padding: 14px 18px;
font-size: 0.9375rem;
text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
}
.r-try__main-btn:disabled {
background: #d4d4d4;
color: var(--r-ink-muted);
cursor: not-allowed;
}
/* Step 2 — kitchen ticket */
.r-try__audio-opt {
display: flex;
justify-content: center;
padding: 2rem 0;
border-top: 1px dashed #e5e5e5;
border-bottom: 1px dashed #e5e5e5;
}
.r-try__audio-opt .r-btn {
width: 100%;
max-width: 320px;
padding: 14px 18px;
font-size: 0.875rem;
}
.r-try__ticket {
background: var(--r-warn-light);
border: 1px solid #f59e0b;
border-radius: var(--r-radius-md);
padding: var(--r-sp-5) var(--r-sp-6);
margin-top: var(--r-sp-2);
animation: rTryFadeIn 300ms cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: var(--r-shadow-sm);
}
.r-try__ticket-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--r-border);
}
.r-try__ticket-id {
font-size: 1.5rem;
font-weight: 800;
color: var(--r-ink);
font-variant-numeric: tabular-nums;
}
.r-try__ticket-time {
font-size: 0.8125rem;
color: var(--r-ink-muted);
font-variant-numeric: tabular-nums;
}
.r-try__ticket-items { margin-bottom: 1rem; }
.r-try__ticket-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 0;
font-size: 0.9375rem;
color: var(--r-ink);
}
.r-try__ticket-qty {
background: #f1f1f1;
padding: 2px 8px;
font-weight: 700;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
.r-try__ticket-total {
display: flex; justify-content: space-between; align-items: baseline;
padding-top: 0.75rem;
border-top: 1px solid var(--r-border);
font-weight: 700;
font-size: 1rem;
}
.r-try__ticket-total span:last-child { font-variant-numeric: tabular-nums; }
/* Step 3 — sales KPIs */
.r-try__kpis {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 1rem;
}
.r-try__kpi {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-md);
padding: var(--r-sp-5) var(--r-sp-6);
box-shadow: var(--r-shadow-xs);
}
.r-try__kpi-label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--r-ink-muted);
font-weight: 700;
margin-bottom: 6px;
}
.r-try__kpi-value {
font-size: 1.75rem;
font-weight: 800;
color: var(--r-ink);
line-height: 1.1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.r-try__kpi-value--small {
font-size: 1rem;
line-height: 1.3;
font-variant-numeric: normal;
letter-spacing: 0;
}
@media (min-width: 640px) {
.r-try__kpis {
grid-template-columns: repeat(3, 1fr);
}
.r-try__actions--final {
flex-direction: row;
}
.r-try__actions--final .r-btn {
width: auto;
flex: 1;
}
}
/* Responsive */
@media (min-width: 720px) {
.r-welcome__benefits {
grid-template-columns: repeat(3, 1fr);
}
.r-welcome__steps {
grid-template-columns: repeat(3, 1fr);
}
.r-welcome__needs {
grid-template-columns: repeat(3, 1fr);
}
.r-welcome__cases {
grid-template-columns: repeat(2, 1fr);
}
.r-welcome__hero { padding: 5rem 0 4rem 0; }
}
/* ── QR view ───────────────────────────────────────────────────── */
.r-qr__help {
color: var(--r-ink-muted);
font-size: 0.875rem;
margin: 0 0 1rem 0;
}
.r-qr__controls {
display: flex; gap: 12px; align-items: flex-end;
flex-wrap: wrap;
}
.r-qr__controls .r-field {
display: flex; flex-direction: column; gap: 4px;
}
.r-qr__controls .r-field span {
font-size: 0.75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--r-ink-muted);
}
.r-qr__controls input[type="number"] {
padding: 10px 12px;
border: 1px solid var(--r-border);
font-size: 1rem; font-family: inherit;
background: var(--r-surface); color: #0a0a0a;
font-variant-numeric: tabular-nums;
}
.r-qr__controls input[type="number"]:focus {
outline: 2px solid var(--r-ink);
outline-offset: -1px;
}
.r-qr__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.r-qr__card {
background: var(--r-surface);
border: 1px solid var(--r-border);
border-radius: var(--r-radius-lg);
padding: var(--r-sp-5);
display: flex; flex-direction: column;
align-items: center;
text-align: center;
page-break-inside: avoid;
break-inside: avoid;
box-shadow: var(--r-shadow-sm);
}
.r-qr__card--takeaway {
border-color: var(--r-accent);
background: var(--r-accent-light);
grid-column: 1 / -1;
max-width: 400px;
margin: 0 auto 1rem auto;
}
.r-qr__card-head {
width: 100%;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--r-border);
}
.r-qr__card-label {
font-size: 1.25rem; font-weight: 800;
color: var(--r-ink);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.r-qr__card-sub {
font-size: 0.75rem;
color: var(--r-ink-muted);
margin-top: 4px;
font-weight: 500;
}
.r-qr__card--takeaway .r-qr__card-sub {
font-size: 0.8125rem;
line-height: 1.4;
margin-top: 6px;
}
.r-qr__code {
margin: 0.5rem 0 1rem 0;
/* qrcodejs renders a canvas inside this box */
}
.r-qr__code canvas, .r-qr__code img {
display: block;
max-width: 100%;
height: auto;
}
.r-qr__card-foot {
width: 100%;
margin-top: auto;
}
.r-qr__card-scan {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--r-ink-muted);
font-weight: 700;
margin-bottom: 8px;
}
.r-qr__download {
width: 100%;
padding: 8px 12px;
font-size: 0.6875rem;
}
/* ── Print: hide chrome, A4 grid 2x2 ───────────────────────────── */
.r-no-print { /* default visible */ }
/* Zone header (h3 creado en qr.php JS). Estilo base para pantalla — print
override añade page-break-after: avoid para que no quede huérfano. */
.r-qr__zone-header {
grid-column: 1 / -1;
margin: 1.5rem 0 0.5rem;
font-size: 0.875rem;
text-transform: uppercase;
color: #737373;
letter-spacing: 0.04em;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 6px;
}
@media print {
@page { size: A4 portrait; margin: 10mm; }
html, body { background: #fff; }
.r-no-print { display: none !important; }
.r-sales { padding: 0; max-width: none; }
.r-qr__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8mm;
}
.r-qr__card {
border: 2px solid #0a0a0a;
page-break-inside: avoid;
break-inside: avoid;
padding: 6mm;
/* display:block en print: flex+page-break-inside es un combo roto
en Safari/Chrome (bug histórico) — usa block para que el browser
respete avoid en cards complejas. */
display: block;
text-align: center;
}
/* Takeaway en su propia página: garantiza que la sección "PARA LLEVAR"
(más grande, máxima fila) no comparta página con las primeras mesas.
Sin esto, Safari aprieta todo en página 1 → recortado vertical. */
.r-qr__card--takeaway {
grid-column: 1 / -1;
max-width: none;
page-break-after: always;
break-after: page;
}
/* Header de zona NO debe quedar huérfano al final de una página
empujando las mesas a la siguiente con recorte. */
.r-qr__zone-header {
page-break-after: avoid;
break-after: avoid-page;
}
.r-qr__code canvas {
width: 55mm !important;
height: 55mm !important;
margin: 0 auto;
display: block;
}
.r-qr__card--takeaway .r-qr__code canvas {
width: 80mm !important;
height: 80mm !important;
}
}
/* ── View Transitions + fade-in (app-like) ───────────────────── */
::view-transition-old(root) { animation: rVtOut .15s ease-out both; }
::view-transition-new(root) { animation: rVtIn .2s ease-in both; }
@keyframes rVtOut { to { opacity: 0; } }
@keyframes rVtIn { from { opacity: 0; } }
.r-welcome__header { view-transition-name: r-header; }
::view-transition-group(r-header) { animation: none; }
.r-fade-in { animation: rFadeIn .35s cubic-bezier(.2,.6,.35,1); }
@keyframes rFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Staggered entrance for form fields */
.r-contact__field:nth-child(2) { animation: rFieldIn .4s cubic-bezier(.2,.6,.35,1) .05s both; }
.r-contact__field:nth-child(3) { animation: rFieldIn .4s cubic-bezier(.2,.6,.35,1) .1s both; }
.r-contact__field:nth-child(4) { animation: rFieldIn .4s cubic-bezier(.2,.6,.35,1) .15s both; }
.r-contact__submit { animation: rFieldIn .4s cubic-bezier(.2,.6,.35,1) .2s both; }
@keyframes rFieldIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ── Contact form (/restaurants/contact) — Polymer style ─────── */
.r-contact__hero {
padding: var(--r-sp-12) var(--r-sp-6) var(--r-sp-12);
max-width: 520px;
margin: 0 auto;
}
.r-contact__icon {
text-align: center;
margin-bottom: 1.5rem;
animation: rFieldIn .4s cubic-bezier(.2,.6,.35,1) both;
}
.r-contact__icon svg {
opacity: .7;
}
.r-contact__title {
font-size: var(--r-text-xl);
font-weight: 700;
color: var(--r-ink);
text-align: center;
margin: 0 0 var(--r-sp-3);
letter-spacing: -0.025em;
}
.r-contact__intro {
font-size: var(--r-text-base);
color: var(--r-ink-muted);
text-align: center;
line-height: 1.6;
margin: 0 0 var(--r-sp-10);
}
.r-contact__form {
max-width: 420px;
margin: 0 auto;
}
.r-contact__note {
font-size: var(--r-text-sm);
color: var(--r-ink-faint);
text-align: center;
margin: var(--r-sp-8) auto 0;
line-height: 1.5;
}
/* Field — Polymer floating label: bottom-line gradient, no borders */
.r-contact__field {
position: relative;
padding-top: 24px;
margin-bottom: 20px;
}
.r-contact__input {
display: block;
width: 100%;
font-size: var(--r-text-base);
font-weight: 400;
font-family: inherit;
color: var(--r-ink);
padding: var(--r-sp-2) 0;
border: none;
border-bottom: 1px solid var(--r-border);
border-radius: 0;
outline: none;
background-color: transparent;
background-image: linear-gradient(var(--r-accent), var(--r-accent));
background-position: bottom center;
background-size: 0 2px;
background-repeat: no-repeat;
transition: background-size .2s ease-in;
}
.r-contact__input::placeholder { color: transparent; }
.r-contact__input:focus {
border-bottom-color: transparent;
background-size: 100% 2px;
}
/* Label — floats up on focus/filled (scale transform like CMS) */
.r-contact__label {
position: absolute;
left: 0;
top: 32px;
font-size: var(--r-text-base);
font-weight: 400;
color: var(--r-ink-faint);
pointer-events: none;
transform-origin: 0 0;
transition: transform .15s ease-out, opacity .15s ease-out, color .15s ease-out;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.r-contact__input:focus ~ .r-contact__label {
opacity: 1;
transform: translate3d(0, -1.9em, 0) scale(.8);
color: var(--r-accent);
}
.r-contact__input:not(:placeholder-shown) ~ .r-contact__label {
opacity: 1;
transform: translate3d(0, -1.9em, 0) scale(.8);
}
/* Select variant — un