/* =========================
   ADMIN BAR BASE
========================= */

#wpadminbar{
  background: #1e1e1e !important;
  backdrop-filter: blur(3px) !important;
  border-radius: 0px 0px 10px 10px;
  padding: 2px;
  height: 33px !important;
}

#adminmenu {
  margin-top: 10px !important;
  padding: 3px !important;
  border-radius: 10px;
  margin-left: 3px !important;
}

/* Items */
#wpadminbar .ab-item,
#wpadminbar a.ab-item{
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  color: #ffffff !important;
}

/* Hover items */
#wpadminbar .ab-item:hover{
  background: rgb(0 0 0 / 50%) !important;
}

/* focus items */
#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item{
  background: rgb(0 0 0 / 50%) !important;
}


/* text items color */
#wpadminbar .ab-empty-item, #wpadminbar a.ab-item, #wpadminbar>#wp-toolbar span.ab-label, #wpadminbar>#wp-toolbar span.noticon{
  color: #ffffff !important;
}

/* woo status color */
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item{
  background: #0073ff !important;
  color: #ffffff !important;
}

/* icons color */

#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before{
  color: #ffffff !important;
  transition: all 0.3s ease-in-out;
}

/* Submenu (Dropdown) */

#wpadminbar .menupop .ab-sub-wrapper{
  background: #1e1e1e !important;
  border-radius: 10px !important;
  padding: 1px !important;
}

#wpadminbar .quicklinks .menupop ul.ab-sub-secondary{
 background: #1e1e1e !important;
}

/* items submenu */
#wpadminbar .ab-submenu .ab-item{
  color: #ffffff !important;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

/* hover subemnu */
#wpadminbar .ab-submenu .ab-item:hover{
  box-shadow: inset 0px 0 0 0 !important;
  background-color: rgb(0 0 0 / 0%) !important;
  transition: all 0.5s ease-in-out;
  color: #aeaeae !important;
   
}

/* Animacion Top Bar */

/* estado base */
#wpadminbar .ab-sub-wrapper{
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: 
        opacity 0.5s ease,
        transform 0.5s ease,
        visibility 0s linear 0.5s; /* 🔥 delay para cerrar */
    pointer-events: none;
}

/* estado abierto */
#wpadminbar .menupop.hover > .ab-sub-wrapper{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: 
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0s linear 0s; /* sin delay al abrir */
    pointer-events: auto;
}


/* topbar.css */

/* Reemplazar logo WP por tu icono */
#wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
    content: "\E771" !important;           /* código Unicode de tu icono */
    font-family: "zhapes-font" !important;  /* nombre exacto de la fuente */
    font-size: 18px;
    color: #fff;
}

/* Mantener icono al hacer hover */
#wp-admin-bar-wp-logo:hover > .ab-item .ab-icon:before {
    content: "\E771";
}

/* Opcional: fondo barra superior */
#wpadminbar {
    background-color: #1a1a1a;
}

#wp-admin-bar-wp-logo > .ab-item .ab-icon {
margin-top: -2px !important;
    
}