/* Estilos principales del botón */

/*
.dropdown-btn {
    background-color: #FFFFFF;
    border: none;
    border-radius: 10px; 
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 150px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin: 0px 4px;
}
*/

.dropdown-btn {
    background-color: #FFFFFF;
    border: none;
    border-radius: 10px; 
    padding: 6px 10px; /* Reducido (antes 10px 14px) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 120px; /* Reducido (antes 150px) para ocupar menos a lo ancho */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin: 0px 2px; /* Ligeramente más juntos */
}

/* Efecto al pasar el cursor (Hover) */
.dropdown-btn:hover {
    background-color: #F9FAFB;
}

/* Efecto al hacer clic (Active) */
.dropdown-btn:active {
    transform: scale(0.98);
}

/* Contenedor de los textos para apilarlos verticalmente */

/*
.text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
*/

.text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px; /* Espacio mínimo entre el título y el valor */
}

/* Estilo para "Tipo de control" */

/*
.label {
    font-size: 13px;
    font-weight: 700; 
    color: #202124; 
}
*/

.label {
    font-size: 11px; /* Letra achicada (antes 13px) */
    font-weight: 700; 
    color: #202124; 
}


/* Estilo para "Todos" */

/*
.value {
    font-size: 14px;
    font-weight: 500;
    color: #80868B; 
}
*/

.value {
    font-size: 12px; /* Letra achicada (antes 14px) */
    font-weight: 500;
    color: #80868B; 
}

/* Contenedor del ícono */
.icon {
    color: #5F6368;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease; /* Animación suave al girar */
}

/* Clase dinámica para girar la flecha cuando está "abierto" */
.dropdown-btn.open .icon {
    transform: rotate(180deg);
}

/* --- ESTILOS DEL MENÚ DESPLEGABLE --- */
.dropdown-wrapper {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    margin-top: 8px; /* Separación del botón */
    padding: 8px 0;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    list-style: none;
    /* Estado oculto con transición suave */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 10;
}

/* Mostrar menú cuando el botón contiguo tiene la clase .open */
.dropdown-btn.open + .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*
.dropdown-item {
    padding: 10px 14px;
    font-size: 14px;
    color: #202124;
    cursor: pointer;
    transition: background-color 0.1s;
}
*/

.dropdown-item {
    padding: 8px 10px; /* Elementos del menú más compactos */
    font-size: 12px; /* Letra más pequeña en las opciones */
    color: #202124;
    cursor: pointer;
    transition: background-color 0.1s;
}


.dropdown-item:hover {
    background-color: #F1F3F4; /* Fondo gris claro al pasar el cursor */
}

/* ===========================================================
   ESTILOS PARA DROPDOWN CON CHECKBOXES
   =========================================================== */
.dropdown-menu--checkboxes .dropdown-item {
    padding: 0; /* Quitamos el padding del <li> para pasárselo al <label> y ampliar el área de clic */
}

.dropdown-menu--checkboxes label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
}

.dropdown-menu--checkboxes input[type="checkbox"] {
    cursor: pointer;
    accent-color: #0A703D; /* Color verde institucional Primor para el check */
    width: 14px;
    height: 14px;
    margin: 0;
}

/* ===========================================================================
   MODO CELULAR (max-width: 768px) — mismo punto de quiebre que styles.css
   ===========================================================================
   BUG QUE ESTO ARREGLA: el hijo flex directo de .contenedor-botones-filtros
   (el que realmente controla el "envuelve de a 2 por fila") es
   .dropdown-wrapper, NO .dropdown-btn — el botón vive ADENTRO del wrapper.
   La primera versión de este fix le puso el ancho "50%" al botón, pero
   un porcentaje se calcula respecto al PADRE del elemento (el wrapper) —
   y como el wrapper no tenía ningún ancho propio definido, ese 50% no
   tenía "50% de qué", y el navegador lo ignoraba (el botón colapsaba a
   su ancho mínimo de contenido, partiendo el texto en varias líneas).

   La corrección: el ancho de la cuadrícula va en .dropdown-wrapper (el
   hijo flex real), y el botón de adentro simplemente llena su wrapper
   al 100%.
   =========================================================================== */
@media (max-width: 768px) {
    .dropdown-wrapper {
        width: calc(50% - 0.5rem); /* 2 por fila, descontando la mitad del gap de 1rem */
    }

    .dropdown-btn {
        width: 100%;   /* llena el ancho de su wrapper (ya correctamente calculado arriba) */
        margin: 0;      /* el espaciado ahora lo da el gap del contenedor, no el margin individual */
    }
}