/*
 * Componente de reservas. Se adapta al diseño cambiando solo estas variables en el CSS del sitio:
 *   .rv { --rv-accent: #b5651d; --rv-radius: 4px; --rv-font: "Playfair Display", serif; }
 * El resto de este archivo no se modifica.
 */
.rv {
  --rv-accent: #2f5bea;
  --rv-accent-ink: #fff;
  --rv-surface: #fff;
  --rv-ink: #1c1f26;
  --rv-muted: #6b7280;
  --rv-line: #e3e5ea;
  --rv-soft: #f4f5f8;
  --rv-radius: 12px;
  --rv-font: inherit;
  --rv-error: #b42318;
  font-family: var(--rv-font);
  color: var(--rv-ink);
  background: var(--rv-surface);
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  padding: clamp(16px, 3vw, 28px);
  display: grid;
  gap: 18px;
  text-align: left;
  box-sizing: border-box;
  max-width: 100%;
}
.rv *, .rv *::before, .rv *::after { box-sizing: border-box; }
.rv[aria-busy="true"] { opacity: .7; pointer-events: none; }
.rv-body, .rv-detail, .rv-slots-box, .rv-stay { display: grid; gap: 18px; }
.rv-field { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.rv-label { font-weight: 600; font-size: .95em; padding: 0; }
.rv-input { font: inherit; color: inherit; background: var(--rv-surface); border: 1px solid var(--rv-line);
            border-radius: calc(var(--rv-radius) * .6); padding: .6em .75em; min-height: 44px; width: 100%; }
.rv-input:focus-visible, .rv button:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; }
.rv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

.rv button { font: inherit; color: inherit; cursor: pointer; }
.rv-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.rv-service { display: grid; gap: 4px; text-align: left; padding: 14px 16px; background: var(--rv-surface);
              border: 1px solid var(--rv-line); border-radius: var(--rv-radius); transition: border-color .15s, box-shadow .15s; }
.rv-service:hover { border-color: var(--rv-accent); }
.rv-service[aria-checked="true"] { border-color: var(--rv-accent); box-shadow: inset 0 0 0 1px var(--rv-accent); }
.rv-service-name { font-weight: 600; }
.rv-service-desc, .rv-service-meta { font-size: .88em; color: var(--rv-muted); }

.rv-dates { display: grid; gap: 10px; }
.rv-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.rv-day { flex: 0 0 auto; width: 64px; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; scroll-snap-align: start;
          background: var(--rv-surface); border: 1px solid var(--rv-line); border-radius: calc(var(--rv-radius) * .8); }
.rv-day-dow, .rv-day-month { font-size: .75em; color: var(--rv-muted); text-transform: capitalize; }
.rv-day-num { font-size: 1.25em; font-weight: 700; }
.rv-day[aria-checked="true"] { background: var(--rv-accent); border-color: var(--rv-accent); color: var(--rv-accent-ink); }
.rv-day[aria-checked="true"] .rv-day-dow, .rv-day[aria-checked="true"] .rv-day-month { color: inherit; opacity: .85; }
.rv-other-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9em; color: var(--rv-muted); }
.rv-other-wrap .rv-input { width: auto; flex: 1 1 160px; max-width: 220px; }

.rv-period { margin: 4px 0 0; font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rv-muted); }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.rv-slot { min-height: 44px; padding: 8px; background: var(--rv-soft); border: 1px solid transparent; border-radius: calc(var(--rv-radius) * .6); font-weight: 600; }
.rv-slot:hover { border-color: var(--rv-accent); }
.rv-slot[aria-pressed="true"] { background: var(--rv-accent); color: var(--rv-accent-ink); }

.rv-suggestions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.rv-suggestion { display: grid; gap: 2px; text-align: left; padding: 10px 14px; background: var(--rv-soft);
                 border: 1px solid transparent; border-radius: calc(var(--rv-radius) * .6); }
.rv-suggestion:hover { border-color: var(--rv-accent); }
.rv-suggestion[aria-pressed="true"] { background: var(--rv-accent); color: var(--rv-accent-ink); }
.rv-suggestion-date { font-size: .85em; text-transform: capitalize; }

.rv-footer { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--rv-line); }
.rv-footer[hidden] { display: none; }
.rv-summary { margin: 0; font-weight: 600; text-transform: none; }
.rv-submit { justify-self: start; min-height: 48px; padding: .8em 1.8em; border: 0; border-radius: calc(var(--rv-radius) * .7);
             background: var(--rv-accent); color: var(--rv-accent-ink) !important; font-weight: 700; }
.rv-submit:disabled { opacity: .7; cursor: progress; }
.rv-note, .rv-empty, .rv-status { margin: 0; font-size: .88em; color: var(--rv-muted); }
.rv-status:empty { display: none; }
.rv-status.is-error, .rv-alert { color: var(--rv-error); }
.rv-alert { margin: 0; padding: 10px 14px; border: 1px solid currentColor; border-radius: calc(var(--rv-radius) * .6); font-weight: 600; }
.rv-banner { margin: 0; padding: 8px 12px; font-size: .82em; background: var(--rv-soft); border-radius: calc(var(--rv-radius) * .6); color: var(--rv-muted); }
@media (max-width: 480px) { .rv-submit { justify-self: stretch; } }

/* Reserva directa (hosting sin WordPress): datos del cliente y confirmación */
.rv-customer { display: grid; gap: 14px; }
.rv-methods { display: grid; gap: 8px; }
.rv-method { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--rv-line); border-radius: calc(var(--rv-radius) * .6); cursor: pointer; }
.rv-method:has(input:checked) { border-color: var(--rv-accent); box-shadow: inset 0 0 0 1px var(--rv-accent); }
.rv-method input { accent-color: var(--rv-accent); margin: 0; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.rv-link { background: none; border: 0; padding: 0; color: var(--rv-accent); text-decoration: underline; }
.rv-done { display: grid; gap: 10px; }
.rv-done-title { margin: 0; font-size: 1.1em; font-weight: 700; color: var(--rv-accent); }
.rv-code { margin: 0; }
.rv-pre { white-space: pre-line; padding: 10px 14px; background: var(--rv-soft); border-radius: calc(var(--rv-radius) * .6); }
.rv-body[hidden] { display: none; }