/* ===============================
        CONTENIDO PRINCIPAL
================================ */

.principal-reservar {
    min-height: calc(100vh - 5rem);
}

/* ===============================
        ENCABEZADO
================================ */

.encabezado-reservar {
    padding: 8rem 0 3rem;
}

.encabezado-reservar-contenido {
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
}

.encabezado-reservar-titulo {
    color: var(--rosa-principal);
    font-size: var(--titulo-seccion);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.encabezado-reservar-texto {
    max-width: 42rem;
    margin: 0 auto 1.5rem;
    font-size: var(--texto-seccion);
    line-height: 1.6;
}

.linea-reservar {
    width: 20rem;
    max-width: 100%;
    height: 0.15rem;
    margin: 0 auto;
    background-color: var(--rosa-principal);
}

/* ===============================
        BUSCADOR
================================ */

/* CONTENEDOR GENERAL */

.seccion-buscador {

    padding-bottom: 14rem;

    transition: var(--transicion-suave);

}

.seccion-buscador.panel-abierto {

    padding-bottom: 38rem;

}


/* CONTENEDOR DEL BUSCADOR */

.buscador-reservas {

    position: relative;

    overflow: visible;

    background-color: var(--blanco);

    border-radius: var(--radio-tarjeta);

    box-shadow: var(--sombra-suave);

}


/* ===============================
        ENCABEZADO DEL BUSCADOR
================================ */

/* CONTENEDOR */

.buscador-encabezado {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    padding: 0.7rem 1.5rem;

    background-color: var(--rosa-principal);

    border-radius:
        var(--radio-tarjeta)
        var(--radio-tarjeta)
        0
        0;

}


/* ELEMENTOS */

.encabezado-item {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 1.2rem;

    box-sizing: border-box;

    color: var(--blanco);

    font-size: 0.95rem;

    font-weight: var(--peso-medio);

    text-align: center;

}


/* PROPORCIONES */

.encabezado-fechas {

    flex: 2;

}

.encabezado-habitaciones,
.encabezado-codigo {

    flex: 1;

}

.encabezado-vacio {

    width: 8.5rem;

    flex-shrink: 0;

}


/* ===============================
        CONTENIDO DEL BUSCADOR
================================ */

.buscador-contenido {

    display: flex;

    align-items: flex-start;

    gap: 0.8rem;

    padding: 1.5rem;

    background-color: var(--blanco);

    border-radius:
        0
        0
        var(--radio-tarjeta)
        var(--radio-tarjeta);

}


/* ===============================
        CONTENEDORES DE FILTROS
================================ */

.contenedor-filtro {

    position: relative;

}

.contenedor-filtro-fechas {

    flex: 2;

}

.contenedor-filtro-habitaciones,
.contenedor-filtro-codigo {

    flex: 1;

}


/* ===============================
        CAMPOS DEL BUSCADOR
================================ */

.campo-buscador {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    width: 100%;

    height: 4.2rem;

    padding: 0 1.2rem;

    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);

    border-radius: var(--radio-boton);

    transition: var(--transicion-suave);

}

.campo-buscador:hover {

    background-color: rgba(199, 53, 94, 0.15);

}


/* ICONO */

.icono-campo {

    width: 1.7rem;

    height: 1.7rem;

    flex-shrink: 0;

}


/* TEXTO */

.texto-campo {

    color: var(--rosa-principal);

    font-size: 1rem;

    font-weight: var(--peso-medio);

}


/* BOTÓN BUSCAR */

.boton-busqueda {

    width: 8.5rem;

    height: 3.5rem;

    flex-shrink: 0;

    background-color: var(--rosa-principal);

    color: var(--blanco);

    border-radius: var(--radio-boton);

    font-size: 1rem;

    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);

}

.boton-busqueda:hover {

    filter: brightness(0.9);

}


/* ===============================
        ANIMACIÓN DE PANELES
================================ */

@keyframes aparecer-panel {

    from {

        opacity: 0;

        transform: translateY(-0.5rem);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ===============================
        PANEL CALENDARIO
================================ */

/* PANEL */

.panel-calendario {

    position: absolute;

    top: calc(100% + 1rem);
    left: 0;

    display: none;

    width: 22rem;

    overflow: hidden;

    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-tarjeta);

    box-shadow: var(--sombra-suave);

    z-index: 100;

    animation: aparecer-panel .25s ease;

}

.panel-calendario.activo {

    display: block;

}


/* ===============================
        ENCABEZADO
================================ */

.calendario-encabezado {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.2rem;

    background-color: var(--rosa-principal);

}

.calendario-titulo {

    color: var(--blanco);

    font-size: 1.2rem;

    font-weight: var(--peso-negrita);

}


/* ===============================
        BOTONES
================================ */

.boton-calendario {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 2rem;

    height: 2rem;

    border-radius: 50%;

    transition: var(--transicion-suave);

}

.boton-calendario:hover {

    background-color: rgba(255, 255, 255, 0.15);

}

.boton-calendario img {

    width: 0.9rem;

    height: 0.9rem;

}


/* ===============================
        DÍAS DE LA SEMANA
================================ */

.calendario-semana {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    padding: 1rem 1rem 0.5rem;

    color: var(--rosa-principal);

    font-size: 0.9rem;

    font-weight: var(--peso-medio);

    text-align: center;

}


/* ===============================
        CUADRÍCULA
================================ */

.calendario-dias {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 0.4rem;

    min-height: 16rem;

    padding: 0 1rem 1rem;

}


/* ===============================
        DÍAS
================================ */

.dia-calendario {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 2.2rem;

    height: 2.2rem;

    margin: 0 auto;

    color: var(--negro);

    border-radius: 50%;

    font-family: var(--fuente-textos);

    font-size: 0.95rem;

    cursor: pointer;

    transition: var(--transicion-suave);

}

.dia-calendario:hover:not(:disabled):not(.dia-checkin):not(.dia-checkout) {

    background-color: rgba(199, 53, 95, 0.12);

}


/* DÍA PASADO */

.dia-pasado {

    color: var(--gris-calendario);

    cursor: not-allowed;

}

.dia-pasado:hover {

    background-color: transparent;

}

/* ===============================
        DÍAS NO DISPONIBLES
================================ */

.dia-calendario.dia-no-disponible {
    color: var(--gris-calendario);

    cursor: not-allowed;

    opacity: 0.65;
}

.dia-calendario.dia-no-disponible:hover {
    color: var(--gris-calendario);
    background-color: transparent;

    transform: none;
}


/* BOTÓN DESHABILITADO */

.dia-calendario:disabled {

    background-color: transparent;

    opacity: 1;

    pointer-events: none;

}


/* ===============================
        LEYENDA
================================ */

.calendario-leyenda {

    display: flex;

    flex-direction: column;

    gap: 0.8rem;

    padding: 1rem;

    border-top: 0.08rem solid rgba(0, 0, 0, 0.08);

}

.leyenda-item {

    display: flex;

    align-items: center;

    gap: 0.8rem;

}

.leyenda-item p {

    font-size: 0.9rem;

}

.leyenda-color {

    width: 1rem;

    height: 1rem;

    border-radius: 50%;

}

.checkin {

    background-color: var(--verde-calendario);

}

.checkout {

    background-color: var(--naranja-calendario);

}

.ocupado {

    background-color: var(--gris-calendario);

}


/* ===============================
        ESTADOS
================================ */

.dia-checkin,
.dia-checkout {

    color: var(--blanco);

    font-weight: var(--peso-medio);

    border-radius: 50%;

}

.dia-checkin {

    background-color: var(--verde-calendario);

}

.dia-checkout {

    background-color: var(--naranja-calendario);

}


/* RANGO */

.dia-rango {

    background-color: rgba(126, 143, 79, 0.18);

    color: var(--verde-calendario);

}


/* ===============================
        ACCIONES
================================ */

.calendario-acciones {

    display: flex;

    justify-content: flex-end;

    gap: 0.8rem;

    margin-top: 1rem;

}


/* BOTÓN CANCELAR */

.calendario-acciones .boton-cancelar {

    padding: 0.4rem 1.6rem;

    color: var(--rosa-principal);

    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);

    border-radius: var(--radio-boton);

    font-size: 0.85rem;

    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);

}

