/*
 * ===================================================================
 * ESTILOS PARA SDS FILTROS PRO (Canarias Autocolor)
 * ===================================================================
 */

/* --- Contenedor Principal del Formulario --- */
.sds-filtros-pro {
    font-size: 14px;
    color: #333;
}

/* --- Títulos de cada sección (Buscar, Precio, etc.) --- */
.sds-filtros-pro h3 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 20px; /* Espacio sobre el título */
    margin-bottom: 15px; /* Espacio bajo el título */
    padding-bottom: 10px; /* Línea separadora */
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* El primer título no necesita margen superior */
.sds-filtros-pro h3:first-of-type {
    margin-top: 0;
}

/* --- Contenedor de cada grupo de filtros --- */
.sds-filtro-group {
    margin-bottom: 20px;
}

/* --- Estilos para Inputs (Buscar, Select) --- */
.sds-filtros-pro .sds-filtro-search-input,
.sds-filtros-pro .sds-filtro-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
    font-size: 14px;
    transition: border-color 0.2s ease;
}

/* --- Estilos para el Selector de "Tipo de Producto" --- */
.sds-filtros-pro .sds-filtro-select {
     margin-bottom: 25px; /* Espacio antes de los botones */
}

.sds-filtros-pro .sds-filtro-search-input:focus,
.sds-filtros-pro .sds-filtro-select:focus {
    border-color: #D90000; /* Color rojo al enfocar */
    background-color: #fff;
    outline: none;
}

/* --- Filtro de Disponibilidad (Stock) y Etiquetas --- */
.sds-filtro-stock label,
.sds-filtro-group label {
    display: block; /* Hace que cada checkbox ocupe su línea */
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.4;
}

.sds-filtro-stock label input[type="checkbox"],
.sds-filtro-group label input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
    /* Estilos modernos para checkboxes (opcional pero recomendado) */
    transform: scale(1.1);
    accent-color: #D90000; /* Colorea el checkbox con el rojo corporativo */
}

/* Estilo para el contador de etiquetas (ej: "(5)") */
.sds-filtro-group label .count {
    color: #888;
    font-size: 0.9em;
    margin-left: 4px;
}

/* --- Filtro de Precio (Min/Max) --- */
.sds-filtro-precio {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre elementos */
}

.sds-filtro-precio .sds-filtro-precio-label {
    font-size: 16px;
    font-weight: 700;
    color: #999;
}

.sds-filtro-precio input[type="number"] {
    flex-grow: 1; /* Hace que los inputs ocupen el espacio disponible */
    width: 80px; /* Ancho base, pero flex-grow lo ajustará */
    min-width: 60px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    -moz-appearance: textfield; /* Oculta flechas en Firefox */
}

/* Oculta las flechas por defecto en inputs numéricos */
.sds-filtro-precio input[type="number"]::-webkit-outer-spin-button,
.sds-filtro-precio input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sds-filtro-precio input[type="number"]:focus {
    border-color: #D90000;
    background-color: #fff;
    outline: none;
}

/* --- Botones de Acción (Aplicar / Limpiar) --- */
.sds-filtro-acciones {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacio entre los dos botones */
}

/* Botón Principal: Aplicar Filtros */
.sds-filtro-aplicar {
    display: block;
    width: 100%;
    padding: 12px 15px;
    background-color: #D90000; /* Rojo corporativo */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.sds-filtro-aplicar:hover {
    background-color: #b30000; /* Rojo más oscuro al pasar el ratón */
    transform: scale(1.02);
}

/* Botón Secundario: Limpiar Filtros */
.sds-filtro-limpiar {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: #f0f0f0; /* Gris claro */
    color: #555;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sds-filtro-limpiar:hover {
    background-color: #e5e5e5;
    border-color: #ccc;
    color: #222;
}