/* ============================================================
   Detail Booking — visual system from the owner's Claude Design
   file "Detail Booking.dc.html" (2026-07-15). PURELY VISUAL:
   every route, form field, and JS hook of the funnel is intact.

   Scope: pages that set body class .dcb-page (booking steps +
   quote + confirmation). Owner correction 2026-07-16: the accent
   is the BRAND RED #e52929 (the design file's gold default was
   off-brand); success moments use the site's green. Structure
   (Archivo type, pill CTAs, 18px cards) stays from the design.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
}

:root {
  --dcb-accent: #e52929;
  --dcb-accent-ink: #ffffff;
  --dcb-success: #4fc38a;
  --dcb-bg: #0a0e13;
  --dcb-bg-deep: #05070a;
  --dcb-card-bg: rgba(255, 255, 255, 0.04);
  --dcb-card-bd: rgba(255, 255, 255, 0.1);
  --dcb-input-bg: rgba(255, 255, 255, 0.05);
  --dcb-input-bd: rgba(255, 255, 255, 0.14);
  --dcb-ink: #f2f5f7;
  --dcb-ink-soft: #9aa7b4;
  --dcb-ink-mute: #8d9aa7;
  --dcb-ink-faint: #66727e;
  --dcb-font: "Archivo", system-ui, sans-serif;
  --dcb-r-card: 18px;
  --dcb-r-input: 14px;
}

@keyframes dcbScreenIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes dcbSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dcbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dcbPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes dcbSpin { to { transform: rotate(360deg); } }

body.dcb-page {
  background: var(--dcb-bg-deep);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
  -webkit-font-smoothing: antialiased;
}
/* gold links only inside the app column — the site header keeps its own look */
.dcb-app a:not([class]), .dcb-app .inline-link { color: var(--dcb-accent); }
.dcb-app a:not([class]):hover, .dcb-app .inline-link:hover { color: #ff5b5b; }
body.dcb-page input::placeholder,
body.dcb-page textarea::placeholder { color: var(--dcb-ink-faint); }

.dcb-nsb { scrollbar-width: none; }
.dcb-nsb::-webkit-scrollbar { display: none; }

/* ---------- App column: phone-first, centered on desktop ---------- */
.dcb-app {
  position: relative;
  margin: 0 auto;
  max-width: 480px;
  /* fill the viewport below the sticky 83px site header */
  min-height: calc(100dvh - 83px);
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 60% at 50% -10%, #141c26 0%, #0a0e13 60%);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
}

/* ---------- Step header: back circle + kicker/title + count ---------- */
.dcb-head {
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dcb-head-row { display: flex; align-items: center; gap: 12px; }
.dcb-back {
  width: 44px; height: 44px; flex: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dcb-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.dcb-back:hover { background: rgba(255, 255, 255, 0.1); color: var(--dcb-ink); }
.dcb-head-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcb-kicker {
  margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dcb-ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dcb-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--dcb-ink); }
.dcb-stepcount {
  margin-left: auto; flex: none;
  font-size: 12px; font-weight: 700; color: var(--dcb-ink-mute);
  font-variant-numeric: tabular-nums;
}
.dcb-progress { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dcb-progress-fill { height: 100%; border-radius: 999px; background: var(--dcb-accent); transition: width 0.35s; }

/* ---------- Scrollable step body ---------- */
.dcb-body { flex: 1; padding: 6px 18px 24px; animation: dcbScreenIn 0.32s ease; }
/* keep tappable rows clear of the sticky site header / glass footer */
.dcb-body button, .dcb-body a, .dcb-body input, .dcb-body select {
  scroll-margin-top: 110px;
  scroll-margin-bottom: 110px;
}
.dcb-sub { margin: 2px 0 16px; font-size: 14px; color: var(--dcb-ink-soft); line-height: 1.5; }
.dcb-note { margin: 16px 0 0; font-size: 12.5px; color: var(--dcb-ink-faint); }
.dcb-label {
  margin: 20px 0 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dcb-ink-mute);
}

/* ---------- Sticky glass footer: total + CTA pill ---------- */
.dcb-foot {
  /* z-index por encima de las sugerencias de dirección (40): el botón de
     pagar no puede quedar debajo de NADA que se pueda tocar. Sigue por debajo
     de las hojas modales (60). */
  position: sticky; bottom: 0; z-index: 41;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 11, 16, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; gap: 14px;
}
.dcb-foot-total { display: flex; flex-direction: column; gap: 1px; flex: none; }
.dcb-foot-total .k {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dcb-ink-mute);
}
.dcb-foot-total .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dcb-ink); }

/* ---------- Buttons ---------- */
.dcb-btn {
  height: 54px;
  border-radius: 999px;
  border: none;
  background: var(--dcb-accent);
  color: var(--dcb-accent-ink);
  font-family: var(--dcb-font);
  font-size: 15.5px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.2s, transform 0.1s;
  text-decoration: none;
}
.dcb-btn:hover { filter: brightness(1.06); color: var(--dcb-accent-ink); }
.dcb-btn:active { transform: scale(0.98); }
.dcb-btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.dcb-btn--full { width: 100%; }
.dcb-btn--grow { flex: 1; }
.dcb-btn--ghost {
  background: rgba(13, 18, 25, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--dcb-ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dcb-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); filter: none; color: var(--dcb-ink); }