.calendario-acciones .boton-cancelar:hover {

    background-color: rgba(199, 53, 95, 0.08);

}


/* BOTÓN APLICAR */

.calendario-acciones .boton-aplicar {

    padding: 0.4rem 1.6rem;

    color: var(--blanco);

    background-color: var(--rosa-principal);

    border-radius: var(--radio-boton);

    font-size: 0.85rem;

    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);

}

.calendario-acciones .boton-aplicar:hover {

    filter: brightness(0.92);

}

/* ===============================
        PANEL HABITACIONES
================================ */

/* PANEL */

.panel-habitaciones {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 50%;
    transform: translateX(-30%);

    display: none;
    width: 23rem;
    padding: 1rem;

    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-tarjeta);

    box-shadow: var(--sombra-suave);

    z-index: 1000;
}

.panel-habitaciones.activo {
    display: block;
}


/* CONTENIDO */

.habitaciones-contenido {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* SELECTOR */

.habitaciones-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0.5rem 1.5rem;

    background-color: rgba(199, 53, 95, 0.10);

    border: 0.08rem solid rgba(199, 53, 95, 0.15);
    border-radius: var(--radio-boton);
}


/* TEXTO */

.habitaciones-texto {
    font-size: 1rem;
    font-weight: var(--peso-normal);
}


/* CONTROL */

.habitaciones-control {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.3rem 0.7rem;

    background-color: var(--blanco);

    border-radius: 3rem;
}


/* BOTONES */

.habitaciones-boton {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 50%;

    transition: var(--transicion-suave);
}

.habitaciones-boton:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.habitaciones-boton img {
    width: 0.8rem;
    height: 0.8rem;
}


/* VALOR */

.habitaciones-valor {
    min-width: 1.2rem;

    font-size: 1rem;
    font-weight: var(--peso-medio);
    text-align: center;
}


/* ACCIONES */

.habitaciones-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;

    margin-top: 0.2rem;
}


/* BOTONES */

.boton-cancelar {
    padding: 0.4rem 1.6rem;

    color: var(--rosa-principal);
    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-boton);

    font-size: 0.85rem;
    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);
}

.boton-cancelar:hover {
    background-color: rgba(199, 53, 95, 0.08);
}

.boton-aplicar {
    padding: 0.4rem 1.6rem;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    border-radius: var(--radio-boton);

    font-size: 0.85rem;
    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);
}

.boton-aplicar:hover {
    filter: brightness(0.92);
}

/* ===============================
        AVISO DE HABITACIONES
================================ */

.aviso-habitaciones {
    width: 100%;

    padding: 0.7rem 0.9rem;

    color: var(--rosa-principal);
    background-color: var(--fondo-principal);

    border-left: 0.25rem solid var(--rosa-principal);
    border-radius: var(--radio-pequeno);

    font-family: var(--fuente-textos);
    font-size: 0.8rem;
    font-weight: var(--peso-medio);
    line-height: 1.5;
}

.aviso-habitaciones[hidden] {
    display: none;
}

/* ===============================
        PANEL HUÉSPEDES
================================ */

/* PANEL */

.panel-huespedes {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 50%;
    transform: translateX(-30%);

    display: none;
    width: 23rem;
    padding: 1rem;

    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-tarjeta);

    box-shadow: var(--sombra-suave);

    z-index: 1000;
}

.panel-huespedes.activo {
    display: block;
}


/* CONTENIDO */

.huespedes-contenido {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* SELECTOR */

.huespedes-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0.5rem 1.5rem;

    background-color: rgba(199, 53, 95, 0.10);

    border: 0.08rem solid rgba(199, 53, 95, 0.15);
    border-radius: var(--radio-boton);
}


/* TEXTO */

.huespedes-texto {
    font-size: 1rem;
    font-weight: var(--peso-normal);
}


/* CONTROL */

.huespedes-control {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.3rem 0.7rem;

    background-color: var(--blanco);

    border-radius: 3rem;
}


/* BOTONES */

.huespedes-boton {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 50%;

    transition: var(--transicion-suave);
}

.huespedes-boton:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.huespedes-boton img {
    width: 0.8rem;
    height: 0.8rem;
}


/* VALOR */

.huespedes-valor {
    min-width: 1.2rem;

    font-size: 1rem;
    font-weight: var(--peso-medio);
    text-align: center;
}


/* ACCIONES */

.huespedes-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;

    margin-top: 0.2rem;
}


/* BOTONES */

.boton-cancelar {
    padding: 0.4rem 1.6rem;

    color: var(--rosa-principal);
    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-boton);

    font-size: 0.85rem;
    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);
}

.boton-cancelar:hover {
    background-color: rgba(199, 53, 95, 0.08);
}

.boton-aplicar {
    padding: 0.4rem 1.6rem;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    border-radius: var(--radio-boton);

    font-size: 0.85rem;
    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);
}

.boton-aplicar:hover {
    filter: brightness(0.92);
}

/* ===============================
        PANEL CÓDIGO PROMOCIONAL
================================ */

/* PANEL */

.panel-codigo {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 50%;
    transform: translateX(-30%);

    display: none;
    width: 23rem;
    padding: 1rem;

    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-tarjeta);

    box-shadow: var(--sombra-suave);

    z-index: 1000;
}

.panel-codigo.activo {
    display: block;
}


/* CONTENIDO */

.codigo-contenido {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* CAMPO */

.codigo-campo {
    width: 100%;
}


/* INPUT */

.codigo-input {
    width: 100%;
    padding: 1rem 1.2rem;

    color: var(--texto-principal);
    background-color: rgba(199, 53, 95, 0.10);

    border: 0.08rem solid rgba(199, 53, 95, 0.15);
    border-radius: var(--radio-boton);

    font-family: var(--fuente-textos);
    font-size: 1rem;

    outline: none;

    transition: var(--transicion-suave);
}

.codigo-input::placeholder {
    color: var(--texto-secundario);
}

.codigo-input:focus {
    border-color: var(--rosa-principal);
}


/* ACCIONES */

.codigo-acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* BOTONES */

.codigo-botones {
    display: flex;
    gap: 0.8rem;
}

.boton-borrar {
    color: var(--texto-principal);

    font-size: 1rem;
    font-weight: var(--peso-normal);

    transition: var(--transicion-suave);
}

.boton-borrar:hover {
    color: var(--rosa-principal);
}

.boton-cancelar {
    padding: 0.4rem 1.6rem;

    color: var(--rosa-principal);
    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-boton);

    font-size: 0.85rem;
    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);
}

.boton-cancelar:hover {
    background-color: rgba(199, 53, 95, 0.08);
}

