/* ==========================================================================
   1. REGULACIONES BASE PARA PRESTASHOP Y FONT AWESOME
   ========================================================================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Estilo general de los enlaces del menú */
#categories_block_left .block_content > ul > li > a,
.widget_nav_menu ul li a,
ul#menu > li > a {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Configuración general de los iconos (en el span interior del enlace) */
#categories_block_left .block_content > ul > li > a span::before,
.widget_nav_menu ul li a span::before,
ul#menu > li > a span::before {
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  width: 22px !important;
  margin-right: 6px !important;
  text-align: center !important;
}


/* ==========================================================================
   2. BLOQUE 1: MATERIAL ESCOLAR Y OFICINA (Naranja / Crema)
   ========================================================================== */

/* Título superior del Bloque 1 (aplicado en el primer enlace) */
a[href*="papeleria-on-line-sobres"]::before {
  content: "MATERIAL ESCOLAR Y OFICINA" !important;
  display: block !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  background-color: #FCD178 !important;
  color: #633E06 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 15px 10px !important;
  margin: -8px -12px 8px -12px !important;
  text-transform: uppercase !important;
  box-sizing: content-box !important;
}

/* Colores de fondo del Bloque 1 */
a[href*="papeleria-on-line-sobres"],
a[href*="papeleria-ecologica"],
a[href*="boligrafos-y-roller"],
a[href*="lapices-y-portaminas"],
a[href*="blocs"],
a[href*="mesa-de-estudio"],
a[href*="manualidades"],
a[href*="dibujo-tecnico"],
a[href*="embalajes"],
a[href*="pizarras"],
a[href*="juegos"],
a[href*="mochilas"] {
  background-color: #FFF8EC !important;
  color: #633E06 !important;
  border-bottom: 1px solid #FCE5C0 !important;
}

a[href*="papeleria-on-line-sobres"]:hover,
a[href*="papeleria-ecologica"]:hover,
a[href*="boligrafos-y-roller"]:hover,
a[href*="lapices-y-portaminas"]:hover,
a[href*="blocs"]:hover,
a[href*="mesa-de-estudio"]:hover,
a[href*="manualidades"]:hover,
a[href*="dibujo-tecnico"]:hover,
a[href*="embalajes"]:hover,
a[href*="pizarras"]:hover,
a[href*="juegos"]:hover,
a[href*="mochilas"]:hover {
  background-color: #FCE8C7 !important;
}

/* Iconos del Bloque 1 (usa doble barra \ para evitar que PrestaShop las borre) */
a[href*="papeleria-on-line-sobres"] span::before { content: "\f15c" !important; }
a[href*="papeleria-ecologica"] span::before      { content: "\f06c" !important; }
a[href*="boligrafos-y-roller"] span::before      { content: "\f303" !important; }
a[href*="lapices-y-portaminas"] span::before     { content: "\f303" !important; }
a[href*="blocs"] span::before                    { content: "\f24d" !important; }
a[href*="mesa-de-estudio"] span::before          { content: "\f81c" !important; }
a[href*="manualidades"] span::before             { content: "\f0c4" !important; }
a[href*="dibujo-tecnico"] span::before           { content: "\f543" !important; }
a[href*="embalajes"] span::before                { content: "\f1b2" !important; }
a[href*="pizarras"] span::before                 { content: "\f51b" !important; }
a[href*="juegos"] span::before                   { content: "\f015" !important; }
a[href*="mochilas"] span::before                 { content: "\f5d4" !important; }


/* ==========================================================================
   3. BLOQUE 2: HIGIENE Y LIMPIEZA (Verde Menta)
   ========================================================================== */

/* Título superior del Bloque 2 */
a[href*="higiene"]::before,
a[href*="limpieza"]::before {
  content: "HIGIENE Y LIMPIEZA" !important;
  display: block !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  background-color: #A2E8D4 !important;
  color: #1B5245 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 15px 10px !important;
  margin: -8px -12px 8px -12px !important;
  text-transform: uppercase !important;
  box-sizing: content-box !important;
}

/* Colores de fondo del Bloque 2 */
a[href*="higiene"],
a[href*="limpieza"] {
  background-color: #EDFBF7 !important;
  color: #1B5245 !important;
  border-bottom: 1px solid #D1F3EA !important;
}

a[href*="higiene"]:hover,
a[href*="limpieza"]:hover {
  background-color: #D6F5EC !important;
}

/* Iconos del Bloque 2 */
a[href*="higiene"] span::before,
a[href*="limpieza"] span::before { content: "\f043" !important; }


/* ==========================================================================
   4. BLOQUE 3: INFORMÁTICA Y TECNOLOGÍA (Azul Claro)
   ========================================================================== */

/* Título superior del Bloque 3 */
a[href*="toner-impresoras-y-equipos-despacho"]::before {
  content: "INFORMÁTICA Y TECNOLOGÍA" !important;
  display: block !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  background-color: #BBE2FC !important;
  color: #1B4570 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 15px 10px !important;
  margin: -8px -12px 8px -12px !important;
  text-transform: uppercase !important;
  box-sizing: content-box !important;
}

/* Colores de fondo del Bloque 3 */
a[href*="toner-impresoras-y-equipos-despacho"],
a[href*="informatica-escolar"],
a[href*="maquinas-de-oficina"],
a[href*="accesorios-ordenador"],
a[href*="cuidado-y-proteccion"],
a[href*="cartuchos-y-toner"] {
  background-color: #EFF7FF !important;
  color: #1B4570 !important;
  border-bottom: 1px solid #D7EAFA !important;
}

a[href*="maquinas-de-oficina"]:hover,
a[href*="accesorios-ordenador"]:hover,
a[href*="cuidado-y-proteccion"]:hover,
a[href*="cartuchos-y-toner"]:hover {
  background-color: #DDEEFC !important;
}

/* Iconos del Bloque 3 */
a[href*="maquinas-de-oficina"] span::before  { content: "" !important; display: none !important; }
a[href*="accesorios-ordenador"] span::before { content: "\f8cc" !important; }
a[href*="cuidado-y-proteccion"] span::before { content: "\f3ed" !important; }
a[href*="cartuchos-y-toner"] span::before    { content: "\f043" !important; }


/* ==========================================================================
   5. BLOQUE 4: ROPA Y SEGURIDAD LABORAL (Morado / Lila)
   ========================================================================== */

/* Título superior del Bloque 4 */
a[href*="prevencion-y-seguridad"]::before {
  content: "ROPA Y SEGURIDAD LABORAL" !important;
  display: block !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  background-color: #D2CBFB !important;
  color: #3B3270 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 15px 10px !important;
  margin: -8px -12px 8px -12px !important;
  text-transform: uppercase !important;
  box-sizing: content-box !important;
}

/* Colores de fondo del Bloque 4 */
a[href*="prevencion-y-seguridad"],
a[href*="uniformes-de-trabajo"] {
  background-color: #F4F2FF !important;
  color: #3B3270 !important;
  border-bottom: 1px solid #E4E0FB !important;
}

a[href*="prevencion-y-seguridad"]:hover,
a[href*="uniformes-de-trabajo"]:hover {
  background-color: #E6E0FD !important;
}

/* Iconos del Bloque 4 */
a[href*="prevencion-y-seguridad"] span::before { content: "\f3ed" !important; }
a[href*="uniformes-de-trabajo"] span::before   { content: "\f553" !important; }


ul#menu > li > a {
     padding: 0 10px 0 0px;
}

body .advtm_menu_actif span {
        background-color: transparent !important;
}