/* ═══════════════════════════════════════════════════════════════════════════
   home-reserva.css — Transotel.Web
   Ubicacion: wwwroot/css/home-reserva.css
   LOTE F14 · accesos claros al canal web B2C desde la portada

   Contiene SOLO lo nuevo del lote F14. No redefine nada de site.css ni de
   home.css.

   NOTA DE CASCADA: home.css lo inyecta home.js con createElement('link'), asi
   que se aplica DESPUES de este fichero. Por eso las reglas que conviven con
   clases de home.css (.hero-tracking-form) llevan un selector mas especifico
   en vez de !important.

   Colores de marca: #008572 fondos · #dfbb3e botones
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. SEGUIMIENTO PLEGADO EN EL HERO
   El color se hereda del hero (color: inherit) para que funcione tanto si el
   fondo del hero es oscuro como si algun dia cambia a claro.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-tracking-details {
    margin-top: 1.25rem;
}

.hero-tracking-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    opacity: 0.92;
    list-style: none;
}

.hero-tracking-summary::-webkit-details-marker {
    display: none;
}

.hero-tracking-summary::marker {
    content: "";
}

.hero-tracking-summary:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-tracking-summary:focus-visible {
    outline: 2px solid #dfbb3e;
    outline-offset: 3px;
    border-radius: 4px;
}

.hero-tracking-chevron {
    font-size: 0.7rem;
    transition: transform 0.18s ease;
}

.hero-tracking-details[open] .hero-tracking-chevron {
    transform: rotate(180deg);
}

.hero-tracking-details[open] .hero-tracking-form {
    margin-top: 0.85rem;
}


/* ───────────────────────────────────────────────────────────────────────────
   2. BANDA DE RESERVA
   ─────────────────────────────────────────────────────────────────────────── */
.banda-reserva {
    background: #008572;
    padding: 2.5rem 0;
    color: #ffffff;
}

.banda-reserva-head {
    margin-bottom: 1.75rem;
}

.banda-reserva-titulo {
    margin: 0 0 0.4rem;
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    line-height: 1.25;
    color: #ffffff;
}

.banda-reserva-titulo i {
    margin-right: 0.6rem;
    color: #dfbb3e;
}

.banda-reserva-sub {
    margin: 0;
    font-size: 1rem;
    color: #cfe9e4;
}

.banda-reserva-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    counter-reset: bandaPaso;
}

.banda-reserva-paso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.7rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    counter-increment: bandaPaso;
}

.banda-reserva-paso > i {
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 0.15rem;
    font-size: 1.1rem;
    color: #dfbb3e;
}

.banda-reserva-paso-t {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
}

.banda-reserva-paso-t::before {
    content: counter(bandaPaso) " · ";
    color: #dfbb3e;
}

.banda-reserva-paso-d {
    font-size: 0.85rem;
    color: #cfe9e4;
}

.banda-reserva-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.banda-reserva-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    background: #dfbb3e;
    color: #3f2d00;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid #dfbb3e;
    border-radius: 8px;
    transition: background 0.18s ease, transform 0.18s ease;
}

.banda-reserva-btn:hover,
.banda-reserva-btn:focus {
    background: #f0cf5c;
    border-color: #f0cf5c;
    color: #3f2d00;
    text-decoration: none;
}

.banda-reserva-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.banda-reserva-btn:active {
    transform: translateY(1px);
}

.banda-reserva-desde {
    margin: 0;
    font-size: 0.9rem;
    color: #cfe9e4;
}

.banda-reserva-desde strong {
    margin: 0 0.25rem;
    font-size: 1.15rem;
    color: #ffffff;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. BARRA FIJA DE RESERVA · SOLO MOVIL
   z-index 900: por debajo del banner de cookies, que debe poder taparla
   mientras no se haya aceptado.
   ─────────────────────────────────────────────────────────────────────────── */
.barra-reserva-movil {
    display: none;
}

@media (max-width: 767px) {

    .barra-reserva-movil {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.6rem 0.85rem;
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: #008572;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    }

    .barra-reserva-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

    .barra-reserva-t {
        font-size: 0.82rem;
        font-weight: 600;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .barra-reserva-p {
        font-size: 0.75rem;
        color: #cfe9e4;
    }

    .barra-reserva-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        flex: 0 0 auto;
        padding: 0.65rem 1.15rem;
        background: #dfbb3e;
        color: #3f2d00;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 8px;
        white-space: nowrap;
    }

    .barra-reserva-btn:hover,
    .barra-reserva-btn:focus {
        background: #f0cf5c;
        color: #3f2d00;
        text-decoration: none;
    }

    .barra-reserva-btn:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 2px;
    }

    /* Hueco al final del body para que la barra no tape el pie de pagina.
       Solo afecta a la portada, porque este CSS solo lo carga Index.cshtml. */
    body.transotel-body {
        padding-bottom: 74px;
    }

    .banda-reserva {
        padding: 2rem 0;
    }

    .banda-reserva-btn {
        width: 100%;
        justify-content: center;
    }

    .banda-reserva-acciones {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}


/* ───────────────────────────────────────────────────────────────────────────
   4. IMPRESION Y MOVIMIENTO REDUCIDO
   ─────────────────────────────────────────────────────────────────────────── */
@media print {

    .barra-reserva-movil {
        display: none !important;
    }

    body.transotel-body {
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-tracking-chevron,
    .banda-reserva-btn {
        transition: none;
    }

    .banda-reserva-btn:active {
        transform: none;
    }
}