.boton-aplicar {
    padding: 0.4rem 1.6rem;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    border-radius: var(--radio-boton);

    font-size: 0.85rem;
    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);
}

.boton-aplicar:hover {
    filter: brightness(0.92);
}















/* ===============================
        TARJETA DE HABITACIÓN
================================ */

.tarjeta-habitacion {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    overflow: hidden;
    background-color: var(--blanco);
    border: 0.15rem solid var(--rosa-principal);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-suave);
}

/* ===============================
        EFECTOS
================================ */

.tarjeta-habitacion:hover {
    box-shadow: var(--sombra-suave);
}

/* ===============================
        ETIQUETA DE DESCUENTO
================================ */

.etiqueta-descuento{
    position: absolute;

    top: 3rem;
    left: -4rem;

    width: 13rem;
    height: 2.8rem;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--rosa-principal);

    transform: rotate(-45deg);

    z-index: 30;
}

.etiqueta-descuento span {

    margin-left: 0.8rem;

    color: var(--blanco);

    font-size: 1rem;
    font-weight: 450;

    letter-spacing: 0.05rem;
}

/* ===============================
        CONTENIDO SUPERIOR
================================ */

.contenido-superior {
    display: grid;
    grid-template-columns: 27rem 1fr;
    gap: 2rem;

    padding: 1.5rem;
}


/* ===============================
        GALERÍA
================================ */

.galeria-habitacion {
    display: flex;
    flex-direction: column;
}


/* IMAGEN PRINCIPAL */

.imagen-principal {
    position: relative;

    width: 100%;
    margin: 0;

    overflow: hidden;

    border-radius: var(--radio-imagen);
}

.imagen-principal-habitacion {
    display: block;

    width: 100%;
    height: 23rem;

    object-fit: cover;

    transition: opacity 0.25s ease;
}


/* ===============================
        BOTONES DEL CARRUSEL
================================ */

.boton-carrusel {
    position: absolute;
    top: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 2.7rem;
    height: 2.7rem;

    background-color: rgba(255, 255, 255, 0.9);

    border: none;
    border-radius: 50%;

    box-shadow: var(--sombra-suave);

    cursor: pointer;

    transform: translateY(-50%);

    transition: var(--transicion-suave);

    z-index: 5;
}

.boton-carrusel:hover {
    transform: translateY(-50%) scale(1.08);
}

/* Botón izquierdo */

.boton-anterior {
    left: 1rem;
}

/* Botón derecho */

.boton-siguiente {
    right: 1rem;
}

.boton-carrusel img {
    width: 1rem;
    height: 1rem;
}


/* ===============================
        ETIQUETA DE DESCUENTO
================================ */

.etiqueta-descuento {
    position: absolute;
    top: 1rem;
    left: -3.2rem;

    width: 10rem;
    padding: 0.55rem 0;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    font-weight: var(--peso-negrita);
    text-align: center;

    transform: rotate(-45deg);

    box-shadow: var(--sombra-suave);

    z-index: 20;
}

/* ===============================
        INFORMACIÓN
================================ */

.informacion-habitacion {
    display: flex;
    flex-direction: column;

    gap: 0.9rem;

    min-height: 22rem;
}


/* ENCABEZADO */

.encabezado-habitacion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* ===============================
        TÍTULO
================================ */

.nombre-habitacion {
    margin: 0;

    color: var(--rosa-principal);

    font-family: var(--fuente-titulos);
    font-size: 2.6rem;
    font-weight: var(--peso-negrita);
    line-height: 1.1;
}


/* ===============================
        CARACTERÍSTICAS
================================ */

.caracteristicas-habitacion {
    display: grid;

    grid-template-columns: 1.2fr 0.9fr 1.4fr;

    gap: 0.8rem;
}

.caracteristica {
    display: flex;
    align-items: center;
    gap: 0.35rem;

    color: var(--gris-texto);

    font-size: 0.8rem;
    line-height: 1.2;
}

.caracteristica img {
    width: 2rem;
    height: 2rem;

    flex-shrink: 0;
}

/* TEXTO */

.caracteristica span:last-child {
    display: block;
}

/* HUÉSPEDES Y M² SIEMPRE EN UNA LÍNEA */

.caracteristica:nth-child(1) span:last-child,
.caracteristica:nth-child(2) span:last-child {
    white-space: nowrap;
}

/* CAMAS PUEDE OCUPAR DOS LÍNEAS */

.caracteristica:nth-child(3) span:last-child {
    white-space: normal;
    word-break: break-word;
}


/* ===============================
        DESCRIPCIÓN
================================ */

.descripcion-habitacion {
    max-width: 36rem;
    margin: 0;

    color: var(--gris-texto);

    line-height: 1.55;
}


/* ===============================
        AMENIDADES
================================ */

.amenidades-habitacion {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.amenidad {
    display: flex;
    align-items: center;
    gap: 0.35rem;

    padding: 0.45rem 0.8rem;

    background-color: rgba(199, 53, 94, 0.12);

    border: 0.08rem solid rgba(199, 53, 94, 0.15);
    border-radius: 999rem;

    color: var(--rosa-principal);

    font-size: 0.75rem;
    font-weight: var(--peso-medio);

    white-space: nowrap;
}

.amenidad img {
    width: 1.2rem;
    height: 1.2rem;

    flex-shrink: 0;
}


/* ===============================
        SELECTOR DE CAMAS
================================ */

/* CONTENEDOR */

.configuracion-camas {
    display: flex;
    flex-direction: column;

    gap: 0.45rem;

    max-width: 27rem;
}

/* ETIQUETA */

.configuracion-camas label {
    color: var(--negro);

    font-size: 0.9rem;
    font-weight: var(--peso-medio);
}

/* SELECTOR */

.selector-camas {
    width: 100%;

    padding: 0.8rem 2.8rem 0.8rem 1rem;

    color: var(--rosa-principal);
    background-color: rgba(199, 53, 94, 0.08);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-boton);

    font-family: var(--fuente-textos);
    font-size: 0.9rem;
    font-weight: var(--peso-medio);

    cursor: pointer;

    outline: none;

    appearance: none;

    background-image: url("../icons/78.svg");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.8rem;

    transition: var(--transicion-suave);
}

/* HOVER */

.selector-camas:hover {
    background-color: rgba(199, 53, 94, 0.13);

    box-shadow: var(--sombra-suave);
}

/* FOCUS */

.selector-camas:focus {
    background-color: var(--blanco);

    box-shadow: 0 0 0 0.2rem rgba(199, 53, 94, 0.12);
}

/* OPCIONES */

.selector-camas option {
    color: var(--negro);
    background-color: var(--blanco);

    font-family: var(--fuente-textos);
}

/* ===============================
        PIE DE LA TARJETA
================================ */

.pie-tarjeta {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 2rem;

    padding: 1.4rem 2rem;

    /* Línea separadora */
    border-top: 0.08rem solid rgba(199, 53, 94, 0.533);
}


/* ===============================
        INFORMACIÓN DE TARIFA
================================ */

.informacion-tarifa {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    justify-self: start;
}

.tipo-tarifa {
    margin: 0;

    font-family: var(--fuente-titulos);
    font-size: 1.7rem;

    line-height: 1.1;
}

.texto-impuestos {
    margin: 0;

    color: var(--rosa-principal);

    font-size: 1rem;
    font-weight: var(--peso-medio);

    line-height: 1;
}


