/* =============================================================================
   Portal de reservas · mejoras comunes llegadas de Gran Cacique (todos los hoteles)
   Colores de cada hotel: --hotel-primary / --hotel-primary-rgb / --hotel-accent-gold.
   Gran Cacique no carga esta hoja: tiene las mismas reglas con su estilo en su tema.
   1) Acompañante (reservas-guide.js)  2) Avisos flotantes arriba  3) Botón de avanzar en espera
   4) Paso 4 en orden                 5) Móvil en horizontal       6) Foco visible
   ============================================================================= */

/* ---------------------------------------------------------------- 1) acompañante */
/* Escritorio: fila sobre Atrás / Siguiente. A la izquierda «N habitaciones más ⌄» (si hay algo debajo),
   a la derecha qué falta o qué está listo. Móvil: franja fija sobre la barra inferior. */
html body .gc-guide,
html body .gc-guide-m {
    display: flex; align-items: center; gap: 14px; min-width: 0;
    font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #4f5a56;
}
html body .gc-guide.is-empty { display: none !important; }
html body .wizard-card .wizard-footer:has(.gc-guide:not(.is-empty)) { flex-wrap: wrap !important; row-gap: 12px !important; }
html body .wizard-footer .gc-guide {
    order: -1; flex: 1 1 100% !important; max-width: none !important; margin: 0 !important;
    padding-bottom: 12px; border-bottom: 1px solid rgba(var(--hotel-primary-rgb, 13, 50, 38), .1);
}
html body .gc-msg { margin-left: auto; display: flex; align-items: baseline; gap: 9px; min-width: 0; text-align: right; }
html body .gc-guide__text { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Estado: raya = falta algo; visto = listo. */
html body .gc-guide__dot { flex: 0 0 auto; width: 12px; height: 2px; border: 0; border-radius: 2px; align-self: center; background: var(--hotel-accent-gold, #b08d57); }
html body .is-ok .gc-guide__dot {
    width: 5px; height: 10px; background: transparent; margin: 0 3px 0 2px; border-radius: 0;
    border-right: 2px solid var(--hotel-primary, #0d3226); border-bottom: 2px solid var(--hotel-primary, #0d3226);
    transform: translateY(-2px) rotate(45deg);
}
html body .is-ok .gc-guide__text { color: #1f2623; }
html body .gc-cue {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; margin: 0 !important;
    padding: 4px 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; cursor: pointer; white-space: nowrap;
    font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    color: var(--hotel-primary, #0d3226) !important;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
html body .gc-cue[hidden] { display: none !important; }
html body .gc-cue:hover { opacity: .8; }
html body .gc-cue__chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
html body .gc-guide-m {
    position: fixed; left: 0; right: 0; z-index: 998; margin: 0 !important; gap: 10px;
    padding: 8px 16px !important; background: #ffffff; border-top: 1px solid rgba(var(--hotel-primary-rgb, 13, 50, 38), .1);
    font-size: 13px; line-height: 1.35;
    opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
html body .gc-guide-m.is-on { opacity: 1; transform: none; pointer-events: auto; }
html body .gc-guide-m .gc-msg { order: 0; margin-left: 0; margin-right: auto; text-align: left; flex: 1 1 auto; }
html body .gc-guide-m .gc-cue { order: 1; padding: 6px 0 6px 10px !important; border-left: 1px solid rgba(var(--hotel-primary-rgb, 13, 50, 38), .12) !important; text-decoration: none; font-size: 12px; }
@media (min-width: 900px) { html body .gc-guide-m { display: none !important; } }
@media (max-width: 899px) { html body .wizard-footer .gc-guide { display: none !important; } }
html body .gc-fade {
    position: fixed; z-index: 997; height: 56px; pointer-events: none; opacity: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9)); transition: opacity .35s ease;
}
html body .gc-fade.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    @keyframes uxNudge { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(1px) rotate(45deg); } }
    html body .gc-cue:not([hidden]) .gc-cue__chev { animation: uxNudge 1.6s ease-in-out 2; }
    @keyframes uxSwap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
    html body .gc-guide.is-swap .gc-guide__text, html body .gc-guide-m.is-swap .gc-guide__text { animation: uxSwap .35s ease both; }
}
/* El acompañante ya dice cuántas habitaciones quedan: el aviso «N tipos… desliza» sobra. */
html body .pz-more-rooms { display: none !important; }

/* ---------------------------------------------------------------- 2) avisos flotantes arriba */
/* Abajo tapaban el botón de confirmar, la franja del acompañante y la barra. --gc-top-ui lo calcula reservas-guide.js. */
html body .pz-toast { top: calc(var(--gc-top-ui, 96px) + 12px) !important; bottom: auto !important; z-index: 1001 !important; left: 50% !important; transform: translate(-50%, -8px) !important; width: max-content !important; max-width: min(560px, calc(100vw - 32px)) !important; }
html body .pz-toast.is-on { transform: translate(-50%, 0) !important; }
@media (max-width: 899px) {
    html body .pz-toast { left: 16px !important; right: 16px !important; width: auto !important; max-width: none !important; transform: translateY(-8px) !important; }
    html body .pz-toast.is-on { transform: none !important; }
}

/* ---------------------------------------------------------------- 3) botón de avanzar en espera */
/* Deshabilitado se ve como un botón que espera (no un hueco); el acompañante dice qué falta. */
html:not(#_) body:not(#_) .btn-primary:disabled,
html:not(#_) body:not(#_) .mobile-primary-action:disabled {
    background: rgba(var(--hotel-primary-rgb, 13, 50, 38), .07) !important; background-image: none !important;
    border-color: rgba(var(--hotel-primary-rgb, 13, 50, 38), .16) !important; color: #6b7672 !important;
    box-shadow: none !important; opacity: 1 !important; cursor: not-allowed;
}
html:not(#_) body:not(#_) .btn-primary:disabled *, html:not(#_) body:not(#_) .mobile-primary-action:disabled * { color: #6b7672 !important; }

/* ---------------------------------------------------------------- 4) paso 4 en orden */
/* Primero para quién y la nacionalidad; los datos aparecen cuando se pueden usar (los que el portal
   mantiene bloqueados —sin nacionalidad o esperando la cédula— no se muestran). */
html body #panel-basic-details > .input-group:has(> .input-field:disabled),
html body #panel-basic-details > .input-group:has(> .phone-input-group .input-field:disabled),
html body #panel-basic-details > .input-group:has(> .phone-input-row .input-field:disabled),
html body #panel-basic-details > .input-group:has(select.input-field:disabled):not(#booking-config-wrapper),
html body #panel-basic-details > .input-group:has(.input-field:disabled):not(#booking-config-wrapper):not(:has(.input-field:not(:disabled))) { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
    @keyframes uxRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    html body #panel-basic-details > .input-group { animation: uxRise .4s ease both; }
}

/* ---------------------------------------------------------------- 5) móvil en horizontal / pantallas bajas */
/* La altura es lo escaso: cabecera y pasos compactos, barra inferior a todo el ancho; la franja del
   acompañante se retira (el botón de la barra ya dice qué falta). */
@media (max-height: 500px) and (orientation: landscape) {
    html body .hotel-header { min-height: 44px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
    html body .hotel-header .header-logo-img, html body .hotel-header img { max-height: 26px !important; width: auto !important; }
    html body .step-tracker { padding-top: 4px !important; padding-bottom: 4px !important; min-height: 0 !important; margin-top: 4px !important; margin-bottom: 6px !important; }
    html body .tracker-mobile-status { padding-top: 2px !important; padding-bottom: 4px !important; }
    html body .wizard-header { padding-top: 12px !important; }
    html body .gc-guide-m { display: none !important; }
    html body .gc-fade { height: 40px !important; }
    html body #mobile-summary-toggle.mobile-summary-toggle { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; }
}

/* ---------------------------------------------------------------- 6) foco visible (teclado) */
html body a:focus-visible, html body button:focus-visible, html body [tabindex]:focus-visible,
html body .cal-day:focus-visible, html body .room-card:focus-visible, html body .intent-card:focus-visible,
html body .payment-option-card:focus-visible, html body select:focus-visible {
    outline: 2px solid var(--hotel-primary, #0d3226) !important; outline-offset: 2px !important;
}

/* ---------------------------------------------------------------- aviso «No tenemos disponibilidad confirmada» (Alcalá) */
/* Salía abajo (sobre la barra de continuar) con la máxima prioridad y, al desvanecerse, seguía ahí invisible
   bloqueando los toques. Ahora va arriba como los demás avisos y, oculto, no intercepta nada. */
html body #no-avail-hint {
    top: calc(var(--gc-top-ui, 96px) + 12px) !important; bottom: auto !important;
    left: 50% !important; transform: translateX(-50%) !important; width: min(520px, calc(100vw - 32px)) !important; max-width: none !important;
    z-index: 1001 !important; border-radius: var(--ux-radius, 12px) !important; font-size: 13.5px !important; line-height: 1.4 !important;
    padding: 12px 14px !important; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45) !important;
}
html body #no-avail-hint[style*="opacity: 0"] { pointer-events: none !important; visibility: hidden; }
html body #no-avail-hint { padding-right: 40px !important; }
html body #no-avail-hint .acc-perk__close { color: #ffffff; }
html body #no-avail-hint .acc-perk__close:hover { background: rgba(255, 255, 255, .18); }


/* ---------------------------------------------------------------- 7) el final del paso se alcanza
   El portal desplaza por dentro (.booking-portal), y abajo hay dos cosas fijas: la barra inferior y,
   encima, la franja del acompañante. El hueco reservado solo contaba la barra, así que en pantallas
   cortas (iPhone SE y parecidos) el último bloque del paso 5 —«Resumen de tu solicitud»— quedaba
   debajo de la franja y no había forma de bajar hasta él: el contenedor ya estaba en su tope.
   reservas-guide.js mide las dos y lo deja en --gc-bottom-ui. */
@media (max-width: 899px) {
    html body .booking-portal {
        padding-bottom: calc(var(--gc-bottom-ui, 78px) + 28px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(var(--gc-bottom-ui, 78px) + 28px) !important;
    }
}

/* ---------------------------------------------------------------- 8) «a todo lo ancho» de verdad
   Los bloques del paso 4 marcados .full-width deben ocupar la fila entera. La regla que lo hacía
   solo existía por debajo de 430 px y solo para la rejilla .form-grid, así que entre 431 y 899 px
   —y en cualquier rejilla sin esa clase, como #panel-basic-details— caían a media columna: la
   caja de «quién reserva y paga» salía estrecha, con el título partido en tres líneas y el
   desplegable cortando «Company / Corpo…».
   En una rejilla de una sola columna «1 / -1» es exactamente lo mismo que «1», así que esta regla
   no estropea el móvil estrecho ni el escritorio: solo arregla la franja de en medio. */
/* La regla a la que hay que ganarle es «.form-grid .input-group.full-width { span 1 !important }»
   de reservas.css: pesa tres clases, así que aquí hacen falta tres y algo más para pasarla. */
html body .form-grid .input-group.full-width,
html body #panel-basic-details > .input-group.full-width,
html body .input-group.full-width { grid-column: 1 / -1 !important; }