.nav ul,.mobile-menu ul{list-style:none;}


.top-bar{
  background:var(--color-primary);
  color:var(--color-white);
  text-align:center;
  padding:10px;
  font-size:14px;
}

.bg-profesional{
  background-color: var(--color-tertiary);
}

.btnProfessional{
    width:120px;
    height:30px;
    position:absolute;
    right:30px;
    z-index:2;
}


 .search-loading {
    padding: 20px;
    text-align: center;
    color: #999;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    transition: background 0.2s;
}

.result-item:hover {
    background: #f5f5f5;
}

.result-img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.result-info {
    flex: 1;
}

.result-name {
    display: block;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.result-price {
    display: block;
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 600;
}

.btnProfessional a{
    padding:8px 15px;
    max-height:30px;
    font-size:14px;
    color:var(--color-primary);
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:var(--color-primary-light);
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    text-decoration:none;
    transition: all ease .3s;
}

.btnProfessional a:hover{
    background-color:var(--color-secondary);
    color:var(--color-white)
}

/* Clase para mantener el after activo permanentemente */
.menu li.activemenu > a::after,
.principalMenu .activemenu > a::after {
  width: 100% !important;
  background: var(--color-primary);
}

/* Clase para mantener el after activo permanentemente en .amenuprin */
.activemenu > a.amenuprin::after {
  width: 100% !important;
}




.btnProfessionalMobile{
    position:absolute;
    width:120px;
    height:25px;
    top:20px;
    left:20px;
    z-index:2;
}

.btnProfessionalMobile a{
    padding:5px 15px;
    font-size:14px;
    text-align:center;
    color:var(--color-primary);
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:var(--color-primary-light);
    border-radius:5px;
    text-decoration:none;
    transition: all ease .3s;
}

.btnProfessionalMobile a:hover{
    background-color:var(--color-secondary);
    color:var(--color-white)
}



.containerMenuSup{
  margin:0 auto;
  max-width:1400px;
  background:var(--color-white);
    position:relative;
}

.header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 30px;
  width:100%;
}


.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:15px;


  width:10%;
  top: 55px;
    z-index: 1;
    position: relative;

}








.header-left{justify-content:flex-start;}
.header-right{justify-content:flex-end;}


.header-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.logo{
  display:flex;
  justify-content:center;
  align-items:center;
  width:160px; /*acomodar el ancho del contendor del logo*/
  height:auto;/*... el alto ... logo*/
  margin-top:10px;
}

.logo img{
  width:100%;
  height:100%;
}


.login{
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--color-white);
  font-size:12px;
  background-color:var(--color-secondary);
  padding:5px 8px;
  height:30px;
  text-align:center;
  border-radius:5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  transition:all ease .3s;
}

.login:hover{
  background-color: var(--color-secondary-hover);
}

/* carrito */
.openCart{
  position:relative;
}
.count{
  position:absolute;
  top:-7px;
  right:-9px;
  background:var(--color-secondary);
  color:var(--color-white);
  border-radius:50%;
  font-size:11px;
  padding:2px 6px;
  min-width:20px;
  display:flex;
  justify-content:center;
}


.nav{
  background:var(--color-white);
  position:relative;
}

.menu{
  display:flex;
  justify-content:center;
  gap:40px;
}

/* solo dropdowns normales */
.menu li:not(.mega) {
  position: relative;
}

/* mega menú SIN relative */
.menu .mega {
  position: static;
  z-index:1;
}

.menu a{
  text-decoration:none;
  color:var(--color-secondary);
  position:relative;
}

.principalMenu .amenuprin{
    padding:15px 5px;
}

.item:hover a{
    color:var(--color-white) !important;
}


/* línea animada */
.principalMenu .amenuprin::after{
  content:"";
  position:absolute;
  left:0;
  bottom:5px;
  width:0;
  height:2px;
  background:var(--color-primary);
  transition:.3s;
}

.menu li:hover > a::after{
  width:100%;
}

/* dropdown */
.submenu{
  display:none;
  position:absolute;
  top:53px;
  left:0;
  background-color:rgba(255, 255, 255, 0.976);
  min-width:180px;
  padding:15px;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  z-index:1;
}

.submenu li{
    padding:8px 5px;
    transition:all ease .3s;
}

.submenu li a:hover{
 color:var(--color-primary)
}


.dropdown:hover .submenu{
  display:block;
}

/* MEGA MENU */
.mega-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background-color:rgba(255, 255, 255, 0.976);
}

.mega:hover .mega-menu,
.mega-menu:hover {
  display: block;
}

.mega-inner{
  max-width:1400px;
  margin:auto;
  display:flex;
  justify-content:center;
  gap:100px;
  padding:40px;
  flex-wrap:wrap;
  max-height:400px;
  overflow-y: auto;
}



.auto-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 150px;
  gap:10px;
  column-gap: 60px;
  transition: all ease .3s;
}

.auto-grid li a:hover{
 color:var(--color-primary);
}

