/* 
 * filters.css - Sistema de Filtros para AppsGratis.es
 * Estilos completos para filtrado avanzado de contenido
 * Versión: 1.0
 */

/* ================================
 * ESTADOS DE ACTUALIZACIÓN DE FILTROS
 * Visual feedback para cambios pendientes
 * ================================ */

/* Indicador de cambios pendientes */
.filters.has-pending-changes {
    border-left-color: #f59e0b;
    background: linear-gradient(to right, rgba(245, 158, 11, 0.04), rgba(245, 158, 11, 0.02));
}

.filters.has-pending-changes .filters-status {
    background: linear-gradient(135deg, #f59e0b 0%, #dc7f0a 100%);
    animation: pulse-orange 2s infinite;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.2);
    font-weight: 700;
}

@keyframes pulse-orange {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1);
        box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3),
                    inset 0 1px 2px rgba(255, 255, 255, 0.2);
    }
    50% { 
        opacity: 0.95;
        filter: brightness(1.1);
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5),
                    0 0 25px rgba(245, 158, 11, 0.15),
                    inset 0 1px 2px rgba(255, 255, 255, 0.3);
    }
}

/* Estado de filtros aplicados (verde) */
.filters.has-applied-filters {
    border-left-color: var(--primary);
    background: linear-gradient(to right, rgba(16, 185, 129, 0.04), rgba(16, 185, 129, 0.02));
}

.filters.has-applied-filters .filters-status {
    background: var(--primary);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ================================
 * SISTEMA DE FILTROS COMPLETO
 * Contenedor principal y estructura de filtros avanzados
 * ================================ */

/* Contenedor principal de filtros */
.filters {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    margin-top: -1rem; /* Reducido para estar más cerca del toggle */
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
}

/* Estado activo con animación */
.filters.active {
    display: block;
    animation: fadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Título de la sección de filtros */
.filters h3 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

/* Badge "FILTROS ACTIVOS" */
.filters-status {
    margin-left: auto;
    text-align: center;
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ================================
 * GRID DE FILTROS
 * Layout de 3 columnas para organizar filtros
 * ================================ */
 
.filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.filter-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Labels de cada grupo de filtros */
.filter-group label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ================================
 * FILTROS DE NOMBRE DINÁMICOS
 * Sistema para añadir múltiples filtros de texto
 * ================================ */

/* Botón + para añadir filtro */
.add-filter-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-weight: bold;
    font-size: 14px;
}

.add-filter-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Contenedor de filtros de nombre */
.name-filters-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Item individual de filtro de nombre */
.name-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.name-filter-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Select del tipo de filtro (contiene, empieza, etc.) */
.name-filter-type {
    flex: 1;
}

/* Input para el texto a buscar */
.name-filter-value {
    width: 100%;
}

/* Botón X para eliminar filtro */
.remove-filter-btn {
    background: transparent;
    color: #ef4444;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 38px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    transition: var(--transition);
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

.remove-filter-btn:hover {
    color: #dc2626;
    transform: scale(1.1);
}

/* ================================
 * BOTONES DE PRESET DE EXTENSIONES
 * Nuevo sistema de botones (no selector desplegable)
 * ================================ */
 
.extension-preset-buttons {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    align-items: center;
}

.preset-btn {
    position: relative;
    flex: 1; /* Ocupar espacio disponible automáticamente */
    height: 38px;
    padding: 0;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preset-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.preset-btn:active {
    transform: translateY(0);
}

.preset-btn svg {
    pointer-events: none;
}

/* ================================
 * INPUTS Y SELECTS DE FILTROS
 * Estilos consistentes para todos los controles
 * ================================ */
 
.filter-group input,
.filter-group select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    transition: var(--transition);
    background: var(--surface);
    color: var(--text-primary);
    height: 44px;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Estilo específico para selects */
.filter-group select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    padding-right: 3rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ================================
 * FILTROS DE TAMAÑO
 * Inputs para tamaño mínimo y máximo con unidades
 * ================================ */
 
.size-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.size-input-group {
    display: flex;
    gap: 0.5rem;
}

.size-input-group input {
    flex: 2 !important;
    min-width: 0;
}

.size-input-group select {
    flex: 1 !important;
    min-width: 0;
}

/* ================================
 * CONTROLES DE PROFUNDIDAD
 * Radio buttons para niveles de carpetas
 * ================================ */
 
.depth-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.depth-radio-group {
    display: flex;
    align-items: center;
    gap: 2rem; /* Espaciado entre radios */
}

.depth-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0;
}

.depth-radio input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

/* Input numérico para niveles */
.depth-input {
    width: 60px;
    padding: 0.5rem;
    height: 32px;
    margin-left: -1.5rem;
    margin-right: 0.5rem;
}

/* Estado deshabilitado para input de profundidad */
#depthValue:disabled {
    background-color: #f9fafb;
    color: #d1d5db;
    border-color: #e5e7eb;
}

#depthValue:disabled::placeholder {
    color: #e5e7eb;
}

/* Override específico para evitar conflictos */
#depthValue {
    width: 60px !important;
    height: 32px !important;
    padding: 0.5rem !important;
}

