/* ---------------------------------------------------------------
   6. AVISOS  –  carrusel responsivo (versión final)
------------------------------------------------------------------*/

/* 6-A. Altura del <section class="avisos">  –  móvil-first
        XS (< 576 px)          → 70 vh
        SM (≥ 576 px)          → 80 vh
        MD (≥ 768 px)          → 90 vh
        LG (≥ 992 px)          → 100 vh
        XL (≥ 1200 px)         → 120 vh
------------------------------------------------------------------*/
section.avisos {
    /* XS */
    min-height: 0 !important;
    /* anula 100 vh global */
    height: 40vh !important;
    padding: 0;
}

@media (min-width:576px) {

    /* SM */
    section.avisos {
        height: 50vh !important;
    }
}

@media (min-width:768px) {

    /* MD */
    section.avisos {
        height: 65vh !important;
    }
}

@media (min-width:992px) {

    /* LG */
    section.avisos {
        height: 90vh !important;
    }
}

@media (min-width:1200px) {

    /* XL */
    section.avisos {
        height: 100vh !important;
    }
}

/* 6-B. Contenedor principal generado por PHP/JS */
.avisos-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* 6-C. Pista que desliza los avisos */
.avisos-track {
    display: flex;
    height: 100%;
    transition: transform .6s ease;
}

/* 6-D. Cada slide */
.avisos-slide {
    min-width: 100%;
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 6-E. Imagen – SIEMPRE visible completa, nunca recortada  */
.avisos-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* mantiene proporción, sin cortes */
    object-position: center;
}

/*  Si alguna diapositiva debe rellenar y puede recortarse,
    añade   class="fill-cover"   al <img> de ese aviso              */
.fill-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 6-F. Placeholder “Sin avisos” (cuando no hay registros válidos) */
.placeholder {
    background: #f8d7da;
    border: .125rem dashed #dc3545;
}

.placeholder span {
    color: #dc3545;
    font-size: clamp(1.6rem, 3.8vw, 2.2rem);
    font-weight: 700;
}

/* 6-G. Flechas de navegación */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(2.4rem, 4.4vw, 3rem);
    height: clamp(2.4rem, 4.4vw, 3rem);
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-prev {
    left: .6rem;
}

.nav-next {
    right: .6rem;
}

.nav-btn:hover {
    background: rgba(0, 0, 0, .6);
}

/* 6-H. Indicadores (puntitos centrados) */
.indicators {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .6rem;
}

.indicators span {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: #00a99d;
    opacity: .35;
    cursor: pointer;
    transition: opacity .3s;
}

.indicators .active {
    opacity: 1;
}