/* =========================================================
   TARJETA ANIMADA: SISTEMA DE RESERVACIÓN PARA CABAÑAS
   Archivo: cabanas_reservation_card.css

   Este archivo agrega una tercera tarjeta dentro de Soluciones.
   Mantiene el estilo glass / blur de las tarjetas existentes.
========================================================= */


/* =========================================================
   TARJETA PRINCIPAL DE CABAÑAS
========================================================= */

.ulu-service-card--cabins {
    /* La tarjeta ocupa las dos columnas del grid de soluciones */
    grid-column: 1 / -1;

    /* Cambiamos el layout interno a dos columnas */
    display: grid;

    /* Columna izquierda texto, columna derecha animación */
    grid-template-columns: 0.82fr 1.18fr;

    /* Separación entre columnas */
    gap: 34px;

    /* Alineación vertical */
    align-items: center;

    /* Altura mínima menor porque es horizontal */
    min-height: auto;
}


/* =========================================================
   SUBTÍTULO DE LA TARJETA
========================================================= */

.ulu-service-card--cabins .ulu-service-card__content h3 {
    /* Quita margen superior */
    margin: 0;

    /* Separación inferior */
    margin-bottom: 16px;

    /* Color oscuro elegante */
    color: #101828;

    /* Tamaño medio */
    font-size: clamp(1.05rem, 2vw, 1.35rem);

    /* Altura de línea */
    line-height: 1.35;

    /* Peso fuerte */
    font-weight: 900;
}


/* =========================================================
   PANEL VISUAL DE RESERVACIÓN
========================================================= */

.ulu-cabin-booking-demo {
    /* Posición relativa para reflejos internos */
    position: relative;

    /* Capa superior */
    z-index: 2;

    /* Fondo oscuro igual al estilo de tus demos */
    background:
        radial-gradient(circle at top left, rgba(0, 122, 255, 0.28), transparent 34%),
        radial-gradient(circle at bottom right, rgba(52, 199, 89, 0.14), transparent 36%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.94));

    /* Bordes grandes */
    border-radius: 28px;

    /* Espaciado interno */
    padding: 18px;

    /* Borde translúcido */
    border: 1px solid rgba(255, 255, 255, 0.14);

    /* Sombra profunda */
    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    /* Oculta desbordes */
    overflow: hidden;
}


/* Reflejo diagonal */
.ulu-cabin-booking-demo::before {
    /* Crea una capa decorativa */
    content: "";

    /* Posición absoluta */
    position: absolute;

    /* Tamaño amplio */
    inset: -40%;

    /* Brillo diagonal */
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.10) 48%,
        transparent 62%
    );

    /* Animación de brillo */
    animation: uluCabinBookingShine 7s linear infinite;

    /* No bloquea clics */
    pointer-events: none;
}


/* =========================================================
   HEADER DEL PANEL
========================================================= */

.ulu-cabin-booking-demo__header {
    /* Capa superior */
    position: relative;

    /* Nivel visual */
    z-index: 2;

    /* Distribución horizontal */
    display: flex;

    /* Separación entre título y estado */
    justify-content: space-between;

    /* Centrado vertical */
    align-items: center;

    /* Separación inferior */
    margin-bottom: 16px;

    /* Separación entre elementos si se comprime */
    gap: 14px;
}

.ulu-cabin-booking-demo__header strong {
    /* Título interno */
    display: block;

    /* Color blanco */
    color: #ffffff;

    /* Peso fuerte */
    font-weight: 900;

    /* Tamaño */
    font-size: 1rem;
}

.ulu-cabin-booking-demo__header small {
    /* Subtítulo */
    display: block;

    /* Color blanco suave */
    color: rgba(255, 255, 255, 0.58);

    /* Tamaño */
    font-size: 0.76rem;

    /* Separación superior */
    margin-top: 2px;
}

.ulu-cabin-booking-demo__header span {
    /* Estado tipo píldora */
    display: inline-flex;

    /* Evita salto de línea */
    white-space: nowrap;

    /* Fondo verde translúcido */
    background: rgba(52, 199, 89, 0.16);

    /* Color verde claro */
    color: #86efac;

    /* Borde */
    border: 1px solid rgba(134, 239, 172, 0.18);

    /* Redondeado */
    border-radius: 999px;

    /* Espaciado */
    padding: 8px 10px;

    /* Tamaño */
    font-size: 0.72rem;

    /* Peso */
    font-weight: 900;
}