.dcb-chipbtn {
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #c3cdd6;
  font-family: var(--dcb-font);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background 0.2s;
}
.dcb-chipbtn:hover { background: rgba(255, 255, 255, 0.08); color: #c3cdd6; }

/* ---------- Option rows (vehicle sizes, add-ons, entry) ---------- */
.dcb-options { display: flex; flex-direction: column; gap: 10px; }
.dcb-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px;
  border-radius: var(--dcb-r-card);
  border: 1.5px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  color: var(--dcb-ink);
  cursor: pointer;
  text-align: left;
  font-family: var(--dcb-font);
  transition: border-color 0.2s, background 0.2s;
  text-decoration: none;
}
.dcb-option:hover { border-color: rgba(255, 255, 255, 0.22); color: var(--dcb-ink); }
.dcb-option:active { transform: scale(0.99); }
.dcb-option.is-selected {
  border-color: var(--dcb-accent);
  background: rgba(229, 41, 41, 0.09);
}
.dcb-option-badge {
  width: 50px; height: 50px; flex: none;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
  background: rgba(255, 255, 255, 0.07);
  color: var(--dcb-ink);
  transition: background 0.2s, color 0.2s;
}
.dcb-option.is-selected .dcb-option-badge { background: var(--dcb-accent); color: var(--dcb-accent-ink); }
.dcb-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dcb-option-title { font-size: 15.5px; font-weight: 700; color: var(--dcb-ink); }
.dcb-option-desc {
  font-size: 12.5px; color: var(--dcb-ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dcb-option-price {
  margin-left: auto; flex: none;
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dcb-ink-mute);
}
.dcb-option.is-selected .dcb-option-price { color: var(--dcb-accent); }

/* Checkbox square for add-ons */
.dcb-check {
  width: 26px; height: 26px; flex: none;
  border-radius: 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.dcb-check svg { opacity: 0; transition: opacity 0.15s; }
.dcb-option.is-selected .dcb-check { border-color: var(--dcb-accent); background: var(--dcb-accent); }
.dcb-option.is-selected .dcb-check svg { opacity: 1; }

/* ---------- Cards (review rows, summaries) ---------- */
.dcb-card {
  padding: 16px;
  border-radius: var(--dcb-r-card);
  border: 1px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
}
.dcb-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; color: #b9c3cc; }
.dcb-row .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--dcb-ink); text-align: right; }
.dcb-divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 10px 0; }
.dcb-total-row { display: flex; justify-content: space-between; align-items: baseline; }
.dcb-total-row .k { font-size: 14px; font-weight: 700; color: var(--dcb-ink); }
.dcb-total-row .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dcb-ink); }

/* ---------- Form fields ---------- */
.dcb-field { display: flex; flex-direction: column; gap: 6px; }
.dcb-field > span,
.dcb-field-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dcb-ink-mute);
}
.dcb-input,
body.dcb-page .dcb-body input[type="text"],
body.dcb-page .dcb-body input[type="email"],
body.dcb-page .dcb-body input[type="tel"],
body.dcb-page .dcb-body input[type="number"],
body.dcb-page .dcb-body select {
  width: 100%; height: 52px; padding: 0 16px;
  border-radius: var(--dcb-r-input);
  border: 1px solid var(--dcb-input-bd);
  background: var(--dcb-input-bg);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}
