/* ===================================================================
   MENÚ USUARIO LOGUEADO - Cabecera Astra
=================================================================== */

/* -------------------------------------------------
   Ocultar / mostrar elementos según login
------------------------------------------------- */
.usuario-no-logueado .ast-builder-menu-2 { display: none !important; }
.usuario-logueado .ast-builder-layout-element.ast-header-button-1 { display: none !important; }
.usuario-logueado .ast-header-html-1 { display: none !important; }

/* -------------------------------------------------
   Contenedor del menú
------------------------------------------------- */
#ast-hf-menu-2 {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-direction: row !important;
}

/* -------------------------------------------------
   Nombre de usuario (trigger)
------------------------------------------------- */
#ast-hf-menu-2 .menu-nombre {
    list-style: none;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 100001;
}

#ast-hf-menu-2 .menu-nombre span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #212121;
    padding: 6px 4px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

/* Texto "Hola, " en gris y nombre en color corporativo */
#ast-hf-menu-2 .menu-nombre span::before {
    content: "Hola, ";
    color: #212121;
    font-weight: 400;
}

/* Flecha del nombre */
#ast-hf-menu-2 .menu-nombre span::after {
    font-family: dashicons;
    content: "\f347";
    font-size: 16px;
    color: #212121;
    transition: transform 0.25s ease;
    display: inline-block;
    margin-left: 2px;
    text-decoration: none;
}

/* Rotar la flecha cuando está abierto */
#ast-hf-menu-2.abierto .menu-nombre span::after {
    transform: rotate(180deg);
}

#ast-hf-menu-2 .menu-nombre:hover span {
    color: #212121;
}

/* -------------------------------------------------
   Ocultar items del submenú por defecto
------------------------------------------------- */
#ast-hf-menu-2 li.menu-item:not(.menu-nombre) {
    display: none;
}

/* -------------------------------------------------
   Submenú desplegable
------------------------------------------------- */
/* Contenedor visual del submenú con borde (usando pseudoelemento) */
#ast-hf-menu-2 li.menu-item:not(.menu-nombre) {
    display: none;
}

#ast-hf-menu-2.abierto li.menu-item:not(.menu-nombre) {
    display: block;
    position: absolute;
    background: #fff;
    min-width: 220px;
    z-index: 100000;
    left: 0;
}

/* Solo el primer item visible pone el borde y sombra arriba */
#ast-hf-menu-2.abierto li.menu-item:nth-child(2) {
    top: 38px;
    border-radius: 8px 8px 0 0;
    border-top: 3px solid #00ffff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    padding-top: 6px;
}

/* Solo el último item pone el borde y sombra abajo */
#ast-hf-menu-2.abierto li.menu-item:last-child {
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 12px rgba(0,0,0,0.08);
    padding-bottom: 6px;
}

/* Items intermedios sin redondeo */
#ast-hf-menu-2.abierto li.menu-item:not(:nth-child(2)):not(:last-child):not(.menu-nombre) {
    box-shadow: none;
}

/*Posición de cada item */
#ast-hf-menu-2.abierto li.menu-item:nth-child(2) { top: 38px; }
#ast-hf-menu-2.abierto li.menu-item:nth-child(3) { top: 86px; }
#ast-hf-menu-2.abierto li.menu-item:nth-child(4) { top: 134px; }

/* -------------------------------------------------
   Links del submenú
------------------------------------------------- */
#ast-hf-menu-2 .menu-item a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    color: #212121 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    border-bottom: 1px solid #f0f0f0;
}

#ast-hf-menu-2 li.menu-item:last-child a {
    border-bottom: none;
}

#ast-hf-menu-2 .menu-item a:hover {
    background-color: #00ffff !important;
    color: #212121 !important;
}

/* poner dashicons */
#ast-hf-menu-2 li.menu-item:nth-child(2) a::before { 
    font-family: dashicons;
    content: "\f110";
    font-size: 16px;
    color: #212121;
    transition: color 0.2s ease;
}

