/* ===========================
   MENU CORPORATIVO
   =========================== */

nav{
    margin-left:auto;
}

.menu{
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
}

.menu > li{
    position:relative;
}

.menu > li > a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:18px 20px;
    color:#ffffff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:.95rem;
    font-weight:600;
    border-radius:10px;
    transition:.3s;
}

.menu > li > a i{
    font-size:.75rem;
    color:#D4AF37;
}

.menu > li > a:hover{
    color:#D4AF37;
    background:rgba(212,175,55,.08);
}

.menu > li > a::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:8px;
    height:2px;
    background:#D4AF37;
    transform:scaleX(0);
    transform-origin:center;
    transition:.3s;
}

.menu > li:hover > a::after{
    transform:scaleX(1);
}

/* Submenús */

.submenu{
    list-style:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:270px;
    background:#111;
    border:1px solid rgba(212,175,55,.35);
    border-top:3px solid #D4AF37;
    border-radius:0 0 12px 12px;

    overflow:visible;   /* <-- ESTE ES EL ERROR */

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.25s;
    box-shadow:0 15px 35px rgba(0,0,0,.45);

    z-index:9999;
}

.menu li:hover>.submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.submenu > li > a{

    display:flex;
    justify-content:space-between;
    align-items:center;

    color:#ddd;
    text-decoration:none;

    padding:14px 18px;

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:.25s;

    font-size:.92rem;

    white-space:nowrap;
}

.submenu li:last-child a{
    border-bottom:none;
}

.submenu li a:hover{
    background:#D4AF37;
    color:#000;
    padding-left:26px;
}

/* Responsive */

@media (max-width:992px){

nav{
    width:100%;
}

.menu{
    flex-direction:column;
    align-items:stretch;
    gap:0;
}

.menu>li>a{
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.submenu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    min-width:100%;
    border-radius:0;
    border-top:none;
}

.menu li:hover>.submenu{
    display:block;
}

}

/*=========================
SUBMENU NIVEL 2
=========================*/

.submenu-item{

    position:relative;

}

.submenu-level2{

    display:none;

    position:absolute;

    top:-1px;

    left:100%;

    min-width:300px;

    background:#111;

    border:1px solid rgba(212,175,55,.35);

    border-left:3px solid #D4AF37;

    list-style:none;

    z-index:10000;
}

/*=========================================
SUBMENÚ NIVEL 2 HACIA LA IZQUIERDA
(SOLO REPSE Y NÓMINAS)
=========================================*/

.submenu-left > .submenu-item{
    position:relative;
}

.submenu-left > .submenu-item > .submenu-level2{

    left:auto;
    right:100%;
    top:0;

}

.submenu-item:hover>.submenu-level2{

    display:block;

}

.submenu-level2 li a{

    display:block;

    padding:14px 18px;

    color:#ddd;

    text-decoration:none;

    border-bottom:1px solid rgba(255,255,255,.05);
}

.submenu-level2 li:last-child a{

    border-bottom:none;

}

.submenu-level2 li a:hover{

    background:#D4AF37;

    color:#000;

}

/*======================================
SUBMENÚS QUE ABREN HACIA ARRIBA
======================================*/

.submenu-item.submenu-up .submenu-level2{

    top:auto;
    bottom:0;

}

/* Centrar submenú nivel 2 SIROC */
.submenu-level2 li a{
    text-align:center;
    display:block;
}

/* Centrar completamente nivel 2 */
.submenu-level2{
    text-align:center;
}

.submenu-level2 li{
    text-align:center;
}

.submenu-level2 li a{
    display:block;
    text-align:center;
}

/*================================================
SOMBREADO DE LA OPCIÓN DEL PRIMER NIVEL
MIENTRAS SE VISUALIZA EL SEGUNDO NIVEL
================================================*/

.submenu-item > a{
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}

/* Mantiene sombreada la opción padre */
.submenu-item:hover > a,
.submenu-item:focus-within > a{
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0.28),
        rgba(212, 175, 55, 0.08)
    );

    color: #D4AF37;
    padding-left: 22px;
    box-shadow: inset 4px 0 0 #D4AF37;
}

/* Cambia también el color de la flecha */
.submenu-item:hover > a i,
.submenu-item:focus-within > a i{
    color: #D4AF37;
}

/* Mostrar el segundo nivel */
.submenu-item:hover > .submenu-level2,
.submenu-item:focus-within > .submenu-level2{
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Opción seleccionada */
.submenu-item.activo > a{
    background: linear-gradient(
        90deg,
        rgba(212,175,55,.32),
        rgba(212,175,55,.10)
    );
    color:#D4AF37;
    padding-left:22px;
    box-shadow:inset 4px 0 #D4AF37;
}

.submenu-item.activo > .submenu-level2{
    display:block;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.submenu-item.activo > a i{
    color:#D4AF37;
}

/* =========================================
   MENÚ RESPONSIVE
========================================= */

@media screen and (max-width: 768px) {

    nav {
        width: 100%;
        margin-top: 15px;
    }

    nav > ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    nav > ul > li {
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        width: 100%;
        padding: 12px;
    }

    .submenu,
    .submenu-level2 {
        position: static;
        width: 100%;
        min-width: 100%;
        transform: none;
        box-shadow: none;
    }
}

/* =========================================
   MENÚ PARA ANDROID
========================================= */

@media screen and (max-width: 767px) {

    nav {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    nav > ul {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    nav ul li {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    nav ul li a {
        width: 100% !important;
        display: block !important;
        padding: 13px 10px !important;
        white-space: normal !important;
    }

    .submenu,
    .submenu-level2 {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-shadow: none !important;
    }
}