/* ══════════════════════════════════════════════════════════════════ San Marco · Botón flotante "Reservas" + modal de formulario Escrito desde cero para el sistema visual de San Marco. ══════════════════════════════════════════════════════════════════ */ /* ────────── Botón flotante ────────── */ .rx-fab { position: fixed; bottom: 1.8rem; right: 1.8rem; display: flex; align-items: center; gap: .6rem; padding: .95rem 1.45rem .95rem 1.1rem; border: 0; border-radius: 100px; background: #25d366; color: #062a15; font-family: var(--font-sans); font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px rgba(37,211,102,.35), var(--shadow); z-index: 45; transition: var(--t); } .rx-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(37,211,102,.45), var(--shadow-lg); } .rx-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .rx-fab__ico { display: grid; place-items: center; width: 22px; height: 22px; } .rx-fab__ico svg { width: 22px; height: 22px; } /* Cuando el Asistente IA está activo, se apila por encima */ body.rx-has-fab .fab-ai { bottom: 6.6rem; } /* ────────── Interruptores del panel (clases del ) ────────── El servidor escribe estas clases en el según la configuración, de modo que apagar el motor de reservas o el Asistente es reversible desde el panel y no deja cabos sueltos: nadie ve el CTA «Reservar» de la cabecera ni el flotante del Asistente si su sistema está apagado. */ body.reservas-off .header-cta-reservar { display: none !important; } body.asistente-off .fab-ai, body.asistente-off .asistente-entry { display: none !important; } @media (max-width: 640px) { .rx-fab { bottom: 1.2rem; right: 1.2rem; padding: .95rem; } .rx-fab__txt { display: none; } } /* ────────── Overlay + modal ────────── */ .rx-overlay { position: fixed; inset: 0; background: rgba(12,12,12,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 120; opacity: 0; transition: opacity .2s ease; overflow-y: auto; } .rx-overlay[hidden] { display: none; } .rx-overlay.is-open { opacity: 1; } .rx-modal { position: relative; background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 2.2rem 2rem 1.8rem; box-shadow: var(--shadow-lg); transform: translateY(14px) scale(.99); transition: transform .25s cubic-bezier(.2,.8,.2,1); -webkit-overflow-scrolling: touch; } .rx-overlay.is-open .rx-modal { transform: none; } /* Móvil: el modal ocupa toda la pantalla, cómodo para teclear */ @media (max-width: 640px) { .rx-overlay { padding: 0; align-items: stretch; } .rx-modal { max-width: none; max-height: none; min-height: 100%; border-radius: 0; padding: calc(1.4rem + env(safe-area-inset-top)) 1.25rem calc(1.6rem + env(safe-area-inset-bottom)); } } /* ────────── Botón cerrar (X) ────────── */ .rx-close { position: absolute; top: .9rem; right: .9rem; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-soft); cursor: pointer; z-index: 2; transition: var(--t-fast); } .rx-close svg { width: 18px; height: 18px; } .rx-close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .rx-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ────────── Cabecera ────────── */ .rx-head { padding-right: 3rem; margin-bottom: 1.4rem; } .rx-overline { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0; } .rx-title { font-family: var(--font-serif); font-size: 1.65rem; font-weight: 500; line-height: 1.15; margin: .3rem 0 .35rem; color: var(--ink); } .rx-sub { font-size: .9rem; color: var(--muted); margin: 0; } /* ────────── Campos ────────── */ .rx-form { display: flex; flex-direction: column; gap: 1rem; } .rx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .rx-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media (max-width: 480px) { .rx-row { grid-template-columns: 1fr; } } .rx-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .rx-field > label { font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 600; color: var(--ink-soft); } .rx-op { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); } /* Ayuda bajo el campo de email: explica para qué se pide la dirección. */ .rx-ayuda { margin: -.1rem 0 0; font-size: .76rem; line-height: 1.4; color: var(--muted); } .rx-field input, .rx-field select, .rx-field textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 1rem; /* ≥16px evita el zoom automático en iOS */ transition: var(--t-fast); } .rx-field textarea { resize: vertical; min-height: 62px; } .rx-field input:focus, .rx-field select:focus, .rx-field textarea:focus { outline: none; border-color: var(--ink); background: var(--bg); } .rx-field input.is-error { border-color: var(--danger); background: #fdf4f4; } /* ────────── Chips de hora de llegada ────────── */ .rx-chips { display: flex; flex-direction: column; gap: .7rem; } .rx-chips__label { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } .rx-chips__row { display: flex; flex-wrap: wrap; gap: .45rem; } .rx-chip { padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); color: var(--ink-soft); font-family: inherit; font-size: .85rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: var(--t-fast); } .rx-chip:hover { border-color: var(--ink); color: var(--ink); } .rx-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; } .rx-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ────────── Enviar ────────── */ .rx-submit { margin-top: .3rem; width: 100%; padding: 1.05rem 1.4rem; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; font-family: inherit; font-size: .92rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: var(--t); display: grid; place-items: center; min-height: 52px; } .rx-submit:hover { background: var(--accent-dark); } .rx-submit:disabled { opacity: .7; cursor: progress; } .rx-hint { font-size: .76rem; color: var(--muted); text-align: center; margin: 0; } .rx-spin { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rx-spin .8s linear infinite; } @keyframes rx-spin { to { transform: rotate(360deg); } } /* ────────── Confirmación ────────── */ .rx-ok { text-align: center; padding: .5rem 0; } .rx-ok[hidden] { display: none; } .rx-ok__ico { width: 58px; height: 58px; margin: 0 auto .9rem; display: grid; place-items: center; border-radius: 50%; background: #e6f6ea; color: var(--success); } .rx-ok__ico svg { width: 28px; height: 28px; } .rx-ok__title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; margin: 0 0 .5rem; } .rx-ok__code { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: .06em; color: var(--accent-dark); margin: .4rem 0 .8rem; } .rx-ok__code:empty { display: none; } .rx-ok__msg { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1.2rem; line-height: 1.5; } .rx-btn { display: block; width: 100%; padding: .95rem 1.3rem; border: 0; border-radius: var(--radius); font-family: inherit; font-size: .85rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: var(--t-fast); } .rx-btn + .rx-btn { margin-top: .6rem; } .rx-btn--wa { background: #25d366; color: #062a15; } .rx-btn--wa:hover { background: #1ebe5b; } .rx-btn--ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } .rx-btn--ghost:hover { border-color: var(--ink); color: var(--ink); } /* Bloquea el scroll del fondo mientras el modal está abierto */ body.rx-open { overflow: hidden; } /* En modo carta por mesa y en impresión, el flotante no pinta nada */ body.mc-mode .rx-fab { display: none; } @media print { .rx-fab, .rx-overlay { display: none !important; } }