/**
 * Sistema Selector de Opciones - Capa de Estilos Personalizados
 * Diseño: Botones de Imagen Completa con Texto Minimalista
 * @author Arquitecto de Software Senior
 */

/* ==========================================================================
   1. Estilo Base del Botón (Contenedor de la Imagen)
   ========================================================================== */
.btn-option {
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 1rem; /* rounded-4 */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* Efectos de Hover - Exclusivo para Laptops y Desktops */
@media (min-width: 992px) {
    .btn-option:hover {
        border-color: #a8b2fc;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }
    .btn-option:hover .btn-main-img {
        transform: scale(1.02); /* Efecto zoom sutil a la imagen al pasar el mouse */
    }
}

/* Estado Seleccionado / Activo */
.btn-option.active {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.18);
}

.btn-option.active .text-container-min {
    background-color: #f0f7ff !important; /* Tinte azul al texto cuando se activa */
}

/* ==========================================================================
   2. Control de Imagen a Tamaño de Botón
   ========================================================================== */
.btn-main-img {
    height: 160px;        /* Altura fija ideal para desktops/laptops */
    height: 250px;        /* Altura fija ideal para desktops/laptops */
    object-fit: cover;    /* Recorta la imagen limpiamente al ancho del botón */
    transition: transform 0.3s ease;
}

/* ==========================================================================
   3. Minimización del Texto Interno
   ========================================================================== */
.text-container-min span {
    font-size: 0.75rem !important; /* Texto super pequeño (12px) */
    letter-spacing: 0.5px;         /* Mayor separación de letras para legibilidad */
}

.text-container-min .txt-desc {
    font-size: 0.65rem !important; /* Descripción aún más pequeña (10.4px) */
    margin-top: 1px;
}

/* ==========================================================================
   4. Optimización Responsiva para Smartphones (Móviles)
   ========================================================================== */
@media (max-width: 576px) {
    /* Reducimos la altura en celulares para que entren bien ambos botones en pantalla */
    .btn-main-img {
        height: 120px; 
    }
    
    .text-container-min span {
        font-size: 0.7rem !important; /* Ajuste milimétrico para móvil */
    }
}