/* =============================================================================
   Hyrapp · reserva de la demo
   Las páginas que ve el lead: datos mínimos, elegir día y hora, demo reservada
   y cambiarla o cancelarla. Del prototipo aprobado (UX-Hyrapp/10-Prototipo-
   comercial, pantallas F02 a F09 y W05 a W07; su hoja, fuente/proto-publico.css).

   Desde el 13 de octubre de 2026 van sobre el armazón de la web comercial
   (layouts/web.blade.php: cabecera, pie y hojas de Lanzamiento-Hyrapp), como en
   el prototipo: la portada (web-hero-simple), la sección, los botones, las
   casillas y los iconos son los de la web; aquí solo está lo propio de la
   reserva y el aspecto de los componentes de Laravel (x-form.*, x-alert) con
   los colores y las medidas de la web. Ya no usa app.css ni web.css.
   ============================================================================= */

.web-reserva .web-hero-simple h1 { max-width: 760px; }
/* En el escritorio el titular no se mete debajo de la franja de marca (la misma cuenta que en la web: web.css). */
@media (min-width: 951px) { .web-reserva .web-hero-simple h1 { max-width: min(760px, calc(100vw - 404px)); } }
.web-reserva main > .section { padding-block: 44px 88px; }
.web-reserva .alert { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid #ecd27a; border-radius: 14px; background: #fff8dc; font-size: 14px; line-height: 1.5; color: var(--ink); }
.web-reserva .alert svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.web-reserva main a:not(.btn) { color: #5840c9; }

/* Dos columnas: qué verás en la demo y el formulario (demo-layout, demo-ve y web-form son de la web). */
.demo-layout h2 { font-size: 26px; line-height: 1.2; }
.demo-nota { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.reserva-form { min-width: 0; }
.reserva-form form { display: grid; gap: 16px; }
.reserva-form .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.demo-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Los campos de x-form.input, con el aspecto de los de la web (.campo). */
.web-reserva .form__row { display: grid; gap: 7px; min-width: 0; }
.web-reserva .form__label { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.web-reserva .input { width: 100%; font: inherit; font-size: 15px; line-height: 1.4; padding: 12px 14px; border: 1px solid #c9c8d2; border-radius: 12px; background: #fff; color: var(--ink); }
.web-reserva .input:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }
.web-reserva .form__help { font-size: 13px; line-height: 1.4; color: var(--muted); }
.web-reserva .form__err { font-size: 13px; line-height: 1.4; color: #b3261e; }
.web-reserva .form__row--has-error .input { border-color: #b3261e; }

/* Botones: los de la web (.btn, .btn-primary), más el claro del prototipo para la acción secundaria. En la web, el
   botón de un formulario ocupa todo el ancho; aquí va con su texto, junto a su enlace. */
.web-reserva main .btn { cursor: pointer; font-family: inherit; width: auto; margin-top: 0; }
.btn.btn-claro { background: #fff; border-color: #737985; }
.form-acciones, .btn-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn-fila form { margin: 0; }
.form-acciones a.txt { font-size: 14px; font-weight: 600; }

/* Pasos del formulario. */
.pasos-form { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.pasos-form b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--lavender); color: var(--violet); font-weight: 700; }
.pasos-form b.on { background: var(--violet); color: #fff; }
.pasos-form i { flex: 0 0 24px; height: 2px; background: var(--line); }

/* Elegir día y hora. */
.reserva { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 18px 50px rgb(32 36 43 / 8%); }
.reserva__info { padding: 32px; background: var(--soft); display: flex; flex-direction: column; gap: 16px; }
.reserva__info h2 { font-size: 26px; line-height: 1.15; }
.reserva__info p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.reserva__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reserva__datos li { display: flex; gap: 12px; align-items: center; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.reserva__datos .icon-box { flex: none; margin: 0; width: 40px; height: 40px; background: var(--lavender); }
.reserva__datos .icon { width: 22px; height: 22px; }
.reserva__elige { padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: start; }
.reserva__elige h3 { margin: 0 0 14px; font-size: 17px; line-height: 1.3; }
.reserva__vacio { grid-column: 1 / -1; font-size: 15px; line-height: 1.55; color: var(--muted); }

.mes { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.mes caption { text-align: left; padding: 0 4px 10px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); text-transform: capitalize; }
.mes th { font-size: 12px; font-weight: 600; line-height: 1; color: var(--muted); padding: 6px 0; text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.mes td { text-align: center; padding: 0; }
.mes td > * { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; }
.mes td > span { color: #b9bcc6; }
.web-reserva .mes td > a { background: var(--lavender); color: #3b24b8; }
.mes td > a:hover, .mes td > a.is-today { box-shadow: inset 0 0 0 2px var(--violet); }
.web-reserva .mes td > a[aria-current="date"] { background: var(--violet); color: #fff; }
.mes__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.mes__nav span { color: #b9bcc6; }

.horas { display: grid; gap: 8px; }
.web-reserva .horas a { display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--violet); border-radius: 12px; background: #fff; color: var(--violet); font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; }
.web-reserva .horas a:hover { background: var(--soft); }
.web-reserva .horas a[aria-current="true"] { background: var(--violet); color: #fff; }
.horas small, .reserva__zona { font-size: 13px; line-height: 1.4; color: var(--muted); }

.reserva__pie { grid-column: 1 / -1; padding: 24px 32px; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.reserva__pie > p { font-size: 15px; color: var(--muted); }
.reserva__confirma { display: grid; gap: 16px; }
.reserva__confirma .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.reserva__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.reserva__acciones strong { flex: 1 1 260px; font: 600 15px/1.4 Inter, sans-serif; color: var(--ink); }

/* Preguntas con respuestas en píldora. */
.pregunta { border: 0; margin: 0; padding: 0; min-width: 0; }
.pregunta legend { padding: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.pregunta legend small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.opciones label { cursor: pointer; position: relative; }
.opciones span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid #c9c8d2; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.opciones input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opciones input:checked + span { border-color: var(--violet); background: var(--lavender); color: #3b24b8; font-weight: 700; }
.opciones input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }

/* Demo reservada. */
.hecho-caja { max-width: 760px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgb(32 36 43 / 8%); display: grid; gap: 18px; }
.hecho-caja h2 { font-size: 26px; line-height: 1.2; }
.hecho-caja p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.hecho-caja form { display: grid; gap: 16px; }
.cita { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: #fff; }
.cita__dia { flex: none; width: 64px; text-align: center; padding: 8px 0; border-radius: 12px; background: var(--lime); color: var(--ink); }
.cita__dia small { display: block; font-size: 11px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.cita__dia b { display: block; font: 700 26px/1.1 Sora, sans-serif; }
.cita strong { display: block; font: 700 17px/1.3 Sora, sans-serif; }
.cita span { display: block; font-size: 14px; line-height: 1.4; opacity: .85; }
.web-reserva .cita a { color: var(--lime); }

/* En el móvil y en cualquier pantalla táctil, 16 px en los campos: con menos, Safari de iPhone amplía la página al
   tocar un campo y hay que alejarla a mano. */
@media (max-width: 820px), (pointer: coarse) {
    .web-reserva .input { font-size: 16px; }
    /* Y 44 px de alto en los enlaces sueltos, sin moverlos: «Volver a la web» comparte fila con el botón y el de la
       política va solo en su línea. */
    .form-acciones a.txt { display: inline-flex; align-items: center; min-height: 44px; }
    .privacidad-capa dd a { padding-block: 14px; }
}

@media (max-width: 950px) {
    .web-reserva main > .section { padding-block: 32px 64px; }
    /* El formulario, antes que la lista de lo que se verá. */
    .demo-layout > :first-child { order: 2; }
    .reserva { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
    .reserva__info, .reserva__elige { padding: 22px 18px; }
    .reserva__elige { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .reserva__pie { padding: 18px; }
    .horas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .horas small { grid-column: 1 / -1; }
    .hecho-caja { padding: 22px 18px; }
}

@media (max-width: 560px) {
    .reserva-form .form__grid, .reserva__confirma .form__grid { grid-template-columns: minmax(0, 1fr); }
    .reserva__acciones .btn, .form-acciones .btn { flex: 1 1 100%; }
    .btn-fila .btn, .btn-fila form { flex: 1 1 100%; }
    .btn-fila form .btn { width: 100%; }
    .cita { align-items: flex-start; }
}

/* Propuesta en línea (14 de octubre de 2026): las condiciones y el mensaje respetan sus saltos de línea; «No me interesa», separado de aceptar. */
.web-reserva .pre-line { white-space: pre-line; }
.web-reserva .propuesta-no { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line, #e7e8ee); }
.web-reserva .alert--ok { border-color: #b6dfc3; background: #ecf8f0; }

/* Propuesta aceptada o sin vigencia: una columna centrada y las cajas separadas (revisión UX 11, G53). */
.demo-layout--single { display: block; max-width: 760px; margin: 0 auto; }
.demo-layout--single .hecho-caja, .demo-layout .hecho-caja + .hecho-caja, .demo-layout h2 + .demo-ve + .hecho-caja { margin-top: 24px; }
.demo-layout .hecho-caja + h2 { margin-top: 32px; }