/* =========================================================
   DASHBOARD ANIMADO DE RESERVAS
   Archivo: reservas_dashboard_card.css
   Uso: estilos visuales de la tarjeta grande tipo iOS/glass.
========================================================= */


/* =========================================================
   SECCIÓN GENERAL
========================================================= */

.ulu-dashboard-showcase {
    /* Espacio superior e inferior para separar la sección del carrusel y del grid */
    padding: 42px 0 54px;

    /* Posición relativa para permitir efectos decorativos internos */
    position: relative;

    /* Evita que los brillos decorativos generen scroll horizontal */
    overflow: hidden;
}


/* =========================================================
   TARJETA PRINCIPAL
========================================================= */

.ulu-dashboard-card {
    /* Posición relativa para colocar brillos dentro de la tarjeta */
    position: relative;

    /* Distribución en dos columnas: texto + dashboard */
    display: grid;

    /* La columna derecha es ligeramente más grande para destacar el dashboard */
    grid-template-columns: 0.9fr 1.15fr;

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

    /* Alinea verticalmente el contenido */
    align-items: center;

    /* Espaciado interno amplio */
    padding: 42px;

    /* Bordes grandes tipo tarjeta iOS */
    border-radius: 32px;

    /* Fondo claro tipo glass sin efecto tornasol */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.78),
            rgba(245, 247, 250, 0.58)
        );

    /* Borde sutil tipo cristal */
    border: 1px solid rgba(255, 255, 255, 0.82);

    /* Sombra amplia similar a la tarjeta de la imagen */
    box-shadow:
        0 34px 90px rgba(15, 23, 42, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    /* Efecto glass / blur */
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);

    /* Evita que elementos decorativos se salgan visualmente */
    overflow: hidden;
}
/*aqui*/

/* =========================================================
   BRILLOS DECORATIVOS
========================================================= */

.ulu-dashboard-card__glow {
    /* Posición absoluta dentro de la tarjeta */
    position: absolute;

    /* Forma circular */
    border-radius: 999px;

    /* Aplica desenfoque a los brillos */
    filter: blur(18px);

    /* Opacidad baja para mantener el glass limpio */
    opacity: 0.28;

    /* Evita interferir con clics */
    pointer-events: none;

    /* Animación suave flotante */
    animation: uluDashboardGlowFloat 8s ease-in-out infinite alternate;
}

.ulu-dashboard-card__glow--one {
    width: 190px;
    height: 190px;
    left: -54px;
    bottom: -64px;

    /* Brillo blanco/gris neutro */
    background: rgba(255, 255, 255, 0.38);
}

.ulu-dashboard-card__glow--two {
    width: 220px;
    height: 220px;
    right: -72px;
    top: -70px;

    /* Brillo neutro sin rosa */
    background: rgba(226, 232, 240, 0.30);

    animation-delay: 1.2s;
}

.ulu-dashboard-card__glow--three {
    width: 150px;
    height: 150px;
    right: 32%;
    bottom: -80px;

    /* Brillo neutro sin verde */
    background: rgba(255, 255, 255, 0.24);

    animation-delay: 2s;
}

/* =========================================================
   CONTENIDO IZQUIERDO
========================================================= */