/* =========================================================
   CUERPO DEL PANEL
========================================================= */

.ulu-cabin-booking-demo__body {
    /* Capa superior */
    position: relative;

    /* Nivel visual */
    z-index: 2;

    /* Layout de dos columnas dentro del panel */
    display: grid;

    /* Calendario más amplio, resumen más compacto */
    grid-template-columns: 1.1fr 0.9fr;

    /* Separación */
    gap: 14px;
}


/* =========================================================
   TARJETA DEL CALENDARIO
========================================================= */

.ulu-cabin-calendar-card {
    /* Fondo glass interno */
    background: rgba(255, 255, 255, 0.10);

    /* Borde */
    border: 1px solid rgba(255, 255, 255, 0.12);

    /* Bordes */
    border-radius: 22px;

    /* Espaciado */
    padding: 14px;

    /* Sombra interna */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.ulu-cabin-calendar-card__top {
    /* Distribución horizontal */
    display: flex;

    /* Separa mes y noches */
    justify-content: space-between;

    /* Centrado vertical */
    align-items: center;

    /* Separación inferior */
    margin-bottom: 12px;
}

.ulu-cabin-calendar-card__top strong {
    /* Mes */
    color: #ffffff;

    /* Peso */
    font-weight: 900;

    /* Tamaño */
    font-size: 0.92rem;
}

.ulu-cabin-calendar-card__top span {
    /* Noches */
    color: rgba(255, 255, 255, 0.62);

    /* Tamaño */
    font-size: 0.74rem;

    /* Peso */
    font-weight: 800;
}


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

.ulu-cabin-calendar-week {
    /* Grid de 7 columnas */
    display: grid;

    /* Siete días */
    grid-template-columns: repeat(7, 1fr);

    /* Separación */
    gap: 7px;

    /* Margen inferior */
    margin-bottom: 8px;
}

.ulu-cabin-calendar-week span {
    /* Texto centrado */
    text-align: center;

    /* Color tenue */
    color: rgba(255, 255, 255, 0.50);

    /* Tamaño */
    font-size: 0.7rem;

    /* Peso */
    font-weight: 900;
}


/* =========================================================
   DÍAS DEL CALENDARIO
========================================================= */

.ulu-cabin-calendar-days {
    /* Grid de 7 columnas */
    display: grid;

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

    /* Separación */
    gap: 7px;
}

.ulu-cabin-day {
    /* Altura de cada día */
    min-height: 38px;

    /* Fondo default */
    background: rgba(255, 255, 255, 0.08);

    /* Borde */
    border: 1px solid rgba(255, 255, 255, 0.10);

    /* Redondeado */
    border-radius: 13px;

    /* Centrado */
    display: grid;

    /* Centrado perfecto */
    place-items: center;

    /* Color */
    color: rgba(255, 255, 255, 0.72);

    /* Tamaño */
    font-size: 0.78rem;

    /* Peso */
    font-weight: 900;

    /* Animación de entrada */
    animation: uluCabinDayIn 0.42s ease forwards;

    /* Transición suave */
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border 0.22s ease;
}

.ulu-cabin-day.is-available {
    /* Disponible */
    background: rgba(52, 199, 89, 0.12);

    /* Borde verde */
    border-color: rgba(134, 239, 172, 0.18);

    /* Color */
    color: #bbf7d0;
}

.ulu-cabin-day.is-selected {
    /* Seleccionado con degradado */
    background: linear-gradient(135deg, #007aff, #7c3aed);

    /* Borde activo */
    border-color: rgba(255, 255, 255, 0.22);

    /* Color */
    color: #ffffff;

    /* Sombra */
    box-shadow: 0 12px 22px rgba(0, 122, 255, 0.22);

    /* Levanta un poco */
    transform: translateY(-2px);
}

.ulu-cabin-day.is-booked {
    /* Ocupado */
    background: rgba(255, 45, 85, 0.12);

    /* Borde rojo */
    border-color: rgba(255, 45, 85, 0.20);

    /* Color */
    color: rgba(255, 255, 255, 0.44);

    /* Línea visual */
    text-decoration: line-through;
}

.ulu-cabin-day.is-empty {
    /* Días vacíos al inicio del calendario */
    opacity: 0;

    /* No ocupa interacción */
    pointer-events: none;
}


/* =========================================================
   LEYENDA DEL CALENDARIO
========================================================= */

.ulu-cabin-calendar-legend {
    /* Distribución */
    display: flex;

    /* Permite salto de línea */
    flex-wrap: wrap;

    /* Separación */
    gap: 10px;

    /* Separación superior */
    margin-top: 13px;
}

.ulu-cabin-calendar-legend span {
    /* Distribución interna */
    display: inline-flex;

    /* Centrado */
    align-items: center;

    /* Separación icono-texto */
    gap: 6px;

    /* Color */
    color: rgba(255, 255, 255, 0.58);

    /* Tamaño */
    font-size: 0.7rem;

    /* Peso */
    font-weight: 800;
}

.ulu-cabin-calendar-legend i {
    /* Punto de color */
    width: 9px;
    height: 9px;

    /* Forma */
    border-radius: 50%;

    /* Muestra como bloque */
    display: inline-block;
}

.ulu-cabin-calendar-legend .is-available {
    background: #34c759;
}

.ulu-cabin-calendar-legend .is-selected {
    background: #007aff;
}

.ulu-cabin-calendar-legend .is-booked {
    background: #ff2d55;
}


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

.ulu-cabin-summary-card {
    /* Fondo glass */
    background: rgba(255, 255, 255, 0.10);

    /* Borde */
    border: 1px solid rgba(255, 255, 255, 0.12);

    /* Redondeado */
    border-radius: 22px;

    /* Espaciado */
    padding: 14px;

    /* Layout vertical */
    display: flex;

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

    /* Separación */
    gap: 12px;

    /* Sombra interna */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}


/* =========================================================
   CABAÑA SELECCIONADA
========================================================= */

.ulu-cabin-selected {
    /* Distribución */
    display: flex;

    /* Centrado */
    align-items: center;

    /* Separación */
    gap: 12px;

    /* Fondo */
    background: rgba(255, 255, 255, 0.08);

    /* Borde */
    border: 1px solid rgba(255, 255, 255, 0.10);

    /* Redondeado */
    border-radius: 18px;

    /* Espaciado */
    padding: 12px;
}

.ulu-cabin-selected__image {
    /* Tamaño */
    width: 52px;
    height: 52px;

    /* Bordes */
    border-radius: 18px;

    /* Fondo visual */
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.40), transparent 34%),
        linear-gradient(135deg, #007aff, #7c3aed);

    /* Centrado */
    display: grid;

    /* Centrado perfecto */
    place-items: center;

    /* Sombra */
    box-shadow: 0 14px 24px rgba(0, 122, 255, 0.20);
}

.ulu-cabin-selected__image span {
    /* Inicial */
    color: #ffffff;

    /* Tamaño */
    font-size: 1.2rem;

    /* Peso */
    font-weight: 900;
}

.ulu-cabin-selected span {
    /* Etiqueta */
    display: block;

    /* Color */
    color: rgba(255, 255, 255, 0.54);

    /* Tamaño */
    font-size: 0.72rem;

    /* Peso */
    font-weight: 800;

    /* Separación */
    margin-bottom: 3px;
}

.ulu-cabin-selected strong {
    /* Nombre cabaña */
    display: block;

    /* Color */
    color: #ffffff;

    /* Tamaño */
    font-size: 0.93rem;

    /* Peso */
    font-weight: 900;
}

.ulu-cabin-selected small {
    /* Capacidad */
    display: block;

    /* Color */
    color: rgba(255, 255, 255, 0.54);

    /* Tamaño */
    font-size: 0.72rem;

    /* Separación */
    margin-top: 3px;
}


/* =========================================================
   PASOS DE RESERVACIÓN
========================================================= */

.ulu-cabin-booking-steps {
    /* Layout vertical */
    display: flex;

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

    /* Separación */
    gap: 8px;
}

.ulu-cabin-step {
    /* Distribución */
    display: flex;

    /* Centrado */
    align-items: center;

    /* Separación */
    gap: 9px;

    /* Fondo */
    background: rgba(255, 255, 255, 0.07);

    /* Borde */
    border: 1px solid rgba(255, 255, 255, 0.09);

    /* Redondeado */
    border-radius: 14px;

    /* Espaciado */
    padding: 9px;

    /* Color */
    color: rgba(255, 255, 255, 0.58);

    /* Tamaño */
    font-size: 0.74rem;

    /* Peso */
    font-weight: 800;

    /* Transición */
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.ulu-cabin-step i {
    /* Círculo del número */
    width: 22px;
    height: 22px;

    /* Forma */
    border-radius: 50%;

    /* Fondo */
    background: rgba(255, 255, 255, 0.10);

    /* Centrado */
    display: grid;

    /* Centrado exacto */
    place-items: center;

    /* Quita cursiva */
    font-style: normal;

    /* Tamaño */
    font-size: 0.68rem;

    /* Peso */
    font-weight: 900;
}

.ulu-cabin-step.is-active {
    /* Fondo activo */
    background: rgba(0, 122, 255, 0.18);

    /* Borde activo */
    border-color: rgba(0, 122, 255, 0.24);

    /* Color */
    color: #ffffff;

    /* Movimiento */
    transform: translateX(3px);
}

.ulu-cabin-step.is-active i {
    /* Número activo */
    background: linear-gradient(135deg, #007aff, #7c3aed);

    /* Color */
    color: #ffffff;
}


/* =========================================================
   CAJA DE PRECIOS
========================================================= */

.ulu-cabin-price-box {
    /* Grid */
    display: grid;

    /* Dos filas */
    grid-template-columns: 1fr;

    /* Separación */
    gap: 8px;
}

.ulu-cabin-price-box div {
    /* Distribución */
    display: flex;

    /* Separación */
    justify-content: space-between;

    /* Centrado */
    align-items: center;

    /* Fondo */
    background: rgba(255, 255, 255, 0.07);

    /* Borde */
    border: 1px solid rgba(255, 255, 255, 0.09);

    /* Redondeado */
    border-radius: 14px;

    /* Espaciado */
    padding: 10px;
}

.ulu-cabin-price-box span {
    /* Texto */
    color: rgba(255, 255, 255, 0.58);

    /* Tamaño */
    font-size: 0.72rem;

    /* Peso */
    font-weight: 800;
}

.ulu-cabin-price-box strong {
    /* Precio */
    color: #ffffff;

    /* Tamaño */
    font-size: 0.82rem;

    /* Peso */
    font-weight: 900;
}


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

.ulu-cabin-booking-button {
    /* Ancho completo */
    width: 100%;

    /* Sin borde */
    border: 0;

    /* Redondeado */
    border-radius: 999px;

    /* Espaciado */
    padding: 12px 14px;

    /* Fondo */
    background: linear-gradient(135deg, #007aff, #7c3aed);

    /* Color */
    color: #ffffff;

    /* Peso */
    font-weight: 900;

    /* Cursor */
    cursor: pointer;

    /* Sombra */
    box-shadow: 0 14px 24px rgba(0, 122, 255, 0.20);

    /* Transición */
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.ulu-cabin-booking-button:hover {
    /* Levanta el botón */
    transform: translateY(-2px);

    /* Más sombra */
    box-shadow: 0 18px 30px rgba(0, 122, 255, 0.26);
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes uluCabinBookingShine {
    0% {
        transform: translateX(-35%);
    }

    100% {
        transform: translateX(35%);
    }
}

@keyframes uluCabinDayIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


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

@media (max-width: 980px) {
    .ulu-service-card--cabins {
        /* En tablet se vuelve una columna */
        grid-template-columns: 1fr;
    }

    .ulu-cabin-booking-demo__body {
        /* El panel interno también baja a una columna */
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ulu-cabin-calendar-days {
        /* Menos separación en móvil */
        gap: 5px;
    }

    .ulu-cabin-day {
        /* Días más pequeños */
        min-height: 34px;

        /* Menor tamaño */
        font-size: 0.72rem;
    }

    .ulu-cabin-booking-demo__header {
        /* Apila título y estado */
        flex-direction: column;

        /* Alinea a la izquierda */
        align-items: flex-start;
    }
}

/* =========================================================
   SEPARACIÓN SUPERIOR DE LA TARJETA DE CABAÑAS
   Da aire entre las dos tarjetas superiores
   y la tarjeta grande de reservación.
========================================================= */

.ulu-service-card--cabins {
    /* Separación entre la fila superior y esta tarjeta */
    margin-top: 42px;
}

/* En móviles reducimos un poco la separación */
@media (max-width: 640px) {
    .ulu-service-card--cabins {
        margin-top: 28px;
    }
}