/**
 * Carousel Small Component Styles
 * Estilos para el componente carousel_small con barra de control personalizada.
 *
 * Utiliza nomenclatura BEM con prefijo .mig-carousel-small para evitar
 * conflictos con otros selectores de carousel existentes en el proyecto.
 *
 * Template: Resources/Private/Templates/ContentElements/CarouselSmall.html
 * JavaScript: Resources/Public/JavaScript/carousel-small.js
 *
 * Variables CSS utilizadas (definidas en root.css):
 * - --Secundario-10: Color de fondo de la barra de control
 * - --Primario-90: Color de texto claro (labels)
 * - --Primario-70: Color de estado activo (dots, hover)
 * - --Neutral-60: Color de dots inactivos
 * - --Neutral-100: Color blanco para iconos
 * - --caption-font-family: Tipografía para metadatos
 * - --shadow-md: Sombra de tarjeta
 */

/* =================================================================== */
/* CONTENEDOR PRINCIPAL                                                 */
/* =================================================================== */

.mig-carousel-small {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
    background-color: var(--Neutral-100, #ffffff);
}

/* Estado fullscreen */
.mig-carousel-small:fullscreen {
    border-radius: 0;
    background-color: var(--Neutral-0, #000000);
}

.mig-carousel-small:fullscreen .mig-carousel-small__slider {
    height: calc(100dvh - 80px);
}

.mig-carousel-small:fullscreen .mig-carousel-small__image {
    object-fit: contain;
    height: 100%;
}

/* =================================================================== */
/* ÁREA DEL SLIDER                                                      */
/* =================================================================== */

.mig-carousel-small__slider {
    position: relative;
    width: 100%;
}

.mig-carousel-small__inner {
    border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
    overflow: hidden;
}

.mig-carousel-small__item {
    position: relative;
}

.mig-carousel-small__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.mig-carousel-small__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Efecto hover sutil en las imágenes */
.mig-carousel-small__item:hover .mig-carousel-small__image {
    transform: scale(1.02);
}

/* =================================================================== */
/* BARRA DE CONTROL                                                     */
/* =================================================================== */

.mig-carousel-small__control-bar {
    background-color: var(--Secundario-10, #0F2140);
    padding: 12px 16px;
    border-radius: 0 0 var(--border-radius-lg, 12px) var(--border-radius-lg, 12px);
}

.mig-carousel-small__control-bar--single {
    padding: 16px;
}

/* Contenedor interno con flexbox para layout de control bar */
.mig-carousel-small__control-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* Estado fullscreen de la barra */
.mig-carousel-small:fullscreen .mig-carousel-small__control-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    z-index: 10;
}

/* =================================================================== */
/* METADATOS (Foto, Fuente)                                            */
/* =================================================================== */

.mig-carousel-small__metadata {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--Neutral-100, #ffffff);
}

.mig-carousel-small__metadata-icon {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--Primario-70, #71A0F8);
    margin-top: 2px;
}

.mig-carousel-small__metadata-text {
    flex: 1;
    min-width: 0;
}

.mig-carousel-small__metadata-foto,
.mig-carousel-small__metadata-fuente {
    font-family: var(--caption-font-family, Verdana);
    /* Tamaño de fuente ajustado para mejor legibilidad */
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    color: var(--Primario-90, #D3E2FD);
}

.mig-carousel-small__metadata-foto strong,
.mig-carousel-small__metadata-fuente strong {
    color: var(--Neutral-100, #ffffff);
    font-weight: 600;
}

.mig-carousel-small__foto-value,
.mig-carousel-small__fuente-value {
    display: inline;
    word-break: break-word;
}

/* Limitar texto largo con ellipsis */
.mig-carousel-small__metadata-text p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* =================================================================== */
/* CONTROLES DE NAVEGACIÓN                                              */
/* =================================================================== */

.mig-carousel-small__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Botones base - tamaño ajustado a 32px según diseño */
.mig-carousel-small__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius-sm, 6px);
    background-color: transparent;
    color: var(--Neutral-100, #ffffff);
    cursor: pointer;
    transition: var(--transition-fast, all 0.2s ease);
}

.mig-carousel-small__btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}


.mig-carousel-small__btn:active {
    transform: scale(0.95);
}

.mig-carousel-small__btn .material-symbols-outlined {
    font-size: 24px;
}

/* Botón anterior/siguiente */
.mig-carousel-small__btn--prev,
.mig-carousel-small__btn--next {
    background-color: rgba(255, 255, 255, 0.1);
}

.mig-carousel-small__btn--prev:hover,
.mig-carousel-small__btn--next:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Botón pausa con estado activo */
.mig-carousel-small__btn--pause[aria-pressed="false"] {
    color: var(--Primario-70, #71A0F8);
}

/* =================================================================== */
/* INDICADORES DE PAGINACIÓN (DOTS)                                     */
/* =================================================================== */

.mig-carousel-small__pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px;
}

.mig-carousel-small__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* Dots inactivos: blanco semi-transparente según diseño */
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: var(--transition-fast, all 0.2s ease);
}

.mig-carousel-small__dot:hover {
    background-color: rgba(255, 255, 255, 0.75);
    transform: scale(1.2);
}


.mig-carousel-small__dot.active {
    /* Dots activos: blanco sólido según diseño */
    background-color: var(--Neutral-100, #ffffff);
    transform: scale(1.1);
}

/* =================================================================== */
/* RESPONSIVE: TABLET (< 992px)                                         */
/* =================================================================== */

@media (max-width: 991.98px) {
    .mig-carousel-small__control-bar {
        padding: 16px;
    }

    /* Layout de control bar en columna para tablet */
    .mig-carousel-small__control-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .mig-carousel-small__metadata {
        justify-content: flex-start;
    }

    .mig-carousel-small__controls {
        justify-content: center;
    }
}

/* =================================================================== */
/* RESPONSIVE: MÓVIL (< 576px)                                          */
/* =================================================================== */

@media (max-width: 575.98px) {
    .mig-carousel-small {
        border-radius: var(--border-radius-md, 8px);
    }

    .mig-carousel-small__inner {
        border-radius: var(--border-radius-md, 8px) var(--border-radius-md, 8px) 0 0;
    }

    .mig-carousel-small__control-bar {
        border-radius: 0 0 var(--border-radius-md, 8px) var(--border-radius-md, 8px);
        padding: 12px;
    }

    .mig-carousel-small__image-wrapper {
        aspect-ratio: 4 / 3;
    }

    .mig-carousel-small__metadata-icon {
        font-size: 20px;
    }

    .mig-carousel-small__metadata-foto,
    .mig-carousel-small__metadata-fuente {
        font-size: 10px;
    }

    /* Botones más compactos en móvil */
    .mig-carousel-small__btn {
        width: 28px;
        height: 28px;
    }

    .mig-carousel-small__btn .material-symbols-outlined {
        font-size: 20px;
    }

    .mig-carousel-small__dot {
        width: 8px;
        height: 8px;
    }

    .mig-carousel-small__pagination {
        gap: 4px;
        margin: 0 4px;
    }
}

/* =================================================================== */
/* ACCESIBILIDAD: REDUCED MOTION                                        */
/* =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mig-carousel-small__image,
    .mig-carousel-small__btn,
    .mig-carousel-small__dot {
        transition: none;
    }

    .mig-carousel-small__item:hover .mig-carousel-small__image {
        transform: none;
    }
}

/* =================================================================== */
/* OCULTAR CONTROLES NATIVOS DE BOOTSTRAP                              */
/* Evita duplicación de controles al usar nuestra barra personalizada   */
/* =================================================================== */

.mig-carousel-small .carousel-indicators,
.mig-carousel-small .carousel-control-prev,
.mig-carousel-small .carousel-control-next {
    display: none !important;
}