/* ===============================
        PRECIO
================================ */

.precio-habitacion {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.precios {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.precios h3 {
    margin: 0;

    color: var(--rosa-principal);

    font-family: var(--fuente-titulos);
    font-size: 1.7rem;
    line-height: 1;
}

.precios small {
    margin: 0;

    align-self: center;

    color: var(--gris-texto);

    font-size: 1rem;

    text-decoration: line-through;
}

.precio-habitacion p {
    margin-top: 0.3rem;

    font-size: 1rem;
}


/* ===============================
        BOTÓN
================================ */

.acciones-tarjeta {
    display: flex;
    justify-content: flex-end;
}

/* BOTÓN VER TARIFAS */

.boton-ver-tarifas {
    min-width: 12rem;
    padding: 1rem 2rem;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    border-radius: var(--radio-boton);

    font-family: var(--fuente-titulos);
    font-size: 1.1rem;
    font-weight: var(--peso-negrita);

    transition: var(--transicion-suave);
}

.boton-ver-tarifas:hover {
    filter: brightness(0.9);
}

.boton-elegir-habitacion {
    min-width: 14rem;
    padding: 1rem 2rem;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    border: none;
    border-radius: var(--radio-boton);

    font-family: var(--fuente-titulos);
    font-size: 1.1rem;

    cursor: pointer;

    transition: 0.25s ease;
}

/* BOTÓN DESHABILITADO */

.boton-elegir-habitacion:disabled {
    cursor: not-allowed;
}

.boton-elegir-habitacion:hover {
    transform: translateY(-0.15rem);

    box-shadow: var(--sombra-suave);
}

.boton-elegir-habitacion:active {
    transform: scale(0.98);
}

/* BOTÓN SELECCIONADO */

.boton-elegir-habitacion.boton-seleccionado {
    color: var(--blanco);
    background-color: var(--gris-calendario);

    cursor: not-allowed;

    box-shadow: none;
}

/* BOTÓN BLOQUEADO */

.boton-elegir-habitacion.boton-bloqueado {
    color: var(--blanco);
    background-color: var(--gris-calendario);

    cursor: not-allowed;

    box-shadow: none;
}

/* DESHABILITADO */

.boton-elegir-habitacion:disabled {
    transform: none;
}

/* EVITAR HOVER */

.boton-elegir-habitacion.boton-seleccionado:hover,
.boton-elegir-habitacion.boton-bloqueado:hover {
    transform: none;

    box-shadow: none;
}

/* ===============================
        PANEL DE TARIFAS
================================ */

.panel-tarifas-habitacion {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;

    padding: 1.5rem 2rem;

    border-top: 0.08rem solid rgba(199, 53, 94, 0.2);
}

.panel-tarifas-habitacion[hidden] {
    display: none;
}

.tarifas-pago h3,
.tarifas-huespedes h3,
.tarifas-total h3 {
    color: var(--negro);

    font-family: var(--fuente-titulos);
    font-size: 1.2rem;
    font-weight: var(--peso-negrita);
}

.tarifas-pago p,
.tarifas-total p {
    color: var(--rosa-principal);

    font-size: 0.9rem;
}

.tarifas-huespedes {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.control-huesped-tarifa {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    width: 100%;
    padding: 0.7rem 1rem;

    color: var(--rosa-principal);
    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-boton);
}

.texto-huesped-tarifa {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    font-size: 0.95rem;
    font-weight: var(--peso-medio);
}

.texto-huesped-tarifa img {
    width: 1.4rem;
    height: 1.4rem;

    flex-shrink: 0;
}

.contador-huesped-tarifa {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.boton-huesped-tarifa {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 1.8rem;
    height: 1.8rem;

    border-radius: 50%;

    transition: var(--transicion-suave);
}

.boton-huesped-tarifa:hover {
    background-color: rgba(199, 53, 94, 0.12);
}

.boton-huesped-tarifa:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.boton-huesped-tarifa img {
    width: 0.75rem;
    height: 0.75rem;
}

.valor-huesped-tarifa {
    min-width: 1rem;

    color: var(--rosa-principal);

    font-size: 0.95rem;
    font-weight: var(--peso-medio);
    text-align: center;
}

/* ACOMODO DE CAMAS */

.acomodo-camas-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    margin-top: 0.5rem;
}

.acomodo-camas-panel label {
    color: var(--negro);

    font-family: var(--fuente-titulos);
    font-size: 0.95rem;
    font-weight: var(--peso-medio);
}

.selector-camas-panel {
    width: 100%;

    padding: 0.75rem 1rem;

    color: var(--rosa-principal);
    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-boton);

    font-family: var(--fuente-textos);
    font-size: 0.9rem;
    font-weight: var(--peso-medio);

    outline: none;
    cursor: pointer;

    transition: var(--transicion-suave);
}

.selector-camas-panel:focus {
    box-shadow: 0 0 0 0.2rem rgba(199, 53, 94, 0.12);
}

.tarifas-total {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tarifa-fila,
.tarifa-total-final {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.tarifa-fila {
    font-size: 0.9rem;
}

.tarifa-fila.descuento {
    color: var(--rosa-principal);
}

.tarifa-total-final {
    padding-top: 0.6rem;
    margin-top: 0.4rem;

    border-top: 0.08rem solid rgba(199, 53, 94, 0.2);

    font-family: var(--fuente-titulos);
    font-size: 1.2rem;
    font-weight: var(--peso-negrita);
}

.tarifas-total .boton-elegir-habitacion {
    margin-top: 0.8rem;
}

/* VALORES DE LA TARIFA */

.tarifa-noches-panel,
.tarifa-original-panel,
.tarifa-subtotal-panel,
.tarifa-descuento-panel {
    font-weight: var(--peso-normal);
}

/* PRECIOS DEL TOTAL */

.tarifa-total-precios {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 0.5rem;
}

.tarifa-total-original-panel {
    color: var(--gris-texto);

    font-family: var(--fuente-textos);
    font-size: 0.8rem;
    font-weight: var(--peso-normal);

    text-decoration: line-through;
}

/* ===============================
        RESULTADOS DE RESERVA
================================ */

.resultados-contenido {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 26rem;

    align-items: start;
    gap: 2rem;
}

.lista-habitaciones {

    /* Coloca las tarjetas una debajo de otra */
    display: flex;

    /* Dirección vertical */
    flex-direction: column;

    /* Espacio entre tarjetas */
    gap: 1rem;
}

/* ===============================
        MENSAJE SIN DISPONIBILIDAD
================================ */

.mensaje-sin-disponibilidad {
    min-height: 28rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 1.2rem;

    padding: 3rem;

    background-color: var(--blanco);

    border: 0.12rem solid var(--rosa-principal);
    border-radius: var(--radio-tarjeta);

    box-shadow: var(--sombra-suave);

    text-align: center;
}

.mensaje-sin-disponibilidad-titulo {
    color: var(--rosa-principal);

    font-family: var(--fuente-titulos);
    font-size: var(--titulo-seccion);
    font-weight: var(--peso-negrita);
    line-height: 1.2;
}

.mensaje-sin-disponibilidad-texto,
.mensaje-sin-disponibilidad-ayuda {
    max-width: 36rem;

    font-family: var(--fuente-textos);
    font-size: var(--texto-seccion);
    line-height: 1.6;
}

.mensaje-sin-disponibilidad-texto strong {
    color: var(--rosa-principal);
}

.boton-cambiar-fechas {
    margin-top: 0.5rem;

    padding: 0.8rem 2rem;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    border-radius: var(--radio-boton);

    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);
}

.boton-cambiar-fechas:hover {
    transform: translateY(-0.15rem);

    filter: brightness(0.9);
}























/* ===============================
        RESUMEN DE RESERVA
================================ */

/* CONTENEDOR */

.resumen-reserva {
    position: sticky;
    top: 5.8rem;

    overflow-y: auto;
    overflow-x: hidden;

    max-height: calc(100vh - 6.5rem);
    min-height: 35rem;

    margin-top: 1.5rem;

    background-color: var(--blanco);

    border: 0.15rem solid var(--rosa-principal);
    border-radius: var(--radio-tarjeta);

    box-shadow: var(--sombra-suave);
}

/* BARRA DE DESPLAZAMIENTO */

.resumen-reserva {
    scrollbar-width: thin;
    scrollbar-color: var(--rosa-principal) transparent;
}

.resumen-reserva::-webkit-scrollbar {
    width: 0.35rem;
}

.resumen-reserva::-webkit-scrollbar-track {
    background-color: transparent;
}

.resumen-reserva::-webkit-scrollbar-thumb {
    background-color: var(--rosa-principal);
    border-radius: var(--radio-boton);
}

.resumen-reserva::-webkit-scrollbar-thumb:hover {
    background-color: var(--rosa-secundario);
}

/* CONTENIDO */

.resumen-vacio,
.resumen-contenido {
    display: flex;
    flex-direction: column;

    min-height: 35rem;

    padding: 2rem 1rem 0;
}

/* OCULTAR RESUMEN */

.resumen-vacio[hidden],
.resumen-contenido[hidden] {
    display: none;
}

/* TÍTULO */

.titulo-resumen {
    margin: 0 0 1rem;

    color: var(--negro);

    font-family: var(--fuente-titulos);
    font-size: 1.35rem;
    font-weight: var(--peso-normal);
    line-height: 1.2;
    color: var(--rosa-principal);

    text-align: center;
}

/* LÍNEA */

.linea-resumen {
    width: 100%;
    height: 0.08rem;

    margin: 0 0 1.4rem;

    background-color: var(--rosa-principal);
}

/* MENSAJE VACÍO */

.mensaje-resumen {
    display: flex;
    justify-content: center;
    align-items: center;

    flex: 1;

    text-align: center;
}

.mensaje-resumen p {
    color: var(--rosa-principal);

    font-size: 1rem;
    font-weight: var(--peso-medio);
}

/* ===============================
        FECHAS DEL RESUMEN
================================ */

/* CONTENEDOR */

.resumen-fechas {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 0.35rem;

    padding: 0 0 1.4rem;

    text-align: center;
}

/* RANGO DE FECHAS */

.resumen-rango {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 0.8rem;

    margin: 0;

    font-family: var(--fuente-titulos);
    font-size: 1rem;
    line-height: 1.4;
}

/* FLECHA */

.flecha-resumen {
    color: var(--negro);

    font-size: 1.1rem;
    font-weight: var(--peso-negrita);
}

/* HUÉSPEDES */

.resumen-huespedes {
    margin: 0;

    font-family: var(--fuente-titulos);
    font-size: 1rem;
    line-height: 1.4;
}

/* CÁPSULA DE NOCHES */

.chip-noches {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    gap: 0.3rem;

    margin-top: 0.6rem;
    padding: 0.35rem 0.8rem;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    border-radius: var(--radio-grande);

    font-size: 0.75rem;
    line-height: 1;
}

/* ICONO */

.chip-noches img {
    width: 1rem;
    height: 1rem;

    flex-shrink: 0;
}

/* ===============================
        HABITACIÓN DEL RESUMEN
================================ */

/* CONTENEDOR */

.resumen-habitacion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    gap: 0.6rem;

    padding: 0 0 1.4rem;
}

/* PRECIO DE HABITACIÓN */

.resumen-habitacion strong {
    font-weight: var(--peso-normal);
}

/* BOTÓN ELIMINAR */

.boton-eliminar-resumen {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 1.8rem;
    height: 1.8rem;

    flex-shrink: 0;

    border: 0.08rem solid var(--rosa-principal);
    border-radius: var(--radio-pequeno);

    transition: var(--transicion-suave);
}

.boton-eliminar-resumen:hover {
    background-color: rgba(199, 53, 95, 0.1);
}

.boton-eliminar-resumen img {
    width: 1rem;
    height: 1rem;
}

/* INFORMACIÓN */

.resumen-habitacion-datos {
    min-width: 0;
}

.resumen-habitacion-datos h3 {
    margin: 0;

    font-family: var(--fuente-titulos);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}

.resumen-habitacion-datos p {
    margin: 0.1rem 0 0;

    color: var(--rosa-principal);

    font-family: var(--fuente-titulos);
    font-size: 0.8rem;
    line-height: 1.2;
}

/* HUÉSPEDES DE LA HABITACIÓN */

.resumen-habitacion-datos .resumen-huespedes-habitacion {
    color: var(--negro);
}

.resumen-habitacion-datos .resumen-acomodo-camas {
    color: var(--negro);
}

/* PRECIO */

#resumen-precio {
    font-family: var(--fuente-titulos);
    font-size: 0.85rem;
    font-weight: var(--peso-negrita);

    white-space: nowrap;
}

