/* =====================================================
   Nav — Autenticación (Iniciar sesión / Registrarse)
   ===================================================== */

/* Separador vertical entre el menú principal y los accesos de cuenta */
#navmenu .nav-auth-divider {
    display: flex;
    align-items: center;
    width: 1px;
    height: 22px;
    margin: 0 8px;
    background: rgba(10, 13, 18, .12);
    pointer-events: none;
}

/* Espaciado base de los ítems de autenticación */
#navmenu .nav-auth-item {
    display: flex;
    align-items: center;
}

#navmenu .nav-auth-item > a {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Botón "Registrarse" */
#navmenu .nav-auth-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 10px 22px !important;
    border-radius: 999px;
    background: var(--dch-accent, #5d8c3f);
    color: #fff !important;
    font-weight: 600;
    line-height: 1;
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}

#navmenu .nav-auth-cta:hover {
    background: var(--dch-accent-dark, #4a7032);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

#navmenu .nav-auth-cta i {
    font-size: 13px;
    transition: transform .2s ease;
}

#navmenu .nav-auth-cta:hover i {
    transform: translateX(3px);
}

/* =====================================================
   Fix layout header: logo + nav en flujo normal
   ===================================================== */

/* El header-container ya es flex; nos aseguramos que
   logo y navmenu convivan sin solapamiento */
.header-container {
    gap: 0;
}

.header .logo {
    position: static !important;   /* anula cualquier absolute del tema */
    flex: 0 0 auto;
    z-index: auto;
    margin-right: auto;            /* empuja el nav a la derecha */
}

#navmenu {
    position: static !important;   /* anula absolute del tema */
    flex: 0 0 auto;                /* no estira, solo ocupa lo que necesita */
}

/* El ul raíz: flex en fila, pegado a la derecha */
#navmenu > ul {
    position: static !important;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Eliminamos cualquier transform/left centrado del tema */
    left: auto !important;
    transform: none !important;
}

/* Menú móvil: restaurar comportamiento vertical */
@media (max-width: 1199px) {
    #navmenu .nav-auth-divider {
        display: none;
    }

    #navmenu .nav-auth-cta {
        margin: 8px 0 0;
        justify-content: center;
        width: 100%;
        padding: 12px 22px !important;
    }

    /* En móvil el ul vuelve a ser el panel lateral/vertical del tema */
    #navmenu > ul {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .header .logo {
        margin-right: auto;
    }
}