#ast-hf-menu-2 li.menu-item:nth-child(3) a::before { 
    font-family: dashicons;
    content: "\f112";
    font-size: 16px;
    color: #212121;
    transition: color 0.2s ease;
}

#ast-hf-menu-2 li.menu-item:nth-child(4) a::before { 
    font-family: dashicons;
    content: "\f14a";
    font-size: 16px;
    color: #212121;
    transition: color 0.2s ease;
    transform: rotate(180deg);
}

/* Color icono en hover */
#ast-hf-menu-2 .menu-item a:hover::before {
    color: #212121;
}

/* -------------------------------------------------
   Animación entrada
------------------------------------------------- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------------------------------------
   Responsive
------------------------------------------------- */
/* A partir de 1600px anclar a la derecha */
@media (max-width: 1600px) {
    #ast-hf-menu-2.abierto li.menu-item:not(.menu-nombre) {
        left: auto !important;
        right: 0 !important;
    }
}

/* -------------------------------------------------
   Responsive móvil - menú logueado
------------------------------------------------- */
@media (max-width: 921px) {

.ast-header-break-point .main-header-menu {
    background-color: #fff !important;
    border-top-width: 0;
}

    /* Nombre de usuario */
    #ast-hf-menu-2-mobile .menu-nombre {
        cursor: pointer;
        user-select: none;
    }

    #ast-hf-menu-2-mobile .menu-nombre span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 500;
        color: #212121;
        padding: 6px 4px;
        white-space: nowrap;
    }

    #ast-hf-menu-2-mobile .menu-nombre span::before {
        content: "Hola, ";
        color: #212121;
        font-weight: 400;
    }

    #ast-hf-menu-2-mobile .menu-nombre span::after {
        font-family: dashicons;
        content: "\f347";
        font-size: 16px;
        color: #212121;
        transition: transform 0.25s ease;
        display: inline-block;
        margin-left: 2px;
    }

    #ast-hf-menu-2-mobile.abierto .menu-nombre span::after {
        transform: rotate(180deg);
    }

    /* Ocultar items por defecto */
    #ast-hf-menu-2-mobile li.menu-item:not(.menu-nombre) {
        display: none !important;
    }

    /* Mostrar al abrir */
    #ast-hf-menu-2-mobile.abierto li.menu-item:not(.menu-nombre) {
        display: block !important;
        position: static !important;
        background: #fff;
        box-shadow: none;
    }

    /* Borde superior solo en el primer item */
    #ast-hf-menu-2-mobile.abierto li.menu-item:nth-child(2) {
        border-top: 3px solid #00ffff;
        border-radius: 0;
        box-shadow: none;
        padding-top: 4px;
    }

    /* Links */
    #ast-hf-menu-2-mobile .menu-item a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 0;
        color: #212121 !important;
        font-size: 14px;
        border-bottom: 1px solid #f0f0f0;
    }

    #ast-hf-menu-2-mobile li.menu-item:last-child a {
        border-bottom: none;
    }

    /* Iconos dashicons */
    #ast-hf-menu-2-mobile li.menu-item:nth-child(2) a::before {
        font-family: dashicons;
        content: "\f110";
        font-size: 16px;
        color: #212121;
    }

    #ast-hf-menu-2-mobile li.menu-item:nth-child(3) a::before {
        font-family: dashicons;
        content: "\f112";
        font-size: 16px;
        color: #212121;
    }

    #ast-hf-menu-2-mobile li.menu-item:nth-child(4) a::before {
        font-family: dashicons;
        content: "\f14a";
        font-size: 16px;
        color: #212121;
    }
}

@media (max-width: 768px) {
    #ast-hf-menu-2.abierto li.menu-item:not(.menu-nombre) {
        right: 0;
        left: auto;
        min-width: 180px;
    }
}