.column{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.column h4{
  color:var(--color-primary);
}

.double-col{
  display:flex;
  gap:40px;
}

/* SEARCH */
.search-overlay{
  position:fixed;
  top:-100%;
  left:0;
  width:100%;
  height:100%;
  background:var(--color-white);
  display:flex;
  justify-content:center;
  align-items:start;
  transition:.3s;
  z-index:2000;
}

.search-overlay.active{top:0;}

.search-overlay input{
  width:80%;
  padding:15px;
  font-size:20px;
}

/* MOBILE */
.hamburger{display:none;}

.mobile-menu{
  position:fixed;
  left:-300px;
  top:0px;
  width:300px;
  height:100%;
  background:var(--color-white);
  transition:.3s;
  padding:20px;
  z-index:1000;
  overflow: scroll;
}

.mobile-menu.active{left:0;}

.overlay{
  position:fixed;
  top: 0px;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
  display:none;
  z-index:900;
}

.overlay.active{display:block;}

/* acordeón */
.mobile-menu .item{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  cursor:pointer;
}

.mobile-menu .sub{
  display:none;
  padding-left:15px;
}

.mobile-menu .sub.active{
  display:block;
}

.mobile-menu i{
  transition:.3s;
}
.mobile-menu i.rotate{
  transform:rotate(180deg);
}



#openSearch{
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items: center;
  font-size:15px;
  background:var(--color-white);
  border:none;
  outline:none;
  border-radius:5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  color:var(--color-primary);
  cursor: pointer;
}

.openCart{
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items: center;
  font-size:15px;
  background:var(--color-primary);
  border:none;
  outline:none;
  border-radius:5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  color:var(--color-white);
  cursor: pointer;
}

#openMenu{
  width:30px;
  height:30px;
  justify-content:center;
  align-items: center;
  font-size:18px;
  background:var(--color-white);
  border:none;
  outline:none;
  border-radius:5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  color:var(--color-black);
  cursor: pointer;
}

#closeMenu{
  width:30px;
  height:30px;
  justify-content:center;
  align-items: center;
  font-size:18px;
  background:var(--color-black);
  border:none;
  outline:none;
  margin-left:230px;
  border-radius:5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  color:var(--color-white);
  cursor: pointer;
}








/* contenedor */
.search-container{
  width: 100%;
  max-width: 1400px;
  display: flex;
  padding:40px;
  flex-direction: column;
  gap: 15px;
}

/* input wrapper */
.search-input-wrap{
  position: relative;
}

/* input */
.search-input-wrap input{
  width: 100%;
  padding: 14px 45px 14px 15px;
  font-size: 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
}

/* botón limpiar */
.clear-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}


.close-search{
  position: absolute;
  right: 10px;
  width:40px;
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  top:10px;
  font-size:20px;
  border: none;
  cursor: pointer;
  background-color:var(--color-white);
  border-radius:5px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}


/* mostrar botón */
.clear-btn.active{
  display: block;
}


/* hint */
.search-hint{
  padding-top:20px;
  font-size: 20px;
  color: var(--color-secondary);
}


/* resultados */
.search-results{
  display: flex;
  max-height:70vh;
  overflow-y:scroll;
  flex-direction: column;
  gap: 10px;
}


/* item resultado */
.result-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  transition: 0.2s;
  cursor: pointer;
  color:var(--color-secondary);
}

.result-item:hover{
  background: #f5f5f5;
}

/* imagen */
.result-img{
  width: 50px;
  height: 50px;
  background: #eee;
  border-radius: 6px;
  flex-shrink: 0;
}

/* info */
.result-info{
  display: flex;
  flex-direction: column;
}

/* badge */
.badge{
  font-size: 11px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

/* sin resultados */
.no-results{
  text-align: center;
  color: var(--color-secondary);
  padding: 20px;
}









/* RESPONSIVE */


@media(max-width:1100px){
.menu{
gap:30px;
}
}


@media(max-width:999px){

  .header{
    padding:15px;
  }

  .btnProfessional{
    display:none;
  }

  .menu{display:none;}

  .hamburger{display:block;}

  .login-text{display:none;}


  .top-bar{
    padding:5px;
    font-size:12px;
   }



    .header-left,.header-right{
        width:33%;
        top:0;
        z-index: 1;
        position: relative;
    }

    .search-hint{
        font-size:15px;
    }


    .search-container{
      padding:10px;
    }
}


@media(max-width:370px){
  .logo{width:140px;}
}



/* contenedor general */
.mobile-menu ul {
  margin-top:20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top:1px solid #eeeeee;
  padding-top:20px;
}

/* ITEM PRINCIPAL */
.mobile-menu .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  transition: 0.3s;
  border-radius:5px;
  background-color:#fcfcfc;
}

/* hover */
.mobile-menu .item:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* activo (cuando está abierto) */
.mobile-menu .item.active {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

/* icono */
.mobile-menu .item i {
  transition: 0.3s;
}

/* rotación */
.mobile-menu .item i.rotate {
  transform: rotate(180deg);
}

/* SUBMENÚ */
.mobile-menu .sub {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-top: 5px;
  padding-left: 10px;
  border-left: 2px solid #f3f3f3;
}

/* sub activo */
.mobile-menu .sub.active {
  display: flex;
}

/* ITEMS INTERNOS */
.mobile-menu .sub li {
  padding: 10px 12px;
  border-radius: 6px;
  background: #fcfcfc;
  transition: 0.2s;
  text-decoration:none;
}

/* hover interno */
.mobile-menu .sub li:hover {
  background: #fcfcfc;
}

/* NIVEL 2 (sub dentro de sub) */
.mobile-menu .sub .sub {
  padding-left: 15px;
  border-left: 2px solid #f2f2f2;
}

/* nivel más profundo */
.mobile-menu .sub .sub li {
  background: #f5f5f5;
  font-size: 14px;
  text-decoration:none;
}

.has-sub .sub li a{
    text-decoration:none;
}
.has-sub .item{
  color:var(--color-secondary);
}


.item a{
    color:var(--color-secondary);
    text-decoration:none;
}



.menu li a,
.submenu li a,
.mega-menu a,
.mobile-menu a {
  display: block;
  width: 100%;
}