/*
 * Estilos Mejorados para Filtros
 * --------------------------------
*/

/* Contenedor principal de los filtros en la barra lateral */
#contenedor-filtros ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#contenedor-filtros li {
    margin-bottom: 2px; /* Espacio entre cada opción de filtro */
}

/* 1. Estilo y alineación de la etiqueta completa (checkbox, nombre y contador) */
#contenedor-filtros label {
    display: flex; /* La clave para la alineación */
    align-items: center; /* Centra verticalmente el checkbox con el texto */
    width: 100%;
    padding: 8px 10px; /* Espaciado interno */
    cursor: pointer;
    border-radius: 4px; /* Bordes redondeados */
    transition: background-color 0.2s ease-in-out; /* Animación suave para el hover */
    font-size: 15px; /* Tamaño de letra legible */
}

/* 2. Efecto hover sobre la palabra completa */
#contenedor-filtros label:hover {
    background-color: #f0f0f0; /* Un color de fondo sutil al pasar el mouse */
}

/* 3. Agrandar la casilla (checkbox) */
#contenedor-filtros input[type="checkbox"] {
    transform: scale(1.3); /* Hace el checkbox un 30% más grande */
    margin-right: 12px; /* Espacio entre el checkbox y el nombre */
}

/* Estilo para el nombre del filtro */
.mfd-filter-name {
    flex-grow: 1; /* Hace que el nombre ocupe todo el espacio disponible */
    color: #333;
}

/* 4. Estilo y alineación del contador */
.mfd-filter-count {
    margin-left: auto; /* La magia para alinear el contador a la derecha */
    font-size: 14px;
    color: #777;
    padding-left: 5px; /* Pequeño espacio para que no se pegue al nombre */
}
/* Estilos para el botón "Ver más" */
.mfd-show-more-btn {
    color: #0056b3; /* Un color de enlace estándar */
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: block;
    padding: 8px 10px;
    text-decoration: none;
}

.mfd-show-more-btn:hover {
    text-decoration: underline;
}