/* ================================
 * SELECTOR DE EXTENSIONES
 * Tags clicables para filtrar por tipo de archivo
 * ================================ */
 
.extension-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 32px;
}

/* Tag individual de extensión */
.ext-tag {
    background: var(--border-light);
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    font-weight: 500;
}

.ext-tag:hover {
    background: var(--border);
}

/* Estado seleccionado */
.ext-tag.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
}

/* ================================
 * ACCIONES DE FILTROS
 * Botón para limpiar todos los filtros
 * ================================ */
 
.filter-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0;
}

/* ================================
 * BOTÓN TOGGLE DE FILTROS
 * Botón para mostrar/ocultar panel de filtros
 * ================================ */

.filter-toggle {
    text-align: center;
    width: 100%;
    max-width: 600px;
}

/* Estado activo cuando hay filtros aplicados */
.btn.filters-active {
    background: var(--primary);
    color: white;
}

.btn.filters-active:hover {
    background: var(--primary-dark);
}

/* ================================
 * RESPONSIVE TABLET-DESKTOP (769px - 1024px)
 * Ajustes para pantallas medianas
 * ================================ */
 
@media (min-width: 769px) and (max-width: 1024px) {
    /* Grid de filtros a 2 columnas */
    .filter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Tercera columna ocupa ancho completo */
    .filter-column:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* ================================
 * RESPONSIVE TABLET-MÓVIL (hasta 768px)
 * Ajustes específicos para tablets y móviles
 * ================================ */
 
@media (max-width: 768px) {
    /* Botón actualizar */
    #applyFiltersBtn {
        font-size: 0.85rem;
    }
    
    /* Filtros ultra compactos */
    .filters {
        padding: 1rem 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .filters h3 {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .filters-status {
        font-size: 0.65rem;
        padding: 0.15rem 0.5rem;
    }
    
    /* Grid a una columna */
    .filter-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .filter-column {
        gap: 0.75rem;
    }
    
    .filter-column:last-child {
        grid-column: auto;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .filter-group {
        gap: 0.4rem;
    }
    
    .filter-group label {
        position: relative;
        padding-right: 30px;
        font-size: 0.9rem;
        margin-bottom: 0rem;
    }
    
    /* Botón añadir posicionado absoluto */
    .add-filter-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        font-size: 12px;
    }
    
    .add-filter-btn:hover {
        transform: translateY(calc(-50% - 1px));
    }
    
    /* Filtros de nombre móvil */
    .name-filter-input-group {
        width: 100%;
        flex-wrap: nowrap;
    }
    
    .name-filter-type {
        width: 100%;
        min-width: 0;
        flex: 1;
    }
    
    .remove-filter-btn {
        height: 36px;
        width: 26px;
        min-width: 26px;
        font-size: 22px;
        flex-shrink: 0;
    }
    
    .preset-btn {
        width: 36px;
        height: 36px;
    }
    
    .preset-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Inputs más pequeños */
    .filter-group input,
    .filter-group select {
        width: 100%;
        min-width: 0;
        height: 36px;
        padding: 0.4rem 0.5rem;
        font-size: 1rem;
    }
    
    /* Filtros de tamaño móvil */
    .size-inputs {
        gap: 0.4rem;
    }
    
    .size-input-group {
        gap: 0.3rem;
    }
    
    .size-input-group input,
    .size-input-group select {
        flex: 1 !important;
    }
    
    /* Controles de profundidad móvil */
    .depth-radio-group {
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .depth-input,
    #depthValue {
        width: 40px !important;
        height: 26px !important;
        padding: 0.3rem !important;
        margin-left: 0 !important;
    }
    
    /* Acciones de filtros móvil */
    .filter-actions {
        text-align: center;
        padding-top: 0.75rem;
        margin-top: 0.5rem;
    }
    
    .filter-actions .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ================================
 * RESPONSIVE MÓVIL (hasta 480px)
 * Ajustes específicos para móviles pequeños
 * ================================ */

@media (max-width: 480px) {
    .filter-actions {
        flex-direction: column;
    }
    
    .filter-actions button {
        width: 100%;
    }
    
    .extension-preset-buttons {
        gap: 0.3rem;
    }
    
    .preset-btn {
        width: 34px;
        height: 34px;
    }
}

@media (hover: none) {
    /* Evitar que los botones preset se queden "pegajosos" después del toque */
    .preset-btn:not(.added) {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text-primary);
        transform: none;
    }
}