/* reservar.xhtml con el mismo lenguaje visual del portal (vrdevgroup.com).
   Se carga solo desde reservar.xhtml, después de reserva-publica.css (que también usa appointment.xhtml),
   y todo está acotado a .reserva-publica-body para no afectar a la aplicación interna. Solo presentación. */
.reserva-publica-body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-top: 62px;
  background: var(--white); color: var(--text);
}
.reserva-publica-body,
.reserva-publica-body .ui-widget, .reserva-publica-body .ui-widget input, .reserva-publica-body .ui-widget button,
.reserva-publica-body .ui-inputfield, .reserva-publica-body .ui-selectonemenu-label, .reserva-publica-body .ui-button,
.reserva-publica-body .ui-messages, .reserva-publica-body .ui-datepicker, .reserva-publica-body .ui-selectonemenu-panel {
  font-family: var(--font-sans) !important;
}
.reserva-publica-body :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-dark) !important; outline-offset: 2px !important; border-radius: 10px;
}
.reserva-publica-body .reserva-publica-shell { flex: 1 0 auto; width: min(860px, calc(100% - 40px)); padding: 40px 0 48px; }

/* ---- Cabecera fija: wordmark a la izquierda, ES/EN a la derecha ---- */
.reserva-publica-body .reserva-publica-top-right {
  position: fixed; top: 0; left: 0; right: 0; z-index: 41; min-height: 62px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 36px; background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px rgba(22, 35, 74, 0); transition: box-shadow .22s ease;
}
.reserva-publica-body .reserva-publica-top-right.is-scrolled { box-shadow: 0 12px 30px rgba(22, 35, 74, .10); }
.reserva-publica-body .reserva-publica-brand-gif { width: 140px !important; max-width: none !important; opacity: 1; }
.reserva-publica-body .reserva-idioma-switch { border: 1px solid var(--line); background: var(--white); }
.reserva-publica-body .reserva-idioma-opcion {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0;
}
.reserva-publica-body .reserva-idioma-opcion.activa { background: var(--blue); color: var(--white); }