/* ===============================
        TOTALES DEL RESUMEN
================================ */

/* CONTENEDOR */

.resumen-totales {
    display: flex;
    flex-direction: column;

    gap: 0.55rem;
}

/* FILAS */

.resumen-total-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;
}

.resumen-total-fila span,
.resumen-total-fila strong {
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    font-weight: var(--peso-normal);
}

/* DESCUENTOS */

.resumen-total-fila.descuento span,
.resumen-total-fila.descuento strong {
    color: var(--rosa-principal);
}

/* TOTAL FINAL */

.resumen-total {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    margin-top: 1rem;
}

.resumen-total span,
.resumen-total strong {
    color: var(--negro);

    font-family: var(--fuente-titulos);
    font-size: 1.25rem;
    font-weight: var(--peso-negrita);
}

/* ===============================
        OPCIONES DEL RESUMEN
================================ */

/* CONTENEDOR */

.resumen-opciones {
    display: flex;
    flex-direction: column;

    gap: 0.7rem;

    margin-top: auto;
    padding: 1.5rem 0;
}

/* OPCIÓN */

.opcion-resumen {
    display: flex;
    align-items: flex-start;

    gap: 0.5rem;

    cursor: pointer;
}

/* CHECKBOX */

.opcion-resumen input {
    width: 1rem;
    height: 1rem;

    flex-shrink: 0;

    margin-top: 0.15rem;

    accent-color: var(--rosa-principal);

    cursor: pointer;
}

/* TEXTO */

.opcion-resumen span {
    font-size: 0.75rem;
    line-height: 1.4;
}

/* ENLACE */

.opcion-resumen a {
    color: var(--rosa-principal);

    font-weight: var(--peso-medio);

    text-decoration: underline;
}


/* ===============================
        BOTÓN RESERVAR
================================ */

/* BOTÓN */

.boton-reservar {
    width: calc(100% + 2rem);

    margin-left: -1rem;

    padding: 1rem;

    color: var(--blanco);
    background-color: var(--rosa-principal);

    border-radius:
        0
        0
        var(--radio-tarjeta)
        var(--radio-tarjeta);

    font-family: var(--fuente-titulos);
    font-size: 1.1rem;
    font-weight: var(--peso-negrita);

    transition: var(--transicion-suave);
}

