/* ============================================================
   1. OVERLAY GLOBAL (Fondo semitransparente)
   ============================================================ */
.rd-menu-overlay {
    position: fixed;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.rd-menu-overlay.rd-active {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   2. BOTÓN PRINCIPAL
   ============================================================ */
.rd-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.3s ease;
}

.rd-button-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor; 
}

/* ============================================================
   3. ESTRUCTURA BÁSICA DEL MENÚ
   ============================================================ */
.rd-nav-menu,
.rd-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rd-nav-menu li a,
.rd-sub-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.rd-has-child-icon {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.rd-prefix-item a {
    font-weight: bold;
    border-bottom: 1px solid #eee; 
    display: block !important; /* Sobrescribe el flexbox para que actúe como bloque de texto */
    white-space: normal !important; /* Obliga al texto a saltar a la siguiente línea si no cabe */
    word-wrap: break-word; /* Evita que el texto desborde la pantalla */
    line-height: 1.4; /* Mejora la legibilidad si el texto ocupa dos líneas en móvil */
}

.rd-prefix-title {
    font-weight: normal; 
    display: inline; /* Asegura que el nombre fluya de forma natural al lado del prefijo */
}

/* ============================================================
   4. ESCRITORIO (Comportamiento Dropdown normal - +1025px)
   ============================================================ */
@media (min-width: 1025px) {
    
    .rd-offcanvas-header,
    .rd-mobile-submenu-header {
        display: none !important;
    }

    .rd-menu-widget-wrapper {
        position: relative;
    }

    /* SOLUCIÓN PUNTO 3: Cierre súper suave */
    .rd-menu-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 9999;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        /* Al salir: Fade out de 0.4s y la visibilidad espera 0.4s para aplicarse */
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    }

    .rd-menu-widget-wrapper[data-trigger="hover"]:hover .rd-menu-dropdown,
    .rd-menu-widget-wrapper.rd-dropdown-active .rd-menu-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        /* Al entrar: Fade in de 0.4s, visibilidad inmediata */
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s ease;
    }

    .rd-nav-menu li {
        position: static; 
    }

    /* Submenús en Escritorio */
    .rd-sub-menu {
        position: absolute;
        top: 0; 
        left: 100%; 
        min-height: 100%; 
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transform: translateX(10px);
        box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    }

    .rd-nav-menu li:hover > .rd-sub-menu,
    .rd-sub-menu li:hover > .rd-sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s ease;
    }
}

/* ============================================================
   5. MÓVIL (Comportamiento Off-Canvas - Hasta 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    
    .rd-button-text {
        display: none !important;
    }

    .rd-menu-dropdown {
        position: fixed;
        top: 0;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        overflow-x: hidden;
        overflow-y: auto;
        transition: transform 0.3s ease-in-out; 
    }

    .rd-offcanvas-left {
        left: 0;
        transform: translateX(-100%);
    }

    .rd-offcanvas-right {
        right: 0;
        transform: translateX(100%);
    }

    .rd-menu-dropdown.rd-offcanvas-active {
        transform: translateX(0);
    }

    .rd-offcanvas-header,
    .rd-mobile-submenu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        border-bottom: 1px solid #ddd;
    }

    .rd-close-offcanvas,
    .rd-back-btn,
    .rd-close-placeholder button {
        background: transparent;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease; 
    }

    .rd-sub-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        background: #fff;
        z-index: 10;
        transform: translateX(100%); 
        transition: transform 0.3s ease-in-out; 
        visibility: hidden;
    }

    .rd-sub-menu.rd-slide-in {
        transform: translateX(0);
        visibility: visible;
    }
}

/* ============================================================
   6. LÓGICA DE ICONOS DE SUBMENÚ
   ============================================================ */
.rd-has-child-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
.rd-icon-hover {
    display: none;
}
.rd-nav-menu li a:hover .rd-icon-normal,
.rd-sub-menu li a:hover .rd-icon-normal {
    display: none;
}
.rd-nav-menu li a:hover .rd-icon-hover,
.rd-sub-menu li a:hover .rd-icon-hover {
    display: inline-flex;
}