.dcb-textarea,
body.dcb-page .dcb-body textarea {
  width: 100%; padding: 14px 16px;
  border-radius: var(--dcb-r-input);
  border: 1px solid var(--dcb-input-bd);
  background: var(--dcb-input-bg);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
  font-size: 16px;
  outline: none; resize: none;
  transition: border-color 0.2s;
}
body.dcb-page .dcb-body input:focus,
body.dcb-page .dcb-body select:focus,
body.dcb-page .dcb-body textarea:focus { border-color: var(--dcb-accent); box-shadow: none; }
.dcb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dcb-stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Date chips + time grid (schedule) ---------- */
.dcb-dates-wrap { position: relative; margin: 0 -18px; }
.dcb-dates {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 2px 18px 4px;
  cursor: grab;
  touch-action: pan-x;
}
.dcb-dates-fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  background: linear-gradient(90deg, rgba(10, 14, 19, 0), #0a0e13);
  pointer-events: none;
}
.dcb-date {
  flex: none; width: 60px;
  padding: 11px 0 10px;
  border-radius: 16px;
  border: 1.5px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  color: var(--dcb-ink);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--dcb-font);
  transition: all 0.2s;
}
.dcb-date .wd { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.dcb-date .dn { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dcb-date.is-selected { border-color: var(--dcb-accent); background: var(--dcb-accent); color: var(--dcb-accent-ink); }
.dcb-date:disabled { opacity: 0.35; cursor: default; }
.dcb-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dcb-time {
  height: 52px;
  border-radius: 16px;
  border: 1.5px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 0.2s;
}
.dcb-time.is-selected { border-color: var(--dcb-accent); background: var(--dcb-accent); color: var(--dcb-accent-ink); }
.dcb-time:disabled { opacity: 0.35; cursor: default; }

/* ---------- Alerts (waitlist, errors) ---------- */
.dcb-alert {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: var(--dcb-r-card);
  border: 1px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  font-size: 13.5px; color: #b9c3cc; line-height: 1.5;
}
.dcb-alert--success { border-color: rgba(79, 195, 138, 0.4); color: var(--dcb-ink); }
.dcb-alert strong { color: var(--dcb-ink); }

/* ---------- Confirmation ---------- */
.dcb-confirm {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, #151f2b 0%, #0a0e13 62%);
  animation: dcbFadeIn 0.4s ease;
}
.dcb-confirm-badge {
  width: 86px; height: 86px;
  border-radius: 999px;
  background: var(--dcb-success);
  display: flex; align-items: center; justify-content: center;
  animation: dcbPop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.7);
}
.dcb-confirm-title { margin: 22px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--dcb-ink); }
.dcb-confirm-sub { margin: 8px 0 0; font-size: 14.5px; color: var(--dcb-ink-soft); max-width: 30ch; line-height: 1.5; }
.dcb-code {
  margin-top: 22px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  color: #e8edf2;
}
.dcb-confirm-card {
  margin-top: 18px;
  width: 100%; max-width: 340px;
  padding: 16px;
  border-radius: var(--dcb-r-card);
  border: 1px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  display: flex; flex-direction: column; gap: 9px;
  text-align: left;
}
.dcb-confirm-card .dcb-row .k { color: var(--dcb-ink-mute); flex: none; }

/* Confirmation page extras */
.dcb-confirm { justify-content: flex-start; padding-top: 46px; }
/* theme.css paints a green inset ring on any [data-dd-success] (old green
   check design) — the gold badge IS the success signal here */
body.dcb-page [data-dd-success] { box-shadow: none; }
.dcb-payhero { display: flex; flex-direction: column; align-items: center; }
.dcb-payhero[hidden] { display: none; }
.dcb-payhero-title {
  margin: 18px 0 0;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dcb-ink-mute);
}
.dcb-payhero-amount {
  margin: 4px 0 0;
  font-size: 40px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--dcb-ink);
}
.dcb-processing {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 6px;
}
.dcb-processing[hidden] { display: none; }
.dcb-processing .t1 { font-size: 14px; font-weight: 600; color: #c3cdd6; }
.dcb-processing .t2 { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--dcb-ink-faint); }
.dcb-confirm-cta { margin-top: 18px; width: 100%; max-width: 340px; }
.dcb-confirm .dcb-alert { max-width: 340px; width: 100%; }
.dcb-confirm-note { margin: 12px 0 0; font-size: 12.5px; color: var(--dcb-ink-faint); max-width: 34ch; line-height: 1.5; }
.dcb-confirm-list {
  margin: 10px 0 0; padding: 0 0 0 2px;
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; line-height: 1.5; color: #b9c3cc;
}
.dcb-confirm-list strong { color: var(--dcb-ink); }
.dcb-confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
body.dcb-page .alert.hidden { display: none !important; }

/* ---------- Paying / processing overlay ---------- */
.dcb-paying {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(5, 8, 12, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: dcbFadeIn 0.2s ease;
}
.dcb-paying[hidden] { display: none; }
.dcb-spinner {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--dcb-accent);
  animation: dcbSpin 0.8s linear infinite;
}
.dcb-paying .t1 { font-size: 14px; font-weight: 600; color: #c3cdd6; }
.dcb-paying .t2 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--dcb-ink-faint); }

body.dcb-page .site-main { padding: 0; }

/* ============================================================
   Funnel-interior overrides: the existing booking DOM (aui-*,
   slot buttons, vehicle tiles) restyled to the Detail Booking
   look WITHOUT touching ids/classes the funnel JS depends on.
   ============================================================ */