/* HOVER */

.boton-reservar:hover:not(:disabled) {
    filter: brightness(0.9);
}

/* DESHABILITADO */

.boton-reservar:disabled {
    cursor: not-allowed;

    opacity: 0.6;
}












/* ===============================
        CONFIRMACIÓN
================================ */

.pantalla-confirmacion {
    max-width: 1400px;

    margin: 3rem auto 5rem;
    padding: 0 2rem;
}


/* CONTENIDO */

.confirmacion-contenido {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr;
    align-items: start;
    gap: 3rem;
}


/* INFORMACIÓN */

.confirmacion-informacion {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.confirmacion-informacion p {
    margin: 0;

    color: var(--negro);

    font-family: var(--fuente-textos);
    font-size: 1.15rem;
    line-height: 1.8;
}


/* TÍTULO */

.confirmacion-titulo {
    margin: 0;

    color: var(--rosa-principal);

    font-family: var(--fuente-titulos);
    font-size: 3rem;
    line-height: 1.15;
}


/* CÓDIGO */

.confirmacion-codigo {
    color: var(--rosa-principal);

    font-size: 2rem;
    font-weight: var(--peso-negrita);
}

.confirmacion-codigo strong {
    color: var(--rosa-principal);
}


/* TEXTO FINAL */

.confirmacion-final {
    font-weight: var(--peso-negrita);
}


/* ===============================
        RESUMEN DE CONFIRMACIÓN
================================ */

.contenedor-resumen-confirmacion {
    position: sticky;
    top: 2rem;
}

.contenedor-resumen-confirmacion #resumen-reserva {
    position: static;
    width: 100%;
}



















/* ===============================
        RESPONSIVE
================================ */


/* ==================================
        TABLET GRANDE
================================== */