.ulu-dashboard-card__content {
    /* Mantiene el texto por encima de los brillos */
    position: relative;

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

.ulu-dashboard-card__eyebrow {
    /* Texto pequeño superior */
    display: inline-flex;

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

    /* Separación interior */
    padding: 8px 13px;

    /* Borde redondeado */
    border-radius: 999px;

    /* Fondo azul translúcido */
    background: rgba(0, 122, 255, 0.10);

    /* Borde suave */
    border: 1px solid rgba(0, 122, 255, 0.14);

    /* Color principal */
    color: #0f62fe;

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

    /* Texto en mayúsculas */
    text-transform: uppercase;

    /* Espaciado entre letras */
    letter-spacing: 0.13em;

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

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

.ulu-dashboard-card__content h2 {
    /* Elimina margen superior */
    margin: 0;

    /* Tamaño llamativo */
    font-size: clamp(2rem, 4vw, 3.35rem);

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

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

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

    /* Espaciado inferior */
    margin-bottom: 18px;

    /* Balance visual del texto */
    text-wrap: balance;
}

.ulu-dashboard-card__content p {
    /* Elimina margen superior */
    margin: 0;

    /* Ancho máximo cómodo */
    max-width: 560px;

    /* Color gris azulado */
    color: #536071;

    /* Tamaño legible */
    font-size: 1.02rem;

    /* Altura de línea cómoda */
    line-height: 1.75;
}


/* =========================================================
   KPIS
========================================================= */

.ulu-dashboard-kpis {
    /* Distribución horizontal */
    display: grid;

    /* Tres columnas flexibles */
    grid-template-columns: repeat(3, minmax(0, 1fr));

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

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

.ulu-dashboard-kpi {
    /* Fondo cristalino */
    background: rgba(255, 255, 255, 0.72);

    /* Borde suave */
    border: 1px solid rgba(15, 23, 42, 0.06);

    /* Bordes redondeados */
    border-radius: 20px;

    /* Espaciado interno */
    padding: 15px 14px;

    /* Sombra ligera */
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.ulu-dashboard-kpi strong {
    /* Número principal */
    display: block;

    /* Tamaño destacado */
    font-size: 1.28rem;

    /* Color principal */
    color: #111827;

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

    /* Separación inferior mínima */
    margin-bottom: 3px;
}

.ulu-dashboard-kpi span {
    /* Texto descriptivo */
    display: block;

    /* Tamaño pequeño */
    font-size: 0.77rem;

    /* Color secundario */
    color: #667085;

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


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

.ulu-dashboard-actions {
    /* Distribución horizontal */
    display: flex;

    /* Permite bajar botones en móvil */
    flex-wrap: wrap;

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

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

.ulu-dashboard-btn {
    /* Hace que el botón se comporte como botón visual */
    display: inline-flex;

    /* Centra el texto */
    align-items: center;
    justify-content: center;

    /* Espaciado interno */
    padding: 13px 18px;

    /* Bordes redondeados */
    border-radius: 999px;

    /* Quita subrayado */
    text-decoration: none;

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

    /* Peso */
    font-weight: 800;

    /* Transiciones suaves */
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.ulu-dashboard-btn:hover {
    /* Levanta el botón al pasar el cursor */
    transform: translateY(-2px);
}

.ulu-dashboard-btn--primary {
    /* Degradado llamativo */
    background: linear-gradient(135deg, #007aff, #7c3aed, #ff2d55);

    /* Color de texto */
    color: #ffffff;

    /* Sombra colorida */
    box-shadow: 0 18px 35px rgba(0, 122, 255, 0.25);
}

.ulu-dashboard-btn--ghost {
    /* Fondo claro */
    background: rgba(255, 255, 255, 0.82);

    /* Color de texto */
    color: #1f2937;

    /* Borde */
    border: 1px solid rgba(15, 23, 42, 0.08);

    /* Sombra suave */
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   PANEL DERECHO DEL DASHBOARD
========================================================= */

.ulu-dashboard-panel {
    /* Capa superior */
    position: relative;
    z-index: 2;

    /* Fondo oscuro elegante */
    background:
        radial-gradient(circle at top left, rgba(0, 122, 255, 0.32), transparent 34%),
        radial-gradient(circle at bottom right, rgba(255, 45, 85, 0.22), transparent 35%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.94));

    /* Borde redondeado */
    border-radius: 28px;

    /* Espaciado interno */
    padding: 18px;

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

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

    /* Oculta desbordes */
    overflow: hidden;

    /* Animación flotante del panel */
    animation: uluDashboardPanelFloat 5.5s ease-in-out infinite;
}

.ulu-dashboard-panel::before {
    /* Capa de brillo diagonal */
    content: "";

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

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

    /* Degradado brillante */
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.12) 48%,
        transparent 62%
    );

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

    /* No interfiere con clics */
    pointer-events: none;
}


/* =========================================================
   BARRA SUPERIOR DEL PANEL
========================================================= */

.ulu-dashboard-panel__top {
    /* Capa superior */
    position: relative;
    z-index: 2;

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

    /* Espacio entre elementos */
    align-items: center;
    justify-content: space-between;

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

.ulu-dashboard-window-dots {
    /* Distribución de puntos */
    display: flex;

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

.ulu-dashboard-window-dots span {
    /* Tamaño del punto */
    width: 11px;
    height: 11px;

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

    /* Fondo base */
    background: rgba(255, 255, 255, 0.34);
}

.ulu-dashboard-window-dots span:nth-child(1) {
    background: #ff5f57;
}

.ulu-dashboard-window-dots span:nth-child(2) {
    background: #ffbd2e;
}

.ulu-dashboard-window-dots span:nth-child(3) {
    background: #28c840;
}

.ulu-dashboard-live {
    /* Texto de estado */
    display: inline-flex;

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

    /* Separación entre punto y texto */
    gap: 8px;

    /* Espaciado interno */
    padding: 7px 10px;

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

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

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

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

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

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

.ulu-dashboard-live i {
    /* Punto verde */
    width: 8px;
    height: 8px;

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

    /* Color */
    background: #34c759;

    /* Sombra brillante */
    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0.15);

    /* Animación de pulso */
    animation: uluDashboardPulse 1.7s ease-in-out infinite;
}


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

.ulu-dashboard-panel__header {
    /* Capa superior */
    position: relative;
    z-index: 2;

    /* Distribución */
    display: flex;

    /* Espacio entre texto y dato */
    justify-content: space-between;

    /* Alineación */
    align-items: flex-start;

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

    /* Espacio inferior */
    margin-bottom: 14px;
}

.ulu-dashboard-panel__header span {
    /* Texto pequeño */
    display: block;

    /* Color claro */
    color: rgba(255, 255, 255, 0.62);

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

    /* Peso */
    font-weight: 700;

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

.ulu-dashboard-panel__header h3 {
    /* Título interno */
    margin: 0;

    /* Color */
    color: #ffffff;

    /* Tamaño */
    font-size: clamp(1.25rem, 2.8vw, 1.9rem);

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

.ulu-dashboard-panel__header strong {
    /* Dato destacado */
    display: inline-flex;

    /* Centrado */
    align-items: center;

    /* No permite partir el texto */
    white-space: nowrap;

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

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

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

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

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

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


/* =========================================================
   BOTONES DEL TIPO DE GRÁFICA
========================================================= */

.ulu-chart-switch {
    /* Capa superior */
    position: relative;
    z-index: 2;

    /* Grid de tres botones */
    display: grid;
    grid-template-columns: repeat(3, 1fr);

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

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

    /* Espaciado interno */
    padding: 6px;

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

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

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

.ulu-chart-switch__btn {
    /* Quita estilo nativo */
    border: 0;

    /* Fondo transparente */
    background: transparent;

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

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

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

    /* Cursor */
    cursor: pointer;

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

    /* Peso */
    font-weight: 900;

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

.ulu-chart-switch__btn:hover {
    /* Pequeño crecimiento */
    transform: translateY(-1px);

    /* Fondo al pasar cursor */
    background: rgba(255, 255, 255, 0.08);
}

.ulu-chart-switch__btn.is-active {
    /* Fondo activo */
    background: linear-gradient(135deg, #007aff, #7c3aed);

    /* Color activo */
    color: #ffffff;

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


/* =========================================================
   CANVAS DE GRÁFICA
========================================================= */

.ulu-dashboard-chart-wrap {
    /* Capa superior */
    position: relative;
    z-index: 2;

    /* Altura del área de gráfica */
    height: 260px;

    /* Fondo translúcido */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045));

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

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

    /* Oculta desbordes */
    overflow: hidden;

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

.ulu-dashboard-chart-wrap canvas {
    /* Ocupa todo el ancho */
    width: 100%;

    /* Ocupa todo el alto */
    height: 100%;

    /* Evita espacios raros */
    display: block;
}


/* =========================================================
   MINI TARJETAS INFERIORES
========================================================= */

.ulu-dashboard-mini-grid {
    /* Capa superior */
    position: relative;
    z-index: 2;

    /* Tres columnas */
    display: grid;
    grid-template-columns: repeat(3, 1fr);

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

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

.ulu-dashboard-mini-card {
    /* Fondo translúcido */
    background: rgba(255, 255, 255, 0.10);

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

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

    /* Espaciado */
    padding: 13px 12px;
}

.ulu-dashboard-mini-card span {
    /* Texto pequeño */
    display: block;

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

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

    /* Peso */
    font-weight: 700;

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

.ulu-dashboard-mini-card strong {
    /* Texto principal */
    display: block;

    /* Color */
    color: #ffffff;

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

    /* Peso */
    font-weight: 900;

    /* Evita saltos feos */
    line-height: 1.2;
}


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

@keyframes uluDashboardGlowFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(18px, -16px, 0) scale(1.08);
    }
}

@keyframes uluDashboardPanelFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes uluDashboardShine {
    0% {
        transform: translateX(-35%) rotate(0deg);
    }

    100% {
        transform: translateX(35%) rotate(0deg);
    }
}

@keyframes uluDashboardPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.82);
        opacity: 0.72;
    }
}


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

@media (max-width: 980px) {
    .ulu-dashboard-card {
        /* Cambia a una sola columna en tablets y móviles */
        grid-template-columns: 1fr;

        /* Reduce padding */
        padding: 30px;

        /* Reduce separación */
        gap: 28px;
    }

    .ulu-dashboard-kpis {
        /* Mantiene tres columnas si hay espacio */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .ulu-dashboard-showcase {
        /* Reduce espacio vertical en móvil */
        padding: 30px 0 42px;
    }

    .ulu-dashboard-card {
        /* Bordes un poco menores */
        border-radius: 26px;

        /* Padding móvil */
        padding: 22px;
    }

    .ulu-dashboard-kpis {
        /* Una columna para que no se comprima */
        grid-template-columns: 1fr;
    }

    .ulu-dashboard-panel__header {
        /* Apila título y dato */
        flex-direction: column;
    }

    .ulu-dashboard-chart-wrap {
        /* Menor altura en móvil */
        height: 230px;
    }

    .ulu-dashboard-mini-grid {
        /* Una columna en pantallas pequeñas */
        grid-template-columns: 1fr;
    }
}