/* Base */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.dl-horizontal dt {
    white-space: normal;
}

input,
select,
textarea {
    max-width: 280px;
}

/* Grid base y responsivo */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* Navbar animación */
.navbar-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.navbar-visible {
    opacity: 1;
    visibility: visible;
}

/* Body y html ajustes */
body {
    padding-top: 80px;
    padding: 2rem;
}

html {
    scroll-padding-top: 80px;
}

/* Carrusel base */
.carrusel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 1rem;
    position: relative;
}

    .carrusel::-webkit-scrollbar {
        display: none;
    }

.carrusel {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Card tamaño fijo uniforme */
.card-actividad {
    width: 280px;
    height: 400px;
    background: #f8f9fa;
    border-radius: 0.5rem;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

    /* Hover efecto */
    .card-actividad:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }

    /* Imagen centrada en la tarjeta */
    .card-actividad .card-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1 1 auto;
    }

        /* Título */
        .card-actividad .card-body h4 {
            margin: 0.5rem 0;
            font-size: 1.1rem;
        }

        /* Texto truncado */
        .card-actividad .card-body p {
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

    /* Footer con botón completo */
    .card-actividad .card-footer {
        padding: 1rem;
    }

/* Botones carrusel en escritorio */
.carrusel-btn {
    background: #E0E0E0;
    color: #757575;
    border: none;
    width: 2rem;
    min-height: 320px;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    position: relative;
    z-index: 2;
}

    .carrusel-btn:hover {
        background: #CCCCCC;
    }

    .carrusel-btn svg {
        fill: #757575;
    }

/* Responsive: tarjetas 100% ancho en móviles */
@media (max-width: 576px) {
    .card-actividad {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        margin: 0 auto;
    }

    .carrusel {
        scroll-snap-type: x mandatory;
    }

    .card-actividad {
        scroll-snap-align: center;
    }

    /* Botones circulares flotantes sobre el carrusel */
    .carrusel-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        min-height: auto;
        border-radius: 50%;
        background: rgba(0,0,0,0.4) !important;
        color: white !important;
        z-index: 10 !important;
        padding: 0;
    }

        .carrusel-btn.left {
            left: 0.3rem;
        }

        .carrusel-btn.right {
            right: 0.3rem;
        }

        .carrusel-btn:hover {
            background: rgba(0,0,0,0.6) !important;
        }

        .carrusel-btn svg {
            fill: white !important;
        }
}

/* Responsive: tarjetas 45% en tablets */
@media (min-width: 577px) and (max-width: 768px) {
    .card-actividad {
        width: 45% !important;
        max-width: 45% !important;
    }
}