/* ===========================================================
   CARRUSEL DE EVIDENCIAS
   =========================================================== */
.carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    /* A pedido: que quede COMPACTO y no ocupe todo el alto disponible
       (antes se estiraba con flex:1 para llenar .evidence-section).
       Ahora tiene un alto fijo y pequeño; si sobra espacio debajo en
       .evidence-section, simplemente queda en blanco — mejor eso a que
       el carrusel se vea gigante. */
    flex: 0 0 auto;
    height: 130px;
}

.carousel-viewport {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    height: 100%;
    list-style: none;
    transition: transform 0.4s ease;
}

.carousel-slide {
    /* Ancho de cada foto: 100% dividido entre cuántas se ven a la vez
       (--carousel-visibles la define Carousel.js según el atributo
       data-visible del HTML — ver index.html). Si no se definió, el
       valor de respaldo es 1 (una foto ocupando todo el ancho). */
    flex: 0 0 calc(100% / var(--carousel-visibles, 1));
    height: 100%;
    padding: 0 4px; /* separación visual entre fotos, sin usar "gap"
                        (que complicaría el cálculo del desplazamiento) */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Contenedor de la foto en sí (sin la leyenda) — cada foto tiene sus
   PROPIAS esquinas redondeadas, a diferencia de antes (donde una sola
   foto grande llenaba todo el viewport). */
.carousel-item {
    flex: 1;
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #F1F3F4;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta manteniendo proporción, tamaño siempre igual */
    display: block;
}

/* Leyenda (nombre del PDV + ciudad/canal) debajo de cada foto */
.carousel-caption {
    flex-shrink: 0;
    padding-top: 4px;
    line-height: 1.25;
}

.carousel-caption strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* si el nombre es muy largo, se corta con "..." en vez de desbordar */
}

.carousel-caption span {
    display: block;
    font-size: 10px;
    color: #80868B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Flechas --- */
.carousel-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background-color: #FFFFFF;
    color: #017d03;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.carousel-btn svg {
    width: 16px;
    height: 16px;
}

.carousel-btn:hover {
    background-color: #F1F3F4;
    transform: scale(1.05);
}

.carousel-btn:focus-visible {
    outline: 2px solid #017d03;
    outline-offset: 2px;
}

/* --- Puntos de navegación ---
   OJO: este carrusel de evidencias ya NO los usa (solo flechas, ver
   index.html) — estas reglas quedan para cualquier OTRO carrusel futuro
   que sí quiera puntos (basta con agregarle su <div class="carousel-dots">). */
.carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none; /* Deja pasar clics salvo en los puntos mismos */
}

.carousel-dot {
    pointer-events: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.carousel-dot.is-active {
    background-color: #017d03;
    transform: scale(1.2);
}

/* ===========================================================================
   MODO CELULAR (max-width: 768px) — mismo punto de quiebre que styles.css
   ===========================================================================
   BUG QUE ESTO ARREGLA: antes, en celular, .carousel seguía siendo una
   fila (flecha | imagen | flecha) con las 2 flechas ocupando 40px cada
   una. En una pantalla angosta eso le dejaba MUY poco ancho a la imagen
   (ej. en un celular de 375px de ancho, quedaban ~270px para la foto),
   y con una altura FIJA de 220px desconectada de ese ancho tan angosto,
   el resultado era una caja rarísima (muy alta para lo angosta que era)
   donde object-fit:cover recortaba la foto de forma exageradamente
   "zoomeada" — además de que las flechas, apretadas a los costados,
   se veían flotando y desconectadas del resto.

   LA SOLUCIÓN (patrón típico de carruseles en apps móviles):
   1) Las flechas ya NO ocupan espacio a los costados: se SUPERPONEN
      encima de la foto (position:absolute), así la imagen usa el 100%
      del ancho disponible.
   2) En vez de una altura fija en píxeles, usamos "aspect-ratio": la
      altura se calcula proporcionalmente al ancho real que termine
      teniendo el carrusel, así el recorte de la foto se ve siempre
      bien proporcionado sin importar el ancho de pantalla.
   =========================================================================== */
@media (max-width: 768px) {
    .carousel {
        display: block; /* ya no es una fila de 3 columnas (flecha|imagen|flecha) */
        height: auto; /* anula el alto fijo de escritorio (130px) — en celular
                          el alto lo decide el aspect-ratio de .carousel-viewport */
        /* position:relative ya está definido más arriba (fuera de este
           media query) y sigue aplicando — es lo que permite que las
           flechas y los puntos se posicionen ENCIMA de la imagen */
    }

    .carousel-viewport {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3; /* proporción fija que se adapta al ancho real,
                                 en vez de una altura en px desconectada de él */
    }

    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5; /* por encima de la imagen */
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.85); /* semi-transparente: se nota que "flota" sobre la foto */
    }

    .carousel-btn--prev {
        left: 8px;
    }

    .carousel-btn--next {
        right: 8px;
    }
}