/* =============================================================================
   Portal de reservas — capa móvil compartida.
   Sucede a reservas-mobile-standard.css y habla el mismo idioma que
   mobile-experience.css: áreas seguras, objetivos de 44 px, campos a 16 px,
   flotantes por encima de la barra de acción y foco visible.

   No toca la lógica del asistente: sólo su presentación en móvil.
   ============================================================================= */

:root {
  /* Alto real de la barra inferior de acción, área segura incluida. */
  --booking-bar-height: 64px;
  --booking-bar-space: calc(var(--booking-bar-height) + env(safe-area-inset-bottom, 0px));
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  min-width: 320px;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body { min-width: 320px; overflow-x: hidden; }


img, video, canvas, svg { max-width: 100%; }

@media (max-width: 899px) {

  /* ------------------------------------------------------- Interacción --- */
  button, .btn, [role="button"], input, select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS amplía la página al enfocar campos de menos de 16 px. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  .mobile-back-action,
  .mobile-primary-action,
  .mobile-view-details-btn { min-height: 44px; }

  .calendar-nav-btn,
  .counter-btn { min-height: 44px; min-width: 44px; }

  /* El logotipo de la cabecera también debe ser un objetivo cómodo. */
  .header-brand,
  .back-to-home { min-height: 44px; display: inline-flex; align-items: center; }

  /* ------------------------------------------------------ Áreas seguras --- */
  .hotel-header {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .booking-portal {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    /* Deja sitio a la barra de acción fija más un respiro. */
    padding-bottom: calc(var(--booking-bar-space) + 18px);
  }

  .mobile-summary-toggle {
    height: auto;
    padding-bottom: calc(6.72px + env(safe-area-inset-bottom, 0px));
    padding-left: max(8.8px, env(safe-area-inset-left));
    padding-right: max(8.8px, env(safe-area-inset-right));
  }

  /* ------------------------------------------------------ Desplazamiento --- */
  /* El portal esta construido como una aplicacion de altura fija: html y body a
     100dvh con overflow:hidden, y cada paso tiene que caber en la pantalla. La
     hoja responsive lo remacha con !important y ademas fija la lista de
     habitaciones en cuatro filas.

     En un escritorio cabe. En un telefono no: el paso del tipo de habitacion
     mide mas que la ventana, y como todos los contenedores estaban recortados
     la ultima habitacion quedaba fuera de alcance sin ninguna forma de bajar.
     La reserva se moria ahi.

     Se conserva el armazon —la barra de accion inferior depende de el— y se le
     devuelve el desplazamiento a la columna de contenido: cabecera y barra
     quedan fijas, y entre ellas se desplaza lo que haga falta. Los selectores
     llevan la misma especificidad que los de la hoja responsive; con menos, no
     la ganaban. */
  .booking-portal {
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .booking-portal .wizard-column,
  .booking-portal .wizard-card,
  .booking-portal .wizard-card.active {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  #wizard-step-1 .wizard-body,
  #wizard-step-2 .wizard-body,
  #wizard-step-3 .wizard-body,
  #wizard-step-4 .wizard-body,
  #wizard-step-5 .wizard-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Cuatro filas fijas dejaban fuera la quinta habitacion. */
  #wizard-step-3 .rooms-grid {
    grid-template-rows: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  /* --------------------------------------------------- Paso siempre visible --- */
  /* El indicador de paso deja de perderse al desplazar: es la única señal de
     progreso del asistente. */
  .step-tracker {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* ------------------------------------------------------ Tarjeta del paso --- */
  /* Antes se estiraba hasta el borde inferior y dejaba un vacío blanco enorme
     en los pasos con poco contenido. Ahora se ajusta a lo que muestra. */
  .wizard-column { flex: 0 1 auto; }
  .wizard-card.active {
    height: auto;
    min-height: 0;
    flex: 0 1 auto;
  }

  /* --------------------------------------------------------- Flotantes --- */
  /* WhatsApp estaba anclado arriba a la derecha y tapaba el nombre del paso.
     En el asistente sobra: el huésped ya está reservando y el chat en vivo
     cubre cualquier duda sin competir por la misma esquina. */
  /* Mismo criterio que en el resto del sitio: el único flotante es el chat. */
  /* reservas.css reactiva el flotante con `body.wa-chat-started .whatsapp-float`
     en cuanto el huesped ha usado el chat alguna vez: misma prioridad y mas
     especificidad, asi que volvia a aparecer y se juntaban dos widgets verdes
     distintos en la misma pantalla. Se iguala la especificidad. */
  .whatsapp-float,
  body .whatsapp-float,
  body.wa-chat-started .whatsapp-float { display: none !important; }

  /* Lanzador del chat en vivo, etiquetado por reservas-mobile.js. */
  .mx-chat-launcher {
    bottom: calc(var(--booking-bar-space) + 12px) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 60 !important;
  }

  /* Con el teclado abierto los flotantes estorban al escribir. */
  body.mx-keyboard-open .whatsapp-float,
  body.mx-keyboard-open .mx-chat-launcher { display: none !important; }

  /* --------------------------------------------------------- Diálogos --- */
  .success-overlay-card,
  .tp-modal-card,
  .vip-wa-modal,
  .extras-overlay-panel {
    max-width: min(100%, 520px);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* ------------------------------------------- Interruptor de sonido --- */
  /* El portal no carga la hoja del sitio, asi que el interruptor necesita aqui
     sus propias reglas o sale como una caja con borde y texto desbordado.
     Aqui es solo el icono: en la cabecera no hay sitio para la etiqueta. */
  .mx-sonido {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto; margin-left: auto;
    padding: 0; border: 0; border-radius: 999px;
    background: none; color: var(--hotel-primary, currentColor); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .13s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
  }
  .mx-sonido .mx-sonido__txt { display: none; }
  .mx-sonido .mx-sonido__ico { width: 22px; height: 22px; }
  .mx-sonido[aria-pressed="true"] .mx-sonido__tacha { display: none; }
  .mx-sonido[aria-pressed="false"] .mx-sonido__onda { display: none; }
  .mx-sonido[aria-pressed="false"] { opacity: .55; }
  .mx-sonido.mx-pulsado { transform: scale(.88); }

  /* -------------------------------------------------------- Movimiento --- */
  /* Solo transform y opacity: son las dos propiedades que el navegador anima en
     el compositor, sin recalcular maqueta. En un telefono modesto es la
     diferencia entre fluido y a tirones. Todo se apaga mas abajo con
     prefers-reduced-motion. */

  /* Elegir una fecha es la primera decision real del huesped: el dia elegido
     confirma el toque con un latido corto. */
  .cal-day { transition: transform .14s cubic-bezier(.2,.7,.3,1), background-color .16s ease; }
  .cal-day.selected-start,
  .cal-day.selected-end { animation: mx-dia .26s cubic-bezier(.34,1.4,.5,1) both; }
  @keyframes mx-dia {
    from { transform: scale(.72); }
    60%  { transform: scale(1.08); }
    to   { transform: scale(1); }
  }
  .cal-day:not(.disabled):not(.empty):active { transform: scale(.9); }

  /* Botones del asistente: el mismo hundido que en el resto del sitio. */
  .mobile-primary-action,
  .mobile-back-action,
  .counter-btn,
  .calendar-nav-btn,
  .room-card,
  .payment-option-card {
    transition: transform .13s cubic-bezier(.2,.7,.3,1);
  }
  .mx-pulsado { transform: scale(.972); }
  .counter-btn.mx-pulsado,
  .calendar-nav-btn.mx-pulsado { transform: scale(.88); }
  .room-card.mx-pulsado { transform: scale(.988); }

  /* Cambio de paso: el contenido entra desde la derecha, como una pila de
     tarjetas. Es el unico sitio donde el movimiento explica algo —que hubo un
     avance— en lugar de decorar. */
  .wizard-card.active { animation: mx-paso .3s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes mx-paso {
    from { opacity: 0; transform: translate3d(16px, 0, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* Confirmacion: el momento que merece celebrarse. */
  .success-overlay-card { animation: mx-exito .42s cubic-bezier(.2,.9,.3,1.05) both; }
  @keyframes mx-exito {
    from { opacity: 0; transform: scale(.9) translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* ----------------------------------------------------- Accesibilidad --- */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  .cal-day:focus-visible,
  [role="button"]:focus-visible {
    outline: 3px solid var(--hotel-primary, #0A3BB0);
    outline-offset: 2px;
    border-radius: 6px;
  }
  :focus:not(:focus-visible) { outline: none; }
}

@media (max-width: 430px) {
  .mobile-summary-toggle {
    grid-template-columns: auto minmax(48px, 1fr) auto minmax(104px, auto) !important;
  }

  .mobile-summary-label { font-size: 0 !important; line-height: 1; }
  .mobile-summary-label::before {
    content: "TOTAL";
    font-size: 0.55rem;
    letter-spacing: 0.06em;
  }

  .mobile-primary-action { min-width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .mobile-summary-toggle, .whatsapp-float, .mx-chat-launcher { display: none !important; }
}