/* Option tiles (vehicle types, entry choices, addon cards) */
body.dcb-page .aui-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px;
  border-radius: var(--dcb-r-card);
  border: 1.5px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  color: var(--dcb-ink);
  cursor: pointer; text-align: left;
  font-family: var(--dcb-font);
  transition: border-color 0.2s, background 0.2s;
  text-decoration: none;
  box-shadow: none;
}
body.dcb-page .aui-option:hover { border-color: rgba(255, 255, 255, 0.22); background: var(--dcb-card-bg); }
body.dcb-page .aui-option.is-selected,
body.dcb-page .aui-option:has(input:checked) {
  border-color: var(--dcb-accent);
  background: rgba(229, 41, 41, 0.09);
}
body.dcb-page .aui-option-media {
  width: 50px; height: 50px; flex: none;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  color: var(--dcb-ink);
  overflow: hidden;
  transition: background 0.2s, color 0.2s;
}
body.dcb-page .aui-option.is-selected .aui-option-media,
body.dcb-page .aui-option:has(input:checked) .aui-option-media { background: var(--dcb-accent); color: var(--dcb-accent-ink); }
body.dcb-page .aui-option-media img,
body.dcb-page .aui-option-media video { width: 100%; height: 100%; object-fit: cover; }
body.dcb-page .aui-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.dcb-page .aui-option-title { font-size: 15.5px; font-weight: 700; color: var(--dcb-ink); }
body.dcb-page .aui-option-desc { font-size: 12.5px; color: var(--dcb-ink-mute); }
body.dcb-page .aui-option-price,
body.dcb-page .aui-option-meta {
  margin-left: auto; flex: none;
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dcb-ink-mute);
}
body.dcb-page .aui-option-check {
  margin-left: auto; flex: none;
  width: 26px; height: 26px;
  border-radius: 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: all 0.2s;
}
body.dcb-page .aui-option.is-selected .aui-option-check,
body.dcb-page .aui-option:has(input:checked) .aui-option-check {
  border-color: var(--dcb-accent);
  background: var(--dcb-accent);
  color: var(--dcb-accent-ink);
}

/* Slot time buttons (built by booking_slots.js) */
body.dcb-page .booking-slot-times,
body.dcb-page .slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.dcb-page .slot-button {
  height: 52px;
  border-radius: 16px;
  border: 1.5px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 0.2s;
}
body.dcb-page .slot-button:hover { border-color: rgba(255, 255, 255, 0.26); }
body.dcb-page .slot-button.is-selected {
  border-color: var(--dcb-accent);
  background: var(--dcb-accent);
  color: var(--dcb-accent-ink);
}
body.dcb-page .slot-skeleton {
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  background-size: 200% 100%;
  animation: dcbFadeIn 0.3s ease, dcbShimmer 1.4s linear infinite;
}
@keyframes dcbShimmer { to { background-position: -200% 0; } }

/* Date input + generic funnel inputs already styled via .dcb-body */
body.dcb-page .booking-config-date {
  width: 100%; height: 52px; padding: 0 16px;
  border-radius: var(--dcb-r-input);
  border: 1px solid var(--dcb-input-bd);
  background: var(--dcb-input-bg);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
  color-scheme: dark;
}
body.dcb-page .booking-config-date:focus { border-color: var(--dcb-accent); box-shadow: none; }

/* Alerts / empty states */
body.dcb-page .booking-config-alert {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--dcb-r-card);
  border: 1px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  font-size: 13.5px; color: #b9c3cc; line-height: 1.5;
}
body.dcb-page .booking-config-alert--success { border-color: rgba(79, 195, 138, 0.4); color: var(--dcb-ink); }
body.dcb-page .booking-config-empty {
  margin: 12px 0 0;
  padding: 16px;
  border-radius: var(--dcb-r-card);
  border: 1px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13.5px; color: #b9c3cc;
}
body.dcb-page .booking-config-empty strong { color: var(--dcb-ink); }
body.dcb-page .booking-config-empty.hidden,
body.dcb-page .booking-config-alert.hidden { display: none; }

/* Waitlist mini-form */
body.dcb-page .booking-waitlist { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
body.dcb-page .booking-waitlist-lead { font-size: 13px; color: var(--dcb-ink-soft); }
body.dcb-page .booking-waitlist-row { display: flex; gap: 10px; }
body.dcb-page .booking-waitlist-row input { flex: 1; min-width: 0; }
body.dcb-page .booking-waitlist-row .aui-btn { flex: none; }

/* Specialty / oversized cross-link */
body.dcb-page .booking-specialty {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px; padding: 14px;
  border-radius: var(--dcb-r-card);
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--dcb-ink);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
body.dcb-page .booking-specialty:hover { border-color: var(--dcb-accent); background: rgba(240, 180, 41, 0.05); color: var(--dcb-ink); }
body.dcb-page .booking-specialty-media {
  width: 50px; height: 50px; flex: none;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.07);
}
body.dcb-page .booking-specialty-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.dcb-page .booking-specialty-title { font-size: 15px; font-weight: 700; }
body.dcb-page .booking-specialty-desc { font-size: 12.5px; color: var(--dcb-ink-mute); }
body.dcb-page .booking-specialty-cta {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--dcb-accent);
}

/* Legacy aui buttons that remain inside funnel forms */
body.dcb-page .aui-btn {
  border-radius: 999px;
  font-family: var(--dcb-font);
  font-weight: 700;
}
body.dcb-page .aui-btn--primary {
  background: var(--dcb-accent);
  border: none;
  color: var(--dcb-accent-ink);
  height: 54px;
  font-size: 15.5px;
  padding: 0 22px;
}
body.dcb-page .aui-btn--primary:hover { background: var(--dcb-accent); filter: brightness(1.06); color: var(--dcb-accent-ink); }
body.dcb-page .aui-btn--primary:disabled { opacity: 0.45; filter: none; }
body.dcb-page .aui-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--dcb-ink);
}
body.dcb-page .aui-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--dcb-ink); }

/* Eyebrow labels inside funnel forms */
body.dcb-page .aui-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dcb-ink-mute);
  font-family: var(--dcb-font);
}

