/* Carrusel de profundidad: lo básico del componente viene de vendor/carrusel.css (el de React Bits). Aquí, solo lo que lo viste con los colores y las
   tarjetas de VYDA. Se carga DESPUÉS de vendor/carrusel.css. */

.carrusel-profundidad {
    position: relative;
    width: 100%;
}

/* Sin el paquete (no cargó): las tarjetas, una bajo otra */
.carrusel-profundidad--lista {
    display: grid;
    gap: 0.6rem;
}

.depth-carousel {
    min-height: 0;
}

.depth-carousel:focus-visible {
    outline-color: var(--activo-fondo);
}

.depth-carousel__stage {
    inset: 0 0 30px 0; /* abajo queda sitio para los puntos */
}

/* Cartas de cristal (como las tarjetas de base.css): reflejo, borde fino y desenfoque de lo que hay detrás */
.depth-carousel__card {
    background:
        var(--vidrio-superficie),
        color-mix(in srgb, var(--fondo) 45%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    box-shadow:
        inset 0 1px 0 var(--vidrio-luz),
        0 26px 50px -24px color-mix(in srgb, var(--texto) 38%, transparent); /* la sombra sale del tema: con un tema claro, una negra sucia todo */
}

/* La tarjeta de la app ocupa toda la carta y se desplaza por dentro si es más alta que ella */
.depth-carousel__contenido {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    cursor: default;
}

.depth-carousel__contenido > * {
    box-sizing: border-box;
    min-height: 100%;
    margin: 0;
    align-content: center; /* la carta es grande: el contenido queda en el centro */
}

/* Las tarjetas de la app (agenda, recordatorios, rachas) dentro de una carta: sin el vidrio borroso (no se lleva bien con el 3D) ni sus bordes */
.depth-carousel .item-agenda,
.depth-carousel .recordar-fila,
.depth-carousel .habito-fila,
.depth-carousel .tarjeta-juego {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.depth-carousel .item-agenda {
    box-shadow: inset 5px 0 0 var(--acento);
}

.depth-carousel .recordar-fila,
.depth-carousel .habito-fila,
.depth-carousel .tarjeta-juego {
    box-shadow: none;
}

.depth-carousel .item-agenda.estado-en-curso {
    outline-offset: -3px;
}

.depth-carousel__arrow {
    top: calc(50% - 15px);
    left: auto;
    color: var(--texto);
    background-color: color-mix(in srgb, var(--panel, #12141a) 70%, transparent);
    border-color: var(--vidrio-borde);
}

.depth-carousel__arrow--prev {
    left: 0;
}

.depth-carousel__arrow--next {
    right: 0;
}

.depth-carousel__arrow:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--panel, #12141a) 90%, transparent);
    border-color: var(--activo-fondo);
}

.depth-carousel__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.depth-carousel__dots {
    bottom: 4px;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: var(--texto);
    background-color: color-mix(in srgb, var(--panel, #0e1016) 55%, transparent);
}

.depth-carousel__dots--cuenta {
    font-variant-numeric: tabular-nums;
}

.depth-carousel__dot {
    background: color-mix(in srgb, var(--texto) 32%, transparent);
}

.depth-carousel__dot.is-active {
    background: var(--activo-fondo);
}

.agenda-carrusel,
.recordar-carrusel,
.rachas-carrusel,
.juegos-carrusel {
    list-style: none;
}