/* ========================================================================
   NALOUK - SISTEMA DE FILTROS DE COLORES (CSS Manual Optimizado)
   ========================================================================
   
   /* =====================================================================
   📋 INSTRUCCIONES PARA AÑADIR NUEVO COLOR
   ========================================================================
   
   1. Copia el TEMPLATE completo de abajo
   2. Reemplaza "NOMBRE" con el slug del color (ej: "burgundy")
   3. Reemplaza "#HEXCODE" con el código hex (ej: "#800020")
   4. Pega en la sección MAPEO
   5. Guarda y limpia cache
   
   ⏱️ Tiempo: 1-2 minutos por color
   
   ======================================================================== */

   /* ========================================================================
   📋 TEMPLATE PARA COPIAR-PEGAR
   ======================================================================== */

/* NOMBRE */
/* Filtros normales */
.nalouk-filtro_colores input[value="NOMBRE"] + .brx-option-text { 
  background: #HEXCODE !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="NOMBRE"]::before {
  background: #HEXCODE !important;
}


/* ======================================================================== */

/* ========================================================================
   🎨 MAPEO DE COLORES 
   ======================================================================== */

/* Negro */
/* Filtros normales */
.nalouk-filtro_colores input[value="negro"] + .brx-option-text { 
  background: #000000 !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="negro"]::before {
  background: #000000 !important;
}

/* Azul */
/* Filtros normales */
.nalouk-filtro_colores input[value="azul"] + .brx-option-text { 
  background: #0e30dd !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="azul"]::before {
  background: #0e30dd !important;
}

/* Azul Donegal */
/* Filtros normales */
.nalouk-filtro_colores input[value="azul-donegal"] + .brx-option-text { 
  background: #3267ad !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="azul-donegal"]::before {
  background: #3267ad !important;
}

/* Dark Chocolate */
/* Filtros normales */
.nalouk-filtro_colores input[value="dark-choco"] + .brx-option-text { 
  background: #3d2d2e !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="dark-choco"]::before {
  background: #3d2d2e !important;
}

/* Light Camel */
/* Filtros normales */
.nalouk-filtro_colores input[value="light-camel"] + .brx-option-text { 
  background: #c5bbae !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="light-camel"]::before {
  background: #c5bbae !important;
}

/* Morado */
/* Filtros normales */
.nalouk-filtro_colores input[value="morado"] + .brx-option-text { 
  background: #5c2c35 !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="morado"]::before {
  background: #5c2c35 !important;
}

/* Navy */
/* Filtros normales */
.nalouk-filtro_colores input[value="navy"] + .brx-option-text { 
  background: #394868 !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="navy"]::before {
  background: #394868 !important;
}

/* Negro Donegal */
/* Filtros normales */
.nalouk-filtro_colores input[value="negro-2"] + .brx-option-text { 
  background: #464646 !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="negro-2"]::before {
  background: #464646 !important;
}

/* Rojo */
/* Filtros normales */
.nalouk-filtro_colores input[value="rojo"] + .brx-option-text { 
  background: #eb0a0a !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="rojo"]::before {
  background: #eb0a0a !important;
}

/* Verde */
/* Filtros normales */
.nalouk-filtro_colores input[value="verde"] + .brx-option-text { 
  background: #06e520 !important; 
}
/* Filtros activos */
.tienda__filter-active button[data-filter-value="verde"]::before {
  background: #06e520 !important;
}


/* ========================================================================
   🎨 ESTILOS BASE - FILTROS NORMALES (NO MODIFICAR)
   ======================================================================== */

.nalouk-filtro_colores label .brx-option-text {
    text-indent: -9999px !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border: 2px solid #00000033 !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 32px !important;
}

.nalouk-filtro_colores label .brx-option-text:hover {
    transform: scale(1.05) !important;
    border-color: #E9A284 !important;
}

.nalouk-filtro_colores input:checked + .brx-option-text {
    outline: 2px solid #855e4e !important;
    outline-offset: 0px;
}

/* ========================================================================
   🎨 ESTILOS BASE - FILTROS ACTIVOS (NO MODIFICAR)
   ======================================================================== */

.tienda__filter-active button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 20px;
    position: relative;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #333333;
    border: 1px solid #e0e0e0;
    background: #f8f8f8;
}

.tienda__filter-active button:hover {
    background: #f0f0f0;
    border-color: #E9A284;
}

.tienda__filter-active button svg {
    margin-left: auto;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.tienda__filter-active button[data-filter-url-param="n_color"]::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #00000033;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.tienda__filter-active button[data-filter-url-param="n_color"]:hover::before {
    transform: scale(1.1);
    border-color: #E9A284;
}

/* ========================================================================
   📱 RESPONSIVE (NO MODIFICAR)
   ======================================================================== */

@media (max-width: 768px) {
    .nalouk-filtro_colores label .brx-option-text {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
    }
    
    .tienda__filter-active button[data-filter-id="fnsvsm"]::before {
        width: 18px;
        height: 18px;
    }
    
    .tienda__filter-active button {
        gap: 6px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* ========================================================================
   ♿ ACCESSIBILITY (NO MODIFICAR)
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .tienda__filter-active button[data-filter-id="fnsvsm"]::before,
    .nalouk-filtro_colores .brx-option-text {
        transition: none;
    }
    
    .tienda__filter-active button:hover::before,
    .nalouk-filtro_colores .brx-option-text:hover {
        transform: none;
    }
}

/* ========================================================================
   📜 SCROLL EN FILTROS (NO MODIFICAR)
   ======================================================================== */

@media (min-width: 768px) {
    .tienda__filter-wrapper {
        position: sticky;
        top: 60px;
        height: calc(100vh - 60px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: #00000033 transparent;
    }
    
    .tienda__filter-wrapper:hover {
        scrollbar-color: #0000004d transparent;
    }
}