/* ---- Encabezado del negocio ---- */
.reserva-publica-body .reserva-publica-header span { text-transform: none; letter-spacing: 0; }
.reserva-publica-body .reserva-publica-header-top > * { color: var(--blue-dark); font-size: 14px; font-weight: 600; }
.reserva-publica-body .reserva-publica-header h1 { color: var(--ink); font-size: clamp(26px, 4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.reserva-publica-body .reserva-publica-header p { color: var(--muted); font-size: 16px; }

/* ---- Logo de la empresa (si subió uno): en un recuadro al lado del nombre y, muy tenue, fijo en el centro ---- */
.reserva-publica-body .reserva-publica-titulo { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.reserva-publica-body .reserva-publica-titulo h1 { min-width: 0; }
.reserva-publica-body .reserva-publica-logo {
  flex: none; box-sizing: border-box; width: auto; height: 84px; max-width: 168px; object-fit: contain;
  padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 14px;
}
/* Encima del contenido para que se vea también sobre las tarjetas; multiply solo oscurece lo blanco y no tapa
   el texto, y pointer-events: none deja tocar todo lo de abajo. */
.reserva-publica-body .reserva-publica-logo-fondo {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  width: min(560px, 82vw); max-height: 64vh; object-fit: contain; opacity: .06; mix-blend-mode: multiply;
  pointer-events: none; user-select: none;
}
.reserva-publica-body .reserva-publica-business-chip {
  padding: 8px 14px; border: 1px solid var(--line); background: var(--white); box-shadow: none;
  color: var(--text); font-size: 13.5px; font-weight: 500;
}
.reserva-publica-body .reserva-publica-business-chip i { color: var(--blue); }

/* ---- Tarjetas y pasos ---- */
.reserva-publica-body .reserva-publica-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; padding: 28px; }
.reserva-publica-body .reserva-paso { color: var(--muted); font-size: 13px; font-weight: 600; }
.reserva-publica-body .reserva-paso-num { background: var(--soft-2); color: var(--muted); font-weight: 700; }
.reserva-publica-body .reserva-paso.activo { color: var(--ink); }
.reserva-publica-body .reserva-paso.activo .reserva-paso-num { background: var(--blue); color: var(--white); }
.reserva-publica-body .reserva-paso.completado .reserva-paso-num { background: var(--blue-soft); color: var(--blue-dark); }
.reserva-publica-body .reserva-paso-titulo, .reserva-publica-body .reserva-preview-title { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.reserva-publica-body .reserva-paso-back { color: var(--blue-dark) !important; font-size: 14px !important; min-height: 44px; }

/* Buscador de servicios: queda pegado debajo de la barra de arriba mientras se baja por la lista. */
.reserva-publica-body .reserva-buscador {
  position: sticky; top: 70px; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  padding: 0 14px; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--muted);
}
.reserva-publica-body .reserva-buscador:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.reserva-publica-body .reserva-buscador input {
  flex: 1; min-width: 0; height: 46px; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px;
}
.reserva-publica-body .reserva-buscador input:focus-visible { outline: none; box-shadow: none; }
.reserva-publica-body .reserva-buscador-vacio { margin: 4px 2px 14px; color: var(--muted); font-size: 15px; }
.reserva-publica-body .reserva-card-item { min-height: 60px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: border-color .16s ease, background .16s ease; }
.reserva-publica-body .reserva-card-item:hover { border-color: var(--blue); background: var(--soft); }
.reserva-publica-body .reserva-card-item.seleccionada { border-color: var(--blue); background: var(--blue-soft); box-shadow: none; }
.reserva-publica-body .reserva-card-nombre { color: var(--ink); font-weight: 600; }
.reserva-publica-body .reserva-card-icono { border-color: var(--blue); color: var(--blue); }
.reserva-publica-body .reserva-card-icono.seleccionado { background: var(--blue); color: var(--white); }

.reserva-publica-body .reserva-hora-grupo-titulo { color: var(--muted); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.reserva-publica-body .reserva-hora-grupo-conteo, .reserva-publica-body .reserva-hora-ayuda { color: var(--muted); font-size: 13px; }
.reserva-publica-body .reserva-hora-slot { border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; }
.reserva-publica-body .reserva-hora-slot:hover { border-color: var(--blue); }
.reserva-publica-body .reserva-hora-slot.seleccionada { background: var(--blue); border-color: var(--blue); color: var(--white); }
.reserva-publica-body .reserva-hora-slot.ocupada { background: var(--soft); border-color: var(--line); }
.reserva-publica-body .reserva-hora-slot.ocupada .reserva-hora-texto { color: var(--muted); }
.reserva-publica-body .reserva-hora-icono { color: var(--blue); }
.reserva-publica-body .reserva-hora-resumen { color: var(--ink); }
.reserva-publica-body .reserva-hora-vacio { border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }

/* ---- Campos ---- */
.reserva-publica-body .reserva-field label { color: var(--ink); font-size: 14px; font-weight: 600; }
.reserva-publica-body .reserva-field .ui-inputfield, .reserva-publica-body .reserva-field .ui-selectonemenu, .reserva-publica-body .reserva-field .ui-calendar input {
  min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); box-shadow: none;
}
.reserva-publica-body .reserva-field .ui-inputfield:focus, .reserva-publica-body .reserva-field .ui-selectonemenu.ui-state-focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.reserva-publica-body .reserva-field .ui-state-error, .reserva-publica-body .reserva-field .ui-inputfield.ui-state-error { border-color: var(--danger); }
.reserva-publica-body .ui-message-error, .reserva-publica-body .ui-messages-error { color: var(--danger); }
.reserva-publica-body .reserva-privacy, .reserva-publica-body .reserva-preview-subtitle { color: var(--muted); font-size: 13px; }
.reserva-publica-body .reserva-preview-list dt { color: var(--muted); font-weight: 500; }
.reserva-publica-body .reserva-preview-list dd { color: var(--ink); font-weight: 600; }

/* ---- Botones: píldora, sin sombra ---- */
.reserva-publica-body .ui-button.reserva-submit, .reserva-publica-body .reserva-submit {
  min-height: 44px; border-radius: 999px !important; background: var(--blue) !important; border: 1px solid var(--blue) !important; color: var(--white) !important;
  font-size: 14px; font-weight: 600; box-shadow: none !important; transition: background .16s ease;
}
.reserva-publica-body .ui-button.reserva-submit:hover { background: var(--blue-dark) !important; border-color: var(--blue-dark) !important; }
.reserva-publica-body .reserva-preview-edit {
  min-height: 44px; border-radius: 999px !important; background: var(--white) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; font-weight: 600;
}
.reserva-publica-body .reserva-preview-edit:hover { background: var(--soft) !important; }
.reserva-publica-body .reserva-whatsapp-button, .reserva-publica-body .reserva-admin-button, .reserva-publica-body .reserva-no-disponible .ui-button {
  min-height: 44px; border-radius: 999px !important; background: var(--success) !important; color: var(--white) !important; font-weight: 600 !important; box-shadow: none !important;
}
.reserva-publica-body .reserva-whatsapp-button:hover, .reserva-publica-body .reserva-no-disponible .ui-button:hover { background: #128a3c !important; }
.reserva-publica-body .ui-button:active { transform: scale(.98); }

/* ---- Estados ---- */
.reserva-publica-body .reserva-publica-mark { border-radius: 999px; background: var(--blue); }
.reserva-publica-body .reserva-publica-mark.success { background: var(--success); }
.reserva-publica-body .reserva-numero { border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }
.reserva-publica-body .reserva-no-disponible h1, .reserva-publica-body .reserva-no-disponible-titulo { color: var(--danger); letter-spacing: -0.02em; }

/* ---- Pie ---- */
.rp-footer { flex: none; padding: 28px 24px 24px; background: var(--white); border-top: 1px solid var(--line); }
.rp-footer-inner { max-width: 860px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; color: var(--muted); font-size: 12.8px; }
.rp-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-dark); font-weight: 600; font-size: 14px; text-decoration: none; }
.rp-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rp-footer-acciones { max-width: 860px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rp-footer .rp-footer-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.rp-footer .rp-footer-boton:hover { border-color: var(--blue); background: var(--soft); text-decoration: none; }
.rp-footer .rp-footer-boton i { color: var(--blue); font-size: 16px; }
.rp-footer .rp-footer-whatsapp i { color: #25D366; }

/* ---- Móvil ---- */
@media (max-width: 640px) {
  .reserva-publica-body .reserva-publica-logo { height: 60px; max-width: 112px; padding: 6px 8px; border-radius: 12px; }
  .rp-footer-acciones { grid-template-columns: 1fr 1fr; }
  .reserva-publica-body .reserva-publica-top-right { padding: 8px 20px; }
  .reserva-publica-body .reserva-publica-brand-gif { width: 108px !important; }
  .reserva-publica-body .reserva-publica-shell { width: calc(100% - 40px); padding: 24px 0 32px; }
  .reserva-publica-body .reserva-publica-card { padding: 20px 16px; }
  .reserva-publica-body .reserva-paso-label { display: none; }
  .reserva-publica-body .reserva-paso.activo .reserva-paso-label { display: block; }
}
@media (prefers-reduced-motion: reduce) { .reserva-publica-body .reserva-publica-top-right { transition: none; } }
@media (max-width: 640px) {
  .reserva-publica-body .reserva-paso { flex: 0 0 auto; }
  .reserva-publica-body .reserva-paso.activo { flex: 1 1 auto; }
}

/* ---- Auditoría responsive: calendario y selector "Soy nuevo / Ya estoy registrado" ---- */
.reserva-publica-body .reserva-field .ui-calendar { align-items: stretch; gap: 8px; }
.reserva-publica-body .ui-datepicker-trigger.ui-button {
  flex: none; width: 44px; min-width: 44px; min-height: 44px; margin: 0; border-radius: 10px !important;
  background: var(--blue) !important; border: 1px solid var(--blue) !important; color: var(--white) !important; box-shadow: none !important;
}
.reserva-publica-body .ui-datepicker-trigger.ui-button:hover { background: var(--blue-dark) !important; border-color: var(--blue-dark) !important; }
.reserva-publica-body .ui-selectonebutton { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.reserva-publica-body .ui-selectonebutton .ui-button {
  flex: 1 1 auto; min-height: 44px; margin: 0; padding: 0 18px; border: 0 !important; border-radius: 0 !important;
  background: var(--white) !important; color: var(--ink) !important; box-shadow: none !important; font-size: 14px; font-weight: 600; transition: background .16s ease;
}
.reserva-publica-body .ui-selectonebutton .ui-button.ui-state-active { background: var(--blue) !important; color: var(--white) !important; }
.reserva-publica-body .ui-selectonebutton .ui-button { padding: 0 12px; line-height: 1.2; }
.ui-datepicker { width: min(322px, calc(100vw - 32px)) !important; font-family: var(--font-sans); }
.ui-datepicker table td { padding: 0; }
.ui-datepicker table td > a, .ui-datepicker table td > span { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.ui-datepicker .ui-datepicker-header a { min-width: 44px; min-height: 44px; }
.reserva-publica-body .ui-selectonebutton .ui-button, .reserva-publica-body .ui-selectonebutton .ui-button span { white-space: nowrap; }
.reserva-publica-body .ui-selectonebutton .ui-button .ui-button-text { padding: 0; }
@media (max-width: 340px) { .reserva-publica-body .ui-selectonebutton .ui-button { padding: 0 8px; font-size: 13px; } }