/* Reserva de videollamada del holding (2026-10-03). Se adapta a cada marca
   redefiniendo estas variables en el contenedor [data-reserva]:
     --rv-accent      color de marca (botones elegidos, foco)
     --rv-accent-ink  tinta sobre el color de marca
     --rv-surface     fondo de las tarjetas/botones
     --rv-surface-2   fondo al pasar el ratón
     --rv-line        bordes
     --rv-text / --rv-text-soft / --rv-text-mute
     --rv-radius */
[data-reserva] {
  --rv-accent: var(--gold, #e4b563);
  --rv-accent-ink: #1a1407;
  --rv-surface: rgba(255, 255, 255, .04);
  --rv-surface-2: rgba(255, 255, 255, .08);
  --rv-line: rgba(255, 255, 255, .12);
  --rv-text: var(--text, #ede9dd);
  --rv-text-soft: var(--text-soft, #c7c2b2);
  --rv-text-mute: var(--text-mute, #8c8779);
  --rv-radius: 14px;
  color: var(--rv-text);
  scroll-margin-top: 90px;
}
[data-reserva] [hidden] { display: none !important; }
.rv-head { margin-bottom: 1.2rem; }
.rv-progress { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rv-progress li {
  flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 0;
  font-size: .78rem; letter-spacing: .02em; color: var(--rv-text-mute);
  padding-top: .6rem; border-top: 3px solid var(--rv-line);
}
.rv-progress li span {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; border: 1px solid var(--rv-line);
}
.rv-progress li.is-current { color: var(--rv-text); border-top-color: var(--rv-accent); }
.rv-progress li.is-current span, .rv-progress li.is-done span { background: var(--rv-accent); color: var(--rv-accent-ink); border-color: transparent; }
.rv-progress li.is-done { border-top-color: var(--rv-accent); }
@media (max-width: 480px) { .rv-progress li { font-size: 0; gap: 0; } .rv-progress li span { font-size: .72rem; } }

.rv-resumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-bottom: 1.2rem;
  padding: .85rem 1rem; border-radius: var(--rv-radius); border: 1px solid var(--rv-accent);
  background: color-mix(in srgb, var(--rv-accent) 10%, transparent);
}
.rv-resumen-k { width: 100%; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rv-accent); }
.rv-resumen small { color: var(--rv-text-soft); }

.rv-body h3, .rv-q legend { font-size: clamp(1.08rem, 2.2vw, 1.3rem); font-weight: 650; margin: 0 0 .9rem; color: var(--rv-text); outline: none; }
.rv-body h3 small { font-weight: 400; font-size: .8em; color: var(--rv-text-mute); }
.rv-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.rv-help { margin: -.4rem 0 1rem; color: var(--rv-text-mute); font-size: .92rem; }
.rv-options { display: grid; gap: .65rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rv-options { grid-template-columns: 1fr 1fr; } }
.rv-option, .rv-day, .rv-slot, .rv-prox {
  font: inherit; color: var(--rv-text); cursor: pointer; text-align: left;
  border: 1px solid var(--rv-line); background: var(--rv-surface); border-radius: var(--rv-radius);
  transition: border-color .2s, background .2s, transform .2s;
}
.rv-option { display: grid; gap: .2rem; padding: 1rem 1.1rem; min-height: 56px; }
.rv-option strong { font-weight: 600; font-size: 1rem; }
.rv-option small { color: var(--rv-text-mute); font-size: .85rem; }
.rv-option:hover, .rv-day:hover, .rv-slot:hover, .rv-prox:hover { border-color: var(--rv-accent); background: var(--rv-surface-2); }
.rv-option:focus-visible, .rv-day:focus-visible, .rv-slot:focus-visible, .rv-prox:focus-visible, .rv-link:focus-visible {
  outline: 2px solid var(--rv-accent); outline-offset: 2px;
}
.rv-option.is-selected, .rv-day.is-selected { border-color: var(--rv-accent); background: color-mix(in srgb, var(--rv-accent) 14%, transparent); }

.rv-days { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1.3rem; scroll-snap-type: x mandatory; }
.rv-day { flex: 0 0 auto; min-width: 92px; display: grid; justify-items: center; gap: .1rem; padding: .7rem .8rem; text-align: center; scroll-snap-align: start; }
.rv-day small { font-size: .74rem; color: var(--rv-text-mute); text-transform: capitalize; }
.rv-day strong { font-size: 1.5rem; line-height: 1.1; }
.rv-day em { font-style: normal; font-size: .7rem; color: var(--rv-accent); margin-top: .2rem; }
.rv-day.is-selected small { color: var(--rv-text-soft); }
.rv-slots { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-bottom: 1rem; }
.rv-slot { text-align: center; padding: .8rem .4rem; font-weight: 600; min-height: 48px; font-variant-numeric: tabular-nums; }
.rv-slot:hover { background: var(--rv-accent); color: var(--rv-accent-ink); }

.rv-fields { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rv-fields { grid-template-columns: 1fr 1fr; } .rv-field { grid-column: 1 / -1; } .rv-field.rv-half { grid-column: auto; } }
.rv-field { display: grid; gap: .4rem; }
.rv-field label { font-size: .9rem; color: var(--rv-text-soft); }
.rv-opt { color: var(--rv-text-mute); font-size: .85em; }
.rv-field input, .rv-field textarea {
  font: inherit; font-size: 16px; /* 16 px: iOS no hace zoom al enfocar */
  color: var(--rv-text); background: var(--rv-surface); border: 1px solid var(--rv-line); border-radius: 10px;
  padding: .85rem .95rem; min-height: 48px; width: 100%; box-sizing: border-box;
}
.rv-field input:focus, .rv-field textarea:focus { outline: none; border-color: var(--rv-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rv-accent) 25%, transparent); }
.rv-field input[aria-invalid="true"] { border-color: #d9776a; }
.rv-consent { display: flex; gap: .7rem; align-items: flex-start; margin: 1.1rem 0 .4rem; font-size: .88rem; color: var(--rv-text-soft); cursor: pointer; }
.rv-consent input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--rv-accent); flex: 0 0 auto; }
.rv-submit { width: 100%; margin-top: .8rem; justify-content: center; }
.rv-submit.is-sending { opacity: .8; cursor: progress; }
.rv-foot { margin-top: .8rem; font-size: .85rem; color: var(--rv-text-mute); text-align: center; }
.rv-error { color: #e79a8f; font-size: .92rem; margin: .6rem 0 0; }
.rv-error a { color: inherit; }
.rv-link { background: none; border: 0; padding: .5rem 0; min-height: 44px; color: var(--rv-text-mute); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rv-resumen .rv-link { margin-left: auto; color: var(--rv-accent); min-height: 0; padding: 0; }
.rv-back { display: inline-block; margin-top: .6rem; }
.rv-loading { display: flex; align-items: center; gap: .6rem; color: var(--rv-text-soft); }
.rv-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rv-line); border-top-color: var(--rv-accent); animation: rvSpin .8s linear infinite; }
@keyframes rvSpin { to { transform: rotate(360deg); } }
.rv-noencaja h3 { margin-bottom: .6rem; }
.rv-noencaja p { color: var(--rv-text-soft); margin-bottom: .8rem; }
.rv-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Tira de próximos huecos (fuera del formulario) */
[data-reserva-proximos] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.rv-prox-k { width: 100%; font-size: .78rem; color: var(--text-mute, #8c8779); letter-spacing: .04em; }
.rv-prox { padding: .55rem .85rem; font-size: .88rem; font-weight: 600; min-height: 44px; border-radius: 999px;
  color: var(--text, #ede9dd); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.rv-prox:hover { border-color: var(--gold, #e4b563); }
@media (prefers-reduced-motion: reduce) { .rv-spin { animation-duration: 2s; } }