/* Estilos para el panel de configuración y búsqueda */

#search-input {
    transition: width 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

#search-button {
    transition: opacity 0.3s ease-in-out;
}

#search-icon {
    transition: opacity 0.3s ease-in-out;
}

#clear-search-button {
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Transiciones para opciones avanzadas */
#advanced-filters {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#more-options-icon {
    transition: transform 0.2s ease-in-out;
}

/* Panel de configuración */
#config-panel {
    transition: transform 0.3s ease-in-out;
}

/* Estilo para el swipe area */
#swipe-area {
    cursor: pointer;
}

/* Botones de categorías */
.category-filter {
    transition: all 0.2s ease-in-out;
}

.category-filter:hover {
    transform: translateY(-1px);
}

.category-filter.active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}