@media (max-width: 992px) {

    /* ===============================
            CONTENIDO GENERAL
    ================================ */

    .principal-reservar {
        overflow-x: hidden;
    }


    /* ===============================
            ENCABEZADO
    ================================ */

    .encabezado-reservar {
        padding: 7.5rem 0 2.5rem;
    }

    .encabezado-reservar-contenido {
        max-width: 42rem;
    }

    .encabezado-reservar-titulo {
        font-size: var(--titulo-seccion-tablet);
    }

    .encabezado-reservar-texto {
        max-width: 38rem;

        font-size: var(--texto-seccion-tablet);
    }


    /* ===============================
            BUSCADOR
    ================================ */

    .seccion-buscador {
        padding-bottom: 8rem;
    }

    .seccion-buscador.panel-abierto {
        padding-bottom: 38rem;
    }

    .buscador-encabezado {
        display: grid;
        grid-template-columns:
            minmax(0, 2fr)
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 0.8rem;
    }

    .encabezado-item {
        width: 100%;

        padding: 0 0.8rem;
    }

    .encabezado-vacio {
        display: none;
    }

    .buscador-contenido {
        display: grid;
        grid-template-columns:
            minmax(0, 2fr)
            minmax(0, 1fr)
            minmax(0, 1fr);

        align-items: center;
    }

    .contenedor-filtro-fechas,
    .contenedor-filtro-habitaciones,
    .contenedor-filtro-codigo {
        width: 100%;
    }

    .boton-busqueda {
        grid-column: 1 / -1;

        justify-self: center;

        width: 10rem;
    }


    /* ===============================
            PANELES DEL BUSCADOR
    ================================ */

    .panel-calendario,
    .panel-habitaciones,
    .panel-huespedes,
    .panel-codigo {
        left: 50%;

        transform: translateX(-50%);
    }


    /* ===============================
            RESULTADOS
    ================================ */

    .resultados-contenido {
        grid-template-columns: minmax(0, 1fr);

        gap: 2rem;
    }

    .lista-habitaciones {
        order: 2;
    }

    .resumen-reserva {
        position: static;

        order: 1;

        width: 100%;
        max-width: 42rem;
        max-height: none;
        min-height: auto;

        margin: 1rem auto 0;
    }

    .resumen-vacio {
        min-height: 14rem;
    }

    .resumen-contenido {
        min-height: auto;
    }


    /* ===============================
            TARJETA DE HABITACIÓN
    ================================ */

    .contenido-superior {
        grid-template-columns:
            minmax(18rem, 22rem)
            minmax(0, 1fr);

        gap: 1.5rem;

        padding: 1.3rem;
    }

    .imagen-principal-habitacion {
        height: 20rem;
    }

    .nombre-habitacion {
        font-size: var(--titulo-seccion-tablet);
    }

    .caracteristicas-habitacion {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .caracteristica:nth-child(3) {
        grid-column: 1 / -1;
    }

    .pie-tarjeta {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;

        gap: 1.2rem;

        padding: 1.2rem 1.5rem;
    }

    .boton-ver-tarifas,
    .boton-elegir-habitacion {
        min-width: 11rem;
    }


    /* ===============================
            PANEL DE TARIFAS
    ================================ */

    .panel-tarifas-habitacion {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 1.5rem;
    }

    .tarifas-pago {
        grid-column: 1 / -1;
    }


    /* ===============================
            MENSAJE SIN DISPONIBILIDAD
    ================================ */

    .mensaje-sin-disponibilidad {
        min-height: 24rem;

        padding: 2.5rem;
    }

    .mensaje-sin-disponibilidad-titulo {
        font-size: var(--titulo-seccion-tablet);
    }

    .mensaje-sin-disponibilidad-texto,
    .mensaje-sin-disponibilidad-ayuda {
        font-size: var(--texto-seccion-tablet);
    }


    /* ===============================
            CONFIRMACIÓN
    ================================ */

    .pantalla-confirmacion {
        max-width: 52rem;

        padding: 0 2rem;
    }

    .confirmacion-contenido {
        grid-template-columns: minmax(0, 1fr);

        gap: 3rem;
    }

    .confirmacion-titulo {
        font-size: var(--titulo-seccion-tablet);
    }

    .confirmacion-informacion p {
        font-size: var(--texto-seccion-tablet);
    }

    .contenedor-resumen-confirmacion {
        position: static;

        width: 100%;
        max-width: 42rem;

        margin: 0 auto;
    }

}


/* ==================================
        TABLET Y MÓVIL
================================== */

@media (max-width: 768px) {

    /* ===============================
            CONTENIDO GENERAL
    ================================ */

    .principal-reservar {
        width: 100%;
    }


    /* ===============================
            ENCABEZADO
    ================================ */

    .encabezado-reservar {
        padding: 7rem 0 2.5rem;
    }

    .encabezado-reservar-contenido {
        max-width: 34rem;
    }

    .encabezado-reservar-titulo {
        margin-bottom: 1.2rem;

        font-size: var(--titulo-seccion-tablet);
    }

    .encabezado-reservar-texto {
        max-width: 30rem;

        margin-bottom: 1.2rem;

        font-size: var(--texto-seccion-tablet);
        line-height: 1.5;
    }

    .linea-reservar {
        width: 15rem;
    }


    /* ===============================
            BUSCADOR
    ================================ */

    .seccion-buscador {
        padding-bottom: 6rem;
    }

    .seccion-buscador.panel-abierto {
        padding-bottom: 42rem;
    }

    .buscador-reservas {
        width: 100%;
        max-width: 32rem;

        margin: 0 auto;
    }

    .buscador-encabezado {
        display: none;
    }

    .buscador-contenido {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 1rem;

        padding: 1.5rem;

        border-radius: var(--radio-tarjeta);
    }

    .contenedor-filtro-fechas,
    .contenedor-filtro-habitaciones,
    .contenedor-filtro-huespedes,
    .contenedor-filtro-codigo {
        width: 100%;
    }

    .campo-buscador {
        height: 3.7rem;

        padding: 0 1rem;
    }

    .texto-campo {
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .boton-busqueda {
        grid-column: auto;

        justify-self: center;

        width: 9rem;
        height: 3.2rem;

        margin-top: 0.3rem;
    }


    /* ===============================
            PANELES DEL BUSCADOR
    ================================ */

    .panel-calendario,
    .panel-habitaciones,
    .panel-huespedes,
    .panel-codigo {
        top: calc(100% + 0.7rem);
        left: 50%;

        width: min(23rem, calc(100vw - 2rem));

        transform: translateX(-50%);
    }

    .panel-calendario {
        width: min(22rem, calc(100vw - 2rem));
    }


    /* ===============================
            CALENDARIO
    ================================ */

    .calendario-dias {
        min-height: 15rem;
    }


    /* ===============================
            RESULTADOS
    ================================ */

    .resultados-reserva {
        width: 100%;

        margin-top: 2rem;
    }

    .resultados-contenido {
        display: flex;
        flex-direction: column;

        gap: 1.5rem;
    }

    .lista-habitaciones {
        order: 2;

        width: 100%;
        max-width: 34rem;

        margin: 0 auto;
    }

    .resumen-reserva {
        position: static;

        order: 1;

        width: 100%;
        max-width: 34rem;
        max-height: none;
        min-height: auto;

        margin: 0 auto;

        overflow: visible;
    }

    .resumen-vacio {
        min-height: 11rem;

        padding: 1.5rem 1rem 0;
    }

    .resumen-contenido {
        min-height: auto;

        padding: 1.5rem 1rem 0;
    }


    /* ===============================
            TARJETA DE HABITACIÓN
    ================================ */

    .tarjeta-habitacion {
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    .contenido-superior {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 0;

        padding: 0;
    }

    .imagen-principal {
        border-radius:
            var(--radio-imagen)
            var(--radio-imagen)
            0
            0;
    }

    .imagen-principal-habitacion {
        height: 20rem;

        border-radius:
            var(--radio-imagen)
            var(--radio-imagen)
            0
            0;
    }

    .informacion-habitacion {
        min-height: auto;

        padding: 1.5rem;
    }

    .nombre-habitacion {
        font-size: var(--titulo-seccion-tablet);
    }

    .caracteristicas-habitacion {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.8rem;
    }

    .caracteristica:nth-child(3) {
        grid-column: 1 / -1;
    }

    .descripcion-habitacion {
        max-width: none;
    }

    .configuracion-camas {
        max-width: none;
    }

    .pie-tarjeta {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 1.2rem;

        padding: 1.2rem 1.5rem;
    }

    .informacion-tarifa {
        grid-column: 1 / -1;

        justify-self: start;
        align-items: flex-start;
    }

    .precio-habitacion {
        align-items: flex-start;
    }

    .acciones-tarjeta {
        align-items: center;
    }

    .boton-ver-tarifas,
    .boton-elegir-habitacion {
        min-width: 10rem;

        padding: 0.9rem 1.2rem;
    }

    .etiqueta-descuento {
        top: 0.8rem;
        left: -3.4rem;

        width: 10rem;
    }


    /* ===============================
            PANEL DE TARIFAS
    ================================ */

    .panel-tarifas-habitacion {
        grid-template-columns: minmax(0, 1fr);

        gap: 1.5rem;

        padding: 1.5rem;
    }

    .tarifas-pago {
        grid-column: auto;
    }

    .tarifas-total .boton-elegir-habitacion {
        width: 100%;
    }


    /* ===============================
            MENSAJE SIN DISPONIBILIDAD
    ================================ */

    .mensaje-sin-disponibilidad {
        width: 100%;
        max-width: 34rem;
        min-height: 21rem;

        margin: 0 auto;
        padding: 2rem;
    }

    .mensaje-sin-disponibilidad-titulo {
        font-size: var(--titulo-seccion-tablet);
    }

    .mensaje-sin-disponibilidad-texto,
    .mensaje-sin-disponibilidad-ayuda {
        font-size: var(--texto-seccion-tablet);
    }


    /* ===============================
            RESUMEN
    ================================ */

    .titulo-resumen {
        margin-bottom: 0.9rem;
    }

    .linea-resumen {
        margin-bottom: 1.2rem;
    }

    .resumen-fechas {
        padding-bottom: 1.2rem;
    }

    .resumen-rango {
        flex-wrap: wrap;
    }

    .resumen-opciones {
        margin-top: 1.5rem;
    }


    /* ===============================
            CONFIRMACIÓN
    ================================ */

    .pantalla-confirmacion {
        width: 100%;

        margin: 2rem auto 4rem;
        padding: 0 1.5rem;
    }

    .confirmacion-contenido {
        display: flex;
        flex-direction: column;

        gap: 2.5rem;
    }

    .confirmacion-informacion {
        gap: 1.3rem;
    }

    .confirmacion-titulo {
        font-size: var(--titulo-seccion-tablet);
        text-align: center;
    }

    .confirmacion-informacion p {
        font-size: var(--texto-seccion-tablet);
        line-height: 1.6;
    }

    .confirmacion-codigo {
        text-align: center;
    }

    .contenedor-resumen-confirmacion {
        width: 100%;
        max-width: 34rem;
    }

    .contenedor-resumen-confirmacion #resumen-reserva {
        width: 100%;
        max-width: none;

        margin: 0;
    }

}


/* ==================================
        MÓVIL PEQUEÑO
================================== */

@media (max-width: 480px) {

    /* ===============================
            CONTENIDO GENERAL
    ================================ */

    .principal-reservar .contenedor {
        width: 92%;
    }


    /* ===============================
            ENCABEZADO
    ================================ */

    .encabezado-reservar {
        padding: 6.5rem 0 2rem;
    }

    .encabezado-reservar-contenido {
        max-width: 20rem;
    }

    .encabezado-reservar-titulo {
        margin-bottom: 1rem;

        font-size: var(--titulo-seccion-movil);
        line-height: 1.1;
    }

    .encabezado-reservar-texto {
        font-size: var(--texto-seccion-movil);
        line-height: 1.4;
    }

    .linea-reservar {
        width: 10rem;
    }


    /* ===============================
            BUSCADOR
    ================================ */

    .seccion-buscador {
        padding-bottom: 4rem;
    }

    .seccion-buscador.panel-abierto {
        padding-bottom: 40rem;
    }

    .buscador-reservas {
        max-width: 20rem;
    }

    .buscador-contenido {
        gap: 0.9rem;

        padding: 1rem;
    }

    .campo-buscador {
        height: 3.2rem;

        gap: 0.7rem;

        padding: 0 0.8rem;
    }

    .icono-campo {
        width: 1.5rem;
        height: 1.5rem;
    }

    .texto-campo {
        font-size: var(--texto-seccion-movil);
    }

    .boton-busqueda {
        width: 8rem;
        height: 3rem;
    }


    /* ===============================
            PANELES
    ================================ */

    .panel-calendario,
    .panel-habitaciones,
    .panel-huespedes,
    .panel-codigo {
        width: calc(100vw - 1.5rem);
        max-width: 21rem;
    }


    /* ===============================
            CALENDARIO
    ================================ */

    .calendario-encabezado {
        padding: 0.8rem 1rem;
    }

    .calendario-semana {
        padding:
            0.8rem
            0.5rem
            0.4rem;
    }

    .calendario-dias {
        gap: 0.15rem;

        min-height: 14rem;

        padding:
            0
            0.5rem
            0.8rem;
    }

    .dia-calendario {
        width: 1.85rem;
        height: 1.85rem;
    }

    .calendario-leyenda {
        gap: 0.6rem;

        padding: 0.8rem;
    }

    .calendario-acciones {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.6rem;
    }

    .calendario-acciones .boton-cancelar,
    .calendario-acciones .boton-aplicar {
        width: 100%;

        padding: 0.5rem;
    }


    /* ===============================
            PANEL HABITACIONES
    ================================ */

    .panel-habitaciones,
    .panel-huespedes {
        padding: 0.8rem;
    }

    .habitaciones-selector,
    .huespedes-selector {
        padding: 0.5rem 0.8rem;
    }

    .habitaciones-control,
    .huespedes-control {
        gap: 0.4rem;

        padding: 0.25rem 0.4rem;
    }

    .habitaciones-acciones,
    .huespedes-acciones {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.6rem;
    }

    .habitaciones-acciones .boton-cancelar,
    .habitaciones-acciones .boton-aplicar,
    .huespedes-acciones .boton-cancelar,
    .huespedes-acciones .boton-aplicar {
        width: 100%;

        padding: 0.5rem;
    }


    /* ===============================
            PANEL CÓDIGO
    ================================ */

    .panel-codigo {
        padding: 0.8rem;
    }

    .codigo-input {
        padding: 0.8rem 1rem;
    }

    .codigo-acciones {
        flex-direction: column;
        align-items: stretch;

        gap: 0.8rem;
    }

    .boton-borrar {
        align-self: flex-start;
    }

    .codigo-botones {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.6rem;
    }

    .codigo-botones .boton-cancelar,
    .codigo-botones .boton-aplicar {
        width: 100%;

        padding: 0.5rem;
    }


    /* ===============================
            RESULTADOS
    ================================ */

    .resultados-reserva {
        margin-top: 1.5rem;
    }

    .resultados-contenido {
        gap: 1.2rem;
    }


    /* ===============================
            RESUMEN VACÍO
    ================================ */

    .resumen-vacio {
        min-height: 8rem;

        padding: 1.2rem 0.8rem 0;
    }

    .resumen-vacio .titulo-resumen,
    .resumen-vacio .linea-resumen {
        display: none;
    }

    .mensaje-resumen {
        min-height: 5rem;
    }


    /* ===============================
            TARJETA DE HABITACIÓN
    ================================ */

    .tarjeta-habitacion {
        border-width: 0.12rem;
    }

    .imagen-principal-habitacion {
        height: 15rem;
    }

    .boton-carrusel {
        width: 2.3rem;
        height: 2.3rem;
    }

    .boton-anterior {
        left: 0.7rem;
    }

    .boton-siguiente {
        right: 0.7rem;
    }

    .informacion-habitacion {
        gap: 0.8rem;

        padding: 1rem;
    }

    .nombre-habitacion {
        font-size: var(--titulo-seccion-movil);
    }

    .caracteristicas-habitacion {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.6rem;
    }

    .caracteristica {
        align-items: flex-start;
    }

    .caracteristica img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .caracteristica:nth-child(1) span:last-child,
    .caracteristica:nth-child(2) span:last-child {
        white-space: normal;
    }

    .amenidades-habitacion {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.5rem;
    }

    .amenidad {
        justify-content: flex-start;

        min-width: 0;

        padding: 0.4rem 0.55rem;

        white-space: normal;
    }

    .selector-camas {
        padding:
            0.7rem
            2.4rem
            0.7rem
            0.8rem;
    }

    .pie-tarjeta {
        grid-template-columns: minmax(0, 1fr);

        gap: 1rem;

        padding: 1rem;
    }

    .informacion-tarifa,
    .precio-habitacion,
    .acciones-tarjeta {
        width: 100%;

        justify-self: stretch;
        align-items: flex-start;
    }

    .acciones-tarjeta {
        justify-content: stretch;
    }

    .boton-ver-tarifas,
    .boton-elegir-habitacion {
        width: 100%;
        min-width: 0;
    }


    /* ===============================
            PANEL DE TARIFAS
    ================================ */

    .panel-tarifas-habitacion {
        gap: 1.2rem;

        padding: 1rem;
    }

    .control-huesped-tarifa {
        gap: 0.6rem;

        padding: 0.6rem 0.7rem;
    }

    .contador-huesped-tarifa {
        gap: 0.4rem;
    }

    .tarifa-fila,
    .tarifa-total-final {
        gap: 0.6rem;
    }

    .tarifa-total-precios {
        flex-wrap: wrap;
    }


    /* ===============================
            MENSAJE SIN DISPONIBILIDAD
    ================================ */

    .mensaje-sin-disponibilidad {
        max-width: 20rem;
        min-height: 19rem;

        gap: 1rem;

        padding: 1.5rem 1rem;
    }

    .mensaje-sin-disponibilidad-titulo {
        font-size: var(--titulo-seccion-movil);
    }

    .mensaje-sin-disponibilidad-texto,
    .mensaje-sin-disponibilidad-ayuda {
        font-size: var(--texto-seccion-movil);
        line-height: 1.5;
    }

    .boton-cambiar-fechas {
        width: 100%;
    }


    /* ===============================
            RESUMEN COMPLETO
    ================================ */

    .resumen-contenido {
        padding: 1.3rem 0.8rem 0;
    }

    .resumen-rango {
        gap: 0.45rem;
    }

    .resumen-habitacion {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        gap: 0.45rem;
    }

    .resumen-habitacion strong {
        text-align: right;
    }

    .resumen-total-fila {
        align-items: flex-start;

        gap: 0.6rem;
    }

    .resumen-total-fila strong,
    .resumen-total strong {
        flex-shrink: 0;
    }

    .resumen-total {
        align-items: flex-start;

        gap: 0.6rem;
    }

    .resumen-opciones {
        padding: 1.3rem 0;
    }

    .opcion-resumen span {
        line-height: 1.5;
    }

    .boton-reservar {
        width: calc(100% + 1.6rem);

        margin-left: -0.8rem;
    }


    /* ===============================
            CONFIRMACIÓN
    ================================ */

    .pantalla-confirmacion {
        margin: 1.5rem auto 3rem;
        padding: 0 1rem;
    }

    .confirmacion-contenido {
        gap: 2rem;
    }

    .confirmacion-informacion {
        gap: 1.1rem;
    }

    .confirmacion-titulo {
        font-size: var(--titulo-seccion-movil);
        line-height: 1.15;
    }

    .confirmacion-informacion p {
        font-size: var(--texto-seccion-movil);
        line-height: 1.5;
    }

    .confirmacion-codigo {
        text-align: left;
    }

    .contenedor-resumen-confirmacion {
        max-width: 20rem;
    }

    .confirmacion-informacion {
        padding: 0 1rem;
    }

}