/* Legacy row lists still used in small blocks (referral summary) */
body.dcb-page .booking-config-rows {
  margin-top: 10px;
  padding: 16px;
  border-radius: var(--dcb-r-card);
  border: 1px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  display: flex; flex-direction: column; gap: 9px;
}
body.dcb-page .booking-config-row {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 13.5px; color: #b9c3cc;
}
body.dcb-page .booking-config-row strong { font-weight: 600; color: var(--dcb-ink); font-variant-numeric: tabular-nums; text-align: right; }

/* Review page: field pattern + split grids + checks + promo + tips */
body.dcb-page .field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
body.dcb-page .field label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dcb-ink-mute);
}
body.dcb-page .field-opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--dcb-ink-faint); }
body.dcb-page .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.dcb-page .split-grid:has(> .field:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; }
body.dcb-page .split-grid .field { min-width: 0; }
body.dcb-page .booking-review-section { margin-top: 22px; }
body.dcb-page .booking-review-section > .aui-eyebrow { margin: 0 0 2px; }
body.dcb-page .booking-review-check {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 10px; padding: 14px 16px;
  border-radius: var(--dcb-r-card);
  border: 1px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  font-size: 13.5px; line-height: 1.5; color: #b9c3cc;
  cursor: pointer;
}
body.dcb-page .booking-review-check input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
body.dcb-page .booking-review-note { margin: 8px 0 0; font-size: 12.5px; color: var(--dcb-ink-faint); line-height: 1.5; }
body.dcb-page .booking-review-note.is-warning { color: #f0b429; } /* ámbar semántico de aviso, no acento */
body.dcb-page .booking-review-promo { display: flex; gap: 10px; margin-top: 10px; }
body.dcb-page .booking-review-promo input { flex: 1; min-width: 0; }
body.dcb-page .booking-review-promo .aui-btn { flex: none; height: 52px; padding: 0 20px; }
body.dcb-page .aui-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
body.dcb-page .booking-tip-option,
body.dcb-page .aui-swatch {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--dcb-card-bd);
  background: var(--dcb-card-bg);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
body.dcb-page .booking-tip-option input { position: absolute; opacity: 0; pointer-events: none; }
body.dcb-page .booking-tip-option:has(input:checked) {
  border-color: var(--dcb-accent);
  background: var(--dcb-accent);
  color: var(--dcb-accent-ink);
}
body.dcb-page .booking-review-policy-link { display: inline-block; margin-top: 10px; font-size: 13px; }

/* Add-ons: hidden native inputs inside label cards (JS toggles is-selected) */
body.dcb-page .addon-native-input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
body.dcb-page .aui-option { position: relative; }

/* Add-on suggestion chips ("Recommended for …") */
body.dcb-page .booking-addon-suggest { display: flex; flex-direction: column; gap: 10px; }
body.dcb-page .booking-addon-suggest-list { display: flex; flex-wrap: wrap; gap: 8px; }
body.dcb-page .booking-addon-suggest-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
body.dcb-page .booking-addon-suggest-item:hover { border-color: var(--dcb-accent); background: rgba(229, 41, 41, 0.09); }
body.dcb-page .booking-addon-suggest-add {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; color: var(--dcb-accent);
  font-variant-numeric: tabular-nums;
}

/* Entry page: forms wrap the option buttons — let them size like rows */
body.dcb-page .booking-entry-options form { display: contents; }
body.dcb-page .booking-entry-arrow {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center;
  color: var(--dcb-ink-mute);
}

/* Radio/checkbox accent for small controls kept from the old system */
body.dcb-page input[type="checkbox"],
body.dcb-page input[type="radio"] { accent-color: var(--dcb-accent); }

/* ---------- Site chrome removal on funnel pages ---------- */
body.dcb-page .home-reference-footer { display: none; }

/* Desktop: soft vignette around the app column */
@media (min-width: 520px) {
  body.dcb-page { background: radial-gradient(80% 60% at 50% 20%, #0c1118 0%, #05070a 70%); }
  .dcb-app, .dcb-deck-page {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* ── Calendario del paso de fecha (A21 F-1821) ──────────────────────────────
   Diseño 1:1 con Calendly y Cal.com (investigación 2026-07-29). Las reglas:
   - 6 filas FIJAS: el alto del mes nunca cambia, la página no salta;
   - tres dibujos, no seis — disponible / no reservable / seleccionado. Un día
     lleno se ve igual que uno cerrado (Cal.com marca como fallo pintar un día
     lleno como si tuviera cupo);
   - en fondo oscuro el relleno NO puede ser la señal (ningún gris alcanza 3:1
     contra #0b0d10): la señal la lleva el TONO y el PESO del número, con
     `disabled` real y aria-label que lo dice en palabras;
   - chips de 44px: el mínimo táctil, igual que Calendly. */
.bkcal { margin-top: 4px; }
.bkcal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px;
}
.bkcal-month {
  margin: 0; font-family: var(--aui-font-head, "Space Grotesk", sans-serif);
  font-size: 16px; font-weight: 600; color: var(--aui-ink, #f4f6f8);
}
.bkcal-nav {
  width: 44px; height: 44px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; background: none; cursor: pointer;
  border-radius: var(--aui-radius-sm, 8px);
  color: var(--aui-ink-soft, #9aa3af);
}
.bkcal-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--aui-ink, #f4f6f8); }
.bkcal-nav:disabled { opacity: 0.3; cursor: default; }

.bkcal-week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 4px;
}
.bkcal-week span {
  /* mismo gris que un día sin cupo: así solo los días disponibles "saltan" */
  text-align: center; font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--aui-ink-faint, #6a727d);
}

.bkcal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 44px); gap: 4px;
}
.bkcal-day {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 44px; padding: 0;
  border: 1px solid transparent; border-radius: var(--aui-radius-sm, 8px);
  background: none; cursor: pointer;
  font-size: 16px; font-variant-numeric: tabular-nums;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}
.bkcal-day.is-blank { visibility: hidden; }
/* DISPONIBLE: número claro y peso 600 — la señal real */
.bkcal-day.is-open {
  background: #1c222a; border-color: #2a323d;
  color: var(--aui-ink, #f4f6f8); font-weight: 600;
}
.bkcal-day.is-open:hover { background: #232b35; }
/* LLENO o CERRADO: el mismo dibujo, sin caja y en gris con peso 400 */
.bkcal-day.is-full {
  color: var(--aui-ink-faint, #6a727d); font-weight: 400; cursor: default;
}
/* SELECCIONADO: el único rojo del paso */
.bkcal-day.is-selected {
  background: var(--brand-red, #e52929); border-color: var(--brand-red, #e52929);
  color: #fff; font-weight: 700;
}
.bkcal-day:focus-visible {
  outline: 2px solid var(--brand-red, #e52929); outline-offset: 2px;
}
/* HOY: un punto debajo del número que hereda su color — nunca puede fallar
   de contraste ni sobre el día seleccionado en rojo */
.bkcal-today-dot {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; margin-top: 13px; border-radius: 50%;
  background: currentColor; transform: translate(-50%, -50%);
}

.bkcal[data-cal-loading] .bkcal-grid { opacity: 0.35; }

.bkcal-empty {
  margin-top: 12px; padding: 12px; text-align: center;
  border: 1px solid var(--aui-line, rgba(255, 255, 255, 0.08));
  border-radius: var(--aui-radius, 12px);
}
.bkcal-empty[hidden] { display: none; }
/* Negocio cerrado del todo (cero días de trabajo): manda el cartel del
   calendario y se calla el del día suelto. "No availability for this day — try
   another date" promete otra fecha, y no hay ninguna. Va por CSS y no por
   clase en el JS porque quien enseña esa caja es otro módulo: si compitieran,
   ganaría el que respondiera último. */
body.bkcal-cerrado #slot-empty { display: none; }
.bkcal-empty p {
  margin: 0 0 4px; font-size: 14px; color: var(--aui-ink-soft, #9aa3af);
}
.bkcal-empty-next {
  border: 0; background: none; cursor: pointer; padding: 6px 4px;
  font-size: 15px; font-weight: 600; color: var(--brand-red, #e52929);
}

/* ── Sugerencias de dirección ────────────────────────────────────────────
   El cliente escribe la calle y elige de una lista en vez de teclear cuatro
   campos. La lista SE SUPERPONE en vez de empujar: si empujara, el formulario
   saltaría bajo el dedo justo mientras se lee, que es como se elige la
   dirección equivocada.

   `.is-above` la dibuja hacia arriba cuando el teclado del iPhone se come el
   espacio de abajo — lo decide el JS con `visualViewport`, que es lo único
   que sabe cuánta pantalla queda de verdad. */
body.dcb-page .dd-addr-wrap { position: relative; }

body.dcb-page .dd-addr-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  /* 320px = las cinco predicciones (el tope del API de Google) a la vista sin
     scroll interno. El JS lo encoge al hueco real cuando el teclado aprieta. */
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Cuando la lista SÍ tiene que desplazarse por dentro (teclado abierto), el
     gesto se queda en la lista: sin esto, llegar al final arrastraría la
     página entera con el desplegable abierto encima — el fallo clásico del
     `pac-container` de Google que los desarrolladores llevan años parcheando.
     Anclarla al campo (no al body) ya evita la otra mitad de ese bug: la
     lista viaja con el formulario al desplazar, nunca se queda flotando. */
  overscroll-behavior: contain;
  background: #10151c;
  border: 1px solid var(--dcb-input-bd);
  border-radius: var(--dcb-r-input);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
body.dcb-page .dd-addr-list[hidden] { display: none; }
body.dcb-page .dd-addr-list.is-above { top: auto; bottom: calc(100% + 4px); }

/* La fila, con la anatomía del patrón de las apps de reparto (el desplegable
   de Google Places que llevan DoorDash y Uber Eats): marca de lugar a la
   izquierda, calle arriba con lo tecleado EN NEGRITA (`.pac-matched`), ciudad
   debajo en gris. Cada línea en una sola línea con puntos suspensivos — una
   dirección que se parte en tres renglones convierte la lista en un muro. */
body.dcb-page .dd-addr-op {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 48px de alto y 6px de aire entre filas. Es un blanco para el pulgar, no
     una fila de tabla: el dueño reportó que bajando por la página se elegían
     direcciones que no quería, y dos blancos pegados multiplican el error de
     un dedo que ya venía torcido. */
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  /* El desplazamiento vertical es del navegador; nunca se secuestra el gesto.
     `manipulation` solo quita la espera del doble toque. */
  touch-action: manipulation;
}
body.dcb-page .dd-addr-op + .dd-addr-op { margin-top: 6px; }
body.dcb-page .dd-addr-op.is-active,
body.dcb-page .dd-addr-op:hover { background: rgba(255, 255, 255, 0.07); }
/* Solo al TENER el dedo encima y quieto: pintar la fila desde que se toca
   haría creer que ya quedó elegida cuando en realidad se está desplazando. */
body.dcb-page .dd-addr-op:active { background: rgba(255, 255, 255, 0.12); }

body.dcb-page .dd-addr-op > svg {
  width: 16px; height: 16px; flex: none;
  color: var(--dcb-ink-faint);
}
body.dcb-page .dd-addr-txt {
  display: flex; flex-direction: column; gap: 2px;
  /* Sin esto el hijo de un flex no encoge y los puntos suspensivos no llegan. */
  min-width: 0;
}
body.dcb-page .dd-addr-calle {
  font-size: 14.5px; font-weight: 500; color: var(--dcb-ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Lo que coincide con lo tecleado, en negrita — el ojo verifica de un vistazo
   que la fila habla de SU calle. */
body.dcb-page .dd-addr-calle strong { font-weight: 700; }
body.dcb-page .dd-addr-resto {
  font-size: 12.5px; color: var(--dcb-ink-soft); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Encabezado ÚNICO del grupo de fuera de zona. Ámbar, no el rojo de marca: el
   rojo es para LA acción de la pantalla (pagar), y una dirección fuera de zona
   es un aviso, no una alarma.

   Medido a 390 px: con el sello repetido fila por fila salían cinco ámbares
   seguidos que tapaban la única sugerencia buena — la primera. */
body.dcb-page .dd-addr-sep {
  margin: 6px 0 2px;
  padding: 6px 10px 2px;
  border-top: 1px solid var(--dcb-card-bd);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--dcb-ink-faint);
}
body.dcb-page .dd-addr-list .dd-addr-sep:first-child { border-top: 0; margin-top: 0; }

body.dcb-page .dd-addr-nota {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--dcb-ink-faint);
}
body.dcb-page .dd-addr-nota[hidden] { display: none; }
body.dcb-page .dd-addr-nota.is-warning { color: #f0b429; }
body.dcb-page .dd-addr-nota.is-ok { color: var(--dcb-success); }

/* ── El sello: la dirección resuelta se queda en su campo ────────────────
   Sustituye al bloque de cuatro líneas que salía al elegir (2026-08-08, el
   dueño: "cuando se selecciona una address recomendada sale un pedazo de texto
   redundante o que estorba"). Elegir ya es confirmar, así que no hay nada que
   confirmar debajo: la dirección se queda donde el cliente la va a mirar —su
   campo— con una marca de verificado y la señal de zona al lado.

   Dentro del campo y no debajo porque debajo vuelve a ser un bloque. El JS
   calcula el `padding-right` del campo con el ancho real del sello: sin ese
   hueco, el sello taparía el final de una calle larga justo cuando el cliente
   va a comprobarla. */
body.dcb-page .dd-addr-sello {
  position: absolute;
  right: 12px;
  /* El campo mide 52 px y vive bajo una etiqueta: se ancla al fondo del
     contenedor, que es donde está el campo, y sube la mitad de su propio alto. */
  bottom: 26px;
  transform: translateY(50%);
  display: flex; align-items: center; gap: 5px;
  max-width: 62%;
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.01em;
  /* Un sello, no un botón: nada que tocar aquí. */
  pointer-events: none;
}
body.dcb-page .dd-addr-sello[hidden] { display: none; }
body.dcb-page .dd-addr-sello svg { width: 15px; height: 15px; flex: none; }
body.dcb-page .dd-addr-sello.is-ok { color: var(--dcb-success); }
/* Ámbar, no el rojo de marca: el rojo es para LA acción de la pantalla
   (pagar). Una dirección fuera de zona es un aviso, no una alarma — y encima
   invita a seguir. */
body.dcb-page .dd-addr-sello.is-warning { color: #f0b429; }
/* Ciudad, estado y código postal en tres columnas no caben en un teléfono:
   a 390 px "Colorado Springs" se corta en "Colorado S". Se veía poco mientras
   el cliente lo escribía a mano —ya sabía lo que había puesto—, pero ahora lo
   rellena el buscador y el cliente tiene que poder LEER lo que se rellenó
   solo para confiar en ello.

   La ciudad se lleva su propia fila; estado y código postal son cortos y
   caben juntos. `:has()` para tocar SOLO la fila de la dirección: la misma
   rejilla la usan nombre/apellido y marca/modelo/año, que sí caben. */
@media (max-width: 430px) {
  body.dcb-page .split-grid:has(> .field > #service-city) {
    grid-template-columns: 1fr 1fr;
  }
  body.dcb-page .split-grid:has(> .field > #service-city) > .field:first-child {
    grid-column: 1 / -1;
  }
}

/* ── "Is your information correct?" — la confirmación única antes del pago ──
   Hoja inferior en móvil (el patrón de las apps de reparto, y el mismo gesto
   que el aui-modal del admin): sale de abajo, un vistazo, un toque. En
   pantallas grandes se centra como ventana. Sin scroll interno: si algún día
   no cabe, se recorta texto — no se añade scroll. */
body.dcb-page .dcb-verificar {
  margin: auto auto 0;
  width: 100%;
  max-width: 480px;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--dcb-card-bd);
  border-bottom: 0;
  border-radius: var(--dcb-r-card) var(--dcb-r-card) 0 0;
  background: #10151c;
  color: var(--dcb-ink);
  font-family: var(--dcb-font);
}
body.dcb-page .dcb-verificar::backdrop {
  background: rgba(4, 7, 11, 0.62);
  backdrop-filter: blur(2px);
}
@media (min-width: 640px) {
  body.dcb-page .dcb-verificar {
    margin: auto;
    border-bottom: 1px solid var(--dcb-card-bd);
    border-radius: var(--dcb-r-card);
  }
}

body.dcb-page .dcb-verificar-tit,
.dcb-app--modal .dcb-verificar-tit {
  margin: 0 0 4px;
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
}

/* Cada bloque: etiqueta pequeña, el dato en grande, y su "Edit" a la derecha
   — el resumen editable por secciones de los checkouts de élite, con etiqueta
   de texto y no icono suelto (Baymard prefiere el rótulo explícito, y no hay
   lápiz en el juego de iconos de la casa). */
body.dcb-page .dcb-verificar-bloque,
.dcb-app--modal .dcb-verificar-bloque {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.dcb-page .dcb-verificar-txt,
.dcb-app--modal .dcb-verificar-txt { flex: 1; min-width: 0; }
body.dcb-page .dcb-verificar-eti,
.dcb-app--modal .dcb-verificar-eti {
  margin: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--dcb-ink-mute);
}
body.dcb-page .dcb-verificar-val,
.dcb-app--modal .dcb-verificar-val {
  margin: 3px 0 0;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  overflow-wrap: anywhere;
}
body.dcb-page .dcb-verificar-nota,
.dcb-app--modal .dcb-verificar-nota {
  margin: 2px 0 0;
  font-size: 12.5px; line-height: 1.4; color: var(--dcb-ink-faint);
}
body.dcb-page .dcb-verificar-nota[hidden],
.dcb-app--modal .dcb-verificar-nota[hidden] { display: none; }
body.dcb-page .dcb-verificar-edit,
.dcb-app--modal .dcb-verificar-edit {
  flex: none;
  min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--dcb-card-bd); border-radius: 999px;
  background: transparent; color: var(--dcb-ink);
  font-family: var(--dcb-font); font-size: 13px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
body.dcb-page .dcb-verificar-edit:hover,
.dcb-app--modal .dcb-verificar-edit:hover { background: rgba(255, 255, 255, 0.06); }

body.dcb-page .dcb-verificar-pago,
.dcb-app--modal .dcb-verificar-pago { padding: 12px 0 2px; }
body.dcb-page .dcb-verificar-fila,
.dcb-app--modal .dcb-verificar-fila {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px;
}
body.dcb-page .dcb-verificar-fila strong,
.dcb-app--modal .dcb-verificar-fila strong { font-size: 17px; font-weight: 800; }
body.dcb-page .dcb-verificar-fila.is-resto,
.dcb-app--modal .dcb-verificar-fila.is-resto {
  margin-top: 2px;
  font-size: 12.5px; color: var(--dcb-ink-faint);
}

/* La primaria hereda .dcb-btn (el rojo de LA acción); aquí solo el ancho. */
body.dcb-page .dcb-verificar-pagar { width: 100%; margin-top: 14px; }

/* Letra pequeña del consentimiento de SMS. Va DEBAJO de la casilla y en la
   misma pantalla: el revisor de A2P 10DLC pide una captura de esta pantalla y
   busca aquí la frecuencia, las tarifas, cómo darse de baja y el enlace a la
   política. Tenerlo sólo en la política no basta. */
body.dcb-page .booking-review-fineprint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dcb-ink-faint);
}
/* El enlace a la política tiene que distinguirse del gris de la letra
   pequeña: el revisor de A2P lo busca en la captura, y un enlace que sólo se
   diferencia por el subrayado se pierde a tamaño de teléfono. */
body.dcb-page .booking-review-fineprint a {
  color: var(--dcb-ink-soft);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.dcb-page .booking-review-fineprint a:hover { color: var(--dcb-ink); }