/* =========================================================
   🔰 INICIO – Estilos de filtros avanzados del catálogo
   Archivo: /catalogo/css/filtros-catalogo-avanzado.css

   Objetivo:
   - Mejorar la estética del bloque de filtros avanzados
   - Unificar botones y chips activos
   - Dar una experiencia más suave en desktop y mobile
   ========================================================= */

/* BLOQUE NUEVO: Contenedor general de cada filtro avanzado */
.bloque-filtros-avanzados-catalogo {
    /* CONTEXTO: General */
    margin-top: 14px;
    margin-bottom: 8px;
}

/* BLOQUE NUEVO: Panel abierto del filtro */
.bloque-filtros-avanzados-catalogo>div[style*="background:#fffaf7"] {
    /* CONTEXTO: General */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

/* BLOQUE NUEVO: Chip de filtro activo */
.chip-filtro-activo {
    /* CONTEXTO: General */
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff4ee;
    border: 1px solid #f2c1ad;
    border-radius: 12px;
    padding: 10px 14px;
    box-sizing: border-box;
}

/* BLOQUE NUEVO: Texto del chip activo */
.chip-filtro-activo span {
    /* CONTEXTO: General */
    font-weight: 600;
    color: #b94722;
    line-height: 1.35;
}

/* BLOQUE NUEVO: Enlaces tipo botón dentro del filtro */
.bloque-filtros-avanzados-catalogo a.btn-buscar,
.bloque-filtros-avanzados-catalogo a.btn-limpiar {
    /* CONTEXTO: General */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* BLOQUE NUEVO: Botón/Enlace principal de filtros */
.bloque-filtros-avanzados-catalogo .btn-buscar {
    /* CONTEXTO: General */
    background-color: #ff5a14;
    color: #ffffff;
    border: none;
    box-shadow: 0 1px 4px rgba(255, 90, 20, 0.18);
}

/* BLOQUE NUEVO: Hover botón principal */
.bloque-filtros-avanzados-catalogo .btn-buscar:hover {
    /* CONTEXTO: General */
    background-color: #e04b0d;
    color: #ffffff;
}

/* BLOQUE NUEVO: Botón/Enlace secundario limpiar/cancelar */
.bloque-filtros-avanzados-catalogo .btn-limpiar {
    /* CONTEXTO: General */
    background-color: #f6f321;
    color: #d24a18;
    border: 1px solid #efc0ae;
    box-shadow: none;
}

/* BLOQUE NUEVO: Hover botón secundario */
.bloque-filtros-avanzados-catalogo .btn-limpiar:hover {
    /* CONTEXTO: General */
    background-color: #f6f321;
    color: #b94722;
}

/* BLOQUE NUEVO: Botones submit dentro de filtros avanzados */
.bloque-filtros-avanzados-catalogo button[type="submit"] {
    /* CONTEXTO: General */
    min-width: 170px;
    min-height: 42px;
    border-radius: 8px;
    border: none;
    background: #ff5a14;
    color: #ffffff;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 4px rgba(255, 90, 20, 0.18);
}

/* BLOQUE NUEVO: Hover submit dentro de filtros */
.bloque-filtros-avanzados-catalogo button[type="submit"]:hover {
    /* CONTEXTO: General */
    background: #e04b0d;
}

/* BLOQUE NUEVO: Labels dentro de filtros */
.bloque-filtros-avanzados-catalogo label {
    /* CONTEXTO: General */
    color: #2f2f2f;
    font-weight: 600;
}

/* BLOQUE NUEVO: Selects de filtros */
.bloque-filtros-avanzados-catalogo select {
    /* CONTEXTO: General */
    min-height: 42px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 8px 12px;
    box-sizing: border-box;
    background: #ffffff;
}

/* BLOQUE NUEVO: Inputs de filtros */
.bloque-filtros-avanzados-catalogo input[type="text"] {
    /* CONTEXTO: General */
    min-height: 42px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 8px 12px;
    box-sizing: border-box;
    background: #ffffff;
}

/* BLOQUE NUEVO: Separación de acciones de filtros */
.bloque-filtros-avanzados-catalogo .acciones-filtro-avanzado {
    /* CONTEXTO: General */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* BLOQUE NUEVO: Ajuste visual del botón general buscar/limpiar fuera de filtros */
.button-container {
    /* CONTEXTO: General */
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    margin-bottom: 10px;
}

/* BLOQUE NUEVO: Botones del contenedor general */
.button-container .btn-buscar,
.button-container .btn-limpiar {
    /* CONTEXTO: General */
    min-width: 180px;
    min-height: 42px;
    border-radius: 8px;
}

/* BLOQUE NUEVO: Links de cerrar filtro */
.bloque-filtros-avanzados-catalogo>div>a[href*="mostrar_filtro"] {
    /* CONTEXTO: General */
    font-weight: 600;
}

/* BLOQUE NUEVO: Enlace limpiar dentro del contenedor general */
.button-container .btn-limpiar {
    /* CONTEXTO: General */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background-color: #fff1ea;
    color: #d24a18;
    border: 1px solid #efc0ae;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* BLOQUE NUEVO: Hover enlace limpiar dentro del contenedor general */
.button-container .btn-limpiar:hover {
    /* CONTEXTO: General */
    background-color: #ffe6db;
    color: #b94722;
}

.button-container .btn-buscar,
.button-container .btn-limpiar {
    /* CONTEXTO: General */
    min-width: 180px;
    min-height: 42px;
    border-radius: 8px;
}

/* BLOQUE NUEVO: Reorganización escritorio de cabecera de filtros */
.cabecera-catalogo-principal>form {
    /* CONTEXTO: General */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 12px;
}

/* BLOQUE NUEVO: Input principal alineado en fila superior */
.cabecera-catalogo-principal>form>#busqueda {
    /* CONTEXTO: General */
    width: 310px;
    min-width: 310px;
    flex: 0 0 310px;
    margin: 0;
}

/* BLOQUE NUEVO: Label de mostrar imágenes alineado */
.cabecera-catalogo-principal>form>label[for="ordenar_imagenes"] {
    /* CONTEXTO: General */
    display: inline-flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}

/* BLOQUE NUEVO: Checkbox mostrar imágenes alineado */
.cabecera-catalogo-principal>form>#ordenar_imagenes {
    /* CONTEXTO: General */
    margin: 0;
    flex: 0 0 auto;
}

/* BLOQUE NUEVO: Quitar salto de línea estructural en escritorio */
.cabecera-catalogo-principal>form>br {
    /* CONTEXTO: General */
    display: none !important;
}

/* BLOQUE NUEVO: Cada filtro avanzado entra en fila horizontal */
.cabecera-catalogo-principal>form>.bloque-filtros-avanzados-catalogo {
    /* CONTEXTO: General */
    display: inline-flex;
    align-items: center;
    margin-top: 0 !important;
    flex: 0 0 auto;
}

/* BLOQUE NUEVO: Evitar separación vertical en el disparador del filtro */
.cabecera-catalogo-principal>form>.bloque-filtros-avanzados-catalogo>div:first-child {
    /* CONTEXTO: General */
    margin-bottom: 0 !important;
}

/* BLOQUE NUEVO: Botones de filtros avanzados en negro */
.cabecera-catalogo-principal>form>.bloque-filtros-avanzados-catalogo a.btn-buscar {
    /* CONTEXTO: General */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 8px;
    box-sizing: border-box;
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    text-decoration: none !important;
    font-weight: 600;
    white-space: nowrap;
}

/* BLOQUE NUEVO: Hover de botones de filtros avanzados en negro */
.cabecera-catalogo-principal>form>.bloque-filtros-avanzados-catalogo a.btn-buscar:hover {
    /* CONTEXTO: General */
    background: #1c1c1c !important;
    border-color: #1c1c1c !important;
    color: #ffffff !important;
}

/* BLOQUE NUEVO: Buscar y Limpiar pasan a segunda fila */
.cabecera-catalogo-principal>form>.button-container {
    /* CONTEXTO: General */
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 100%;
    margin-top: 2px;
}

/* BLOQUE NUEVO: Botón Buscar principal mantiene protagonismo */
.cabecera-catalogo-principal>form>.button-container .btn-buscar {
    /* CONTEXTO: General */
    min-width: 210px;
}

/* BLOQUE NUEVO: Paneles abiertos de filtros como fila completa debajo del disparador */
.cabecera-catalogo-principal>form>#marca-filtro,
.cabecera-catalogo-principal>form>#rubro-filtro,
.cabecera-catalogo-principal>form>#medida-filtro {
    /* CONTEXTO: General */
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* BLOQUE NUEVO: Orden visual del panel abierto antes de Buscar/Limpiar */
.cabecera-catalogo-principal>form>#marca-filtro,
.cabecera-catalogo-principal>form>#rubro-filtro,
.cabecera-catalogo-principal>form>#medida-filtro,
.cabecera-catalogo-principal>form>.button-container {
    /* CONTEXTO: General */
    order: 20;
}

/* BLOQUE NUEVO: Buscar/Limpiar siempre en fila completa debajo de paneles */
.cabecera-catalogo-principal>form>.button-container {
    /* CONTEXTO: General */
    flex: 0 0 100%;
    width: 100%;
}

/* BLOQUE NUEVO: Responsive tablet */
@media (max-width: 992px) {

    /* BLOQUE NUEVO: Paneles avanzados más flexibles en tablet */
    .bloque-filtros-avanzados-catalogo {
        /* CONTEXTO: MediaQuery 992px */
        margin-top: 12px;
    }

    /* BLOQUE NUEVO: Chips activos en tablet */
    .chip-filtro-activo {
        /* CONTEXTO: MediaQuery 992px */
        width: 100%;
    }

    /* BLOQUE NUEVO: Botones dentro de filtros en tablet */
    .bloque-filtros-avanzados-catalogo button[type="submit"],
    .bloque-filtros-avanzados-catalogo a.btn-buscar,
    .bloque-filtros-avanzados-catalogo a.btn-limpiar {
        /* CONTEXTO: MediaQuery 992px */
        min-width: 150px;
    }
}

/* BLOQUE NUEVO: Responsive mobile */
@media (max-width: 768px) {

    /* BLOQUE NUEVO: Contenedor de filtros en mobile */
    .bloque-filtros-avanzados-catalogo {
        /* CONTEXTO: MediaQuery 768px */
        margin-top: 10px;
        margin-bottom: 6px;
    }

    /* BLOQUE NUEVO: Chip activo en mobile */
    .chip-filtro-activo {
        /* CONTEXTO: MediaQuery 768px */
        width: 100%;
        padding: 10px 12px;
        gap: 8px;
    }

    /* BLOQUE NUEVO: Texto chip activo mobile */
    .chip-filtro-activo span {
        /* CONTEXTO: MediaQuery 768px */
        width: 100%;
        font-size: 0.95rem;
    }

    /* BLOQUE NUEVO: Botones y enlaces dentro del filtro mobile */
    .bloque-filtros-avanzados-catalogo button[type="submit"],
    .bloque-filtros-avanzados-catalogo a.btn-buscar,
    .bloque-filtros-avanzados-catalogo a.btn-limpiar {
        /* CONTEXTO: MediaQuery 768px */
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* BLOQUE NUEVO: Selects e inputs mobile */
    .bloque-filtros-avanzados-catalogo select,
    .bloque-filtros-avanzados-catalogo input[type="text"] {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* BLOQUE NUEVO: Botones generales buscar/limpiar mobile */
    .button-container {
        /* CONTEXTO: MediaQuery 768px */
        flex-direction: column;
        gap: 10px;
    }

    /* BLOQUE NUEVO: Botones generales buscar/limpiar mobile */
    .button-container .btn-buscar,
    .button-container .btn-limpiar {
        /* CONTEXTO: MediaQuery 768px */
        width: 100%;
        min-width: 100%;
        text-align: center;
    }

    /* BLOQUE NUEVO: Filas internas de filtros mobile */
    .bloque-filtros-avanzados-catalogo div[style*="display:flex"] {
        /* CONTEXTO: MediaQuery 768px */
        flex-direction: column;
        align-items: stretch !important;
    }

    /* BLOQUE NUEVO: Labels mobile */
    .bloque-filtros-avanzados-catalogo label {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        min-width: 100% !important;
    }

    .button-container .btn-buscar,
    .button-container .btn-limpiar {
        /* CONTEXTO: MediaQuery 768px */
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* BLOQUE NUEVO: Estructura general del formulario en mobile */
    .cabecera-catalogo-principal>form {
        /* CONTEXTO: MediaQuery 768px */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 10px;
        column-gap: 0;
    }

    /* BLOQUE NUEVO: Buscador principal ocupa todo el ancho en mobile */
    .cabecera-catalogo-principal>form>#busqueda {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box;
        margin: 0;
    }

    /* BLOQUE NUEVO: Label de mostrar imágenes adaptado a mobile */
    .cabecera-catalogo-principal>form>label[for="ordenar_imagenes"] {
        /* CONTEXTO: MediaQuery 768px */
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: auto;
        margin: 0;
        white-space: normal;
    }

    /* BLOQUE NUEVO: Checkbox mostrar imágenes adaptado a mobile */
    .cabecera-catalogo-principal>form>#ordenar_imagenes {
        /* CONTEXTO: MediaQuery 768px */
        flex: 0 0 auto;
        margin: 0;
    }

    /* BLOQUE NUEVO: Cada filtro avanzado se apila correctamente en mobile */
    .cabecera-catalogo-principal>form>.bloque-filtros-avanzados-catalogo {
        /* CONTEXTO: MediaQuery 768px */
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }

    /* BLOQUE NUEVO: Primer bloque interno del filtro ocupa ancho completo en mobile */
    .cabecera-catalogo-principal>form>.bloque-filtros-avanzados-catalogo>div:first-child {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* BLOQUE NUEVO: Botones de filtros ocupan todo el ancho en mobile */
    .cabecera-catalogo-principal>form>.bloque-filtros-avanzados-catalogo a.btn-buscar,
    .cabecera-catalogo-principal>form>.bloque-filtros-avanzados-catalogo a.btn-limpiar {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    /* BLOQUE NUEVO: Paneles abiertos de filtros ocupan todo el ancho en mobile */
    .cabecera-catalogo-principal>form>#marca-filtro,
    .cabecera-catalogo-principal>form>#rubro-filtro,
    .cabecera-catalogo-principal>form>#medida-filtro {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding: 12px !important;
        overflow: hidden;
    }

    /* BLOQUE NUEVO: Contenido interno de paneles abierto contenido en mobile */
    #marca-filtro>div,
    #rubro-filtro>div,
    #medida-filtro>div {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* BLOQUE NUEVO: Filas internas de paneles se apilan en mobile */
    #marca-filtro div[style*="display:flex"],
    #rubro-filtro div[style*="display:flex"],
    #medida-filtro div[style*="display:flex"] {
        /* CONTEXTO: MediaQuery 768px */
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* BLOQUE NUEVO: Labels de paneles ocupan ancho completo en mobile */
    #marca-filtro label,
    #rubro-filtro label,
    #medida-filtro label {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        min-width: 100% !important;
    }

    /* BLOQUE NUEVO: Selects e inputs de paneles ocupan ancho completo en mobile */
    #marca-filtro select,
    #rubro-filtro select,
    #medida-filtro select,
    #marca-filtro input[type="text"],
    #rubro-filtro input[type="text"],
    #medida-filtro input[type="text"] {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* BLOQUE NUEVO: Chips activos ocupan ancho completo en mobile */
    .chip-filtro-activo {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        gap: 8px;
    }

    /* BLOQUE NUEVO: Botones internos de chips no fuerzan ancho completo */
    .chip-filtro-activo .btn-buscar,
    .chip-filtro-activo .btn-limpiar {
        /* CONTEXTO: MediaQuery 768px */
        width: auto !important;
        min-width: auto !important;
    }

    /* BLOQUE NUEVO: Contenedor general Buscar/Limpiar apilado en mobile */
    .cabecera-catalogo-principal>form>.button-container {
        /* CONTEXTO: MediaQuery 768px */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* BLOQUE NUEVO: Buscar/Limpiar ocupan ancho completo en mobile */
    .cabecera-catalogo-principal>form>.button-container .btn-buscar,
    .cabecera-catalogo-principal>form>.button-container .btn-limpiar {
        /* CONTEXTO: MediaQuery 768px */
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
    }
}

/* =========================================================
   🔰 FIN – Estilos de filtros avanzados del catálogo
   ========================================================= */